@dynatrace/strato-components 3.8.0 → 3.9.1

package/esm/forms/radio/Radio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/radio/Radio.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { Text } from '../../typography/text/Text.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { getValidationState } from '../validation/validation-builders.js';\n\nconst COMPONENT_NAME = 'Radio';\n\n// #region Typings\n/**\n * Properties for the Radio component\n * @public\n */\nexport type RadioProps = Pick<\n  FormControlProps<string, never>,\n  'disabled' | 'value'\n> &\n  DOMProps &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  FocusEvents &\n  AriaLabelingProps &\n  BehaviorTrackingProps;\n//#endregion\n\n/**\n * Radio buttons allow users to select one option from\n * a group of related options. To group options, wrap the\n * `Radio` components inside a `RadioGroup` component.\n * If you want to give the user more than 4 options,\n * consider using a `Select` component.\n * @public\n */\nexport const Radio = /* @__PURE__ */ forwardRef<FormControlRef, RadioProps>(\n  (props, forwardedRef) => {\n    const fallbackId = useId();\n    const {\n      disabled: propDisabled,\n      id = fallbackId,\n      children,\n      value,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n      ...remainingProps\n    }: RadioProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const { dispatch: messagesContextDispatch } = useFormFieldMessagesContext();\n\n    const radioGroupContext = useContext(RadioGroupContext);\n\n    if (isDev() && !radioGroupContext) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        '<Radio /> can only be used as a child element of <RadioGroup />',\n      );\n    }\n\n    const {\n      isDisabled,\n      ariaDisabled,\n      controlState,\n      hasError,\n      readOnly,\n      name: groupName,\n      required: groupRequired,\n      value: groupValue,\n      onChange,\n      onValidityChange,\n    } = radioGroupContext || {};\n\n    // Imperative Handle Construction\n    const radioLabelRef = useRef<HTMLLabelElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLLabelElement> => {\n      return {\n        element: radioLabelRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (controlState !== undefined) {\n            return;\n          }\n\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          if (controlState !== undefined) {\n            return getValidationState(inputRef.current, 'manual');\n          }\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return getValidationState(inputRef.current, 'manual');\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { groupRequired, groupValue: String(groupValue) },\n      {\n        'aria-label': ariaLabelProp,\n        'aria-labelledby': ariaLabelledByProp,\n        'aria-describedby': ariaDescribedByProp,\n        'aria-details': ariaDetailsProp,\n      },\n      id,\n      onValidityChange,\n    );\n\n    /** Register every single input to the form error context to ensure proper validation. */\n    useEffect(() => {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.ADDFORMCONTROLID,\n        payload: { controlId: id },\n      });\n\n      return () =>\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.REMOVEFORMCONTROLID,\n          payload: { controlId: id },\n        });\n    }, [id]);\n\n    const disabled = propDisabled ?? isDisabled;\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const checked = value === groupValue;\n\n    function handleChange(e: ChangeEvent<HTMLInputElement>) {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(e.target.value);\n      !controlState && validationOnChange?.();\n    }\n\n    let variant: 'accent' | 'emphasized' | 'default' = 'default';\n    let color: 'critical' | 'primary' | 'neutral' = 'neutral';\n\n    if (checked) {\n      variant = 'accent';\n    } else if (hasError) {\n      variant = 'emphasized';\n    }\n\n    if (hasError) {\n      color = 'critical';\n    } else if (!readOnly && checked) {\n      color = 'primary';\n    }\n\n    const { focusProps, focusClassName, isFocusVisible } = useFocusRing({\n      color,\n      disabled,\n    });\n\n    return (\n      <label\n        data-testid={dataTestId}\n        htmlFor={id}\n        ref={radioLabelRef}\n        className={clsx(\n          styles.label,\n          {\n            [styles.disabled]: disabledOrAriaDisabled,\n            [styles.checked]: checked,\n          },\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <VisuallyHidden>\n          <input\n            ref={inputRef}\n            checked={checked}\n            name={groupName}\n            value={value}\n            type=\"radio\"\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            required={groupRequired}\n            id={id}\n            onChange={handleChange}\n            onInvalid={(e) => {\n              if (controlState) {\n                e.preventDefault(); // Prevents the browser validation pop-up\n                return;\n              }\n\n              validationOnInvalid(e);\n            }}\n            readOnly={readOnly}\n            {..._mergeProps(\n              restProps,\n              focusProps,\n              controlState\n                ? {}\n                : {\n                    ...ariaProps,\n                    onBlur: validationOnBlur,\n                  },\n            )}\n          />\n        </VisuallyHidden>\n        <div\n          className={clsx(\n            styles.knob({\n              disabled: disabledOrAriaDisabled,\n              checked,\n              isFocusVisible,\n              hasError,\n              readOnly,\n            }),\n            fieldColorsCSS({\n              disabled: disabledOrAriaDisabled,\n              variant,\n              color,\n            }),\n            focusClassName,\n          )}\n        >\n          <svg\n            className={clsx(\n              styles.innerKnob,\n              fieldColorsCSS({\n                color: hasError ? 'critical' : 'primary',\n                disabled: disabledOrAriaDisabled,\n                variant: 'accent',\n              }),\n            )}\n            viewBox=\"0 0 100 100\"\n          >\n            <circle r={isFocusVisible ? '20' : '25'} cx=\"50\" cy=\"50\" />\n          </svg>\n        </div>\n        <Text as=\"span\" textStyle=\"base\">\n          {children}\n        </Text>\n      </label>\n    );\n  },\n);\n\n(Radio as typeof Radio & { displayName: string }).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { Text } from '../../typography/text/Text.js';\nimport { useFormFieldContext } from '../forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { getValidationState } from '../validation/validation-builders.js';\n\nconst COMPONENT_NAME = 'Radio';\n\n// #region Typings\n/**\n * Properties for the Radio component\n * @public\n */\nexport type RadioProps = Pick<\n  FormControlProps<string, never>,\n  'disabled' | 'value'\n> &\n  DOMProps &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  FocusEvents &\n  AriaLabelingProps &\n  BehaviorTrackingProps;\n//#endregion\n\n/**\n * Radio buttons allow users to select one option from\n * a group of related options. To group options, wrap the\n * `Radio` components inside a `RadioGroup` component.\n * If you want to give the user more than 4 options,\n * consider using a `Select` component.\n * @public\n */\nexport const Radio = /* @__PURE__ */ forwardRef<FormControlRef, RadioProps>(\n  (props, forwardedRef) => {\n    const fallbackId = useId();\n    const {\n      disabled: propDisabled,\n      id = fallbackId,\n      children,\n      value,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n      ...remainingProps\n    }: RadioProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const { dispatch: messagesContextDispatch } = useFormFieldMessagesContext();\n    const { registerMemberFormControlId } = useFormFieldContext();\n\n    const radioGroupContext = useContext(RadioGroupContext);\n\n    if (isDev() && !radioGroupContext) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        '<Radio /> can only be used as a child element of <RadioGroup />',\n      );\n    }\n\n    const {\n      isDisabled,\n      ariaDisabled,\n      controlState,\n      hasError,\n      readOnly,\n      name: groupName,\n      required: groupRequired,\n      value: groupValue,\n      onChange,\n      onValidityChange,\n    } = radioGroupContext || {};\n\n    // Imperative Handle Construction\n    const radioLabelRef = useRef<HTMLLabelElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLLabelElement> => {\n      return {\n        element: radioLabelRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (controlState !== undefined) {\n            return;\n          }\n\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          if (controlState !== undefined) {\n            return getValidationState(inputRef.current, 'manual');\n          }\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return getValidationState(inputRef.current, 'manual');\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { groupRequired, groupValue: String(groupValue) },\n      {\n        'aria-label': ariaLabelProp,\n        'aria-labelledby': ariaLabelledByProp,\n        'aria-describedby': ariaDescribedByProp,\n        'aria-details': ariaDetailsProp,\n      },\n      id,\n      onValidityChange,\n    );\n\n    /** Register every single input to ensure grouped validity reaches all native controls. */\n    useEffect(\n      () => registerMemberFormControlId(id),\n      [id, registerMemberFormControlId],\n    );\n\n    useEffect(() => {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.ADDMEMBERFORMCONTROLID,\n        payload: { formControlId: id },\n      });\n\n      return () =>\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID,\n          payload: { formControlId: id },\n        });\n    }, [id, messagesContextDispatch]);\n\n    const disabled = propDisabled ?? isDisabled;\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const checked = value === groupValue;\n\n    function handleChange(e: ChangeEvent<HTMLInputElement>) {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(e.target.value);\n      !controlState && validationOnChange?.();\n    }\n\n    let variant: 'accent' | 'emphasized' | 'default' = 'default';\n    let color: 'critical' | 'primary' | 'neutral' = 'neutral';\n\n    if (checked) {\n      variant = 'accent';\n    } else if (hasError) {\n      variant = 'emphasized';\n    }\n\n    if (hasError) {\n      color = 'critical';\n    } else if (!readOnly && checked) {\n      color = 'primary';\n    }\n\n    const { focusProps, focusClassName, isFocusVisible } = useFocusRing({\n      color,\n      disabled,\n    });\n\n    return (\n      <label\n        data-testid={dataTestId}\n        htmlFor={id}\n        ref={radioLabelRef}\n        className={clsx(\n          styles.label,\n          {\n            [styles.disabled]: disabledOrAriaDisabled,\n            [styles.checked]: checked,\n          },\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <VisuallyHidden>\n          <input\n            ref={inputRef}\n            checked={checked}\n            name={groupName}\n            value={value}\n            type=\"radio\"\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            required={groupRequired}\n            id={id}\n            onChange={handleChange}\n            onInvalid={(e) => {\n              if (controlState) {\n                e.preventDefault(); // Prevents the browser validation pop-up\n                return;\n              }\n\n              validationOnInvalid(e);\n            }}\n            readOnly={readOnly}\n            {..._mergeProps(\n              restProps,\n              focusProps,\n              controlState\n                ? {}\n                : {\n                    ...ariaProps,\n                    onBlur: validationOnBlur,\n                  },\n            )}\n          />\n        </VisuallyHidden>\n        <div\n          className={clsx(\n            styles.knob({\n              disabled: disabledOrAriaDisabled,\n              checked,\n              isFocusVisible,\n              hasError,\n              readOnly,\n            }),\n            fieldColorsCSS({\n              disabled: disabledOrAriaDisabled,\n              variant,\n              color,\n            }),\n            focusClassName,\n          )}\n        >\n          <svg\n            className={clsx(\n              styles.innerKnob,\n              fieldColorsCSS({\n                color: hasError ? 'critical' : 'primary',\n                disabled: disabledOrAriaDisabled,\n                variant: 'accent',\n              }),\n            )}\n            viewBox=\"0 0 100 100\"\n          >\n            <circle r={isFocusVisible ? '20' : '25'} cx=\"50\" cy=\"50\" />\n          </svg>\n        </div>\n        <Text as=\"span\" textStyle=\"base\">\n          {children}\n        </Text>\n      </label>\n    );\n  },\n);\n\n(Radio as typeof Radio & { displayName: string }).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/radio/RadioGroup.js

