@dynatrace/strato-components 3.3.3 → 3.5.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/timeframe-selector/contexts/TimeframeSelectorContext.tsx"],
-  "sourcesContent": ["import {\n  AnchorHTMLAttributes,\n  createContext,\n  type ReactNode,\n  type Context,\n} from 'react';\nimport type { RequireAtLeastOne } from 'type-fest';\n\nimport type {\n  AriaButtonProps,\n  ButtonAria,\n} from '../../../buttons/button/types/button-aria.js';\nimport type { Timeframe } from '../../../core/types/time.js';\n\n/** @internal */\nexport interface TimeframeSelectorContextProps {\n  /** Current value of the timeframe selector */\n  details: RequireAtLeastOne<Timeframe> | null;\n  /** Element displayed in the input field of the timeframe selector */\n  displayValue: ReactNode;\n  /** Necessary props for the trigger. */\n  triggerProps:\n    | (Partial<ButtonAria<AnchorHTMLAttributes<HTMLButtonElement>>> &\n        AriaButtonProps)\n    | null;\n  /** Hint representation for why it is invalid. */\n  hint: string;\n  readOnly?: boolean;\n  /** Whether the trigger should display its error state (combines controlState and FormFieldMessages). */\n  showError: boolean;\n}\n\n/**\n * Timeframe selector context, used to access the (input) value and onChange callback in other components.\n * @internal\n */\nexport const TimeframeSelectorContext: Context<TimeframeSelectorContextProps> =\n  createContext<TimeframeSelectorContextProps>({\n    details: null,\n    displayValue: null,\n    triggerProps: null,\n    hint: '',\n    showError: false,\n  });\n"],
-  "mappings": "AAAA;AAAA,EAEE;AAAA,OAGK;AA+BA,MAAM,2BACX,cAA6C;AAAA,EAC3C,SAAS;AAAA,EACT,cAAc;AAAA,EACd,cAAc;AAAA,EACd,MAAM;AAAA,EACN,WAAW;AACb,CAAC;",
+  "sourcesContent": ["import {\n  AnchorHTMLAttributes,\n  createContext,\n  type ReactNode,\n  type Context,\n} from 'react';\nimport type { RequireAtLeastOne } from 'type-fest';\n\nimport type {\n  AriaButtonProps,\n  ButtonAria,\n} from '../../../buttons/button/types/button-aria.js';\nimport type { Timeframe } from '../../../core/types/time.js';\n\n/** @internal */\nexport interface TimeframeSelectorContextProps {\n  /** Current value of the timeframe selector */\n  details: RequireAtLeastOne<Timeframe> | null;\n  /** Element displayed in the input field of the timeframe selector */\n  displayValue: ReactNode;\n  /** Necessary props for the trigger. */\n  triggerProps:\n    | (Partial<ButtonAria<AnchorHTMLAttributes<HTMLButtonElement>>> &\n        AriaButtonProps)\n    | null;\n  /** Hint representation for why it is invalid. */\n  hint: string;\n  readOnly?: boolean;\n  /** Whether the trigger should display its error state (combines controlState and FormFieldMessages). */\n  showError: boolean;\n  /** Whether the trigger is disabled. */\n  disabled?: boolean;\n}\n\n/**\n * Timeframe selector context, used to access the (input) value and onChange callback in other components.\n * @internal\n */\nexport const TimeframeSelectorContext: Context<TimeframeSelectorContextProps> =\n  createContext<TimeframeSelectorContextProps>({\n    details: null,\n    displayValue: null,\n    triggerProps: null,\n    hint: '',\n    showError: false,\n    disabled: false,\n  });\n"],
+  "mappings": "AAAA;AAAA,EAEE;AAAA,OAGK;AAiCA,MAAM,2BACX,cAA6C;AAAA,EAC3C,SAAS;AAAA,EACT,cAAc;AAAA,EACd,cAAc;AAAA,EACd,MAAM;AAAA,EACN,WAAW;AAAA,EACX,UAAU;AACZ,CAAC;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/timeframe-selector/hooks/useTooltipMessages.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { addDays, startOfDay } from 'date-fns';\nimport { useMemo, type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\nimport { RequireAtLeastOne } from 'type-fest';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { getFormattedTimeValue } from '../../../core/time/helpers.js';\nimport { useTimeframeSelectorStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { Timeframe } from '../../../core/types/time.js';\nimport {\n  formatTimeValue,\n  formatTimeframe,\n  parseValue,\n  getTimeValue,\n} from '../../../forms/forms-core/time/timeParser.js';\nimport { getTextFromNode } from '../../filter/utils/getTextFromNode.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../constants/timeframeSelectorMessages.js';\nimport { formatTimeframeDuration } from '../utils/formatting.js';\nimport { isTimeframeOrFromToString } from '../utils/timeframe-selection.js';\n\n//#region Typings\ninterface UseTooltipValues {\n  timeframeDisplayValue: ReactNode;\n  tooltipFormattedTimeValueStart: string;\n  tooltipFormattedTimeValueEnd: string;\n  formattedPresetItemValue: string;\n  timeframeDuration: string;\n  isAbsoluteTimeframe: boolean;\n  isInvalid: boolean;\n}\n//#endregion\n\n/**\n * Hook used to retrieve the formatted values shown in the Tooltips of the Button, stepper and PresetItems.\n * @Internal\n */\nexport function useTooltipMessages(\n  value:\n    | RequireAtLeastOne<{ from: string; to: string }>\n    | RequireAtLeastOne<Timeframe>\n    | null,\n  children?: ReactNode,\n): UseTooltipValues {\n  const intl = useIntl();\n\n  const { from, to } = parseValue(value);\n  const isFullDay = useTimeframeSelectorStore((state) => state.isFullDay);\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n\n  const isAbsoluteTimeframe =\n    from?.type === 'iso8601' && to?.type === 'iso8601';\n\n  const startTime = intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.startTime);\n  const endTime = intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.endTime);\n  const duration = intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.duration);\n\n  const tooltipFormattedTimeValueStart = useMemo(\n    () => `${startTime}: ${getFormattedTimeValue(from, precision)}`,\n    [from, precision, startTime],\n  );\n\n  const tooltipFormattedTimeValueEnd = useMemo(\n    () => `${endTime}: ${getFormattedTimeValue(to, precision)}`,\n    [endTime, precision, to],\n  );\n\n  const formattedPresetItemValue = useMemo(\n    () =>\n      `${formatTimeValue(from, precision)} \u2192 ${formatTimeValue(to, precision)}`,\n    [precision, from, to],\n  );\n\n  const { displayValue, isInvalid } = useMemo(\n    () =>\n      isTimeframeOrFromToString(value)\n        ? formatTimeframe(value, intl, precision)\n        : {\n            displayValue: '',\n            isInvalid: true,\n          },\n    [value, intl, precision],\n  );\n\n  const timeframeDisplayValue = useMemo(\n    () => getTextFromNode(children, intl, '') || displayValue,\n    [children, displayValue, intl],\n  );\n  // use start of next day when selected over calendar.\n  const adjustedTo =\n    isFullDay && to?.absoluteDate\n      ? getTimeValue(\n          startOfDay(\n            addDays(new TZDateMini(to.absoluteDate, getTimezone()), 1),\n          ).toISOString(),\n        ) ?? to\n      : to;\n\n  const timeframeDuration = useMemo(\n    () => `${duration}: ${formatTimeframeDuration(from, adjustedTo, intl)}`,\n    [duration, from, adjustedTo, intl],\n  );\n\n  return {\n    timeframeDisplayValue,\n    tooltipFormattedTimeValueStart,\n    tooltipFormattedTimeValueEnd,\n    formattedPresetItemValue,\n    timeframeDuration,\n    isAbsoluteTimeframe,\n    isInvalid,\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,SAAS,kBAAkB;AACpC,SAAS,eAA+B;AACxC,SAAS,eAAe;AAGxB,SAAS,mBAAmB;AAE5B,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAE1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,mCAAmC;AAC5C,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAkBnC,SAAS,mBACd,OAIA,UACkB;AAClB,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,MAAM,GAAG,IAAI,WAAW,KAAK;AACrC,QAAM,YAAY,0BAA0B,CAAC,UAAU,MAAM,SAAS;AACtE,QAAM,YAAY,0BAA0B,CAAC,UAAU,MAAM,SAAS;AAEtE,QAAM,sBACJ,MAAM,SAAS,aAAa,IAAI,SAAS;AAE3C,QAAM,YAAY,KAAK,cAAc,4BAA4B,SAAS;AAC1E,QAAM,UAAU,KAAK,cAAc,4BAA4B,OAAO;AACtE,QAAM,WAAW,KAAK,cAAc,4BAA4B,QAAQ;AAExE,QAAM,iCAAiC;AAAA,IACrC,MAAM,GAAG,SAAS,KAAK,sBAAsB,MAAM,SAAS,CAAC;AAAA,IAC7D,CAAC,MAAM,WAAW,SAAS;AAAA,EAC7B;AAEA,QAAM,+BAA+B;AAAA,IACnC,MAAM,GAAG,OAAO,KAAK,sBAAsB,IAAI,SAAS,CAAC;AAAA,IACzD,CAAC,SAAS,WAAW,EAAE;AAAA,EACzB;AAEA,QAAM,2BAA2B;AAAA,IAC/B,MACE,GAAG,gBAAgB,MAAM,SAAS,CAAC,WAAM,gBAAgB,IAAI,SAAS,CAAC;AAAA,IACzE,CAAC,WAAW,MAAM,EAAE;AAAA,EACtB;AAEA,QAAM,EAAE,cAAc,UAAU,IAAI;AAAA,IAClC,MACE,0BAA0B,KAAK,IAC3B,gBAAgB,OAAO,MAAM,SAAS,IACtC;AAAA,MACE,cAAc;AAAA,MACd,WAAW;AAAA,IACb;AAAA,IACN,CAAC,OAAO,MAAM,SAAS;AAAA,EACzB;AAEA,QAAM,wBAAwB;AAAA,IAC5B,MAAM,gBAAgB,UAAU,MAAM,EAAE,KAAK;AAAA,IAC7C,CAAC,UAAU,cAAc,IAAI;AAAA,EAC/B;AAEA,QAAM,aACJ,aAAa,IAAI,eACb;AAAA,IACE;AAAA,MACE,QAAQ,IAAI,WAAW,GAAG,cAAc,YAAY,CAAC,GAAG,CAAC;AAAA,IAC3D,EAAE,YAAY;AAAA,EAChB,KAAK,KACL;AAEN,QAAM,oBAAoB;AAAA,IACxB,MAAM,GAAG,QAAQ,KAAK,wBAAwB,MAAM,YAAY,IAAI,CAAC;AAAA,IACrE,CAAC,UAAU,MAAM,YAAY,IAAI;AAAA,EACnC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { addDays, startOfDay } from 'date-fns';\nimport { useMemo, type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { TimeValue } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { getFormattedTimeValue } from '../../../core/time/helpers.js';\nimport { useTimeframeSelectorStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport {\n  formatTimeValue,\n  formatTimeframe,\n  parseValue,\n  getTimeValue,\n} from '../../../forms/forms-core/time/timeParser.js';\nimport { getTextFromNode } from '../../filter/utils/getTextFromNode.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../constants/timeframeSelectorMessages.js';\nimport { formatTimeframeDuration } from '../utils/formatting.js';\nimport { isTimeframeOrFromToString } from '../utils/timeframe-selection.js';\n\n//#region Typings\ninterface UseTooltipValues {\n  timeframeDisplayValue: ReactNode;\n  tooltipFormattedTimeValueStart: string;\n  tooltipFormattedTimeValueEnd: string;\n  formattedPresetItemValue: string;\n  timeframeDuration: string;\n  isAbsoluteTimeframe: boolean;\n  isInvalid: boolean;\n}\n//#endregion\n\n/**\n * Hook used to retrieve the formatted values shown in the Tooltips of the Button, stepper and PresetItems.\n * @Internal\n */\nexport function useTooltipMessages(\n  value: {\n    from: TimeValue | string | null;\n    to: TimeValue | string | null;\n  } | null,\n  children?: ReactNode,\n): UseTooltipValues {\n  const intl = useIntl();\n\n  const { from, to } = parseValue(value);\n  const isFullDay = useTimeframeSelectorStore((state) => state.isFullDay);\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n\n  const isAbsoluteTimeframe =\n    from?.type === 'iso8601' && to?.type === 'iso8601';\n\n  const startTime = intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.startTime);\n  const endTime = intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.endTime);\n  const duration = intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.duration);\n\n  const tooltipFormattedTimeValueStart = useMemo(\n    () => `${startTime}: ${getFormattedTimeValue(from, precision)}`,\n    [from, precision, startTime],\n  );\n\n  const tooltipFormattedTimeValueEnd = useMemo(\n    () => `${endTime}: ${getFormattedTimeValue(to, precision)}`,\n    [endTime, precision, to],\n  );\n\n  const formattedPresetItemValue = useMemo(\n    () =>\n      `${formatTimeValue(from, precision)} \u2192 ${formatTimeValue(to, precision)}`,\n    [precision, from, to],\n  );\n\n  const { displayValue, isInvalid } = useMemo(\n    () =>\n      isTimeframeOrFromToString(value)\n        ? formatTimeframe(value, intl, precision)\n        : {\n            displayValue: '',\n            isInvalid: true,\n          },\n    [value, intl, precision],\n  );\n\n  const timeframeDisplayValue = useMemo(\n    () => getTextFromNode(children, intl, '') || displayValue,\n    [children, displayValue, intl],\n  );\n  // use start of next day when selected over calendar.\n  const adjustedTo =\n    isFullDay && to?.absoluteDate\n      ? getTimeValue(\n          startOfDay(\n            addDays(new TZDateMini(to.absoluteDate, getTimezone()), 1),\n          ).toISOString(),\n        ) ?? to\n      : to;\n\n  const timeframeDuration = useMemo(\n    () => `${duration}: ${formatTimeframeDuration(from, adjustedTo, intl)}`,\n    [duration, from, adjustedTo, intl],\n  );\n\n  return {\n    timeframeDisplayValue,\n    tooltipFormattedTimeValueStart,\n    tooltipFormattedTimeValueEnd,\n    formattedPresetItemValue,\n    timeframeDuration,\n    isAbsoluteTimeframe,\n    isInvalid,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,SAAS,kBAAkB;AACpC,SAAS,eAA+B;AACxC,SAAS,eAAe;AAGxB,SAAS,mBAAmB;AAE5B,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,mCAAmC;AAC5C,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAkBnC,SAAS,mBACd,OAIA,UACkB;AAClB,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,MAAM,GAAG,IAAI,WAAW,KAAK;AACrC,QAAM,YAAY,0BAA0B,CAAC,UAAU,MAAM,SAAS;AACtE,QAAM,YAAY,0BAA0B,CAAC,UAAU,MAAM,SAAS;AAEtE,QAAM,sBACJ,MAAM,SAAS,aAAa,IAAI,SAAS;AAE3C,QAAM,YAAY,KAAK,cAAc,4BAA4B,SAAS;AAC1E,QAAM,UAAU,KAAK,cAAc,4BAA4B,OAAO;AACtE,QAAM,WAAW,KAAK,cAAc,4BAA4B,QAAQ;AAExE,QAAM,iCAAiC;AAAA,IACrC,MAAM,GAAG,SAAS,KAAK,sBAAsB,MAAM,SAAS,CAAC;AAAA,IAC7D,CAAC,MAAM,WAAW,SAAS;AAAA,EAC7B;AAEA,QAAM,+BAA+B;AAAA,IACnC,MAAM,GAAG,OAAO,KAAK,sBAAsB,IAAI,SAAS,CAAC;AAAA,IACzD,CAAC,SAAS,WAAW,EAAE;AAAA,EACzB;AAEA,QAAM,2BAA2B;AAAA,IAC/B,MACE,GAAG,gBAAgB,MAAM,SAAS,CAAC,WAAM,gBAAgB,IAAI,SAAS,CAAC;AAAA,IACzE,CAAC,WAAW,MAAM,EAAE;AAAA,EACtB;AAEA,QAAM,EAAE,cAAc,UAAU,IAAI;AAAA,IAClC,MACE,0BAA0B,KAAK,IAC3B,gBAAgB,OAAO,MAAM,SAAS,IACtC;AAAA,MACE,cAAc;AAAA,MACd,WAAW;AAAA,IACb;AAAA,IACN,CAAC,OAAO,MAAM,SAAS;AAAA,EACzB;AAEA,QAAM,wBAAwB;AAAA,IAC5B,MAAM,gBAAgB,UAAU,MAAM,EAAE,KAAK;AAAA,IAC7C,CAAC,UAAU,cAAc,IAAI;AAAA,EAC/B;AAEA,QAAM,aACJ,aAAa,IAAI,eACb;AAAA,IACE;AAAA,MACE,QAAQ,IAAI,WAAW,GAAG,cAAc,YAAY,CAAC,GAAG,CAAC;AAAA,IAC3D,EAAE,YAAY;AAAA,EAChB,KAAK,KACL;AAEN,QAAM,oBAAoB;AAAA,IACxB,MAAM,GAAG,QAAQ,KAAK,wBAAwB,MAAM,YAAY,IAAI,CAAC;AAAA,IACrE,CAAC,UAAU,MAAM,YAAY,IAAI;AAAA,EACnC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -44,7 +44,7 @@ function getTimeframeDisplayValueProps(value, intl, placeholder, precision, pres
   let hasError = false;
   let displayValueHint = "";
   const timeBoundaryMessageData = getTimeBoundaryMessageData(
-    { from: from ?? void 0, to: to ?? void 0 },
+    { from, to },
     min,
     max,
     precision

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/timeframe-selector/utils/getTimeframeDisplayValueProps.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type ReactNode } from 'react';\nimport type { IntlShape } from 'react-intl';\nimport type { RequireAtLeastOne } from 'type-fest';\n\nimport type { Precision } from '../../../core/time/shared.types.js';\nimport { getTimeBoundaryMessageData } from '../../../core/time/validation.js';\nimport type { Timeframe } from '../../../core/types/time.js';\nimport {\n  extractDisplayValueFromTimeValues,\n  getFromToValues,\n  parseValue,\n  messages,\n} from '../../../forms/forms-core/time/timeParser.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { ellipsis as ellipsisCSS } from '../../../styles/ellipsis.sty.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { getTextFromNode } from '../../filter/utils/getTextFromNode.js';\nimport { TIMEFRAMESELECTOR_ERROR_MESSAGES } from '../constants/timeframeSelectorMessages.js';\nimport * as styles from '../TimeframeSelector.sty.js';\n\n/**\n * Converts the given timeframe into a human-readable display value string.\n * @internal\n */\nexport function getTimeframeDisplayValueProps(\n  value:\n    | RequireAtLeastOne<{ from: string; to: string }>\n    | RequireAtLeastOne<Timeframe>\n    | null,\n  intl: IntlShape,\n  placeholder?: string,\n  precision?: Precision,\n  presetItemLabel?: ReactNode,\n  required?: boolean,\n  min?: string,\n  max?: string,\n) {\n  if (!value) {\n    return {\n      displayValue: placeholder ?? '',\n      isInvalid: !!required,\n      hint: required ? intl.formatMessage(messages.requiredTimeframe) : '',\n    };\n  }\n\n  if (presetItemLabel) {\n    return {\n      displayValue: getTextFromNode(presetItemLabel, intl, ''),\n      isInvalid: false,\n      hint: '',\n    };\n  }\n\n  const { from, to } = parseValue(value);\n  const { valueFrom, valueTo } = getFromToValues(value);\n\n  const { displayValue, hint, isInvalid } = extractDisplayValueFromTimeValues(\n    from,\n    to,\n    intl,\n    precision,\n    valueFrom,\n    valueTo,\n  );\n\n  if (isInvalid) {\n    return { displayValue, isInvalid, hint };\n  }\n\n  let hasError = false;\n  let displayValueHint = '';\n\n  const timeBoundaryMessageData = getTimeBoundaryMessageData(\n    { from: from ?? undefined, to: to ?? undefined },\n    min,\n    max,\n    precision,\n  );\n\n  if (timeBoundaryMessageData) {\n    hasError = true;\n    displayValueHint = intl.formatMessage(\n      TIMEFRAMESELECTOR_ERROR_MESSAGES[timeBoundaryMessageData.errorKey],\n      timeBoundaryMessageData.values,\n    );\n  }\n\n  const displayValueParts = displayValue.split(' \u2192 ');\n\n  const [displayValueFrom, displayValueTo] =\n    displayValueParts.length === 2 ? displayValueParts : [];\n\n  if (!displayValueFrom || !displayValueTo) {\n    return { displayValue, isInvalid: hasError, hint: displayValueHint };\n  }\n\n  return {\n    displayValue: (\n      <Flex minWidth={0} gap={4}>\n        <Text className={clsx(styles.displayValueParts, ellipsisCSS)}>\n          {displayValueFrom}\n        </Text>\n        <Text style={{ minWidth: 'unset' }}>\u2192</Text>\n        <Text className={clsx(styles.displayValueParts, ellipsisCSS)}>\n          {displayValueTo}\n        </Text>\n      </Flex>\n    ),\n    isInvalid: hasError,\n    hint: displayValueHint,\n  };\n}\n"],
-  "mappings": "AAmGM,SACE,KADF;AAnGN,OAAO,UAAU;AAMjB,SAAS,kCAAkC;AAE3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,YAAY,mBAAmB;AACxC,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,wCAAwC;AACjD,YAAY,YAAY;AAMjB,SAAS,8BACd,OAIA,MACA,aACA,WACA,iBACA,UACA,KACA,KACA;AACA,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,MACL,cAAc,eAAe;AAAA,MAC7B,WAAW,CAAC,CAAC;AAAA,MACb,MAAM,WAAW,KAAK,cAAc,SAAS,iBAAiB,IAAI;AAAA,IACpE;AAAA,EACF;AAEA,MAAI,iBAAiB;AACnB,WAAO;AAAA,MACL,cAAc,gBAAgB,iBAAiB,MAAM,EAAE;AAAA,MACvD,WAAW;AAAA,MACX,MAAM;AAAA,IACR;AAAA,EACF;AAEA,QAAM,EAAE,MAAM,GAAG,IAAI,WAAW,KAAK;AACrC,QAAM,EAAE,WAAW,QAAQ,IAAI,gBAAgB,KAAK;AAEpD,QAAM,EAAE,cAAc,MAAM,UAAU,IAAI;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,WAAW;AACb,WAAO,EAAE,cAAc,WAAW,KAAK;AAAA,EACzC;AAEA,MAAI,WAAW;AACf,MAAI,mBAAmB;AAEvB,QAAM,0BAA0B;AAAA,IAC9B,EAAE,MAAM,QAAQ,QAAW,IAAI,MAAM,OAAU;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,yBAAyB;AAC3B,eAAW;AACX,uBAAmB,KAAK;AAAA,MACtB,iCAAiC,wBAAwB,QAAQ;AAAA,MACjE,wBAAwB;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,oBAAoB,aAAa,MAAM,UAAK;AAElD,QAAM,CAAC,kBAAkB,cAAc,IACrC,kBAAkB,WAAW,IAAI,oBAAoB,CAAC;AAExD,MAAI,CAAC,oBAAoB,CAAC,gBAAgB;AACxC,WAAO,EAAE,cAAc,WAAW,UAAU,MAAM,iBAAiB;AAAA,EACrE;AAEA,SAAO;AAAA,IACL,cACE,qBAAC,QAAK,UAAU,GAAG,KAAK,GACtB;AAAA,0BAAC,QAAK,WAAW,KAAK,OAAO,mBAAmB,WAAW,GACxD,4BACH;AAAA,MACA,oBAAC,QAAK,OAAO,EAAE,UAAU,QAAQ,GAAG,oBAAC;AAAA,MACrC,oBAAC,QAAK,WAAW,KAAK,OAAO,mBAAmB,WAAW,GACxD,0BACH;AAAA,OACF;AAAA,IAEF,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AACF;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type ReactNode } from 'react';\nimport type { IntlShape } from 'react-intl';\n\nimport type { Precision } from '../../../core/time/shared.types.js';\nimport { getTimeBoundaryMessageData } from '../../../core/time/validation.js';\nimport type { Timeframe } from '../../../core/types/time.js';\nimport {\n  extractDisplayValueFromTimeValues,\n  getFromToValues,\n  parseValue,\n  messages,\n} from '../../../forms/forms-core/time/timeParser.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { ellipsis as ellipsisCSS } from '../../../styles/ellipsis.sty.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { getTextFromNode } from '../../filter/utils/getTextFromNode.js';\nimport { TIMEFRAMESELECTOR_ERROR_MESSAGES } from '../constants/timeframeSelectorMessages.js';\nimport * as styles from '../TimeframeSelector.sty.js';\n\n/**\n * Converts the given timeframe into a human-readable display value string.\n * @internal\n */\nexport function getTimeframeDisplayValueProps(\n  value: Timeframe | null,\n  intl: IntlShape,\n  placeholder?: string,\n  precision?: Precision,\n  presetItemLabel?: ReactNode,\n  required?: boolean,\n  min?: string,\n  max?: string,\n) {\n  if (!value) {\n    return {\n      displayValue: placeholder ?? '',\n      isInvalid: !!required,\n      hint: required ? intl.formatMessage(messages.requiredTimeframe) : '',\n    };\n  }\n\n  if (presetItemLabel) {\n    return {\n      displayValue: getTextFromNode(presetItemLabel, intl, ''),\n      isInvalid: false,\n      hint: '',\n    };\n  }\n\n  const { from, to } = parseValue(value);\n  const { valueFrom, valueTo } = getFromToValues(value);\n\n  const { displayValue, hint, isInvalid } = extractDisplayValueFromTimeValues(\n    from,\n    to,\n    intl,\n    precision,\n    valueFrom,\n    valueTo,\n  );\n\n  if (isInvalid) {\n    return { displayValue, isInvalid, hint };\n  }\n\n  let hasError = false;\n  let displayValueHint = '';\n\n  const timeBoundaryMessageData = getTimeBoundaryMessageData(\n    { from, to },\n    min,\n    max,\n    precision,\n  );\n\n  if (timeBoundaryMessageData) {\n    hasError = true;\n    displayValueHint = intl.formatMessage(\n      TIMEFRAMESELECTOR_ERROR_MESSAGES[timeBoundaryMessageData.errorKey],\n      timeBoundaryMessageData.values,\n    );\n  }\n\n  const displayValueParts = displayValue.split(' \u2192 ');\n\n  const [displayValueFrom, displayValueTo] =\n    displayValueParts.length === 2 ? displayValueParts : [];\n\n  if (!displayValueFrom || !displayValueTo) {\n    return { displayValue, isInvalid: hasError, hint: displayValueHint };\n  }\n\n  return {\n    displayValue: (\n      <Flex minWidth={0} gap={4}>\n        <Text className={clsx(styles.displayValueParts, ellipsisCSS)}>\n          {displayValueFrom}\n        </Text>\n        <Text style={{ minWidth: 'unset' }}>\u2192</Text>\n        <Text className={clsx(styles.displayValueParts, ellipsisCSS)}>\n          {displayValueTo}\n        </Text>\n      </Flex>\n    ),\n    isInvalid: hasError,\n    hint: displayValueHint,\n  };\n}\n"],
+  "mappings": "AA+FM,SACE,KADF;AA/FN,OAAO,UAAU;AAKjB,SAAS,kCAAkC;AAE3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,YAAY,mBAAmB;AACxC,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,wCAAwC;AACjD,YAAY,YAAY;AAMjB,SAAS,8BACd,OACA,MACA,aACA,WACA,iBACA,UACA,KACA,KACA;AACA,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,MACL,cAAc,eAAe;AAAA,MAC7B,WAAW,CAAC,CAAC;AAAA,MACb,MAAM,WAAW,KAAK,cAAc,SAAS,iBAAiB,IAAI;AAAA,IACpE;AAAA,EACF;AAEA,MAAI,iBAAiB;AACnB,WAAO;AAAA,MACL,cAAc,gBAAgB,iBAAiB,MAAM,EAAE;AAAA,MACvD,WAAW;AAAA,MACX,MAAM;AAAA,IACR;AAAA,EACF;AAEA,QAAM,EAAE,MAAM,GAAG,IAAI,WAAW,KAAK;AACrC,QAAM,EAAE,WAAW,QAAQ,IAAI,gBAAgB,KAAK;AAEpD,QAAM,EAAE,cAAc,MAAM,UAAU,IAAI;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,WAAW;AACb,WAAO,EAAE,cAAc,WAAW,KAAK;AAAA,EACzC;AAEA,MAAI,WAAW;AACf,MAAI,mBAAmB;AAEvB,QAAM,0BAA0B;AAAA,IAC9B,EAAE,MAAM,GAAG;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,yBAAyB;AAC3B,eAAW;AACX,uBAAmB,KAAK;AAAA,MACtB,iCAAiC,wBAAwB,QAAQ;AAAA,MACjE,wBAAwB;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,oBAAoB,aAAa,MAAM,UAAK;AAElD,QAAM,CAAC,kBAAkB,cAAc,IACrC,kBAAkB,WAAW,IAAI,oBAAoB,CAAC;AAExD,MAAI,CAAC,oBAAoB,CAAC,gBAAgB;AACxC,WAAO,EAAE,cAAc,WAAW,UAAU,MAAM,iBAAiB;AAAA,EACrE;AAEA,SAAO;AAAA,IACL,cACE,qBAAC,QAAK,UAAU,GAAG,KAAK,GACtB;AAAA,0BAAC,QAAK,WAAW,KAAK,OAAO,mBAAmB,WAAW,GACxD,4BACH;AAAA,MACA,oBAAC,QAAK,OAAO,EAAE,UAAU,QAAQ,GAAG,oBAAC;AAAA,MACrC,oBAAC,QAAK,WAAW,KAAK,OAAO,mBAAmB,WAAW,GACxD,0BACH;AAAA,OACF;AAAA,IAEF,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AACF;",
   "names": []
 }

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

