Migrate to twenty-ui - utilities/animation (#7951)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7538](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7538).

 --- 

### Description

- Move animation components to `twenty-ui`    \
  \
  \
  Fixes  #7538

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx

@@ -20,7 +20,6 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
 import { TextInput } from '@/ui/input/components/TextInput';
-import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
 import { RecordBoardScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
@@ -28,7 +27,12 @@ import styled from '@emotion/styled';
 import { ReactNode, useContext, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import { AvatarChipVariant, IconEye, IconEyeOff } from 'twenty-ui';
+import {
+  AnimatedEaseInOut,
+  AvatarChipVariant,
+  IconEye,
+  IconEyeOff,
+} from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
 import { useAddNewCard } from '../../record-board-column/hooks/useAddNewCard';
 

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
+import { AnimatedContainer, IconComponent } from 'twenty-ui';
 
 import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
-import { AnimatedContainer } from '@/ui/utilities/animation/components/AnimatedContainer';
 
 const StyledInlineCellButtonContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { useCallback, useContext } from 'react';
 import {
+  AnimatedEaseInOut,
   IconChevronDown,
   IconComponent,
   IconDotsVertical,
@@ -38,7 +39,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
 
 const StyledListItem = styled(RecordDetailRecordsListItem)<{

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
+import { AnimatedContainer, IconComponent } from 'twenty-ui';
 
 import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
-import { AnimatedContainer } from '@/ui/utilities/animation/components/AnimatedContainer';
 
 const StyledButtonContainer = styled.div`
   margin: ${({ theme }) => theme.spacing(1)};