@dynatrace/strato-components 3.2.1 → 3.3.0

package/filters/timeframe-selector/constants/timeframeSelectorMessages.js

@@ -18,10 +18,68 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var timeframeSelectorMessages_exports = {};
 __export(timeframeSelectorMessages_exports, {
+  TIMEFRAMESELECTOR_ERROR_MESSAGES: () => TIMEFRAMESELECTOR_ERROR_MESSAGES,
   TIMEFRAME_SELECTOR_MESSAGES: () => TIMEFRAME_SELECTOR_MESSAGES
 });
 module.exports = __toCommonJS(timeframeSelectorMessages_exports);
 var import_react_intl = require("react-intl");
+const TIMEFRAMESELECTOR_ERROR_MESSAGES = (0, import_react_intl.defineMessages)({
+  minBoundary: {
+    id: "KETnWaCwo9qLRQrI",
+    defaultMessage: "Only dates after {min} are available.",
+    description: "Given dates are not within the valid range."
+  },
+  maxBoundary: {
+    id: "ONYnUtFidz4+6NmE",
+    defaultMessage: "Only dates before {max} are available.",
+    description: "Given dates are not within the valid range."
+  },
+  minMaxBoundary: {
+    id: "Qm0/7EQKVXjS9tDM",
+    defaultMessage: "Only dates between {min} \u2192 {max} are available.",
+    description: "Given dates are not within the valid range."
+  },
+  invalidOrder: {
+    defaultMessage: "'from' date should be before 'to' date",
+    id: "DKFIWE64kHV1ohuk",
+    description: "Message to display if the from and to dates are in the wrong order."
+  },
+  missingFrom: {
+    defaultMessage: "Please enter a start time.",
+    id: "GUeetpTpusqFkMi+",
+    description: "From value is missing."
+  },
+  missingTo: {
+    defaultMessage: "Please enter an end time.",
+    id: "tfHTZkRc7sr/Ypcl",
+    description: "End value is missing."
+  },
+  missingFromTo: {
+    defaultMessage: "Please enter a start and end time.",
+    id: "4yANH5gdmW1efk0I",
+    description: "Start and end values are missing."
+  },
+  valueMissing: {
+    defaultMessage: "Empty timeframe.",
+    id: "QsKlSIxE+Yp58CUG",
+    description: "Timeframe selector required timeframe error hint."
+  },
+  invalidFrom: {
+    defaultMessage: "Invalid start time. Expected format: {expectedFormat}, -2h or -2d@d",
+    id: "supuOfI2cSrNKOZ/",
+    description: "Given from value is invalid"
+  },
+  invalidTo: {
+    defaultMessage: "Invalid end time. Expected format: {expectedFormat}, -2h or -2d@d",
+    id: "HL9dGWGnhYkm7OyC",
+    description: "Given to value is invalid"
+  },
+  invalidFromTo: {
+    defaultMessage: "Invalid start and end time. Expected format: {expectedFormat}, -2h or -2d@d",
+    id: "89sBAyzLbeW6GyPJ",
+    description: "Given from and to values are invalid"
+  }
+});
 const TIMEFRAME_SELECTOR_MESSAGES = (0, import_react_intl.defineMessages)({
   startTime: {
     description: "Description for the start time of the preset item value, that is shown in the tooltip",

package/filters/timeframe-selector/contexts/TimeframeSelectorContext.d.ts

@@ -2,6 +2,7 @@ import { AnchorHTMLAttributes, type ReactNode, type Context } from 'react';
 import type { RequireAtLeastOne } from 'type-fest';
 import type { AriaButtonProps, ButtonAria } from '../../../buttons/button/types/button-aria.js';
 import type { Timeframe } from '../../../core/types/time.js';
+/** @internal */
 export interface TimeframeSelectorContextProps {
     /** Current value of the timeframe selector */
     details: RequireAtLeastOne<Timeframe> | null;
@@ -9,12 +10,14 @@ export interface TimeframeSelectorContextProps {
     displayValue: ReactNode;
     /** Necessary props for the trigger. */
     triggerProps: (Partial<ButtonAria<AnchorHTMLAttributes<HTMLButtonElement>>> & AriaButtonProps) | null;
-    /** Callback triggered whenever the value of the timeframe selector changes */
-    onChange: (value: Timeframe | null) => void;
     /** Hint representation for why it is invalid. */
     hint: string;
-    /** The precision of the time shown in the display value. */
-    precision?: 'minutes' | 'seconds' | 'milliseconds';
+    readOnly?: boolean;
+    /** Whether the trigger should display its error state (combines controlState and FormFieldMessages). */
+    showError: boolean;
 }
-/** Timeframe selector context, used to access the (input) value and onChange callback in other components. */
+/**
+ * Timeframe selector context, used to access the (input) value and onChange callback in other components.
+ * @internal
+ */
 export declare const TimeframeSelectorContext: Context<TimeframeSelectorContextProps>;

package/filters/timeframe-selector/contexts/TimeframeSelectorContext.js

@@ -26,7 +26,6 @@ const TimeframeSelectorContext = (0, import_react.createContext)({
   details: null,
   displayValue: null,
   triggerProps: null,
-  onChange: () => null,
   hint: "",
-  precision: "minutes"
+  showError: false
 });

package/filters/timeframe-selector/hooks/useTooltipMessages.d.ts

@@ -17,5 +17,5 @@ interface UseTooltipValues {
 export declare function useTooltipMessages(value: RequireAtLeastOne<{
     from: string;
     to: string;
-}> | RequireAtLeastOne<Timeframe> | null, precision?: 'minutes' | 'seconds' | 'milliseconds', children?: ReactNode): UseTooltipValues;
+}> | RequireAtLeastOne<Timeframe> | null, children?: ReactNode): UseTooltipValues;
 export {};

package/filters/timeframe-selector/hooks/useTooltipMessages.js

@@ -26,25 +26,28 @@ var import_date_fns = require("date-fns");
 var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_user_preferences = require("@dynatrace-sdk/user-preferences");
-var import_SelectedOverCalendarContext = require("../../../forms/date-time-range-picker/contexts/SelectedOverCalendarContext.js");
+var import_helpers = require("../../../core/time/helpers.js");
+var import_useTimeframeStore = require("../../../core/time/timeframeStore/useTimeframeStore.js");
 var import_timeParser = require("../../../forms/forms-core/time/timeParser.js");
 var import_getTextFromNode = require("../../filter/utils/getTextFromNode.js");
 var import_timeframeSelectorMessages = require("../constants/timeframeSelectorMessages.js");
 var import_formatting = require("../utils/formatting.js");
 var import_timeframe_selection = require("../utils/timeframe-selection.js");
-function useTooltipMessages(value, precision, children) {
+function useTooltipMessages(value, children) {
   const intl = (0, import_react_intl.useIntl)();
   const { from, to } = (0, import_timeParser.parseValue)(value);
+  const isFullDay = (0, import_useTimeframeStore.useTimeframeSelectorStore)((state) => state.isFullDay);
+  const precision = (0, import_useTimeframeStore.useTimeframeSelectorStore)((state) => state.precision);
   const isAbsoluteTimeframe = from?.type === "iso8601" && to?.type === "iso8601";
   const startTime = intl.formatMessage(import_timeframeSelectorMessages.TIMEFRAME_SELECTOR_MESSAGES.startTime);
   const endTime = intl.formatMessage(import_timeframeSelectorMessages.TIMEFRAME_SELECTOR_MESSAGES.endTime);
   const duration = intl.formatMessage(import_timeframeSelectorMessages.TIMEFRAME_SELECTOR_MESSAGES.duration);
   const tooltipFormattedTimeValueStart = (0, import_react.useMemo)(
-    () => `${startTime}: ${(0, import_timeParser.getFormattedTimeValue)(from, precision)}`,
+    () => `${startTime}: ${(0, import_helpers.getFormattedTimeValue)(from, precision)}`,
     [from, precision, startTime]
   );
   const tooltipFormattedTimeValueEnd = (0, import_react.useMemo)(
-    () => `${endTime}: ${(0, import_timeParser.getFormattedTimeValue)(to, precision)}`,
+    () => `${endTime}: ${(0, import_helpers.getFormattedTimeValue)(to, precision)}`,
     [endTime, precision, to]
   );
   const formattedPresetItemValue = (0, import_react.useMemo)(
@@ -62,8 +65,7 @@ function useTooltipMessages(value, precision, children) {
     () => (0, import_getTextFromNode.getTextFromNode)(children, intl, "") || displayValue,
     [children, displayValue, intl]
   );
-  const { selectedOverCalendar } = (0, import_react.useContext)(import_SelectedOverCalendarContext.SelectedOverCalendarContext);
-  const adjustedTo = selectedOverCalendar && to?.absoluteDate ? (0, import_timeParser.getTimeValue)(
+  const adjustedTo = isFullDay && to?.absoluteDate ? (0, import_timeParser.getTimeValue)(
     (0, import_date_fns.startOfDay)(
       (0, import_date_fns.addDays)(new import_tz.TZDateMini(to.absoluteDate, (0, import_user_preferences.getTimezone)()), 1)
     ).toISOString()

package/filters/timeframe-selector/utils/getTimeframeDisplayValueProps.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
 import type { IntlShape } from 'react-intl';
 import type { RequireAtLeastOne } from 'type-fest';
+import type { Precision } from '../../../core/time/shared.types.js';
 import type { Timeframe } from '../../../core/types/time.js';
 /**
  * Converts the given timeframe into a human-readable display value string.
@@ -9,12 +10,12 @@ import type { Timeframe } from '../../../core/types/time.js';
 export declare function getTimeframeDisplayValueProps(value: RequireAtLeastOne<{
     from: string;
     to: string;
-}> | RequireAtLeastOne<Timeframe> | null, intl: IntlShape, placeholder?: string, precision?: 'minutes' | 'seconds' | 'milliseconds', presetItemLabel?: ReactNode, required?: boolean, min?: string, max?: string): {
+}> | RequireAtLeastOne<Timeframe> | null, intl: IntlShape, placeholder?: string, precision?: Precision, presetItemLabel?: ReactNode, required?: boolean, min?: string, max?: string): {
     displayValue: string;
     isInvalid: boolean;
     hint: string;
 } | {
-    displayValue: import("react/jsx-runtime.js").JSX.Element;
+    displayValue: import("react/jsx-runtime").JSX.Element;
     isInvalid: boolean;
     hint: string;
 };

package/filters/timeframe-selector/utils/getTimeframeDisplayValueProps.js

@@ -33,13 +33,13 @@ __export(getTimeframeDisplayValueProps_exports, {
 module.exports = __toCommonJS(getTimeframeDisplayValueProps_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
-var import_timeframe_selection = require("./timeframe-selection.js");
-var import_helpers = require("../../../forms/forms-core/time/helpers.js");
+var import_validation = require("../../../core/time/validation.js");
 var import_timeParser = require("../../../forms/forms-core/time/timeParser.js");
 var import_Flex = require("../../../layouts/flex/Flex.js");
 var import_ellipsis_css = require("../../../styles/ellipsis.sty.js");
 var import_Text = require("../../../typography/text/Text.js");
 var import_getTextFromNode = require("../../filter/utils/getTextFromNode.js");
+var import_timeframeSelectorMessages = require("../constants/timeframeSelectorMessages.js");
 var styles = __toESM(require("../TimeframeSelector.sty.js"));
 function getTimeframeDisplayValueProps(value, intl, placeholder, precision, presetItemLabel, required, min, max) {
   if (!value) {
@@ -71,14 +71,17 @@ function getTimeframeDisplayValueProps(value, intl, placeholder, precision, pres
   }
   let hasError = false;
   let displayValueHint = "";
-  if ((0, import_timeframe_selection.isOutsideRange)(value, min, max)) {
+  const timeBoundaryMessageData = (0, import_validation.getTimeBoundaryMessageData)(
+    { from: from ?? void 0, to: to ?? void 0 },
+    min,
+    max,
+    precision
+  );
+  if (timeBoundaryMessageData) {
     hasError = true;
-    displayValueHint = (0, import_timeParser.getOutsideRangeMessage)(
-      intl,
-      // The default min or max is set according to the Grail min or max and shouldn't show in the info message, so we treat it as if it is never set.
-      (0, import_helpers.filterOutGrailLimit)(value, min),
-      (0, import_helpers.filterOutGrailLimit)(value, max),
-      precision
+    displayValueHint = intl.formatMessage(
+      import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES[timeBoundaryMessageData.errorKey],
+      timeBoundaryMessageData.values
     );
   }
   const displayValueParts = displayValue.split(" \u2192 ");

package/filters/timeframe-selector/utils/presets-helpers.d.ts

@@ -1,4 +1,5 @@
 import type { RequireAtLeastOne } from 'type-fest';
+import type { Precision } from '../../../core/time/shared.types.js';
 import type { Timeframe as TimeframeWithTimeValue } from '../../../core/types/time.js';
 /** @internal - will come from the official SDK at some point. */
 export interface Timeframe {
@@ -56,4 +57,4 @@ export declare function getTimeframePresets(): Promise<UserTimeframePresets>;
  * @returns A boolean indicating whether the given preset should be displayed as selected.
  * @internal
  */
-export declare function isPresetSelected(value: Timeframe, details: RequireAtLeastOne<TimeframeWithTimeValue> | null, precision: 'milliseconds' | 'minutes' | 'seconds' | undefined, isRecent: boolean): boolean;
+export declare function isPresetSelected(value: Timeframe, details: RequireAtLeastOne<TimeframeWithTimeValue> | null, isRecent: boolean, precision?: Precision): boolean;

package/filters/timeframe-selector/utils/presets-helpers.js

@@ -102,7 +102,7 @@ async function getTimeframePresets() {
     return { recentPresets: [] };
   });
 }
-function isPresetSelected(value, details, precision, isRecent) {
+function isPresetSelected(value, details, isRecent, precision) {
   if (isRecent) {
     return false;
   }

package/filters/timeframe-selector/utils/stepper-helpers.d.ts

@@ -1,4 +1,5 @@
 import { type IntlShape } from 'react-intl';
+import type { Precision } from '../../../core/time/shared.types.js';
 import type { Timeframe, TimeValue } from '../../../core/types/time.js';
 /**
  * Formats and returns the display value for given time values, including relative expressions.
@@ -10,10 +11,10 @@ export declare function formatStepperValues(from: TimeValue | null, to: TimeValu
  * Handles different types of timeframes: ISO8601, expressions, and rounded timeframes.
  * @internal
  */
-export declare function getTimeShift(value: Timeframe, config: {
+export declare function getTimeShift(value: Timeframe | null, config: {
     direction: 'backward' | 'forward';
     min?: string;
     max?: string;
     selectedOverCalendar?: boolean;
-    precision?: 'minutes' | 'seconds' | 'milliseconds';
+    precision?: Precision;
 }): Timeframe | undefined;

package/filters/timeframe-selector/utils/stepper-helpers.js

@@ -125,12 +125,12 @@ const clampToMax = (min, max, from, to, precision) => {
   });
   if (isFromAboveMax && isToAboveMax) {
     const _timezonedMax = new import_tz.TZDateMini(max.absoluteDate, (0, import_user_preferences.getTimezone)());
-    let adjustedFrom = new import_tz.TZDateMini(
+    const adjustedFrom = new import_tz.TZDateMini(
       (0, import_date_fns.sub)(_timezonedMax, difference),
       (0, import_user_preferences.getTimezone)()
     ).toISOString();
     if (min && (0, import_timeframe_selection.isSmallerThan)(adjustedFrom, min.absoluteDate)) {
-      adjustedFrom = min.absoluteDate;
+      return { from: min, to: max };
     }
     return {
       from: (0, import_units.parseTimeAsTimeValue)(adjustedFrom, relativeNow, precision) ?? max,
@@ -359,7 +359,7 @@ function getTimeShift(value, config) {
   const { direction, min, max, selectedOverCalendar, precision } = config;
   const isISO8601 = (type) => type === "iso8601";
   const isExpression = (type) => type === "expression";
-  if (!value.from || !value.to) {
+  if (!value?.from || !value?.to) {
     return void 0;
   }
   if (isISO8601(value.from.type) || isISO8601(value.to.type)) {

package/filters/timeframe-selector/utils/timeframe-selection.d.ts

@@ -4,7 +4,7 @@ import type { TimeValue, Timeframe } from '../../../core/types/time.js';
  * Check if a date is a given min or max. Returns false if both min and max are missing.
  * @internal
  */
-export declare function dateIsMinMax(date: TimeValue, min?: string, max?: string): boolean;
+export declare function dateIsMinMax(date?: TimeValue | null, min?: string, max?: string): boolean;
 /**
  * Check if the date value is larger than the max value.
  * Returns false if the max or value are not defined.
@@ -28,14 +28,6 @@ export declare function isOutsideRange(value?: {
     /** End of the time frame. */
     to?: string;
 } | RequireAtLeastOne<Timeframe> | null, min?: string, max?: string): boolean;
-/**
- * Type guard function that will check if the value is Timeframe with absoluteDate.
- * @internal
- */
-export declare function isTimeframeWithFromAndTo(date: RequireAtLeastOne<{
-    from: string;
-    to: string;
-}> | RequireAtLeastOne<Timeframe> | null): date is Timeframe;
 /**
  * Type guard function that will check if the value is a Timeframe or from and to String.
  * @internal

package/filters/timeframe-selector/utils/timeframe-selection.js

@@ -22,8 +22,7 @@ __export(timeframe_selection_exports, {
   isBiggerThan: () => isBiggerThan,
   isOutsideRange: () => isOutsideRange,
   isSmallerThan: () => isSmallerThan,
-  isTimeframeOrFromToString: () => isTimeframeOrFromToString,
-  isTimeframeWithFromAndTo: () => isTimeframeWithFromAndTo
+  isTimeframeOrFromToString: () => isTimeframeOrFromToString
 });
 module.exports = __toCommonJS(timeframe_selection_exports);
 var import_tz = require("@date-fns/tz");
@@ -31,7 +30,7 @@ var import_units = require("@dynatrace-sdk/units");
 var import_user_preferences = require("@dynatrace-sdk/user-preferences");
 var import_timeParser = require("../../../forms/forms-core/time/timeParser.js");
 function dateIsMinMax(date, min, max) {
-  if (!min && !max) {
+  if (!min && !max || !date) {
     return false;
   }
   const timezone = (0, import_user_preferences.getTimezone)();

package/forms/_base-input/BaseInput.css

@@ -1,6 +1,6 @@
-._1a8lqy96-3-2-1 {
-  --_1a8lqy95-3-2-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_yfwka30-3-2-1: var(--_1a8lqy95-3-2-1);
+._1a8lqy96-3-3-0 {
+  --_1a8lqy95-3-3-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_yfwka30-3-3-0: var(--_1a8lqy95-3-3-0);
   position: relative;
   display: flex;
   min-width: 0;
@@ -14,55 +14,55 @@
   transition-property: background-color, box-shadow, border-color;
   transition-duration: var(--dt-timings-fast-quick, 150ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1)), var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
-  background-color: var(--_1a8lqy95-3-2-1);
+  background-color: var(--_1a8lqy95-3-3-0);
 }
-._1a8lqy96-3-2-1:hover {
-  --_1a8lqy95-3-2-1: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1a8lqy96-3-3-0:hover {
+  --_1a8lqy95-3-3-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy96-3-2-1:active {
-  --_1a8lqy95-3-2-1: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1a8lqy96-3-3-0:active {
+  --_1a8lqy95-3-3-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy91-3-2-1 ._1a8lqy96-3-2-1 {
+._1a8lqy91-3-3-0 ._1a8lqy96-3-3-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy91-3-2-1:not(._1a8lqy92-3-2-1) ._1a8lqy96-3-2-1:hover {
+._1a8lqy91-3-3-0:not(._1a8lqy92-3-3-0) ._1a8lqy96-3-3-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy91-3-2-1:not(._1a8lqy92-3-2-1) ._1a8lqy96-3-2-1:active {
+._1a8lqy91-3-3-0:not(._1a8lqy92-3-3-0) ._1a8lqy96-3-3-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy92-3-2-1 ._1a8lqy96-3-2-1 {
+._1a8lqy92-3-3-0 ._1a8lqy96-3-3-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1a8lqy94-3-2-1:not(:hover) ._1a8lqy96-3-2-1 {
+._1a8lqy94-3-3-0:not(:hover) ._1a8lqy96-3-3-0 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy94-3-2-1:not(:hover) ._1a8lqy96-3-2-1:hover {
+._1a8lqy94-3-3-0:not(:hover) ._1a8lqy96-3-3-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1a8lqy94-3-2-1:not(:hover) ._1a8lqy96-3-2-1:active {
+._1a8lqy94-3-3-0:not(:hover) ._1a8lqy96-3-3-0:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1a8lqy94-3-2-1._1a8lqy92-3-2-1 ._1a8lqy96-3-2-1:is(:not(:hover, :active), :hover, :active) {
+._1a8lqy94-3-3-0._1a8lqy92-3-3-0 ._1a8lqy96-3-3-0:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy97-3-2-1 {
+._1a8lqy97-3-3-0 {
   padding-right: 0;
   padding-left: 0;
 }
-._1a8lqy98-3-2-1 {
+._1a8lqy98-3-3-0 {
   padding-right: 0;
 }
-._1a8lqy99-3-2-1 {
+._1a8lqy99-3-3-0 {
   padding-right: unset;
 }
-._1a8lqy9a-3-2-1 {
+._1a8lqy9a-3-3-0 {
   padding-left: unset;
 }
-._1a8lqy9b-3-2-1 {
+._1a8lqy9b-3-3-0 {
   display: block;
   text-overflow: ellipsis;
   appearance: none;
@@ -76,87 +76,87 @@
   min-width: 0;
   color: inherit;
 }
-._1a8lqy9b-3-2-1:read-only {
+._1a8lqy9b-3-3-0:read-only {
   cursor: not-allowed;
 }
-._1a8lqy9b-3-2-1:focus {
+._1a8lqy9b-3-3-0:focus {
   outline: none;
 }
-._1a8lqy9b-3-2-1::placeholder {
+._1a8lqy9b-3-3-0::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1a8lqy9b-3-2-1::-webkit-search-cancel-button {
+._1a8lqy9b-3-3-0::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
-._1a8lqy9b-3-2-1::-ms-reveal {
+._1a8lqy9b-3-3-0::-ms-reveal {
   display: none;
 }
-._1a8lqy91-3-2-1 ._1a8lqy9b-3-2-1:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-2-1 ._1a8lqy9b-3-2-1::placeholder {
+._1a8lqy91-3-3-0 ._1a8lqy9b-3-3-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-3-0 ._1a8lqy9b-3-3-0::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
   -webkit-text-fill-color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1a8lqy92-3-2-1 ._1a8lqy9b-3-2-1:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-2-1 ._1a8lqy9b-3-2-1::placeholder {
+._1a8lqy92-3-3-0 ._1a8lqy9b-3-3-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-3-0 ._1a8lqy9b-3-3-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   -webkit-text-fill-color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1a8lqy92-3-2-1 ._1a8lqy9b-3-2-1 {
+._1a8lqy92-3-3-0 ._1a8lqy9b-3-3-0 {
   cursor: not-allowed;
 }
-button ._1a8lqy9b-3-2-1 {
+button ._1a8lqy9b-3-3-0 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9c-3-2-1 {
+._1a8lqy9c-3-3-0 {
   margin: 0 var(--dt-spacings-size-4, 4px);
   padding: var(--dt-spacings-size-2, 2px) 0;
   width: var(--dt-spacings-size-28, 28px);
 }
-._1a8lqy9c-3-2-1:is(button._1a8lqy9c-3-2-1._1a8lqy9c-3-2-1) {
+._1a8lqy9c-3-3-0:is(button._1a8lqy9c-3-3-0._1a8lqy9c-3-3-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9d-3-2-1 {
+._1a8lqy9d-3-3-0 {
   margin-top: var(--dt-spacings-size-6, 6px);
   margin-bottom: var(--dt-spacings-size-6, 6px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1a8lqy91-3-2-1:not(._1a8lqy92-3-2-1) ._1a8lqy9d-3-2-1 {
+._1a8lqy91-3-3-0:not(._1a8lqy92-3-3-0) ._1a8lqy9d-3-3-0 {
   background-color: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1a8lqy94-3-2-1:not(._1a8lqy92-3-2-1):hover button {
+._1a8lqy94-3-3-0:not(._1a8lqy92-3-3-0):hover button {
   transition-property: background-color, box-shadow, border-color;
   transition-duration: var(--dt-timings-fast-quick, 150ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1)), var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1a8lqy94-3-2-1:not(._1a8lqy92-3-2-1):hover button:active {
+._1a8lqy94-3-3-0:not(._1a8lqy92-3-3-0):hover button:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy94-3-2-1:not(._1a8lqy92-3-2-1):hover button:hover {
+._1a8lqy94-3-3-0:not(._1a8lqy92-3-3-0):hover button:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy94-3-2-1:not(._1a8lqy92-3-2-1)._1a8lqy91-3-2-1:hover button {
+._1a8lqy94-3-3-0:not(._1a8lqy92-3-3-0)._1a8lqy91-3-3-0:hover button {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy94-3-2-1:not(._1a8lqy92-3-2-1)._1a8lqy91-3-2-1:hover button:active {
+._1a8lqy94-3-3-0:not(._1a8lqy92-3-3-0)._1a8lqy91-3-3-0:hover button:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy94-3-2-1:not(._1a8lqy92-3-2-1)._1a8lqy91-3-2-1:hover button:hover {
+._1a8lqy94-3-3-0:not(._1a8lqy92-3-3-0)._1a8lqy91-3-3-0:hover button:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy94-3-2-1:not(._1a8lqy92-3-2-1):hover button:is(:disabled,[aria-disabled=true]) {
+._1a8lqy94-3-3-0:not(._1a8lqy92-3-3-0):hover button:is(:disabled,[aria-disabled=true]) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a8lqy96-3-2-1:has(._1a8lqy9c-3-2-1:hover) {
+._1a8lqy96-3-3-0:has(._1a8lqy9c-3-3-0:hover) {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1a8lqy91-3-2-1 ._1a8lqy96-3-2-1:has(._1a8lqy9c-3-2-1:hover):not(._1a8lqy92-3-2-1) {
+._1a8lqy91-3-3-0 ._1a8lqy96-3-3-0:has(._1a8lqy9c-3-3-0:hover):not(._1a8lqy92-3-3-0) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy96-3-2-1:hover ._1a8lqy9d-3-2-1 {
+._1a8lqy96-3-3-0:hover ._1a8lqy9d-3-3-0 {
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._1a8lqy91-3-2-1 ._1a8lqy96-3-2-1:hover ._1a8lqy9d-3-2-1 {
+._1a8lqy91-3-3-0 ._1a8lqy96-3-3-0:hover ._1a8lqy9d-3-3-0 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._1a8lqy96-3-2-1._1a8lqy9e-3-2-1 div svg {
+._1a8lqy96-3-3-0._1a8lqy9e-3-3-0 div svg {
   fill: currentcolor;
 }

package/forms/_base-input/BaseInput.js

@@ -264,6 +264,7 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
                               className: styles.clearIconButton,
                               color: hasError ? "critical" : "neutral",
                               disabled: disabledOrAriaDisabled,
+                              "data-dt-name": "ClearAll",
                               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.XmarkIcon, {})
                             }
                           )

package/forms/_base-input/BaseInput.sty.js

@@ -33,13 +33,13 @@ module.exports = __toCommonJS(BaseInput_css_exports);
 var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_useAutofillEvent_css_ts_vanilla = require("../hooks/useAutofillEvent.css");
 var import_BaseInput_css_ts_vanilla = require("./BaseInput.css");
-var clearIconButton = "_1a8lqy9c-3-2-1";
-var container = "_1a8lqy96-3-2-1";
-var containerPadding = { none: "_1a8lqy97-3-2-1", rightNone: "_1a8lqy98-3-2-1", rightUnset: "_1a8lqy99-3-2-1", leftUnset: "_1a8lqy9a-3-2-1" };
-var disabled = "_1a8lqy92-3-2-1";
-var divider = "_1a8lqy9d-3-2-1";
-var hasError = "_1a8lqy91-3-2-1";
-var input = "_1a8lqy9b-3-2-1 _yfwka33-3-2-1 _da9a8v0-3-2-1 _da9a8v2-3-2-1 _da9a8v3-3-2-1 _da9a8vb-3-2-1";
-var isAutoFilled = "_1a8lqy9e-3-2-1";
-var variant = { "default": "_1a8lqy93-3-2-1", minimal: "_1a8lqy94-3-2-1" };
-var wrapper = "_1a8lqy90-3-2-1";
+var clearIconButton = "_1a8lqy9c-3-3-0";
+var container = "_1a8lqy96-3-3-0";
+var containerPadding = { none: "_1a8lqy97-3-3-0", rightNone: "_1a8lqy98-3-3-0", rightUnset: "_1a8lqy99-3-3-0", leftUnset: "_1a8lqy9a-3-3-0" };
+var disabled = "_1a8lqy92-3-3-0";
+var divider = "_1a8lqy9d-3-3-0";
+var hasError = "_1a8lqy91-3-3-0";
+var input = "_1a8lqy9b-3-3-0 _yfwka33-3-3-0 _da9a8v0-3-3-0 _da9a8v2-3-3-0 _da9a8v3-3-3-0 _da9a8vb-3-3-0";
+var isAutoFilled = "_1a8lqy9e-3-3-0";
+var variant = { "default": "_1a8lqy93-3-3-0", minimal: "_1a8lqy94-3-3-0" };
+var wrapper = "_1a8lqy90-3-3-0";

package/forms/_base-input/BaseInputContent.css

@@ -1,27 +1,27 @@
-._o6rxr70-3-2-1 {
+._o6rxr70-3-3-0 {
   white-space: nowrap;
   overflow: hidden;
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1a8lqy91-3-2-1 ._o6rxr70-3-2-1 {
+._1a8lqy91-3-3-0 ._o6rxr70-3-3-0 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._1a8lqy92-3-2-1 ._o6rxr70-3-2-1 {
+._1a8lqy92-3-3-0 ._o6rxr70-3-3-0 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
 }
-._o6rxr70-3-2-1:has(svg):not(:has(span)) {
+._o6rxr70-3-3-0:has(svg):not(:has(span)) {
   overflow: inherit;
 }
-._o6rxr70-3-2-1 > * {
+._o6rxr70-3-3-0 > * {
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
 }
-._o6rxr70-3-2-1 svg {
+._o6rxr70-3-3-0 svg {
   box-sizing: content-box;
   align-items: stretch;
   flex-shrink: 0;
 }
-._o6rxr70-3-2-1 svg:first-of-type {
+._o6rxr70-3-3-0 svg:first-of-type {
   align-self: center;
 }

package/forms/_base-input/BaseInputContent.sty.js

@@ -25,4 +25,4 @@ var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_useAutofillEvent_css_ts_vanilla = require("../hooks/useAutofillEvent.css");
 var import_BaseInput_css_ts_vanilla = require("./BaseInput.css");
 var import_BaseInputContent_css_ts_vanilla = require("./BaseInputContent.css");
-var content = "_o6rxr70-3-2-1 _da9a8v0-3-2-1 _da9a8v2-3-2-1 _da9a8v3-3-2-1 _da9a8vb-3-2-1";
+var content = "_o6rxr70-3-3-0 _da9a8v0-3-3-0 _da9a8v2-3-3-0 _da9a8v3-3-3-0 _da9a8vb-3-3-0";