@@ -10,16 +10,14 @@ import { useIntl } from "react-intl";
 import { RadioGroupContext } from "./RadioGroupContext.js";
 import * as styles from "./styles.sty.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
-import { useFormControlState } from "../../core/hooks/useFormControlState.js";
 import { isDev } from "../../core/utils/is-node-environment.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { withFormFieldMessageContextProvider } from "../forms-core/components/form-field/FormFieldMessageContextProvider.js";
 import { InternalBaseItem as BaseItem } from "../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
-import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
+import { useFormControl } from "../forms-core/hooks/useFormControl.js";
+import { useFormFieldContext } from "../forms-core/hooks/useFormFieldContext.js";
 import { getI18nValidationState } from "../forms-core/hooks/useFormFieldValidation.js";
-import { useSyncedFormControlProps } from "../forms-core/hooks/useSyncedFormControlProps.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
-import { useInputHint } from "../hooks/useInputHint.js";
 import { useCustomMessageEmitter } from "../validation/useCustomMessageEmitter.js";
 import { useValidationStateEmitter } from "../validation/useValidationStateEmitter.js";
 const RadioGroupRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
@@ -30,6 +28,7 @@ const RadioGroupRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     value,
     name,
     defaultValue,
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
     controlState,
     onChange,
     onValidityChange,
@@ -37,6 +36,8 @@ const RadioGroupRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     required: propRequired,
     "aria-disabled": propAriaDisabled,
     "aria-describedby": ariaDescribedby,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
     className: consumerClassName,
     style: consumerStyle,
     "data-testid": dataTestId,
