Avanced Settings: Custom API names for Select & Multi-Select Keys (#7489)

### Description

- text input was changed because it renders an empty div as the right
icon, but the margin and padding affect the layout
- we have duplicated code on ExpandedWidthAnimationVariants.ts, because
of an eslint rule that prevents more than one const definition, can we
ignore the rule?
- 

### Demo


<https://www.loom.com/share/17a37bf5549a4a23ba12343b6046ec6b?sid=4cf297f3-66db-44c9-9a9b-7bde89b90d02>

### Refs

<https://github.com/twentyhq/twenty/issues/6146>

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>

packages/twenty-front/src/modules/settings/constants/ExpandedWidthAnimationVariants.ts

@@ -0,0 +1,31 @@
+import { ADVANCED_SETTINGS_ANIMATION_DURATION } from '@/settings/constants/AdvancedSettingsAnimationDurations';
+
+export const EXPANDED_WIDTH_ANIMATION_VARIANTS = {
+  initial: {
+    opacity: 0,
+    width: 0,
+    overflow: 'hidden',
+    transition: {
+      opacity: { duration: ADVANCED_SETTINGS_ANIMATION_DURATION.opacity },
+      width: { duration: ADVANCED_SETTINGS_ANIMATION_DURATION.size },
+    },
+  },
+  animate: {
+    opacity: 1,
+    width: '100%',
+    overflow: 'hidden',
+    transition: {
+      opacity: { duration: ADVANCED_SETTINGS_ANIMATION_DURATION.opacity },
+      width: { duration: ADVANCED_SETTINGS_ANIMATION_DURATION.size },
+    },
+  },
+  exit: {
+    opacity: 0,
+    width: 0,
+    overflow: 'hidden',
+    transition: {
+      opacity: { duration: ADVANCED_SETTINGS_ANIMATION_DURATION.opacity },
+      width: { duration: ADVANCED_SETTINGS_ANIMATION_DURATION.size },
+    },
+  },
+};