@dynatrace/strato-components 3.10.4 → 3.11.0

package/forms/forms-core/components/form-field-messages/FormFieldMessages.css

@@ -1,9 +1,9 @@
-._1l9bja60-3-10-4 {
+._1l9bja60-3-11-0 {
   display: flex;
 }
-._1l9bja60-3-10-4:empty {
+._1l9bja60-3-11-0:empty {
   display: none;
 }
-._1l9bja60-3-10-4[aria-hidden='true'] {
+._1l9bja60-3-11-0[aria-hidden='true'] {
   display: none;
 }

package/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js

@@ -21,4 +21,4 @@ __export(FormFieldMessages_css_exports, {
 });
 module.exports = __toCommonJS(FormFieldMessages_css_exports);
 var import_FormFieldMessages_css_ts_vanilla = require("./FormFieldMessages.css");
-var formFieldMessages = "_1l9bja60-3-10-4";
+var formFieldMessages = "_1l9bja60-3-11-0";

package/forms/forms-core/components/label/Label.css

@@ -1,15 +1,15 @@
-._1gxatyo0-3-10-4 {
+._1gxatyo0-3-11-0 {
   display: inline-block;
 }
-._1gxatyo1-3-10-4 {
+._1gxatyo1-3-11-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1gxatyo2-3-10-4:after {
+._1gxatyo2-3-11-0:after {
   content: "*" / "";
 }
-._1gxatyo3-3-10-4 {
+._1gxatyo3-3-11-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1gxatyo4-3-10-4 {
+._1gxatyo4-3-11-0 {
   margin-left: var(--dt-spacings-size-4, 4px);
 }

package/forms/forms-core/components/label/Label.sty.js

@@ -23,5 +23,5 @@ __export(Label_css_exports, {
 module.exports = __toCommonJS(Label_css_exports);
 var import_Label_css_ts_vanilla = require("./Label.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-10-4", variantClassNames: { disabled: { true: "_1gxatyo1-3-10-4" }, required: { true: "_1gxatyo2-3-10-4" }, readOnly: { true: "_1gxatyo3-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var readOnlyLabel = "_1gxatyo4-3-10-4";
+var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-11-0", variantClassNames: { disabled: { true: "_1gxatyo1-3-11-0" }, required: { true: "_1gxatyo2-3-11-0" }, readOnly: { true: "_1gxatyo3-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var readOnlyLabel = "_1gxatyo4-3-11-0";

package/forms/forms-core/hooks/useMinMaxLogger.d.ts

@@ -1,6 +1,7 @@
 import type { TimeValue } from '@dynatrace-sdk/units/types/packages/util/units/src/util-format/time.js';
 /**
- * Hook to check and log when the min is larger than the max.
+ * Hook to log invalid min/max prop values: warns when a value could not be
+ * parsed as a date expression, and errors when min is larger than max.
  * @internal
  */
 export declare const useMinMaxLogger: (min?: TimeValue | null, max?: TimeValue | null, componentName?: string) => void;

package/forms/forms-core/hooks/useMinMaxLogger.js

@@ -30,7 +30,17 @@ const useMinMaxLogger = (min, max, componentName) => {
   );
   const timezone = (0, import_user_preferences.getTimezone)();
   (0, import_react.useEffect)(() => {
-    if (min && max && new import_tz.TZDateMini(min.absoluteDate, timezone).getTime() >= new import_tz.TZDateMini(max.absoluteDate, timezone).getTime()) {
+    if (min && !min.absoluteDate) {
+      logger.warn(
+        `The 'min' prop value "${min.value}" could not be parsed as a valid date expression and will be ignored.`
+      );
+    }
+    if (max && !max.absoluteDate) {
+      logger.warn(
+        `The 'max' prop value "${max.value}" could not be parsed as a valid date expression and will be ignored.`
+      );
+    }
+    if (min && max && min.absoluteDate && max.absoluteDate && new import_tz.TZDateMini(min.absoluteDate, timezone).getTime() >= new import_tz.TZDateMini(max.absoluteDate, timezone).getTime()) {
       logger.error(
         `Min prop is larger than the max prop. Min: ${min.value}, Max: ${max.value}`
       );

package/forms/forms-core/state/formfield-messages-state-reducer.js

@@ -21,6 +21,7 @@ __export(formfield_messages_state_reducer_exports, {
   formFieldMessagesReducer: () => formFieldMessagesReducer
 });
 module.exports = __toCommonJS(formfield_messages_state_reducer_exports);
+var import_types = require("../../validation/types.js");
 var FormFieldMessagesAction = /* @__PURE__ */ ((FormFieldMessagesAction2) => {
   FormFieldMessagesAction2["ADDMESSAGE"] = "addmessage";
   FormFieldMessagesAction2["REMOVEMESSAGE"] = "removemessage";
@@ -35,6 +36,9 @@ var FormFieldMessagesAction = /* @__PURE__ */ ((FormFieldMessagesAction2) => {
 function isFormControlPayload(payload, messageType) {
   return messageType === "formcontrol";
 }
+const BROWSER_NATIVE_VALIDITY_KEYS = new Set(
+  Object.entries(import_types.NativeValidityStateKeys).filter(([key]) => key !== "customError").map(([, v]) => v.toString())
+);
 function isHTMLFormControlElement(element) {
   return !!(element && "setCustomValidity" in element);
 }
@@ -64,7 +68,7 @@ function updateValidity(state, explicitControlId) {
   const newIsValid = !hasCustomError && !hasFormControlError;
   const newShowError = !isDisabled && (state.showError || (isTouched ?? false)) && !newIsValid;
   const hasStratoCustomError = formControlMessages.some(
-    (message) => message.variant === "error" && message.validityStateKey === "customError"
+    (message) => message.variant === "error" && !BROWSER_NATIVE_VALIDITY_KEYS.has(message.validityStateKey)
   );
   const nativeValidityIsValid = !hasCustomError && !hasStratoCustomError;
   if (explicitControlId) {

package/forms/forms-core/time/timeParser.d.ts

@@ -194,7 +194,7 @@ export declare function mapToTimeframe(value?: Partial<{
 }> | Partial<Timeframe> | null, precision?: 'minutes' | 'seconds' | 'milliseconds'): RequireAtLeastOne<Timeframe> | null;
 /**
  * You can use the `_parseValue` utility function to convert a Timeframe or Timeframe value into an object containing `from` and `to`
- * `TimeValue`s or null values. If `fallbackToNow` is set to true, the `to` value falls back to `now` in case the to value is empty.
+ * `TimeValue` instances or null values. If `fallbackToNow` is set to true, the `to` value falls back to `now` in case the to value is empty.
  * @internal
  */
 export declare function parseValue(value: {
@@ -248,12 +248,6 @@ export declare function extractDisplayValueFromTimeValues(from: TimeValue | null
  * @internal
  */
 export declare function formatDetails(details: TimeValue, intl: IntlShape, precision?: Precision, showTimeOnly?: boolean, isRelativeToNow?: boolean): string;
-/**
- * Gets the translated message to show when a value is outside the min and/or max
- * @internal
- * @deprecated - use proper validation fn with error messages object
- */
-export declare function getOutsideRangeMessage(intl: IntlShape, min?: string, max?: string, precision?: Precision): string;
 /**
  * Removes the specified precision from a ISOString.
  * @internal

package/forms/forms-core/time/timeParser.js

@@ -22,7 +22,6 @@ __export(timeParser_exports, {
   formatTimeValue: () => formatTimeValue,
   formatTimeframe: () => formatTimeframe,
   getFromToValues: () => getFromToValues,
-  getOutsideRangeMessage: () => getOutsideRangeMessage,
   getTimeValue: () => getTimeValue,
   isExpressionString: () => isExpressionString,
   mapToPartialTimeframe: () => mapToPartialTimeframe,
@@ -123,8 +122,8 @@ const messages = (0, import_react_intl.defineMessages)({
     description: "Error message shown if the from and to values of a timeframe are both invalid"
   },
   invalidOrder: {
-    defaultMessage: "'from' date should be before 'to' date",
-    id: "DKFIWE64kHV1ohuk",
+    defaultMessage: "End time must be after start time.",
+    id: "vbdg7YKUa68LiCw7",
     description: "Message to display if the from and to dates are in the wrong order."
   },
   outsideRange: {
@@ -591,51 +590,6 @@ function formatRelativeTimeframe(expression, intl, prefix, isRelativeToNow) {
 function formatDetails(details, intl, precision = "minutes", showTimeOnly, isRelativeToNow) {
   return details.type === "expression" ? formatRelativeTimeframe(details.value, intl, void 0, isRelativeToNow) : (0, import_helpers.getFormattedTimeValue)(details, precision, showTimeOnly);
 }
-function getOutsideRangeMessage(intl, min, max, precision) {
-  const { min: from, max: to } = (0, import_helpers.getFormattedMinMax)(min, max, precision);
-  if (min && max) {
-    return intl.formatMessage(
-      {
-        defaultMessage: "Only dates between {from} \u2192 {to} are available.",
-        id: "Nlzd/zJ2XP7vZMvE",
-        description: "Given dates are not within the valid range."
-      },
-      {
-        from,
-        to
-      }
-    );
-  }
-  if (min) {
-    return intl.formatMessage(
-      {
-        defaultMessage: "Only dates after {from} are available.",
-        id: "QXOCOrq5Seu+1A93",
-        description: "Given dates are not within the valid range."
-      },
-      {
-        from
-      }
-    );
-  }
-  if (max) {
-    return intl.formatMessage(
-      {
-        defaultMessage: "Only dates before {to} are available.",
-        id: "Jzdt1FVhHSO1Lmg9",
-        description: "Given dates are not within the valid range."
-      },
-      {
-        to
-      }
-    );
-  }
-  return intl.formatMessage({
-    defaultMessage: "Selected time is outside of the valid range.",
-    id: "r2DiyNP5gUAg0s5f",
-    description: "Given dates are not within the valid range."
-  });
-}
 function removePrecision(isoString, precision = "minutes") {
   const relativeDate = import_tz.TZDateMini.tz((0, import_user_preferences.getTimezone)()).getTime();
   const timeValue = (0, import_units.parseTimeAsTimeValue)(isoString, relativeDate, precision);

package/forms/hooks/useAutofillEvent.css

@@ -1,20 +1,20 @@
-@keyframes _yfwka31-3-10-4 {
+@keyframes _yfwka31-3-11-0 {
 
 }
-@keyframes _yfwka32-3-10-4 {
+@keyframes _yfwka32-3-11-0 {
 
 }
-._yfwka33-3-10-4:-webkit-autofill:is(._yfwka33-3-10-4,:hover,:focus) {
+._yfwka33-3-11-0:-webkit-autofill:is(._yfwka33-3-11-0,:hover,:focus) {
   -webkit-text-fill-color: var(--dt-colors-text-primary-default, #464cce);
-  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-10-4) inset;
+  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-11-0) inset;
   caret-color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._yfwka33-3-10-4:-webkit-autofill {
-  animation-name: _yfwka31-3-10-4;
+._yfwka33-3-11-0:-webkit-autofill {
+  animation-name: _yfwka31-3-11-0;
   animation-duration: 0.001s;
 }
-._yfwka33-3-10-4:not(:-webkit-autofill) {
-  animation-name: _yfwka32-3-10-4;
+._yfwka33-3-11-0:not(:-webkit-autofill) {
+  animation-name: _yfwka32-3-11-0;
   animation-duration: 0.001s;
 }
 input:-webkit-autofill::spelling-error {

package/forms/hooks/useAutofillEvent.sty.js

@@ -24,7 +24,7 @@ __export(useAutofillEvent_css_exports, {
 });
 module.exports = __toCommonJS(useAutofillEvent_css_exports);
 var import_useAutofillEvent_css_ts_vanilla = require("./useAutofillEvent.css");
-var autofillBackground = "var(--_yfwka30-3-10-4)";
-var autofillCSS = "_yfwka33-3-10-4";
-var end = "_yfwka32-3-10-4";
-var start = "_yfwka31-3-10-4";
+var autofillBackground = "var(--_yfwka30-3-11-0)";
+var autofillCSS = "_yfwka33-3-11-0";
+var end = "_yfwka32-3-11-0";
+var start = "_yfwka31-3-11-0";

package/forms/hooks/useContainerFocus.css

@@ -1,3 +1,3 @@
-._la3ex60-3-10-4:focus {
+._la3ex60-3-11-0:focus {
   outline: none;
 }

package/forms/hooks/useContainerFocus.d.ts

@@ -1,19 +1,38 @@
 import { type FocusEvent } from 'react';
 import type { ValidationState } from '../validation/types.js';
+/** @internal */
 interface UseContainerFocusOptions<T extends HTMLElement = HTMLElement> {
     onFocus?: (e: FocusEvent<T>) => void;
     onBlur?: (e: FocusEvent<T>) => void;
     disabled?: boolean;
     emitValidationState?: (state: ValidationState) => void;
+    /**
+     * When provided, called on blur instead of the default
+     * `getI18nValidationState(intl, control, 'blur')` to produce the
+     * ValidationState passed to `emitValidationState`. Use when the component
+     * has richer error state than native input.validity can express.
+     */
+    getBlurValidationState?: () => ValidationState;
+    /**
+     * When set, elements inside a portaled overlay tagged with
+     * `data-dt-owner="{overlayOwnerId}"` are treated as part of the component
+     * boundary. Focus moving between the container and the overlay does not
+     * fire onFocus, onBlur, or SETISTOUCHED.
+     */
+    overlayOwnerId?: string;
+    /**
+     * When provided, called with the blur relatedTarget before SETISTOUCHED is
+     * dispatched. Return true to suppress the blur (no SETISTOUCHED, no onBlur).
+     *
+     * TODO: [APPDEV-19074] Temporary escape hatch for the TimeframeSelector overlay — clicking
+     * preset/recent items shifts focus outside the picker boundary, which causes
+     * SETISTOUCHED to fire and the resulting layout shift makes the click miss.
+     * Remove once the layout shift is resolved at the root.
+     */
+    shouldSuppressBlur?: (relatedTarget: Element | null) => boolean;
 }
-/**
- * Handles onFocus / onBlur for composite container components:
- * - Fires onFocus only on the first focusin (deduplicates internal focus moves).
- * - Fires onBlur only when focus genuinely leaves the container.
- * - Uses tabIndex={-1} to prevent focus escaping to document.body on clicks to non-focusable areas.
- * @internal
- */
-export declare function useContainerFocus<T extends HTMLElement = HTMLElement>({ onFocus, onBlur, disabled, emitValidationState, }: UseContainerFocusOptions<T>): {
+/** @internal */
+export declare function useContainerFocus<T extends HTMLElement = HTMLElement>({ onFocus, onBlur, disabled, emitValidationState, getBlurValidationState, overlayOwnerId, shouldSuppressBlur, }: UseContainerFocusOptions<T>): {
     containerClassName: string;
     onFocus: (e: FocusEvent<T>) => void;
     onBlur: (e: FocusEvent<T>) => void;

package/forms/hooks/useContainerFocus.js

@@ -26,22 +26,30 @@ var import_useContainerFocus_css = require("./useContainerFocus.sty.js");
 var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
 var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldValidation.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
+function isWithinOverlay(node, overlayOwnerId) {
+  return !!overlayOwnerId && node instanceof HTMLElement && !!node.closest(`[data-dt-owner="${overlayOwnerId}"]`);
+}
+function isInsideBoundary(node, container, overlayOwnerId) {
+  return container.contains(node) || isWithinOverlay(node, overlayOwnerId);
+}
 function useContainerFocus({
   onFocus,
   onBlur,
   disabled,
-  emitValidationState
+  emitValidationState,
+  getBlurValidationState,
+  overlayOwnerId,
+  shouldSuppressBlur
 }) {
   const { dispatch, state } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const intl = (0, import_react_intl.useIntl)();
   const hasFocusRef = (0, import_react.useRef)(false);
   function handleFocus(e) {
-    if (!disabled && !hasFocusRef.current) {
+    if (disabled) {
+      return;
+    }
+    if (!hasFocusRef.current) {
       hasFocusRef.current = true;
-      Object.defineProperty(e, "target", {
-        writable: true,
-        value: e.currentTarget
-      });
       onFocus?.(e);
     }
   }
@@ -52,25 +60,25 @@ function useContainerFocus({
       }
       return;
     }
-    if (!e.currentTarget.contains(e.relatedTarget)) {
-      hasFocusRef.current = false;
-      const control = e.currentTarget.querySelector("input, textarea, select");
-      control?.checkValidity();
-      dispatch?.({
-        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-        payload: { isTouched: true }
-      });
-      if (emitValidationState && !state.isTouched) {
-        emitValidationState(
-          (0, import_useFormFieldValidation.getI18nValidationState)(intl, control ?? null, "blur")
-        );
-      }
-      Object.defineProperty(e, "target", {
-        writable: true,
-        value: e.currentTarget
-      });
-      onBlur?.(e);
+    if (isInsideBoundary(e.relatedTarget, e.currentTarget, overlayOwnerId)) {
+      return;
+    }
+    if (shouldSuppressBlur?.(e.relatedTarget)) {
+      return;
+    }
+    hasFocusRef.current = false;
+    const control = e.currentTarget.querySelector("input, textarea, select");
+    control?.checkValidity();
+    dispatch?.({
+      type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+      payload: { isTouched: true }
+    });
+    if (emitValidationState && !state.isTouched) {
+      emitValidationState(
+        getBlurValidationState?.() ?? (0, import_useFormFieldValidation.getI18nValidationState)(intl, control ?? null, "blur")
+      );
     }
+    onBlur?.(e);
   }
   return {
     containerClassName: import_useContainerFocus_css.containerRoot,

package/forms/hooks/useContainerFocus.sty.js

@@ -21,4 +21,4 @@ __export(useContainerFocus_css_exports, {
 });
 module.exports = __toCommonJS(useContainerFocus_css_exports);
 var import_useContainerFocus_css_ts_vanilla = require("./useContainerFocus.css");
-var containerRoot = "_la3ex60-3-10-4";
+var containerRoot = "_la3ex60-3-11-0";

package/forms/number-input-v2/NumberInput.js

@@ -352,18 +352,24 @@ const NumberInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
   }, [handleStep]);
   (0, import_react.useImperativeHandle)(
     forwardedRef,
-    () => ({
-      ...internalRef.current,
-      validateAsync: async () => {
-        dispatch?.({
-          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-          payload: { isTouched: true }
-        });
-        const validationState = getNumberValidationState("manual");
-        emitValidationState(validationState);
-        return validationState;
-      }
-    }),
+    () => {
+      const base = internalRef.current ?? {
+        element: null,
+        validate: () => void 0
+      };
+      return {
+        ...base,
+        validateAsync: async () => {
+          dispatch?.({
+            type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+            payload: { isTouched: true }
+          });
+          const validationState = getNumberValidationState("manual");
+          emitValidationState(validationState);
+          return validationState;
+        }
+      };
+    },
     [dispatch, getNumberValidationState, emitValidationState]
   );
   (0, import_react.useEffect)(() => {

package/forms/radio/styles.css

@@ -1,12 +1,12 @@
-._h96idu0-3-10-4 {
+._h96idu0-3-11-0 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._h96idu1-3-10-4 {
+._h96idu1-3-11-0 {
   cursor: default;
 }
-._h96idu5-3-10-4 {
+._h96idu5-3-11-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -15,14 +15,14 @@
   vertical-align: middle;
   cursor: pointer;
 }
-._h96idu5-3-10-4._h96idu3-3-10-4 {
+._h96idu5-3-11-0._h96idu3-3-11-0 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._h96idu1-3-10-4 ._h96idu5-3-10-4 {
+._h96idu1-3-11-0 ._h96idu5-3-11-0 {
   cursor: default;
 }
-._h96idu6-3-10-4 {
+._h96idu6-3-11-0 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -31,38 +31,38 @@
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-10-4);
+  background-color: var(--_bx32h3-3-11-0);
 }
-._h96idu7-3-10-4 {
+._h96idu7-3-11-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96idue-3-10-4 {
+._h96idue-3-11-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._h96idug-3-10-4 {
+._h96idug-3-11-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduh-3-10-4 {
+._h96iduh-3-11-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._h96idui-3-10-4 {
+._h96idui-3-11-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96iduj-3-10-4 {
+._h96iduj-3-11-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduk-3-10-4 {
+._h96iduk-3-11-0 {
   height: 100%;
-  fill: var(--_bx32h1-3-10-4);
+  fill: var(--_bx32h1-3-11-0);
 }
-._h96idu5-3-10-4:not(._h96idu4-3-10-4) ._h96iduk-3-10-4 {
+._h96idu5-3-11-0:not(._h96idu4-3-11-0) ._h96iduk-3-11-0 {
   display: none;
 }
-._h96idu1-3-10-4 ._h96iduk-3-10-4 {
+._h96idu1-3-11-0 ._h96iduk-3-11-0 {
   fill: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._h96idu2-3-10-4._h96idu1-3-10-4 ._h96iduk-3-10-4 {
+._h96idu2-3-11-0._h96idu1-3-11-0 ._h96iduk-3-11-0 {
   fill: var(--dt-colors-icon-critical-default, #bb0731);
 }

package/forms/radio/styles.sty.js

@@ -31,11 +31,11 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_styles_css_ts_vanilla = require("./styles.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var checked = "_h96idu4-3-10-4";
-var disabled = "_h96idu3-3-10-4";
-var group = "_h96idu0-3-10-4";
-var hasError = "_h96idu2-3-10-4";
-var innerKnob = "_h96iduk-3-10-4";
-var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu6-3-10-4", variantClassNames: { disabled: { true: "_h96idu7-3-10-4" }, checked: { true: "_h96idu8-3-10-4", false: "_h96idu9-3-10-4" }, hasError: { true: "_h96idua-3-10-4", false: "_h96idub-3-10-4" }, isFocusVisible: { true: "_h96iduc-3-10-4", false: "_h96idud-3-10-4" }, readOnly: { true: "_h96idue-3-10-4", false: "_h96iduf-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-10-4"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-10-4"], [{ readOnly: true, disabled: false }, "_h96idui-3-10-4"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-10-4"]] });
-var label = "_h96idu5-3-10-4";
-var readOnly = "_h96idu1-3-10-4";
+var checked = "_h96idu4-3-11-0";
+var disabled = "_h96idu3-3-11-0";
+var group = "_h96idu0-3-11-0";
+var hasError = "_h96idu2-3-11-0";
+var innerKnob = "_h96iduk-3-11-0";
+var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu6-3-11-0", variantClassNames: { disabled: { true: "_h96idu7-3-11-0" }, checked: { true: "_h96idu8-3-11-0", false: "_h96idu9-3-11-0" }, hasError: { true: "_h96idua-3-11-0", false: "_h96idub-3-11-0" }, isFocusVisible: { true: "_h96iduc-3-11-0", false: "_h96idud-3-11-0" }, readOnly: { true: "_h96idue-3-11-0", false: "_h96iduf-3-11-0" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-11-0"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-11-0"], [{ readOnly: true, disabled: false }, "_h96idui-3-11-0"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-11-0"]] });
+var label = "_h96idu5-3-11-0";
+var readOnly = "_h96idu1-3-11-0";

package/forms/search-input/SearchInput.css

@@ -1,6 +1,6 @@
-._1mumub80-3-10-4 {
+._1mumub80-3-11-0 {
   min-width: 192px;
 }
-._1mumub81-3-10-4 {
+._1mumub81-3-11-0 {
   min-width: 272px;
 }

package/forms/search-input/SearchInput.js

@@ -110,9 +110,9 @@ const SearchInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
       onCurrentChange(current < total - 1 ? current + 1 : 0);
     }
   };
-  function onClear() {
+  const onClear = () => {
     setInternalValue("");
-  }
+  };
   const [slots] = (0, import_useSlots.useSlots)(children, {
     stepper: import_Stepper.Stepper
   });

package/forms/search-input/SearchInput.sty.js

@@ -22,4 +22,4 @@ __export(SearchInput_css_exports, {
 module.exports = __toCommonJS(SearchInput_css_exports);
 var import_SearchInput_css_ts_vanilla = require("./SearchInput.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var searchInput = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mumub80-3-10-4", variantClassNames: { hasStepper: { true: "_1mumub81-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var searchInput = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mumub80-3-11-0", variantClassNames: { hasStepper: { true: "_1mumub81-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });

package/forms/search-input/Stepper.css

@@ -1,21 +1,21 @@
-._s3yy5s0-3-10-4 {
+._s3yy5s0-3-11-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   align-items: center;
 }
-._s3yy5s1-3-10-4 {
+._s3yy5s1-3-11-0 {
   display: flex;
   gap: var(--dt-spacings-size-0, 0);
 }
-._s3yy5s2-3-10-4 {
+._s3yy5s2-3-11-0 {
   margin: 0;
 }
-._s3yy5s1-3-10-4 > ._s3yy5s2-3-10-4:first-child {
+._s3yy5s1-3-11-0 > ._s3yy5s2-3-11-0:first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._s3yy5s1-3-10-4 > ._s3yy5s2-3-10-4:last-child {
+._s3yy5s1-3-11-0 > ._s3yy5s2-3-11-0:last-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }

package/forms/search-input/Stepper.sty.js

@@ -29,6 +29,6 @@ var import_useAutofillEvent_css_ts_vanilla = require("../hooks/useAutofillEvent.
 var import_BaseInput_css_ts_vanilla = require("../_base-input/BaseInput.css");
 var import_BaseInputContent_css_ts_vanilla = require("../_base-input/BaseInputContent.css");
 var import_Stepper_css_ts_vanilla = require("./Stepper.css");
-var matchPositionIndicators = "_s3yy5s0-3-10-4 _o6rxr70-3-10-4 _da9a8v0-3-10-4 _da9a8v2-3-10-4 _da9a8v3-3-10-4 _da9a8vb-3-10-4";
-var stepperButton = "_s3yy5s2-3-10-4 _1a8lqy9e-3-10-4";
-var stepperButtons = "_s3yy5s1-3-10-4";
+var matchPositionIndicators = "_s3yy5s0-3-11-0 _o6rxr70-3-11-0 _da9a8v0-3-11-0 _da9a8v2-3-11-0 _da9a8v3-3-11-0 _da9a8vb-3-11-0";
+var stepperButton = "_s3yy5s2-3-11-0 _1a8lqy9e-3-11-0";
+var stepperButtons = "_s3yy5s1-3-11-0";

package/forms/select/Select.d.ts

@@ -150,7 +150,7 @@ export type SelectOnChangeValue<OptionValue, Multiple extends boolean> = Multipl
  * Accepted properties for Select
  * @public
  */
-export type SelectFormsProps<OptionValue, Multiple extends boolean> = SelectBaseProps<OptionValue, Multiple> & FormControlProps<Multiple extends true ? SelectMultiValue<OptionValue> : SelectSingleValue<OptionValue>, (value: SelectOnChangeValue<OptionValue, Multiple>) => void> & FormControlStateProps & DOMProps & StylingProps & DataTestId & BehaviorTrackingProps;
+export type SelectFormsProps<OptionValue, Multiple extends boolean> = SelectBaseProps<OptionValue, Multiple> & FormControlProps<Multiple extends true ? SelectMultiValue<OptionValue> : SelectSingleValue<OptionValue>, (value: SelectOnChangeValue<OptionValue, Multiple>) => void, HTMLInputElement> & FormControlStateProps & DOMProps & StylingProps & DataTestId & BehaviorTrackingProps;
 /**
  * The `Select` component allows you to choose one or multiple
  * options from a collapsed dropdown with options.