@@ -45,27 +46,27 @@ const RadioGroupRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     ...remainingProps
   } = props;
   const {
+    id,
     disabled,
     required,
-    id,
+    readOnly: _readOnly,
     ariaDisabled,
-    readOnly: _readOnly
-  } = useSyncedFormControlProps({
+    inputProps,
+    hintProps,
+    hint,
+    showError,
+    messageDispatch: messagesContextDispatch
+  } = useFormControl({
+    propId,
     propDisabled,
     propRequired,
-    propId,
     propAriaDisabled,
-    propReadOnly
+    propReadOnly,
+    controlState
   });
   const readOnly = !!_readOnly;
-  const { state: messagesContextState, dispatch: messagesContextDispatch } = useFormFieldMessagesContext();
-  const [controlStateHasError, hint] = useFormControlState(controlState);
-  const hasError = controlState ? controlStateHasError : messagesContextState.showError;
-  const { inputProps, hintProps } = useInputHint({
-    ariaDescribedby,
-    hint,
-    hasError
-  });
+  const { formFieldLabelId } = useFormFieldContext();
+  const groupLabelledby = ariaLabelledby ?? (ariaLabel === void 0 ? formFieldLabelId : void 0);
   const [controllableState, setControllableState] = useControllableState({
     defaultValue,
     value,
@@ -136,7 +137,7 @@ const RadioGroupRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       name,
       isDisabled: disabled,
       ariaDisabled,
-      hasError,
+      hasError: showError,
       value: controllableState,
       onChange: setControllableState,
       readOnly,
@@ -148,7 +149,7 @@ const RadioGroupRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       name,
       disabled,
       ariaDisabled,
-      hasError,
+      showError,
       controllableState,
       setControllableState,
       readOnly,
@@ -166,22 +167,25 @@ const RadioGroupRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       "aria-orientation": "vertical",
       role: "radiogroup",
       "aria-live": "polite",
+      "aria-label": ariaLabel,
       "aria-disabled": propAriaDisabled,
+      "aria-labelledby": groupLabelledby,
       ref: wrapperRef,
       className: clsx(consumerClassName, styles.group, {
         [styles.readOnly]: readOnly,
-        [styles.hasError]: hasError
+        [styles.hasError]: showError
       }),
       style: consumerStyle,
       id,
-      ...inputProps,
+      "aria-describedby": [ariaDescribedby, inputProps["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+      "aria-invalid": inputProps["aria-invalid"],
       ...remainingProps,
       children: [
         /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: radioGroupContextValue, children: /* @__PURE__ */ jsx(Flex, { flexDirection: "column", gap: 8, children }) }),
         hint && /* @__PURE__ */ jsx(
           BaseItem,
           {
-            variant: hasError ? "error" : "hint",
+            variant: showError ? "error" : "hint",
             disabled: disabled || ariaDisabled,
             ...hintProps,
             children: hint

package/esm/forms/radio/RadioGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/radio/RadioGroup.tsx"],
-  "sourcesContent": ["\uFEFFimport clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { withFormFieldMessageContextProvider } from '../forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { getI18nValidationState } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\n// #region Typings\n/**\n * Properties for the RadioGroup component\n * @public\n */\nexport type RadioGroupProps = FormControlProps<\n  string,\n  (value: string, event?: FocusEvent<HTMLInputElement>) => void | never\n> &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  MaskingProps;\n// #endregion\n\nconst RadioGroupRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef,\n  RadioGroupProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    value,\n    name,\n    defaultValue,\n    controlState,\n    onChange,\n    onValidityChange,\n    readOnly: propReadOnly,\n    required: propRequired,\n    'aria-disabled': propAriaDisabled,\n    'aria-describedby': ariaDescribedby,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: RadioGroupProps = props;\n\n  const {\n    disabled,\n    required,\n    id,\n    ariaDisabled,\n    readOnly: _readOnly,\n  } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled,\n    propReadOnly,\n  });\n  const readOnly = !!_readOnly;\n\n  const { state: messagesContextState, dispatch: messagesContextDispatch } =\n    useFormFieldMessagesContext();\n  const [controlStateHasError, hint] = useFormControlState(controlState);\n\n  const hasError = controlState\n    ? controlStateHasError\n    : messagesContextState.showError;\n\n  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { inputProps, hintProps } = useInputHint({\n    ariaDescribedby,\n    hint,\n    hasError,\n  });\n\n  const [controllableState, setControllableState] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const intl = useIntl();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const _emitValidationState = useValidationStateEmitter(onValidityChange);\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () =>\n      getI18nValidationState(\n        intl,\n        wrapperRef.current?.querySelector('input'),\n        'manual',\n      ),\n  );\n\n  useImperativeHandle(forwardedRef, (): FormControlRef<HTMLDivElement> => {\n    return {\n      element: wrapperRef.current,\n      focus() {\n        const checkedInput = wrapperRef.current?.querySelector(\n          'input:checked',\n        ) as HTMLInputElement;\n        (\n          checkedInput ??\n          (wrapperRef.current?.querySelector('input') as HTMLInputElement)\n        )?.focus();\n      },\n      validate() {\n        if (controlState !== undefined) {\n          return;\n        }\n        wrapperRef.current\n          ?.querySelectorAll('input')\n          ?.forEach((i) => i.checkValidity());\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        const firstInput = wrapperRef.current?.querySelector(\n          'input',\n        ) as HTMLInputElement | null;\n        emitValidationState(getI18nValidationState(intl, firstInput, 'manual'));\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        const firstInput = wrapperRef.current?.querySelector(\n          'input',\n        ) as HTMLInputElement | null;\n        if (controlState !== undefined) {\n          return emitValidationState(\n            getI18nValidationState(intl, firstInput, 'manual'),\n          );\n        }\n        wrapperRef.current\n          ?.querySelectorAll('input')\n          ?.forEach((i) => i.checkValidity());\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        return emitValidationState(\n          getI18nValidationState(intl, firstInput, 'manual'),\n        );\n      },\n    };\n  });\n\n  if (isDev() && name === undefined) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'RadioGroup: The \"name\" prop is missing, which is necessary to link the radio buttons correctly.',\n    );\n  }\n\n  const radioGroupContextValue = useMemo(\n    () => ({\n      name,\n      isDisabled: disabled,\n      ariaDisabled,\n      hasError,\n      value: controllableState,\n      onChange: setControllableState,\n      readOnly,\n      required,\n      controlState,\n      onValidityChange: emitValidationState,\n    }),\n    [\n      name,\n      disabled,\n      ariaDisabled,\n      hasError,\n      controllableState,\n      setControllableState,\n      readOnly,\n      required,\n      controlState,\n      emitValidationState,\n    ],\n  );\n\n  return (\n    <div\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-orientation=\"vertical\"\n      role=\"radiogroup\"\n      aria-live=\"polite\"\n      aria-disabled={propAriaDisabled}\n      ref={wrapperRef}\n      className={clsx(consumerClassName, styles.group, {\n        [styles.readOnly]: readOnly,\n        [styles.hasError]: hasError,\n      })}\n      style={consumerStyle}\n      id={id}\n      {...inputProps}\n      {...remainingProps}\n    >\n      <RadioGroupContext.Provider value={radioGroupContextValue}>\n        <Flex flexDirection=\"column\" gap={8}>\n          {children}\n        </Flex>\n      </RadioGroupContext.Provider>\n      {hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </div>\n  );\n});\n\n/**\n * Radio buttons allow users to select one option from\n * a group of related options. To group options, wrap the\n * `Radio` components inside a 'RadioGroup' component.\n * @public\n */\nexport const RadioGroup = withFormFieldMessageContextProvider<\n  RadioGroupProps,\n  FormControlRef\n>(RadioGroupRoot);\n\n(RadioGroup as typeof RadioGroup & { displayName: string }).displayName =\n  'RadioGroup';\n"],
-  "mappings": "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",
+  "sourcesContent": ["\uFEFFimport clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { withFormFieldMessageContextProvider } from '../forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport { useFormFieldContext } from '../forms-core/hooks/useFormFieldContext.js';\nimport { getI18nValidationState } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\n// #region Typings\n/**\n * Properties for the RadioGroup component\n * @public\n */\nexport type RadioGroupProps = FormControlProps<\n  string,\n  (value: string, event?: FocusEvent<HTMLInputElement>) => void | never\n> &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  MaskingProps;\n// #endregion\n\nconst RadioGroupRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef,\n  RadioGroupProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    value,\n    name,\n    defaultValue,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n    controlState,\n    onChange,\n    onValidityChange,\n    readOnly: propReadOnly,\n    required: propRequired,\n    'aria-disabled': propAriaDisabled,\n    'aria-describedby': ariaDescribedby,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: RadioGroupProps = props;\n\n  const {\n    id,\n    disabled,\n    required,\n    readOnly: _readOnly,\n    ariaDisabled,\n    inputProps,\n    hintProps,\n    hint,\n    showError,\n    messageDispatch: messagesContextDispatch,\n  } = useFormControl({\n    propId,\n    propDisabled,\n    propRequired,\n    propAriaDisabled,\n    propReadOnly,\n    controlState,\n  });\n  const readOnly = !!_readOnly;\n  const { formFieldLabelId } = useFormFieldContext();\n  const groupLabelledby =\n    ariaLabelledby ?? (ariaLabel === undefined ? formFieldLabelId : undefined);\n\n  const [controllableState, setControllableState] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const intl = useIntl();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const _emitValidationState = useValidationStateEmitter(onValidityChange);\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () =>\n      getI18nValidationState(\n        intl,\n        wrapperRef.current?.querySelector('input'),\n        'manual',\n      ),\n  );\n\n  useImperativeHandle(forwardedRef, (): FormControlRef<HTMLDivElement> => {\n    return {\n      element: wrapperRef.current,\n      focus() {\n        const checkedInput = wrapperRef.current?.querySelector(\n          'input:checked',\n        ) as HTMLInputElement;\n        (\n          checkedInput ??\n          (wrapperRef.current?.querySelector('input') as HTMLInputElement)\n        )?.focus();\n      },\n      validate() {\n        if (controlState !== undefined) {\n          return;\n        }\n        wrapperRef.current\n          ?.querySelectorAll('input')\n          ?.forEach((i) => i.checkValidity());\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        const firstInput = wrapperRef.current?.querySelector(\n          'input',\n        ) as HTMLInputElement | null;\n        emitValidationState(getI18nValidationState(intl, firstInput, 'manual'));\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        const firstInput = wrapperRef.current?.querySelector(\n          'input',\n        ) as HTMLInputElement | null;\n        if (controlState !== undefined) {\n          return emitValidationState(\n            getI18nValidationState(intl, firstInput, 'manual'),\n          );\n        }\n        wrapperRef.current\n          ?.querySelectorAll('input')\n          ?.forEach((i) => i.checkValidity());\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        return emitValidationState(\n          getI18nValidationState(intl, firstInput, 'manual'),\n        );\n      },\n    };\n  });\n\n  if (isDev() && name === undefined) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'RadioGroup: The \"name\" prop is missing, which is necessary to link the radio buttons correctly.',\n    );\n  }\n\n  const radioGroupContextValue = useMemo(\n    () => ({\n      name,\n      isDisabled: disabled,\n      ariaDisabled,\n      hasError: showError,\n      value: controllableState,\n      onChange: setControllableState,\n      readOnly,\n      required,\n      controlState,\n      onValidityChange: emitValidationState,\n    }),\n    [\n      name,\n      disabled,\n      ariaDisabled,\n      showError,\n      controllableState,\n      setControllableState,\n      readOnly,\n      required,\n      controlState,\n      emitValidationState,\n    ],\n  );\n\n  return (\n    <div\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-orientation=\"vertical\"\n      role=\"radiogroup\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      aria-disabled={propAriaDisabled}\n      aria-labelledby={groupLabelledby}\n      ref={wrapperRef}\n      className={clsx(consumerClassName, styles.group, {\n        [styles.readOnly]: readOnly,\n        [styles.hasError]: showError,\n      })}\n      style={consumerStyle}\n      id={id}\n      aria-describedby={\n        [ariaDescribedby, inputProps['aria-describedby']]\n          .filter(Boolean)\n          .join(' ') || undefined\n      }\n      aria-invalid={inputProps['aria-invalid']}\n      {...remainingProps}\n    >\n      <RadioGroupContext.Provider value={radioGroupContextValue}>\n        <Flex flexDirection=\"column\" gap={8}>\n          {children}\n        </Flex>\n      </RadioGroupContext.Provider>\n      {hint && (\n        <BaseItem\n          variant={showError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </div>\n  );\n});\n\n/**\n * Radio buttons allow users to select one option from\n * a group of related options. To group options, wrap the\n * `Radio` components inside a 'RadioGroup' component.\n * @public\n */\nexport const RadioGroup = withFormFieldMessageContextProvider<\n  RadioGroupProps,\n  FormControlRef\n>(RadioGroupRoot);\n\n(RadioGroup as typeof RadioGroup & { displayName: string }).displayName =\n  'RadioGroup';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/radio/RadioGroupContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/radio/RadioGroupContext.tsx"],
-  "sourcesContent": ["\uFEFFimport { type FocusEvent, createContext } from 'react';\n\nimport type { FormControlState } from '../../core/types/form-control-state.js';\nimport type { ValidationState } from '../validation/types.js';\n\ntype RadioGroupContextType = {\n  /** The name of the radio group. */\n  name?: string;\n  /** Whether the radio group is invalid. */\n  hasError?: boolean;\n  /** The currently selected value. */\n  value: string | undefined | null;\n  /** Whether the radio group is disabled. */\n  isDisabled?: boolean;\n  /** Whether the radio group is aria-disabled. */\n  ariaDisabled?: boolean;\n  /** Whether the radio group is readOnly. */\n  readOnly?: boolean;\n  /**\n   * Whether the radio group is required.\n   * @defaultValue false\n   * */\n  required?: boolean;\n  /** Handler that is called when the value of the group changes. */\n  onChange?: (value: string, event?: FocusEvent<HTMLInputElement>) => void;\n  /** Describes an enhanced representation of a control validity state and hints about its error for the end user. */\n  controlState?: FormControlState;\n  /**\n   * Called when validation state changes. Fires automatically on blur or change,\n   * and when triggered manually via `validate()` or `validateAsync()`.\n   */\n  onValidityChange?: (state: ValidationState) => void;\n};\n\n/** Context describing the state of a RadioGroup */\nexport const RadioGroupContext = createContext<\n  RadioGroupContextType | undefined\n>(undefined);\n"],
-  "mappings": "AAAC,SAA0B,qBAAqB;AAmCzC,MAAM,oBAAoB,cAE/B,MAAS;",
+  "sourcesContent": ["import { type FocusEvent, createContext } from 'react';\n\nimport type { FormControlState } from '../../core/types/form-control-state.js';\nimport type { ValidationState } from '../validation/types.js';\n\ntype RadioGroupContextType = {\n  /** The name of the radio group. */\n  name?: string;\n  /** Whether the radio group is invalid. */\n  hasError?: boolean;\n  /** The currently selected value. */\n  value: string | undefined | null;\n  /** Whether the radio group is disabled. */\n  isDisabled?: boolean;\n  /** Whether the radio group is aria-disabled. */\n  ariaDisabled?: boolean;\n  /** Whether the radio group is readOnly. */\n  readOnly?: boolean;\n  /**\n   * Whether the radio group is required.\n   * @defaultValue false\n   * */\n  required?: boolean;\n  /** Handler that is called when the value of the group changes. */\n  onChange?: (value: string, event?: FocusEvent<HTMLInputElement>) => void;\n  /** Describes an enhanced representation of a control validity state and hints about its error for the end user. */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n  controlState?: FormControlState;\n  /**\n   * Called when validation state changes. Fires automatically on blur or change,\n   * and when triggered manually via `validate()` or `validateAsync()`.\n   */\n  onValidityChange?: (state: ValidationState) => void;\n};\n\n/** Context describing the state of a RadioGroup */\nexport const RadioGroupContext = createContext<\n  RadioGroupContextType | undefined\n>(undefined);\n"],
+  "mappings": "AAAA,SAA0B,qBAAqB;AAoCxC,MAAM,oBAAoB,cAE/B,MAAS;",
   "names": []
 }

package/esm/forms/radio/styles.css

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

package/esm/forms/radio/styles.sty.js

@@ -2,14 +2,14 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var checked = "_h96idu4-3-8-0";
-var disabled = "_h96idu3-3-8-0";
-var group = "_h96idu0-3-8-0";
-var hasError = "_h96idu2-3-8-0";
-var innerKnob = "_h96iduk-3-8-0";
-var knob = _7a468({ defaultClassName: "_h96idu6-3-8-0", variantClassNames: { disabled: { true: "_h96idu7-3-8-0" }, checked: { true: "_h96idu8-3-8-0", false: "_h96idu9-3-8-0" }, hasError: { true: "_h96idua-3-8-0", false: "_h96idub-3-8-0" }, isFocusVisible: { true: "_h96iduc-3-8-0", false: "_h96idud-3-8-0" }, readOnly: { true: "_h96idue-3-8-0", false: "_h96iduf-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-8-0"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-8-0"], [{ readOnly: true, disabled: false }, "_h96idui-3-8-0"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-8-0"]] });
-var label = "_h96idu5-3-8-0";
-var readOnly = "_h96idu1-3-8-0";
+var checked = "_h96idu4-3-9-1";
+var disabled = "_h96idu3-3-9-1";
+var group = "_h96idu0-3-9-1";
+var hasError = "_h96idu2-3-9-1";
+var innerKnob = "_h96iduk-3-9-1";
+var knob = _7a468({ defaultClassName: "_h96idu6-3-9-1", variantClassNames: { disabled: { true: "_h96idu7-3-9-1" }, checked: { true: "_h96idu8-3-9-1", false: "_h96idu9-3-9-1" }, hasError: { true: "_h96idua-3-9-1", false: "_h96idub-3-9-1" }, isFocusVisible: { true: "_h96iduc-3-9-1", false: "_h96idud-3-9-1" }, readOnly: { true: "_h96idue-3-9-1", false: "_h96iduf-3-9-1" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-9-1"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-9-1"], [{ readOnly: true, disabled: false }, "_h96idui-3-9-1"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-9-1"]] });
+var label = "_h96idu5-3-9-1";
+var readOnly = "_h96idu1-3-9-1";
 export {
   checked,
   disabled,

package/esm/forms/radio/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/radio/styles.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checked = '_h96idu4-3-8-0';\nexport var disabled = '_h96idu3-3-8-0';\nexport var group = '_h96idu0-3-8-0';\nexport var hasError = '_h96idu2-3-8-0';\nexport var innerKnob = '_h96iduk-3-8-0';\nexport var knob = _7a468({defaultClassName:'_h96idu6-3-8-0',variantClassNames:{disabled:{true:'_h96idu7-3-8-0'},checked:{true:'_h96idu8-3-8-0',false:'_h96idu9-3-8-0'},hasError:{true:'_h96idua-3-8-0',false:'_h96idub-3-8-0'},isFocusVisible:{true:'_h96iduc-3-8-0',false:'_h96idud-3-8-0'},readOnly:{true:'_h96idue-3-8-0',false:'_h96iduf-3-8-0'}},defaultVariants:{},compoundVariants:[[{checked:false,hasError:true,isFocusVisible:false,disabled:false,readOnly:false},'_h96idug-3-8-0'],[{checked:false,hasError:false,isFocusVisible:false,disabled:false,readOnly:false},'_h96iduh-3-8-0'],[{readOnly:true,disabled:false},'_h96idui-3-8-0'],[{readOnly:true,hasError:true,disabled:false},'_h96iduj-3-8-0']]});\nexport var label = '_h96idu5-3-8-0';\nexport var readOnly = '_h96idu1-3-8-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checked = '_h96idu4-3-9-1';\nexport var disabled = '_h96idu3-3-9-1';\nexport var group = '_h96idu0-3-9-1';\nexport var hasError = '_h96idu2-3-9-1';\nexport var innerKnob = '_h96iduk-3-9-1';\nexport var knob = _7a468({defaultClassName:'_h96idu6-3-9-1',variantClassNames:{disabled:{true:'_h96idu7-3-9-1'},checked:{true:'_h96idu8-3-9-1',false:'_h96idu9-3-9-1'},hasError:{true:'_h96idua-3-9-1',false:'_h96idub-3-9-1'},isFocusVisible:{true:'_h96iduc-3-9-1',false:'_h96idud-3-9-1'},readOnly:{true:'_h96idue-3-9-1',false:'_h96iduf-3-9-1'}},defaultVariants:{},compoundVariants:[[{checked:false,hasError:true,isFocusVisible:false,disabled:false,readOnly:false},'_h96idug-3-9-1'],[{checked:false,hasError:false,isFocusVisible:false,disabled:false,readOnly:false},'_h96iduh-3-9-1'],[{readOnly:true,disabled:false},'_h96idui-3-9-1'],[{readOnly:true,hasError:true,disabled:false},'_h96iduj-3-9-1']]});\nexport var label = '_h96idu5-3-9-1';\nexport var readOnly = '_h96idu1-3-9-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,IAAI,WAAW;AACf,IAAI,YAAY;AAChB,IAAI,OAAO,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,gBAAe,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,SAAQ,OAAM,UAAS,MAAK,gBAAe,OAAM,UAAS,OAAM,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,SAAQ,OAAM,UAAS,OAAM,gBAAe,OAAM,UAAS,OAAM,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,UAAS,MAAK,GAAE,gBAAgB,CAAC,EAAC,CAAC;AAChrB,IAAI,QAAQ;AACZ,IAAI,WAAW;",
   "names": []
 }

package/esm/forms/search-input/SearchInput.css

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

package/esm/forms/search-input/SearchInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/search-input/SearchInput.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type ChangeEvent, type KeyboardEvent, forwardRef } from 'react';\n\nimport { MagnifyingGlassIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './SearchInput.sty.js';\nimport { Stepper } from './Stepper.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport type { FormControlStateProps } from '../../core/types/form-control-state.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport { BaseInputButton } from '../_base-input/BaseInputButton.js';\nimport { BaseInputSuffix } from '../_base-input/BaseInputContent.js';\nimport { ClearButton } from '../_base-input/ClearButton.js';\nimport type { FormControlRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'SearchInput';\n\n//#region Typings\n/**\n * The properties of the SearchInput component.\n * @public\n */\nexport type SearchInputProps = Pick<\n  BaseInputProps,\n  | 'variant'\n  | 'onBlur'\n  | 'autoComplete'\n  | 'placeholder'\n  | 'minLength'\n  | 'maxLength'\n> &\n  FormControlStateProps &\n  WithChildren &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  FormControlProps<string, (value: string) => void> &\n  BehaviorTrackingProps;\n\n//#endregion Typings\n\nconst SearchInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  SearchInputProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    onChange,\n    value,\n    defaultValue,\n    placeholder,\n    required,\n    readOnly = false,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    className: consumerClassName,\n    ...remainingProps\n  }: SearchInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setInternalValue(e.target.value);\n    if (slots.stepper && e.target.value === '') {\n      const { onCurrentChange } = slots.stepper.props;\n      onCurrentChange(0);\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (!slots.stepper) {\n      return;\n    }\n    if (e.key !== 'Enter') {\n      return;\n    }\n\n    e.preventDefault();\n    const { current, total, onCurrentChange } = slots.stepper.props;\n\n    if (e.shiftKey) {\n      onCurrentChange(current > 0 ? current - 1 : total - 1);\n    } else {\n      onCurrentChange(current < total - 1 ? current + 1 : 0);\n    }\n  };\n\n  function onClear() {\n    setInternalValue('');\n  }\n\n  const [slots] = useSlots(children, {\n    stepper: Stepper,\n  });\n\n  const isEmpty = internalValue === '' || internalValue === undefined;\n  const hasStepper = !!slots.stepper;\n\n  return (\n    <BaseInput\n      ref={forwardedRef}\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      {...(hasStepper ? { onKeyDown: handleKeyDown } : {})}\n      className={clsx(styles.searchInput({ hasStepper }), consumerClassName)}\n      type=\"search\"\n      value={internalValue}\n      required={required}\n      readOnly={readOnly}\n      onChange={handleOnChange}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-disabled={ariaDisabledProp}\n      placeholder={placeholder}\n      data-dt-component={COMPONENT_NAME}\n      // The width of the input is handled via CSS and the parent elements,\n      // so we set it to 0 here to prevent the default width behavior of inputs\n      size={1}\n    >\n      <BaseInput.Prefix>\n        <MagnifyingGlassIcon />\n      </BaseInput.Prefix>\n      {!isEmpty && (\n        <BaseInput.ReservedSuffix>\n          {slots.stepper}\n          <ClearButton onClear={onClear} />\n        </BaseInput.ReservedSuffix>\n      )}\n      {children}\n    </BaseInput>\n  );\n});\n\n/**\n * Use the `SearchInput` component for search queries.\n * It includes a built-in `Clear` button for quick resets.\n * @public\n */\nexport const SearchInput = Object.assign(SearchInputRoot, {\n  Suffix: BaseInputSuffix,\n  Button: BaseInputButton,\n  Stepper,\n});\n\n(SearchInput as typeof SearchInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AA2IQ,cAGA,YAHA;AA3IR,OAAO,UAAU;AACjB,SAA+C,kBAAkB;AAEjE,SAAS,2BAA2B;AAEpC,YAAY,YAAY;AACxB,SAAS,eAAe;AACxB,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AAQzB,SAAS,kBAAkB;AAE3B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAG5B,MAAM,iBAAiB;AA0BvB,MAAM,kBAAkC,2BAGtC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAsB;AAEtB,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB;AAAA,IAC7D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,CAAC,MAAqC;AAC3D,qBAAiB,EAAE,OAAO,KAAK;AAC/B,QAAI,MAAM,WAAW,EAAE,OAAO,UAAU,IAAI;AAC1C,YAAM,EAAE,gBAAgB,IAAI,MAAM,QAAQ;AAC1C,sBAAgB,CAAC;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,MAAuC;AAC5D,QAAI,CAAC,MAAM,SAAS;AAClB;AAAA,IACF;AACA,QAAI,EAAE,QAAQ,SAAS;AACrB;AAAA,IACF;AAEA,MAAE,eAAe;AACjB,UAAM,EAAE,SAAS,OAAO,gBAAgB,IAAI,MAAM,QAAQ;AAE1D,QAAI,EAAE,UAAU;AACd,sBAAgB,UAAU,IAAI,UAAU,IAAI,QAAQ,CAAC;AAAA,IACvD,OAAO;AACL,sBAAgB,UAAU,QAAQ,IAAI,UAAU,IAAI,CAAC;AAAA,IACvD;AAAA,EACF;AAEA,WAAS,UAAU;AACjB,qBAAiB,EAAE;AAAA,EACrB;AAEA,QAAM,CAAC,KAAK,IAAI,SAAS,UAAU;AAAA,IACjC,SAAS;AAAA,EACX,CAAC;AAED,QAAM,UAAU,kBAAkB,MAAM,kBAAkB;AAC1D,QAAM,aAAa,CAAC,CAAC,MAAM;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG,WAAW,WAAW,uBAAuB;AAAA,MAChD,GAAI,aAAa,EAAE,WAAW,cAAc,IAAI,CAAC;AAAA,MAClD,WAAW,KAAK,OAAO,YAAY,EAAE,WAAW,CAAC,GAAG,iBAAiB;AAAA,MACrE,MAAK;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,iBAAe;AAAA,MACf;AAAA,MACA,qBAAmB;AAAA,MAGnB,MAAM;AAAA,MAEN;AAAA,4BAAC,UAAU,QAAV,EACC,8BAAC,uBAAoB,GACvB;AAAA,QACC,CAAC,WACA,qBAAC,UAAU,gBAAV,EACE;AAAA,gBAAM;AAAA,UACP,oBAAC,eAAY,SAAkB;AAAA,WACjC;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;AAOM,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AACF,CAAC;AAEA,YAA6D,cAC5D;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type ChangeEvent, type KeyboardEvent, forwardRef } from 'react';\n\nimport { MagnifyingGlassIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './SearchInput.sty.js';\nimport { Stepper } from './Stepper.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport type { FormControlStateProps } from '../../core/types/form-control-state.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport { BaseInputButton } from '../_base-input/BaseInputButton.js';\nimport { BaseInputSuffix } from '../_base-input/BaseInputContent.js';\nimport { ClearButton } from '../_base-input/ClearButton.js';\nimport type { FormControlRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'SearchInput';\n\n//#region Typings\n/**\n * The properties of the SearchInput component.\n * @public\n */\nexport type SearchInputProps = Pick<\n  BaseInputProps,\n  | 'variant'\n  | 'onBlur'\n  | 'autoComplete'\n  | 'placeholder'\n  | 'minLength'\n  | 'maxLength'\n> &\n  // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n  FormControlStateProps &\n  WithChildren &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  FormControlProps<string, (value: string) => void> &\n  BehaviorTrackingProps;\n\n//#endregion Typings\n\nconst SearchInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  SearchInputProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    onChange,\n    value,\n    defaultValue,\n    placeholder,\n    required,\n    readOnly = false,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    className: consumerClassName,\n    ...remainingProps\n  }: SearchInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setInternalValue(e.target.value);\n    if (slots.stepper && e.target.value === '') {\n      const { onCurrentChange } = slots.stepper.props;\n      onCurrentChange(0);\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (!slots.stepper) {\n      return;\n    }\n    if (e.key !== 'Enter') {\n      return;\n    }\n\n    e.preventDefault();\n    const { current, total, onCurrentChange } = slots.stepper.props;\n\n    if (e.shiftKey) {\n      onCurrentChange(current > 0 ? current - 1 : total - 1);\n    } else {\n      onCurrentChange(current < total - 1 ? current + 1 : 0);\n    }\n  };\n\n  function onClear() {\n    setInternalValue('');\n  }\n\n  const [slots] = useSlots(children, {\n    stepper: Stepper,\n  });\n\n  const isEmpty = internalValue === '' || internalValue === undefined;\n  const hasStepper = !!slots.stepper;\n\n  return (\n    <BaseInput\n      ref={forwardedRef}\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      {...(hasStepper ? { onKeyDown: handleKeyDown } : {})}\n      className={clsx(styles.searchInput({ hasStepper }), consumerClassName)}\n      type=\"search\"\n      value={internalValue}\n      required={required}\n      readOnly={readOnly}\n      onChange={handleOnChange}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-disabled={ariaDisabledProp}\n      placeholder={placeholder}\n      data-dt-component={COMPONENT_NAME}\n      // The width of the input is handled via CSS and the parent elements,\n      // so we set it to 0 here to prevent the default width behavior of inputs\n      size={1}\n    >\n      <BaseInput.Prefix>\n        <MagnifyingGlassIcon />\n      </BaseInput.Prefix>\n      {!isEmpty && (\n        <BaseInput.ReservedSuffix>\n          {slots.stepper}\n          <ClearButton onClear={onClear} />\n        </BaseInput.ReservedSuffix>\n      )}\n      {children}\n    </BaseInput>\n  );\n});\n\n/**\n * Use the `SearchInput` component for search queries.\n * It includes a built-in `Clear` button for quick resets.\n * @public\n */\nexport const SearchInput = Object.assign(SearchInputRoot, {\n  Suffix: BaseInputSuffix,\n  Button: BaseInputButton,\n  Stepper,\n});\n\n(SearchInput as typeof SearchInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AA4IQ,cAGA,YAHA;AA5IR,OAAO,UAAU;AACjB,SAA+C,kBAAkB;AAEjE,SAAS,2BAA2B;AAEpC,YAAY,YAAY;AACxB,SAAS,eAAe;AACxB,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AAQzB,SAAS,kBAAkB;AAE3B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAG5B,MAAM,iBAAiB;AA2BvB,MAAM,kBAAkC,2BAGtC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAsB;AAEtB,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB;AAAA,IAC7D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,CAAC,MAAqC;AAC3D,qBAAiB,EAAE,OAAO,KAAK;AAC/B,QAAI,MAAM,WAAW,EAAE,OAAO,UAAU,IAAI;AAC1C,YAAM,EAAE,gBAAgB,IAAI,MAAM,QAAQ;AAC1C,sBAAgB,CAAC;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,MAAuC;AAC5D,QAAI,CAAC,MAAM,SAAS;AAClB;AAAA,IACF;AACA,QAAI,EAAE,QAAQ,SAAS;AACrB;AAAA,IACF;AAEA,MAAE,eAAe;AACjB,UAAM,EAAE,SAAS,OAAO,gBAAgB,IAAI,MAAM,QAAQ;AAE1D,QAAI,EAAE,UAAU;AACd,sBAAgB,UAAU,IAAI,UAAU,IAAI,QAAQ,CAAC;AAAA,IACvD,OAAO;AACL,sBAAgB,UAAU,QAAQ,IAAI,UAAU,IAAI,CAAC;AAAA,IACvD;AAAA,EACF;AAEA,WAAS,UAAU;AACjB,qBAAiB,EAAE;AAAA,EACrB;AAEA,QAAM,CAAC,KAAK,IAAI,SAAS,UAAU;AAAA,IACjC,SAAS;AAAA,EACX,CAAC;AAED,QAAM,UAAU,kBAAkB,MAAM,kBAAkB;AAC1D,QAAM,aAAa,CAAC,CAAC,MAAM;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG,WAAW,WAAW,uBAAuB;AAAA,MAChD,GAAI,aAAa,EAAE,WAAW,cAAc,IAAI,CAAC;AAAA,MAClD,WAAW,KAAK,OAAO,YAAY,EAAE,WAAW,CAAC,GAAG,iBAAiB;AAAA,MACrE,MAAK;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,iBAAe;AAAA,MACf;AAAA,MACA,qBAAmB;AAAA,MAGnB,MAAM;AAAA,MAEN;AAAA,4BAAC,UAAU,QAAV,EACC,8BAAC,uBAAoB,GACvB;AAAA,QACC,CAAC,WACA,qBAAC,UAAU,gBAAV,EACE;AAAA,gBAAM;AAAA,UACP,oBAAC,eAAY,SAAkB;AAAA,WACjC;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;AAOM,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AACF,CAAC;AAEA,YAA6D,cAC5D;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import "./SearchInput.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var searchInput = _7a468({ defaultClassName: "_1mumub80-3-8-0", variantClassNames: { hasStepper: { true: "_1mumub81-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var searchInput = _7a468({ defaultClassName: "_1mumub80-3-9-1", variantClassNames: { hasStepper: { true: "_1mumub81-3-9-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   searchInput
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/search-input/SearchInput.css.ts"],
-  "sourcesContent": ["import './SearchInput.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var searchInput = _7a468({defaultClassName:'_1mumub80-3-8-0',variantClassNames:{hasStepper:{true:'_1mumub81-3-8-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './SearchInput.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var searchInput = _7a468({defaultClassName:'_1mumub80-3-9-1',variantClassNames:{hasStepper:{true:'_1mumub81-3-9-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,cAAc,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/forms/search-input/Stepper.css

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

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

@@ -5,9 +5,9 @@ import "../hooks/useAutofillEvent.css";
 import "../_base-input/BaseInput.css";
 import "../_base-input/BaseInputContent.css";
 import "./Stepper.css";
-var matchPositionIndicators = "_s3yy5s0-3-8-0 _o6rxr70-3-8-0 _da9a8v0-3-8-0 _da9a8v2-3-8-0 _da9a8v3-3-8-0 _da9a8vb-3-8-0";
-var stepperButton = "_s3yy5s2-3-8-0 _1a8lqy9e-3-8-0";
-var stepperButtons = "_s3yy5s1-3-8-0";
+var matchPositionIndicators = "_s3yy5s0-3-9-1 _o6rxr70-3-9-1 _da9a8v0-3-9-1 _da9a8v2-3-9-1 _da9a8v3-3-9-1 _da9a8vb-3-9-1";
+var stepperButton = "_s3yy5s2-3-9-1 _1a8lqy9e-3-9-1";
+var stepperButtons = "_s3yy5s1-3-9-1";
 export {
   matchPositionIndicators,
   stepperButton,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/search-input/Stepper.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport '../_base-input/BaseInput.css';\nimport '../_base-input/BaseInputContent.css';\nimport './Stepper.css';\nexport var matchPositionIndicators = '_s3yy5s0-3-8-0 _o6rxr70-3-8-0 _da9a8v0-3-8-0 _da9a8v2-3-8-0 _da9a8v3-3-8-0 _da9a8vb-3-8-0';\nexport var stepperButton = '_s3yy5s2-3-8-0 _1a8lqy9e-3-8-0';\nexport var stepperButtons = '_s3yy5s1-3-8-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport '../_base-input/BaseInput.css';\nimport '../_base-input/BaseInputContent.css';\nimport './Stepper.css';\nexport var matchPositionIndicators = '_s3yy5s0-3-9-1 _o6rxr70-3-9-1 _da9a8v0-3-9-1 _da9a8v2-3-9-1 _da9a8v3-3-9-1 _da9a8vb-3-9-1';\nexport var stepperButton = '_s3yy5s2-3-9-1 _1a8lqy9e-3-9-1';\nexport var stepperButtons = '_s3yy5s1-3-9-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,0BAA0B;AAC9B,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
   "names": []
 }