@@ -73,7 +73,7 @@ function isOutsideRange(value, min, max) {
   return false;
 }
 function isTimeframeWithFromAndTo(date) {
-  return typeof date?.from === "object" && typeof date?.to === "object" && date.from.absoluteDate !== "" && date.to.absoluteDate !== "";
+  return typeof date?.from === "object" && typeof date?.to === "object" && date.from?.absoluteDate !== "" && date.to?.absoluteDate !== "";
 }
 function isTimeframeOrFromToString(date) {
   return typeof date?.from === "string" && typeof date?.to === "string" || isTimeframeWithFromAndTo(date);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/timeframe-selector/utils/timeframe-selection.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { type RequireAtLeastOne } from 'type-fest';\n\nimport { parseTimeAsTimeValue } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport type { TimeValue, Timeframe } from '../../../core/types/time.js';\nimport { getFromToValues } from '../../../forms/forms-core/time/timeParser.js';\n\n/**\n * Check if a date is a given min or max. Returns false if both min and max are missing.\n * @internal\n */\nexport function dateIsMinMax(\n  date?: TimeValue | null,\n  min?: string,\n  max?: string,\n): boolean {\n  if ((!min && !max) || !date) {\n    return false;\n  }\n  const timezone = getTimezone();\n  const relativeNow = TZDateMini.tz(timezone).getTime();\n\n  const isoDate = parseTimeAsTimeValue(date.value, relativeNow)?.absoluteDate;\n  const tempDate = isoDate ? new TZDateMini(isoDate, timezone) : null;\n\n  if (!tempDate) {\n    return false;\n  }\n\n  const minIsoDate = parseTimeAsTimeValue(min, relativeNow)?.absoluteDate;\n  const maxIsoDate = parseTimeAsTimeValue(max, relativeNow)?.absoluteDate;\n  const minDate = minIsoDate ? new TZDateMini(minIsoDate, timezone) : null;\n  const maxDate = maxIsoDate ? new TZDateMini(maxIsoDate, timezone) : null;\n\n  if (minDate && minDate.getTime() === tempDate.getTime()) {\n    return true;\n  }\n\n  if (maxDate && maxDate.getTime() === tempDate.getTime()) {\n    return true;\n  }\n\n  return false;\n}\n\n/**\n * Check if the date value is larger than the max value.\n * Returns false if the max or value are not defined.\n * @internal\n */\nexport function isBiggerThan(candidate?: string, threshold?: string): boolean {\n  if (!threshold || !candidate) {\n    return false;\n  }\n\n  const relativeNow = TZDateMini.tz(getTimezone()).getTime();\n\n  const maxIsoDate = parseTimeAsTimeValue(threshold, relativeNow)?.absoluteDate;\n  const valueIsoDate = parseTimeAsTimeValue(\n    candidate,\n    relativeNow,\n  )?.absoluteDate;\n\n  if (!maxIsoDate || !valueIsoDate) {\n    return false;\n  }\n\n  const maxDate = new TZDateMini(maxIsoDate, getTimezone());\n  const valueDate = new TZDateMini(valueIsoDate, getTimezone());\n\n  return valueDate.getTime() > maxDate.getTime();\n}\n\n/**\n * Check if the date value is smaller than the min value.\n * Returns false if the value or min are not defined.\n * @internal\n */\nexport function isSmallerThan(candidate?: string, threshold?: string): boolean {\n  if (!threshold || !candidate) {\n    return false;\n  }\n\n  const relativeNow = TZDateMini.tz(getTimezone()).getTime();\n\n  const minIsoDate = parseTimeAsTimeValue(threshold, relativeNow)?.absoluteDate;\n  const valueIsoDate = parseTimeAsTimeValue(\n    candidate,\n    relativeNow,\n  )?.absoluteDate;\n\n  if (!minIsoDate || !valueIsoDate) {\n    return false;\n  }\n\n  const minDate = new TZDateMini(minIsoDate, getTimezone());\n  const valueDate = new TZDateMini(valueIsoDate, getTimezone());\n\n  return valueDate.getTime() < minDate.getTime();\n}\n\n/**\n * Check if the value is outside the min - max range.\n * Returns false if the value is not defined, it the from or to values are undefined, or if min and max are both missing.\n * @internal\n */\nexport function isOutsideRange(\n  value?:\n    | {\n        /** Start of the time frame. */\n        from?: string;\n        /** End of the time frame. */\n        to?: string;\n      }\n    | RequireAtLeastOne<Timeframe>\n    | null,\n  min?: string,\n  max?: string,\n) {\n  if (!value || (!min && !max)) {\n    return false;\n  }\n\n  const { valueFrom, valueTo } = getFromToValues(value);\n\n  // Min date needs to be larger than from and to in order to be considered\n  // outside of the range.\n  if (min && (isSmallerThan(valueFrom, min) || isSmallerThan(valueTo, min))) {\n    return true;\n  }\n\n  // Max date needs to be smaller than from and to in order to be considered\n  // outside of the range.\n  if (max && (isBiggerThan(valueFrom, max) || isBiggerThan(valueTo, max))) {\n    return true;\n  }\n\n  return false;\n}\n\n/**\n * Type guard function that will check if the value is Timeframe with absoluteDate.\n * @internal\n */\nfunction isTimeframeWithFromAndTo(\n  date:\n    | RequireAtLeastOne<{ from: string; to: string }>\n    | RequireAtLeastOne<Timeframe>\n    | null,\n): date is Timeframe {\n  return (\n    typeof date?.from === 'object' &&\n    typeof date?.to === 'object' &&\n    date.from.absoluteDate !== '' &&\n    date.to.absoluteDate !== ''\n  );\n}\n\n/**\n * Type guard function that will check if the value is a Timeframe or from and to String.\n * @internal\n */\nexport function isTimeframeOrFromToString(\n  date:\n    | RequireAtLeastOne<{ from: string; to: string }>\n    | RequireAtLeastOne<Timeframe>\n    | null,\n): date is { from: string; to: string } | Timeframe {\n  return (\n    (typeof date?.from === 'string' && typeof date?.to === 'string') ||\n    isTimeframeWithFromAndTo(date)\n  );\n}\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAG3B,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAG5B,SAAS,uBAAuB;AAMzB,SAAS,aACd,MACA,KACA,KACS;AACT,MAAK,CAAC,OAAO,CAAC,OAAQ,CAAC,MAAM;AAC3B,WAAO;AAAA,EACT;AACA,QAAM,WAAW,YAAY;AAC7B,QAAM,cAAc,WAAW,GAAG,QAAQ,EAAE,QAAQ;AAEpD,QAAM,UAAU,qBAAqB,KAAK,OAAO,WAAW,GAAG;AAC/D,QAAM,WAAW,UAAU,IAAI,WAAW,SAAS,QAAQ,IAAI;AAE/D,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,qBAAqB,KAAK,WAAW,GAAG;AAC3D,QAAM,aAAa,qBAAqB,KAAK,WAAW,GAAG;AAC3D,QAAM,UAAU,aAAa,IAAI,WAAW,YAAY,QAAQ,IAAI;AACpE,QAAM,UAAU,aAAa,IAAI,WAAW,YAAY,QAAQ,IAAI;AAEpE,MAAI,WAAW,QAAQ,QAAQ,MAAM,SAAS,QAAQ,GAAG;AACvD,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,QAAQ,QAAQ,MAAM,SAAS,QAAQ,GAAG;AACvD,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAOO,SAAS,aAAa,WAAoB,WAA6B;AAC5E,MAAI,CAAC,aAAa,CAAC,WAAW;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,WAAW,GAAG,YAAY,CAAC,EAAE,QAAQ;AAEzD,QAAM,aAAa,qBAAqB,WAAW,WAAW,GAAG;AACjE,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,EACF,GAAG;AAEH,MAAI,CAAC,cAAc,CAAC,cAAc;AAChC,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,IAAI,WAAW,YAAY,YAAY,CAAC;AACxD,QAAM,YAAY,IAAI,WAAW,cAAc,YAAY,CAAC;AAE5D,SAAO,UAAU,QAAQ,IAAI,QAAQ,QAAQ;AAC/C;AAOO,SAAS,cAAc,WAAoB,WAA6B;AAC7E,MAAI,CAAC,aAAa,CAAC,WAAW;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,WAAW,GAAG,YAAY,CAAC,EAAE,QAAQ;AAEzD,QAAM,aAAa,qBAAqB,WAAW,WAAW,GAAG;AACjE,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,EACF,GAAG;AAEH,MAAI,CAAC,cAAc,CAAC,cAAc;AAChC,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,IAAI,WAAW,YAAY,YAAY,CAAC;AACxD,QAAM,YAAY,IAAI,WAAW,cAAc,YAAY,CAAC;AAE5D,SAAO,UAAU,QAAQ,IAAI,QAAQ,QAAQ;AAC/C;AAOO,SAAS,eACd,OASA,KACA,KACA;AACA,MAAI,CAAC,SAAU,CAAC,OAAO,CAAC,KAAM;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,WAAW,QAAQ,IAAI,gBAAgB,KAAK;AAIpD,MAAI,QAAQ,cAAc,WAAW,GAAG,KAAK,cAAc,SAAS,GAAG,IAAI;AACzE,WAAO;AAAA,EACT;AAIA,MAAI,QAAQ,aAAa,WAAW,GAAG,KAAK,aAAa,SAAS,GAAG,IAAI;AACvE,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAMA,SAAS,yBACP,MAImB;AACnB,SACE,OAAO,MAAM,SAAS,YACtB,OAAO,MAAM,OAAO,YACpB,KAAK,KAAK,iBAAiB,MAC3B,KAAK,GAAG,iBAAiB;AAE7B;AAMO,SAAS,0BACd,MAIkD;AAClD,SACG,OAAO,MAAM,SAAS,YAAY,OAAO,MAAM,OAAO,YACvD,yBAAyB,IAAI;AAEjC;",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\n\nimport { parseTimeAsTimeValue } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport type { TimeValue, Timeframe } from '../../../core/types/time.js';\nimport { getFromToValues } from '../../../forms/forms-core/time/timeParser.js';\n\n/**\n * Check if a date is a given min or max. Returns false if both min and max are missing.\n * @internal\n */\nexport function dateIsMinMax(\n  date?: TimeValue | null,\n  min?: string,\n  max?: string,\n): boolean {\n  if ((!min && !max) || !date) {\n    return false;\n  }\n  const timezone = getTimezone();\n  const relativeNow = TZDateMini.tz(timezone).getTime();\n\n  const isoDate = parseTimeAsTimeValue(date.value, relativeNow)?.absoluteDate;\n  const tempDate = isoDate ? new TZDateMini(isoDate, timezone) : null;\n\n  if (!tempDate) {\n    return false;\n  }\n\n  const minIsoDate = parseTimeAsTimeValue(min, relativeNow)?.absoluteDate;\n  const maxIsoDate = parseTimeAsTimeValue(max, relativeNow)?.absoluteDate;\n  const minDate = minIsoDate ? new TZDateMini(minIsoDate, timezone) : null;\n  const maxDate = maxIsoDate ? new TZDateMini(maxIsoDate, timezone) : null;\n\n  if (minDate && minDate.getTime() === tempDate.getTime()) {\n    return true;\n  }\n\n  if (maxDate && maxDate.getTime() === tempDate.getTime()) {\n    return true;\n  }\n\n  return false;\n}\n\n/**\n * Check if the date value is larger than the max value.\n * Returns false if the max or value are not defined.\n * @internal\n */\nexport function isBiggerThan(candidate?: string, threshold?: string): boolean {\n  if (!threshold || !candidate) {\n    return false;\n  }\n\n  const relativeNow = TZDateMini.tz(getTimezone()).getTime();\n\n  const maxIsoDate = parseTimeAsTimeValue(threshold, relativeNow)?.absoluteDate;\n  const valueIsoDate = parseTimeAsTimeValue(\n    candidate,\n    relativeNow,\n  )?.absoluteDate;\n\n  if (!maxIsoDate || !valueIsoDate) {\n    return false;\n  }\n\n  const maxDate = new TZDateMini(maxIsoDate, getTimezone());\n  const valueDate = new TZDateMini(valueIsoDate, getTimezone());\n\n  return valueDate.getTime() > maxDate.getTime();\n}\n\n/**\n * Check if the date value is smaller than the min value.\n * Returns false if the value or min are not defined.\n * @internal\n */\nexport function isSmallerThan(candidate?: string, threshold?: string): boolean {\n  if (!threshold || !candidate) {\n    return false;\n  }\n\n  const relativeNow = TZDateMini.tz(getTimezone()).getTime();\n\n  const minIsoDate = parseTimeAsTimeValue(threshold, relativeNow)?.absoluteDate;\n  const valueIsoDate = parseTimeAsTimeValue(\n    candidate,\n    relativeNow,\n  )?.absoluteDate;\n\n  if (!minIsoDate || !valueIsoDate) {\n    return false;\n  }\n\n  const minDate = new TZDateMini(minIsoDate, getTimezone());\n  const valueDate = new TZDateMini(valueIsoDate, getTimezone());\n\n  return valueDate.getTime() < minDate.getTime();\n}\n\n/**\n * Check if the value is outside the min - max range.\n * Returns false if the value is not defined, it the from or to values are undefined, or if min and max are both missing.\n * @internal\n */\nexport function isOutsideRange(\n  value?: {\n    /** Start of the time frame. */\n    from: string | null | TimeValue;\n    /** End of the time frame. */\n    to: string | null | TimeValue;\n  } | null,\n  min?: string,\n  max?: string,\n) {\n  if (!value || (!min && !max)) {\n    return false;\n  }\n\n  const { valueFrom, valueTo } = getFromToValues(value);\n\n  // Min date needs to be larger than from and to in order to be considered\n  // outside of the range.\n  if (min && (isSmallerThan(valueFrom, min) || isSmallerThan(valueTo, min))) {\n    return true;\n  }\n\n  // Max date needs to be smaller than from and to in order to be considered\n  // outside of the range.\n  if (max && (isBiggerThan(valueFrom, max) || isBiggerThan(valueTo, max))) {\n    return true;\n  }\n\n  return false;\n}\n\n/**\n * Type guard function that will check if the value is Timeframe with absoluteDate.\n * @internal\n */\nfunction isTimeframeWithFromAndTo(\n  date: {\n    from: string | TimeValue | null;\n    to: string | TimeValue | null;\n  } | null,\n): date is Timeframe {\n  return (\n    typeof date?.from === 'object' &&\n    typeof date?.to === 'object' &&\n    date.from?.absoluteDate !== '' &&\n    date.to?.absoluteDate !== ''\n  );\n}\n\n/**\n * Type guard function that will check if the value is a Timeframe or from and to String.\n * @internal\n */\nexport function isTimeframeOrFromToString(\n  date: {\n    from: string | TimeValue | null;\n    to: string | TimeValue | null;\n  } | null,\n): date is { from: string; to: string } | Timeframe {\n  return (\n    (typeof date?.from === 'string' && typeof date?.to === 'string') ||\n    isTimeframeWithFromAndTo(date)\n  );\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAG5B,SAAS,uBAAuB;AAMzB,SAAS,aACd,MACA,KACA,KACS;AACT,MAAK,CAAC,OAAO,CAAC,OAAQ,CAAC,MAAM;AAC3B,WAAO;AAAA,EACT;AACA,QAAM,WAAW,YAAY;AAC7B,QAAM,cAAc,WAAW,GAAG,QAAQ,EAAE,QAAQ;AAEpD,QAAM,UAAU,qBAAqB,KAAK,OAAO,WAAW,GAAG;AAC/D,QAAM,WAAW,UAAU,IAAI,WAAW,SAAS,QAAQ,IAAI;AAE/D,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,qBAAqB,KAAK,WAAW,GAAG;AAC3D,QAAM,aAAa,qBAAqB,KAAK,WAAW,GAAG;AAC3D,QAAM,UAAU,aAAa,IAAI,WAAW,YAAY,QAAQ,IAAI;AACpE,QAAM,UAAU,aAAa,IAAI,WAAW,YAAY,QAAQ,IAAI;AAEpE,MAAI,WAAW,QAAQ,QAAQ,MAAM,SAAS,QAAQ,GAAG;AACvD,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,QAAQ,QAAQ,MAAM,SAAS,QAAQ,GAAG;AACvD,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAOO,SAAS,aAAa,WAAoB,WAA6B;AAC5E,MAAI,CAAC,aAAa,CAAC,WAAW;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,WAAW,GAAG,YAAY,CAAC,EAAE,QAAQ;AAEzD,QAAM,aAAa,qBAAqB,WAAW,WAAW,GAAG;AACjE,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,EACF,GAAG;AAEH,MAAI,CAAC,cAAc,CAAC,cAAc;AAChC,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,IAAI,WAAW,YAAY,YAAY,CAAC;AACxD,QAAM,YAAY,IAAI,WAAW,cAAc,YAAY,CAAC;AAE5D,SAAO,UAAU,QAAQ,IAAI,QAAQ,QAAQ;AAC/C;AAOO,SAAS,cAAc,WAAoB,WAA6B;AAC7E,MAAI,CAAC,aAAa,CAAC,WAAW;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,WAAW,GAAG,YAAY,CAAC,EAAE,QAAQ;AAEzD,QAAM,aAAa,qBAAqB,WAAW,WAAW,GAAG;AACjE,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,EACF,GAAG;AAEH,MAAI,CAAC,cAAc,CAAC,cAAc;AAChC,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,IAAI,WAAW,YAAY,YAAY,CAAC;AACxD,QAAM,YAAY,IAAI,WAAW,cAAc,YAAY,CAAC;AAE5D,SAAO,UAAU,QAAQ,IAAI,QAAQ,QAAQ;AAC/C;AAOO,SAAS,eACd,OAMA,KACA,KACA;AACA,MAAI,CAAC,SAAU,CAAC,OAAO,CAAC,KAAM;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,WAAW,QAAQ,IAAI,gBAAgB,KAAK;AAIpD,MAAI,QAAQ,cAAc,WAAW,GAAG,KAAK,cAAc,SAAS,GAAG,IAAI;AACzE,WAAO;AAAA,EACT;AAIA,MAAI,QAAQ,aAAa,WAAW,GAAG,KAAK,aAAa,SAAS,GAAG,IAAI;AACvE,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAMA,SAAS,yBACP,MAImB;AACnB,SACE,OAAO,MAAM,SAAS,YACtB,OAAO,MAAM,OAAO,YACpB,KAAK,MAAM,iBAAiB,MAC5B,KAAK,IAAI,iBAAiB;AAE9B;AAMO,SAAS,0BACd,MAIkD;AAClD,SACG,OAAO,MAAM,SAAS,YAAY,OAAO,MAAM,OAAO,YACvD,yBAAyB,IAAI;AAEjC;",
   "names": []
 }

package/esm/forms/_base-input/BaseInput.css

@@ -1,6 +1,27 @@
-._1a8lqy96-3-3-3 {
-  --_1a8lqy95-3-3-3: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_yfwka30-3-3-3: var(--_1a8lqy95-3-3-3);
+._1a8lqy90-3-5-0 {
+  --_bx32h5-3-5-0: 1;
+}
+._1a8lqy91-3-5-0 {
+  --_bx32h5-3-5-0: 3;
+}
+._1a8lqy91-3-5-0:hover {
+  --_bx32h5-3-5-0: 4;
+}
+._1a8lqy91-3-5-0:active {
+  --_bx32h5-3-5-0: 4;
+}
+._1a8lqy92-3-5-0 {
+  --_bx32h5-3-5-0: 0;
+}
+._1a8lqy92-3-5-0:hover {
+  --_bx32h5-3-5-0: 0;
+}
+._1a8lqy92-3-5-0:active {
+  --_bx32h5-3-5-0: 0;
+}
+._1a8lqy98-3-5-0 {
+  --_1a8lqy96-3-5-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_yfwka30-3-5-0: var(--_1a8lqy96-3-5-0);
   position: relative;
   display: flex;
   min-width: 0;
@@ -11,58 +32,91 @@
   padding-right: var(--dt-spacings-size-12, 12px);
   border-radius: var(--dt-borders-radius-field-default, 6px);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
+  background-color: var(--_1a8lqy96-3-5-0);
+  box-shadow: var(--_1a8lqy97-3-5-0);
   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-3-3);
 }
-._1a8lqy96-3-3-3:hover {
-  --_1a8lqy95-3-3-3: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1a8lqy98-3-5-0:hover {
+  --_1a8lqy96-3-5-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy96-3-3-3:active {
-  --_1a8lqy95-3-3-3: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1a8lqy98-3-5-0:active {
+  --_1a8lqy96-3-5-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy91-3-3-3 ._1a8lqy96-3-3-3 {
+._1a8lqy91-3-5-0 ._1a8lqy98-3-5-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy91-3-3-3:not(._1a8lqy92-3-3-3) ._1a8lqy96-3-3-3:hover {
+._1a8lqy91-3-5-0:not(._1a8lqy92-3-5-0) ._1a8lqy98-3-5-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy91-3-3-3:not(._1a8lqy92-3-3-3) ._1a8lqy96-3-3-3:active {
+._1a8lqy91-3-5-0:not(._1a8lqy92-3-5-0) ._1a8lqy98-3-5-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy92-3-3-3 ._1a8lqy96-3-3-3 {
+._1a8lqy93-3-5-0 ._1a8lqy98-3-5-0:is(:not(:hover, :active), :hover, :active) {
+  background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+}
+:where(:root:not(._1jgl8s50-3-5-0)) ._1a8lqy93-3-5-0._1a8lqy91-3-5-0 ._1a8lqy98-3-5-0:is(:not(:hover, :active), :hover, :active) {
+  background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._1a8lqy92-3-5-0 ._1a8lqy98-3-5-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1a8lqy94-3-3-3:not(:hover) ._1a8lqy96-3-3-3 {
+._1a8lqy95-3-5-0:not(:hover) ._1a8lqy98-3-5-0 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy94-3-3-3:not(:hover) ._1a8lqy96-3-3-3:hover {
-  background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+._1a8lqy95-3-5-0:is(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0:is(:not(:hover, :active), :hover, :active) {
+  background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy94-3-3-3:not(:hover) ._1a8lqy96-3-3-3:active {
-  background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
+._1jgl8s50-3-5-0 ._1a8lqy94-3-5-0 ._1a8lqy98-3-5-0,
+    ._1jgl8s50-3-5-0 ._1a8lqy94-3-5-0 ._1a8lqy98-3-5-0:is(:hover, :active),
+    ._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0:is(:hover, :active),
+    ._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0):is(:hover, :active) ._1a8lqy98-3-5-0 {
+  background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1a8lqy94-3-3-3._1a8lqy92-3-3-3 ._1a8lqy96-3-3-3:is(:not(:hover, :active), :hover, :active) {
-  background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
+._1jgl8s50-3-5-0 ._1a8lqy94-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0,
+    ._1jgl8s50-3-5-0 :where(._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0)):hover ._1a8lqy98-3-5-0 {
+  --_1a8lqy97-3-5-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+}
+._1jgl8s50-3-5-0 :is(._1a8lqy94-3-5-0, ._1a8lqy95-3-5-0):not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0:hover {
+  --_1a8lqy97-3-5-0: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
+}
+._1jgl8s50-3-5-0 :is(._1a8lqy94-3-5-0, ._1a8lqy95-3-5-0):not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0:active {
+  --_1a8lqy97-3-5-0: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
+}
+._1jgl8s50-3-5-0 :where(._1a8lqy94-3-5-0)._1a8lqy91-3-5-0:not(._1a8lqy92-3-5-0) ._1a8lqy98-3-5-0,
+      ._1jgl8s50-3-5-0 :where(._1a8lqy95-3-5-0)._1a8lqy91-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0):hover ._1a8lqy98-3-5-0 {
+  --_1a8lqy97-3-5-0: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+}
+._1jgl8s50-3-5-0 ._1a8lqy91-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0:hover {
+  --_1a8lqy97-3-5-0: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
+}
+._1jgl8s50-3-5-0 ._1a8lqy91-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0:active {
+  --_1a8lqy97-3-5-0: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
 }
-._1a8lqy97-3-3-3 {
+._1jgl8s50-3-5-0 ._1a8lqy94-3-5-0:is(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0 {
+  --_1a8lqy97-3-5-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+}
+._1jgl8s50-3-5-0 ._1a8lqy94-3-5-0._1a8lqy91-3-5-0:is(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0 {
+  --_1a8lqy97-3-5-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+}
+._1a8lqy99-3-5-0 {
   padding-right: 0;
   padding-left: 0;
 }
-._1a8lqy98-3-3-3 {
+._1a8lqy9a-3-5-0 {
   padding-right: 0;
 }
-._1a8lqy99-3-3-3 {
+._1a8lqy9b-3-5-0 {
   padding-right: unset;
 }
-._1a8lqy9a-3-3-3 {
+._1a8lqy9c-3-5-0 {
   padding-left: unset;
 }
-._1a8lqy9b-3-3-3 {
+._1a8lqy9d-3-5-0 {
   display: block;
   text-overflow: ellipsis;
   appearance: none;
@@ -76,87 +130,134 @@
   min-width: 0;
   color: inherit;
 }
-._1a8lqy9b-3-3-3:read-only {
-  cursor: not-allowed;
-}
-._1a8lqy9b-3-3-3:focus {
+._1a8lqy9d-3-5-0:focus {
   outline: none;
 }
-._1a8lqy9b-3-3-3::placeholder {
+._1a8lqy9d-3-5-0::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1a8lqy9b-3-3-3::-webkit-search-cancel-button {
+._1a8lqy9d-3-5-0::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
-._1a8lqy9b-3-3-3::-ms-reveal {
+._1a8lqy9d-3-5-0::-ms-reveal {
   display: none;
 }
-._1a8lqy91-3-3-3 ._1a8lqy9b-3-3-3:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-3-3 ._1a8lqy9b-3-3-3::placeholder {
+._1a8lqy91-3-5-0 ._1a8lqy9d-3-5-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-5-0 ._1a8lqy9d-3-5-0::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
   -webkit-text-fill-color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1a8lqy92-3-3-3 ._1a8lqy9b-3-3-3:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-3-3 ._1a8lqy9b-3-3-3::placeholder {
+._1a8lqy92-3-5-0 ._1a8lqy9d-3-5-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-5-0 ._1a8lqy9d-3-5-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   -webkit-text-fill-color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1a8lqy92-3-3-3 ._1a8lqy9b-3-3-3 {
+._1a8lqy92-3-5-0 ._1a8lqy9d-3-5-0 {
   cursor: not-allowed;
 }
-button ._1a8lqy9b-3-3-3 {
+._1a8lqy93-3-5-0 ._1a8lqy9d-3-5-0 {
+  cursor: default;
+}
+button ._1a8lqy9d-3-5-0 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9c-3-3-3 {
+._1a8lqy9e-3-5-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-3-3:is(button._1a8lqy9c-3-3-3._1a8lqy9c-3-3-3) {
+._1a8lqy9e-3-5-0:is(button._1a8lqy9e-3-5-0._1a8lqy9e-3-5-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9d-3-3-3 {
+._1a8lqy9f-3-5-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-3-3:not(._1a8lqy92-3-3-3) ._1a8lqy9d-3-3-3 {
+._1a8lqy91-3-5-0:not(._1a8lqy92-3-5-0) ._1a8lqy9f-3-5-0 {
   background-color: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1a8lqy94-3-3-3:not(._1a8lqy92-3-3-3):hover button {
+._1a8lqy94-3-5-0._1a8lqy93-3-5-0 button:not(:hover, :active) {
+  background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+}
+._1a8lqy94-3-5-0._1a8lqy93-3-5-0._1a8lqy91-3-5-0 button:not(:hover, :active) {
+  background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._1jgl8s50-3-5-0 ._1a8lqy94-3-5-0._1a8lqy93-3-5-0 button:not(:hover, :active) {
+  background-color: var(--dt-colors-background-surface-default, #fff);
+}
+._1jgl8s50-3-5-0 ._1a8lqy94-3-5-0._1a8lqy93-3-5-0 button {
+  --_bx32h4-3-5-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+}
+._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-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-3-3:not(._1a8lqy92-3-3-3):hover button:active {
-  background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
-}
-._1a8lqy94-3-3-3:not(._1a8lqy92-3-3-3):hover button:hover {
+._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0):hover button:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy94-3-3-3:not(._1a8lqy92-3-3-3)._1a8lqy91-3-3-3:hover button {
+._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0):hover button:active {
+  background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+}
+._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0)._1a8lqy91-3-5-0:hover button {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy94-3-3-3:not(._1a8lqy92-3-3-3)._1a8lqy91-3-3-3:hover button:active {
+._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0)._1a8lqy91-3-5-0:hover button:hover {
+  background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
+}
+._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0)._1a8lqy91-3-5-0:hover button:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy94-3-3-3:not(._1a8lqy92-3-3-3)._1a8lqy91-3-3-3:hover button:hover {
-  background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
+._1a8lqy95-3-5-0._1a8lqy93-3-5-0 button:not(:hover, :active) {
+  background-color: transparent;
 }
-._1a8lqy94-3-3-3:not(._1a8lqy92-3-3-3):hover button:is(:disabled,[aria-disabled=true]) {
+._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0):hover button:is(:disabled, [aria-disabled=true]) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a8lqy96-3-3-3:has(._1a8lqy9c-3-3-3:hover) {
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0):hover button {
+  background-color: var(--dt-colors-background-surface-default, #fff);
+  box-shadow: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+}
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0):hover button:hover {
+  background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+}
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0):hover button:active {
+  background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
+}
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0) button:hover {
+  box-shadow: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
+}
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0) button:active {
+  box-shadow: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
+}
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0)._1a8lqy91-3-5-0:hover button {
+  background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  box-shadow: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+}
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0)._1a8lqy91-3-5-0:hover button:hover {
+  background-color: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
+}
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0)._1a8lqy91-3-5-0:hover button:active {
+  background-color: var(--dt-colors-background-field-critical-default-active, #f5cac9);
+}
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0)._1a8lqy91-3-5-0 button:hover {
+  box-shadow: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
+}
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0)._1a8lqy91-3-5-0 button:active {
+  box-shadow: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
+}
+._1a8lqy98-3-5-0:has(._1a8lqy9e-3-5-0:hover) {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1a8lqy91-3-3-3 ._1a8lqy96-3-3-3:has(._1a8lqy9c-3-3-3:hover):not(._1a8lqy92-3-3-3) {
+:where(:root:not(._1jgl8s50-3-5-0)) ._1a8lqy91-3-5-0 ._1a8lqy98-3-5-0:has(._1a8lqy9e-3-5-0:hover):not(._1a8lqy92-3-5-0) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy96-3-3-3:hover ._1a8lqy9d-3-3-3 {
+._1a8lqy98-3-5-0:hover ._1a8lqy9f-3-5-0 {
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._1a8lqy91-3-3-3 ._1a8lqy96-3-3-3:hover ._1a8lqy9d-3-3-3 {
+._1a8lqy91-3-5-0 ._1a8lqy98-3-5-0:hover ._1a8lqy9f-3-5-0 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._1a8lqy96-3-3-3._1a8lqy9e-3-3-3 div svg {
+._1a8lqy98-3-5-0._1a8lqy9g-3-5-0 div svg {
   fill: currentcolor;
 }