Removed all v2 in naming of state management logic (#13675)

This PR removes any V2 naming in state management logic and some minor utils and hooks. It has a lot of changes but nearly all of them were made by the rename functionality of vscode which is deterministic, so it shouldn't introduce any regression. QA has been made on this PR on the main features of the app without any noticeable issue. Also renamed some other v2 naming related items : - TextInputV2 => TextInput - TextInput => SettingsTextInput - ObjectFilterDropdownFilterSelectMenuItemV2 => ObjectFilterDropdownFilterSelectMenuItem - useInitDraftValueV2 => useInitDraftValue - useOpenRecordTableCellV2 => useOpenRecordTableCell
2025-08-06 12:09:15 +02:00
parent d8b24812b0
commit de802b1447
773 changed files with 3355 additions and 3462 deletions
@@ -1,14 +1,12 @@
 import { dialogInternalComponentState } from '@/ui/feedback/dialog-manager/states/dialogInternalComponentState';
 import { useDialogManager } from '../hooks/useDialogManager';

-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { Dialog } from './Dialog';
 import { DialogManagerEffect } from './DialogManagerEffect';

 export const DialogManager = ({ children }: React.PropsWithChildren) => {
-  const dialogInternal = useRecoilComponentValueV2(
-    dialogInternalComponentState,
-  );
+  const dialogInternal = useRecoilComponentValue(dialogInternalComponentState);
  const { closeDialog } = useDialogManager();

  return (
@@ -5,12 +5,10 @@ import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePush
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';

 import { dialogInternalComponentState } from '@/ui/feedback/dialog-manager/states/dialogInternalComponentState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';

 export const DialogManagerEffect = () => {
-  const dialogInternal = useRecoilComponentValueV2(
-    dialogInternalComponentState,
-  );
+  const dialogInternal = useRecoilComponentValue(dialogInternalComponentState);

  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();

@@ -6,7 +6,7 @@ import { DialogComponentInstanceContext } from '@/ui/feedback/dialog-manager/con
 import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
 import { dialogInternalComponentState } from '@/ui/feedback/dialog-manager/states/dialogInternalComponentState';
 import { DialogOptions } from '@/ui/feedback/dialog-manager/types/DialogOptions';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';

 const mockedUuid = 'mocked-uuid';
 jest.mock('uuid');
@@ -77,7 +77,7 @@ const renderHooks = () => {
  const { result } = renderHook(
    () => ({
      dialogManager: useDialogManager(),
-      dialogInternal: useRecoilComponentValueV2(dialogInternalComponentState),
+      dialogInternal: useRecoilComponentValue(dialogInternalComponentState),
    }),
    renderHookConfig,
  );
@@ -1,5 +1,5 @@
 import { DialogComponentInstanceContext } from '@/ui/feedback/dialog-manager/contexts/DialogComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
 import { DialogOptions } from '../types/DialogOptions';

 type DialogState = {
@@ -7,13 +7,11 @@ type DialogState = {
  queue: DialogOptions[];
 };

-export const dialogInternalComponentState = createComponentStateV2<DialogState>(
-  {
-    key: 'dialogInternalComponentState',
-    defaultValue: {
-      maxQueue: 2,
-      queue: [],
-    },
-    componentInstanceContext: DialogComponentInstanceContext,
+export const dialogInternalComponentState = createComponentState<DialogState>({
+  key: 'dialogInternalComponentState',
+  defaultValue: {
+    maxQueue: 2,
+    queue: [],
  },
-);
+  componentInstanceContext: DialogComponentInstanceContext,
+});
@@ -6,7 +6,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

 import { snackBarInternalComponentState } from '@/ui/feedback/snack-bar-manager/states/snackBarInternalComponentState';
 import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 import { SnackBar } from './SnackBar';

@@ -27,7 +27,7 @@ const StyledSnackBarContainer = styled.div`
 `;

 export const SnackBarProvider = ({ children }: React.PropsWithChildren) => {
-  const snackBarInternal = useRecoilComponentValueV2(
+  const snackBarInternal = useRecoilComponentValue(
    snackBarInternalComponentState,
  );

@@ -1,5 +1,5 @@
 import { SnackBarComponentInstanceContext } from '@/ui/feedback/snack-bar-manager/contexts/SnackBarComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
 import { SnackBarProps } from '../components/SnackBar';

 export type SnackBarOptions = SnackBarProps & {
@@ -12,7 +12,7 @@ export type SnackBarState = {
 };

 export const snackBarInternalComponentState =
-  createComponentStateV2<SnackBarState>({
+  createComponentState<SnackBarState>({
    key: 'snackBarState',
    defaultValue: {
      maxQueue: 3,
@@ -6,7 +6,7 @@ import { SELECT_AUTOCOMPLETE_LIST_DROPDOWN_ID } from '@/geo-map/constants/select
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
 import { FieldAddressDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue';
 import { FieldAddressValue } from '@/object-record/record-field/types/FieldMetadata';
-import { TextInputV2 } from '@/ui/input/components/TextInputV2';
+import { TextInput } from '@/ui/input/components/TextInput';
 import { TEXT_INPUT_CLICK_OUTSIDE_ID } from '@/ui/input/components/constants/TextInputClickOutsideId';
 import { CountrySelect } from '@/ui/input/components/internal/country/components/CountrySelect';
 import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId';
@@ -305,7 +305,7 @@ export const AddressInput = ({
    <StyledAddressContainer ref={wrapperRef}>
      {isFieldInputInSubFieldsAddress('addressStreet1') &&
        renderInputWithAutocomplete(
-          <TextInputV2
+          <TextInput
            autoFocus
            value={internalValue.addressStreet1 ?? ''}
            ref={inputRefs.addressStreet1}
@@ -323,7 +323,7 @@ export const AddressInput = ({
          'addressStreet1',
        )}
      {isFieldInputInSubFieldsAddress('addressStreet2') && (
-        <TextInputV2
+        <TextInput
          value={internalValue.addressStreet2 ?? ''}
          ref={inputRefs.addressStreet2}
          label="Address 2"
@@ -335,7 +335,7 @@ export const AddressInput = ({
      <StyledHalfRowContainer>
        {isFieldInputInSubFieldsAddress('addressCity') &&
          renderInputWithAutocomplete(
-            <TextInputV2
+            <TextInput
              value={internalValue.addressCity ?? ''}
              ref={inputRefs.addressCity}
              label="City"
@@ -352,7 +352,7 @@ export const AddressInput = ({
            'addressCity',
          )}
        {isFieldInputInSubFieldsAddress('addressState') && (
-          <TextInputV2
+          <TextInput
            value={internalValue.addressState ?? ''}
            ref={inputRefs.addressState}
            label="State"
@@ -364,7 +364,7 @@ export const AddressInput = ({
      </StyledHalfRowContainer>
      <StyledHalfRowContainer>
        {isFieldInputInSubFieldsAddress('addressPostcode') && (
-          <TextInputV2
+          <TextInput
            value={internalValue.addressPostcode ?? ''}
            ref={inputRefs.addressPostcode}
            label="Post Code"
@@ -13,7 +13,7 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { SelectOption } from 'twenty-ui/input';
@@ -45,7 +45,7 @@ export const MultiSelectInput = ({
    selectableListComponentInstanceId,
  );

-  const selectedItemId = useRecoilComponentValueV2(
+  const selectedItemId = useRecoilComponentValue(
    selectedItemIdComponentState,
    selectableListComponentInstanceId,
  );
@@ -14,7 +14,7 @@ import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { t } from '@lingui/core/macro';
 import { IconApps, IconComponent, useIcons } from 'twenty-ui/display';
 import {
@@ -87,7 +87,7 @@ const IconPickerIcon = ({
  Icon,
  focusedIconKey,
 }: IconPickerIconProps) => {
-  const isSelectedItemId = useRecoilComponentValueV2(
+  const isSelectedItemId = useRecoilComponentValue(
    selectedItemIdComponentState,
    iconKey,
  );
@@ -200,7 +200,7 @@ export const IconPicker = ({
  const selectableListInstanceId = 'icon-list';

  const focusedIconKey =
-    useRecoilComponentValueV2(
+    useRecoilComponentValue(
      selectedItemIdComponentState,
      selectableListInstanceId,
    ) ?? undefined;
@@ -16,7 +16,7 @@ import { SelectableList } from '@/ui/layout/selectable-list/components/Selectabl
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { isDefined } from 'twenty-shared/utils';
 import { IconComponent } from 'twenty-ui/display';
 import { SelectOption } from 'twenty-ui/input';
@@ -124,7 +124,7 @@ export const Select = <Value extends SelectValue>({

  const selectableItemIdArray = filteredOptions.map((option) => option.label);

-  const selectedItemId = useRecoilComponentValueV2(
+  const selectedItemId = useRecoilComponentValue(
    selectedItemIdComponentState,
    dropdownId,
  );
@@ -7,7 +7,7 @@ import { SelectableListComponentInstanceContext } from '@/ui/layout/selectable-l
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { TagColor } from 'twenty-ui/components';
@@ -41,7 +41,7 @@ export const SelectInput = ({
    SelectableListComponentInstanceContext,
  );

-  const selectedItemId = useRecoilComponentValueV2(
+  const selectedItemId = useRecoilComponentValue(
    selectedItemIdComponentState,
    selectableListInstanceId,
  );
@@ -0,0 +1,132 @@
+import { FocusEventHandler, useEffect, useRef, useState } from 'react';
+import { Key } from 'ts-key-enum';
+
+import {
+  TextInput,
+  TextInputComponentProps,
+} from '@/ui/input/components/TextInput';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
+import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
+import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
+import { isDefined } from 'twenty-shared/utils';
+
+export type SettingsTextInputProps = TextInputComponentProps & {
+  instanceId: string;
+  disableHotkeys?: boolean;
+  onInputEnter?: () => void;
+  dataTestId?: string;
+  autoFocusOnMount?: boolean;
+  autoSelectOnMount?: boolean;
+};
+
+export const SettingsTextInput = ({
+  instanceId,
+  onFocus,
+  onBlur,
+  onInputEnter,
+  disableHotkeys = false,
+  autoFocusOnMount,
+  autoSelectOnMount,
+  dataTestId,
+  ...props
+}: SettingsTextInputProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [isFocused, setIsFocused] = useState(false);
+
+  useEffect(() => {
+    if (autoFocusOnMount === true) {
+      inputRef.current?.focus();
+      setIsFocused(true);
+    }
+  }, [autoFocusOnMount]);
+
+  useEffect(() => {
+    if (autoSelectOnMount === true) {
+      inputRef.current?.select();
+    }
+  }, [autoSelectOnMount]);
+
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+  const { removeFocusItemFromFocusStackById } =
+    useRemoveFocusItemFromFocusStackById();
+
+  const handleFocus: FocusEventHandler<HTMLInputElement> = (e) => {
+    onFocus?.(e);
+    setIsFocused(true);
+
+    if (!disableHotkeys) {
+      pushFocusItemToFocusStack({
+        focusId: instanceId,
+        component: {
+          type: FocusComponentType.TEXT_INPUT,
+          instanceId: instanceId,
+        },
+        globalHotkeysConfig: {
+          enableGlobalHotkeysConflictingWithKeyboard: false,
+        },
+      });
+    }
+  };
+
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
+    onBlur?.(e);
+    setIsFocused(false);
+
+    if (!disableHotkeys) {
+      removeFocusItemFromFocusStackById({ focusId: instanceId });
+    }
+  };
+
+  const handleEscape = () => {
+    if (!isFocused) {
+      return;
+    }
+    if (isDefined(inputRef) && 'current' in inputRef) {
+      inputRef.current?.blur();
+      setIsFocused(false);
+    }
+  };
+
+  const handleEnter = () => {
+    if (!isFocused) {
+      return;
+    }
+    onInputEnter?.();
+    if (isDefined(inputRef) && 'current' in inputRef) {
+      setIsFocused(false);
+    }
+  };
+
+  useHotkeysOnFocusedElement({
+    keys: [Key.Escape],
+    callback: handleEscape,
+    focusId: instanceId,
+    dependencies: [handleEscape],
+    options: {
+      preventDefault: false,
+    },
+  });
+
+  useHotkeysOnFocusedElement({
+    keys: [Key.Enter],
+    callback: handleEnter,
+    focusId: instanceId,
+    dependencies: [handleEnter],
+    options: {
+      preventDefault: false,
+    },
+  });
+
+  return (
+    <TextInput
+      ref={inputRef}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      dataTestId={dataTestId}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    />
+  );
+};
@@ -1,132 +1,444 @@
-import { FocusEventHandler, useEffect, useRef, useState } from 'react';
-import { Key } from 'ts-key-enum';
-
+import { InputErrorHelper } from '@/ui/input/components/InputErrorHelper';
+import { InputLabel } from '@/ui/input/components/InputLabel';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 import {
-  TextInputV2,
-  TextInputV2ComponentProps,
-} from '@/ui/input/components/TextInputV2';
-import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
-import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
-import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
-import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
-import { isDefined } from 'twenty-shared/utils';
+  ChangeEvent,
+  FocusEventHandler,
+  InputHTMLAttributes,
+  forwardRef,
+  useId,
+  useRef,
+  useState,
+} from 'react';
+import { IconComponent, IconEye, IconEyeOff } from 'twenty-ui/display';
+import { AutogrowWrapper } from 'twenty-ui/utilities';
+import { useCombinedRefs } from '~/hooks/useCombinedRefs';
+import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';

-export type TextInputProps = TextInputV2ComponentProps & {
-  instanceId: string;
-  disableHotkeys?: boolean;
-  onInputEnter?: () => void;
+const StyledContainer = styled.div<Pick<TextInputComponentProps, 'fullWidth'>>`
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  width: ${({ fullWidth }) => (fullWidth ? `100%` : 'auto')};
+  position: relative;
+`;
+
+const StyledInputContainer = styled.div`
+  align-items: center;
+  background-color: inherit;
+  display: flex;
+  flex-direction: row;
+  position: relative;
+`;
+
+type StyledAdornmentContainerProps = {
+  sizeVariant: TextInputSize;
+  position: 'left' | 'right';
+};
+
+const StyledAdornmentContainer = styled.div<StyledAdornmentContainerProps>`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.transparent.light};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme, position }) =>
+    position === 'left'
+      ? `${theme.border.radius.sm} 0 0 ${theme.border.radius.sm}`
+      : `0 ${theme.border.radius.sm} ${theme.border.radius.sm} 0`};
+  box-sizing: border-box;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  height: ${({ sizeVariant }) =>
+    sizeVariant === 'xs'
+      ? '20px'
+      : sizeVariant === 'sm'
+        ? '24px'
+        : sizeVariant === 'md'
+          ? '28px'
+          : '32px'};
+  justify-content: center;
+  min-width: fit-content;
+  padding: ${({ theme }) => theme.spacing(2)};
+  width: auto;
+  line-height: ${({ sizeVariant }) =>
+    sizeVariant === 'xs'
+      ? '20px'
+      : sizeVariant === 'sm'
+        ? '24px'
+        : sizeVariant === 'md'
+          ? '28px'
+          : '32px'};
+
+  ${({ position }) =>
+    position === 'left' ? 'border-right: none;' : 'border-left: none;'}
+`;
+
+const StyledInput = styled.input<
+  Pick<
+    TextInputComponentProps,
+    | 'LeftIcon'
+    | 'RightIcon'
+    | 'error'
+    | 'sizeVariant'
+    | 'width'
+    | 'inheritFontStyles'
+    | 'autoGrow'
+    | 'rightAdornment'
+    | 'leftAdornment'
+  >
+>`
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
+  border-radius: ${({ theme, leftAdornment, rightAdornment }) =>
+    leftAdornment
+      ? `0 ${theme.border.radius.sm} ${theme.border.radius.sm} 0`
+      : rightAdornment
+        ? `${theme.border.radius.sm} 0 0 ${theme.border.radius.sm}`
+        : theme.border.radius.sm};
+
+  border: 1px solid
+    ${({ theme, error }) =>
+      error ? theme.border.color.danger : theme.border.color.medium};
+  box-sizing: border-box;
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  flex-grow: 1;
+  font-family: ${({ theme, inheritFontStyles }) =>
+    inheritFontStyles ? 'inherit' : theme.font.family};
+  font-size: ${({ theme, inheritFontStyles }) =>
+    inheritFontStyles ? 'inherit' : theme.font.size.md};
+  font-weight: ${({ theme, inheritFontStyles }) =>
+    inheritFontStyles ? 'inherit' : theme.font.weight.regular};
+  height: ${({ sizeVariant }) =>
+    sizeVariant === 'xs'
+      ? '20px'
+      : sizeVariant === 'sm'
+        ? '24px'
+        : sizeVariant === 'md'
+          ? '28px'
+          : '32px'};
+  outline: none;
+  padding: ${({ theme, sizeVariant, autoGrow }) =>
+    autoGrow
+      ? 0
+      : sizeVariant === 'xs'
+        ? `${theme.spacing(2)} 0`
+        : theme.spacing(2)};
+  padding-left: ${({ theme, LeftIcon, autoGrow }) =>
+    autoGrow
+      ? theme.spacing(1)
+      : LeftIcon
+        ? `calc(${theme.spacing(3)} + 16px)`
+        : theme.spacing(2)};
+  padding-right: ${({ theme, RightIcon, autoGrow }) =>
+    autoGrow
+      ? theme.spacing(1)
+      : RightIcon
+        ? `calc(${theme.spacing(3)} + 16px)`
+        : theme.spacing(2)};
+  width: ${({ theme, width }) =>
+    width ? `calc(${width}px + ${theme.spacing(0.5)})` : '100%'};
+  max-width: ${({ autoGrow }) => (autoGrow ? '100%' : 'none')};
+  text-overflow: ellipsis;
+  &::placeholder,
+  &::-webkit-input-placeholder {
+    color: ${({ theme }) => theme.font.color.light};
+    font-family: ${({ theme }) => theme.font.family};
+    font-weight: ${({ theme }) => theme.font.weight.medium};
+  }
+
+  &:disabled {
+    color: ${({ theme }) => theme.font.color.tertiary};
+  }
+
+  &[readonly] {
+    pointer-events: none;
+  }
+
+  &:focus {
+    ${({ theme, error }) => {
+      return `
+      border-color: ${error ? theme.border.color.danger : theme.color.blue};
+      `;
+    }};
+  }
+`;
+
+const StyledLeftIconContainer = styled.div<{ sizeVariant: TextInputSize }>`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding-left: ${({ theme, sizeVariant }) =>
+    sizeVariant === 'xs'
+      ? theme.spacing(0.5)
+      : sizeVariant === 'md' || sizeVariant === 'sm'
+        ? theme.spacing(1)
+        : theme.spacing(2)};
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+`;
+
+const StyledTrailingIconContainer = styled.div<
+  Pick<TextInputComponentProps, 'error'>
+>`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding-right: ${({ theme }) => theme.spacing(2)};
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto 0;
+`;
+
+const StyledTrailingIcon = styled.div<{
+  isFocused?: boolean;
+  onClick?: () => void;
+}>`
+  align-items: center;
+  color: ${({ theme, isFocused }) =>
+    isFocused ? theme.font.color.secondary : theme.font.color.light};
+  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
+  display: flex;
+  justify-content: center;
+`;
+
+const INPUT_TYPE_PASSWORD = 'password';
+
+export type TextInputSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export type TextInputComponentProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'onChange' | 'onKeyDown'
+> & {
+  className?: string;
+  label?: string;
+  onChange?: (text: string) => void;
+  fullWidth?: boolean;
+  error?: string;
+  noErrorHelper?: boolean;
+  RightIcon?: IconComponent;
+  onRightIconClick?: () => void;
+  LeftIcon?: IconComponent;
+  autoGrow?: boolean;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
  dataTestId?: string;
-  autoFocusOnMount?: boolean;
-  autoSelectOnMount?: boolean;
+  sizeVariant?: TextInputSize;
+  inheritFontStyles?: boolean;
+  rightAdornment?: string;
+  leftAdornment?: string;
+  textClickOutsideId?: string;
 };

-export const TextInput = ({
-  instanceId,
-  onFocus,
-  onBlur,
-  onInputEnter,
-  disableHotkeys = false,
-  autoFocusOnMount,
-  autoSelectOnMount,
-  dataTestId,
-  ...props
-}: TextInputProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
+type TextInputWithAutoGrowWrapperProps = TextInputComponentProps;

-  const [isFocused, setIsFocused] = useState(false);
+const TextInputComponent = forwardRef<
+  HTMLInputElement,
+  TextInputComponentProps
+>(
+  (
+    {
+      className,
+      label,
+      value,
+      onChange,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      fullWidth,
+      width,
+      error,
+      noErrorHelper = false,
+      required,
+      type,
+      autoFocus,
+      placeholder,
+      disabled,
+      readOnly,
+      tabIndex,
+      RightIcon,
+      onRightIconClick,
+      LeftIcon,
+      autoComplete,
+      maxLength,
+      sizeVariant = 'lg',
+      inheritFontStyles = false,
+      dataTestId,
+      autoGrow = false,
+      rightAdornment,
+      leftAdornment,
+      textClickOutsideId,
+    },
+    ref,
+  ) => {
+    const theme = useTheme();
+    const inputRef = useRef<HTMLInputElement>(null);
+    const combinedRef = useCombinedRefs(ref, inputRef);

-  useEffect(() => {
-    if (autoFocusOnMount === true) {
-      inputRef.current?.focus();
+    const [passwordVisible, setPasswordVisible] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+
+    const handleTogglePasswordVisibility = () => {
+      setPasswordVisible(!passwordVisible);
+    };
+
+    const handleFocus: FocusEventHandler<HTMLInputElement> = (event) => {
      setIsFocused(true);
-    }
-  }, [autoFocusOnMount]);
+      onFocus?.(event);
+    };

-  useEffect(() => {
-    if (autoSelectOnMount === true) {
-      inputRef.current?.select();
-    }
-  }, [autoSelectOnMount]);
-
-  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
-  const { removeFocusItemFromFocusStackById } =
-    useRemoveFocusItemFromFocusStackById();
-
-  const handleFocus: FocusEventHandler<HTMLInputElement> = (e) => {
-    onFocus?.(e);
-    setIsFocused(true);
-
-    if (!disableHotkeys) {
-      pushFocusItemToFocusStack({
-        focusId: instanceId,
-        component: {
-          type: FocusComponentType.TEXT_INPUT,
-          instanceId: instanceId,
-        },
-        globalHotkeysConfig: {
-          enableGlobalHotkeysConflictingWithKeyboard: false,
-        },
-      });
-    }
-  };
-
-  const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
-    onBlur?.(e);
-    setIsFocused(false);
-
-    if (!disableHotkeys) {
-      removeFocusItemFromFocusStackById({ focusId: instanceId });
-    }
-  };
-
-  const handleEscape = () => {
-    if (!isFocused) {
-      return;
-    }
-    if (isDefined(inputRef) && 'current' in inputRef) {
-      inputRef.current?.blur();
+    const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
      setIsFocused(false);
-    }
-  };
+      onBlur?.(event);
+    };

-  const handleEnter = () => {
-    if (!isFocused) {
-      return;
-    }
-    onInputEnter?.();
-    if (isDefined(inputRef) && 'current' in inputRef) {
-      setIsFocused(false);
-    }
-  };
+    const instanceId = useId();

-  useHotkeysOnFocusedElement({
-    keys: [Key.Escape],
-    callback: handleEscape,
-    focusId: instanceId,
-    dependencies: [handleEscape],
-    options: {
-      preventDefault: false,
-    },
-  });
+    return (
+      <StyledContainer
+        className={className}
+        fullWidth={fullWidth ?? false}
+        data-click-outside-id={textClickOutsideId}
+      >
+        {label && (
+          <InputLabel htmlFor={instanceId}>
+            {label + (required ? '*' : '')}
+          </InputLabel>
+        )}
+        <StyledInputContainer>
+          {leftAdornment && (
+            <StyledAdornmentContainer sizeVariant={sizeVariant} position="left">
+              {leftAdornment}
+            </StyledAdornmentContainer>
+          )}

-  useHotkeysOnFocusedElement({
-    keys: [Key.Enter],
-    callback: handleEnter,
-    focusId: instanceId,
-    dependencies: [handleEnter],
-    options: {
-      preventDefault: false,
-    },
-  });
+          {!!LeftIcon && (
+            <StyledLeftIconContainer sizeVariant={sizeVariant}>
+              <StyledTrailingIcon isFocused={isFocused}>
+                <LeftIcon size={theme.icon.size.md} />
+              </StyledTrailingIcon>
+            </StyledLeftIconContainer>
+          )}

+          <StyledInput
+            id={instanceId}
+            width={width}
+            data-testid={dataTestId}
+            autoComplete={autoComplete || 'off'}
+            ref={combinedRef}
+            tabIndex={tabIndex ?? 0}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            type={passwordVisible ? 'text' : type}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              onChange?.(
+                turnIntoEmptyStringIfWhitespacesOnly(event.target.value),
+              );
+            }}
+            onKeyDown={onKeyDown}
+            {...{
+              autoFocus,
+              disabled,
+              readOnly,
+              placeholder,
+              required,
+              value,
+              LeftIcon,
+              RightIcon,
+              maxLength,
+              error,
+              sizeVariant,
+              inheritFontStyles,
+              autoGrow,
+              leftAdornment,
+              rightAdornment,
+            }}
+          />
+          {rightAdornment && (
+            <StyledAdornmentContainer
+              sizeVariant={sizeVariant}
+              position="right"
+            >
+              {rightAdornment}
+            </StyledAdornmentContainer>
+          )}
+          <StyledTrailingIconContainer {...{ error }}>
+            {!error && type === INPUT_TYPE_PASSWORD && (
+              <StyledTrailingIcon
+                onClick={handleTogglePasswordVisibility}
+                data-testid="reveal-password-button"
+              >
+                {passwordVisible ? (
+                  <IconEyeOff size={theme.icon.size.md} />
+                ) : (
+                  <IconEye size={theme.icon.size.md} />
+                )}
+              </StyledTrailingIcon>
+            )}
+            {!error && type !== INPUT_TYPE_PASSWORD && !!RightIcon && (
+              <StyledTrailingIcon
+                onClick={onRightIconClick ? onRightIconClick : undefined}
+              >
+                <RightIcon size={theme.icon.size.md} />
+              </StyledTrailingIcon>
+            )}
+          </StyledTrailingIconContainer>
+        </StyledInputContainer>
+        {!noErrorHelper && error && (
+          <InputErrorHelper>{error}</InputErrorHelper>
+        )}
+      </StyledContainer>
+    );
+  },
+);
+
+const StyledAutogrowWrapper = styled(AutogrowWrapper)<{
+  sizeVariant?: TextInputSize;
+}>`
+  box-sizing: border-box;
+  height: ${({ sizeVariant }) =>
+    sizeVariant === 'xs'
+      ? '20px'
+      : sizeVariant === 'sm'
+        ? '24px'
+        : sizeVariant === 'md'
+          ? '28px'
+          : '32px'};
+  padding: 0 ${({ theme }) => theme.spacing(1.25)};
+`;
+
+const TextInputWithAutoGrowWrapper = forwardRef<
+  HTMLInputElement,
+  TextInputWithAutoGrowWrapperProps
+>((props, ref) => {
  return (
-    <TextInputV2
-      ref={inputRef}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-      dataTestId={dataTestId}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-    />
+    <>
+      {props.autoGrow ? (
+        <StyledAutogrowWrapper
+          sizeVariant={props.sizeVariant}
+          node={props.value || props.placeholder}
+        >
+          <TextInputComponent
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={ref}
+            fullWidth={true}
+          />
+        </StyledAutogrowWrapper>
+      ) : (
+        <TextInputComponent
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...props}
+          ref={ref}
+        />
+      )}
+    </>
  );
-};
+});
+
+export const TextInput = TextInputWithAutoGrowWrapper;
@@ -1,446 +0,0 @@
-import { InputErrorHelper } from '@/ui/input/components/InputErrorHelper';
-import { InputLabel } from '@/ui/input/components/InputLabel';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import {
-  ChangeEvent,
-  FocusEventHandler,
-  InputHTMLAttributes,
-  forwardRef,
-  useId,
-  useRef,
-  useState,
-} from 'react';
-import { IconComponent, IconEye, IconEyeOff } from 'twenty-ui/display';
-import { AutogrowWrapper } from 'twenty-ui/utilities';
-import { useCombinedRefs } from '~/hooks/useCombinedRefs';
-import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
-
-const StyledContainer = styled.div<
-  Pick<TextInputV2ComponentProps, 'fullWidth'>
->`
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-direction: column;
-  width: ${({ fullWidth }) => (fullWidth ? `100%` : 'auto')};
-  position: relative;
-`;
-
-const StyledInputContainer = styled.div`
-  align-items: center;
-  background-color: inherit;
-  display: flex;
-  flex-direction: row;
-  position: relative;
-`;
-
-type StyledAdornmentContainerProps = {
-  sizeVariant: TextInputV2Size;
-  position: 'left' | 'right';
-};
-
-const StyledAdornmentContainer = styled.div<StyledAdornmentContainerProps>`
-  align-items: center;
-  background-color: ${({ theme }) => theme.background.transparent.light};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme, position }) =>
-    position === 'left'
-      ? `${theme.border.radius.sm} 0 0 ${theme.border.radius.sm}`
-      : `0 ${theme.border.radius.sm} ${theme.border.radius.sm} 0`};
-  box-sizing: border-box;
-  color: ${({ theme }) => theme.font.color.tertiary};
-  display: flex;
-  font-size: ${({ theme }) => theme.font.size.md};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  height: ${({ sizeVariant }) =>
-    sizeVariant === 'xs'
-      ? '20px'
-      : sizeVariant === 'sm'
-        ? '24px'
-        : sizeVariant === 'md'
-          ? '28px'
-          : '32px'};
-  justify-content: center;
-  min-width: fit-content;
-  padding: ${({ theme }) => theme.spacing(2)};
-  width: auto;
-  line-height: ${({ sizeVariant }) =>
-    sizeVariant === 'xs'
-      ? '20px'
-      : sizeVariant === 'sm'
-        ? '24px'
-        : sizeVariant === 'md'
-          ? '28px'
-          : '32px'};
-
-  ${({ position }) =>
-    position === 'left' ? 'border-right: none;' : 'border-left: none;'}
-`;
-
-const StyledInput = styled.input<
-  Pick<
-    TextInputV2ComponentProps,
-    | 'LeftIcon'
-    | 'RightIcon'
-    | 'error'
-    | 'sizeVariant'
-    | 'width'
-    | 'inheritFontStyles'
-    | 'autoGrow'
-    | 'rightAdornment'
-    | 'leftAdornment'
-  >
->`
-  background-color: ${({ theme }) => theme.background.transparent.lighter};
-  border-radius: ${({ theme, leftAdornment, rightAdornment }) =>
-    leftAdornment
-      ? `0 ${theme.border.radius.sm} ${theme.border.radius.sm} 0`
-      : rightAdornment
-        ? `${theme.border.radius.sm} 0 0 ${theme.border.radius.sm}`
-        : theme.border.radius.sm};
-
-  border: 1px solid
-    ${({ theme, error }) =>
-      error ? theme.border.color.danger : theme.border.color.medium};
-  box-sizing: border-box;
-  color: ${({ theme }) => theme.font.color.primary};
-  display: flex;
-  flex-grow: 1;
-  font-family: ${({ theme, inheritFontStyles }) =>
-    inheritFontStyles ? 'inherit' : theme.font.family};
-  font-size: ${({ theme, inheritFontStyles }) =>
-    inheritFontStyles ? 'inherit' : theme.font.size.md};
-  font-weight: ${({ theme, inheritFontStyles }) =>
-    inheritFontStyles ? 'inherit' : theme.font.weight.regular};
-  height: ${({ sizeVariant }) =>
-    sizeVariant === 'xs'
-      ? '20px'
-      : sizeVariant === 'sm'
-        ? '24px'
-        : sizeVariant === 'md'
-          ? '28px'
-          : '32px'};
-  outline: none;
-  padding: ${({ theme, sizeVariant, autoGrow }) =>
-    autoGrow
-      ? 0
-      : sizeVariant === 'xs'
-        ? `${theme.spacing(2)} 0`
-        : theme.spacing(2)};
-  padding-left: ${({ theme, LeftIcon, autoGrow }) =>
-    autoGrow
-      ? theme.spacing(1)
-      : LeftIcon
-        ? `calc(${theme.spacing(3)} + 16px)`
-        : theme.spacing(2)};
-  padding-right: ${({ theme, RightIcon, autoGrow }) =>
-    autoGrow
-      ? theme.spacing(1)
-      : RightIcon
-        ? `calc(${theme.spacing(3)} + 16px)`
-        : theme.spacing(2)};
-  width: ${({ theme, width }) =>
-    width ? `calc(${width}px + ${theme.spacing(0.5)})` : '100%'};
-  max-width: ${({ autoGrow }) => (autoGrow ? '100%' : 'none')};
-  text-overflow: ellipsis;
-  &::placeholder,
-  &::-webkit-input-placeholder {
-    color: ${({ theme }) => theme.font.color.light};
-    font-family: ${({ theme }) => theme.font.family};
-    font-weight: ${({ theme }) => theme.font.weight.medium};
-  }
-
-  &:disabled {
-    color: ${({ theme }) => theme.font.color.tertiary};
-  }
-
-  &[readonly] {
-    pointer-events: none;
-  }
-
-  &:focus {
-    ${({ theme, error }) => {
-      return `
-      border-color: ${error ? theme.border.color.danger : theme.color.blue};
-      `;
-    }};
-  }
-`;
-
-const StyledLeftIconContainer = styled.div<{ sizeVariant: TextInputV2Size }>`
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  padding-left: ${({ theme, sizeVariant }) =>
-    sizeVariant === 'xs'
-      ? theme.spacing(0.5)
-      : sizeVariant === 'md' || sizeVariant === 'sm'
-        ? theme.spacing(1)
-        : theme.spacing(2)};
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-`;
-
-const StyledTrailingIconContainer = styled.div<
-  Pick<TextInputV2ComponentProps, 'error'>
->`
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  padding-right: ${({ theme }) => theme.spacing(2)};
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  margin: auto 0;
-`;
-
-const StyledTrailingIcon = styled.div<{
-  isFocused?: boolean;
-  onClick?: () => void;
-}>`
-  align-items: center;
-  color: ${({ theme, isFocused }) =>
-    isFocused ? theme.font.color.secondary : theme.font.color.light};
-  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
-  display: flex;
-  justify-content: center;
-`;
-
-const INPUT_TYPE_PASSWORD = 'password';
-
-export type TextInputV2Size = 'xs' | 'sm' | 'md' | 'lg';
-
-export type TextInputV2ComponentProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'onChange' | 'onKeyDown'
-> & {
-  className?: string;
-  label?: string;
-  onChange?: (text: string) => void;
-  fullWidth?: boolean;
-  error?: string;
-  noErrorHelper?: boolean;
-  RightIcon?: IconComponent;
-  onRightIconClick?: () => void;
-  LeftIcon?: IconComponent;
-  autoGrow?: boolean;
-  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  dataTestId?: string;
-  sizeVariant?: TextInputV2Size;
-  inheritFontStyles?: boolean;
-  rightAdornment?: string;
-  leftAdornment?: string;
-  textClickOutsideId?: string;
-};
-
-type TextInputV2WithAutoGrowWrapperProps = TextInputV2ComponentProps;
-
-const TextInputV2Component = forwardRef<
-  HTMLInputElement,
-  TextInputV2ComponentProps
->(
-  (
-    {
-      className,
-      label,
-      value,
-      onChange,
-      onFocus,
-      onBlur,
-      onKeyDown,
-      fullWidth,
-      width,
-      error,
-      noErrorHelper = false,
-      required,
-      type,
-      autoFocus,
-      placeholder,
-      disabled,
-      readOnly,
-      tabIndex,
-      RightIcon,
-      onRightIconClick,
-      LeftIcon,
-      autoComplete,
-      maxLength,
-      sizeVariant = 'lg',
-      inheritFontStyles = false,
-      dataTestId,
-      autoGrow = false,
-      rightAdornment,
-      leftAdornment,
-      textClickOutsideId,
-    },
-    ref,
-  ) => {
-    const theme = useTheme();
-    const inputRef = useRef<HTMLInputElement>(null);
-    const combinedRef = useCombinedRefs(ref, inputRef);
-
-    const [passwordVisible, setPasswordVisible] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
-
-    const handleTogglePasswordVisibility = () => {
-      setPasswordVisible(!passwordVisible);
-    };
-
-    const handleFocus: FocusEventHandler<HTMLInputElement> = (event) => {
-      setIsFocused(true);
-      onFocus?.(event);
-    };
-
-    const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
-      setIsFocused(false);
-      onBlur?.(event);
-    };
-
-    const instanceId = useId();
-
-    return (
-      <StyledContainer
-        className={className}
-        fullWidth={fullWidth ?? false}
-        data-click-outside-id={textClickOutsideId}
-      >
-        {label && (
-          <InputLabel htmlFor={instanceId}>
-            {label + (required ? '*' : '')}
-          </InputLabel>
-        )}
-        <StyledInputContainer>
-          {leftAdornment && (
-            <StyledAdornmentContainer sizeVariant={sizeVariant} position="left">
-              {leftAdornment}
-            </StyledAdornmentContainer>
-          )}
-
-          {!!LeftIcon && (
-            <StyledLeftIconContainer sizeVariant={sizeVariant}>
-              <StyledTrailingIcon isFocused={isFocused}>
-                <LeftIcon size={theme.icon.size.md} />
-              </StyledTrailingIcon>
-            </StyledLeftIconContainer>
-          )}
-
-          <StyledInput
-            id={instanceId}
-            width={width}
-            data-testid={dataTestId}
-            autoComplete={autoComplete || 'off'}
-            ref={combinedRef}
-            tabIndex={tabIndex ?? 0}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            type={passwordVisible ? 'text' : type}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              onChange?.(
-                turnIntoEmptyStringIfWhitespacesOnly(event.target.value),
-              );
-            }}
-            onKeyDown={onKeyDown}
-            {...{
-              autoFocus,
-              disabled,
-              readOnly,
-              placeholder,
-              required,
-              value,
-              LeftIcon,
-              RightIcon,
-              maxLength,
-              error,
-              sizeVariant,
-              inheritFontStyles,
-              autoGrow,
-              leftAdornment,
-              rightAdornment,
-            }}
-          />
-          {rightAdornment && (
-            <StyledAdornmentContainer
-              sizeVariant={sizeVariant}
-              position="right"
-            >
-              {rightAdornment}
-            </StyledAdornmentContainer>
-          )}
-          <StyledTrailingIconContainer {...{ error }}>
-            {!error && type === INPUT_TYPE_PASSWORD && (
-              <StyledTrailingIcon
-                onClick={handleTogglePasswordVisibility}
-                data-testid="reveal-password-button"
-              >
-                {passwordVisible ? (
-                  <IconEyeOff size={theme.icon.size.md} />
-                ) : (
-                  <IconEye size={theme.icon.size.md} />
-                )}
-              </StyledTrailingIcon>
-            )}
-            {!error && type !== INPUT_TYPE_PASSWORD && !!RightIcon && (
-              <StyledTrailingIcon
-                onClick={onRightIconClick ? onRightIconClick : undefined}
-              >
-                <RightIcon size={theme.icon.size.md} />
-              </StyledTrailingIcon>
-            )}
-          </StyledTrailingIconContainer>
-        </StyledInputContainer>
-        {!noErrorHelper && error && (
-          <InputErrorHelper>{error}</InputErrorHelper>
-        )}
-      </StyledContainer>
-    );
-  },
-);
-
-const StyledAutogrowWrapper = styled(AutogrowWrapper)<{
-  sizeVariant?: TextInputV2Size;
-}>`
-  box-sizing: border-box;
-  height: ${({ sizeVariant }) =>
-    sizeVariant === 'xs'
-      ? '20px'
-      : sizeVariant === 'sm'
-        ? '24px'
-        : sizeVariant === 'md'
-          ? '28px'
-          : '32px'};
-  padding: 0 ${({ theme }) => theme.spacing(1.25)};
-`;
-
-const TextInputV2WithAutoGrowWrapper = forwardRef<
-  HTMLInputElement,
-  TextInputV2WithAutoGrowWrapperProps
->((props, ref) => {
-  return (
-    <>
-      {props.autoGrow ? (
-        <StyledAutogrowWrapper
-          sizeVariant={props.sizeVariant}
-          node={props.value || props.placeholder}
-        >
-          <TextInputV2Component
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            ref={ref}
-            fullWidth={true}
-          />
-        </StyledAutogrowWrapper>
-      ) : (
-        <TextInputV2Component
-          // eslint-disable-next-line react/jsx-props-no-spreading
-          {...props}
-          ref={ref}
-        />
-      )}
-    </>
-  );
-});
-
-export const TextInputV2 = TextInputV2WithAutoGrowWrapper;
@@ -1,7 +1,4 @@
-import {
-  TextInputV2,
-  TextInputV2Size,
-} from '@/ui/input/components/TextInputV2';
+import { TextInput, TextInputSize } from '@/ui/input/components/TextInput';
 import { useRef, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';

@@ -22,7 +19,7 @@ type InputProps = {
  onClickOutside?: () => void;
  onTab?: () => void;
  onShiftTab?: () => void;
-  sizeVariant?: TextInputV2Size;
+  sizeVariant?: TextInputSize;
 };

 export type TitleInputProps = {
@@ -30,7 +27,7 @@ export type TitleInputProps = {
 } & InputProps;

 const StyledDiv = styled.div<{
-  sizeVariant: TextInputV2Size;
+  sizeVariant: TextInputSize;
  disabled?: boolean;
 }>`
  background: inherit;
@@ -116,7 +113,7 @@ const Input = ({
  });

  return (
-    <TextInputV2
+    <TextInput
      ref={wrapperRef}
      autoGrow
      sizeVariant={sizeVariant}
@@ -1,10 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';

-import { TextInput, TextInputProps } from '../TextInput';
+import {
+  TextInput,
+  TextInputComponentProps,
+} from '@/ui/input/components/TextInput';
 import { ComponentDecorator } from 'twenty-ui/testing';

-type RenderProps = TextInputProps;
+type RenderProps = TextInputComponentProps;

 const Render = (args: RenderProps) => {
  const [value, setValue] = useState(args.value);
@@ -37,3 +40,31 @@ export const Filled: Story = {
 export const Disabled: Story = {
  args: { disabled: true, value: 'Tim' },
 };
+
+export const AutoGrow: Story = {
+  args: { autoGrow: true, value: 'Tim' },
+};
+
+export const AutoGrowWithPlaceholder: Story = {
+  args: { autoGrow: true, placeholder: 'Tim' },
+};
+
+export const Small: Story = {
+  args: { sizeVariant: 'sm', value: 'Tim' },
+};
+
+export const AutoGrowSmall: Story = {
+  args: { autoGrow: true, sizeVariant: 'sm', value: 'Tim' },
+};
+
+export const WithLeftAdornment: Story = {
+  args: {
+    leftAdornment: 'https://',
+  },
+};
+
+export const WithRightAdornment: Story = {
+  args: {
+    rightAdornment: '@twenty.com',
+  },
+};
@@ -1,70 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-
-import {
-  TextInputV2,
-  TextInputV2ComponentProps,
-} from '@/ui/input/components/TextInputV2';
-import { ComponentDecorator } from 'twenty-ui/testing';
-
-type RenderProps = TextInputV2ComponentProps;
-
-const Render = (args: RenderProps) => {
-  const [value, setValue] = useState(args.value);
-  const handleChange = (text: string) => {
-    args.onChange?.(text);
-    setValue(text);
-  };
-
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  return <TextInputV2 {...args} value={value} onChange={handleChange} />;
-};
-
-const meta: Meta<typeof TextInputV2> = {
-  title: 'UI/Input/TextInputV2',
-  component: TextInputV2,
-  decorators: [ComponentDecorator],
-  args: { placeholder: 'Tim' },
-  render: Render,
-};
-
-export default meta;
-type Story = StoryObj<typeof TextInputV2>;
-
-export const Default: Story = {};
-
-export const Filled: Story = {
-  args: { value: 'Tim' },
-};
-
-export const Disabled: Story = {
-  args: { disabled: true, value: 'Tim' },
-};
-
-export const AutoGrow: Story = {
-  args: { autoGrow: true, value: 'Tim' },
-};
-
-export const AutoGrowWithPlaceholder: Story = {
-  args: { autoGrow: true, placeholder: 'Tim' },
-};
-
-export const Small: Story = {
-  args: { sizeVariant: 'sm', value: 'Tim' },
-};
-
-export const AutoGrowSmall: Story = {
-  args: { autoGrow: true, sizeVariant: 'sm', value: 'Tim' },
-};
-
-export const WithLeftAdornment: Story = {
-  args: {
-    leftAdornment: 'https://',
-  },
-};
-
-export const WithRightAdornment: Story = {
-  args: {
-    rightAdornment: '@twenty.com',
-  },
-};
@@ -1,5 +1,5 @@
 import { Select } from '@/ui/input/components/Select';
-import { TextInput } from '@/ui/input/components/TextInput';
+import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
 import { RELATIVE_DATE_DIRECTION_SELECT_OPTIONS } from '@/ui/input/components/internal/date/constants/RelativeDateDirectionSelectOptions';
 import { RELATIVE_DATE_UNITS_SELECT_OPTIONS } from '@/ui/input/components/internal/date/constants/RelativeDateUnitSelectOptions';
 import {
@@ -71,7 +71,7 @@ export const RelativeDatePickerHeader = (
        options={RELATIVE_DATE_DIRECTION_SELECT_OPTIONS}
        fullWidth
      />
-      <TextInput
+      <SettingsTextInput
        instanceId="relative-date-picker-amount"
        width={50}
        value={textInputValue}
@@ -9,7 +9,7 @@ import { PhoneCountryPickerDropdownSelect } from './PhoneCountryPickerDropdownSe

 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import 'react-phone-number-input/style.css';
 import { isDefined } from 'twenty-shared/utils';
 import { IconChevronDown, IconWorld } from 'twenty-ui/display';
@@ -79,7 +79,7 @@ export const PhoneCountryPickerDropdownButton = ({

  const dropdownId = 'country-picker-dropdown-id';

-  const isDropdownOpen = useRecoilComponentValueV2(
+  const isDropdownOpen = useRecoilComponentValue(
    isDropdownOpenComponentState,
    dropdownId,
  );
@@ -2,7 +2,7 @@ import { BLOCK_SCHEMA } from '@/activities/blocks/constants/Schema';
 import { isSlashMenuOpenComponentState } from '@/ui/input/editor/states/isSlashMenuOpenComponentState';
 import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
 import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
-import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
 import { useRecoilCallback } from 'recoil';

 export type BlockEditorDropdownFocusEffectProps = {
@@ -12,7 +12,7 @@ export type BlockEditorDropdownFocusEffectProps = {
 export const BlockEditorDropdownFocusEffect = ({
  editor,
 }: BlockEditorDropdownFocusEffectProps) => {
-  const isSlashMenuOpenState = useRecoilComponentCallbackStateV2(
+  const isSlashMenuOpenState = useRecoilComponentCallbackState(
    isSlashMenuOpenComponentState,
  );

@@ -3,7 +3,7 @@ import { SuggestionItem } from '@/ui/input/editor/components/types';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { isSelectedItemIdComponentFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector';
-import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
+import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
 import { MenuItemSuggestion } from 'twenty-ui/navigation';

 export type CustomSlashMenuListItemProps = {
@@ -15,7 +15,7 @@ export const CustomSlashMenuListItem = ({
 }: CustomSlashMenuListItemProps) => {
  const { resetSelectedItem } = useSelectableList(SLASH_MENU_LIST_ID);

-  const isSelectedItem = useRecoilComponentFamilyValueV2(
+  const isSelectedItem = useRecoilComponentFamilyValue(
    isSelectedItemIdComponentFamilySelector,
    item.title,
  );
@@ -1,7 +1,7 @@
 import { BlockEditorComponentInstanceContext } from '@/ui/input/editor/contexts/BlockEditorCompoponeInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';

-export const isSlashMenuOpenComponentState = createComponentStateV2<boolean>({
+export const isSlashMenuOpenComponentState = createComponentState<boolean>({
  key: 'isSlashMenuOpenComponentState',
  defaultValue: false,
  componentInstanceContext: BlockEditorComponentInstanceContext,
@@ -9,8 +9,8 @@ import { dropdownMaxWidthComponentState } from '@/ui/layout/dropdown/states/inte
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
 import { GlobalHotkeysConfig } from '@/ui/utilities/hotkey/types/GlobalHotkeysConfig';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
 import styled from '@emotion/styled';
 import {
  Placement,
@@ -78,7 +78,7 @@ export const Dropdown = ({
  isDropdownInModal = false,
  disableClickForClickableComponent = false,
 }: DropdownProps) => {
-  const isDropdownOpen = useRecoilComponentValueV2(
+  const isDropdownOpen = useRecoilComponentValue(
    isDropdownOpenComponentState,
    dropdownId,
  );
@@ -97,12 +97,12 @@ export const Dropdown = ({
      ]
    : [];

-  const setDropdownMaxHeight = useSetRecoilComponentStateV2(
+  const setDropdownMaxHeight = useSetRecoilComponentState(
    dropdownMaxHeightComponentState,
    dropdownId,
  );

-  const setDropdownMaxWidth = useSetRecoilComponentStateV2(
+  const setDropdownMaxWidth = useSetRecoilComponentState(
    dropdownMaxWidthComponentState,
    dropdownId,
  );
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';

 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';

 export const DropdownOnToggleEffect = ({
  onDropdownClose,
@@ -10,9 +10,7 @@ export const DropdownOnToggleEffect = ({
  onDropdownClose?: () => void;
  onDropdownOpen?: () => void;
 }) => {
-  const isDropdownOpen = useRecoilComponentValueV2(
-    isDropdownOpenComponentState,
-  );
+  const isDropdownOpen = useRecoilComponentValue(isDropdownOpenComponentState);

  const [currentIsDropdownOpen, setCurrentIsDropdownOpen] =
    useState(isDropdownOpen);
@@ -11,8 +11,8 @@ import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
 import styled from '@emotion/styled';
 import {
  FloatingPortal,
@@ -70,25 +70,23 @@ export const DropdownInternalContainer = ({
  excludedClickOutsideIds,
  isDropdownInModal = false,
 }: DropdownInternalContainerProps) => {
-  const isDropdownOpen = useRecoilComponentValueV2(
-    isDropdownOpenComponentState,
-  );
+  const isDropdownOpen = useRecoilComponentValue(isDropdownOpenComponentState);

  const { closeDropdown } = useCloseDropdown();

  const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState);

-  const dropdownMaxHeight = useRecoilComponentValueV2(
+  const dropdownMaxHeight = useRecoilComponentValue(
    dropdownMaxHeightComponentState,
    dropdownId,
  );

-  const dropdownMaxWidth = useRecoilComponentValueV2(
+  const dropdownMaxWidth = useRecoilComponentValue(
    dropdownMaxWidthComponentState,
    dropdownId,
  );

-  const setDropdownPlacement = useSetRecoilComponentStateV2(
+  const setDropdownPlacement = useSetRecoilComponentState(
    dropdownPlacementComponentState,
    dropdownId,
  );
@@ -7,7 +7,7 @@ import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/
 import { useCloseAnyOpenDropdown } from '@/ui/layout/dropdown/hooks/useCloseAnyOpenDropdown';
 import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';

 const dropdownId = 'test-dropdown-id';

@@ -27,7 +27,7 @@ describe('useCloseAnyOpenDropdown', () => {
  it('should open dropdown and then close it with closeAnyOpenDropdown', async () => {
    const { result } = renderHook(
      () => {
-        const isDropdownOpen = useRecoilComponentValueV2(
+        const isDropdownOpen = useRecoilComponentValue(
          isDropdownOpenComponentState,
          dropdownId,
        );
@@ -7,7 +7,7 @@ import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';

 const dropdownId = 'test-dropdown-id';
 const outsideDropdownId = 'test-dropdown-id-outside';
@@ -31,12 +31,12 @@ describe('useCloseDropdown', () => {
  it('should close dropdown from inside component instance context', async () => {
    const { result } = renderHook(
      () => {
-        const isOutsideDropdownOpen = useRecoilComponentValueV2(
+        const isOutsideDropdownOpen = useRecoilComponentValue(
          isDropdownOpenComponentState,
          outsideDropdownId,
        );

-        const isInsideDropdownOpen = useRecoilComponentValueV2(
+        const isInsideDropdownOpen = useRecoilComponentValue(
          isDropdownOpenComponentState,
        );

@@ -73,12 +73,12 @@ describe('useCloseDropdown', () => {
  it('should close dropdown from outside component instance context', async () => {
    const { result } = renderHook(
      () => {
-        const isOutsideDropdownOpen = useRecoilComponentValueV2(
+        const isOutsideDropdownOpen = useRecoilComponentValue(
          isDropdownOpenComponentState,
          outsideDropdownId,
        );

-        const isInsideDropdownOpen = useRecoilComponentValueV2(
+        const isInsideDropdownOpen = useRecoilComponentValue(
          isDropdownOpenComponentState,
        );

@@ -6,7 +6,7 @@ import { RecoilRoot } from 'recoil';
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';

 const dropdownId = 'test-dropdown-id';
 const outsideDropdownId = 'test-dropdown-id-outside';
@@ -30,12 +30,12 @@ describe('useOpenDropdown', () => {
  it('should open dropdown from inside component instance context', async () => {
    const { result } = renderHook(
      () => {
-        const isOutsideDropdownOpen = useRecoilComponentValueV2(
+        const isOutsideDropdownOpen = useRecoilComponentValue(
          isDropdownOpenComponentState,
          outsideDropdownId,
        );

-        const isInsideDropdownOpen = useRecoilComponentValueV2(
+        const isInsideDropdownOpen = useRecoilComponentValue(
          isDropdownOpenComponentState,
        );

@@ -62,12 +62,12 @@ describe('useOpenDropdown', () => {
  it('should open dropdown from outside component instance context', async () => {
    const { result } = renderHook(
      () => {
-        const isOutsideDropdownOpen = useRecoilComponentValueV2(
+        const isOutsideDropdownOpen = useRecoilComponentValue(
          isDropdownOpenComponentState,
          outsideDropdownId,
        );

-        const isInsideDropdownOpen = useRecoilComponentValueV2(
+        const isInsideDropdownOpen = useRecoilComponentValue(
          isDropdownOpenComponentState,
        );

@@ -6,7 +6,7 @@ import { RecoilRoot } from 'recoil';
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useToggleDropdown } from '@/ui/layout/dropdown/hooks/useToggleDropdown';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';

 const dropdownId = 'test-dropdown-id';
 const outsideDropdownId = 'test-dropdown-id-outside';
@@ -30,12 +30,12 @@ describe('useToggleDropdown', () => {
  it('should toggle dropdown from inside component instance context', async () => {
    const { result } = renderHook(
      () => {
-        const isOutsideDropdownOpen = useRecoilComponentValueV2(
+        const isOutsideDropdownOpen = useRecoilComponentValue(
          isDropdownOpenComponentState,
          outsideDropdownId,
        );

-        const isInsideDropdownOpen = useRecoilComponentValueV2(
+        const isInsideDropdownOpen = useRecoilComponentValue(
          isDropdownOpenComponentState,
        );
        const { toggleDropdown } = useToggleDropdown();
@@ -75,12 +75,12 @@ describe('useToggleDropdown', () => {
  it('should toggle dropdown from outside component instance context', async () => {
    const { result } = renderHook(
      () => {
-        const isOutsideDropdownOpen = useRecoilComponentValueV2(
+        const isOutsideDropdownOpen = useRecoilComponentValue(
          isDropdownOpenComponentState,
          outsideDropdownId,
        );

-        const isInsideDropdownOpen = useRecoilComponentValueV2(
+        const isInsideDropdownOpen = useRecoilComponentValue(
          isDropdownOpenComponentState,
        );
        const { toggleDropdown } = useToggleDropdown();
@@ -1,10 +1,10 @@
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';

 import { Placement } from '@floating-ui/react';

 export const dropdownPlacementComponentState =
-  createComponentStateV2<Placement | null>({
+  createComponentState<Placement | null>({
    key: 'dropdownPlacementComponentState',
    componentInstanceContext: DropdownComponentInstanceContext,
    defaultValue: null,
@@ -1,7 +1,7 @@
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';

-export const dropdownMaxHeightComponentState = createComponentStateV2<
+export const dropdownMaxHeightComponentState = createComponentState<
  number | undefined
 >({
  key: 'dropdownMaxHeightComponentState',
@@ -1,7 +1,7 @@
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';

-export const dropdownMaxWidthComponentState = createComponentStateV2<
+export const dropdownMaxWidthComponentState = createComponentState<
  number | undefined
 >({
  key: 'dropdownMaxWidthComponentState',
@@ -1,7 +1,7 @@
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';

-export const isDropdownOpenComponentState = createComponentStateV2<boolean>({
+export const isDropdownOpenComponentState = createComponentState<boolean>({
  key: 'isDropdownOpenComponentState',
  defaultValue: false,
  componentInstanceContext: DropdownComponentInstanceContext,
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { ReactNode, useState } from 'react';
 import { useDebouncedCallback } from 'use-debounce';

-import { TextInput } from '@/ui/input/components/TextInput';
+import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';

 import { Modal, ModalVariants } from '@/ui/layout/modal/components/Modal';
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
@@ -129,7 +129,7 @@ export const ConfirmationModal = ({
      </StyledSection>
      {confirmationValue && (
        <Section>
-          <TextInput
+          <SettingsTextInput
            instanceId="confirmation-modal-input"
            dataTestId="confirmation-modal-input"
            value={inputConfirmationValue}
@@ -8,7 +8,7 @@ import { MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_ID } from '@/ui/layout/modal/cons
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
 import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -227,7 +227,7 @@ export const Modal = ({
    e.stopPropagation();
  };

-  const isModalOpened = useRecoilComponentValueV2(
+  const isModalOpened = useRecoilComponentValue(
    isModalOpenedComponentState,
    modalId,
  );
@@ -1,7 +1,7 @@
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
 import { ModalComponentInstanceContext } from '../contexts/ModalComponentInstanceContext';

-export const isModalOpenedComponentState = createComponentStateV2<boolean>({
+export const isModalOpenedComponentState = createComponentState<boolean>({
  key: 'isModalOpenedComponentState',
  defaultValue: false,
  componentInstanceContext: ModalComponentInstanceContext,
@@ -4,7 +4,7 @@ import { useSelectableListHotKeys } from '@/ui/layout/selectable-list/hooks/inte
 import { SelectableListComponentInstanceContext } from '@/ui/layout/selectable-list/states/contexts/SelectableListComponentInstanceContext';
 import { SelectableListContextProvider } from '@/ui/layout/selectable-list/states/contexts/SelectableListContext';
 import { selectableItemIdsComponentState } from '@/ui/layout/selectable-list/states/selectableItemIdsComponentState';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
 import { isDefined } from 'twenty-shared/utils';
 import { arrayToChunks } from '~/utils/array/arrayToChunks';

@@ -27,7 +27,7 @@ export const SelectableList = ({
 }: SelectableListProps) => {
  useSelectableListHotKeys(selectableListInstanceId, focusId, onSelect);

-  const setSelectableItemIds = useSetRecoilComponentStateV2(
+  const setSelectableItemIds = useSetRecoilComponentState(
    selectableItemIdsComponentState,
    selectableListInstanceId,
  );
@@ -2,7 +2,7 @@ import { ReactNode, useEffect, useRef } from 'react';

 import { SelectableListItemHotkeyEffect } from '@/ui/layout/selectable-list/components/SelectableListItemHotkeyEffect';
 import { isSelectedItemIdComponentFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector';
-import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
+import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
 import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';

@@ -25,7 +25,7 @@ export const SelectableListItem = ({
  children,
  onEnter,
 }: SelectableListItemProps) => {
-  const isSelectedItemId = useRecoilComponentFamilyValueV2(
+  const isSelectedItemId = useRecoilComponentFamilyValue(
    isSelectedItemIdComponentFamilySelector,
    itemId,
  );
@@ -5,8 +5,8 @@ import { RecoilRoot } from 'recoil';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { selectableItemIdsComponentState } from '@/ui/layout/selectable-list/states/selectableItemIdsComponentState';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';

 const selectableListComponentInstanceId = 'testId';
 const testArr = [['1'], ['2'], ['3']];
@@ -16,12 +16,12 @@ describe('useSelectableList', () => {
  it('Should setSelectableItemIds', async () => {
    const { result } = renderHook(
      () => {
-        const setSelectableItemIds = useSetRecoilComponentStateV2(
+        const setSelectableItemIds = useSetRecoilComponentState(
          selectableItemIdsComponentState,
          selectableListComponentInstanceId,
        );

-        const selectableItemIds = useRecoilComponentValueV2(
+        const selectableItemIds = useRecoilComponentValue(
          selectableItemIdsComponentState,
          selectableListComponentInstanceId,
        );
@@ -52,11 +52,11 @@ describe('useSelectableList', () => {
          selectableListComponentInstanceId,
        );

-        const selectedItemId = useRecoilComponentValueV2(
+        const selectedItemId = useRecoilComponentValue(
          selectedItemIdComponentState,
          selectableListComponentInstanceId,
        );
-        const setSelectedItemId = useSetRecoilComponentStateV2(
+        const setSelectedItemId = useSetRecoilComponentState(
          selectedItemIdComponentState,
          selectableListComponentInstanceId,
        );
@@ -1,9 +1,11 @@
 import { SelectableListComponentInstanceContext } from '@/ui/layout/selectable-list/states/contexts/SelectableListComponentInstanceContext';
-import { createComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilyStateV2';
+import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';

-export const isSelectedItemIdComponentFamilyState =
-  createComponentFamilyStateV2<boolean, string>({
-    key: 'isSelectedItemIdComponentFamilyState',
-    defaultValue: false,
-    componentInstanceContext: SelectableListComponentInstanceContext,
-  });
+export const isSelectedItemIdComponentFamilyState = createComponentFamilyState<
+  boolean,
+  string
+>({
+  key: 'isSelectedItemIdComponentFamilyState',
+  defaultValue: false,
+  componentInstanceContext: SelectableListComponentInstanceContext,
+});
@@ -1,10 +1,10 @@
 import { SelectableListComponentInstanceContext } from '@/ui/layout/selectable-list/states/contexts/SelectableListComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';

-export const selectableItemIdsComponentState = createComponentStateV2<
-  string[][]
->({
-  key: 'selectableItemIdsComponentState',
-  defaultValue: [[]],
-  componentInstanceContext: SelectableListComponentInstanceContext,
-});
+export const selectableItemIdsComponentState = createComponentState<string[][]>(
+  {
+    key: 'selectableItemIdsComponentState',
+    defaultValue: [[]],
+    componentInstanceContext: SelectableListComponentInstanceContext,
+  },
+);
@@ -1,10 +1,10 @@
 import { SelectableListComponentInstanceContext } from '@/ui/layout/selectable-list/states/contexts/SelectableListComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';

-export const selectedItemIdComponentState = createComponentStateV2<
-  string | null
->({
-  key: 'selectedItemIdComponentState',
-  defaultValue: null,
-  componentInstanceContext: SelectableListComponentInstanceContext,
-});
+export const selectedItemIdComponentState = createComponentState<string | null>(
+  {
+    key: 'selectedItemIdComponentState',
+    defaultValue: null,
+    componentInstanceContext: SelectableListComponentInstanceContext,
+  },
+);
@@ -1,9 +1,9 @@
 import { SelectableListComponentInstanceContext } from '@/ui/layout/selectable-list/states/contexts/SelectableListComponentInstanceContext';
 import { isSelectedItemIdComponentFamilyState } from '@/ui/layout/selectable-list/states/isSelectedItemIdComponentFamilyState';
-import { createComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilySelectorV2';
+import { createComponentFamilySelector } from '@/ui/utilities/state/component-state/utils/createComponentFamilySelector';

 export const isSelectedItemIdComponentFamilySelector =
-  createComponentFamilySelectorV2<boolean, string>({
+  createComponentFamilySelector<boolean, string>({
    key: 'isSelectedItemIdComponentFamilySelector',
    componentInstanceContext: SelectableListComponentInstanceContext,
    get:
@@ -16,7 +16,7 @@ import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/con
 import { SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import styled from '@emotion/styled';

 const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>`
@@ -77,7 +77,7 @@ export const ShowPageSubContainer = ({
    pageId: commandMenuPageComponentInstance?.instanceId,
    targetObjectId: targetableObject.id,
  });
-  const activeTabId = useRecoilComponentValueV2(
+  const activeTabId = useRecoilComponentValue(
    activeTabIdComponentState,
    tabListComponentId,
  );
@@ -6,7 +6,7 @@ import { TabListProps } from '@/ui/layout/tab-list/types/TabListProps';
 import { TabWidthsById } from '@/ui/layout/tab-list/types/TabWidthsById';
 import { calculateVisibleTabCount } from '@/ui/layout/tab-list/utils/calculateVisibleTabCount';
 import { NodeDimension } from '@/ui/utilities/dimensions/components/NodeDimension';
-import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
 import styled from '@emotion/styled';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -62,7 +62,7 @@ export const TabList = ({
  const visibleTabs = tabs.filter((tab) => !tab.hide);
  const navigate = useNavigate();

-  const [activeTabId, setActiveTabId] = useRecoilComponentStateV2(
+  const [activeTabId, setActiveTabId] = useRecoilComponentState(
    activeTabIdComponentState,
    componentInstanceId,
  );
@@ -1,6 +1,6 @@
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';

@@ -14,10 +14,8 @@ export const TabListFromUrlOptionalEffect = ({
  isInRightDrawer,
 }: TabListFromUrlOptionalEffectProps) => {
  const location = useLocation();
-  const activeTabId = useRecoilComponentValueV2(activeTabIdComponentState);
-  const setActiveTabId = useSetRecoilComponentStateV2(
-    activeTabIdComponentState,
-  );
+  const activeTabId = useRecoilComponentValue(activeTabIdComponentState);
+  const setActiveTabId = useSetRecoilComponentState(activeTabIdComponentState);

  const hash = location.hash.replace('#', '');

@@ -1,7 +1,7 @@
 import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/contexts/TabListComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';

-export const activeTabIdComponentState = createComponentStateV2<string | null>({
+export const activeTabIdComponentState = createComponentState<string | null>({
  key: 'activeTabIdComponentState',
  defaultValue: null,
  componentInstanceContext: TabListComponentInstanceContext,
@@ -1,4 +1,4 @@
-import { TextInputV2 } from '@/ui/input/components/TextInputV2';
+import { TextInput } from '@/ui/input/components/TextInput';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@@ -95,7 +95,7 @@ export const NavigationDrawerInput = ({
  };

  return (
-    <TextInputV2
+    <TextInput
      className={className}
      LeftIcon={Icon}
      ref={inputRef}
@@ -3,7 +3,7 @@ import { RecoilRoot } from 'recoil';

 import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
 import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';

 const componentId = 'componentId';

@@ -13,7 +13,7 @@ describe('useClickOutsideListener', () => {
      () => {
        return {
          useClickOutside: useClickOutsideListener(componentId),
-          isActivated: useRecoilComponentValueV2(
+          isActivated: useRecoilComponentValue(
            clickOutsideListenerIsActivatedComponentState,
            componentId,
          ),
@@ -2,17 +2,16 @@ import { useRecoilCallback } from 'recoil';

 import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
 import { clickOutsideListenerMouseDownHappenedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerMouseDownHappenedComponentState';
-import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';

 export const useClickOutsideListener = (instanceId: string) => {
-  const clickOutsideListenerIsActivatedState =
-    useRecoilComponentCallbackStateV2(
-      clickOutsideListenerIsActivatedComponentState,
-      instanceId,
-    );
+  const clickOutsideListenerIsActivatedState = useRecoilComponentCallbackState(
+    clickOutsideListenerIsActivatedComponentState,
+    instanceId,
+  );

  const clickOutsideListenerMouseDownHappenedState =
-    useRecoilComponentCallbackStateV2(
+    useRecoilComponentCallbackState(
      clickOutsideListenerMouseDownHappenedComponentState,
      instanceId,
    );
@@ -1,7 +1,7 @@
 import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
 import { clickOutsideListenerIsMouseDownInsideComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState';
 import { clickOutsideListenerMouseDownHappenedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerMouseDownHappenedComponentState';
-import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
 import React, { useEffect } from 'react';
 import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
@@ -24,17 +24,16 @@ export const useListenClickOutside = <T extends Element>({
  enabled = true,
 }: ClickOutsideListenerProps<T>) => {
  const clickOutsideListenerIsMouseDownInsideState =
-    useRecoilComponentCallbackStateV2(
+    useRecoilComponentCallbackState(
      clickOutsideListenerIsMouseDownInsideComponentState,
      listenerId,
    );
-  const clickOutsideListenerIsActivatedState =
-    useRecoilComponentCallbackStateV2(
-      clickOutsideListenerIsActivatedComponentState,
-      listenerId,
-    );
+  const clickOutsideListenerIsActivatedState = useRecoilComponentCallbackState(
+    clickOutsideListenerIsActivatedComponentState,
+    listenerId,
+  );
  const clickOutsideListenerMouseDownHappenedState =
-    useRecoilComponentCallbackStateV2(
+    useRecoilComponentCallbackState(
      clickOutsideListenerMouseDownHappenedComponentState,
      listenerId,
    );
@@ -1,8 +1,8 @@
 import { ClickOutsideListenerComponentInstanceContext } from '@/ui/utilities/pointer-event/states/contexts/ClickOutsideListenerComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';

 export const clickOutsideListenerIsActivatedComponentState =
-  createComponentStateV2<boolean>({
+  createComponentState<boolean>({
    key: 'clickOutsideListenerIsActivatedComponentState',
    defaultValue: true,
    componentInstanceContext: ClickOutsideListenerComponentInstanceContext,
@@ -1,8 +1,8 @@
 import { ClickOutsideListenerComponentInstanceContext } from '@/ui/utilities/pointer-event/states/contexts/ClickOutsideListenerComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';

 export const clickOutsideListenerIsMouseDownInsideComponentState =
-  createComponentStateV2<boolean>({
+  createComponentState<boolean>({
    key: 'clickOutsideListenerIsMouseDownInsideComponentState',
    defaultValue: false,
    componentInstanceContext: ClickOutsideListenerComponentInstanceContext,
@@ -1,8 +1,8 @@
 import { ClickOutsideListenerComponentInstanceContext } from '@/ui/utilities/pointer-event/states/contexts/ClickOutsideListenerComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';

 export const clickOutsideListenerMouseDownHappenedComponentState =
-  createComponentStateV2<boolean>({
+  createComponentState<boolean>({
    key: 'clickOutsideListenerMouseDownHappenedComponentState',
    defaultValue: false,
    componentInstanceContext: ClickOutsideListenerComponentInstanceContext,
@@ -5,7 +5,7 @@ import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/sta
 import { scrollWrapperScrollBottomComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollBottomComponentState';
 import { scrollWrapperScrollLeftComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollLeftComponentState';
 import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';

 const StyledScrollWrapper = styled.div`
  &.scroll-wrapper-x-enabled {
@@ -35,17 +35,17 @@ export const ScrollWrapper = ({
  defaultEnableXScroll = true,
  defaultEnableYScroll = true,
 }: ScrollWrapperProps) => {
-  const setScrollTop = useSetRecoilComponentStateV2(
+  const setScrollTop = useSetRecoilComponentState(
    scrollWrapperScrollTopComponentState,
    componentInstanceId,
  );

-  const setScrollLeft = useSetRecoilComponentStateV2(
+  const setScrollLeft = useSetRecoilComponentState(
    scrollWrapperScrollLeftComponentState,
    componentInstanceId,
  );

-  const setScrollBottom = useSetRecoilComponentStateV2(
+  const setScrollBottom = useSetRecoilComponentState(
    scrollWrapperScrollBottomComponentState,
    componentInstanceId,
  );
@@ -1,6 +1,6 @@
 import { SCROLL_RESTORATION_TOP_THRESHOLD_PX } from '@/ui/utilities/scroll/constants/ScrollRestorationTopThreshold';
 import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { isDefined } from 'twenty-shared/utils';
@@ -10,7 +10,7 @@ export const useScrollRestoration = (componentInstanceId: string) => {
  const storageKey = `scroll-${location.pathname}`;
  const [isRestoring, setIsRestoring] = useState(false);

-  const scrollTop = useRecoilComponentValueV2(
+  const scrollTop = useRecoilComponentValue(
    scrollWrapperScrollTopComponentState,
    componentInstanceId,
  );
@@ -1,8 +1,8 @@
 import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';

 export const scrollWrapperScrollBottomComponentState =
-  createComponentStateV2<number>({
+  createComponentState<number>({
    key: 'scrollWrapperScrollBottomComponentState',
    defaultValue: 0,
    componentInstanceContext: ScrollWrapperComponentInstanceContext,
@@ -1,8 +1,8 @@
 import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';

 export const scrollWrapperScrollLeftComponentState =
-  createComponentStateV2<number>({
+  createComponentState<number>({
    key: 'scrollWrapperScrollLeftComponentState',
    defaultValue: 0,
    componentInstanceContext: ScrollWrapperComponentInstanceContext,
@@ -1,8 +1,8 @@
 import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';

 export const scrollWrapperScrollTopComponentState =
-  createComponentStateV2<number>({
+  createComponentState<number>({
    key: 'scrollWrapperScrollTopComponentState',
    defaultValue: 0,
    componentInstanceContext: ScrollWrapperComponentInstanceContext,
@@ -1,69 +1,69 @@
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { ComponentFamilyReadOnlySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyReadOnlySelectorV2';
-import { ComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilySelectorV2';
-import { ComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateV2';
-import { ComponentReadOnlySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentReadOnlySelectorV2';
-import { ComponentSelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentSelectorV2';
-import { ComponentStateV2 } from '@/ui/utilities/state/component-state/types/ComponentStateV2';
+import { ComponentFamilyReadOnlySelector } from '@/ui/utilities/state/component-state/types/ComponentFamilyReadOnlySelector';
+import { ComponentFamilySelector } from '@/ui/utilities/state/component-state/types/ComponentFamilySelector';
+import { ComponentFamilyState } from '@/ui/utilities/state/component-state/types/ComponentFamilyState';
+import { ComponentReadOnlySelector } from '@/ui/utilities/state/component-state/types/ComponentReadOnlySelector';
+import { ComponentSelector } from '@/ui/utilities/state/component-state/types/ComponentSelector';
+import { ComponentState } from '@/ui/utilities/state/component-state/types/ComponentState';
 import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
 import { RecoilState, RecoilValueReadOnly, SerializableParam } from 'recoil';

-export function useRecoilComponentCallbackStateV2<ValueType>(
-  componentState: ComponentStateV2<ValueType>,
+export function useRecoilComponentCallbackState<ValueType>(
+  componentState: ComponentState<ValueType>,
  instanceIdFromProps?: string,
 ): RecoilState<ValueType>;
-export function useRecoilComponentCallbackStateV2<ValueType>(
-  componentSelector: ComponentSelectorV2<ValueType>,
+export function useRecoilComponentCallbackState<ValueType>(
+  componentSelector: ComponentSelector<ValueType>,
  instanceIdFromProps?: string,
 ): RecoilState<ValueType>;
-export function useRecoilComponentCallbackStateV2<ValueType>(
-  componentReadOnlySelector: ComponentReadOnlySelectorV2<ValueType>,
+export function useRecoilComponentCallbackState<ValueType>(
+  componentReadOnlySelector: ComponentReadOnlySelector<ValueType>,
  instanceIdFromProps?: string,
 ): RecoilValueReadOnly<ValueType>;
-export function useRecoilComponentCallbackStateV2<
+export function useRecoilComponentCallbackState<
  ValueType,
  FamilyKey extends SerializableParam,
 >(
-  componentFamilyState: ComponentFamilyStateV2<ValueType, FamilyKey>,
+  componentFamilyState: ComponentFamilyState<ValueType, FamilyKey>,
  instanceIdFromProps?: string,
 ): (familyKey: FamilyKey) => RecoilState<ValueType>;
-export function useRecoilComponentCallbackStateV2<
+export function useRecoilComponentCallbackState<
  ValueType,
  FamilyKey extends SerializableParam,
 >(
-  componentFamilySelector: ComponentFamilySelectorV2<ValueType, FamilyKey>,
+  componentFamilySelector: ComponentFamilySelector<ValueType, FamilyKey>,
  instanceIdFromProps?: string,
 ): (familyKey: FamilyKey) => RecoilState<ValueType>;
-export function useRecoilComponentCallbackStateV2<
+export function useRecoilComponentCallbackState<
  ValueType,
  FamilyKey extends SerializableParam,
 >(
-  componentFamilyReadOnlySelector: ComponentFamilyReadOnlySelectorV2<
+  componentFamilyReadOnlySelector: ComponentFamilyReadOnlySelector<
    ValueType,
    FamilyKey
  >,
  instanceIdFromProps?: string,
 ): (familyKey: FamilyKey) => RecoilValueReadOnly<ValueType>;
-export function useRecoilComponentCallbackStateV2<
+export function useRecoilComponentCallbackState<
  ValueType,
  FamilyKey extends SerializableParam,
 >(
-  componentFamilyState: ComponentFamilyStateV2<ValueType, FamilyKey>,
+  componentFamilyState: ComponentFamilyState<ValueType, FamilyKey>,
  instanceIdFromProps?: string,
 ): (familyKey: FamilyKey) => RecoilState<ValueType>;
-export function useRecoilComponentCallbackStateV2<
-  ComponentState extends
-    | ComponentStateV2<ValueType>
-    | ComponentSelectorV2<ValueType>
-    | ComponentReadOnlySelectorV2<ValueType>
-    | ComponentFamilyStateV2<ValueType, FamilyKey>
-    | ComponentFamilySelectorV2<ValueType, FamilyKey>
-    | ComponentFamilyReadOnlySelectorV2<ValueType, FamilyKey>,
+export function useRecoilComponentCallbackState<
+  InferedComponentState extends
+    | ComponentState<ValueType>
+    | ComponentSelector<ValueType>
+    | ComponentReadOnlySelector<ValueType>
+    | ComponentFamilyState<ValueType, FamilyKey>
+    | ComponentFamilySelector<ValueType, FamilyKey>
+    | ComponentFamilyReadOnlySelector<ValueType, FamilyKey>,
  ValueType,
  FamilyKey extends SerializableParam = never,
 >(
-  componentState: ComponentState,
+  componentState: InferedComponentState,
  instanceIdFromProps?: string,
 ):
  | RecoilState<ValueType>
@@ -1,48 +1,48 @@
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { ComponentFamilyReadOnlySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyReadOnlySelectorV2';
-import { ComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilySelectorV2';
-import { ComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateV2';
+import { ComponentFamilyReadOnlySelector } from '@/ui/utilities/state/component-state/types/ComponentFamilyReadOnlySelector';
+import { ComponentFamilySelector } from '@/ui/utilities/state/component-state/types/ComponentFamilySelector';
+import { ComponentFamilyState } from '@/ui/utilities/state/component-state/types/ComponentFamilyState';
 import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
 import { useCallback } from 'react';
 import { RecoilState, RecoilValueReadOnly, SerializableParam } from 'recoil';

-export function useRecoilComponentFamilyCallbackStateV2<
+export function useRecoilComponentFamilyCallbackState<
  ValueType,
  FamilyKey extends SerializableParam,
 >(
-  componentFamilyState: ComponentFamilyStateV2<ValueType, FamilyKey>,
+  componentFamilyState: ComponentFamilyState<ValueType, FamilyKey>,
  instanceIdFromProps?: string,
 ): (familyKey: FamilyKey) => RecoilState<ValueType>;
-export function useRecoilComponentFamilyCallbackStateV2<
+export function useRecoilComponentFamilyCallbackState<
  ValueType,
  FamilyKey extends SerializableParam,
 >(
-  componentFamilySelector: ComponentFamilySelectorV2<ValueType, FamilyKey>,
+  componentFamilySelector: ComponentFamilySelector<ValueType, FamilyKey>,
  instanceIdFromProps?: string,
 ): (familyKey: FamilyKey) => RecoilState<ValueType>;
-export function useRecoilComponentFamilyCallbackStateV2<
+export function useRecoilComponentFamilyCallbackState<
  ValueType,
  FamilyKey extends SerializableParam,
 >(
-  componentFamilyReadOnlySelector: ComponentFamilyReadOnlySelectorV2<
+  componentFamilyReadOnlySelector: ComponentFamilyReadOnlySelector<
    ValueType,
    FamilyKey
  >,
  instanceIdFromProps?: string,
 ): (familyKey: FamilyKey) => RecoilValueReadOnly<ValueType>;
-export function useRecoilComponentFamilyCallbackStateV2<
+export function useRecoilComponentFamilyCallbackState<
  ValueType,
  FamilyKey extends SerializableParam,
 >(
-  componentFamilyState: ComponentFamilyStateV2<ValueType, FamilyKey>,
+  componentFamilyState: ComponentFamilyState<ValueType, FamilyKey>,
  instanceIdFromProps?: string,
 ): (familyKey: FamilyKey) => RecoilState<ValueType>;
-export function useRecoilComponentFamilyCallbackStateV2<
+export function useRecoilComponentFamilyCallbackState<
  ComponentState extends
-    | ComponentFamilyStateV2<ValueType, FamilyKey>
-    | ComponentFamilySelectorV2<ValueType, FamilyKey>
-    | ComponentFamilyReadOnlySelectorV2<ValueType, FamilyKey>,
+    | ComponentFamilyState<ValueType, FamilyKey>
+    | ComponentFamilySelector<ValueType, FamilyKey>
+    | ComponentFamilyReadOnlySelector<ValueType, FamilyKey>,
  ValueType,
  FamilyKey extends SerializableParam = never,
 >(
@@ -1,16 +1,16 @@
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { ComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilySelectorV2';
-import { ComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateV2';
+import { ComponentFamilySelector } from '@/ui/utilities/state/component-state/types/ComponentFamilySelector';
+import { ComponentFamilyState } from '@/ui/utilities/state/component-state/types/ComponentFamilyState';
 import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
 import { SerializableParam, useRecoilState } from 'recoil';

-export const useRecoilComponentFamilyStateV2 = <
+export const useRecoilComponentFamilyState = <
  StateType,
  FamilyKey extends SerializableParam,
 >(
  componentState:
-    | ComponentFamilyStateV2<StateType, FamilyKey>
-    | ComponentFamilySelectorV2<StateType, FamilyKey>,
+    | ComponentFamilyState<StateType, FamilyKey>
+    | ComponentFamilySelector<StateType, FamilyKey>,
  familyKey: FamilyKey,
  instanceIdFromProps?: string,
 ) => {
@@ -1,29 +1,29 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { ComponentFamilyReadOnlySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyReadOnlySelectorV2';
-import { ComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilySelectorV2';
-import { ComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateV2';
+import { ComponentFamilyReadOnlySelector } from '@/ui/utilities/state/component-state/types/ComponentFamilyReadOnlySelector';
+import { ComponentFamilySelector } from '@/ui/utilities/state/component-state/types/ComponentFamilySelector';
+import { ComponentFamilyState } from '@/ui/utilities/state/component-state/types/ComponentFamilyState';
 import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
 import { SerializableParam, useRecoilValue } from 'recoil';

-export const useRecoilComponentFamilyValueV2 = <
+export const useRecoilComponentFamilyValue = <
  StateType,
  FamilyKey extends SerializableParam,
 >(
-  componentStateV2:
-    | ComponentFamilyStateV2<StateType, FamilyKey>
-    | ComponentFamilySelectorV2<StateType, FamilyKey>
-    | ComponentFamilyReadOnlySelectorV2<StateType, FamilyKey>,
+  componentState:
+    | ComponentFamilyState<StateType, FamilyKey>
+    | ComponentFamilySelector<StateType, FamilyKey>
+    | ComponentFamilyReadOnlySelector<StateType, FamilyKey>,
  familyKey: FamilyKey,
  instanceIdFromProps?: string,
 ): StateType => {
  const instanceContext = globalComponentInstanceContextMap.get(
-    componentStateV2.key,
+    componentState.key,
  );

  if (!instanceContext) {
    throw new Error(
-      `Instance context for key "${componentStateV2.key}" is not defined`,
+      `Instance context for key "${componentState.key}" is not defined`,
    );
  }

@@ -32,20 +32,20 @@ export const useRecoilComponentFamilyValueV2 = <
    instanceIdFromProps,
  );

-  switch (componentStateV2.type) {
+  switch (componentState.type) {
    case 'ComponentFamilyState': {
      return useRecoilValue(
-        componentStateV2.atomFamily({ familyKey, instanceId }),
+        componentState.atomFamily({ familyKey, instanceId }),
      );
    }
    case 'ComponentFamilySelector': {
      return useRecoilValue(
-        componentStateV2.selectorFamily({ familyKey, instanceId }),
+        componentState.selectorFamily({ familyKey, instanceId }),
      );
    }
    case 'ComponentFamilyReadOnlySelector': {
      return useRecoilValue(
-        componentStateV2.selectorFamily({ familyKey, instanceId }),
+        componentState.selectorFamily({ familyKey, instanceId }),
      );
    }
  }
@@ -1,10 +1,10 @@
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { ComponentStateV2 } from '@/ui/utilities/state/component-state/types/ComponentStateV2';
+import { ComponentState } from '@/ui/utilities/state/component-state/types/ComponentState';
 import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
 import { useRecoilState } from 'recoil';

-export const useRecoilComponentStateV2 = <StateType>(
-  componentState: ComponentStateV2<StateType>,
+export const useRecoilComponentState = <StateType>(
+  componentState: ComponentState<StateType>,
  instanceIdFromProps?: string,
 ) => {
  const componentInstanceContext = globalComponentInstanceContextMap.get(
@@ -0,0 +1,44 @@
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { ComponentReadOnlySelector } from '@/ui/utilities/state/component-state/types/ComponentReadOnlySelector';
+import { ComponentSelector } from '@/ui/utilities/state/component-state/types/ComponentSelector';
+import { ComponentState } from '@/ui/utilities/state/component-state/types/ComponentState';
+import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
+import { RecoilState, RecoilValueReadOnly, useRecoilValue } from 'recoil';
+
+export const useRecoilComponentValue = <StateType>(
+  componentState:
+    | ComponentState<StateType>
+    | ComponentSelector<StateType>
+    | ComponentReadOnlySelector<StateType>,
+  instanceIdFromProps?: string,
+) => {
+  const instanceContext = globalComponentInstanceContextMap.get(
+    componentState.key,
+  );
+
+  if (!instanceContext) {
+    throw new Error(
+      `Instance context for key "${componentState.key}" is not defined`,
+    );
+  }
+
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    instanceContext,
+    instanceIdFromProps,
+  );
+
+  let state: RecoilState<StateType> | RecoilValueReadOnly<StateType>;
+
+  if (componentState.type === 'ComponentState') {
+    state = componentState.atomFamily({ instanceId });
+  } else if (
+    componentState.type === 'ComponentSelector' ||
+    componentState.type === 'ComponentReadOnlySelector'
+  ) {
+    state = componentState.selectorFamily({ instanceId });
+  } else {
+    throw new Error('Invalid component state type');
+  }
+
+  return useRecoilValue(state);
+};
@@ -1,44 +0,0 @@
-import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { ComponentReadOnlySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentReadOnlySelectorV2';
-import { ComponentSelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentSelectorV2';
-import { ComponentStateV2 } from '@/ui/utilities/state/component-state/types/ComponentStateV2';
-import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
-import { RecoilState, RecoilValueReadOnly, useRecoilValue } from 'recoil';
-
-export const useRecoilComponentValueV2 = <StateType>(
-  componentStateV2:
-    | ComponentStateV2<StateType>
-    | ComponentSelectorV2<StateType>
-    | ComponentReadOnlySelectorV2<StateType>,
-  instanceIdFromProps?: string,
-) => {
-  const instanceContext = globalComponentInstanceContextMap.get(
-    componentStateV2.key,
-  );
-
-  if (!instanceContext) {
-    throw new Error(
-      `Instance context for key "${componentStateV2.key}" is not defined`,
-    );
-  }
-
-  const instanceId = useAvailableComponentInstanceIdOrThrow(
-    instanceContext,
-    instanceIdFromProps,
-  );
-
-  let state: RecoilState<StateType> | RecoilValueReadOnly<StateType>;
-
-  if (componentStateV2.type === 'ComponentState') {
-    state = componentStateV2.atomFamily({ instanceId });
-  } else if (
-    componentStateV2.type === 'ComponentSelector' ||
-    componentStateV2.type === 'ComponentReadOnlySelector'
-  ) {
-    state = componentStateV2.selectorFamily({ instanceId });
-  } else {
-    throw new Error('Invalid component state type');
-  }
-
-  return useRecoilValue(state);
-};
@@ -4,18 +4,18 @@
 //   because a component state cannot change its type during its lifecycle

 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { ComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilySelectorV2';
-import { ComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateV2';
+import { ComponentFamilySelector } from '@/ui/utilities/state/component-state/types/ComponentFamilySelector';
+import { ComponentFamilyState } from '@/ui/utilities/state/component-state/types/ComponentFamilyState';
 import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
 import { SerializableParam, SetterOrUpdater, useSetRecoilState } from 'recoil';

-export const useSetRecoilComponentFamilyStateV2 = <
+export const useSetRecoilComponentFamilyState = <
  StateType,
  FamilyKey extends SerializableParam,
 >(
  componentState:
-    | ComponentFamilyStateV2<StateType, FamilyKey>
-    | ComponentFamilySelectorV2<StateType, FamilyKey>,
+    | ComponentFamilyState<StateType, FamilyKey>
+    | ComponentFamilySelector<StateType, FamilyKey>,
  familyKey: FamilyKey,
  instanceIdFromProps?: string,
 ): SetterOrUpdater<StateType> => {
@@ -1,10 +1,10 @@
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { ComponentStateV2 } from '@/ui/utilities/state/component-state/types/ComponentStateV2';
+import { ComponentState } from '@/ui/utilities/state/component-state/types/ComponentState';
 import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
 import { SetterOrUpdater, useSetRecoilState } from 'recoil';

-export const useSetRecoilComponentStateV2 = <ValueType>(
-  componentState: ComponentStateV2<ValueType>,
+export const useSetRecoilComponentState = <ValueType>(
+  componentState: ComponentState<ValueType>,
  instanceIdFromProps?: string,
 ): SetterOrUpdater<ValueType> => {
  const componentInstanceContext = globalComponentInstanceContextMap.get(
@@ -0,0 +1,14 @@
+import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey';
+import { ComponentStateType } from '@/ui/utilities/state/component-state/types/ComponentStateType';
+import { RecoilValueReadOnly, SerializableParam } from 'recoil';
+
+export type ComponentFamilyReadOnlySelector<
+  StateType,
+  FamilyKey extends SerializableParam,
+> = {
+  type: Extract<ComponentStateType, 'ComponentFamilyReadOnlySelector'>;
+  key: string;
+  selectorFamily: (
+    componentFamilyStateKey: ComponentFamilyStateKey<FamilyKey>,
+  ) => RecoilValueReadOnly<StateType>;
+};
@@ -1,14 +0,0 @@
-import { ComponentFamilyStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2';
-import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
-import { RecoilValueReadOnly, SerializableParam } from 'recoil';
-
-export type ComponentFamilyReadOnlySelectorV2<
-  StateType,
-  FamilyKey extends SerializableParam,
-> = {
-  type: Extract<ComponentStateTypeV2, 'ComponentFamilyReadOnlySelector'>;
-  key: string;
-  selectorFamily: (
-    componentFamilyStateKey: ComponentFamilyStateKeyV2<FamilyKey>,
-  ) => RecoilValueReadOnly<StateType>;
-};
@@ -0,0 +1,14 @@
+import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey';
+import { ComponentStateType } from '@/ui/utilities/state/component-state/types/ComponentStateType';
+import { RecoilState, SerializableParam } from 'recoil';
+
+export type ComponentFamilySelector<
+  StateType,
+  FamilyKey extends SerializableParam,
+> = {
+  type: Extract<ComponentStateType, 'ComponentFamilySelector'>;
+  key: string;
+  selectorFamily: (
+    componentFamilyStateKey: ComponentFamilyStateKey<FamilyKey>,
+  ) => RecoilState<StateType>;
+};
@@ -1,14 +0,0 @@
-import { ComponentFamilyStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2';
-import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
-import { RecoilState, SerializableParam } from 'recoil';
-
-export type ComponentFamilySelectorV2<
-  StateType,
-  FamilyKey extends SerializableParam,
-> = {
-  type: Extract<ComponentStateTypeV2, 'ComponentFamilySelector'>;
-  key: string;
-  selectorFamily: (
-    componentFamilyStateKey: ComponentFamilyStateKeyV2<FamilyKey>,
-  ) => RecoilState<StateType>;
-};
@@ -0,0 +1,14 @@
+import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey';
+import { ComponentStateType } from '@/ui/utilities/state/component-state/types/ComponentStateType';
+import { RecoilState, SerializableParam } from 'recoil';
+
+export type ComponentFamilyState<
+  StateType,
+  FamilyKey extends SerializableParam,
+> = {
+  type: Extract<ComponentStateType, 'ComponentFamilyState'>;
+  key: string;
+  atomFamily: (
+    componentFamilyStateKey: ComponentFamilyStateKey<FamilyKey>,
+  ) => RecoilState<StateType>;
+};
@@ -0,0 +1,7 @@
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+import { SerializableParam } from 'recoil';
+
+export type ComponentFamilyStateKey<FamilyKey extends SerializableParam> =
+  ComponentStateKey & {
+    familyKey: FamilyKey;
+  };
@@ -1,7 +0,0 @@
-import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
-import { SerializableParam } from 'recoil';
-
-export type ComponentFamilyStateKeyV2<FamilyKey extends SerializableParam> =
-  ComponentStateKeyV2 & {
-    familyKey: FamilyKey;
-  };
@@ -1,14 +0,0 @@
-import { ComponentFamilyStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2';
-import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
-import { RecoilState, SerializableParam } from 'recoil';
-
-export type ComponentFamilyStateV2<
-  StateType,
-  FamilyKey extends SerializableParam,
-> = {
-  type: Extract<ComponentStateTypeV2, 'ComponentFamilyState'>;
-  key: string;
-  atomFamily: (
-    componentFamilyStateKey: ComponentFamilyStateKeyV2<FamilyKey>,
-  ) => RecoilState<StateType>;
-};
@@ -0,0 +1,11 @@
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+import { ComponentStateType } from '@/ui/utilities/state/component-state/types/ComponentStateType';
+import { RecoilValueReadOnly } from 'recoil';
+
+export type ComponentReadOnlySelector<StateType> = {
+  type: Extract<ComponentStateType, 'ComponentReadOnlySelector'>;
+  key: string;
+  selectorFamily: (
+    componentStateKey: ComponentStateKey,
+  ) => RecoilValueReadOnly<StateType>;
+};
@@ -1,11 +0,0 @@
-import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
-import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
-import { RecoilValueReadOnly } from 'recoil';
-
-export type ComponentReadOnlySelectorV2<StateType> = {
-  type: Extract<ComponentStateTypeV2, 'ComponentReadOnlySelector'>;
-  key: string;
-  selectorFamily: (
-    componentStateKey: ComponentStateKeyV2,
-  ) => RecoilValueReadOnly<StateType>;
-};
@@ -0,0 +1,11 @@
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+import { ComponentStateType } from '@/ui/utilities/state/component-state/types/ComponentStateType';
+import { RecoilState } from 'recoil';
+
+export type ComponentSelector<StateType> = {
+  type: Extract<ComponentStateType, 'ComponentSelector'>;
+  key: string;
+  selectorFamily: (
+    componentStateKey: ComponentStateKey,
+  ) => RecoilState<StateType>;
+};
@@ -1,11 +0,0 @@
-import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
-import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
-import { RecoilState } from 'recoil';
-
-export type ComponentSelectorV2<StateType> = {
-  type: Extract<ComponentStateTypeV2, 'ComponentSelector'>;
-  key: string;
-  selectorFamily: (
-    componentStateKey: ComponentStateKeyV2,
-  ) => RecoilState<StateType>;
-};
@@ -0,0 +1,9 @@
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+import { ComponentStateType } from '@/ui/utilities/state/component-state/types/ComponentStateType';
+import { RecoilState } from 'recoil';
+
+export type ComponentState<StateType> = {
+  type: Extract<ComponentStateType, 'ComponentState'>;
+  key: string;
+  atomFamily: (componentStateKey: ComponentStateKey) => RecoilState<StateType>;
+};
@@ -0,0 +1,3 @@
+export type ComponentStateKey = {
+  instanceId: string;
+};
@@ -1,3 +0,0 @@
-export type ComponentStateKeyV2 = {
-  instanceId: string;
-};
@@ -1,4 +1,4 @@
-export type ComponentStateTypeV2 =
+export type ComponentStateType =
  | 'ComponentState'
  | 'ComponentFamilyState'
  | 'ComponentSelector'
@@ -1,11 +0,0 @@
-import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
-import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
-import { RecoilState } from 'recoil';
-
-export type ComponentStateV2<StateType> = {
-  type: Extract<ComponentStateTypeV2, 'ComponentState'>;
-  key: string;
-  atomFamily: (
-    componentStateKey: ComponentStateKeyV2,
-  ) => RecoilState<StateType>;
-};
@@ -1,36 +1,36 @@
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
 import { selectorFamily, SerializableParam } from 'recoil';

-import { ComponentFamilyReadOnlySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyReadOnlySelectorV2';
-import { ComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilySelectorV2';
-import { ComponentFamilyStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2';
+import { ComponentFamilyReadOnlySelector } from '@/ui/utilities/state/component-state/types/ComponentFamilyReadOnlySelector';
+import { ComponentFamilySelector } from '@/ui/utilities/state/component-state/types/ComponentFamilySelector';
+import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey';
 import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
 import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
 import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter';
 import { SelectorSetter } from '@/ui/utilities/state/types/SelectorSetter';
 import { isDefined } from 'twenty-shared/utils';

-export function createComponentFamilySelectorV2<
+export function createComponentFamilySelector<
  ValueType,
  FamilyKey extends SerializableParam,
 >(options: {
  key: string;
-  get: SelectorGetter<ValueType, ComponentFamilyStateKeyV2<FamilyKey>>;
+  get: SelectorGetter<ValueType, ComponentFamilyStateKey<FamilyKey>>;
  set?: never;
  componentInstanceContext: ComponentInstanceStateContext<any> | null;
-}): ComponentFamilyReadOnlySelectorV2<ValueType, FamilyKey>;
+}): ComponentFamilyReadOnlySelector<ValueType, FamilyKey>;

-export function createComponentFamilySelectorV2<
+export function createComponentFamilySelector<
  ValueType,
  FamilyKey extends SerializableParam,
 >(options: {
  key: string;
-  get: SelectorGetter<ValueType, ComponentFamilyStateKeyV2<FamilyKey>>;
-  set: SelectorSetter<ValueType, ComponentFamilyStateKeyV2<FamilyKey>>;
+  get: SelectorGetter<ValueType, ComponentFamilyStateKey<FamilyKey>>;
+  set: SelectorSetter<ValueType, ComponentFamilyStateKey<FamilyKey>>;
  componentInstanceContext: ComponentInstanceStateContext<any> | null;
-}): ComponentFamilySelectorV2<ValueType, FamilyKey>;
+}): ComponentFamilySelector<ValueType, FamilyKey>;

-export function createComponentFamilySelectorV2<
+export function createComponentFamilySelector<
  ValueType,
  FamilyKey extends SerializableParam,
 >({
@@ -40,12 +40,12 @@ export function createComponentFamilySelectorV2<
  componentInstanceContext,
 }: {
  key: string;
-  get: SelectorGetter<ValueType, ComponentFamilyStateKeyV2<FamilyKey>>;
-  set?: SelectorSetter<ValueType, ComponentFamilyStateKeyV2<FamilyKey>>;
+  get: SelectorGetter<ValueType, ComponentFamilyStateKey<FamilyKey>>;
+  set?: SelectorSetter<ValueType, ComponentFamilyStateKey<FamilyKey>>;
  componentInstanceContext: ComponentInstanceStateContext<any> | null;
 }):
-  | ComponentFamilySelectorV2<ValueType, FamilyKey>
-  | ComponentFamilyReadOnlySelectorV2<ValueType, FamilyKey> {
+  | ComponentFamilySelector<ValueType, FamilyKey>
+  | ComponentFamilyReadOnlySelector<ValueType, FamilyKey> {
  if (isDefined(componentInstanceContext)) {
    globalComponentInstanceContextMap.set(key, componentInstanceContext);
  }
@@ -56,24 +56,24 @@ export function createComponentFamilySelectorV2<
      key,
      selectorFamily: selectorFamily<
        ValueType,
-        ComponentFamilyStateKeyV2<FamilyKey>
+        ComponentFamilyStateKey<FamilyKey>
      >({
        key,
        get,
        set,
      }),
-    } satisfies ComponentFamilySelectorV2<ValueType, FamilyKey>;
+    } satisfies ComponentFamilySelector<ValueType, FamilyKey>;
  } else {
    return {
      type: 'ComponentFamilyReadOnlySelector',
      key,
      selectorFamily: selectorFamily<
        ValueType,
-        ComponentFamilyStateKeyV2<FamilyKey>
+        ComponentFamilyStateKey<FamilyKey>
      >({
        key,
        get,
      }),
-    } satisfies ComponentFamilyReadOnlySelectorV2<ValueType, FamilyKey>;
+    } satisfies ComponentFamilyReadOnlySelector<ValueType, FamilyKey>;
  }
 }
@@ -1,5 +1,5 @@
-import { ComponentFamilyStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2';
-import { ComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateV2';
+import { ComponentFamilyState } from '@/ui/utilities/state/component-state/types/ComponentFamilyState';
+import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey';
 import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
 import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
 import {
@@ -20,7 +20,7 @@ type CreateComponentFamilyStateArgs<
  defaultValue:
    | ValueType
    | ((
-        param: ComponentFamilyStateKeyV2<FamilyKey>,
+        param: ComponentFamilyStateKey<FamilyKey>,
      ) =>
        | ValueType
        | RecoilValue<ValueType>
@@ -31,11 +31,11 @@ type CreateComponentFamilyStateArgs<
  effects?:
    | AtomEffect<ValueType>[]
    | ((
-        param: ComponentFamilyStateKeyV2<FamilyKey>,
+        param: ComponentFamilyStateKey<FamilyKey>,
      ) => ReadonlyArray<AtomEffect<ValueType>>);
 };

-export const createComponentFamilyStateV2 = <
+export const createComponentFamilyState = <
  ValueType,
  FamilyKey extends SerializableParam,
 >({
@@ -43,10 +43,10 @@ export const createComponentFamilyStateV2 = <
  effects,
  defaultValue,
  componentInstanceContext,
-}: CreateComponentFamilyStateArgs<
+}: CreateComponentFamilyStateArgs<ValueType, FamilyKey>): ComponentFamilyState<
  ValueType,
  FamilyKey
->): ComponentFamilyStateV2<ValueType, FamilyKey> => {
+> => {
  if (isDefined(componentInstanceContext)) {
    globalComponentInstanceContextMap.set(key, componentInstanceContext);
  }
@@ -54,10 +54,10 @@ export const createComponentFamilyStateV2 = <
  return {
    type: 'ComponentFamilyState',
    key,
-    atomFamily: atomFamily<ValueType, ComponentFamilyStateKeyV2<FamilyKey>>({
+    atomFamily: atomFamily<ValueType, ComponentFamilyStateKey<FamilyKey>>({
      key,
      default: defaultValue,
      effects,
    }),
-  } satisfies ComponentFamilyStateV2<ValueType, FamilyKey>;
+  } satisfies ComponentFamilyState<ValueType, FamilyKey>;
 };
@@ -1,9 +1,9 @@
 import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
-import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
 import { createContext } from 'react';

 export const createComponentInstanceContext = <
-  T extends ComponentStateKeyV2 = ComponentStateKeyV2,
+  T extends ComponentStateKey = ComponentStateKey,
 >(
  initialValue?: T,
 ) => {
@@ -2,39 +2,39 @@
 import { selectorFamily } from 'recoil';

 import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
-import { ComponentReadOnlySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentReadOnlySelectorV2';
-import { ComponentSelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentSelectorV2';
-import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
+import { ComponentReadOnlySelector } from '@/ui/utilities/state/component-state/types/ComponentReadOnlySelector';
+import { ComponentSelector } from '@/ui/utilities/state/component-state/types/ComponentSelector';
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
 import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
 import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter';
 import { SelectorSetter } from '@/ui/utilities/state/types/SelectorSetter';
 import { isDefined } from 'twenty-shared/utils';

-export function createComponentSelectorV2<ValueType>(options: {
+export function createComponentSelector<ValueType>(options: {
  key: string;
-  get: SelectorGetter<ValueType, ComponentStateKeyV2>;
+  get: SelectorGetter<ValueType, ComponentStateKey>;
  set?: never;
  componentInstanceContext: ComponentInstanceStateContext<any> | null;
-}): ComponentReadOnlySelectorV2<ValueType>;
+}): ComponentReadOnlySelector<ValueType>;

-export function createComponentSelectorV2<ValueType>(options: {
+export function createComponentSelector<ValueType>(options: {
  key: string;
-  get: SelectorGetter<ValueType, ComponentStateKeyV2>;
-  set: SelectorSetter<ValueType, ComponentStateKeyV2>;
+  get: SelectorGetter<ValueType, ComponentStateKey>;
+  set: SelectorSetter<ValueType, ComponentStateKey>;
  componentInstanceContext: ComponentInstanceStateContext<any> | null;
-}): ComponentSelectorV2<ValueType>;
+}): ComponentSelector<ValueType>;

-export function createComponentSelectorV2<ValueType>({
+export function createComponentSelector<ValueType>({
  key,
  get,
  set,
  componentInstanceContext,
 }: {
  key: string;
-  get: SelectorGetter<ValueType, ComponentStateKeyV2>;
-  set?: SelectorSetter<ValueType, ComponentStateKeyV2>;
+  get: SelectorGetter<ValueType, ComponentStateKey>;
+  set?: SelectorSetter<ValueType, ComponentStateKey>;
  componentInstanceContext: ComponentInstanceStateContext<any> | null;
-}): ComponentSelectorV2<ValueType> | ComponentReadOnlySelectorV2<ValueType> {
+}): ComponentSelector<ValueType> | ComponentReadOnlySelector<ValueType> {
  if (isDefined(componentInstanceContext)) {
    globalComponentInstanceContextMap.set(key, componentInstanceContext);
  }
@@ -43,20 +43,20 @@ export function createComponentSelectorV2<ValueType>({
    return {
      type: 'ComponentSelector',
      key,
-      selectorFamily: selectorFamily<ValueType, ComponentStateKeyV2>({
+      selectorFamily: selectorFamily<ValueType, ComponentStateKey>({
        key,
        get,
        set,
      }),
-    } satisfies ComponentSelectorV2<ValueType>;
+    } satisfies ComponentSelector<ValueType>;
  } else {
    return {
      type: 'ComponentReadOnlySelector',
      key,
-      selectorFamily: selectorFamily<ValueType, ComponentStateKeyV2>({
+      selectorFamily: selectorFamily<ValueType, ComponentStateKey>({
        key,
        get,
      }),
-    } satisfies ComponentReadOnlySelectorV2<ValueType>;
+    } satisfies ComponentReadOnlySelector<ValueType>;
  }
 }
@@ -1,6 +1,6 @@
 import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
-import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
-import { ComponentStateV2 } from '@/ui/utilities/state/component-state/types/ComponentStateV2';
+import { ComponentState } from '@/ui/utilities/state/component-state/types/ComponentState';
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
 import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
 import { AtomEffect, atomFamily } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
@@ -12,12 +12,12 @@ type CreateComponentInstanceStateArgs<ValueType> = {
  effects?: AtomEffect<ValueType>[];
 };

-export const createComponentStateV2 = <ValueType>({
+export const createComponentState = <ValueType>({
  key,
  defaultValue,
  componentInstanceContext,
  effects,
-}: CreateComponentInstanceStateArgs<ValueType>): ComponentStateV2<ValueType> => {
+}: CreateComponentInstanceStateArgs<ValueType>): ComponentState<ValueType> => {
  if (isDefined(componentInstanceContext)) {
    globalComponentInstanceContextMap.set(key, componentInstanceContext);
  }
@@ -25,10 +25,10 @@ export const createComponentStateV2 = <ValueType>({
  return {
    type: 'ComponentState',
    key,
-    atomFamily: atomFamily<ValueType, ComponentStateKeyV2>({
+    atomFamily: atomFamily<ValueType, ComponentStateKey>({
      key,
      default: defaultValue,
      effects: effects,
    }),
-  } satisfies ComponentStateV2<ValueType>;
+  } satisfies ComponentState<ValueType>;
 };