@dynatrace/strato-components 3.8.0 → 3.9.0

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 { useFormControlState } from '../../core/hooks/useFormControlState.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 { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} 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\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> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  BehaviorTrackingProps &\n  WithChildren & {\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 * The `Switch` component allows users to toggle between two different states. You can\n * set a specific initial value using the `defaultValue` prop for an uncontrolled switch\n * or setting the initial value of the state of a controlled switch accordingly. The `name` prop also\n * needs to be specified for identifying the `Switch` when submitting it in a form.\n * @public\n */\nexport const Switch = forwardRef<FormControlRef, SwitchProps>(\n  (props, forwardedRef) => {\n    const {\n      value,\n      defaultValue,\n      children,\n      controlState,\n      name,\n      formValue,\n      onValidityChange,\n      onChange,\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 { state: messagesContextState, dispatch: messagesContextDispatch } =\n      useFormFieldMessagesContext();\n\n    const { disabled, required, id, ariaDisabled, readOnly } =\n      useSyncedFormControlProps({\n        propDisabled,\n        propRequired,\n        propId,\n        propAriaDisabled: ariaDisabledProp,\n        propReadOnly,\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 _emitValidationState = useValidationStateEmitter(onValidityChange);\n    const emitValidationState = useCustomMessageEmitter(\n      _emitValidationState,\n      () => getI18nValidationState(intl, inputRef.current, 'manual'),\n    );\n\n    useImperativeHandle(forwardedRef, (): 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      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { required, value: String(value), isSelected },\n      undefined,\n      undefined,\n      _emitValidationState,\n    );\n\n    const [controlStateHasError, hint] = useFormControlState(controlState);\n\n    const showError = controlStateHasError || 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      hint,\n      hasError: showError,\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 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    /** The callback function when the state changes */\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        flexDirection=\"column\"\n        gap={4}\n        className={consumerClassName}\n        style={consumerStyle}\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={(event) => {\n                focusProps.onBlur(event);\n                !controlState && validationOnBlur(event);\n              }}\n              onFocus={focusProps.onFocus}\n              onInvalid={(event) => {\n                !controlState && validationOnInvalid(event);\n              }}\n              name={name}\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": ["\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 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 { 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 type { FormControlRef } from '../shared-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> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  BehaviorTrackingProps &\n  WithChildren & {\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 * The `Switch` component allows users to toggle between two different states. You can\n * set a specific initial value using the `defaultValue` prop for an uncontrolled switch\n * or setting the initial value of the state of a controlled switch accordingly. The `name` prop also\n * needs to be specified for identifying the `Switch` when submitting it in a form.\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      formValue,\n      onValidityChange,\n      onChange,\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 _emitValidationState = useValidationStateEmitter(onValidityChange);\n    const emitValidationState = useCustomMessageEmitter(\n      _emitValidationState,\n      () => getI18nValidationState(intl, inputRef.current, 'manual'),\n    );\n\n    useImperativeHandle(forwardedRef, (): 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      onBlur: validationOnBlur,\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 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    /** The callback function when the state changes */\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        flexDirection=\"column\"\n        gap={4}\n        className={consumerClassName}\n        style={consumerStyle}\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={(event) => {\n                focusProps.onBlur(event);\n                !controlState && validationOnBlur(event);\n              }}\n              onFocus={focusProps.onFocus}\n              onInvalid={(event) => {\n                !controlState && validationOnInvalid(event);\n              }}\n              name={name}\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-8-0", variantClassNames: { selected: { true: "_1tkc5xfc-3-8-0", false: "_1tkc5xfd-3-8-0" }, readOnly: { true: "_1tkc5xfe-3-8-0" }, hasError: { true: "_1tkc5xff-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-8-0"]] });
-var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-8-0", variantClassNames: { disabled: { true: "_1tkc5xf1-3-8-0" }, readOnly: { true: "_1tkc5xf2-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
-var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-8-0", variantClassNames: { disabled: { true: "_1tkc5xf4-3-8-0", false: "_1tkc5xf5-3-8-0" }, required: { true: "_1tkc5xf6-3-8-0" }, readOnly: { true: "_1tkc5xf7-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
-var switchThumbCSS = "_1tkc5xfw-3-8-0";
-var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-8-0", variantClassNames: { disabled: { true: "_1tkc5xfi-3-8-0", false: "_1tkc5xfj-3-8-0" }, hasError: { true: "_1tkc5xfk-3-8-0", false: "_1tkc5xfl-3-8-0" }, color: { primary: "_1tkc5xfm-3-8-0", neutral: "_1tkc5xfn-3-8-0" }, isFocusVisible: { true: "_1tkc5xfo-3-8-0", false: "_1tkc5xfp-3-8-0" }, readOnly: { true: "_1tkc5xfq-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-8-0"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-8-0"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-8-0"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-8-0"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-8-0"]] });
+var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfb-3-9-0", variantClassNames: { selected: { true: "_1tkc5xfc-3-9-0", false: "_1tkc5xfd-3-9-0" }, readOnly: { true: "_1tkc5xfe-3-9-0" }, hasError: { true: "_1tkc5xff-3-9-0" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-9-0"]] });
+var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-9-0", variantClassNames: { disabled: { true: "_1tkc5xf1-3-9-0" }, readOnly: { true: "_1tkc5xf2-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-9-0", variantClassNames: { disabled: { true: "_1tkc5xf4-3-9-0", false: "_1tkc5xf5-3-9-0" }, required: { true: "_1tkc5xf6-3-9-0" }, readOnly: { true: "_1tkc5xf7-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchThumbCSS = "_1tkc5xfw-3-9-0";
+var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-9-0", variantClassNames: { disabled: { true: "_1tkc5xfi-3-9-0", false: "_1tkc5xfj-3-9-0" }, hasError: { true: "_1tkc5xfk-3-9-0", false: "_1tkc5xfl-3-9-0" }, color: { primary: "_1tkc5xfm-3-9-0", neutral: "_1tkc5xfn-3-9-0" }, isFocusVisible: { true: "_1tkc5xfo-3-9-0", false: "_1tkc5xfp-3-9-0" }, readOnly: { true: "_1tkc5xfq-3-9-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-9-0"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-9-0"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-9-0"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-9-0"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-9-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-8-0',variantClassNames:{selected:{true:'_1tkc5xfc-3-8-0',false:'_1tkc5xfd-3-8-0'},readOnly:{true:'_1tkc5xfe-3-8-0'},hasError:{true:'_1tkc5xff-3-8-0'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-8-0']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-8-0',variantClassNames:{disabled:{true:'_1tkc5xf1-3-8-0'},readOnly:{true:'_1tkc5xf2-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-8-0',variantClassNames:{disabled:{true:'_1tkc5xf4-3-8-0',false:'_1tkc5xf5-3-8-0'},required:{true:'_1tkc5xf6-3-8-0'},readOnly:{true:'_1tkc5xf7-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-8-0';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-8-0',variantClassNames:{disabled:{true:'_1tkc5xfi-3-8-0',false:'_1tkc5xfj-3-8-0'},hasError:{true:'_1tkc5xfk-3-8-0',false:'_1tkc5xfl-3-8-0'},color:{primary:'_1tkc5xfm-3-8-0',neutral:'_1tkc5xfn-3-8-0'},isFocusVisible:{true:'_1tkc5xfo-3-8-0',false:'_1tkc5xfp-3-8-0'},readOnly:{true:'_1tkc5xfq-3-8-0'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-8-0'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-8-0'],[{color:'neutral',disabled:true},'_1tkc5xft-3-8-0'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-8-0'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-8-0']]});"],
+  "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-9-0',variantClassNames:{selected:{true:'_1tkc5xfc-3-9-0',false:'_1tkc5xfd-3-9-0'},readOnly:{true:'_1tkc5xfe-3-9-0'},hasError:{true:'_1tkc5xff-3-9-0'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-9-0']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-9-0',variantClassNames:{disabled:{true:'_1tkc5xf1-3-9-0'},readOnly:{true:'_1tkc5xf2-3-9-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-9-0',variantClassNames:{disabled:{true:'_1tkc5xf4-3-9-0',false:'_1tkc5xf5-3-9-0'},required:{true:'_1tkc5xf6-3-9-0'},readOnly:{true:'_1tkc5xf7-3-9-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-9-0';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-9-0',variantClassNames:{disabled:{true:'_1tkc5xfi-3-9-0',false:'_1tkc5xfj-3-9-0'},hasError:{true:'_1tkc5xfk-3-9-0',false:'_1tkc5xfl-3-9-0'},color:{primary:'_1tkc5xfm-3-9-0',neutral:'_1tkc5xfn-3-9-0'},isFocusVisible:{true:'_1tkc5xfo-3-9-0',false:'_1tkc5xfp-3-9-0'},readOnly:{true:'_1tkc5xfq-3-9-0'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-9-0'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-9-0'],[{color:'neutral',disabled:true},'_1tkc5xft-3-9-0'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-9-0'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-9-0']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACzS,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/L,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxP,IAAI,iBAAiB;AACrB,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,OAAM,EAAC,SAAQ,mBAAkB,SAAQ,kBAAiB,GAAE,gBAAe,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,MAAK,gBAAe,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,OAAM,gBAAe,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
-._44rwcl2-3-8-0 {
-  --_44rwcl0-3-8-0: 0px;
+._44rwcl2-3-9-0 {
+  --_44rwcl0-3-9-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-8-0:focus-within {
-  --_44rwcl0-3-8-0: -2px;
+._44rwcl2-3-9-0:focus-within {
+  --_44rwcl0-3-9-0: -2px;
 }
-._44rwcl2-3-8-0::-webkit-resizer {
+._44rwcl2-3-9-0::-webkit-resizer {
   display: none;
 }
-._44rwcl3-3-8-0 {
+._44rwcl3-3-9-0 {
   width: fit-content;
 }
-._44rwcl4-3-8-0 {
+._44rwcl4-3-9-0 {
   resize: none;
 }
-._44rwcl5-3-8-0 {
+._44rwcl5-3-9-0 {
   resize: both;
 }
-._44rwcl6-3-8-0 {
+._44rwcl6-3-9-0 {
   resize: horizontal;
 }
-._44rwcl7-3-8-0 {
+._44rwcl7-3-9-0 {
   resize: vertical;
 }
-._44rwcl8-3-8-0 {
+._44rwcl8-3-9-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-8-0);
+  box-shadow: var(--_44rwcl1-3-9-0);
 }
-._44rwcl8-3-8-0::placeholder {
+._44rwcl8-3-9-0::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._44rwcl8-3-8-0:hover {
+._44rwcl8-3-9-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._44rwcl8-3-8-0:active {
+._44rwcl8-3-9-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-8-0 ._44rwcl8-3-8-0 {
-  --_44rwcl1-3-8-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-9-0 ._44rwcl8-3-9-0 {
+  --_44rwcl1-3-9-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-8-0 ._44rwcl8-3-8-0:hover {
-  --_44rwcl1-3-8-0: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
+._1jgl8s50-3-9-0 ._44rwcl8-3-9-0:hover {
+  --_44rwcl1-3-9-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-8-0 ._44rwcl8-3-8-0:active {
-  --_44rwcl1-3-8-0: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
+._1jgl8s50-3-9-0 ._44rwcl8-3-9-0:active {
+  --_44rwcl1-3-9-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-8-0 {
+._44rwcl9-3-9-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwcl9-3-8-0::placeholder {
+._44rwcl9-3-9-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcl9-3-8-0:hover {
+._44rwcl9-3-9-0:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcl9-3-8-0:active {
+._44rwcl9-3-9-0:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-8-0 ._44rwcl9-3-8-0, ._1jgl8s50-3-8-0 ._44rwcl9-3-8-0:hover, ._1jgl8s50-3-8-0 ._44rwcl9-3-8-0:active {
-  --_44rwcl1-3-8-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-9-0 ._44rwcl9-3-9-0, ._1jgl8s50-3-9-0 ._44rwcl9-3-9-0:hover, ._1jgl8s50-3-9-0 ._44rwcl9-3-9-0:active {
+  --_44rwcl1-3-9-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-8-0 {
+._44rwcla-3-9-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: default;
 }
-._44rwcla-3-8-0:hover {
+._44rwcla-3-9-0:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcla-3-8-0:active {
+._44rwcla-3-9-0:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-8-0 ._44rwcla-3-8-0, ._1jgl8s50-3-8-0 ._44rwcla-3-8-0:hover, ._1jgl8s50-3-8-0 ._44rwcla-3-8-0:active {
-  --_44rwcl1-3-8-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-9-0 ._44rwcla-3-9-0, ._1jgl8s50-3-9-0 ._44rwcla-3-9-0:hover, ._1jgl8s50-3-9-0 ._44rwcla-3-9-0:active {
+  --_44rwcl1-3-9-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-8-0 {
+._44rwclb-3-9-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-8-0::placeholder {
+._44rwclb-3-9-0::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-8-0:hover {
+._44rwclb-3-9-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._44rwclb-3-8-0:active {
+._44rwclb-3-9-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1jgl8s50-3-8-0 ._44rwclb-3-8-0 {
-  --_44rwcl1-3-8-0: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+._1jgl8s50-3-9-0 ._44rwclb-3-9-0 {
+  --_44rwcl1-3-9-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-8-0 ._44rwclb-3-8-0:hover {
-  --_44rwcl1-3-8-0: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
+._1jgl8s50-3-9-0 ._44rwclb-3-9-0:hover {
+  --_44rwcl1-3-9-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-8-0 ._44rwclb-3-8-0:active {
-  --_44rwcl1-3-8-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);
+._1jgl8s50-3-9-0 ._44rwclb-3-9-0:active {
+  --_44rwcl1-3-9-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-8-0 {
+._44rwclc-3-9-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwclc-3-8-0::placeholder {
+._44rwclc-3-9-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwclc-3-8-0:hover {
+._44rwclc-3-9-0:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwclc-3-8-0:active {
+._44rwclc-3-9-0:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-8-0 ._44rwclc-3-8-0, ._1jgl8s50-3-8-0 ._44rwclc-3-8-0:hover, ._1jgl8s50-3-8-0 ._44rwclc-3-8-0:active {
-  --_44rwcl1-3-8-0: 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-9-0 ._44rwclc-3-9-0, ._1jgl8s50-3-9-0 ._44rwclc-3-9-0:hover, ._1jgl8s50-3-9-0 ._44rwclc-3-9-0:active {
+  --_44rwcl1-3-9-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-8-0 {
+._44rwcld-3-9-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-8-0:hover {
+._44rwcld-3-9-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-8-0:active {
+._44rwcld-3-9-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-8-0 ._44rwcld-3-8-0, ._1jgl8s50-3-8-0 ._44rwcld-3-8-0:hover, ._1jgl8s50-3-8-0 ._44rwcld-3-8-0:active {
-  --_44rwcl1-3-8-0: 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-9-0 ._44rwcld-3-9-0, ._1jgl8s50-3-9-0 ._44rwcld-3-9-0:hover, ._1jgl8s50-3-9-0 ._44rwcld-3-9-0:active {
+  --_44rwcl1-3-9-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-8-0 {
+._44rwcle-3-9-0 {
   position: absolute;
   pointer-events: none;
   width: 16px;
   height: 16px;
   bottom: 0;
   right: 0;
-  transform: translateX(var(--_44rwcl0-3-8-0)) translateY(var(--_44rwcl0-3-8-0));
+  transform: translateX(var(--_44rwcl0-3-9-0)) translateY(var(--_44rwcl0-3-9-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-8-0 {
+._44rwclf-3-9-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclg-3-8-0 {
+._44rwclg-3-9-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcli-3-8-0 {
+._44rwcli-3-9-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
 @supports (-moz-appearance:none) {
-  ._44rwcle-3-8-0 {
+  ._44rwcle-3-9-0 {
     display: none;
   }
 }

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

@@ -11,19 +11,16 @@ import * as styles from "./TextArea.sty.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
 import { useFocusRing } from "../../core/hooks/useFocusRing.js";
-import { useFormControlState } from "../../core/hooks/useFormControlState.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.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 {
   getI18nValidationState,
   useFormFieldValidation
 } 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 COMPONENT_NAME = "TextArea";
@@ -45,6 +42,7 @@ const TextAreaRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     required: propRequired,
     readOnly: propReadOnly,
     resize = "both",
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
     controlState,
     value: propValue,
     defaultValue,
@@ -60,15 +58,26 @@ const TextAreaRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     ...remainingProps
   } = props;
   const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
-  const { disabled, required, id, ariaDisabled, readOnly } = useSyncedFormControlProps({
+  const {
+    id,
+    disabled,
+    required,
+    ariaDisabled,
+    readOnly,
+    inputProps,
+    hintProps,
+    hint,
+    showError: hasError,
+    messageDispatch: messagesContextDispatch
+  } = useFormControl({
+    propId,
     propDisabled,
     propRequired,
-    propId,
     propAriaDisabled: ariaDisabledProp,
-    propReadOnly
+    propReadOnly,
+    controlState
   });
   const disabledOrAriaDisabled = disabled || ariaDisabled || false;
-  const { state: messagesContextState, dispatch: messagesContextDispatch } = useFormFieldMessagesContext();
   const containerRef = useRef(null);
   const textareaRef = useRef(null);
   const _emitValidationState = useValidationStateEmitter(onValidityChange);
@@ -106,8 +115,6 @@ const TextAreaRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       }
     };
   });
-  const [controlStateHasError, hint] = useFormControlState(controlState);
-  const hasError = controlState ? controlStateHasError : messagesContextState.showError;
   const [value, setValue] = useControllableState({
     defaultValue,
     value: propValue
@@ -130,11 +137,7 @@ const TextAreaRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     onChange?.(newValue, event);
     !controlState && validationOnChange();
   };
-  const { inputProps, hintProps } = useInputHint({
-    ariaDescribedby,
-    hint,
-    hasError
-  });
+  const mergedAriaDescribedby = [ariaDescribedby, inputProps["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   const {
     focusProps: { onFocus, onBlur: focusRingOnBlur },
     focusClassName
@@ -194,7 +197,10 @@ const TextAreaRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
                     focusRingOnBlur(e);
                     onBlur?.(e);
                   },
-                  ..._mergeProps(restProps, controlState ? inputProps : ariaProps)
+                  ..._mergeProps(
+                    restProps,
+                    controlState ? { ...inputProps, "aria-describedby": mergedAriaDescribedby } : ariaProps
+                  )
                 }
               ),
               resize !== "none" && /* @__PURE__ */ jsx(ResizeIcon, { className: styles.resizeIcon(styleVariants) })

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 { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FocusEvents, 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 { 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 {\n  getI18nValidationState,\n  useFormFieldValidation,\n} 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\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> &\n  FocusEvents &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  KeyboardEvents &\n  BehaviorTrackingProps & {\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    onBlur,\n    onValidityChange,\n    minLength,\n    maxLength,\n    id: propId,\n    disabled: propDisabled,\n    required: propRequired,\n    readOnly: propReadOnly,\n    resize = 'both',\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 { disabled, required, id, ariaDisabled, readOnly } =\n    useSyncedFormControlProps({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n    });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const { state: messagesContextState, dispatch: messagesContextDispatch } =\n    useFormFieldMessagesContext();\n\n  // Imperative Handle Construction\n  const containerRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const _emitValidationState = useValidationStateEmitter(onValidityChange);\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 [controlStateHasError, hint] = useFormControlState(controlState);\n  const hasError = controlState\n    ? controlStateHasError\n    : messagesContextState.showError;\n\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: propValue,\n  });\n\n  const {\n    onChange: validationOnChange,\n    onBlur: validationOnBlur,\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 handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n    const newValue = event.target?.value;\n    setValue(newValue);\n    onChange?.(newValue, event);\n    !controlState && validationOnChange();\n  };\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 {\n    focusProps: { onFocus, 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={consumerClassName}\n      style={consumerStyle}\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          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={onFocus}\n          onBlur={(e) => {\n            !controlState && validationOnBlur(e);\n            focusRingOnBlur(e);\n            onBlur?.(e);\n          }}\n          {..._mergeProps(restProps, controlState ? inputProps : ariaProps)}\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>(TextAreaRoot);\n\n(TextArea as typeof TextArea & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "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 { FocusEvents, 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 { 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 type { FormControlRef } from '../shared-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> &\n  FocusEvents &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  KeyboardEvents &\n  BehaviorTrackingProps & {\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    onBlur,\n    onValidityChange,\n    minLength,\n    maxLength,\n    id: propId,\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 _emitValidationState = useValidationStateEmitter(onValidityChange);\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    onBlur: validationOnBlur,\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 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 {\n    focusProps: { onFocus, 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={consumerClassName}\n      style={consumerStyle}\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          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={onFocus}\n          onBlur={(e) => {\n            !controlState && validationOnBlur(e);\n            focusRingOnBlur(e);\n            onBlur?.(e);\n          }}\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>(TextAreaRoot);\n\n(TextArea as typeof TextArea & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,9 +1,9 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./TextArea.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var container = _7a468({ defaultClassName: "_44rwcl2-3-8-0", variantClassNames: { contentWidth: { true: "_44rwcl3-3-8-0" }, resize: { none: "_44rwcl4-3-8-0", both: "_44rwcl5-3-8-0", horizontal: "_44rwcl6-3-8-0", vertical: "_44rwcl7-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeIcon = _7a468({ defaultClassName: "_44rwcle-3-8-0", variantClassNames: { error: { true: "_44rwclf-3-8-0" }, disabled: { true: "_44rwclg-3-8-0" }, readOnly: { true: "_44rwclh-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcli-3-8-0"]] });
-var textArea = _7a468({ defaultClassName: "_44rwcl8-3-8-0", variantClassNames: { disabled: { true: "_44rwcl9-3-8-0" }, readOnly: { true: "_44rwcla-3-8-0" }, error: { true: "_44rwclb-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwclc-3-8-0"], [{ readOnly: true, error: true }, "_44rwcld-3-8-0"]] });
+var container = _7a468({ defaultClassName: "_44rwcl2-3-9-0", variantClassNames: { contentWidth: { true: "_44rwcl3-3-9-0" }, resize: { none: "_44rwcl4-3-9-0", both: "_44rwcl5-3-9-0", horizontal: "_44rwcl6-3-9-0", vertical: "_44rwcl7-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeIcon = _7a468({ defaultClassName: "_44rwcle-3-9-0", variantClassNames: { error: { true: "_44rwclf-3-9-0" }, disabled: { true: "_44rwclg-3-9-0" }, readOnly: { true: "_44rwclh-3-9-0" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcli-3-9-0"]] });
+var textArea = _7a468({ defaultClassName: "_44rwcl8-3-9-0", variantClassNames: { disabled: { true: "_44rwcl9-3-9-0" }, readOnly: { true: "_44rwcla-3-9-0" }, error: { true: "_44rwclb-3-9-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwclc-3-9-0"], [{ readOnly: true, error: true }, "_44rwcld-3-9-0"]] });
 export {
   container,
   resizeIcon,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/text-area/TextArea.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './TextArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'_44rwcl2-3-8-0',variantClassNames:{contentWidth:{true:'_44rwcl3-3-8-0'},resize:{none:'_44rwcl4-3-8-0',both:'_44rwcl5-3-8-0',horizontal:'_44rwcl6-3-8-0',vertical:'_44rwcl7-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeIcon = _7a468({defaultClassName:'_44rwcle-3-8-0',variantClassNames:{error:{true:'_44rwclf-3-8-0'},disabled:{true:'_44rwclg-3-8-0'},readOnly:{true:'_44rwclh-3-8-0'}},defaultVariants:{},compoundVariants:[[{error:true,disabled:true},'_44rwcli-3-8-0']]});\nexport var textArea = _7a468({defaultClassName:'_44rwcl8-3-8-0',variantClassNames:{disabled:{true:'_44rwcl9-3-8-0'},readOnly:{true:'_44rwcla-3-8-0'},error:{true:'_44rwclb-3-8-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_44rwclc-3-8-0'],[{readOnly:true,error:true},'_44rwcld-3-8-0']]});"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './TextArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'_44rwcl2-3-9-0',variantClassNames:{contentWidth:{true:'_44rwcl3-3-9-0'},resize:{none:'_44rwcl4-3-9-0',both:'_44rwcl5-3-9-0',horizontal:'_44rwcl6-3-9-0',vertical:'_44rwcl7-3-9-0'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeIcon = _7a468({defaultClassName:'_44rwcle-3-9-0',variantClassNames:{error:{true:'_44rwclf-3-9-0'},disabled:{true:'_44rwclg-3-9-0'},readOnly:{true:'_44rwclh-3-9-0'}},defaultVariants:{},compoundVariants:[[{error:true,disabled:true},'_44rwcli-3-9-0']]});\nexport var textArea = _7a468({defaultClassName:'_44rwcl8-3-9-0',variantClassNames:{disabled:{true:'_44rwcl9-3-9-0'},readOnly:{true:'_44rwcla-3-9-0'},error:{true:'_44rwclb-3-9-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_44rwclc-3-9-0'],[{readOnly:true,error:true},'_44rwcld-3-9-0']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,cAAa,EAAC,MAAK,iBAAgB,GAAE,QAAO,EAAC,MAAK,kBAAiB,MAAK,kBAAiB,YAAW,kBAAiB,UAAS,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrQ,IAAI,aAAa,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,OAAM,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,MAAK,UAAS,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACnQ,IAAI,WAAW,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,GAAE,OAAM,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/forms/toggle-button-group/Item.js

@@ -21,6 +21,7 @@ import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { Tooltip } from "../../overlays/tooltip/Tooltip.js";
 import { Text } from "../../typography/text/Text.js";
+import { useFormFieldContext } from "../forms-core/hooks/useFormFieldContext.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
 import { useFormFieldValidation } from "../forms-core/hooks/useFormFieldValidation.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
@@ -63,6 +64,7 @@ const Item = forwardRef(
     const checked = selectedValue === value;
     const color = hasError ? "critical" : "neutral";
     const { dispatch: messagesContextDispatch } = useFormFieldMessagesContext();
+    const { registerMemberFormControlId } = useFormFieldContext();
     const {
       onChange: validationOnChange,
       onInvalid: validationOnInvalid,
@@ -75,14 +77,18 @@ const Item = forwardRef(
       id,
       onValidityChange
     );
+    useEffect(
+      () => registerMemberFormControlId(id),
+      [id, registerMemberFormControlId]
+    );
     useEffect(() => {
       messagesContextDispatch?.({
-        type: FormFieldMessagesAction.ADDFORMCONTROLID,
-        payload: { controlId: id }
+        type: FormFieldMessagesAction.ADDMEMBERFORMCONTROLID,
+        payload: { formControlId: id }
       });
       return () => messagesContextDispatch?.({
-        type: FormFieldMessagesAction.REMOVEFORMCONTROLID,
-        payload: { controlId: id }
+        type: FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID,
+        payload: { formControlId: id }
       });
     }, [id, messagesContextDispatch]);
     const [slots, freeform] = useSlots(children, {