@dynatrace/strato-components 3.13.3 → 3.14.1

package/filters/timeframe-selector/TimeframeSelector.js

@@ -23,6 +23,7 @@ module.exports = __toCommonJS(TimeframeSelector_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
 var import_react = require("react");
+var import_react_intl = require("react-intl");
 var import_PresetItem = require("./components/presets/PresetItem.js");
 var import_Presets = require("./components/presets/Presets.js");
 var import_CustomTrigger = require("./components/trigger/CustomTrigger.js");
@@ -45,12 +46,14 @@ var import_date_time = require("../../forms/forms-core/time/date-time.js");
 var import_timeParser = require("../../forms/forms-core/time/timeParser.js");
 const STEPPER_DEBOUNCE_MS = 300;
 function useSyncPropsAndState(store, memoedValue, isControlled, precision, formatString, required, formFieldMessagesDispatch, timeframeSelectorRef, debouncedOnChangeRef) {
+  const intl = (0, import_react_intl.useIntl)();
   (0, import_react.useEffect)(
     () => {
       isControlled && store.setState((state) => {
         debouncedOnChangeRef?.current?.cancel();
         const error = (0, import_validation.validate)(memoedValue ?? null, state.min, state.max, {
           formMessageDispatch: formFieldMessagesDispatch,
+          intl,
           showError: false,
           checkOrder: true,
           ref: timeframeSelectorRef,
@@ -128,6 +131,7 @@ const _TimeframeSelector = (0, import_react.forwardRef)(
     controlState,
     // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
     precision = "minutes",
+    onValidityChange,
     ...remainingProps
   }, forwardedRef) => {
     const [isControlled] = (0, import_react.useState)(propValue !== void 0);
@@ -147,6 +151,7 @@ const _TimeframeSelector = (0, import_react.forwardRef)(
     const dateTimeFromRef = (0, import_react.useRef)(null);
     const dateTimeRangePickerRef = (0, import_react.useRef)(null);
     const timeframeSelectorRef = (0, import_react.useRef)(null);
+    const intl = (0, import_react_intl.useIntl)();
     const { formatString } = (0, import_useDateTimeMessages.useDateTimeMessages)({ precision });
     const formControl = (0, import_useFormControl.useFormControl)({
       propDisabled,
@@ -173,6 +178,7 @@ const _TimeframeSelector = (0, import_react.forwardRef)(
       const value = isControlled ? memoedValue : memoedDefaultValue;
       const error = (0, import_validation.validate)(value, min, max, {
         formMessageDispatch: formFieldMessagesDispatch,
+        intl,
         precision,
         showError: false,
         checkOrder: true,
@@ -220,7 +226,8 @@ const _TimeframeSelector = (0, import_react.forwardRef)(
           formFieldMessagesDispatch,
           onChangeProp,
           debouncedOnChangeRef,
-          import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES
+          import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES,
+          intl
         )
       )
     );
@@ -243,6 +250,7 @@ const _TimeframeSelector = (0, import_react.forwardRef)(
         (state, min2, max2) => {
           const error = (0, import_validation.validate)(state.timeframeSelectorTimeframe, min2, max2, {
             formMessageDispatch: formFieldMessagesDispatch,
+            intl,
             formerError: state.timeframeSelectorError,
             precision: state.precision,
             showError: false,
@@ -259,7 +267,7 @@ const _TimeframeSelector = (0, import_react.forwardRef)(
             dateTimeRangePickerError: error
           };
         },
-        [formFieldMessagesDispatch]
+        [formFieldMessagesDispatch, intl]
       )
     );
     const mergedRef = (0, import_useMergeRefs.useMergeRefs)([
@@ -271,6 +279,7 @@ const _TimeframeSelector = (0, import_react.forwardRef)(
       {
         ...remainingProps,
         formControl,
+        onValidityChange: controlState ? void 0 : onValidityChange,
         ref: mergedRef
       }
     ) });

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

@@ -22,5 +22,5 @@ __export(TimeframeSelector_css_exports, {
 });
 module.exports = __toCommonJS(TimeframeSelector_css_exports);
 var import_TimeframeSelector_css_ts_vanilla = require("./TimeframeSelector.css");
-var displayValueParts = "_1sqhmjg0-3-13-3";
-var root = "_1sqhmjg1-3-13-3";
+var displayValueParts = "_1sqhmjg0-3-14-1";
+var root = "_1sqhmjg1-3-14-1";

package/filters/timeframe-selector/TimeframeSelectorRoot.js

@@ -59,6 +59,7 @@ var import_FormFieldMessageBaseItem = require("../../forms/forms-core/components
 var import_useFormFieldContext = require("../../forms/forms-core/hooks/useFormFieldContext.js");
 var import_useFormFieldValidation = require("../../forms/forms-core/hooks/useFormFieldValidation.js");
 var import_useMinMaxLogger = require("../../forms/forms-core/hooks/useMinMaxLogger.js");
+var import_formfield_messages_selectors = require("../../forms/forms-core/state/formfield-messages-selectors.js");
 var import_formfield_messages_state_reducer = require("../../forms/forms-core/state/formfield-messages-state-reducer.js");
 var import_timeParser = require("../../forms/forms-core/time/timeParser.js");
 var import_useContainerFocus = require("../../forms/hooks/useContainerFocus.js");
@@ -169,6 +170,22 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
   const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(
     (state) => formValidityChangeRef.current?.(state)
   );
+  const getValidationMessage = (0, import_react.useCallback)(
+    (errorKey) => {
+      if (!errorKey) {
+        return void 0;
+      }
+      return (0, import_validation.formatTimeValidationMessage)(errorKey, intl, {
+        value,
+        min,
+        max,
+        precision,
+        expectedFormat: formatString,
+        errorMessages: import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES
+      });
+    },
+    [intl, value, min, max, precision, formatString]
+  );
   const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
     _emitValidationState,
     () => {
@@ -189,22 +206,6 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
       );
     }
   );
-  const getValidationMessage = (0, import_react.useCallback)(
-    (errorKey) => {
-      if (!errorKey) {
-        return void 0;
-      }
-      return (0, import_validation.formatTimeValidationMessage)(errorKey, intl, {
-        value,
-        min,
-        max,
-        precision,
-        expectedFormat: formatString,
-        errorMessages: import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES
-      });
-    },
-    [intl, value, min, max, precision, formatString]
-  );
   const onOpenChange = (0, import_react.useCallback)(
     (isOpen) => {
       if (!isOpen) {
@@ -366,14 +367,15 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
         type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
         payload: {
           id: triggerErrorId,
-          messageType: "formcontrol",
-          controlId: inputId
+          source: "strato"
         }
       });
-      for (const msg of formFieldMessagesState.customMessages) {
+      for (const customMessageId of (0, import_formfield_messages_selectors.getCustomMessageIds)(
+        formFieldMessagesState
+      )) {
         formFieldMessagesDispatch?.({
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
-          payload: { id: msg.id, messageType: "custom" }
+          payload: { id: customMessageId }
         });
       }
     }
@@ -397,6 +399,7 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
         });
         const errorKey = (0, import_validation.validate)(value, min, max, {
           formMessageDispatch: formFieldMessagesDispatch,
+          intl,
           precision,
           showError: false,
           checkOrder: true,
@@ -423,6 +426,7 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
         });
         const errorKey = (0, import_validation.validate)(value, min, max, {
           formMessageDispatch: formFieldMessagesDispatch,
+          intl,
           precision,
           showError: false,
           checkOrder: true,
@@ -443,6 +447,7 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
     }),
     [
       formFieldMessagesDispatch,
+      intl,
       emitValidationState,
       getValidationMessage,
       overlayState.close,
@@ -458,8 +463,7 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
         type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
         payload: {
           id: triggerErrorId,
-          messageType: "formcontrol",
-          controlId: inputId
+          source: "strato"
         }
       });
     }

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

@@ -1,4 +1,4 @@
-._at2xro0-3-13-3 {
+._at2xro0-3-14-1 {
   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-13-3 {
+._at2xro1-3-14-1 {
   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-13-3 {
+._at2xro2-3-14-1 {
   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-13-3 {
+  ._at2xro1-3-14-1 {
     flex-direction: row;
   }
 }

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

@@ -50,6 +50,7 @@ var import_useFormFieldMessagesContext = require("../../../../forms/forms-core/h
 var import_formfield_messages_state_reducer = require("../../../../forms/forms-core/state/formfield-messages-state-reducer.js");
 var import_helpers = require("../../../../forms/forms-core/time/helpers.js");
 var import_timeParser = require("../../../../forms/forms-core/time/timeParser.js");
+var import_types = require("../../../../forms/validation/types.js");
 var import_Flex = require("../../../../layouts/flex/Flex.js");
 var import_useBreakpoint = require("../../../../layouts/hooks/useBreakpoint.js");
 var import_InputGroup = require("../../../../layouts/input-group/InputGroup.js");
@@ -121,8 +122,8 @@ const CustomTimeframeSelector = () => {
     []
   );
   const [state, dispatch] = (0, import_react.useReducer)(callback, {
-    customMessages: [],
-    formControlMessages: [],
+    errors: [],
+    hints: [],
     showError,
     isTouched: showError
   });
@@ -133,6 +134,7 @@ const CustomTimeframeSelector = () => {
   (0, import_react.useEffect)(() => {
     previousErrorRef.current = (0, import_validation.validate)(value, min, max, {
       formMessageDispatch: dispatch,
+      intl,
       formerError: previousErrorRef.current,
       precision,
       showError,
@@ -145,31 +147,41 @@ const CustomTimeframeSelector = () => {
     });
     if (!nowInserted && !required && !contextRequired) {
       if (!from && to?.value === "now()") {
+        dispatch({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
+          payload: { id: hintId, source: "strato" }
+        });
         dispatch({
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
           payload: {
             id: hintId,
-            variant: "error",
-            message: intl.formatMessage(
-              import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES.missingFrom
-            ),
-            messageType: "formcontrol",
-            validityStateKey: "customError"
+            error: new import_types.ValidationError(
+              intl.formatMessage(import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES.missingFrom),
+              {
+                source: "strato",
+                validityStateKey: import_types.NativeValidityStateKeys.customError
+              }
+            )
           }
         });
         return;
       }
       if (!to && from?.value === "now()") {
+        dispatch({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
+          payload: { id: hintId, source: "strato" }
+        });
         dispatch({
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
           payload: {
             id: hintId,
-            variant: "error",
-            message: intl.formatMessage(
-              import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES.missingTo
-            ),
-            messageType: "formcontrol",
-            validityStateKey: "customError"
+            error: new import_types.ValidationError(
+              intl.formatMessage(import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES.missingTo),
+              {
+                source: "strato",
+                validityStateKey: import_types.NativeValidityStateKeys.customError
+              }
+            )
           }
         });
         return;
@@ -178,7 +190,7 @@ const CustomTimeframeSelector = () => {
         type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
         payload: {
           id: hintId,
-          messageType: "formcontrol"
+          source: "strato"
         }
       });
     }
@@ -294,31 +306,43 @@ const CustomTimeframeSelector = () => {
     if (!timeBoundaryMessageData) {
       if (!nowInserted && !required && !contextRequired) {
         if (!from && to?.value === "now()") {
+          dispatch({
+            type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
+            payload: { id: hintId, source: "strato" }
+          });
           dispatch({
             type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
             payload: {
               id: hintId,
-              variant: "error",
-              message: intl.formatMessage(
-                import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES.missingFrom
-              ),
-              messageType: "formcontrol",
-              validityStateKey: "customError"
+              error: new import_types.ValidationError(
+                intl.formatMessage(
+                  import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES.missingFrom
+                ),
+                {
+                  source: "strato",
+                  validityStateKey: import_types.NativeValidityStateKeys.customError
+                }
+              )
             }
           });
           return;
         }
         if (!to && from?.value === "now()") {
+          dispatch({
+            type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
+            payload: { id: hintId, source: "strato" }
+          });
           dispatch({
             type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
             payload: {
               id: hintId,
-              variant: "error",
-              message: intl.formatMessage(
-                import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES.missingTo
-              ),
-              messageType: "formcontrol",
-              validityStateKey: "customError"
+              error: new import_types.ValidationError(
+                intl.formatMessage(import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES.missingTo),
+                {
+                  source: "strato",
+                  validityStateKey: import_types.NativeValidityStateKeys.customError
+                }
+              )
             }
           });
           return;
@@ -328,22 +352,24 @@ const CustomTimeframeSelector = () => {
         type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
         payload: {
           id: hintId,
-          messageType: "formcontrol"
+          source: "strato"
         }
       });
       return;
     }
+    dispatch({
+      type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
+      payload: { id: hintId, source: "strato" }
+    });
     dispatch({
       type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
       payload: {
         id: hintId,
-        variant: "hint",
-        message: intl.formatMessage(
+        hint: intl.formatMessage(
           import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES[timeBoundaryMessageData.errorKey],
           timeBoundaryMessageData.values
         ),
-        messageType: "formcontrol",
-        validityStateKey: "customError"
+        source: "strato"
       }
     });
   }, [

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

@@ -23,6 +23,6 @@ __export(CustomTimeframeSelector_css_exports, {
 });
 module.exports = __toCommonJS(CustomTimeframeSelector_css_exports);
 var import_CustomTimeframeSelector_css_ts_vanilla = require("./CustomTimeframeSelector.css");
-var fieldset = "_at2xro0-3-13-3";
-var overlayRoot = "_at2xro1-3-13-3";
-var wrapper = "_at2xro2-3-13-3";
+var fieldset = "_at2xro0-3-14-1";
+var overlayRoot = "_at2xro1-3-14-1";
+var wrapper = "_at2xro2-3-14-1";

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

@@ -1,4 +1,4 @@
-._14xc6b0-3-13-3 {
+._14xc6b0-3-14-1 {
   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-13-3 {
+._14xc6b1-3-14-1 {
   overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
 }
-._14xc6b2-3-13-3 {
+._14xc6b2-3-14-1 {
   box-sizing: border-box;
   min-width: 0;
   width: 100%;
   padding: var(--dt-spacings-size-6, 6px);
 }
-._14xc6b3-3-13-3 {
+._14xc6b3-3-14-1 {
   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/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.sty.js

@@ -24,7 +24,7 @@ __export(TimeframeSelectorOverlay_css_exports, {
 });
 module.exports = __toCommonJS(TimeframeSelectorOverlay_css_exports);
 var import_TimeframeSelectorOverlay_css_ts_vanilla = require("./TimeframeSelectorOverlay.css");
-var footer = "_14xc6b2-3-13-3";
-var hint = "_14xc6b3-3-13-3";
-var scrollContainer = "_14xc6b1-3-13-3";
-var wrapper = "_14xc6b0-3-13-3";
+var footer = "_14xc6b2-3-14-1";
+var hint = "_14xc6b3-3-14-1";
+var scrollContainer = "_14xc6b1-3-14-1";
+var wrapper = "_14xc6b0-3-14-1";

package/filters/timeframe-selector/components/presets/Presets.css

@@ -1,11 +1,11 @@
-._14rlfn30-3-13-3 {
+._14rlfn30-3-14-1 {
   justify-content: space-between;
   align-items: center;
   grid: auto / auto-flow;
   grid-template-columns: auto 1fr;
   max-height: var(--dt-spacings-size-20, 20px);
 }
-._14rlfn31-3-13-3 {
+._14rlfn31-3-14-1 {
   position: relative;
   list-style: none;
   cursor: pointer;
@@ -16,45 +16,45 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   outline-offset: calc(var(--dt-spacings-size-2, 2px) * -1);
 }
-._14rlfn32-3-13-3 {
+._14rlfn32-3-14-1 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._14rlfn32-3-13-3:hover {
+._14rlfn32-3-14-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._14rlfn32-3-13-3:active {
+._14rlfn32-3-14-1:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._14rlfn33-3-13-3 {
+._14rlfn33-3-14-1 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn33-3-13-3:hover {
+._14rlfn33-3-14-1:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._14rlfn33-3-13-3:active {
+._14rlfn33-3-14-1:active {
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._14rlfn34-3-13-3 {
+._14rlfn34-3-14-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._14rlfn36-3-13-3 {
+._14rlfn36-3-14-1 {
   min-width: 0;
 }
-._14rlfn37-3-13-3 {
+._14rlfn37-3-14-1 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
 }
-._14rlfn38-3-13-3 {
+._14rlfn38-3-14-1 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._14rlfn39-3-13-3::before {
+._14rlfn39-3-14-1::before {
   content: "";
   position: absolute;
   width: 2px;
@@ -62,62 +62,62 @@
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3a-3-13-3::before {
+._14rlfn3a-3-14-1::before {
   content: "";
 }
-._14rlfn3b-3-13-3::before {
+._14rlfn3b-3-14-1::before {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3c-3-13-3::before {
+._14rlfn3c-3-14-1::before {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3e-3-13-3 {
+._14rlfn3e-3-14-1 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
   text-align: right;
 }
-._14rlfn3f-3-13-3 {
+._14rlfn3f-3-14-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14rlfn3g-3-13-3 {
+._14rlfn3g-3-14-1 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn3h-3-13-3 {
+._14rlfn3h-3-14-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._14rlfn3i-3-13-3 {
+._14rlfn3i-3-14-1 {
   position: absolute;
   width: 2px;
   height: 20px;
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3j-3-13-3 {
+._14rlfn3j-3-14-1 {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3k-3-13-3 {
+._14rlfn3k-3-14-1 {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3l-3-13-3 {
+._14rlfn3l-3-14-1 {
   position: relative;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
-._14rlfn3m-3-13-3 {
+._14rlfn3m-3-14-1 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-12, 12px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14rlfn3n-3-13-3 {
+._14rlfn3n-3-14-1 {
   flex-shrink: 0;
 }
 @media screen and (max-width: 470px) {
-  ._14rlfn3d-3-13-3 {
+  ._14rlfn3d-3-14-1 {
     display: none;
   }
 }

package/filters/timeframe-selector/components/presets/Presets.sty.js

@@ -32,14 +32,14 @@ __export(Presets_css_exports, {
 module.exports = __toCommonJS(Presets_css_exports);
 var import_Presets_css_ts_vanilla = require("./Presets.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var displayValueWrapper = "_14rlfn36-3-13-3";
-var formattedPresetValue = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3e-3-13-3", variantClassNames: { state: { rest: "_14rlfn3f-3-13-3", selected: "_14rlfn3g-3-13-3", disabled: "_14rlfn3h-3-13-3" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
-var indicatorIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3i-3-13-3", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-13-3", false: "_14rlfn3k-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
-var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn31-3-13-3", variantClassNames: { state: { rest: "_14rlfn32-3-13-3", selected: "_14rlfn33-3-13-3", disabled: "_14rlfn34-3-13-3" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
-var itemContainer = "_14rlfn30-3-13-3";
-var listContainer = "_14rlfn3l-3-13-3";
-var mediaQuery = "_14rlfn3d-3-13-3";
-var recentHeading = "_14rlfn3m-3-13-3";
-var recentIcon = "_14rlfn3n-3-13-3";
-var timeframeDisplayValue = "_14rlfn37-3-13-3";
-var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn38-3-13-3", variantClassNames: { isSelected: { true: "_14rlfn39-3-13-3", false: "_14rlfn3a-3-13-3" }, isDisabled: { true: "_14rlfn3b-3-13-3", false: "_14rlfn3c-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
+var displayValueWrapper = "_14rlfn36-3-14-1";
+var formattedPresetValue = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3e-3-14-1", variantClassNames: { state: { rest: "_14rlfn3f-3-14-1", selected: "_14rlfn3g-3-14-1", disabled: "_14rlfn3h-3-14-1" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
+var indicatorIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3i-3-14-1", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-14-1", false: "_14rlfn3k-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
+var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn31-3-14-1", variantClassNames: { state: { rest: "_14rlfn32-3-14-1", selected: "_14rlfn33-3-14-1", disabled: "_14rlfn34-3-14-1" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
+var itemContainer = "_14rlfn30-3-14-1";
+var listContainer = "_14rlfn3l-3-14-1";
+var mediaQuery = "_14rlfn3d-3-14-1";
+var recentHeading = "_14rlfn3m-3-14-1";
+var recentIcon = "_14rlfn3n-3-14-1";
+var timeframeDisplayValue = "_14rlfn37-3-14-1";
+var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn38-3-14-1", variantClassNames: { isSelected: { true: "_14rlfn39-3-14-1", false: "_14rlfn3a-3-14-1" }, isDisabled: { true: "_14rlfn3b-3-14-1", false: "_14rlfn3c-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });