@dynatrace/strato-components 3.12.2 → 3.13.0

package/esm/forms/switch/Switch.css

@@ -1,70 +1,70 @@
-._1tkc5xf0-3-12-2 {
+._1tkc5xf0-3-13-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   cursor: pointer;
 }
-._1tkc5xf1-3-12-2 {
+._1tkc5xf1-3-13-0 {
   cursor: not-allowed;
 }
-._1tkc5xf2-3-12-2 {
+._1tkc5xf2-3-13-0 {
   cursor: default;
 }
-._1tkc5xf3-3-12-2 {
+._1tkc5xf3-3-13-0 {
   font-size: var(--dt-typography-text-base-default-size, 14px);
   overflow-wrap: anywhere;
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
 }
-._1tkc5xf4-3-12-2 {
+._1tkc5xf4-3-13-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xf5-3-12-2 {
+._1tkc5xf5-3-13-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1tkc5xf6-3-12-2:after {
+._1tkc5xf6-3-13-0:after {
   content: "*";
 }
-._1tkc5xf7-3-12-2 {
+._1tkc5xf7-3-13-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xfb-3-12-2 {
-  --_1tkc5xfa-3-12-2: var(--_bx32h1-3-12-2);
+._1tkc5xfb-3-13-0 {
+  --_1tkc5xfa-3-13-0: var(--_bx32h1-3-13-0);
   display: flex;
   align-items: center;
   transition-duration: var(--dt-animations-move-duration-fast, 150ms);
   transition-timing-function: var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-property: transform;
 }
-._1tkc5xfc-3-12-2 {
-  --_1tkc5xf8-3-12-2: 1;
-  --_1tkc5xf9-3-12-2: 0;
+._1tkc5xfc-3-13-0 {
+  --_1tkc5xf8-3-13-0: 1;
+  --_1tkc5xf9-3-13-0: 0;
   transform: translateX(calc(var(--dt-spacings-size-4, 4px) + var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px)));
 }
-._1tkc5xfd-3-12-2 {
-  --_1tkc5xf8-3-12-2: 0;
-  --_1tkc5xf9-3-12-2: 1;
+._1tkc5xfd-3-13-0 {
+  --_1tkc5xf8-3-13-0: 0;
+  --_1tkc5xf9-3-13-0: 1;
   transform: unset;
 }
-._1tkc5xfe-3-12-2 {
-  --_1tkc5xfa-3-12-2: var(--dt-colors-icon-neutral-subdued, #595a7d);
+._1tkc5xfe-3-13-0 {
+  --_1tkc5xfa-3-13-0: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1tkc5xfg-3-12-2 {
-  --_1tkc5xfa-3-12-2: var(--dt-colors-icon-critical-default, #bb0731);
+._1tkc5xfg-3-13-0 {
+  --_1tkc5xfa-3-13-0: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._1tkc5xfb-3-12-2 > svg {
+._1tkc5xfb-3-13-0 > svg {
   transition-duration: var(--dt-animations-move-duration-fast, 150ms);
   transition-timing-function: var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-delay: var(--dt-timings-offset-medium, 30ms);
   transition-property: opacity;
 }
-._1tkc5xfb-3-12-2 > svg:nth-child(1) {
-  opacity: var(--_1tkc5xf8-3-12-2);
-  color: var(--_1tkc5xfa-3-12-2);
+._1tkc5xfb-3-13-0 > svg:nth-child(1) {
+  opacity: var(--_1tkc5xf8-3-13-0);
+  color: var(--_1tkc5xfa-3-13-0);
 }
-._1tkc5xfb-3-12-2 > svg:nth-child(3) {
-  opacity: var(--_1tkc5xf9-3-12-2);
-  color: var(--_1tkc5xfa-3-12-2);
+._1tkc5xfb-3-13-0 > svg:nth-child(3) {
+  opacity: var(--_1tkc5xf9-3-13-0);
+  color: var(--_1tkc5xfa-3-13-0);
 }
-._1tkc5xfh-3-12-2 {
+._1tkc5xfh-3-13-0 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -79,27 +79,27 @@
   min-width: 38px;
   position: relative;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-12-2);
+  background-color: var(--_bx32h3-3-13-0);
 }
-._1tkc5xfr-3-12-2 {
+._1tkc5xfr-3-13-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._1tkc5xfs-3-12-2 {
+._1tkc5xfs-3-13-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1tkc5xft-3-12-2 {
+._1tkc5xft-3-13-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);
 }
-._1tkc5xfu-3-12-2 {
+._1tkc5xfu-3-13-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-default, #dadbe4);
 }
-._1tkc5xfv-3-12-2 {
+._1tkc5xfv-3-13-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);
 }
-._1tkc5xfw-3-12-2 {
+._1tkc5xfw-3-13-0 {
   transition-property: background-color;
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-fast, 150ms);
@@ -110,5 +110,5 @@
   height: var(--dt-spacings-size-12, 12px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
   box-shadow: none;
-  background-color: var(--_1tkc5xfa-3-12-2);
+  background-color: var(--_1tkc5xfa-3-13-0);
 }

package/esm/forms/switch/Switch.js

@@ -51,7 +51,7 @@ const Switch = forwardRef(
       value,
       defaultValue,
       children,
-      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
       controlState,
       name,
       _form,

package/esm/forms/switch/Switch.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/switch/Switch.tsx"],
-  "sourcesContent": ["\uFEFFimport clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CheckmarkIcon, XmarkIcon } from '@dynatrace/strato-icons';\n\nimport {\n  switchIconCSS,\n  switchLabelCSS,\n  switchTextCSS,\n  switchThumbCSS,\n  switchWrapperCSS,\n} from './Switch.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.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 { 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 { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\nfunction getSwitchFieldVariant(isSelected: boolean, showError: boolean) {\n  if (isSelected) {\n    return 'accent';\n  }\n  if (showError) {\n    return 'emphasized';\n  }\n  return 'default';\n}\n\nconst COMPONENT_NAME = 'Switch';\n\n// #region Types\n/**\n * @public\n */\nexport type SwitchProps = FormControlProps<\n  boolean,\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never,\n  HTMLDivElement\n> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  BehaviorTrackingProps &\n  WithChildren & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /** The string used as the value of the switch when submitting it in a form, if the switch is toggled on. */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * Use the `Switch` to let users toggle a setting between on and off. The change takes effect immediately without requiring a separate confirmation step.\n * @public\n */\nexport const Switch = forwardRef<FormControlRef, SwitchProps>(\n  (props, forwardedRef) => {\n    const {\n      value,\n      defaultValue,\n      children,\n      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n      controlState,\n      name,\n      _form,\n      _messageTarget,\n      formValue,\n      onValidityChange,\n      onChange,\n      onFocus,\n      onBlur,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      id: propId,\n      required: propRequired,\n      disabled: propDisabled,\n      'aria-disabled': ariaDisabledProp,\n      readOnly: propReadOnly,\n      ...remainingProps\n    }: SwitchProps = props;\n\n    const [behavioralTrackingProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const {\n      id,\n      disabled,\n      required,\n      ariaDisabled,\n      readOnly,\n      inputProps,\n      hintProps,\n      hint,\n      showError,\n      messageDispatch: messagesContextDispatch,\n    } = useFormControl({\n      propId,\n      propDisabled,\n      propRequired,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n      controlState,\n    });\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const ariaLabelingProps = _useAriaLabelingProps(props);\n\n    const [isSelected, setIsSelected] = useControllableState({\n      value,\n      defaultValue,\n    });\n\n    // Imperative Handle Construction\n    const intl = useIntl();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const controlRef = useRef<FormControlRef>(null);\n    const combinedRef = useMergeRefs<FormControlRef | null>([\n      forwardedRef,\n      controlRef,\n    ]);\n    const formValidityChangeRef = useRef<\n      ((state: ValidationState) => void) | undefined\n    >(undefined);\n    const _emitValidationState = useValidationStateEmitter((state) =>\n      formValidityChangeRef.current?.(state),\n    );\n    const emitValidationState = useCustomMessageEmitter(\n      _emitValidationState,\n      () => getI18nValidationState(intl, inputRef.current, 'manual'),\n    );\n\n    const formControl = useInternalFormRegistration({\n      id,\n      name,\n      form: _form,\n      messageTarget: _messageTarget,\n      value: isSelected === true,\n      controlRef,\n      onValidityChange,\n    });\n    formValidityChangeRef.current = formControl.onValidityChange;\n\n    useImperativeHandle(combinedRef, (): FormControlRef<HTMLDivElement> => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          emitValidationState(\n            getI18nValidationState(intl, inputRef.current, 'manual'),\n          );\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return emitValidationState(\n            getI18nValidationState(intl, inputRef.current, 'manual'),\n          );\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { required, value: String(value), isSelected },\n      undefined,\n      undefined,\n      _emitValidationState,\n    );\n\n    if (value !== undefined && !onChange && isDev()) {\n      // eslint-disable-next-line no-console\n      console.log(\n        'Defining \"value\" makes the switch controlled. Set the onChange() callback and implement the toggle functionality.',\n      );\n    }\n\n    const { containerClassName, ...containerProps } =\n      useContainerFocus<HTMLDivElement>({\n        onFocus,\n        onBlur,\n        disabled,\n        emitValidationState,\n      });\n\n    const color = isSelected ? 'primary' : 'neutral';\n    let focusRingColor: 'critical' | 'primary' | 'neutral' = 'neutral';\n\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!(readOnly || disabledOrAriaDisabled) && isSelected) {\n      focusRingColor = 'primary';\n    }\n\n    const { focusClassName, focusProps, isFocusVisible } = useFocusRing({\n      color: focusRingColor,\n      disabled,\n    });\n\n    function handleChange(e?: ChangeEvent<HTMLInputElement>): void {\n      if (!disabled && !readOnly) {\n        onChange?.(!isSelected, e);\n        setIsSelected(!isSelected);\n        !controlState && validationOnChange();\n      }\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        role=\"group\"\n        flexDirection=\"column\"\n        gap={4}\n        className={clsx(containerClassName, consumerClassName)}\n        style={consumerStyle}\n        {...containerProps}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            switchLabelCSS({ disabled: disabledOrAriaDisabled, readOnly }),\n          )}\n        >\n          <VisuallyHidden>\n            <input\n              id={id}\n              type=\"checkbox\"\n              role=\"switch\"\n              checked={isSelected}\n              aria-disabled={ariaDisabled}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              aria-checked={isSelected}\n              onChange={handleChange}\n              onBlur={focusProps.onBlur}\n              onFocus={focusProps.onFocus}\n              onInvalid={(event) => {\n                !controlState && validationOnInvalid(event);\n              }}\n              name={name}\n              form={_form}\n              value={formValue}\n              ref={inputRef}\n              {..._mergeProps(\n                controlState ? inputProps : ariaProps,\n                ariaLabelingProps,\n              )}\n            />\n          </VisuallyHidden>\n          <div\n            className={clsx(\n              focusClassName,\n              switchWrapperCSS({\n                disabled: disabledOrAriaDisabled,\n                color,\n                hasError: showError,\n                isFocusVisible,\n                readOnly,\n              }),\n              fieldColorsCSS({\n                disabled: disabledOrAriaDisabled,\n                color: showError ? 'critical' : color,\n                variant: getSwitchFieldVariant(isSelected, showError),\n              }),\n            )}\n          >\n            <div\n              className={switchIconCSS({\n                selected: isSelected,\n                readOnly,\n                hasError: showError,\n              })}\n            >\n              <CheckmarkIcon size=\"small\" />\n              <div className={switchThumbCSS} />\n              <XmarkIcon size=\"small\" />\n            </div>\n          </div>\n          <span\n            className={switchTextCSS({\n              disabled: disabledOrAriaDisabled,\n              required: !!children && required,\n            })}\n          >\n            {children}\n          </span>\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Switch as typeof Switch & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CheckmarkIcon, XmarkIcon } from '@dynatrace/strato-icons';\n\nimport {\n  switchIconCSS,\n  switchLabelCSS,\n  switchTextCSS,\n  switchThumbCSS,\n  switchWrapperCSS,\n} from './Switch.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.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 { 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 { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\nfunction getSwitchFieldVariant(isSelected: boolean, showError: boolean) {\n  if (isSelected) {\n    return 'accent';\n  }\n  if (showError) {\n    return 'emphasized';\n  }\n  return 'default';\n}\n\nconst COMPONENT_NAME = 'Switch';\n\n// #region Types\n/**\n * @public\n */\nexport type SwitchProps = FormControlProps<\n  boolean,\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never,\n  HTMLDivElement\n> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  BehaviorTrackingProps &\n  WithChildren & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /** The string used as the value of the switch when submitting it in a form, if the switch is toggled on. */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * Use the `Switch` to let users toggle a setting between on and off. The change takes effect immediately without requiring a separate confirmation step.\n * @public\n */\nexport const Switch = forwardRef<FormControlRef, SwitchProps>(\n  (props, forwardedRef) => {\n    const {\n      value,\n      defaultValue,\n      children,\n      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n      controlState,\n      name,\n      _form,\n      _messageTarget,\n      formValue,\n      onValidityChange,\n      onChange,\n      onFocus,\n      onBlur,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      id: propId,\n      required: propRequired,\n      disabled: propDisabled,\n      'aria-disabled': ariaDisabledProp,\n      readOnly: propReadOnly,\n      ...remainingProps\n    }: SwitchProps = props;\n\n    const [behavioralTrackingProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const {\n      id,\n      disabled,\n      required,\n      ariaDisabled,\n      readOnly,\n      inputProps,\n      hintProps,\n      hint,\n      showError,\n      messageDispatch: messagesContextDispatch,\n    } = useFormControl({\n      propId,\n      propDisabled,\n      propRequired,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n      controlState,\n    });\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const ariaLabelingProps = _useAriaLabelingProps(props);\n\n    const [isSelected, setIsSelected] = useControllableState({\n      value,\n      defaultValue,\n    });\n\n    // Imperative Handle Construction\n    const intl = useIntl();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const controlRef = useRef<FormControlRef>(null);\n    const combinedRef = useMergeRefs<FormControlRef | null>([\n      forwardedRef,\n      controlRef,\n    ]);\n    const formValidityChangeRef = useRef<\n      ((state: ValidationState) => void) | undefined\n    >(undefined);\n    const _emitValidationState = useValidationStateEmitter((state) =>\n      formValidityChangeRef.current?.(state),\n    );\n    const emitValidationState = useCustomMessageEmitter(\n      _emitValidationState,\n      () => getI18nValidationState(intl, inputRef.current, 'manual'),\n    );\n\n    const formControl = useInternalFormRegistration({\n      id,\n      name,\n      form: _form,\n      messageTarget: _messageTarget,\n      value: isSelected === true,\n      controlRef,\n      onValidityChange,\n    });\n    formValidityChangeRef.current = formControl.onValidityChange;\n\n    useImperativeHandle(combinedRef, (): FormControlRef<HTMLDivElement> => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          emitValidationState(\n            getI18nValidationState(intl, inputRef.current, 'manual'),\n          );\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return emitValidationState(\n            getI18nValidationState(intl, inputRef.current, 'manual'),\n          );\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { required, value: String(value), isSelected },\n      undefined,\n      undefined,\n      _emitValidationState,\n    );\n\n    if (value !== undefined && !onChange && isDev()) {\n      // oxlint-disable-next-line no-console\n      console.log(\n        'Defining \"value\" makes the switch controlled. Set the onChange() callback and implement the toggle functionality.',\n      );\n    }\n\n    const { containerClassName, ...containerProps } =\n      useContainerFocus<HTMLDivElement>({\n        onFocus,\n        onBlur,\n        disabled,\n        emitValidationState,\n      });\n\n    const color = isSelected ? 'primary' : 'neutral';\n    let focusRingColor: 'critical' | 'primary' | 'neutral' = 'neutral';\n\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!(readOnly || disabledOrAriaDisabled) && isSelected) {\n      focusRingColor = 'primary';\n    }\n\n    const { focusClassName, focusProps, isFocusVisible } = useFocusRing({\n      color: focusRingColor,\n      disabled,\n    });\n\n    function handleChange(e?: ChangeEvent<HTMLInputElement>): void {\n      if (!disabled && !readOnly) {\n        onChange?.(!isSelected, e);\n        setIsSelected(!isSelected);\n        !controlState && validationOnChange();\n      }\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        role=\"group\"\n        flexDirection=\"column\"\n        gap={4}\n        className={clsx(containerClassName, consumerClassName)}\n        style={consumerStyle}\n        {...containerProps}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            switchLabelCSS({ disabled: disabledOrAriaDisabled, readOnly }),\n          )}\n        >\n          <VisuallyHidden>\n            <input\n              id={id}\n              type=\"checkbox\"\n              role=\"switch\"\n              checked={isSelected}\n              aria-disabled={ariaDisabled}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              aria-checked={isSelected}\n              onChange={handleChange}\n              onBlur={focusProps.onBlur}\n              onFocus={focusProps.onFocus}\n              onInvalid={(event) => {\n                !controlState && validationOnInvalid(event);\n              }}\n              name={name}\n              form={_form}\n              value={formValue}\n              ref={inputRef}\n              {..._mergeProps(\n                controlState ? inputProps : ariaProps,\n                ariaLabelingProps,\n              )}\n            />\n          </VisuallyHidden>\n          <div\n            className={clsx(\n              focusClassName,\n              switchWrapperCSS({\n                disabled: disabledOrAriaDisabled,\n                color,\n                hasError: showError,\n                isFocusVisible,\n                readOnly,\n              }),\n              fieldColorsCSS({\n                disabled: disabledOrAriaDisabled,\n                color: showError ? 'critical' : color,\n                variant: getSwitchFieldVariant(isSelected, showError),\n              }),\n            )}\n          >\n            <div\n              className={switchIconCSS({\n                selected: isSelected,\n                readOnly,\n                hasError: showError,\n              })}\n            >\n              <CheckmarkIcon size=\"small\" />\n              <div className={switchThumbCSS} />\n              <XmarkIcon size=\"small\" />\n            </div>\n          </div>\n          <span\n            className={switchTextCSS({\n              disabled: disabledOrAriaDisabled,\n              required: !!children && required,\n            })}\n          >\n            {children}\n          </span>\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Switch as typeof Switch & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/switch/Switch.sty.js

@@ -2,11 +2,11 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./Switch.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfb-3-12-2", variantClassNames: { selected: { true: "_1tkc5xfc-3-12-2", false: "_1tkc5xfd-3-12-2" }, readOnly: { true: "_1tkc5xfe-3-12-2" }, hasError: { true: "_1tkc5xff-3-12-2" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-12-2"]] });
-var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-12-2", variantClassNames: { disabled: { true: "_1tkc5xf1-3-12-2" }, readOnly: { true: "_1tkc5xf2-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-12-2", variantClassNames: { disabled: { true: "_1tkc5xf4-3-12-2", false: "_1tkc5xf5-3-12-2" }, required: { true: "_1tkc5xf6-3-12-2" }, readOnly: { true: "_1tkc5xf7-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var switchThumbCSS = "_1tkc5xfw-3-12-2";
-var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-12-2", variantClassNames: { disabled: { true: "_1tkc5xfi-3-12-2", false: "_1tkc5xfj-3-12-2" }, hasError: { true: "_1tkc5xfk-3-12-2", false: "_1tkc5xfl-3-12-2" }, color: { primary: "_1tkc5xfm-3-12-2", neutral: "_1tkc5xfn-3-12-2" }, isFocusVisible: { true: "_1tkc5xfo-3-12-2", false: "_1tkc5xfp-3-12-2" }, readOnly: { true: "_1tkc5xfq-3-12-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-12-2"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-12-2"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-12-2"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-12-2"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-12-2"]] });
+var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfb-3-13-0", variantClassNames: { selected: { true: "_1tkc5xfc-3-13-0", false: "_1tkc5xfd-3-13-0" }, readOnly: { true: "_1tkc5xfe-3-13-0" }, hasError: { true: "_1tkc5xff-3-13-0" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-13-0"]] });
+var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-13-0", variantClassNames: { disabled: { true: "_1tkc5xf1-3-13-0" }, readOnly: { true: "_1tkc5xf2-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-13-0", variantClassNames: { disabled: { true: "_1tkc5xf4-3-13-0", false: "_1tkc5xf5-3-13-0" }, required: { true: "_1tkc5xf6-3-13-0" }, readOnly: { true: "_1tkc5xf7-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchThumbCSS = "_1tkc5xfw-3-13-0";
+var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-13-0", variantClassNames: { disabled: { true: "_1tkc5xfi-3-13-0", false: "_1tkc5xfj-3-13-0" }, hasError: { true: "_1tkc5xfk-3-13-0", false: "_1tkc5xfl-3-13-0" }, color: { primary: "_1tkc5xfm-3-13-0", neutral: "_1tkc5xfn-3-13-0" }, isFocusVisible: { true: "_1tkc5xfo-3-13-0", false: "_1tkc5xfp-3-13-0" }, readOnly: { true: "_1tkc5xfq-3-13-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-13-0"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-13-0"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-13-0"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-13-0"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-13-0"]] });
 export {
   switchIconCSS,
   switchLabelCSS,

package/esm/forms/switch/Switch.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/switch/Switch.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Switch.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var switchIconCSS = _7a468({defaultClassName:'_1tkc5xfb-3-12-2',variantClassNames:{selected:{true:'_1tkc5xfc-3-12-2',false:'_1tkc5xfd-3-12-2'},readOnly:{true:'_1tkc5xfe-3-12-2'},hasError:{true:'_1tkc5xff-3-12-2'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-12-2']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-12-2',variantClassNames:{disabled:{true:'_1tkc5xf1-3-12-2'},readOnly:{true:'_1tkc5xf2-3-12-2'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-12-2',variantClassNames:{disabled:{true:'_1tkc5xf4-3-12-2',false:'_1tkc5xf5-3-12-2'},required:{true:'_1tkc5xf6-3-12-2'},readOnly:{true:'_1tkc5xf7-3-12-2'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-12-2';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-12-2',variantClassNames:{disabled:{true:'_1tkc5xfi-3-12-2',false:'_1tkc5xfj-3-12-2'},hasError:{true:'_1tkc5xfk-3-12-2',false:'_1tkc5xfl-3-12-2'},color:{primary:'_1tkc5xfm-3-12-2',neutral:'_1tkc5xfn-3-12-2'},isFocusVisible:{true:'_1tkc5xfo-3-12-2',false:'_1tkc5xfp-3-12-2'},readOnly:{true:'_1tkc5xfq-3-12-2'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-12-2'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-12-2'],[{color:'neutral',disabled:true},'_1tkc5xft-3-12-2'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-12-2'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-12-2']]});"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Switch.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var switchIconCSS = _7a468({defaultClassName:'_1tkc5xfb-3-13-0',variantClassNames:{selected:{true:'_1tkc5xfc-3-13-0',false:'_1tkc5xfd-3-13-0'},readOnly:{true:'_1tkc5xfe-3-13-0'},hasError:{true:'_1tkc5xff-3-13-0'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-13-0']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-13-0',variantClassNames:{disabled:{true:'_1tkc5xf1-3-13-0'},readOnly:{true:'_1tkc5xf2-3-13-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-13-0',variantClassNames:{disabled:{true:'_1tkc5xf4-3-13-0',false:'_1tkc5xf5-3-13-0'},required:{true:'_1tkc5xf6-3-13-0'},readOnly:{true:'_1tkc5xf7-3-13-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-13-0';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-13-0',variantClassNames:{disabled:{true:'_1tkc5xfi-3-13-0',false:'_1tkc5xfj-3-13-0'},hasError:{true:'_1tkc5xfk-3-13-0',false:'_1tkc5xfl-3-13-0'},color:{primary:'_1tkc5xfm-3-13-0',neutral:'_1tkc5xfn-3-13-0'},isFocusVisible:{true:'_1tkc5xfo-3-13-0',false:'_1tkc5xfp-3-13-0'},readOnly:{true:'_1tkc5xfq-3-13-0'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-13-0'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-13-0'],[{color:'neutral',disabled:true},'_1tkc5xft-3-13-0'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-13-0'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-13-0']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;AAC/S,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClM,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7P,IAAI,iBAAiB;AACrB,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,OAAM,EAAC,SAAQ,oBAAmB,SAAQ,mBAAkB,GAAE,gBAAe,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,MAAK,gBAAe,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,OAAM,gBAAe,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/forms/text-area/TextArea.css

@@ -1,5 +1,5 @@
-._44rwcl2-3-12-2 {
-  --_44rwcl0-3-12-2: 0px;
+._44rwcl2-3-13-0 {
+  --_44rwcl0-3-13-0: 0px;
   display: inline-flex;
   width: 100%;
   height: 100%;
@@ -11,28 +11,28 @@
   overflow: hidden;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._44rwcl2-3-12-2:focus-within {
-  --_44rwcl0-3-12-2: -2px;
+._44rwcl2-3-13-0:focus-within {
+  --_44rwcl0-3-13-0: -2px;
 }
-._44rwcl2-3-12-2::-webkit-resizer {
+._44rwcl2-3-13-0::-webkit-resizer {
   display: none;
 }
-._44rwcl3-3-12-2 {
+._44rwcl3-3-13-0 {
   width: fit-content;
 }
-._44rwcl4-3-12-2 {
+._44rwcl4-3-13-0 {
   resize: none;
 }
-._44rwcl5-3-12-2 {
+._44rwcl5-3-13-0 {
   resize: both;
 }
-._44rwcl6-3-12-2 {
+._44rwcl6-3-13-0 {
   resize: horizontal;
 }
-._44rwcl7-3-12-2 {
+._44rwcl7-3-13-0 {
   resize: vertical;
 }
-._44rwcl8-3-12-2 {
+._44rwcl8-3-13-0 {
   width: 100%;
   height: 100%;
   appearance: none;
@@ -51,138 +51,138 @@
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
-  box-shadow: var(--_44rwcl1-3-12-2);
+  box-shadow: var(--_44rwcl1-3-13-0);
 }
-._44rwcl8-3-12-2::placeholder {
+._44rwcl8-3-13-0::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._44rwcl8-3-12-2:hover {
+._44rwcl8-3-13-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._44rwcl8-3-12-2:active {
+._44rwcl8-3-13-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-12-2 ._44rwcl8-3-12-2 {
-  --_44rwcl1-3-12-2: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-13-0 ._44rwcl8-3-13-0 {
+  --_44rwcl1-3-13-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-12-2 ._44rwcl8-3-12-2:hover {
-  --_44rwcl1-3-12-2: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
+._1jgl8s50-3-13-0 ._44rwcl8-3-13-0:hover {
+  --_44rwcl1-3-13-0: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-12-2 ._44rwcl8-3-12-2:active {
-  --_44rwcl1-3-12-2: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
+._1jgl8s50-3-13-0 ._44rwcl8-3-13-0:active {
+  --_44rwcl1-3-13-0: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcl9-3-12-2 {
+._44rwcl9-3-13-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwcl9-3-12-2::placeholder {
+._44rwcl9-3-13-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcl9-3-12-2:hover {
+._44rwcl9-3-13-0:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcl9-3-12-2:active {
+._44rwcl9-3-13-0:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-12-2 ._44rwcl9-3-12-2, ._1jgl8s50-3-12-2 ._44rwcl9-3-12-2:hover, ._1jgl8s50-3-12-2 ._44rwcl9-3-12-2:active {
-  --_44rwcl1-3-12-2: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-13-0 ._44rwcl9-3-13-0, ._1jgl8s50-3-13-0 ._44rwcl9-3-13-0:hover, ._1jgl8s50-3-13-0 ._44rwcl9-3-13-0:active {
+  --_44rwcl1-3-13-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcla-3-12-2 {
+._44rwcla-3-13-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: default;
 }
-._44rwcla-3-12-2:hover {
+._44rwcla-3-13-0:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcla-3-12-2:active {
+._44rwcla-3-13-0:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-12-2 ._44rwcla-3-12-2, ._1jgl8s50-3-12-2 ._44rwcla-3-12-2:hover, ._1jgl8s50-3-12-2 ._44rwcla-3-12-2:active {
-  --_44rwcl1-3-12-2: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-13-0 ._44rwcla-3-13-0, ._1jgl8s50-3-13-0 ._44rwcla-3-13-0:hover, ._1jgl8s50-3-13-0 ._44rwcla-3-13-0:active {
+  --_44rwcl1-3-13-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwclb-3-12-2 {
+._44rwclb-3-13-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-12-2::placeholder {
+._44rwclb-3-13-0::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-12-2:hover {
+._44rwclb-3-13-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._44rwclb-3-12-2:active {
+._44rwclb-3-13-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1jgl8s50-3-12-2 ._44rwclb-3-12-2 {
-  --_44rwcl1-3-12-2: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+._1jgl8s50-3-13-0 ._44rwclb-3-13-0 {
+  --_44rwcl1-3-13-0: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-12-2 ._44rwclb-3-12-2:hover {
-  --_44rwcl1-3-12-2: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
+._1jgl8s50-3-13-0 ._44rwclb-3-13-0:hover {
+  --_44rwcl1-3-13-0: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-12-2 ._44rwclb-3-12-2:active {
-  --_44rwcl1-3-12-2: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
+._1jgl8s50-3-13-0 ._44rwclb-3-13-0:active {
+  --_44rwcl1-3-13-0: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwclc-3-12-2 {
+._44rwclc-3-13-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwclc-3-12-2::placeholder {
+._44rwclc-3-13-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwclc-3-12-2:hover {
+._44rwclc-3-13-0:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwclc-3-12-2:active {
+._44rwclc-3-13-0:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-12-2 ._44rwclc-3-12-2, ._1jgl8s50-3-12-2 ._44rwclc-3-12-2:hover, ._1jgl8s50-3-12-2 ._44rwclc-3-12-2:active {
-  --_44rwcl1-3-12-2: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-13-0 ._44rwclc-3-13-0, ._1jgl8s50-3-13-0 ._44rwclc-3-13-0:hover, ._1jgl8s50-3-13-0 ._44rwclc-3-13-0:active {
+  --_44rwcl1-3-13-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcld-3-12-2 {
+._44rwcld-3-13-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-12-2:hover {
+._44rwcld-3-13-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-12-2:active {
+._44rwcld-3-13-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-12-2 ._44rwcld-3-12-2, ._1jgl8s50-3-12-2 ._44rwcld-3-12-2:hover, ._1jgl8s50-3-12-2 ._44rwcld-3-12-2:active {
-  --_44rwcl1-3-12-2: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-13-0 ._44rwcld-3-13-0, ._1jgl8s50-3-13-0 ._44rwcld-3-13-0:hover, ._1jgl8s50-3-13-0 ._44rwcld-3-13-0:active {
+  --_44rwcl1-3-13-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcle-3-12-2 {
+._44rwcle-3-13-0 {
   position: absolute;
   pointer-events: none;
   width: 16px;
   height: 16px;
   bottom: 0;
   right: 0;
-  transform: translateX(var(--_44rwcl0-3-12-2)) translateY(var(--_44rwcl0-3-12-2));
+  transform: translateX(var(--_44rwcl0-3-13-0)) translateY(var(--_44rwcl0-3-13-0));
   transition: transform var(--dt-animations-move-duration-fast, 150ms) var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._44rwclf-3-12-2 {
+._44rwclf-3-13-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclg-3-12-2 {
+._44rwclg-3-13-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcli-3-12-2 {
+._44rwcli-3-13-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
 @supports (-moz-appearance:none) {
-  ._44rwcle-3-12-2 {
+  ._44rwcle-3-13-0 {
     display: none;
   }
 }

package/esm/forms/text-area/TextArea.js

@@ -48,7 +48,7 @@ const TextAreaRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     required: propRequired,
     readOnly: propReadOnly,
     resize = "both",
-    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
     controlState,
     value: propValue,
     defaultValue,

package/esm/forms/text-area/TextArea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/text-area/TextArea.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { Property } from 'csstype';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ResizeIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './TextArea.sty.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { KeyboardEvents } from '../../core/types/events.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 { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport type { ValidateFieldOptions } from '../form/form.types.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.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 {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\nconst COMPONENT_NAME = 'TextArea';\n\n// #region Typings\n/**\n * @public\n */\nexport type TextAreaProps = FormControlProps<\n  string,\n  (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void | never,\n  HTMLDivElement\n> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  KeyboardEvents &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /**\n     * Handler that is called when the element's focus status changes.\n     * @deprecated Use onFocus/onBlur instead.\n     */\n    onFocusChange?: (isFocused: boolean) => void;\n    placeholder?: string;\n    /**\n     * This attribute indicates whether the textarea is resizable by the user, and, if so, in which direction.\n     * @defaultValue 'both'\n     */\n    resize?: 'both' | 'vertical' | 'horizontal' | 'none';\n    /**\n     * The visible width of the text control, in average character widths.\n     * If it is specified, it must be a positive integer.\n     * @defaultValue 20\n     */\n    cols?: number;\n    /**\n     * The number of visible text lines for the control. If it is specified, it must be a positive integer.\n     * @defaultValue 2\n     */\n    rows?: number;\n    /**\n     * The minimum number of characters required that the user should enter.\n     * Doesn't stop the user from removing characters so that the number entered goes past the minimum,\n     * but it does make the value entered into the <textarea> invalid.\n     * With a set minlength an empty <textarea> is still considered valid unless you also have the required attribute set.\n     */\n    minLength?: number;\n    /**\n     * The maximum number of characters that the user can enter. If this value isn't specified,\n     * the user can enter an unlimited number of characters.\n     */\n    maxLength?: number;\n    /**\n     * This attribute indicates whether the value of the control can be automatically completed by the browser.\n     * If no autocompletion is desired, it can be set to \"off\".\n     */\n    autoComplete?: string;\n    /**\n     * Sets the width of the textarea element.\n     * @defaultValue 'full'\n     */\n    width?: 'content' | 'full' | Property.Width<string & Record<string, never>>;\n  };\n\n/**\n * @public\n */\nexport type TextAreaInputRef = Omit<\n  FormControlRef<HTMLDivElement>,\n  'inputRef'\n> & {\n  readonly inputRef?: HTMLTextAreaElement | null;\n};\n// #endregion\n\nconst TextAreaRoot = /* @__PURE__ */ forwardRef<\n  TextAreaInputRef,\n  TextAreaProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage({\n    defaultMessage: 'Add text',\n    id: 'E7kKT3Td1FKB37wr',\n    description: 'Default placeholder for the text area input.',\n  });\n\n  const {\n    onChange,\n    onFocus,\n    onBlur,\n    onValidityChange,\n    minLength,\n    maxLength,\n    id: propId,\n    name,\n    _form,\n    _messageTarget,\n    disabled: propDisabled,\n    required: propRequired,\n    readOnly: propReadOnly,\n    resize = 'both',\n    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n    controlState,\n    value: propValue,\n    defaultValue,\n    width = 'full',\n    placeholder = defaultPlaceholder,\n    'aria-describedby': ariaDescribedby,\n    'aria-disabled': ariaDisabledProp,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  }: TextAreaProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const {\n    id,\n    disabled,\n    required,\n    ariaDisabled,\n    readOnly,\n    inputProps,\n    hintProps,\n    hint,\n    showError: hasError,\n    messageDispatch: messagesContextDispatch,\n  } = useFormControl({\n    propId,\n    propDisabled,\n    propRequired,\n    propAriaDisabled: ariaDisabledProp,\n    propReadOnly,\n    controlState,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  // Imperative Handle Construction\n  const containerRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => getI18nValidationState(intl, textareaRef.current, 'manual'),\n  );\n\n  useImperativeHandle(forwardedRef, (): TextAreaInputRef => {\n    return {\n      element: containerRef.current,\n      inputRef: textareaRef.current,\n      focus() {\n        textareaRef.current?.focus();\n      },\n      validate() {\n        textareaRef.current?.checkValidity();\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        emitValidationState(\n          getI18nValidationState(intl, textareaRef.current, 'manual'),\n        );\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        textareaRef.current?.checkValidity();\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        return emitValidationState(\n          getI18nValidationState(intl, textareaRef.current, 'manual'),\n        );\n      },\n    };\n  });\n\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: propValue,\n  });\n\n  const {\n    onChange: validationOnChange,\n    onInvalid: validationOnInvalid,\n    ariaProps,\n  } = useFormFieldValidation(\n    textareaRef,\n    { required, minLength, maxLength, value: value ?? '' },\n    undefined,\n    undefined,\n    _emitValidationState,\n  );\n\n  const validateFieldForForm = ({\n    reveal,\n    trigger,\n  }: ValidateFieldOptions): ValidationState => {\n    textareaRef.current?.checkValidity();\n    if (reveal) {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n    }\n    return emitValidationState(\n      getI18nValidationState(intl, textareaRef.current, trigger),\n    );\n  };\n\n  const formControl = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => value ?? '',\n    focus: () => textareaRef.current?.focus(),\n    validateField: (options) => Promise.resolve(validateFieldForForm(options)),\n    resetValidation: () => {\n      textareaRef.current?.setCustomValidity('');\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: false, resetShowError: true },\n      });\n    },\n  });\n  formValidityChangeRef.current = formControl.onValidityChange;\n\n  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n    const newValue = event.target?.value;\n    setValue(newValue);\n    onChange?.(newValue, event);\n    !controlState && validationOnChange();\n  };\n\n  const mergedAriaDescribedby =\n    [ariaDescribedby, inputProps['aria-describedby']]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  const { containerClassName, ...containerProps } =\n    useContainerFocus<HTMLDivElement>({\n      onFocus,\n      onBlur,\n      disabled,\n      emitValidationState,\n    });\n\n  const {\n    focusProps: { onFocus: focusRingOnFocus, onBlur: focusRingOnBlur },\n    focusClassName,\n  } = useFocusRing({\n    color: hasError ? 'critical' : 'neutral',\n    ignoreModality: true,\n    disabled,\n  });\n\n  const styleVariants = {\n    error: hasError,\n    disabled: disabledOrAriaDisabled,\n    readOnly,\n  };\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={containerRef}\n      className={clsx(containerClassName, consumerClassName)}\n      style={consumerStyle}\n      {...containerProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <div\n        className={styles.container({\n          contentWidth: width === 'content',\n          resize,\n        })}\n        style={{ width }}\n      >\n        <textarea\n          ref={textareaRef}\n          id={id}\n          name={name}\n          form={_form}\n          minLength={minLength}\n          maxLength={maxLength}\n          className={clsx(styles.textArea(styleVariants), focusClassName)}\n          disabled={disabled}\n          required={required}\n          readOnly={readOnly}\n          value={value}\n          aria-required={required}\n          aria-disabled={ariaDisabled}\n          placeholder={placeholder}\n          onChange={handleChange}\n          onInvalid={(e) => !controlState && validationOnInvalid(e)}\n          onFocus={focusRingOnFocus}\n          onBlur={focusRingOnBlur}\n          {..._mergeProps(\n            restProps,\n            controlState\n              ? { ...inputProps, 'aria-describedby': mergedAriaDescribedby }\n              : ariaProps,\n          )}\n        />\n        {resize !== 'none' && (\n          <ResizeIcon className={styles.resizeIcon(styleVariants)} />\n        )}\n      </div>\n      {hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n});\n\n/**\n * The `TextArea` component can be used as a multi-line plain-text editing control to\n * enter free-form text, such as a comment on a form.\n * The component uses a fallback FormFieldMessages context if it wasn't wrapped in a FormField.\n * @public\n */\nexport const TextArea = withFormFieldMessageContextProvider<\n  TextAreaProps,\n  TextAreaInputRef,\n  HTMLDivElement\n>(TextAreaRoot);\n\n(TextArea as typeof TextArea & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { Property } from 'csstype';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ResizeIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './TextArea.sty.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { KeyboardEvents } from '../../core/types/events.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 { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport type { ValidateFieldOptions } from '../form/form.types.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.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 {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\nconst COMPONENT_NAME = 'TextArea';\n\n// #region Typings\n/**\n * @public\n */\nexport type TextAreaProps = FormControlProps<\n  string,\n  (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void | never,\n  HTMLDivElement\n> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  KeyboardEvents &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /**\n     * Handler that is called when the element's focus status changes.\n     * @deprecated Use onFocus/onBlur instead.\n     */\n    onFocusChange?: (isFocused: boolean) => void;\n    placeholder?: string;\n    /**\n     * This attribute indicates whether the textarea is resizable by the user, and, if so, in which direction.\n     * @defaultValue 'both'\n     */\n    resize?: 'both' | 'vertical' | 'horizontal' | 'none';\n    /**\n     * The visible width of the text control, in average character widths.\n     * If it is specified, it must be a positive integer.\n     * @defaultValue 20\n     */\n    cols?: number;\n    /**\n     * The number of visible text lines for the control. If it is specified, it must be a positive integer.\n     * @defaultValue 2\n     */\n    rows?: number;\n    /**\n     * The minimum number of characters required that the user should enter.\n     * Doesn't stop the user from removing characters so that the number entered goes past the minimum,\n     * but it does make the value entered into the <textarea> invalid.\n     * With a set minlength an empty <textarea> is still considered valid unless you also have the required attribute set.\n     */\n    minLength?: number;\n    /**\n     * The maximum number of characters that the user can enter. If this value isn't specified,\n     * the user can enter an unlimited number of characters.\n     */\n    maxLength?: number;\n    /**\n     * This attribute indicates whether the value of the control can be automatically completed by the browser.\n     * If no autocompletion is desired, it can be set to \"off\".\n     */\n    autoComplete?: string;\n    /**\n     * Sets the width of the textarea element.\n     * @defaultValue 'full'\n     */\n    width?: 'content' | 'full' | Property.Width<string & Record<string, never>>;\n  };\n\n/**\n * @public\n */\nexport type TextAreaInputRef = Omit<\n  FormControlRef<HTMLDivElement>,\n  'inputRef'\n> & {\n  readonly inputRef?: HTMLTextAreaElement | null;\n};\n// #endregion\n\nconst TextAreaRoot = /* @__PURE__ */ forwardRef<\n  TextAreaInputRef,\n  TextAreaProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage({\n    defaultMessage: 'Add text',\n    id: 'E7kKT3Td1FKB37wr',\n    description: 'Default placeholder for the text area input.',\n  });\n\n  const {\n    onChange,\n    onFocus,\n    onBlur,\n    onValidityChange,\n    minLength,\n    maxLength,\n    id: propId,\n    name,\n    _form,\n    _messageTarget,\n    disabled: propDisabled,\n    required: propRequired,\n    readOnly: propReadOnly,\n    resize = 'both',\n    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n    controlState,\n    value: propValue,\n    defaultValue,\n    width = 'full',\n    placeholder = defaultPlaceholder,\n    'aria-describedby': ariaDescribedby,\n    'aria-disabled': ariaDisabledProp,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  }: TextAreaProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const {\n    id,\n    disabled,\n    required,\n    ariaDisabled,\n    readOnly,\n    inputProps,\n    hintProps,\n    hint,\n    showError: hasError,\n    messageDispatch: messagesContextDispatch,\n  } = useFormControl({\n    propId,\n    propDisabled,\n    propRequired,\n    propAriaDisabled: ariaDisabledProp,\n    propReadOnly,\n    controlState,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  // Imperative Handle Construction\n  const containerRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => getI18nValidationState(intl, textareaRef.current, 'manual'),\n  );\n\n  useImperativeHandle(forwardedRef, (): TextAreaInputRef => {\n    return {\n      element: containerRef.current,\n      inputRef: textareaRef.current,\n      focus() {\n        textareaRef.current?.focus();\n      },\n      validate() {\n        textareaRef.current?.checkValidity();\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        emitValidationState(\n          getI18nValidationState(intl, textareaRef.current, 'manual'),\n        );\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        textareaRef.current?.checkValidity();\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        return emitValidationState(\n          getI18nValidationState(intl, textareaRef.current, 'manual'),\n        );\n      },\n    };\n  });\n\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: propValue,\n  });\n\n  const {\n    onChange: validationOnChange,\n    onInvalid: validationOnInvalid,\n    ariaProps,\n  } = useFormFieldValidation(\n    textareaRef,\n    { required, minLength, maxLength, value: value ?? '' },\n    undefined,\n    undefined,\n    _emitValidationState,\n  );\n\n  const validateFieldForForm = ({\n    reveal,\n    trigger,\n  }: ValidateFieldOptions): ValidationState => {\n    textareaRef.current?.checkValidity();\n    if (reveal) {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n    }\n    return emitValidationState(\n      getI18nValidationState(intl, textareaRef.current, trigger),\n    );\n  };\n\n  const formControl = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => value ?? '',\n    focus: () => textareaRef.current?.focus(),\n    validateField: (options) => Promise.resolve(validateFieldForForm(options)),\n    resetValidation: () => {\n      textareaRef.current?.setCustomValidity('');\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: false, resetShowError: true },\n      });\n    },\n  });\n  formValidityChangeRef.current = formControl.onValidityChange;\n\n  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n    const newValue = event.target?.value;\n    setValue(newValue);\n    onChange?.(newValue, event);\n    !controlState && validationOnChange();\n  };\n\n  const mergedAriaDescribedby =\n    [ariaDescribedby, inputProps['aria-describedby']]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  const { containerClassName, ...containerProps } =\n    useContainerFocus<HTMLDivElement>({\n      onFocus,\n      onBlur,\n      disabled,\n      emitValidationState,\n    });\n\n  const {\n    focusProps: { onFocus: focusRingOnFocus, onBlur: focusRingOnBlur },\n    focusClassName,\n  } = useFocusRing({\n    color: hasError ? 'critical' : 'neutral',\n    ignoreModality: true,\n    disabled,\n  });\n\n  const styleVariants = {\n    error: hasError,\n    disabled: disabledOrAriaDisabled,\n    readOnly,\n  };\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={containerRef}\n      className={clsx(containerClassName, consumerClassName)}\n      style={consumerStyle}\n      {...containerProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <div\n        className={styles.container({\n          contentWidth: width === 'content',\n          resize,\n        })}\n        style={{ width }}\n      >\n        <textarea\n          ref={textareaRef}\n          id={id}\n          name={name}\n          form={_form}\n          minLength={minLength}\n          maxLength={maxLength}\n          className={clsx(styles.textArea(styleVariants), focusClassName)}\n          disabled={disabled}\n          required={required}\n          readOnly={readOnly}\n          value={value}\n          aria-required={required}\n          aria-disabled={ariaDisabled}\n          placeholder={placeholder}\n          onChange={handleChange}\n          onInvalid={(e) => !controlState && validationOnInvalid(e)}\n          onFocus={focusRingOnFocus}\n          onBlur={focusRingOnBlur}\n          {..._mergeProps(\n            restProps,\n            controlState\n              ? { ...inputProps, 'aria-describedby': mergedAriaDescribedby }\n              : ariaProps,\n          )}\n        />\n        {resize !== 'none' && (\n          <ResizeIcon className={styles.resizeIcon(styleVariants)} />\n        )}\n      </div>\n      {hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n});\n\n/**\n * The `TextArea` component can be used as a multi-line plain-text editing control to\n * enter free-form text, such as a comment on a form.\n * The component uses a fallback FormFieldMessages context if it wasn't wrapped in a FormField.\n * @public\n */\nexport const TextArea = withFormFieldMessageContextProvider<\n  TextAreaProps,\n  TextAreaInputRef,\n  HTMLDivElement\n>(TextAreaRoot);\n\n(TextArea as typeof TextArea & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
   "mappings": "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",
   "names": []
 }