feat(editor): Add drag and drop data mapping (#3708)

* commit package lock

* refactor param options out

* use action toggle

* handle click on toggle

* update color toggle

* fix toggle

* show options

* update expression color

* update pointer

* fix readonly

* fix readonly

* fix expression spacing

* refactor input label

* show icon for headers

* center icon

* fix multi params

* add credential options

* increase spacing

* update expression view

* update transition

* update el padding

* rename side to options

* fix label overflow

* fix bug with unnessary lines

* add overlay

* fix bug affecting other pages

* clean up spacing

* rename

* update icon size

* fix toggle in users

* clean up func

* clean up css

* use css var

* fix overlay bug

* clean up input

* clean up input

* clean up unnessary css

* revert

* update quotes

* rename method

* remove console errors

* refactor data table

* add drag button

* make hoverable cells

* add drag hint

* disabel for output panel

* add drag

* disable for readonly

* Add dragging

* add draggable pill

* add mapping targets

* remove font color

* Transferable

* fix linting issue

* teleport component

* fix line

* disable for readonly

* fix position of data pill

* fix position of data pill

* ignore import

* add droppable state

* remove draggable key

* update bg color

* add value drop

* use direct input

* remove transition

* add animation

* shorten name

* handle empty value

* fix switch bug

* fix up animation

* add notification

* add hint

* add tooltip

* show draggable hintm

* fix multiple expre

* fix hoverable

* keep options on focus

* increase timeouts

* fix bug in set node

* add transition on hover out

* fix tooltip onboarding bug

* only update expression if changes

* add open delay

* fix header highlight issue

* update text

* dont show tooltip always

* update docs url

* update ee border

* add sticky behav

* hide error highlight if dropping

* switch out grip icon

* increase timeout

* add delay

* show hint on execprev

* add telemetry event

* add telemetry event

* add telemetry event

* fire event on hint showing

* fix telemetry event

* add path

* fix drag hint issue

* decrease bottom margin

* update mapping keys

* remove file

* hide overflow

* sort params

* add space

* prevent scrolling

* remove dropshadow

* force cursor

* address some comments

* add thead tbody

* add size opt

packages/design-system/src/components/N8nRadioButtons/RadioButton.vue

@@ -1,7 +1,7 @@
 <template>
-	<label role="radio" tabindex="-1" :class="$style.container" aria-checked="true">
+	<label role="radio" tabindex="-1" :class="{[$style.container]: true, [$style.hoverable]: !this.disabled}" aria-checked="true">
 		<input type="radio" tabindex="-1" autocomplete="off" :class="$style.input" :value="value">
-		<div :class="{[$style.button]: true, [$style.active]: active}" @click="$emit('click')">{{ label }}</div>
+		<div :class="{[$style.button]: true, [$style.active]: active, [$style[size]]: true, [$style.disabled]: disabled}" @click="$emit('click')">{{ label }}</div>
 	</label>
 </template>
 
@@ -21,6 +21,15 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		size: {
+			type: String,
+			default: 'medium',
+			validator: (value: string): boolean =>
+				['small', 'medium'].includes(value),
+		},
+		disabled: {
+			type: Boolean,
+		},
 	},
 };
 </script>
@@ -30,11 +39,11 @@ export default {
 	display: inline-block;
 	outline: 0;
 	position: relative;
+}
 
-	&:hover {
-		.button:not(.active) {
-			color: var(--color-primary);
-		}
+.hoverable:hover {
+	.button:not(.active) {
+		color: var(--color-primary);
 	}
 }
 
@@ -47,16 +56,29 @@ export default {
 
 .button {
 	border-radius: 0;
-	padding: 0 var(--spacing-xs);
 	display: flex;
 	align-items: center;
-	height: 26px;
-	font-size: var(--font-size-2xs);
 	border-radius: var(--border-radius-base);
 	font-weight: var(--font-weight-bold);
 	color: var(--color-text-base);
-	cursor: pointer;
 	transition: background-color 0.2s ease;
+	cursor: pointer;
+}
+
+.disabled {
+	cursor: not-allowed;
+}
+
+.medium {
+	height: 26px;
+	font-size: var(--font-size-2xs);
+	padding: 0 var(--spacing-xs);
+}
+
+.small {
+	font-size: var(--font-size-3xs);
+	height: 15px;
+	padding: 0 var(--spacing-4xs);
 }
 
 .active {