From a156dfaf8fc0e91114fcb66a5faa27278a2838a0 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 26 May 2022 18:06:00 +0300
Subject: [PATCH 01/42] feat: Design system color improvements and button
 component redesign.

---
 .../components/N8nButton/Button.stories.js    | 122 --------
 .../components/N8nButton/Button.stories.ts    | 192 ++++++++++++
 .../src/components/N8nButton/Button.vue       | 279 +++++++++---------
 .../src/components/N8nButton/index.d.ts       |  43 ---
 packages/design-system/theme/src/_tokens.scss |  22 +-
 packages/design-system/theme/src/button.scss  |  16 +-
 .../design-system/theme/src/common/var.scss   |  26 +-
 7 files changed, 393 insertions(+), 307 deletions(-)
 delete mode 100644 packages/design-system/src/components/N8nButton/Button.stories.js
 create mode 100644 packages/design-system/src/components/N8nButton/Button.stories.ts
 delete mode 100644 packages/design-system/src/components/N8nButton/index.d.ts

diff --git a/packages/design-system/src/components/N8nButton/Button.stories.js b/packages/design-system/src/components/N8nButton/Button.stories.js
deleted file mode 100644
index 31a8b28d61f47..0000000000000
--- a/packages/design-system/src/components/N8nButton/Button.stories.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import N8nButton from './Button.vue';
-import { action } from '@storybook/addon-actions';
-
-export default {
-	title: 'Atoms/Button',
-	component: N8nButton,
-	argTypes: {
-		label: {
-			control: 'text',
-		},
-		title: {
-			control: 'text',
-		},
-		type: {
-			control: 'select',
-			options: ['primary', 'outline', 'light', 'text', 'tertiary'],
-		},
-		size: {
-			control: {
-				type: 'select',
-				options: ['mini', 'small', 'medium', 'large', 'xlarge'],
-			},
-		},
-		loading: {
-			control: {
-				type: 'boolean',
-			},
-		},
-		icon: {
-			control: {
-				type: 'text',
-			},
-		},
-		circle: {
-			control: {
-				type: 'boolean',
-			},
-		},
-		fullWidth: {
-			type: 'boolean',
-		},
-		theme: {
-			type: 'select',
-			options: ['success', 'danger', 'warning'],
-		},
-		float: {
-			type: 'select',
-			options: ['left', 'right'],
-		},
-	},
-	parameters: {
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=5%3A1147',
-		},
-	},
-};
-
-const methods = {
-	onClick: action('click'),
-};
-
-const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: {
-		N8nButton,
-	},
-	template: '<n8n-button v-bind="$props" @click="onClick" />',
-	methods,
-});
-
-export const Button = Template.bind({});
-Button.args = {
-	label: 'Button',
-};
-
-const ManyTemplate = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: {
-		N8nButton,
-	},
-	template:
-		'<div> <n8n-button v-bind="$props" size="large" @click="onClick" />  <n8n-button v-bind="$props" size="medium" @click="onClick" />  <n8n-button v-bind="$props" size="small" @click="onClick" />  <n8n-button v-bind="$props" :loading="true" @click="onClick" />  <n8n-button v-bind="$props" :disabled="true" @click="onClick" /></div>',
-	methods,
-});
-
-export const Primary = ManyTemplate.bind({});
-Primary.args = {
-	type: 'primary',
-	label: 'Button',
-};
-
-export const Outline = ManyTemplate.bind({});
-Outline.args = {
-	type: 'outline',
-	label: 'Button',
-};
-
-export const Tertiary = ManyTemplate.bind({});
-Tertiary.args = {
-	type: 'tertiary',
-	label: 'Button',
-};
-
-export const Light = ManyTemplate.bind({});
-Light.args = {
-	type: 'light',
-	label: 'Button',
-};
-
-export const WithIcon = ManyTemplate.bind({});
-WithIcon.args = {
-	label: 'Button',
-	icon: 'plus-circle',
-};
-
-export const Text = ManyTemplate.bind({});
-Text.args = {
-	type: 'text',
-	label: 'Button',
-	icon: 'plus-circle',
-};
diff --git a/packages/design-system/src/components/N8nButton/Button.stories.ts b/packages/design-system/src/components/N8nButton/Button.stories.ts
new file mode 100644
index 0000000000000..ecf6d6734aba3
--- /dev/null
+++ b/packages/design-system/src/components/N8nButton/Button.stories.ts
@@ -0,0 +1,192 @@
+/* tslint:disable:variable-name */
+import N8nButton from './Button.vue';
+import { action } from '@storybook/addon-actions';
+import { StoryFn } from "@storybook/vue";
+
+export default {
+	title: 'Atoms/Button',
+	component: N8nButton,
+	argTypes: {
+		label: {
+			control: 'text',
+		},
+		title: {
+			control: 'text',
+		},
+		type: {
+			control: 'select',
+			options: ['primary', 'outline', 'light', 'text', 'tertiary'],
+		},
+		size: {
+			control: {
+				type: 'select',
+				options: ['mini', 'small', 'medium', 'large', 'xlarge'],
+			},
+		},
+		loading: {
+			control: {
+				type: 'boolean',
+			},
+		},
+		icon: {
+			control: {
+				type: 'text',
+			},
+		},
+		circle: {
+			control: {
+				type: 'boolean',
+			},
+		},
+		fullWidth: {
+			type: 'boolean',
+		},
+		float: {
+			type: 'select',
+			options: ['left', 'right'],
+		},
+	},
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=5%3A1147',
+		},
+	},
+};
+
+const methods = {
+	onClick: action('click'),
+};
+
+const Template: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nButton,
+	},
+	template: '<n8n-button v-bind="$props" @click="onClick" />',
+	methods,
+});
+
+export const Button = Template.bind({});
+Button.args = {
+	label: 'Button',
+};
+
+const AllSizesTemplate: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nButton,
+	},
+	template: `<div>
+		<n8n-button v-bind="$props" size="large" @click="onClick" />
+		<n8n-button v-bind="$props" size="medium" @click="onClick" />
+		<n8n-button v-bind="$props" size="small" @click="onClick" />
+		<n8n-button v-bind="$props" :loading="true" @click="onClick" />
+		<n8n-button v-bind="$props" :disabled="true" @click="onClick" />
+	</div>`,
+	methods,
+});
+
+const AllColorsTemplate: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nButton,
+	},
+	template: `<div>
+		<n8n-button v-bind="$props" type="primary" @click="onClick" />
+		<n8n-button v-bind="$props" type="secondary" @click="onClick" />
+		<n8n-button v-bind="$props" type="tertiary" @click="onClick" />
+		<n8n-button v-bind="$props" type="success" @click="onClick" />
+		<n8n-button v-bind="$props" type="warning" @click="onClick" />
+		<n8n-button v-bind="$props" type="danger" @click="onClick" />
+	</div>`,
+	methods,
+});
+
+const AllColorsAndSizesTemplate: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nButton,
+	},
+	template: `<div>
+		<n8n-button v-bind="$props" size="large" type="primary" @click="onClick" />
+		<n8n-button v-bind="$props" size="large" type="secondary" @click="onClick" />
+		<n8n-button v-bind="$props" size="large" type="tertiary" @click="onClick" />
+		<n8n-button v-bind="$props" size="large" type="success" @click="onClick" />
+		<n8n-button v-bind="$props" size="large" type="warning" @click="onClick" />
+		<n8n-button v-bind="$props" size="large" type="danger" @click="onClick" />
+		<br/>
+		<br/>
+		<n8n-button v-bind="$props" size="medium" type="primary" @click="onClick" />
+		<n8n-button v-bind="$props" size="medium" type="secondary" @click="onClick" />
+		<n8n-button v-bind="$props" size="medium" type="tertiary" @click="onClick" />
+		<n8n-button v-bind="$props" size="medium" type="success" @click="onClick" />
+		<n8n-button v-bind="$props" size="medium" type="warning" @click="onClick" />
+		<n8n-button v-bind="$props" size="medium" type="danger" @click="onClick" />
+		<br/>
+		<br/>
+		<n8n-button v-bind="$props" size="small" type="primary" @click="onClick" />
+		<n8n-button v-bind="$props" size="small" type="secondary" @click="onClick" />
+		<n8n-button v-bind="$props" size="small" type="tertiary" @click="onClick" />
+		<n8n-button v-bind="$props" size="small" type="success" @click="onClick" />
+		<n8n-button v-bind="$props" size="small" type="warning" @click="onClick" />
+		<n8n-button v-bind="$props" size="small" type="danger" @click="onClick" />
+	</div>`,
+	methods,
+});
+
+export const Primary = AllSizesTemplate.bind({});
+Primary.args = {
+	type: 'primary',
+	label: 'Button',
+};
+
+export const Secondary = AllSizesTemplate.bind({});
+Secondary.args = {
+	type: 'secondary',
+	label: 'Button',
+};
+
+export const Tertiary = AllSizesTemplate.bind({});
+Tertiary.args = {
+	type: 'tertiary',
+	label: 'Button',
+};
+
+export const Success = AllSizesTemplate.bind({});
+Success.args = {
+	type: 'success',
+	label: 'Button',
+};
+
+export const Warning = AllSizesTemplate.bind({});
+Warning.args = {
+	type: 'warning',
+	label: 'Button',
+};
+
+export const Danger = AllSizesTemplate.bind({});
+Danger.args = {
+	type: 'danger',
+	label: 'Button',
+};
+
+export const Outline = AllColorsAndSizesTemplate.bind({});
+Outline.args = {
+	outline: true,
+	label: 'Button',
+};
+
+export const Text = AllColorsAndSizesTemplate.bind({});
+Text.args = {
+	type: 'primary',
+	text: true,
+	label: 'Button',
+};
+
+export const WithIcon = AllSizesTemplate.bind({});
+WithIcon.args = {
+	label: 'Button',
+	icon: 'plus-circle',
+};
+
diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index 2e2c1fd3cd61a..c6561ac720e0e 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -10,6 +10,7 @@
 		:round="!props.circle && props.round"
 		:circle="props.circle"
 		:style="$options.styles(props)"
+		tabindex="0"
 		@click="(e) => listeners.click && listeners.click(e)"
 	>
 		<span :class="$style.icon" v-if="props.loading || props.icon">
@@ -47,12 +48,7 @@ export default {
 			type: String,
 			default: 'primary',
 			validator: (value: string): boolean =>
-				['primary', 'outline', 'light', 'text', 'tertiary'].includes(value),
-		},
-		theme: {
-			type: String,
-			validator: (value: string): boolean =>
-				['success', 'warning', 'danger'].includes(value),
+				['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger'].includes(value),
 		},
 		size: {
 			type: String,
@@ -68,11 +64,19 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		outline: {
+			type: Boolean,
+			default: false,
+		},
+		text: {
+			type: Boolean,
+			default: false,
+		},
 		icon: {
 		},
 		round: {
 			type: Boolean,
-			default: true,
+			default: false,
 		},
 		circle: {
 			type: Boolean,
@@ -106,16 +110,11 @@ export default {
 			...(props.fullWidth ? { width: '100%' } : {}),
 		};
 	},
-	getClass(props: { type: string; theme?: string, transparentBackground: boolean }, $style: any): string {
-		const theme = props.type === 'text' || props.type === 'tertiary'
-			? props.type
-			: `${props.type}-${props.theme || 'primary'}`;
-
-		if (props.transparentBackground) {
-			return `${$style[theme]} ${$style['transparent']}`;
-		}
-
-		return $style[theme];
+	getClass(props: { type: string; outline: boolean; text: boolean; transparentBackground: boolean }, $style: any): string {
+		return `${$style['button']} ${$style[props.type]}` +
+			`${props.transparentBackground ? ` ${$style['transparent']}` : ''}` +
+			`${props.outline ? ` ${$style['outline']}` : ''}` +
+			`${props.text ? ` ${$style['text']}` : ''}`;
 	},
 };
 </script>
@@ -123,22 +122,6 @@ export default {
 <style lang="scss" module>
 @import "../../utils";
 
-.button {
-	> i {
-		display: none;
-	}
-
-	> span {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	span + span {
-		margin-left: var(--spacing-3xs);
-	}
-}
-
 $active-shade-percent: 10%;
 $color-primary-shade: lightness(
 	--color-primary-h,
@@ -168,143 +151,171 @@ $color-danger-shade: lightness(
 	-($active-shade-percent)
 );
 
-.primary-primary {
-	composes: button;
+.button {
+  > i {
+	display: none;
+  }
+
+  > span {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+  }
+
+  span + span {
+	margin-left: var(--spacing-3xs);
+  }
+}
+
+.secondary {
+  --button-color: var(--color-primary);
+  --button-border-color: var(--color-primary);
+  --button-background-color: var(--color-white);
+
+  --button-active-background-color: var(--color-primary-900);
+  --button-active-color: #{$color-primary-shade};
+  --button-active-border-color: #{$color-primary-shade};
+
+  --button-hover-background-color: var(--color-primary-950);
+  --button-hover-color: var(--color-primary);
+  --button-hover-border-color: var(--color-primary);
+
+  --button-focus-outline-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-600-l), 0.33)
+}
+
+.tertiary {
+  font-weight: var(--font-weight-regular) !important;
+
+  --button-background-color: var(--color-white);
+  --button-color: var(--color-text-dark);
+  --button-border-color: var(--color-neutral-850);
+
+  --button-active-background-color: var(--color-primary-tint-2);
+  --button-active-color: var(--color-primary);
+  --button-active-border-color: var(--color-primary);
+
+  --button-hover-background-color: var(--color-neutral-950);
+  --button-hover-color: var(--color-text-dark);
+  --button-hover-border-color: var(--color-neutral-800);
+
+  --button-focus-outline-color: hsla(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l), 0.1)
 }
 
-.primary-success {
-	composes: button;
+.success {
 	--button-background-color: var(--color-success);
 	--button-color: var(--color-text-xlight);
 	--button-border-color: var(--color-success);
-	--button-active-color: var(--color-text-xlight);
-	--button-active-border-color: #{$color-success-shade};
-	--button-active-background-color: #{$color-success-shade};
+
+	--button-active-background-color: var(--color-success-350);
+	--button-active-border-color: var(--color-success-350);
+
+	--button-hover-background-color: var(--color-success-450);
+	--button-hover-border-color: var(--color-success-450);
+
+	--button-focus-outline-color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), 0.33);
 }
 
-.primary-warning {
-	composes: button;
+.warning {
 	--button-background-color: var(--color-warning);
 	--button-color: var(--color-text-xlight);
 	--button-border-color: var(--color-warning);
-	--button-active-color: var(--color-text-xlight);
-	--button-active-border-color: #{$color-warning-shade};
-	--button-active-background-color: #{$color-warning-shade};
+
+	--button-active-background-color: var(--color-warning-500);
+	--button-active-border-color: var(--color-warning-500);
+
+	--button-hover-background-color: var(--color-warning-650);
+	--button-hover-border-color: var(--color-warning-650);
+
+  	--button-focus-outline-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), 0.33);
 }
 
-.primary-danger {
-	composes: button;
+.danger {
 	--button-background-color: var(--color-danger);
 	--button-color: var(--color-text-xlight);
 	--button-border-color: var(--color-danger);
 	--button-active-color: var(--color-text-xlight);
-	--button-active-border-color: #{$color-danger-shade};
-	--button-active-background-color: #{$color-danger-shade};
+
+	--button-active-background-color: var(--color-danger-600);
+	--button-active-border-color: var(--color-danger-600);
+
+	--button-hover-background-color: var(--color-danger-700);
+	--button-hover-border-color: var(--color-danger-700);
+
+	--button-focus-outline-color: hsla(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l), 0.33);
 }
 
 .outline {
 	--button-background-color: var(--color-foreground-xlight);
 	--button-disabled-background-color: var(--color-foreground-xlight);
 	--button-active-background-color: var(--color-foreground-xlight);
-}
-
-.outline-primary {
-	composes: button;
-	composes: outline;
-	--button-color: var(--color-primary);
-	--button-active-border-color: #{$color-primary-shade};
-	--button-active-color: #{$color-primary-shade};
-}
-
-.outline-success {
-	composes: button;
-	composes: outline;
-	--button-color: var(--color-success);
-	--button-border-color: var(--color-success);
-	--button-active-color: #{$color-success-shade};
-	--button-active-border-color: #{$color-success-shade};
-}
-
-.outline-warning {
-	composes: button;
-	composes: outline;
-	--button-color: var(--color-warning);
-	--button-border-color: var(--color-warning);
-	--button-active-color: #{$color-warning-shade};
-	--button-active-border-color: #{$color-warning-shade};
-}
-
-.outline-danger {
-	composes: button;
-	composes: outline;
-	--button-color: var(--color-danger);
-	--button-border-color: var(--color-danger);
-	--button-active-color: #{$color-danger-shade};
-	--button-active-border-color: #{$color-danger-shade};
-}
 
-.light-primary {
-	composes: button;
-	--button-color: var(--color-primary);
-	--button-border-color: var(--color-primary-tint-2);
-	--button-background-color: var(--color-primary-tint-2);
-	--button-active-background-color: var(--color-primary-tint-2);
-	--button-active-color: #{$color-primary-shade};
-	--button-active-border-color: #{$color-primary-shade};
-}
+  	&.primary {
+		--button-color: var(--color-primary);
+	  	--button-border-color: var(--color-primary);
+	  	--button-active-background-color: var(--color-primary);
+ 	}
 
-.light-success {
-	composes: button;
-	--button-color: var(--color-success);
-	--button-border-color: var(--color-success-tint-1);
-	--button-background-color: var(--color-success-tint-1);
-	--button-active-background-color: var(--color-success-tint-1);
-	--button-active-color: #{$color-success-shade};
-	--button-active-border-color: #{$color-success-shade};
-}
+	&.success {
+		--button-color: var(--color-success);
+		--button-border-color: var(--color-success);
+	  	--button-active-background-color: var(--color-success);
+	}
 
-.light-warning {
-	composes: button;
-	--button-color: var(--color-warning);
-	--button-border-color: var(--color-warning-tint-2);
-	--button-background-color: var(--color-warning-tint-2);
-	--button-active-background-color: var(--color-warning-tint-2);
-	--button-active-color: #{$color-warning-shade};
-	--button-active-border-color: #{$color-warning-shade};
-}
+	&.warning {
+		--button-color: var(--color-warning);
+		--button-border-color: var(--color-warning);
+	  	--button-active-background-color: var(--color-warning);
+	}
 
-.light-danger {
-	composes: button;
-	--button-color: var(--color-danger);
-	--button-border-color: var(--color-danger-tint-1);
-	--button-background-color: var(--color-danger-tint-1);
-	--button-active-background-color: var(--color-danger-tint-1);
-	--button-active-color: #{$color-danger-shade};
-	--button-active-border-color: #{$color-danger-shade};
+	&.danger {
+		--button-color: var(--color-danger);
+		--button-border-color: var(--color-danger);
+	  	--button-active-background-color: var(--color-danger);
+	}
 }
 
 .text {
-	composes: button;
 	--button-color: var(--color-text-light);
 	--button-border-color: transparent;
 	--button-background-color: transparent;
 	--button-active-background-color: transparent;
-	--button-active-color: var(--color-primary);
-	--button-active-border-color: transparent;
-}
+  	--button-active-border-color: transparent;
+  	--button-hover-background-color: transparent;
+	--button-hover-border-color: transparent;
+
+	&.primary {
+		--button-color: var(--color-primary);
+		--button-active-color: var(--color-primary);
+		--button-hover-color: var(--color-primary);
+	}
 
-.tertiary {
-	composes: button;
-	font-weight: var(--font-weight-regular) !important;
-	--button-color: var(--color-text-dark);
-	--button-border-color: var(--color-foreground-base);
-	--button-background-color: var(--color-background-base);
+	&.secondary {
+		--button-color: var(--color-primary-tint-1);
+		--button-active-color: var(--color-primary-tint-1);
+		--button-hover-color: var(--color-primary-tint-1);
+	}
 
-	--button-active-background-color: var(--color-primary-tint-2);
-	--button-active-color: var(--color-primary);
-	--button-active-border-color: var(--color-primary);
+	&.success {
+		--button-color: var(--color-success);
+		--button-active-color: var(--color-success);
+		--button-hover-color: var(--color-success);
+	}
 
-	--button-disabled-border-color: var(--color-foreground-xdark);
+	&.warning {
+		--button-color: var(--color-warning);
+	  	--button-active-color: var(--color-warning);
+	  	--button-hover-color: var(--color-warning);
+	}
+
+	&.danger {
+		--button-color: var(--color-danger);
+	  	--button-active-color: var(--color-danger);
+	  	--button-hover-color: var(--color-danger);
+	}
+
+    &:hover {
+	  text-decoration: underline;
+	}
 }
 
 .transparent {
diff --git a/packages/design-system/src/components/N8nButton/index.d.ts b/packages/design-system/src/components/N8nButton/index.d.ts
deleted file mode 100644
index ad6c9e62b9f0f..0000000000000
--- a/packages/design-system/src/components/N8nButton/index.d.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { N8nComponent, N8nComponentSize } from '../component';
-
-/** Button type */
-export type ButtonType = 'primary' | 'outline' | 'light' | 'text';
-
-/** Button themes */
-export type ButtonTheme = 'success' | 'warning' | 'danger';
-
-/** Button Component */
-export declare class N8nButton extends N8nComponent {
-	/** Button text */
-	label: string;
-
-	/** Button title on hover */
-	title: string;
-
-	/** Color scheme */
-	theme: ButtonTheme;
-
-	/** Button size */
-	size: N8nComponentSize;
-
-	/** Button type */
-	type: ButtonType;
-
-	/** Determine whether it's a circular button */
-	circle: boolean;
-
-	/** Determine whether it's loading */
-	loading: boolean;
-
-	/** Disable the button */
-	disabled: boolean;
-
-	/** Button icon, accepts an icon name of font awesome icon component */
-	icon: string;
-
-	/** Full width */
-	fullWidth: boolean;
-
-	/** Float left or right */
-	float: boolean;
-}
diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss
index 30afd03d86e69..30a0f4726b98c 100644
--- a/packages/design-system/theme/src/_tokens.scss
+++ b/packages/design-system/theme/src/_tokens.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @mixin theme {
 	--color-primary-h: 6.9;
 	--color-primary-s: 100%;
@@ -67,7 +69,7 @@
 	--color-secondary: hsl(
 		var(--color-secondary-h),
 		var(--color-secondary-s),
-		var(--color-secondary-l)
+		var(--color-secondary-l),
 	);
 
 	--color-success-h: 150.4;
@@ -173,6 +175,15 @@
 		var(--color-info-tint-2-l)
 	);
 
+	--color-neutral-h: 220;
+	--color-neutral-s: 7.4%;
+	--color-neutral-l: 50%;
+	--color-neutral: hsl(
+		var(--color-neutral-h),
+		var(--color-neutral-s),
+		var(--color-neutral-l)
+	);
+
 	--color-text-dark-h: 0;
 	--color-text-dark-s: 0%;
 	--color-text-dark-l: 33.3%;
@@ -355,6 +366,15 @@
 		var(--color-sticky-default-border-l)
 	);
 
+  	--color-white: hsl(0, 0, 100, 1);
+
+	@each $color in ('primary', 'neutral', 'secondary', 'success', 'warning', 'danger') {
+	  	@each $shade in (50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950) {
+			--color-#{$color}-#{$shade}-l: #{math.div($shade, 10)}#{'%'};
+			--color-#{$color}-#{$shade}: hsl(var(--color-#{$color}-h), var(--color-#{$color}-s), var(--color-#{$color}-#{$shade}-l));
+	  	}
+	}
+
 	--border-radius-xlarge: 12px;
 	--border-radius-large: 8px;
 	--border-radius-base: 4px;
diff --git a/packages/design-system/theme/src/button.scss b/packages/design-system/theme/src/button.scss
index 9fabeb5e63d0b..47add5c9205b1 100644
--- a/packages/design-system/theme/src/button.scss
+++ b/packages/design-system/theme/src/button.scss
@@ -14,8 +14,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 	white-space: nowrap;
 	cursor: pointer;
 
-	border: var(--border-width-base) var.$button-border-color
-		var(--border-style-base);
+	border: var(--border-width-base) var.$button-border-color var(--border-style-base);
 	color: var.$button-font-color;
 	background-color: var.$button-background-color;
 	font-weight: var(--font-weight-bold);
@@ -28,10 +27,17 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 	box-sizing: border-box;
 	outline: none;
 	margin: 0;
-	transition: 0.1s;
+	transition: 0.3s;
 
 	@include utils.utils-user-select(none);
 
+
+  	&:hover {
+		color: var.$button-hover-color;
+		border-color: var.$button-hover-border-color;
+		background-color: var.$button-hover-background-color;
+  	}
+
 	&:active {
 		color: var.$button-active-color;
 		border-color: var.$button-active-border-color;
@@ -39,6 +45,10 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 		outline: none;
 	}
 
+  	&:focus {
+	    outline: 3px solid var.$button-focus-outline-color;
+	}
+
 	&::-moz-focus-inner {
 		border: 0;
 	}
diff --git a/packages/design-system/theme/src/common/var.scss b/packages/design-system/theme/src/common/var.scss
index 2763b4f18d77c..6dfce223d718f 100644
--- a/packages/design-system/theme/src/common/var.scss
+++ b/packages/design-system/theme/src/common/var.scss
@@ -666,14 +666,29 @@ $button-mini-padding-horizontal: 15px;
 
 $button-font-color: var(--button-color, var(--color-text-xlight));
 $button-background-color: var(--button-background-color, var(--color-primary));
+
 $button-active-color: var(--button-active-color, var(--color-text-xlight));
 $button-active-border-color: var(
 	--button-active-border-color,
-	var(--color-primary-shade-1)
+	var(--color-primary-600)
 );
 $button-active-background-color: var(
 	--button-active-background-color,
-	var(--color-primary-shade-1)
+	var(--color-primary-600)
+);
+$button-focus-outline-color: var(
+	--button-focus-outline-color,
+	hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-600-l), 0.33)
+);
+
+$button-hover-color: var(--button-hover-color, var(--color-text-xlight));
+$button-hover-border-color: var(
+	--button-hover-border-color,
+	var(--color-primary-750)
+);
+$button-hover-background-color: var(
+	--button-hover-background-color,
+	var(--color-primary-750)
 );
 
 /// color||Color|0
@@ -684,14 +699,17 @@ $button-default-background-color: $color-white;
 $button-default-border-color: var(--border-color-base);
 
 /// color||Color|0
-$button-disabled-font-color: var(--color-text-light);
+$button-disabled-font-color: var(
+	--button-disabled-color,
+	var(--color-neutral-500)
+);
 /// color||Color|0
 $button-disabled-background-color: var(
 	--button-disabled-background-color,
 	var(--color-foreground-base)
 );
 /// color||Color|0
-$button-disabled-border-color: var(--button-disabled-border-color, var(--border-color-base));
+$button-disabled-border-color: var(--button-disabled-border-color, var(--color-neutral-500));
 
 /// color||Color|0
 $button-primary-border-color: var(--color-primary);

From 6d4b9e9b374eb9cfac1d5142e18e0e5fd24594df Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 27 May 2022 10:31:34 +0300
Subject: [PATCH 02/42] feat: Added button focus state and unit tests.

---
 .../src/components/N8nButton/Button.vue       | 43 ++++-------------
 .../N8nButton/__tests__/Button.spec.ts        | 47 +++++++++++++++++++
 .../__snapshots__/Button.spec.ts.snap         | 18 +++++++
 .../src/components/N8nNotice/Notice.vue       |  2 +-
 .../N8nNotice/__tests__/Notice.spec.ts        |  2 +-
 packages/design-system/theme/src/button.scss  |  3 +-
 .../design-system/theme/src/common/var.scss   |  1 +
 7 files changed, 78 insertions(+), 38 deletions(-)
 create mode 100644 packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts
 create mode 100644 packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap

diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index c6561ac720e0e..4ac4a330b431e 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -1,7 +1,7 @@
 <template functional>
 	<component
 		:is="$options.components.ElButton"
-		:plain="props.type === 'outline'"
+		:plain="props.outline"
 		:disabled="props.disabled"
 		:size="props.size"
 		:loading="props.loading"
@@ -26,7 +26,9 @@
 				:size="props.size"
 			/>
 		</span>
-		<span v-if="props.label">{{ props.label }}</span>
+		<span v-if="props.label">
+			<slot>{{ props.label }}</slot>
+		</span>
 	</component>
 </template>
 
@@ -122,35 +124,6 @@ export default {
 <style lang="scss" module>
 @import "../../utils";
 
-$active-shade-percent: 10%;
-$color-primary-shade: lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	-($active-shade-percent)
-);
-
-$color-success-shade: lightness(
-	--color-success-h,
-	--color-success-s,
-	--color-success-l,
-	-($active-shade-percent)
-);
-
-$color-warning-shade: lightness(
-	--color-warning-h,
-	--color-warning-s,
-	--color-warning-l,
-	-($active-shade-percent)
-);
-
-$color-danger-shade: lightness(
-	--color-danger-h,
-	--color-danger-s,
-	--color-danger-l,
-	-($active-shade-percent)
-);
-
 .button {
   > i {
 	display: none;
@@ -173,14 +146,14 @@ $color-danger-shade: lightness(
   --button-background-color: var(--color-white);
 
   --button-active-background-color: var(--color-primary-900);
-  --button-active-color: #{$color-primary-shade};
-  --button-active-border-color: #{$color-primary-shade};
+  --button-active-color: var(--color-primary);
+  --button-active-border-color: var(--color-primary);
 
   --button-hover-background-color: var(--color-primary-950);
   --button-hover-color: var(--color-primary);
   --button-hover-border-color: var(--color-primary);
 
-  --button-focus-outline-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-600-l), 0.33)
+  --button-focus-outline-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-600-l), 0.33);
 }
 
 .tertiary {
@@ -198,7 +171,7 @@ $color-danger-shade: lightness(
   --button-hover-color: var(--color-text-dark);
   --button-hover-border-color: var(--color-neutral-800);
 
-  --button-focus-outline-color: hsla(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l), 0.1)
+  --button-focus-outline-color: hsla(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l), 0.2);
 }
 
 .success {
diff --git a/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts b/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts
new file mode 100644
index 0000000000000..f0487e19f3f8c
--- /dev/null
+++ b/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts
@@ -0,0 +1,47 @@
+import {render} from '@testing-library/vue';
+import N8nButton from "../Button.vue";
+
+const slots = {
+	default: 'Button',
+};
+const stubs = ['n8n-spinner', 'n8n-icon'];
+
+describe('components', () => {
+	describe('N8nButton', () => {
+		it('should render correctly', () => {
+			const wrapper = render(N8nButton, {
+				slots,
+				stubs,
+			});
+			expect(wrapper.html()).toMatchSnapshot();
+		});
+
+		describe('props', () => {
+			describe('loading', () => {
+				it('should render loading spinner', () => {
+					const wrapper = render(N8nButton, {
+						props: {
+							loading: true,
+						},
+						slots,
+						stubs,
+					});
+					expect(wrapper.html()).toMatchSnapshot();
+				});
+			});
+
+			describe('icon', () => {
+				it('should render icon button', () => {
+					const wrapper = render(N8nButton, {
+						props: {
+							icon: 'plus-circle',
+						},
+						slots,
+						stubs,
+					});
+					expect(wrapper.html()).toMatchSnapshot();
+				});
+			});
+		});
+	});
+});
diff --git a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
new file mode 100644
index 0000000000000..e2c9c767a4025
--- /dev/null
+++ b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1
+
+exports[`components > N8nButton > props > icon > should render icon button 1`] = `
+"<button type=\\"button\\" class=\\"el-button el-button--default el-button--medium _button_1c5ep_1 _primary_1c5ep_79\\" tabindex=\\"0\\">
+  <!---->
+  <!----><span><span class=\\"_icon_1c5ep_143\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></span></button>"
+`;
+
+exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `
+"<button disabled=\\"disabled\\" type=\\"button\\" class=\\"el-button el-button--default el-button--medium is-loading _button_1c5ep_1 _primary_1c5ep_79\\" tabindex=\\"0\\"><i class=\\"el-icon-loading\\"></i>
+  <!----><span><span class=\\"_icon_1c5ep_143\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></span></button>"
+`;
+
+exports[`components > N8nButton > should render correctly 1`] = `
+"<button type=\\"button\\" class=\\"el-button el-button--default el-button--medium _button_1c5ep_1 _primary_1c5ep_79\\" tabindex=\\"0\\">
+  <!---->
+  <!----><span><!----><span>Button</span></span></button>"
+`;
diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index 55571d3ec5162..4857dbc8183c2 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -38,8 +38,8 @@ export default Vue.extend({
 			default: 'warning',
 		},
 		content: {
-			required: true,
 			type: String,
+			default: '',
 		},
 		fullContent: {
 			type: String,
diff --git a/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts b/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
index 5bebb09dbe5b2..401f6b641b09c 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
+++ b/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
@@ -1,4 +1,4 @@
-import {fireEvent, render} from '@testing-library/vue';
+import { render } from '@testing-library/vue';
 import N8nNotice from "../Notice.vue";
 
 describe('components', () => {
diff --git a/packages/design-system/theme/src/button.scss b/packages/design-system/theme/src/button.scss
index 47add5c9205b1..42c01487a088a 100644
--- a/packages/design-system/theme/src/button.scss
+++ b/packages/design-system/theme/src/button.scss
@@ -46,7 +46,8 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 	}
 
   	&:focus {
-	    outline: 3px solid var.$button-focus-outline-color;
+	  	border-color: var.$button-focus-outline-color;
+	    outline: 2px solid var.$button-focus-outline-color;
 	}
 
 	&::-moz-focus-inner {
diff --git a/packages/design-system/theme/src/common/var.scss b/packages/design-system/theme/src/common/var.scss
index 6dfce223d718f..b9ff955cd95d5 100644
--- a/packages/design-system/theme/src/common/var.scss
+++ b/packages/design-system/theme/src/common/var.scss
@@ -676,6 +676,7 @@ $button-active-background-color: var(
 	--button-active-background-color,
 	var(--color-primary-600)
 );
+
 $button-focus-outline-color: var(
 	--button-focus-outline-color,
 	hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-600-l), 0.33)

From a24a10a30c7b20440b9d7e8183c3d9b5dc9cb527 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 27 May 2022 10:56:49 +0300
Subject: [PATCH 03/42] refactor: Aligned n8n-button usage inside of editor-ui.

---
 .../src/components/N8nIconButton/IconButton.vue     | 10 ++++++++++
 packages/editor-ui/src/components/Banner.vue        |  4 ++--
 .../components/CredentialEdit/CredentialEdit.vue    |  2 +-
 .../src/components/DuplicateWorkflowDialog.vue      |  2 +-
 .../editor-ui/src/components/ExecutionsList.vue     |  3 +--
 packages/editor-ui/src/components/InputPanel.vue    |  2 +-
 .../editor-ui/src/components/NodeExecuteButton.vue  |  4 ++++
 packages/editor-ui/src/components/NodeTitle.vue     |  2 +-
 packages/editor-ui/src/components/RunData.vue       |  8 ++++----
 .../components/TagsManager/TagsView/TagsTable.vue   |  6 +++---
 packages/editor-ui/src/components/TemplateCard.vue  |  2 +-
 packages/editor-ui/src/plugins/components.ts        |  3 ---
 packages/editor-ui/src/views/NodeView.vue           | 13 +++++++++----
 13 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.vue b/packages/design-system/src/components/N8nIconButton/IconButton.vue
index b2d6649ebe65f..987941bc60be9 100644
--- a/packages/design-system/src/components/N8nIconButton/IconButton.vue
+++ b/packages/design-system/src/components/N8nIconButton/IconButton.vue
@@ -7,6 +7,8 @@
 		:title="props.title"
 		:icon="props.icon"
 		:theme="props.theme"
+	    :outline="props.outline"
+	    :text="props.text"
 		@click="(e) => listeners.click && listeners.click(e)"
 		circle
 	/>
@@ -35,6 +37,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		outline: {
+			type: Boolean,
+			default: false,
+		},
+		text: {
+			type: Boolean,
+			default: false,
+		},
 		disabled: {
 			type: Boolean,
 			default: false,
diff --git a/packages/editor-ui/src/components/Banner.vue b/packages/editor-ui/src/components/Banner.vue
index 91f74b4c6c16b..fdc0d33ab6efe 100644
--- a/packages/editor-ui/src/components/Banner.vue
+++ b/packages/editor-ui/src/components/Banner.vue
@@ -27,10 +27,10 @@
 				v-if="buttonLabel"
 				:label="buttonLoading && buttonLoadingLabel ? buttonLoadingLabel : buttonLabel"
 				:title="buttonTitle"
-				:theme="theme"
+				:type="theme"
 				:loading="buttonLoading"
 				size="small"
-				type="outline"
+				outline
 				:transparentBackground="true"
 				@click.stop="onClick"
 			/>
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index 5b42ce9036c39..a7e3f9638357a 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -27,7 +27,7 @@
 						size="small"
 						:title="$locale.baseText('credentialEdit.credentialEdit.delete')"
 						icon="trash"
-						type="text"
+						text
 						:disabled="isSaving"
 						:loading="isDeleting"
 						@click="deleteCredential"
diff --git a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
index 97160c15dd1dd..4edee24cc2001 100644
--- a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
+++ b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
@@ -31,7 +31,7 @@
 		<template v-slot:footer="{ close }">
 			<div :class="$style.footer">
 				<n8n-button @click="save" :loading="isSaving" :label="$locale.baseText('duplicateWorkflowDialog.save')" float="right" />
-				<n8n-button type="outline" @click="close" :disabled="isSaving" :label="$locale.baseText('duplicateWorkflowDialog.cancel')" float="right" />
+				<n8n-button outline @click="close" :disabled="isSaving" :label="$locale.baseText('duplicateWorkflowDialog.cancel')" float="right" />
 			</div>
 		</template>
 	</Modal>
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index df6e0c0142a59..2258b71ca4490 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -103,8 +103,7 @@
 							<span class="retry-button">
 								<n8n-icon-button
 									 v-if="scope.row.stoppedAt !== undefined && !scope.row.finished && scope.row.retryOf === undefined && scope.row.retrySuccessId === undefined && !scope.row.waitTill"
-									 type="light"
-									 :theme="scope.row.stoppedAt === null ? 'warning': 'danger'"
+									 :type="scope.row.stoppedAt === null ? 'warning': 'danger'"
 									 size="mini"
 									 :title="$locale.baseText('executionsList.retryExecution')"
 									 icon="redo"
diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index 362970bc417d6..b214c961d8c32 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -32,7 +32,7 @@
 		<template v-slot:node-not-run>
 			<div :class="$style.noOutputData" v-if="parentNodes.length">
 				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.noOutputData.title') }}</n8n-text>
-				<NodeExecuteButton type="outline" :transparent="true" :nodeName="currentNodeName" :label="$locale.baseText('ndv.input.noOutputData.executePrevious')" @execute="onNodeExecute" />
+				<NodeExecuteButton outline :transparent="true" :nodeName="currentNodeName" :label="$locale.baseText('ndv.input.noOutputData.executePrevious')" @execute="onNodeExecute" />
 				<n8n-text tag="div" size="small">
 					{{ $locale.baseText('ndv.input.noOutputData.hint') }}
 				</n8n-text>
diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
index 6c7c53f4616e1..07e17aa8798cf 100644
--- a/packages/editor-ui/src/components/NodeExecuteButton.vue
+++ b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -4,6 +4,7 @@
 		:disabled="workflowRunning && !nodeRunning"
 		:label="buttonLabel"
 		:type="type"
+		:outline="outline"
 		:size="size"
 		:transparentBackground="transparent"
 		@click="onClick"
@@ -29,6 +30,9 @@ export default mixins(
 		type: {
 			type: String,
 		},
+		outline: {
+			type: Boolean,
+		},
 		size: {
 			type: String,
 		},
diff --git a/packages/editor-ui/src/components/NodeTitle.vue b/packages/editor-ui/src/components/NodeTitle.vue
index 1a68c73e62f10..f51254b676ef9 100644
--- a/packages/editor-ui/src/components/NodeTitle.vue
+++ b/packages/editor-ui/src/components/NodeTitle.vue
@@ -12,7 +12,7 @@
 					>{{ $locale.baseText('ndv.title.renameNode') }}</n8n-text>
 				<n8n-input ref="input" size="small" v-model="newName" />
 				<div :class="$style.editButtons">
-					<n8n-button type="outline" size="small" @click="editName = false" :label="$locale.baseText('ndv.title.cancel')" />
+					<n8n-button outline size="small" @click="editName = false" :label="$locale.baseText('ndv.title.cancel')" />
 					<n8n-button type="primary" size="small" @click="onRename" :label="$locale.baseText('ndv.title.rename')" />
 				</div>
 			</div>
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index f5f320a6d107d..e383b65204f46 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -22,8 +22,8 @@
 
 
 			<n8n-tooltip placement="right" v-if="canLinkRuns" :content="$locale.baseText(linkedRuns ? 'runData.unlinking.hint': 'runData.linking.hint')">
-				<n8n-icon-button v-if="linkedRuns" icon="unlink" type="text" size="small" @click="unlinkRun" />
-				<n8n-icon-button v-else icon="link" type="text" size="small" @click="linkRun" />
+				<n8n-icon-button v-if="linkedRuns" icon="unlink" text size="small" @click="unlinkRun" />
+				<n8n-icon-button v-else icon="link" text size="small" @click="linkRun" />
 			</n8n-tooltip>
 
 			<slot name="run-info"></slot>
@@ -87,7 +87,7 @@
 				<n8n-text align="center" tag="div"><span v-html="$locale.baseText('ndv.output.tooMuchData.message', { interpolate: {size: dataSizeInMB }})"></span></n8n-text>
 
 				<n8n-button
-					type="outline"
+					outline
 					:label="$locale.baseText('ndv.output.tooMuchData.showDataAnyway')"
 					@click="showTooMuchData"
 				/>
@@ -179,7 +179,7 @@
 
 								<div :class="$style.binaryButtonContainer">
 									<n8n-button size="small" :label="$locale.baseText('runData.showBinaryData')" class="binary-data-show-data-button" @click="displayBinaryData(index, key)" />
-									<n8n-button v-if="isDownloadable(index, key)" size="small" type="outline" :label="$locale.baseText('runData.downloadBinaryData')" class="binary-data-show-data-button" @click="downloadBinaryData(index, key)" />
+									<n8n-button v-if="isDownloadable(index, key)" size="small" outline :label="$locale.baseText('runData.downloadBinaryData')" class="binary-data-show-data-button" @click="downloadBinaryData(index, key)" />
 								</div>
 							</div>
 						</div>
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
index ecbd01251c754..b68bb99e2f4aa 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
@@ -44,15 +44,15 @@
 			<template slot-scope="scope">
 				<transition name="fade" mode="out-in">
 					<div class="ops" v-if="scope.row.create">
-						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" type="outline" :disabled="isSaving" />
+						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" outline :disabled="isSaving" />
 						<n8n-button :label="$locale.baseText('tagsTable.createTag')" @click.stop="apply" :loading="isSaving" />
 					</div>
 					<div class="ops" v-else-if="scope.row.update">
-						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" type="outline" :disabled="isSaving" />
+						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" outline :disabled="isSaving" />
 						<n8n-button :label="$locale.baseText('tagsTable.saveChanges')" @click.stop="apply" :loading="isSaving" />
 					</div>
 					<div class="ops" v-else-if="scope.row.delete">
-						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" type="outline" :disabled="isSaving" />
+						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" outline :disabled="isSaving" />
 						<n8n-button :label="$locale.baseText('tagsTable.deleteTag')" @click.stop="apply" :loading="isSaving" />
 					</div>
 					<div class="ops main" v-else-if="!scope.row.disable">
diff --git a/packages/editor-ui/src/components/TemplateCard.vue b/packages/editor-ui/src/components/TemplateCard.vue
index e4dcbf8f05faa..f14b77865848c 100644
--- a/packages/editor-ui/src/components/TemplateCard.vue
+++ b/packages/editor-ui/src/components/TemplateCard.vue
@@ -29,7 +29,7 @@
 		<div :class="$style.buttonContainer" v-if="useWorkflowButton">
 			<n8n-button
 				v-if="useWorkflowButton"
-				type="outline"
+				outline
 				label="Use workflow"
 				@click.stop="onUseWorkflowClick"
 			/>
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index 06af9faefc7bd..9bbd6b5630895 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -156,7 +156,6 @@ Vue.prototype.$alert = async (message: string, configOrTitle: string | ElMessage
 	let temp = config || (typeof configOrTitle === 'object' ? configOrTitle : {});
 	temp = {
 		...temp,
-		roundButton: true,
 		cancelButtonClass: 'btn--cancel',
 		confirmButtonClass: 'btn--confirm',
 	};
@@ -171,7 +170,6 @@ Vue.prototype.$confirm = async (message: string, configOrTitle: string | ElMessa
 	let temp = config || (typeof configOrTitle === 'object' ? configOrTitle : {});
 	temp = {
 		...temp,
-		roundButton: true,
 		cancelButtonClass: 'btn--cancel',
 		confirmButtonClass: 'btn--confirm',
 		distinguishCancelAndClose: true,
@@ -189,7 +187,6 @@ Vue.prototype.$prompt = async (message: string, configOrTitle: string | ElMessag
 	let temp = config || (typeof configOrTitle === 'object' ? configOrTitle : {});
 	temp = {
 		...temp,
-		roundButton: true,
 		cancelButtonClass: 'btn--cancel',
 		confirmButtonClass: 'btn--confirm',
 	};
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 28b4e926fd622..45e2feaf2904c 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -74,7 +74,12 @@
 					:class="['add-sticky-button', showStickyButton ? 'visible-button' : '']"
 					@click="nodeTypeSelected(STICKY_NODE_TYPE)"
 				>
-					<n8n-icon-button size="large" :icon="['far', 'note-sticky']" type="outline" :title="$locale.baseText('nodeView.addSticky')"/>
+					<n8n-icon-button
+						size="large"
+						outline
+						:icon="['far', 'note-sticky']"
+						:title="$locale.baseText('nodeView.addSticky')"
+					/>
 				</div>
 			</div>
 		</div>
@@ -110,7 +115,7 @@
 				size="large"
 				icon="play-circle"
 				:title="$locale.baseText('nodeView.executesTheWorkflowFromTheStartOrWebhookNode')"
-				:type="workflowRunning ? 'light' : 'primary'"
+				:type="workflowRunning ? 'secondary' : 'primary'"
 			/>
 
 			<n8n-icon-button
@@ -118,7 +123,7 @@
 				icon="stop"
 				size="large"
 				class="stop-execution"
-				type="light"
+				type="secondary"
 				:title="stopExecutionInProgress
 					? $locale.baseText('nodeView.stoppingCurrentExecution')
 					: $locale.baseText('nodeView.stopCurrentExecution')
@@ -133,7 +138,7 @@
 				icon="stop"
 				size="large"
 				:title="$locale.baseText('nodeView.stopWaitingForWebhookCall')"
-				type="light"
+				type="secondary"
 				@click.stop="stopWaitingForWebhook()"
 			/>
 

From 8eafe560cd0574b72fb2fae4255343be92e93a4e Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 27 May 2022 11:07:04 +0300
Subject: [PATCH 04/42] test: Updated snapshots.

---
 .../__tests__/__snapshots__/Button.spec.ts.snap          | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
index e2c9c767a4025..b53b1fedf7fec 100644
--- a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
+++ b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
@@ -3,16 +3,19 @@
 exports[`components > N8nButton > props > icon > should render icon button 1`] = `
 "<button type=\\"button\\" class=\\"el-button el-button--default el-button--medium _button_1c5ep_1 _primary_1c5ep_79\\" tabindex=\\"0\\">
   <!---->
-  <!----><span><span class=\\"_icon_1c5ep_143\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></span></button>"
+  <!----><span><span class=\\"_icon_1c5ep_143\\"><span class=\\"_size-medium_9dlpz_19 _regular_9dlpz_5\\" style=\\"line-height: 1;\\"></span></span>
+  <!----></span></button>"
 `;
 
 exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `
 "<button disabled=\\"disabled\\" type=\\"button\\" class=\\"el-button el-button--default el-button--medium is-loading _button_1c5ep_1 _primary_1c5ep_79\\" tabindex=\\"0\\"><i class=\\"el-icon-loading\\"></i>
-  <!----><span><span class=\\"_icon_1c5ep_143\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></span></button>"
+  <!----><span><span class=\\"_icon_1c5ep_143\\"><span><span class=\\"_size-medium_9dlpz_19 _regular_9dlpz_5\\" style=\\"line-height: 1;\\"></span></span></span>
+  <!----></span></button>"
 `;
 
 exports[`components > N8nButton > should render correctly 1`] = `
 "<button type=\\"button\\" class=\\"el-button el-button--default el-button--medium _button_1c5ep_1 _primary_1c5ep_79\\" tabindex=\\"0\\">
   <!---->
-  <!----><span><!----><span>Button</span></span></button>"
+  <!---->
+  <!----></button>"
 `;

From 11ef3a2c27ef7db9d5dc4400741e1572aaa61792 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 30 May 2022 10:55:37 +0300
Subject: [PATCH 05/42] refactor: Extracted focus outline width into scss
 variable.

---
 .../src/components/N8nButton/Button.vue       | 105 +++++++++---------
 packages/design-system/theme/src/button.scss  |   2 +-
 .../design-system/theme/src/common/var.scss   |   7 +-
 3 files changed, 60 insertions(+), 54 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index 4ac4a330b431e..c3db3ca24f57d 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -75,6 +75,7 @@ export default {
 			default: false,
 		},
 		icon: {
+			type: String,
 		},
 		round: {
 			type: Boolean,
@@ -108,8 +109,8 @@ export default {
 		float?: string;
 	}): { float?: string; width?: string } => {
 		return {
-			...(props.float ? { float: props.float } : {}),
-			...(props.fullWidth ? { width: '100%' } : {}),
+			...(props.float ? {float: props.float} : {}),
+			...(props.fullWidth ? {width: '100%'} : {}),
 		};
 	},
 	getClass(props: { type: string; outline: boolean; text: boolean; transparentBackground: boolean }, $style: any): string {
@@ -125,53 +126,53 @@ export default {
 @import "../../utils";
 
 .button {
-  > i {
-	display: none;
-  }
-
-  > span {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-  }
-
-  span + span {
-	margin-left: var(--spacing-3xs);
-  }
+	> i {
+		display: none;
+	}
+
+	> span {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	span + span {
+		margin-left: var(--spacing-3xs);
+	}
 }
 
 .secondary {
-  --button-color: var(--color-primary);
-  --button-border-color: var(--color-primary);
-  --button-background-color: var(--color-white);
+	--button-color: var(--color-primary);
+	--button-border-color: var(--color-primary);
+	--button-background-color: var(--color-white);
 
-  --button-active-background-color: var(--color-primary-900);
-  --button-active-color: var(--color-primary);
-  --button-active-border-color: var(--color-primary);
+	--button-active-background-color: var(--color-primary-900);
+	--button-active-color: var(--color-primary);
+	--button-active-border-color: var(--color-primary);
 
-  --button-hover-background-color: var(--color-primary-950);
-  --button-hover-color: var(--color-primary);
-  --button-hover-border-color: var(--color-primary);
+	--button-hover-background-color: var(--color-primary-950);
+	--button-hover-color: var(--color-primary);
+	--button-hover-border-color: var(--color-primary);
 
-  --button-focus-outline-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-600-l), 0.33);
+	--button-focus-outline-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-600-l), 0.33);
 }
 
 .tertiary {
-  font-weight: var(--font-weight-regular) !important;
+	font-weight: var(--font-weight-regular) !important;
 
-  --button-background-color: var(--color-white);
-  --button-color: var(--color-text-dark);
-  --button-border-color: var(--color-neutral-850);
+	--button-background-color: var(--color-white);
+	--button-color: var(--color-text-dark);
+	--button-border-color: var(--color-neutral-850);
 
-  --button-active-background-color: var(--color-primary-tint-2);
-  --button-active-color: var(--color-primary);
-  --button-active-border-color: var(--color-primary);
+	--button-active-background-color: var(--color-primary-tint-2);
+	--button-active-color: var(--color-primary);
+	--button-active-border-color: var(--color-primary);
 
-  --button-hover-background-color: var(--color-neutral-950);
-  --button-hover-color: var(--color-text-dark);
-  --button-hover-border-color: var(--color-neutral-800);
+	--button-hover-background-color: var(--color-neutral-950);
+	--button-hover-color: var(--color-text-dark);
+	--button-hover-border-color: var(--color-neutral-800);
 
-  --button-focus-outline-color: hsla(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l), 0.2);
+	--button-focus-outline-color: hsla(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l), 0.2);
 }
 
 .success {
@@ -199,7 +200,7 @@ export default {
 	--button-hover-background-color: var(--color-warning-650);
 	--button-hover-border-color: var(--color-warning-650);
 
-  	--button-focus-outline-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), 0.33);
+	--button-focus-outline-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), 0.33);
 }
 
 .danger {
@@ -222,28 +223,28 @@ export default {
 	--button-disabled-background-color: var(--color-foreground-xlight);
 	--button-active-background-color: var(--color-foreground-xlight);
 
-  	&.primary {
+	&.primary {
 		--button-color: var(--color-primary);
-	  	--button-border-color: var(--color-primary);
-	  	--button-active-background-color: var(--color-primary);
- 	}
+		--button-border-color: var(--color-primary);
+		--button-active-background-color: var(--color-primary);
+	}
 
 	&.success {
 		--button-color: var(--color-success);
 		--button-border-color: var(--color-success);
-	  	--button-active-background-color: var(--color-success);
+		--button-active-background-color: var(--color-success);
 	}
 
 	&.warning {
 		--button-color: var(--color-warning);
 		--button-border-color: var(--color-warning);
-	  	--button-active-background-color: var(--color-warning);
+		--button-active-background-color: var(--color-warning);
 	}
 
 	&.danger {
 		--button-color: var(--color-danger);
 		--button-border-color: var(--color-danger);
-	  	--button-active-background-color: var(--color-danger);
+		--button-active-background-color: var(--color-danger);
 	}
 }
 
@@ -252,8 +253,8 @@ export default {
 	--button-border-color: transparent;
 	--button-background-color: transparent;
 	--button-active-background-color: transparent;
-  	--button-active-border-color: transparent;
-  	--button-hover-background-color: transparent;
+	--button-active-border-color: transparent;
+	--button-hover-background-color: transparent;
 	--button-hover-border-color: transparent;
 
 	&.primary {
@@ -276,18 +277,18 @@ export default {
 
 	&.warning {
 		--button-color: var(--color-warning);
-	  	--button-active-color: var(--color-warning);
-	  	--button-hover-color: var(--color-warning);
+		--button-active-color: var(--color-warning);
+		--button-hover-color: var(--color-warning);
 	}
 
 	&.danger {
 		--button-color: var(--color-danger);
-	  	--button-active-color: var(--color-danger);
-	  	--button-hover-color: var(--color-danger);
+		--button-active-color: var(--color-danger);
+		--button-hover-color: var(--color-danger);
 	}
 
-    &:hover {
-	  text-decoration: underline;
+	&:hover {
+		text-decoration: underline;
 	}
 }
 
diff --git a/packages/design-system/theme/src/button.scss b/packages/design-system/theme/src/button.scss
index 42c01487a088a..50850f34385f7 100644
--- a/packages/design-system/theme/src/button.scss
+++ b/packages/design-system/theme/src/button.scss
@@ -47,7 +47,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 
   	&:focus {
 	  	border-color: var.$button-focus-outline-color;
-	    outline: 2px solid var.$button-focus-outline-color;
+	    outline: var.$focus-outline-width solid var.$button-focus-outline-color;
 	}
 
 	&::-moz-focus-inner {
diff --git a/packages/design-system/theme/src/common/var.scss b/packages/design-system/theme/src/common/var.scss
index b9ff955cd95d5..1f17c47d69eb9 100644
--- a/packages/design-system/theme/src/common/var.scss
+++ b/packages/design-system/theme/src/common/var.scss
@@ -222,7 +222,12 @@ $border-color-hover: var(--color-text-lighter);
 /// borderRadius|1|Radius|0
 $border-radius-circle: 100%;
 
-// Box-shadow
+/* Outline
+-------------------------- */
+$focus-outline-width: 2px;
+
+/* Box shadow
+-------------------------- */
 /// boxShadow|1|Shadow|1
 $box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
 // boxShadow|1|Shadow|1

From 0c46dcbb28d534efd75b0a22095ce733060f5b44 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 30 May 2022 13:24:14 +0300
Subject: [PATCH 06/42] fix: Fixed select input border-radius.

---
 packages/editor-ui/src/n8n-theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index 0defb3085c9c0..3929eae9bed8c 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -195,7 +195,7 @@
 		&,
 		&:hover,
 		&:focus {
-			border-radius: 20px;
+			border-radius: var(--border-radius-base);
 			color: var(--color-text-dark);
 			background-color: var(--color-background-base);
 			border-color: var(--color-foreground-base);

From 9c05eea4777a2a1f20c6e312250e119487740e24 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 31 May 2022 18:33:36 +0300
Subject: [PATCH 07/42] refactor: Removed element-ui references in button.

---
 .../components/N8nButton/Button.stories.ts    |  15 +-
 .../src/components/N8nButton/Button.vue       | 284 ++++--
 ...utton.stories.js => IconButton.stories.ts} |  22 +-
 .../components/N8nIconButton/IconButton.vue   |  73 +-
 packages/design-system/theme/src/_tokens.scss | 846 +++++++++---------
 packages/design-system/theme/src/button.scss  | 140 ---
 .../design-system/theme/src/calendar.scss     |   1 -
 .../design-system/theme/src/common/var.scss   | 380 ++++----
 .../design-system/theme/src/dropdown.scss     |   3 +-
 packages/design-system/theme/src/index.scss   |   2 +-
 .../design-system/theme/src/message-box.scss  |   1 -
 .../design-system/theme/src/transfer.scss     |   3 +-
 .../theme/src/utilities/_float.scss           |   7 +
 .../theme/src/utilities/index.scss            |   1 +
 packages/editor-ui/src/components/Banner.vue  |   1 -
 .../src/components/CollectionParameter.vue    |   2 +-
 .../components/FixedCollectionParameter.vue   |   2 +-
 .../src/components/MultipleParameter.vue      |   2 +-
 18 files changed, 921 insertions(+), 864 deletions(-)
 rename packages/design-system/src/components/N8nIconButton/{IconButton.stories.js => IconButton.stories.ts} (84%)
 delete mode 100644 packages/design-system/theme/src/button.scss
 create mode 100644 packages/design-system/theme/src/utilities/_float.scss
 create mode 100644 packages/design-system/theme/src/utilities/index.scss

diff --git a/packages/design-system/src/components/N8nButton/Button.stories.ts b/packages/design-system/src/components/N8nButton/Button.stories.ts
index ecf6d6734aba3..797642f5cb726 100644
--- a/packages/design-system/src/components/N8nButton/Button.stories.ts
+++ b/packages/design-system/src/components/N8nButton/Button.stories.ts
@@ -15,7 +15,7 @@ export default {
 		},
 		type: {
 			control: 'select',
-			options: ['primary', 'outline', 'light', 'text', 'tertiary'],
+			options: ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger'],
 		},
 		size: {
 			control: {
@@ -23,21 +23,26 @@ export default {
 				options: ['mini', 'small', 'medium', 'large', 'xlarge'],
 			},
 		},
-		loading: {
+		outline: {
 			control: {
 				type: 'boolean',
 			},
 		},
-		icon: {
+		text: {
 			control: {
-				type: 'text',
+				type: 'boolean',
 			},
 		},
-		circle: {
+		loading: {
 			control: {
 				type: 'boolean',
 			},
 		},
+		icon: {
+			control: {
+				type: 'text',
+			},
+		},
 		fullWidth: {
 			type: 'boolean',
 		},
diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index c3db3ca24f57d..fc9eeeb813d65 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -1,51 +1,41 @@
-<template functional>
-	<component
-		:is="$options.components.ElButton"
-		:plain="props.outline"
-		:disabled="props.disabled"
-		:size="props.size"
-		:loading="props.loading"
-		:title="props.title || props.label"
-		:class="$options.getClass(props, $style)"
-		:round="!props.circle && props.round"
-		:circle="props.circle"
-		:style="$options.styles(props)"
-		tabindex="0"
-		@click="(e) => listeners.click && listeners.click(e)"
+<template>
+	<button
+		:class="classes"
+		:disabled="disabled || loading"
+		:aria-disabled="ariaDisabled"
+		:aria-pressed="ariaPressed"
+		:aria-busy="ariaBusy"
+		aria-live="polite"
+		v-on="$listeners"
 	>
-		<span :class="$style.icon" v-if="props.loading || props.icon">
-			<component
-				:is="$options.components.N8nSpinner"
-				v-if="props.loading"
-				:size="props.size"
+		<span :class="$style.icon" v-if="loading || icon">
+			<n8n-spinner
+				v-if="loading"
+				:size="size"
 			/>
-			<component
-				:is="$options.components.N8nIcon"
-				v-else-if="props.icon"
-				:icon="props.icon"
-				:size="props.size"
+			<n8n-icon
+				v-else-if="icon"
+				:icon="icon"
+				:size="size"
 			/>
 		</span>
-		<span v-if="props.label">
-			<slot>{{ props.label }}</slot>
+		<span v-if="label || $slots.default">
+			<slot>{{ label }}</slot>
 		</span>
-	</component>
+	</button>
 </template>
 
 <script lang="ts">
+import Vue from 'vue';
 import N8nIcon from '../N8nIcon';
 import N8nSpinner from '../N8nSpinner';
-import ElButton from 'element-ui/lib/button';
 
-export default {
+export default Vue.extend({
 	name: 'n8n-button',
 	props: {
 		label: {
 			type: String,
 		},
-		title: {
-			type: String,
-		},
 		type: {
 			type: String,
 			default: 'primary',
@@ -66,6 +56,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		active: {
+			type: Boolean,
+			default: false,
+		},
 		outline: {
 			type: Boolean,
 			default: false,
@@ -77,11 +71,7 @@ export default {
 		icon: {
 			type: String,
 		},
-		round: {
-			type: Boolean,
-			default: false,
-		},
-		circle: {
+		block: {
 			type: Boolean,
 			default: false,
 		},
@@ -90,42 +80,92 @@ export default {
 			validator: (value: string): boolean =>
 				['left', 'right'].includes(value),
 		},
-		fullWidth: {
-			type: Boolean,
-			default: false,
-		},
-		transparentBackground: {
-			type: Boolean,
-			default: false,
-		},
 	},
 	components: {
-		ElButton,
 		N8nSpinner,
 		N8nIcon,
 	},
-	styles: (props: {
-		fullWidth?: boolean;
-		float?: string;
-	}): { float?: string; width?: string } => {
-		return {
-			...(props.float ? {float: props.float} : {}),
-			...(props.fullWidth ? {width: '100%'} : {}),
-		};
-	},
-	getClass(props: { type: string; outline: boolean; text: boolean; transparentBackground: boolean }, $style: any): string {
-		return `${$style['button']} ${$style[props.type]}` +
-			`${props.transparentBackground ? ` ${$style['transparent']}` : ''}` +
-			`${props.outline ? ` ${$style['outline']}` : ''}` +
-			`${props.text ? ` ${$style['text']}` : ''}`;
+	computed: {
+		ariaBusy(): string {
+			return this.loading ? 'true' : 'false';
+		},
+		ariaDisabled(): string {
+			return this.disabled ? 'true' : 'false';
+		},
+		ariaPressed(): string {
+			return this.active ? 'true' : 'false';
+		},
+		classes(): string {
+			return `button ${this.$style['button']} ${this.$style[this.type]}` +
+				`${this.outline ? ` ${this.$style['outline']}` : ''}` +
+				`${this.loading ? ` ${this.$style['loading']}` : ''}` +
+				`${this.size ? ` ${this.$style[this.size]}` : ''}` +
+				`${this.float ? ` ${this.$style[`float-${this.float}`]}` : ''}` +
+				`${this.text ? ` ${this.$style['text']}` : ''}` +
+				`${this.disabled ? ` ${this.$style['disabled']}` : ''}` +
+				`${this.active ? ` ${this.$style['active']}` : ''}` +
+				`${this.block ? ` ${this.$style['block']}` : ''}` +
+				`${this.icon || this.loading ? ` ${this.$style['icon']}` : ''}`;
+		},
 	},
-};
+});
 </script>
 
 <style lang="scss" module>
+@use '../../../theme/src/mixins/mixins';
+@use '../../../theme/src/mixins/utils';
+@use '../../../theme/src/mixins/function';
+@use '../../../theme/src/common/var';
 @import "../../utils";
 
+$disabled-border-color: var(--color-foreground-base);
+$loading-overlay-background-color: rgba(255, 255, 255, 0.35);
+
 .button {
+	display: inline-block;
+	line-height: 1;
+	white-space: nowrap;
+	cursor: pointer;
+
+	border: var(--border-width-base) var.$button-border-color var(--border-style-base);
+	color: var.$button-font-color;
+	background-color: var.$button-background-color;
+	font-weight: var(--font-weight-bold);
+	border-radius: var.$button-border-radius;
+	padding: var.$button-padding-vertical var.$button-padding-horizontal;
+	font-size: var.$button-font-size;
+
+	-webkit-appearance: none;
+	text-align: center;
+	box-sizing: border-box;
+	outline: none;
+	margin: 0;
+	transition: 0.3s;
+
+	@include utils.utils-user-select(none);
+
+	&:hover {
+		color: var.$button-hover-color;
+		border-color: var.$button-hover-border-color;
+		background-color: var.$button-hover-background-color;
+	}
+
+	&:focus {
+		border-color: var.$button-focus-outline-color;
+		outline: var.$focus-outline-width solid var.$button-focus-outline-color;
+	}
+
+	&:active {
+		color: var.$button-active-color;
+		border-color: var.$button-active-border-color;
+		background-color: var.$button-active-background-color;
+		outline: none;
+	}
+
+	&::-moz-focus-inner {
+		border: 0;
+	}
+
 	> i {
 		display: none;
 	}
@@ -141,20 +181,114 @@ export default {
 	}
 }
 
+/**
+ * States
+ */
+
+.loading,
+.active {
+	position: relative;
+	pointer-events: none;
+
+	&:before {
+		pointer-events: none;
+		content: '';
+		position: absolute;
+		left: -1px;
+		top: -1px;
+		right: -1px;
+		bottom: -1px;
+		border-radius: inherit;
+		background-color: $loading-overlay-background-color;
+	}
+}
+
+.disabled {
+	&,
+	&:hover,
+	&:active,
+	&:focus {
+		cursor: not-allowed;
+		background-image: none;
+		color: var.$button-disabled-font-color;
+		background-color: var.$button-disabled-background-color;
+		border-color: var.$button-disabled-border-color;
+	}
+}
+
+/**
+ * Sizes
+ */
+
+.mini {
+	--button-padding-vertical: var(--spacing-4xs);
+	--button-padding-horizontal: var(--spacing-2xs);
+	--button-font-size: var(--font-size-2xs);
+
+	&.icon-button {
+		height: 22px;
+		width: 22px;
+	}
+}
+
+.small {
+	--button-padding-vertical: var(--spacing-3xs);
+	--button-padding-horizontal: var(--spacing-xs);
+	--button-font-size: var(--font-size-2xs);
+
+	&.icon-button {
+		height: 26px;
+		width: 26px;
+	}
+}
+
+.medium {
+	--button-padding-vertical: var(--spacing-2xs);
+	--button-padding-horizontal: var(--spacing-xs);
+	--button-font-size: var(--font-size-2xs);
+
+	&.icon-button {
+		height: 32px;
+		width: 32px;
+	}
+}
+
+.large {
+	&.icon-button {
+		height: 42px;
+		width: 42px;
+	}
+}
+
+.xlarge {
+	--button-padding-vertical: var(--spacing-xs);
+	--button-padding-horizontal: var(--spacing-s);
+	--button-font-size: var(--font-size-m);
+
+	&.icon-button {
+		height: 46px;
+		width: 46px;
+	}
+}
+
+/**
+ * Colors
+ */
+
 .secondary {
 	--button-color: var(--color-primary);
 	--button-border-color: var(--color-primary);
 	--button-background-color: var(--color-white);
 
-	--button-active-background-color: var(--color-primary-900);
+	--button-active-background-color: var(--color-primary-tint-2);
 	--button-active-color: var(--color-primary);
 	--button-active-border-color: var(--color-primary);
 
-	--button-hover-background-color: var(--color-primary-950);
+	--button-hover-background-color: var(--color-primary-tint-3);
 	--button-hover-color: var(--color-primary);
 	--button-hover-border-color: var(--color-primary);
 
-	--button-focus-outline-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-600-l), 0.33);
+	--button-focus-outline-color: var(--color-primary-tint-1);
 }
 
 .tertiary {
@@ -218,10 +352,14 @@ export default {
 	--button-focus-outline-color: hsla(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l), 0.33);
 }
 
+/**
+ * Modifiers
+ */
+
 .outline {
-	--button-background-color: var(--color-foreground-xlight);
-	--button-disabled-background-color: var(--color-foreground-xlight);
-	--button-active-background-color: var(--color-foreground-xlight);
+	--button-background-color: transparent;
+	--button-disabled-background-color: transparent;
+	--button-active-background-color: transparent;
 
 	&.primary {
 		--button-color: var(--color-primary);
@@ -304,4 +442,16 @@ export default {
 		display: block;
 	}
 }
+
+.block {
+	width: 100%;
+}
+
+.float-left {
+	float: left;
+}
+
+.float-right {
+	float: right;
+}
 </style>
diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.stories.js b/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts
similarity index 84%
rename from packages/design-system/src/components/N8nIconButton/IconButton.stories.js
rename to packages/design-system/src/components/N8nIconButton/IconButton.stories.ts
index fe99328783644..1d66494061521 100644
--- a/packages/design-system/src/components/N8nIconButton/IconButton.stories.js
+++ b/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts
@@ -1,5 +1,7 @@
+/* tslint:disable:variable-name */
 import N8nIconButton from './IconButton.vue';
 import { action } from '@storybook/addon-actions';
+import { StoryFn } from "@storybook/vue";
 
 export default {
 	title: 'Atoms/Icon Button',
@@ -7,17 +9,17 @@ export default {
 	argTypes: {
 		type: {
 			control: 'select',
-			options: ['primary', 'outline', 'light', 'text'],
-		},
-		title: {
-			control: 'text',
+			options: ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger'],
 		},
 		size: {
 			control: {
 				type: 'select',
-				options: ['small', 'medium', 'large', 'xlarge'],
+				options: ['mini', 'small', 'medium', 'large', 'xlarge'],
 			},
 		},
+		title: {
+			control: 'text',
+		},
 		loading: {
 			control: {
 				type: 'boolean',
@@ -28,12 +30,6 @@ export default {
 				type: 'text',
 			},
 		},
-		theme: {
-			control: {
-				type: 'select',
-				options: ['success', 'warning', 'danger'],
-			},
-		},
 	},
 	parameters: {
 		backgrounds: { default: '--color-background-light' },
@@ -44,7 +40,7 @@ const methods = {
 	onClick: action('click'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nIconButton,
@@ -59,7 +55,7 @@ Button.args = {
 	title: 'my title',
 };
 
-const ManyTemplate = (args, { argTypes }) => ({
+const ManyTemplate: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nIconButton,
diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.vue b/packages/design-system/src/components/N8nIconButton/IconButton.vue
index 987941bc60be9..58f5787196e80 100644
--- a/packages/design-system/src/components/N8nIconButton/IconButton.vue
+++ b/packages/design-system/src/components/N8nIconButton/IconButton.vue
@@ -1,17 +1,5 @@
-<template functional>
-	<component :is="$options.components.N8nButton"
-		:type="props.type"
-		:disabled="props.disabled"
-		:size="props.size"
-		:loading="props.loading"
-		:title="props.title"
-		:icon="props.icon"
-		:theme="props.theme"
-	    :outline="props.outline"
-	    :text="props.text"
-		@click="(e) => listeners.click && listeners.click(e)"
-		circle
-	/>
+<template>
+	<n8n-button :class="`icon-button ${$style['icon-button']} ${$style[size]}`" v-bind="$props" v-on="$listeners"/>
 </template>
 
 <script lang="ts">
@@ -25,36 +13,79 @@ export default {
 	props: {
 		type: {
 			type: String,
-		},
-		title: {
-			type: String,
+			default: 'primary',
+			validator: (value: string): boolean =>
+				['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger'].includes(value),
 		},
 		size: {
 			type: String,
 			default: 'medium',
+			validator: (value: string): boolean =>
+				['mini', 'small', 'medium', 'large', 'xlarge'].includes(value),
 		},
 		loading: {
 			type: Boolean,
 			default: false,
 		},
-		outline: {
+		disabled: {
 			type: Boolean,
 			default: false,
 		},
-		text: {
+		active: {
 			type: Boolean,
 			default: false,
 		},
-		disabled: {
+		outline: {
+			type: Boolean,
+			default: false,
+		},
+		text: {
 			type: Boolean,
 			default: false,
 		},
 		icon: {
+			type: String,
 			required: true,
 		},
-		theme: {
+		float: {
 			type: String,
+			validator: (value: string): boolean =>
+				['left', 'right'].includes(value),
 		},
 	},
 };
 </script>
+
+<style lang="scss" module>
+.icon-button {
+  padding: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.mini {
+	height: 22px;
+	width: 22px;
+}
+
+.small {
+	height: 26px;
+	width: 26px;
+}
+
+.medium {
+	height: 32px;
+	width: 32px;
+}
+
+.large {
+	height: 42px;
+	width: 42px;
+}
+
+.xlarge {
+	height: 46px;
+	width: 46px;
+}
+</style>
diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss
index 30a0f4726b98c..0a17a20b00b7d 100644
--- a/packages/design-system/theme/src/_tokens.scss
+++ b/packages/design-system/theme/src/_tokens.scss
@@ -1,425 +1,437 @@
 @use 'sass:math';
 
 @mixin theme {
-	--color-primary-h: 6.9;
-	--color-primary-s: 100%;
-	--color-primary-l: 67.6%;
-	--color-primary: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-l)
-	);
-
-	--color-primary-tint-1-l: 88%;
-	--color-primary-tint-1: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-tint-1-l)
-	);
-
-	--color-primary-tint-2-l: 94.5%;
-	--color-primary-tint-2: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-tint-2-l)
-	);
-
-	--color-primary-tint-3-l: 96.9%;
-	--color-primary-tint-3: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-tint-3-l)
-	);
-
-	--color-primary-shade-1-l: 57.6%;
-	--color-primary-shade-1: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-shade-1-l)
-	);
-
-	--color-primary-shade-2-l: 23%;
-	--color-primary-shade-2: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-shade-2-l)
-	);
-
-	--color-avatar-accent-1-h: 40;
-	--color-avatar-accent-1-s: 15.3%;
-	--color-avatar-accent-1-l: 88.4%;
-	--color-avatar-accent-1: hsl(
-		var(--color-avatar-accent-1-h),
-		var(--color-avatar-accent-1-s),
-		var(--color-avatar-accent-1-l)
-	);
-
-	--color-avatar-accent-2-h: 212;
-	--color-avatar-accent-2-s: 71%;
-	--color-avatar-accent-2-l: 48.6%;
-	--color-avatar-accent-2: hsl(
-		var(--color-avatar-accent-2-h),
-		var(--color-avatar-accent-2-s),
-		var(--color-avatar-accent-2-l)
-	);
-
-	--color-secondary-h: 247;
-	--color-secondary-s: 49%;
-	--color-secondary-l: 53%;
-	--color-secondary: hsl(
-		var(--color-secondary-h),
-		var(--color-secondary-s),
-		var(--color-secondary-l),
-	);
-
-	--color-success-h: 150.4;
-	--color-success-s: 60%;
-	--color-success-l: 40.4%;
-	--color-success: hsl(
-		var(--color-success-h),
-		var(--color-success-s),
-		var(--color-success-l)
-	);
-
-	--color-success-tint-1-l: 90%;
-	--color-success-tint-1: hsl(
-		var(--color-success-h),
-		var(--color-success-s),
-		var(--color-success-tint-1-l)
-	);
-
-	--color-success-tint-2-l: 94.9%;
-	--color-success-tint-2: hsl(
-		var(--color-success-h),
-		var(--color-success-s),
-		var(--color-success-tint-2-l)
-	);
-
-	--color-success-light-h: 150;
-	--color-success-light-s: 54%;
-	--color-success-light-l: 70%;
-	--color-success-light: hsl(
-		var(--color-success-light-h),
-		var(--color-success-light-s),
-		var(--color-success-light-l)
-	);
-
-	--color-warning-h: 36;
-	--color-warning-s: 77%;
-	--color-warning-l: 57%;
-	--color-warning: hsl(
-		var(--color-warning-h),
-		var(--color-warning-s),
-		var(--color-warning-l)
-	);
-
-	--color-warning-tint-1-h: 35;
-	--color-warning-tint-1-s: 78%;
-	--color-warning-tint-1-l: 84%;
-	--color-warning-tint-1: hsl(
-		var(--color-warning-h),
-		var(--color-warning-s),
-		var(--color-warning-tint-1-l)
-	);
-
-	--color-warning-tint-2-h: 34;
-	--color-warning-tint-2-s: 80%;
-	--color-warning-tint-2-l: 96%;
-	--color-warning-tint-2: hsl(
-		var(--color-warning-tint-2-h),
-		var(--color-warning-tint-2-s),
-		var(--color-warning-tint-2-l)
-	);
-
-	--color-danger-h: 0;
-	--color-danger-s: 87.6%;
-	--color-danger-l: 65.3%;
-	--color-danger: hsl(
-		var(--color-danger-h),
-		var(--color-danger-s),
-		var(--color-danger-l)
-	);
-
-	--color-danger-tint-1-l: 93.9%;
-	--color-danger-tint-1: hsl(
-		var(--color-danger-h),
-		var(--color-danger-s),
-		var(--color-danger-tint-1-l)
-	);
-	--color-danger-tint-2-l: 96.9%;
-	--color-danger-tint-2: hsl(
-		var(--color-danger-h),
-		var(--color-danger-s),
-		var(--color-danger-tint-2-l)
-	);
-
-	--color-info-h: 220;
-	--color-info-s: 4%;
-	--color-info-l: 58%;
-	--color-info: hsl(
-		var(--color-info-h),
-		var(--color-info-s),
-		var(--color-info-l)
-	);
-
-	--color-info-tint-1-l: 88%;
-	--color-info-tint-1: hsl(
-		var(--color-info-h),
-		var(--color-info-s),
-		var(--color-info-tint-1-l)
-	);
-	--color-info-tint-2-l: 96%;
-	--color-info-tint-2: hsl(
-		var(--color-info-h),
-		var(--color-info-s),
-		var(--color-info-tint-2-l)
-	);
-
-	--color-neutral-h: 220;
-	--color-neutral-s: 7.4%;
-	--color-neutral-l: 50%;
-	--color-neutral: hsl(
-		var(--color-neutral-h),
-		var(--color-neutral-s),
-		var(--color-neutral-l)
-	);
-
-	--color-text-dark-h: 0;
-	--color-text-dark-s: 0%;
-	--color-text-dark-l: 33.3%;
-	--color-text-dark: hsl(
-		var(--color-text-dark-h),
-		var(--color-text-dark-s),
-		var(--color-text-dark-l)
-	);
-
-	--color-text-base-h: 240;
-	--color-text-base-s: 4%;
-	--color-text-base-l: 51%;
-	--color-text-base: hsl(
-		var(--color-text-base-h),
-		var(--color-text-base-s),
-		var(--color-text-base-l)
-	);
-
-	--color-text-light-h: 220;
-	--color-text-light-s: 4.2%;
-	--color-text-light-l: 58.2%;
-	--color-text-light: hsl(
-		var(--color-text-light-h),
-		var(--color-text-light-s),
-		var(--color-text-light-l)
-	);
-
-	--color-text-lighter-h: 222;
-	--color-text-lighter-s: 16.7%;
-	--color-text-lighter-l: 88.2%;
-	--color-text-lighter: hsl(
-		var(--color-text-lighter-h),
-		var(--color-text-lighter-s),
-		var(--color-text-lighter-l)
-	);
-
-	--color-text-xlight-h: 0;
-	--color-text-xlight-s: 0%;
-	--color-text-xlight-l: 100%;
-	--color-text-xlight: hsl(
-		var(--color-text-xlight-h),
-		var(--color-text-xlight-s),
-		var(--color-text-xlight-l)
-	);
-
-	--color-foreground-xdark-h: 220;
-	--color-foreground-xdark-s: 7.4%;
-	--color-foreground-xdark-l: 52.5%;
-	--color-foreground-xdark: hsl(
-		var(--color-foreground-xdark-h),
-		var(--color-foreground-xdark-s),
-		var(--color-foreground-xdark-l)
-	);
-
-	--color-foreground-dark-h: 228;
-	--color-foreground-dark-s: 9.6%;
-	--color-foreground-dark-l: 79.6%;
-	--color-foreground-dark: hsl(
-		var(--color-foreground-dark-h),
-		var(--color-foreground-dark-s),
-		var(--color-foreground-dark-l)
-	);
-
-	--color-foreground-base-h: 220;
-	--color-foreground-base-s: 20%;
-	--color-foreground-base-l: 88.2%;
-	--color-foreground-base: hsl(
-		var(--color-foreground-base-h),
-		var(--color-foreground-base-s),
-		var(--color-foreground-base-l)
-	);
-
-	--color-foreground-light-h: 0;
-	--color-foreground-light-s: 0%;
-	--color-foreground-light-l: 93.3%;
-	--color-foreground-light: hsl(
-		var(--color-foreground-light-h),
-		var(--color-foreground-light-s),
-		var(--color-foreground-light-l)
-	);
-
-	--color-foreground-xlight-h: 0;
-	--color-foreground-xlight-s: 0%;
-	--color-foreground-xlight-l: 100%;
-	--color-foreground-xlight: hsl(
-		var(--color-foreground-xlight-h),
-		var(--color-foreground-xlight-s),
-		var(--color-foreground-xlight-l)
-	);
-
-	--color-background-dark-h: 240;
-	--color-background-dark-s: 4.2%;
-	--color-background-dark-l: 18.8%;
-	--color-background-dark: hsl(
-		var(--color-background-dark-h),
-		var(--color-background-dark-s),
-		var(--color-background-dark-l)
-	);
-
-	--color-background-base-h: 220;
-	--color-background-base-s: 30%;
-	--color-background-base-l: 96.1%;
-	--color-background-base: hsl(
-		var(--color-background-base-h),
-		var(--color-background-base-s),
-		var(--color-background-base-l)
-	);
-
-	--color-background-light-h: 220;
-	--color-background-light-s: 60%;
-	--color-background-light-l: 99%;
-	--color-background-light: hsl(
-		var(--color-background-light-h),
-		var(--color-background-light-s),
-		var(--color-background-light-l)
-	);
-
-	--color-background-lighter-h: 252;
-	--color-background-lighter-s: 71.4%;
-	--color-background-lighter-l: 98.6%;
-	--color-background-lighter: hsl(
-		var(--color-background-lighter-h),
-		var(--color-background-lighter-s),
-		var(--color-background-lighter-l)
-	);
-
-	--color-background-xlight-h: 0;
-	--color-background-xlight-s: 0%;
-	--color-background-xlight-l: 100%;
-	--color-background-xlight: hsl(
-		var(--color-background-xlight-h),
-		var(--color-background-xlight-s),
-		var(--color-background-xlight-l)
-	);
-
-	--color-canvas-dot-h: 204;
-	--color-canvas-dot-s: 15.6%;
-	--color-canvas-dot-l: 87.5%;
-	--color-canvas-dot: hsl(
-		var(--color-canvas-dot-h),
-		var(--color-canvas-dot-s),
-		var(--color-canvas-dot-l)
-	);
-
-	--color-canvas-background-h: 260;
-	--color-canvas-background-s: 100%;
-	--color-canvas-background-l: 99.4%;
-	--color-canvas-background: hsl(
-		var(--color-canvas-background-h),
-		var(--color-canvas-background-s),
-		var(--color-canvas-background-l)
-	);
-
-	--color-json-default: #5045A1;
-	--color-json-null:  var(--color-danger);
-	--color-json-boolean: #1d8ce0;
-	--color-json-number: #1d8ce0;
-	--color-json-string: #5045A1;
-	--color-json-key: var(--color-text-dark);
-	--color-json-brackets: var(--color-text-dark);
-	--color-json-brackets-hover: #1890ff;
-	--color-json-line: #bfcbd9;
-	--color-json-highlight: #E2E5EE;
-
-	--color-sticky-default-background-h: 46;
-	--color-sticky-default-background-s: 100%;
-	--color-sticky-default-background-l: 92%;
-	--color-sticky-default-background: hsl(
-		var(--color-sticky-default-background-h),
-		var(--color-sticky-default-background-s),
-		var(--color-sticky-default-background-l)
-	);
-
-	--color-sticky-default-border-h: 43;
-	--color-sticky-default-border-s: 75%;
-	--color-sticky-default-border-l: 80%;
-	--color-sticky-default-border: hsl(
-		var(--color-sticky-default-border-h),
-		var(--color-sticky-default-border-s),
-		var(--color-sticky-default-border-l)
-	);
-
-  	--color-white: hsl(0, 0, 100, 1);
-
-	@each $color in ('primary', 'neutral', 'secondary', 'success', 'warning', 'danger') {
-	  	@each $shade in (50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950) {
-			--color-#{$color}-#{$shade}-l: #{math.div($shade, 10)}#{'%'};
-			--color-#{$color}-#{$shade}: hsl(var(--color-#{$color}-h), var(--color-#{$color}-s), var(--color-#{$color}-#{$shade}-l));
-	  	}
+  --color-primary-h: 7;
+  --color-primary-s: 100%;
+  --color-primary-l: 68%;
+  --color-primary: hsl(
+				  var(--color-primary-h),
+				  var(--color-primary-s),
+				  var(--color-primary-l)
+  );
+
+  --color-primary-tint-1-h: 11;
+  --color-primary-tint-1-s: 100%;
+  --color-primary-tint-1-l: 88%;
+  --color-primary-tint-1: hsl(
+				  var(--color-primary-tint-2-h),
+				  var(--color-primary-tint-2-s),
+				  var(--color-primary-tint-1-l)
+  );
+
+  --color-primary-tint-2-h: 11;
+  --color-primary-tint-2-s: 100%;
+  --color-primary-tint-2-l: 95%;
+  --color-primary-tint-2: hsl(
+				  var(--color-primary-tint-2-h),
+				  var(--color-primary-tint-2-s),
+				  var(--color-primary-tint-2-l)
+  );
+
+  --color-primary-tint-3-h: 4;
+  --color-primary-tint-3-s: 100%;
+  --color-primary-tint-3-l: 97%;
+  --color-primary-tint-3: hsl(
+				  var(--color-primary-tint-3-h),
+				  var(--color-primary-tint-3-s),
+				  var(--color-primary-tint-3-l)
+  );
+
+  --color-primary-shade-1-l: 57.6%;
+  --color-primary-shade-1: hsl(
+				  var(--color-primary-h),
+				  var(--color-primary-s),
+				  var(--color-primary-shade-1-l)
+  );
+
+  --color-primary-shade-2-l: 23%;
+  --color-primary-shade-2: hsl(
+				  var(--color-primary-h),
+				  var(--color-primary-s),
+				  var(--color-primary-shade-2-l)
+  );
+
+  --color-avatar-accent-1-h: 40;
+  --color-avatar-accent-1-s: 15.3%;
+  --color-avatar-accent-1-l: 88.4%;
+  --color-avatar-accent-1: hsl(
+				  var(--color-avatar-accent-1-h),
+				  var(--color-avatar-accent-1-s),
+				  var(--color-avatar-accent-1-l)
+  );
+
+  --color-avatar-accent-2-h: 212;
+  --color-avatar-accent-2-s: 71%;
+  --color-avatar-accent-2-l: 48.6%;
+  --color-avatar-accent-2: hsl(
+				  var(--color-avatar-accent-2-h),
+				  var(--color-avatar-accent-2-s),
+				  var(--color-avatar-accent-2-l)
+  );
+
+  --color-secondary-h: 247;
+  --color-secondary-s: 49%;
+  --color-secondary-l: 53%;
+  --color-secondary: hsl(
+				  var(--color-secondary-h),
+				  var(--color-secondary-s),
+				  var(--color-secondary-l),
+  );
+
+  --color-success-h: 150.4;
+  --color-success-s: 60%;
+  --color-success-l: 40.4%;
+  --color-success: hsl(
+				  var(--color-success-h),
+				  var(--color-success-s),
+				  var(--color-success-l)
+  );
+
+  --color-success-tint-1-l: 90%;
+  --color-success-tint-1: hsl(
+				  var(--color-success-h),
+				  var(--color-success-s),
+				  var(--color-success-tint-1-l)
+  );
+
+  --color-success-tint-2-l: 94.9%;
+  --color-success-tint-2: hsl(
+				  var(--color-success-h),
+				  var(--color-success-s),
+				  var(--color-success-tint-2-l)
+  );
+
+  --color-success-light-h: 150;
+  --color-success-light-s: 54%;
+  --color-success-light-l: 70%;
+  --color-success-light: hsl(
+				  var(--color-success-light-h),
+				  var(--color-success-light-s),
+				  var(--color-success-light-l)
+  );
+
+  --color-warning-h: 36;
+  --color-warning-s: 77%;
+  --color-warning-l: 57%;
+  --color-warning: hsl(
+				  var(--color-warning-h),
+				  var(--color-warning-s),
+				  var(--color-warning-l)
+  );
+
+  --color-warning-tint-1-h: 35;
+  --color-warning-tint-1-s: 78%;
+  --color-warning-tint-1-l: 84%;
+  --color-warning-tint-1: hsl(
+				  var(--color-warning-h),
+				  var(--color-warning-s),
+				  var(--color-warning-tint-1-l)
+  );
+
+  --color-warning-tint-2-h: 34;
+  --color-warning-tint-2-s: 80%;
+  --color-warning-tint-2-l: 96%;
+  --color-warning-tint-2: hsl(
+				  var(--color-warning-tint-2-h),
+				  var(--color-warning-tint-2-s),
+				  var(--color-warning-tint-2-l)
+  );
+
+  --color-danger-h: 0;
+  --color-danger-s: 87.6%;
+  --color-danger-l: 65.3%;
+  --color-danger: hsl(
+				  var(--color-danger-h),
+				  var(--color-danger-s),
+				  var(--color-danger-l)
+  );
+
+  --color-danger-tint-1-l: 93.9%;
+  --color-danger-tint-1: hsl(
+				  var(--color-danger-h),
+				  var(--color-danger-s),
+				  var(--color-danger-tint-1-l)
+  );
+  --color-danger-tint-2-l: 96.9%;
+  --color-danger-tint-2: hsl(
+				  var(--color-danger-h),
+				  var(--color-danger-s),
+				  var(--color-danger-tint-2-l)
+  );
+
+  --color-info-h: 220;
+  --color-info-s: 4%;
+  --color-info-l: 58%;
+  --color-info: hsl(
+				  var(--color-info-h),
+				  var(--color-info-s),
+				  var(--color-info-l)
+  );
+
+  --color-info-tint-1-l: 88%;
+  --color-info-tint-1: hsl(
+				  var(--color-info-h),
+				  var(--color-info-s),
+				  var(--color-info-tint-1-l)
+  );
+  --color-info-tint-2-l: 96%;
+  --color-info-tint-2: hsl(
+				  var(--color-info-h),
+				  var(--color-info-s),
+				  var(--color-info-tint-2-l)
+  );
+
+  --color-neutral-h: 220;
+  --color-neutral-s: 7.4%;
+  --color-neutral-l: 50%;
+  --color-neutral: hsl(
+				  var(--color-neutral-h),
+				  var(--color-neutral-s),
+				  var(--color-neutral-l)
+  );
+
+  --color-text-dark-h: 0;
+  --color-text-dark-s: 0%;
+  --color-text-dark-l: 33.3%;
+  --color-text-dark: hsl(
+				  var(--color-text-dark-h),
+				  var(--color-text-dark-s),
+				  var(--color-text-dark-l)
+  );
+
+  --color-text-base-h: 240;
+  --color-text-base-s: 4%;
+  --color-text-base-l: 51%;
+  --color-text-base: hsl(
+				  var(--color-text-base-h),
+				  var(--color-text-base-s),
+				  var(--color-text-base-l)
+  );
+
+  --color-text-light-h: 220;
+  --color-text-light-s: 4.2%;
+  --color-text-light-l: 58.2%;
+  --color-text-light: hsl(
+				  var(--color-text-light-h),
+				  var(--color-text-light-s),
+				  var(--color-text-light-l)
+  );
+
+  --color-text-lighter-h: 222;
+  --color-text-lighter-s: 16.7%;
+  --color-text-lighter-l: 88.2%;
+  --color-text-lighter: hsl(
+				  var(--color-text-lighter-h),
+				  var(--color-text-lighter-s),
+				  var(--color-text-lighter-l)
+  );
+
+  --color-text-xlight-h: 0;
+  --color-text-xlight-s: 0%;
+  --color-text-xlight-l: 100%;
+  --color-text-xlight: hsl(
+				  var(--color-text-xlight-h),
+				  var(--color-text-xlight-s),
+				  var(--color-text-xlight-l)
+  );
+
+  --color-foreground-xdark-h: 220;
+  --color-foreground-xdark-s: 7.4%;
+  --color-foreground-xdark-l: 52.5%;
+  --color-foreground-xdark: hsl(
+				  var(--color-foreground-xdark-h),
+				  var(--color-foreground-xdark-s),
+				  var(--color-foreground-xdark-l)
+  );
+
+  --color-foreground-dark-h: 228;
+  --color-foreground-dark-s: 9.6%;
+  --color-foreground-dark-l: 79.6%;
+  --color-foreground-dark: hsl(
+				  var(--color-foreground-dark-h),
+				  var(--color-foreground-dark-s),
+				  var(--color-foreground-dark-l)
+  );
+
+  --color-foreground-base-h: 220;
+  --color-foreground-base-s: 20%;
+  --color-foreground-base-l: 88.2%;
+  --color-foreground-base: hsl(
+				  var(--color-foreground-base-h),
+				  var(--color-foreground-base-s),
+				  var(--color-foreground-base-l)
+  );
+
+  --color-foreground-light-h: 0;
+  --color-foreground-light-s: 0%;
+  --color-foreground-light-l: 93.3%;
+  --color-foreground-light: hsl(
+				  var(--color-foreground-light-h),
+				  var(--color-foreground-light-s),
+				  var(--color-foreground-light-l)
+  );
+
+  --color-foreground-xlight-h: 0;
+  --color-foreground-xlight-s: 0%;
+  --color-foreground-xlight-l: 100%;
+  --color-foreground-xlight: hsl(
+				  var(--color-foreground-xlight-h),
+				  var(--color-foreground-xlight-s),
+				  var(--color-foreground-xlight-l)
+  );
+
+  --color-background-dark-h: 240;
+  --color-background-dark-s: 4.2%;
+  --color-background-dark-l: 18.8%;
+  --color-background-dark: hsl(
+				  var(--color-background-dark-h),
+				  var(--color-background-dark-s),
+				  var(--color-background-dark-l)
+  );
+
+  --color-background-base-h: 220;
+  --color-background-base-s: 30%;
+  --color-background-base-l: 96.1%;
+  --color-background-base: hsl(
+				  var(--color-background-base-h),
+				  var(--color-background-base-s),
+				  var(--color-background-base-l)
+  );
+
+  --color-background-light-h: 220;
+  --color-background-light-s: 60%;
+  --color-background-light-l: 99%;
+  --color-background-light: hsl(
+				  var(--color-background-light-h),
+				  var(--color-background-light-s),
+				  var(--color-background-light-l)
+  );
+
+  --color-background-lighter-h: 252;
+  --color-background-lighter-s: 71.4%;
+  --color-background-lighter-l: 98.6%;
+  --color-background-lighter: hsl(
+				  var(--color-background-lighter-h),
+				  var(--color-background-lighter-s),
+				  var(--color-background-lighter-l)
+  );
+
+  --color-background-xlight-h: 0;
+  --color-background-xlight-s: 0%;
+  --color-background-xlight-l: 100%;
+  --color-background-xlight: hsl(
+				  var(--color-background-xlight-h),
+				  var(--color-background-xlight-s),
+				  var(--color-background-xlight-l)
+  );
+
+  --color-canvas-dot-h: 204;
+  --color-canvas-dot-s: 15.6%;
+  --color-canvas-dot-l: 87.5%;
+  --color-canvas-dot: hsl(
+				  var(--color-canvas-dot-h),
+				  var(--color-canvas-dot-s),
+				  var(--color-canvas-dot-l)
+  );
+
+  --color-canvas-background-h: 260;
+  --color-canvas-background-s: 100%;
+  --color-canvas-background-l: 99.4%;
+  --color-canvas-background: hsl(
+				  var(--color-canvas-background-h),
+				  var(--color-canvas-background-s),
+				  var(--color-canvas-background-l)
+  );
+
+  --color-json-default: #5045A1;
+  --color-json-null: var(--color-danger);
+  --color-json-boolean: #1d8ce0;
+  --color-json-number: #1d8ce0;
+  --color-json-string: #5045A1;
+  --color-json-key: var(--color-text-dark);
+  --color-json-brackets: var(--color-text-dark);
+  --color-json-brackets-hover: #1890ff;
+  --color-json-line: #bfcbd9;
+  --color-json-highlight: #E2E5EE;
+
+  --color-sticky-default-background-h: 46;
+  --color-sticky-default-background-s: 100%;
+  --color-sticky-default-background-l: 92%;
+  --color-sticky-default-background: hsl(
+				  var(--color-sticky-default-background-h),
+				  var(--color-sticky-default-background-s),
+				  var(--color-sticky-default-background-l)
+  );
+
+  --color-sticky-default-border-h: 43;
+  --color-sticky-default-border-s: 75%;
+  --color-sticky-default-border-l: 80%;
+  --color-sticky-default-border: hsl(
+				  var(--color-sticky-default-border-h),
+				  var(--color-sticky-default-border-s),
+				  var(--color-sticky-default-border-l)
+  );
+
+  --color-white-h: 0;
+  --color-white-s: 0%;
+  --color-white-l: 100%;
+  --color-white: hsl(
+				  var(--color-white-h),
+				  var(--color-white-s),
+				  var(--color-white-l)
+  );
+
+  @each $color in ('primary', 'neutral', 'secondary', 'success', 'warning', 'danger') {
+	@each $shade in (50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950) {
+	  --color-#{$color}-#{$shade}-l: #{math.div($shade, 10)}#{'%'};
+	  --color-#{$color}-#{$shade}: hsl(var(--color-#{$color}-h), var(--color-#{$color}-s), var(--color-#{$color}-#{$shade}-l));
 	}
-
-	--border-radius-xlarge: 12px;
-	--border-radius-large: 8px;
-	--border-radius-base: 4px;
-	--border-radius-small: 2px;
-	--border-color-base: var(--color-foreground-base);
-	--border-color-light: var(--color-foreground-light);
-
-	--border-style-base: solid;
-	--border-width-base: 1px;
-	--border-base: var(--border-width-base) var(--border-style-base)
-		var(--color-foreground-base);
-
-	--font-size-3xs: 0.625rem;
-	--font-size-2xs: 0.75rem;
-	--font-size-xs: 0.8125rem;
-	--font-size-s: 0.875rem;
-	--font-size-m: 1rem;
-	--font-size-l: 1.125rem;
-	--font-size-xl: 1.25rem;
-	--font-size-2xl: 1.75rem;
-
-	--font-line-height-compact: 1.25;
-	--font-line-height-regular: 1.3;
-	--font-line-height-loose: 1.35;
-	--font-line-height-xloose: 1.5;
-
-	--font-weight-regular: 400;
-	--font-weight-bold: 600;
-	--font-family: 'Open Sans', sans-serif;
-
-	--spacing-5xs: 0.125rem;
-	--spacing-4xs: 0.25rem;
-	--spacing-3xs: 0.375rem;
-	--spacing-2xs: 0.5rem;
-	--spacing-xs: 0.75rem;
-	--spacing-s: 1rem;
-	--spacing-m: 1.25rem;
-	--spacing-l: 1.5rem;
-	--spacing-xl: 2rem;
-	--spacing-2xl: 3rem;
-	--spacing-3xl: 4rem;
-	--spacing-4xl: 8rem;
-	--spacing-5xl: 16rem;
+  }
+
+  --border-radius-xlarge: 12px;
+  --border-radius-large: 8px;
+  --border-radius-base: 4px;
+  --border-radius-small: 2px;
+  --border-color-base: var(--color-foreground-base);
+  --border-color-light: var(--color-foreground-light);
+
+  --border-style-base: solid;
+  --border-width-base: 1px;
+  --border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+
+  --font-size-3xs: 0.625rem;
+  --font-size-2xs: 0.75rem;
+  --font-size-xs: 0.8125rem;
+  --font-size-s: 0.875rem;
+  --font-size-m: 1rem;
+  --font-size-l: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.75rem;
+
+  --font-line-height-compact: 1.25;
+  --font-line-height-regular: 1.3;
+  --font-line-height-loose: 1.35;
+  --font-line-height-xloose: 1.5;
+
+  --font-weight-regular: 400;
+  --font-weight-bold: 600;
+  --font-family: 'Open Sans', sans-serif;
+
+  --spacing-5xs: 0.125rem;
+  --spacing-4xs: 0.25rem;
+  --spacing-3xs: 0.375rem;
+  --spacing-2xs: 0.5rem;
+  --spacing-xs: 0.75rem;
+  --spacing-s: 1rem;
+  --spacing-m: 1.25rem;
+  --spacing-l: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
+  --spacing-4xl: 8rem;
+  --spacing-5xl: 16rem;
 }
 
 :root {
-	@include theme;
+  @include theme;
 }
diff --git a/packages/design-system/theme/src/button.scss b/packages/design-system/theme/src/button.scss
deleted file mode 100644
index 50850f34385f7..0000000000000
--- a/packages/design-system/theme/src/button.scss
+++ /dev/null
@@ -1,140 +0,0 @@
-@charset "UTF-8";
-@use 'mixins/mixins';
-@use 'mixins/utils';
-@use 'mixins/function';
-@use 'common/var';
-
-$disabled-border-color: var(--color-foreground-base);
-
-$loading-overlay-background-color: rgba(255, 255, 255, 0.35);
-
-@include mixins.b(button) {
-	display: inline-block;
-	line-height: 1;
-	white-space: nowrap;
-	cursor: pointer;
-
-	border: var(--border-width-base) var.$button-border-color var(--border-style-base);
-	color: var.$button-font-color;
-	background-color: var.$button-background-color;
-	font-weight: var(--font-weight-bold);
-	border-radius: var.$button-border-radius;
-	padding: var.$button-padding-vertical var.$button-padding-horizontal;
-	font-size: var.$button-font-size;
-
-	-webkit-appearance: none;
-	text-align: center;
-	box-sizing: border-box;
-	outline: none;
-	margin: 0;
-	transition: 0.3s;
-
-	@include utils.utils-user-select(none);
-
-
-  	&:hover {
-		color: var.$button-hover-color;
-		border-color: var.$button-hover-border-color;
-		background-color: var.$button-hover-background-color;
-  	}
-
-	&:active {
-		color: var.$button-active-color;
-		border-color: var.$button-active-border-color;
-		background-color: var.$button-active-background-color;
-		outline: none;
-	}
-
-  	&:focus {
-	  	border-color: var.$button-focus-outline-color;
-	    outline: var.$focus-outline-width solid var.$button-focus-outline-color;
-	}
-
-	&::-moz-focus-inner {
-		border: 0;
-	}
-
-	@include mixins.when(loading) {
-		position: relative;
-		pointer-events: none;
-
-		&:before {
-			pointer-events: none;
-			content: '';
-			position: absolute;
-			left: -1px;
-			top: -1px;
-			right: -1px;
-			bottom: -1px;
-			border-radius: inherit;
-			background-color: $loading-overlay-background-color;
-		}
-	}
-
-	@include mixins.when(disabled) {
-		&,
-		&:hover,
-		&:active,
-		&:focus {
-			cursor: not-allowed;
-			background-image: none;
-			color: var.$button-disabled-font-color;
-			background-color: var.$button-disabled-background-color;
-			border-color: var.$button-disabled-border-color;
-		}
-	}
-
-	@include mixins.when(round) {
-		--button-border-radius: 20px;
-	}
-
-	@include mixins.when(circle) {
-		--button-padding-vertical: var(--spacing-xs);
-		--button-padding-horizontal: var(--spacing-xs);
-		--button-border-radius: 50%;
-	}
-
-	@include mixins.m(mini) {
-		--button-padding-vertical: var(--spacing-4xs);
-		--button-padding-horizontal: var(--spacing-2xs);
-		--button-font-size: var(--font-size-2xs);
-
-		@include mixins.when(circle) {
-			--button-padding-vertical: var(--spacing-4xs);
-			--button-padding-horizontal: var(--spacing-4xs);
-		}
-	}
-
-	@include mixins.m(small) {
-		--button-padding-vertical: var(--spacing-3xs);
-		--button-padding-horizontal: var(--spacing-xs);
-		--button-font-size: var(--font-size-2xs);
-
-		@include mixins.when(circle) {
-			--button-padding-vertical: var(--spacing-3xs);
-			--button-padding-horizontal: var(--spacing-3xs);
-		}
-	}
-
-	@include mixins.m(medium) {
-		--button-padding-vertical: var(--spacing-2xs);
-		--button-padding-horizontal: var(--spacing-xs);
-		--button-font-size: var(--font-size-2xs);
-
-		@include mixins.when(circle) {
-			--button-padding-vertical: var(--spacing-2xs);
-			--button-padding-horizontal: var(--spacing-2xs);
-		}
-	}
-
-	@include mixins.m(xlarge) {
-		--button-padding-vertical: var(--spacing-xs);
-		--button-padding-horizontal: var(--spacing-s);
-		--button-font-size: var(--font-size-m);
-
-		@include mixins.when(circle) {
-			--button-padding-vertical: var(--spacing-xs);
-			--button-padding-horizontal: var(--spacing-xs);
-		}
-	}
-}
diff --git a/packages/design-system/theme/src/calendar.scss b/packages/design-system/theme/src/calendar.scss
index d06e915090d63..16c9af63abd6c 100644
--- a/packages/design-system/theme/src/calendar.scss
+++ b/packages/design-system/theme/src/calendar.scss
@@ -1,6 +1,5 @@
 @use "mixins/mixins";
 @use "./common/var";
-@use "button";
 @use "button-group";
 
 @include mixins.b(calendar) {
diff --git a/packages/design-system/theme/src/common/var.scss b/packages/design-system/theme/src/common/var.scss
index 1f17c47d69eb9..80bffaef11be6 100644
--- a/packages/design-system/theme/src/common/var.scss
+++ b/packages/design-system/theme/src/common/var.scss
@@ -11,7 +11,7 @@ $all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 $fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 $fade-linear-transition: opacity 200ms linear;
 $md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
-	opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 $border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 $color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 
@@ -21,190 +21,190 @@ $color-white: #ffffff;
 $color-black: #000000;
 
 $color-primary-light-1: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	4%
+				--color-primary-h,
+				--color-primary-s,
+				--color-primary-l,
+				4%
 );
 $color-primary-light-2: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	8%
+				--color-primary-h,
+				--color-primary-s,
+				--color-primary-l,
+				8%
 );
 $color-primary-light-3: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	12%
+				--color-primary-h,
+				--color-primary-s,
+				--color-primary-l,
+				12%
 );
 $color-primary-light-4: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	16%
+				--color-primary-h,
+				--color-primary-s,
+				--color-primary-l,
+				16%
 );
 $color-primary-light-5: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	20%
+				--color-primary-h,
+				--color-primary-s,
+				--color-primary-l,
+				20%
 );
 $color-primary-light-6: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	24%
+				--color-primary-h,
+				--color-primary-s,
+				--color-primary-l,
+				24%
 );
 $color-primary-light-7: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	28%
+				--color-primary-h,
+				--color-primary-s,
+				--color-primary-l,
+				28%
 );
 $color-primary-light-8: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	32%
+				--color-primary-h,
+				--color-primary-s,
+				--color-primary-l,
+				32%
 );
 $color-primary-light-9: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	36%
+				--color-primary-h,
+				--color-primary-s,
+				--color-primary-l,
+				36%
 );
 $color-primary-light: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	30%
+				--color-primary-h,
+				--color-primary-s,
+				--color-primary-l,
+				30%
 );
 $color-primary-lighter: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	34%
+				--color-primary-h,
+				--color-primary-s,
+				--color-primary-l,
+				34%
 );
 
 $color-primary-shade-1: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	-(10)
+				--color-primary-h,
+				--color-primary-s,
+				--color-primary-l,
+				-(10)
 );
 
 $color-success-light-1: function.lightness(
-	--color-success-h,
-	--color-success-s,
-	--color-success-l,
-	4%
+				--color-success-h,
+				--color-success-s,
+				--color-success-l,
+				4%
 );
 $color-success-light-3: function.lightness(
-	--color-success-h,
-	--color-success-s,
-	--color-success-l,
-	12%
+				--color-success-h,
+				--color-success-s,
+				--color-success-l,
+				12%
 );
 $color-success-light-5: function.lightness(
-	--color-success-h,
-	--color-success-s,
-	--color-success-l,
-	20%
+				--color-success-h,
+				--color-success-s,
+				--color-success-l,
+				20%
 );
 $color-success-light: function.lightness(
-	--color-success-h,
-	--color-success-s,
-	--color-success-l,
-	41%
+				--color-success-h,
+				--color-success-s,
+				--color-success-l,
+				41%
 );
 $color-success-lighter: function.lightness(
-	--color-success-h,
-	--color-success-s,
-	--color-success-l,
-	48%
+				--color-success-h,
+				--color-success-s,
+				--color-success-l,
+				48%
 );
 
 $color-warning-light-1: function.lightness(
-	--color-warning-h,
-	--color-warning-s,
-	--color-warning-l,
-	4%
+				--color-warning-h,
+				--color-warning-s,
+				--color-warning-l,
+				4%
 );
 $color-warning-light-3: function.lightness(
-	--color-warning-h,
-	--color-warning-s,
-	--color-warning-l,
-	12%
+				--color-warning-h,
+				--color-warning-s,
+				--color-warning-l,
+				12%
 );
 $color-warning-light-5: function.lightness(
-	--color-warning-h,
-	--color-warning-s,
-	--color-warning-l,
-	20%
+				--color-warning-h,
+				--color-warning-s,
+				--color-warning-l,
+				20%
 );
 $color-warning-light: function.lightness(
-	--color-warning-h,
-	--color-warning-s,
-	--color-warning-l,
-	34%
+				--color-warning-h,
+				--color-warning-s,
+				--color-warning-l,
+				34%
 );
 $color-warning-lighter: function.lightness(
-	--color-warning-h,
-	--color-warning-s,
-	--color-warning-l,
-	40%
+				--color-warning-h,
+				--color-warning-s,
+				--color-warning-l,
+				40%
 );
 
 $color-danger-light-1: function.lightness(
-	--color-danger-h,
-	--color-danger-s,
-	--color-danger-l,
-	4%
+				--color-danger-h,
+				--color-danger-s,
+				--color-danger-l,
+				4%
 );
 $color-danger-light-3: function.lightness(
-	--color-danger-h,
-	--color-danger-s,
-	--color-danger-l,
-	12%
+				--color-danger-h,
+				--color-danger-s,
+				--color-danger-l,
+				12%
 );
 $color-danger-light-5: function.lightness(
-	--color-danger-h,
-	--color-danger-s,
-	--color-danger-l,
-	20%
+				--color-danger-h,
+				--color-danger-s,
+				--color-danger-l,
+				20%
 );
 $color-danger-light: function.lightness(
-	--color-danger-h,
-	--color-danger-s,
-	--color-danger-l,
-	24%
+				--color-danger-h,
+				--color-danger-s,
+				--color-danger-l,
+				24%
 );
 $color-danger-lighter: var(--color-danger-tint-2);
 
 $color-info-light-1: function.lightness(
-	--color-info-h,
-	--color-info-s,
-	--color-info-l,
-	4%
+				--color-info-h,
+				--color-info-s,
+				--color-info-l,
+				4%
 );
 $color-info-light-3: function.lightness(
-	--color-info-h,
-	--color-info-s,
-	--color-info-l,
-	12%
+				--color-info-h,
+				--color-info-s,
+				--color-info-l,
+				12%
 );
 $color-info-light-5: function.lightness(
-	--color-info-h,
-	--color-info-s,
-	--color-info-l,
-	20%
+				--color-info-h,
+				--color-info-s,
+				--color-info-l,
+				20%
 );
 $color-info-lighter: function.lightness(
-	--color-info-h,
-	--color-info-s,
-	--color-info-l,
-	39%
+				--color-info-h,
+				--color-info-s,
+				--color-info-l,
+				39%
 );
 
 // Background
@@ -674,27 +674,27 @@ $button-background-color: var(--button-background-color, var(--color-primary));
 
 $button-active-color: var(--button-active-color, var(--color-text-xlight));
 $button-active-border-color: var(
-	--button-active-border-color,
-	var(--color-primary-600)
+				--button-active-border-color,
+				var(--color-primary-shade-1)
 );
 $button-active-background-color: var(
-	--button-active-background-color,
-	var(--color-primary-600)
+				--button-active-background-color,
+				var(--color-primary-shade-1)
 );
 
 $button-focus-outline-color: var(
-	--button-focus-outline-color,
-	hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-600-l), 0.33)
+				--button-focus-outline-color,
+				var(--color-primary-tint-1)
 );
 
 $button-hover-color: var(--button-hover-color, var(--color-text-xlight));
 $button-hover-border-color: var(
-	--button-hover-border-color,
-	var(--color-primary-750)
+				--button-hover-border-color,
+				var(--color-primary-shade-1)
 );
 $button-hover-background-color: var(
-	--button-hover-background-color,
-	var(--color-primary-750)
+				--button-hover-background-color,
+				var(--color-primary-shade-1)
 );
 
 /// color||Color|0
@@ -706,13 +706,13 @@ $button-default-border-color: var(--border-color-base);
 
 /// color||Color|0
 $button-disabled-font-color: var(
-	--button-disabled-color,
-	var(--color-neutral-500)
+				--button-disabled-color,
+				var(--color-neutral-500)
 );
 /// color||Color|0
 $button-disabled-background-color: var(
-	--button-disabled-background-color,
-	var(--color-foreground-base)
+				--button-disabled-background-color,
+				var(--color-foreground-base)
 );
 /// color||Color|0
 $button-disabled-border-color: var(--button-disabled-border-color, var(--color-neutral-500));
@@ -823,7 +823,7 @@ $pagination-hover-color: var(--color-primary);
 /* Popup
 -------------------------- */
 /// color||Color|0
-$popup-modal-background-color: hsla(247,14%, 30%, 0.75);
+$popup-modal-background-color: hsla(247, 14%, 30%, 0.75);
 /// opacity||Other|1
 $popup-modal-opacity: 0.65;
 
@@ -917,10 +917,10 @@ $slider-main-background-color: var(--color-primary);
 /// color||Color|0
 $slider-runway-background-color: var(--border-color-base);
 $slider-button-hover-color: function.saturation(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	8%
+				--color-primary-h,
+				--color-primary-s,
+				--color-primary-l,
+				8%
 );
 $slider-stop-background-color: $color-white;
 $slider-disable-color: var(--color-text-lighter);
@@ -998,16 +998,16 @@ $loading-fullscreen-spinner-size: 50px;
 /* Scrollbar
 --------------------------*/
 $scrollbar-background-color: hsla(
-	var(#{--color-text-light-h}),
-	var(#{--color-text-light-s}),
-	var(#{--color-text-light-l}),
-	0.3
+				var(#{--color-text-light-h}),
+				var(#{--color-text-light-s}),
+				var(#{--color-text-light-l}),
+				0.3
 );
 $scrollbar-hover-background-color: hsla(
-	var(#{--color-text-light-h}),
-	var(#{--color-text-light-s}),
-	var(#{--color-text-light-l}),
-	0.5
+				var(#{--color-text-light-h}),
+				var(#{--color-text-light-s}),
+				var(#{--color-text-light-l}),
+				0.5
 );
 
 /* Carousel
@@ -1152,67 +1152,67 @@ $lg: 1200px;
 $xl: 1920px;
 
 $breakpoints: (
-	'xs': (
-		max-width: $sm - 1,
-	),
-	'sm': (
-		min-width: $sm,
-	),
-	'md': (
-		min-width: $md,
-	),
-	'lg': (
-		min-width: $lg,
-	),
-	'xl': (
-		min-width: $xl,
-	),
+		'xs': (
+				max-width: $sm - 1,
+		),
+		'sm': (
+				min-width: $sm,
+		),
+		'md': (
+				min-width: $md,
+		),
+		'lg': (
+				min-width: $lg,
+		),
+		'xl': (
+				min-width: $xl,
+		),
 );
 
 $breakpoints-spec: (
-	'xs-only': (
-		max-width: $sm - 1,
-	),
-	'sm-and-up': (
-		min-width: $sm,
-	),
-	'sm-only': (
+		'xs-only': (
+				max-width: $sm - 1,
+		),
+		'sm-and-up': (
+				min-width: $sm,
+		),
+		'sm-only': (
 		min-width: #{$sm},
 	)
 	and
 	(
 		max-width: #{$md - 1},
 	),
-	'sm-and-down': (
-		max-width: $md - 1,
-	),
-	'md-and-up': (
-		min-width: $md,
-	),
-	'md-only': (
+		'sm-and-down': (
+				max-width: $md - 1,
+		),
+		'md-and-up': (
+				min-width: $md,
+		),
+		'md-only': (
 		min-width: #{$md},
 	)
 	and
 	(
 		max-width: #{$lg - 1},
 	),
-	'md-and-down': (
-		max-width: $lg - 1,
-	),
-	'lg-and-up': (
-		min-width: $lg,
-	),
-	'lg-only': (
+		'md-and-down': (
+				max-width: $lg - 1,
+		),
+		'lg-and-up': (
+				min-width: $lg,
+		),
+		'lg-only': (
 		min-width: #{$lg},
 	)
 	and
 	(
 		max-width: #{$xl - 1},
 	),
-	'lg-and-down': (
-		max-width: $xl - 1,
-	),
-	'xl-only': (
-		min-width: $xl,
-	),
+		'lg-and-down': (
+				max-width: $xl - 1,
+		),
+		'xl-only': (
+				min-width: $xl,
+		),
 );
diff --git a/packages/design-system/theme/src/dropdown.scss b/packages/design-system/theme/src/dropdown.scss
index 3ef13386f100f..f28b56d4a28f7 100644
--- a/packages/design-system/theme/src/dropdown.scss
+++ b/packages/design-system/theme/src/dropdown.scss
@@ -1,6 +1,5 @@
 @use "mixins/mixins";
 @use "./common/var";
-@use "button";
 @use "./popper";
 
 @include mixins.b(dropdown) {
@@ -35,7 +34,7 @@
 			background: rgba(var.$color-white, 0.5);
 		}
 
-		&.el-button--default::before {
+		&.button::before {
 			background: hsla(
 				var(#{--button-default-border-color-h}),
 				var(#{--button-default-border-color-s}),
diff --git a/packages/design-system/theme/src/index.scss b/packages/design-system/theme/src/index.scss
index 2bc1d28de4cfb..fffef879587c7 100644
--- a/packages/design-system/theme/src/index.scss
+++ b/packages/design-system/theme/src/index.scss
@@ -23,7 +23,6 @@
 @use "./switch.scss";
 @use "./select.scss";
 @use "./skeleton.scss";
-@use "./button.scss";
 // @use "./button-group.scss";
 @use "./table.scss";
 @use "./table-column.scss";
@@ -82,3 +81,4 @@
 // @use "./avatar.scss";
 @use "./drawer.scss";
 // @use "./popconfirm.scss";
+@use "./utilities/index.scss";
diff --git a/packages/design-system/theme/src/message-box.scss b/packages/design-system/theme/src/message-box.scss
index 06b83ab885663..95bb6931668d8 100644
--- a/packages/design-system/theme/src/message-box.scss
+++ b/packages/design-system/theme/src/message-box.scss
@@ -2,7 +2,6 @@
 @use "mixins/button";
 @use "./common/var";
 @use "common/popup";
-@use "button" as buttons;
 @use "input";
 
 @include mixins.b(message-box) {
diff --git a/packages/design-system/theme/src/transfer.scss b/packages/design-system/theme/src/transfer.scss
index 28d6037953170..40f06c5b3238f 100644
--- a/packages/design-system/theme/src/transfer.scss
+++ b/packages/design-system/theme/src/transfer.scss
@@ -2,7 +2,6 @@
 @use "mixins/utils";
 @use "./common/var";
 @use "input";
-@use "button";
 @use "checkbox";
 @use "checkbox-group";
 
@@ -15,7 +14,7 @@
 		padding: 0 30px;
 	}
 
-	@include mixins.e(button) {
+	.button {
 		display: block;
 		margin: 0 auto;
 		padding: 10px;
diff --git a/packages/design-system/theme/src/utilities/_float.scss b/packages/design-system/theme/src/utilities/_float.scss
new file mode 100644
index 0000000000000..76a216182f648
--- /dev/null
+++ b/packages/design-system/theme/src/utilities/_float.scss
@@ -0,0 +1,7 @@
+.float-left {
+  float: left !important;
+}
+
+.float-right {
+  float: right !important;
+}
diff --git a/packages/design-system/theme/src/utilities/index.scss b/packages/design-system/theme/src/utilities/index.scss
new file mode 100644
index 0000000000000..c5492282ef717
--- /dev/null
+++ b/packages/design-system/theme/src/utilities/index.scss
@@ -0,0 +1 @@
+@import 'float';
diff --git a/packages/editor-ui/src/components/Banner.vue b/packages/editor-ui/src/components/Banner.vue
index fdc0d33ab6efe..078432edb759a 100644
--- a/packages/editor-ui/src/components/Banner.vue
+++ b/packages/editor-ui/src/components/Banner.vue
@@ -31,7 +31,6 @@
 				:loading="buttonLoading"
 				size="small"
 				outline
-				:transparentBackground="true"
 				@click.stop="onClick"
 			/>
 		</div>
diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue
index 3995291110234..7c8d79c07e5c8 100644
--- a/packages/editor-ui/src/components/CollectionParameter.vue
+++ b/packages/editor-ui/src/components/CollectionParameter.vue
@@ -11,7 +11,7 @@
 				<n8n-button
 					v-if="parameter.options.length === 1"
 					type="tertiary"
-					fullWidth
+					block
 					@click="optionSelected(parameter.options[0].name)"
 					:label="getPlaceholderText"
 				/>
diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.vue b/packages/editor-ui/src/components/FixedCollectionParameter.vue
index 2b2bd4bec5035..428981b477ea8 100644
--- a/packages/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.vue
@@ -83,7 +83,7 @@
 			<n8n-button
 				v-if="parameter.options.length === 1"
 				type="tertiary"
-				fullWidth
+				block
 				@click="optionSelected(parameter.options[0].name)"
 				:label="getPlaceholderText"
 			/>
diff --git a/packages/editor-ui/src/components/MultipleParameter.vue b/packages/editor-ui/src/components/MultipleParameter.vue
index 24e72f2792dd4..074bb26a7166d 100644
--- a/packages/editor-ui/src/components/MultipleParameter.vue
+++ b/packages/editor-ui/src/components/MultipleParameter.vue
@@ -28,7 +28,7 @@
 				<div v-if="values && Object.keys(values).length === 0 || isReadOnly" class="no-items-exist">
 					<n8n-text size="small">{{ $locale.baseText('multipleParameter.currentlyNoItemsExist') }}</n8n-text>
 				</div>
-				<n8n-button v-if="!isReadOnly" type="tertiary" fullWidth @click="addItem()" :label="addButtonText" />
+				<n8n-button v-if="!isReadOnly" type="tertiary" block @click="addItem()" :label="addButtonText" />
 			</div>
 
 		</n8n-input-label>

From e548e00e449329ede06671345a18c0a00eecb19d Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 1 Jun 2022 14:23:34 +0300
Subject: [PATCH 08/42] fix: Fixed scss variable imports.

---
 .../src/components/N8nButton/Button.vue       | 106 +++++++++---------
 packages/design-system/theme/src/_tokens.scss |  22 +++-
 .../design-system/theme/src/common/var.scss   |   6 +-
 3 files changed, 73 insertions(+), 61 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index fc9eeeb813d65..0e926f94d716c 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -112,13 +112,11 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" module>
-@use '../../../theme/src/mixins/mixins';
-@use '../../../theme/src/mixins/utils';
-@use '../../../theme/src/mixins/function';
-@use '../../../theme/src/common/var';
-@import "../../utils";
+@import '../../../theme/src/mixins/mixins';
+@import '../../../theme/src/mixins/utils';
+@import '../../../theme/src/mixins/function';
+@import '../../../theme/src/common/var';
 
-$disabled-border-color: var(--color-foreground-base);
 $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 
 .button {
@@ -127,13 +125,13 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 	white-space: nowrap;
 	cursor: pointer;
 
-	border: var(--border-width-base) var.$button-border-color var(--border-style-base);
-	color: var.$button-font-color;
-	background-color: var.$button-background-color;
+	border: var(--border-width-base) $button-border-color var(--border-style-base);
+	color: $button-font-color;
+	background-color: $button-background-color;
 	font-weight: var(--font-weight-bold);
-	border-radius: var.$button-border-radius;
-	padding: var.$button-padding-vertical var.$button-padding-horizontal;
-	font-size: var.$button-font-size;
+	border-radius: $button-border-radius;
+	padding: $button-padding-vertical $button-padding-horizontal;
+	font-size: $button-font-size;
 
 	-webkit-appearance: none;
 	text-align: center;
@@ -142,23 +140,23 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 	margin: 0;
 	transition: 0.3s;
 
-	@include utils.utils-user-select(none);
+	@include utils-user-select(none);
 
 	&:hover {
-		color: var.$button-hover-color;
-		border-color: var.$button-hover-border-color;
-		background-color: var.$button-hover-background-color;
+		color: $button-hover-color;
+		border-color: $button-hover-border-color;
+		background-color: $button-hover-background-color;
 	}
 
 	&:focus {
-		border-color: var.$button-focus-outline-color;
-		outline: var.$focus-outline-width solid var.$button-focus-outline-color;
+		border-color: $button-focus-outline-color;
+		outline: $focus-outline-width solid $button-focus-outline-color;
 	}
 
 	&:active {
-		color: var.$button-active-color;
-		border-color: var.$button-active-border-color;
-		background-color: var.$button-active-background-color;
+		color: $button-active-color;
+		border-color: $button-active-border-color;
+		background-color: $button-active-background-color;
 		outline: none;
 	}
 
@@ -181,41 +179,6 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 	}
 }
 
-/**
- * States
- */
-
-.loading,
-.active {
-	position: relative;
-	pointer-events: none;
-
-	&:before {
-		pointer-events: none;
-		content: '';
-		position: absolute;
-		left: -1px;
-		top: -1px;
-		right: -1px;
-		bottom: -1px;
-		border-radius: inherit;
-		background-color: $loading-overlay-background-color;
-	}
-}
-
-.disabled {
-	&,
-	&:hover,
-	&:active,
-	&:focus {
-		cursor: not-allowed;
-		background-image: none;
-		color: var.$button-disabled-font-color;
-		background-color: var.$button-disabled-background-color;
-		border-color: var.$button-disabled-border-color;
-	}
-}
-
 /**
  * Sizes
  */
@@ -430,6 +393,37 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 	}
 }
 
+.loading,
+.active {
+  position: relative;
+  pointer-events: none;
+
+  &:before {
+	pointer-events: none;
+	content: '';
+	position: absolute;
+	left: -1px;
+	top: -1px;
+	right: -1px;
+	bottom: -1px;
+	border-radius: inherit;
+	background-color: $loading-overlay-background-color;
+  }
+}
+
+.disabled {
+  &,
+  &:hover,
+  &:active,
+  &:focus {
+	cursor: not-allowed;
+	background-image: none;
+	color: $button-disabled-font-color;
+	background-color: $button-disabled-background-color;
+	border-color: $button-disabled-border-color;
+  }
+}
+
 .transparent {
 	--button-background-color: transparent;
 	--button-active-background-color: transparent;
diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss
index 0a17a20b00b7d..6c01e05691113 100644
--- a/packages/design-system/theme/src/_tokens.scss
+++ b/packages/design-system/theme/src/_tokens.scss
@@ -181,8 +181,26 @@
 				  var(--color-info-tint-2-l)
   );
 
-  --color-neutral-h: 220;
-  --color-neutral-s: 7.4%;
+  --color-grey-h: 228;
+  --color-grey-s: 10%;
+  --color-grey-l: 80%;
+  --color-grey: hsl(
+				  var(--color-grey-h),
+				  var(--color-grey-s),
+				  var(--color-grey-l)
+  );
+
+  --color-light-grey-h: 220;
+  --color-light-grey-s: 20%;
+  --color-light-grey-l: 88%;
+  --color-light-grey: hsl(
+				  var(--color-light-grey-h),
+				  var(--color-light-grey-s),
+				  var(--color-light-grey-l)
+  );
+
+  --color-neutral-h: 228;
+  --color-neutral-s: 10%;
   --color-neutral-l: 50%;
   --color-neutral: hsl(
 				  var(--color-neutral-h),
diff --git a/packages/design-system/theme/src/common/var.scss b/packages/design-system/theme/src/common/var.scss
index 80bffaef11be6..fc4604f70d67f 100644
--- a/packages/design-system/theme/src/common/var.scss
+++ b/packages/design-system/theme/src/common/var.scss
@@ -707,15 +707,15 @@ $button-default-border-color: var(--border-color-base);
 /// color||Color|0
 $button-disabled-font-color: var(
 				--button-disabled-color,
-				var(--color-neutral-500)
+				var(--color-text-dark)
 );
 /// color||Color|0
 $button-disabled-background-color: var(
 				--button-disabled-background-color,
-				var(--color-foreground-base)
+				var(--color-light-grey)
 );
 /// color||Color|0
-$button-disabled-border-color: var(--button-disabled-border-color, var(--color-neutral-500));
+$button-disabled-border-color: var(--button-disabled-border-color, var(--color-grey));
 
 /// color||Color|0
 $button-primary-border-color: var(--color-primary);

From 110f846c8ffe0631f8477161ff368b2a6378792d Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 2 Jun 2022 13:08:30 +0300
Subject: [PATCH 09/42] feat: Added color-neutral variable story.

---
 .../design-system/src/styleguide/colors.stories.mdx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/design-system/src/styleguide/colors.stories.mdx b/packages/design-system/src/styleguide/colors.stories.mdx
index 91b443c97a63a..598ca9631c0c0 100644
--- a/packages/design-system/src/styleguide/colors.stories.mdx
+++ b/packages/design-system/src/styleguide/colors.stories.mdx
@@ -91,6 +91,19 @@ import ColorCircles from './ColorCircles.vue';
 	</Story>
 </Canvas>
 
+## Info
+
+<Canvas>
+	<Story name="neutral">
+		{{
+			template: `<color-circles :colors="['--color-neutral']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>
+
 ## Text
 
 <Canvas>

From 18bd8ca416b0b6d530fc679fb72b9d42e43f7625 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 2 Jun 2022 13:08:42 +0300
Subject: [PATCH 10/42] fix: Fixed color-secondary variable definition.

---
 packages/design-system/theme/src/_tokens.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss
index 6c01e05691113..5c85e06bcfe42 100644
--- a/packages/design-system/theme/src/_tokens.scss
+++ b/packages/design-system/theme/src/_tokens.scss
@@ -75,7 +75,7 @@
   --color-secondary: hsl(
 				  var(--color-secondary-h),
 				  var(--color-secondary-s),
-				  var(--color-secondary-l),
+				  var(--color-secondary-l)
   );
 
   --color-success-h: 150.4;

From 8977f5a123b54dd503d5fc813fdeefaea83f7710 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 2 Jun 2022 13:10:09 +0300
Subject: [PATCH 11/42] feat: Added color-white story.

---
 .../src/styleguide/colors.stories.mdx             | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/styleguide/colors.stories.mdx b/packages/design-system/src/styleguide/colors.stories.mdx
index 598ca9631c0c0..6f0c3d8fac3a8 100644
--- a/packages/design-system/src/styleguide/colors.stories.mdx
+++ b/packages/design-system/src/styleguide/colors.stories.mdx
@@ -91,7 +91,7 @@ import ColorCircles from './ColorCircles.vue';
 	</Story>
 </Canvas>
 
-## Info
+## Neutral
 
 <Canvas>
 	<Story name="neutral">
@@ -104,6 +104,19 @@ import ColorCircles from './ColorCircles.vue';
 	</Story>
 </Canvas>
 
+## White
+
+<Canvas>
+	<Story name="white">
+		{{
+			template: `<color-circles :colors="['--color-white']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>
+
 ## Text
 
 <Canvas>

From 3b01a3e7cb396e6a75af746ddbd2d8bf96355883 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 2 Jun 2022 13:32:54 +0300
Subject: [PATCH 12/42] test: Updated button snapshot.

---
 .../__snapshots__/Button.spec.ts.snap         | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
index b53b1fedf7fec..08e482600779d 100644
--- a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
+++ b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
@@ -1,21 +1,10 @@
 // Vitest Snapshot v1
 
-exports[`components > N8nButton > props > icon > should render icon button 1`] = `
-"<button type=\\"button\\" class=\\"el-button el-button--default el-button--medium _button_1c5ep_1 _primary_1c5ep_79\\" tabindex=\\"0\\">
-  <!---->
-  <!----><span><span class=\\"_icon_1c5ep_143\\"><span class=\\"_size-medium_9dlpz_19 _regular_9dlpz_5\\" style=\\"line-height: 1;\\"></span></span>
-  <!----></span></button>"
-`;
+exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button aria-disabled=\\"false\\" aria-pressed=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_1uqz3_239 _primary_1uqz3_411 _medium_1uqz3_314 _icon_1uqz3_299\\"><span class=\\"_icon_1uqz3_299\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 
-exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `
-"<button disabled=\\"disabled\\" type=\\"button\\" class=\\"el-button el-button--default el-button--medium is-loading _button_1c5ep_1 _primary_1c5ep_79\\" tabindex=\\"0\\"><i class=\\"el-icon-loading\\"></i>
-  <!----><span><span class=\\"_icon_1c5ep_143\\"><span><span class=\\"_size-medium_9dlpz_19 _regular_9dlpz_5\\" style=\\"line-height: 1;\\"></span></span></span>
-  <!----></span></button>"
-`;
+exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button disabled=\\"disabled\\" aria-disabled=\\"false\\" aria-pressed=\\"false\\" aria-busy=\\"true\\" aria-live=\\"polite\\" class=\\"button _button_1uqz3_239 _primary_1uqz3_411 _loading_1uqz3_470 _medium_1uqz3_314 _icon_1uqz3_299\\"><span class=\\"_icon_1uqz3_299\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
 
 exports[`components > N8nButton > should render correctly 1`] = `
-"<button type=\\"button\\" class=\\"el-button el-button--default el-button--medium _button_1c5ep_1 _primary_1c5ep_79\\" tabindex=\\"0\\">
-  <!---->
-  <!---->
-  <!----></button>"
+"<button aria-disabled=\\"false\\" aria-pressed=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_1uqz3_239 _primary_1uqz3_411 _medium_1uqz3_314\\">
+  <!----><span>Button</span></button>"
 `;

From f6d40d0c8666287b9eee675e2fc963e0af72b8fb Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 2 Jun 2022 14:13:22 +0300
Subject: [PATCH 13/42] feat: Replaced zoom buttons with new n8n-icon-button.

---
 .../src/components/N8nButton/Button.vue       |  2 +-
 .../components/N8nIconButton/IconButton.vue   |  2 +-
 packages/editor-ui/src/plugins/components.ts  |  2 +-
 packages/editor-ui/src/views/NodeView.vue     | 55 +++++++------------
 4 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index 0e926f94d716c..6684191520de4 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -69,7 +69,7 @@ export default Vue.extend({
 			default: false,
 		},
 		icon: {
-			type: String,
+			type: [String, Array],
 		},
 		block: {
 			type: Boolean,
diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.vue b/packages/design-system/src/components/N8nIconButton/IconButton.vue
index 58f5787196e80..c2bd618c2e235 100644
--- a/packages/design-system/src/components/N8nIconButton/IconButton.vue
+++ b/packages/design-system/src/components/N8nIconButton/IconButton.vue
@@ -44,7 +44,7 @@ export default {
 			default: false,
 		},
 		icon: {
-			type: String,
+			type: [String, Array],
 			required: true,
 		},
 		float: {
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index 9bbd6b5630895..efcf167972b3b 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -84,7 +84,7 @@ Vue.use(Fragment.Plugin);
 Vue.use(N8nActionBox);
 Vue.use(N8nActionToggle);
 Vue.use(N8nAvatar);
-Vue.use(N8nButton);
+Vue.component('n8n-button', N8nButton);
 Vue.component('n8n-form-box', N8nFormBox);
 Vue.component('n8n-form-inputs', N8nFormInputs);
 Vue.component('n8n-icon', N8nIcon);
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 45e2feaf2904c..7a200fcc613fd 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -76,7 +76,7 @@
 				>
 					<n8n-icon-button
 						size="large"
-						outline
+						type="secondary"
 						:icon="['far', 'note-sticky']"
 						:title="$locale.baseText('nodeView.addSticky')"
 					/>
@@ -89,23 +89,17 @@
 			@closeNodeCreator="closeNodeCreator"
 		/>
 		<div :class="{ 'zoom-menu': true, 'regular-zoom-menu': !isDemo, 'demo-zoom-menu': isDemo, expanded: !sidebarMenuCollapsed }">
-			<button @click="zoomToFit" class="button-white" :title="$locale.baseText('nodeView.zoomToFit')">
-				<font-awesome-icon icon="expand"/>
-			</button>
-			<button @click="zoomIn()" class="button-white" :title="$locale.baseText('nodeView.zoomIn')">
-				<font-awesome-icon icon="search-plus"/>
-			</button>
-			<button @click="zoomOut()" class="button-white" :title="$locale.baseText('nodeView.zoomOut')">
-				<font-awesome-icon icon="search-minus"/>
-			</button>
-			<button
+			<n8n-icon-button @click="zoomToFit" type="tertiary" size="xlarge" :title="$locale.baseText('nodeView.zoomToFit')" icon="expand" />
+			<n8n-icon-button @click="zoomIn" type="tertiary" size="xlarge" :title="$locale.baseText('nodeView.zoomIn')" icon="search-plus" />
+			<n8n-icon-button @click="zoomOut" type="tertiary" size="xlarge" :title="$locale.baseText('nodeView.zoomOut')" icon="search-minus" />
+			<n8n-icon-button
 				v-if="nodeViewScale !== 1 && !isDemo"
-				@click="resetZoom()"
-				class="button-white"
+				@click="resetZoom"
+				type="tertiary"
+				size="xlarge"
 				:title="$locale.baseText('nodeView.resetZoom')"
-				>
-				<font-awesome-icon icon="undo" :title="$locale.baseText('nodeView.resetZoom')"/>
-			</button>
+				icon="undo"
+			/>
 		</div>
 		<div class="workflow-execute-wrapper" v-if="!isReadOnly">
 			<n8n-button
@@ -2948,7 +2942,7 @@ export default mixins(
 
 	position: fixed;
 	left: $--sidebar-width + $--zoom-menu-margin;
-	width: 200px;
+	width: 210px;
 	bottom: 45px;
 	line-height: 25px;
 	color: #444;
@@ -2961,6 +2955,16 @@ export default mixins(
 	button {
 		border: var(--border-base);
 	}
+
+	> * {
+		+ * {
+			margin-left: var(--spacing-3xs);
+		}
+
+		&:hover {
+			transform: scale(1.1);
+		}
+	}
 }
 
 .regular-zoom-menu {
@@ -3133,23 +3137,6 @@ export default mixins(
 	text-align: right;
 }
 
-.button-white {
-	border: none;
-	padding: 0.3em;
-	margin: 0 0.1em;
-	border-radius: 3px;
-	font-size: 1.2em;
-	background: #fff;
-	width: 40px;
-	height: 40px;
-	color: #666;
-	cursor: pointer;
-
-	&:hover {
-		transform: scale(1.1);
-	}
-}
-
 .connection-actions {
 	&:hover {
 		display: block !important;

From 4226c15b129a9272477fd516b6c0e1324b75109d Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 6 Jun 2022 16:07:50 +0300
Subject: [PATCH 14/42] feat: Added stories for float utilities.

---
 .../src/components/N8nButton/Button.vue       |  2 --
 .../styleguide/utilities/float.stories.mdx    | 29 +++++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 packages/design-system/src/styleguide/utilities/float.stories.mdx

diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index 6684191520de4..e462bc226b9ed 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -112,9 +112,7 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" module>
-@import '../../../theme/src/mixins/mixins';
 @import '../../../theme/src/mixins/utils';
-@import '../../../theme/src/mixins/function';
 @import '../../../theme/src/common/var';
 
 $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
diff --git a/packages/design-system/src/styleguide/utilities/float.stories.mdx b/packages/design-system/src/styleguide/utilities/float.stories.mdx
new file mode 100644
index 0000000000000..64304d7e64b2d
--- /dev/null
+++ b/packages/design-system/src/styleguide/utilities/float.stories.mdx
@@ -0,0 +1,29 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+
+<Meta
+	title="Utilities/Float"
+/>
+
+# `.float-left`
+
+<Canvas>
+	<Story name="float-left">
+		{{
+			template: `<div>
+	<span class="float-left">Float left</span>
+</div>`,
+		}}
+	</Story>
+</Canvas>
+
+# `.float-right`
+
+<Canvas>
+	<Story name="float-right">
+		{{
+			template: `<div>
+	<span class="float-right">Float right</span>
+</div>`,
+		}}
+	</Story>
+</Canvas>

From 7b0fb44ea09125eaee4406e36cc8879fa95ac4da Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 6 Jun 2022 16:10:13 +0300
Subject: [PATCH 15/42] chore: Updated color shades generation code for later
 use.

---
 .../src/components/N8nButton/Button.vue             |  4 ++--
 packages/design-system/theme/src/_tokens.scss       | 13 +++----------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index e462bc226b9ed..0ce78082435e1 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -239,7 +239,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 .secondary {
 	--button-color: var(--color-primary);
 	--button-border-color: var(--color-primary);
-	--button-background-color: var(--color-white);
+	--button-background-color: var(--color-background-xlight);
 
 	--button-active-background-color: var(--color-primary-tint-2);
 	--button-active-color: var(--color-primary);
@@ -255,7 +255,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 .tertiary {
 	font-weight: var(--font-weight-regular) !important;
 
-	--button-background-color: var(--color-white);
+	--button-background-color: var(--color-background-xlight);
 	--button-color: var(--color-text-dark);
 	--button-border-color: var(--color-neutral-850);
 
diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss
index 5c85e06bcfe42..cd3b9d122be08 100644
--- a/packages/design-system/theme/src/_tokens.scss
+++ b/packages/design-system/theme/src/_tokens.scss
@@ -390,16 +390,9 @@
 				  var(--color-sticky-default-border-l)
   );
 
-  --color-white-h: 0;
-  --color-white-s: 0%;
-  --color-white-l: 100%;
-  --color-white: hsl(
-				  var(--color-white-h),
-				  var(--color-white-s),
-				  var(--color-white-l)
-  );
-
-  @each $color in ('primary', 'neutral', 'secondary', 'success', 'warning', 'danger') {
+  // Generated Color Shades from 50 to 950
+  // Not yet used in design system
+  @each $color in ('neutral', 'success', 'warning', 'danger') {
 	@each $shade in (50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950) {
 	  --color-#{$color}-#{$shade}-l: #{math.div($shade, 10)}#{'%'};
 	  --color-#{$color}-#{$shade}: hsl(var(--color-#{$color}-h), var(--color-#{$color}-s), var(--color-#{$color}-#{$shade}-l));

From c68c3105d8df33c02c7ed95375cac7d8a8a14f0d Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 6 Jun 2022 16:15:12 +0300
Subject: [PATCH 16/42] chore: Removed color-white code.

---
 .../src/components/N8nButton/Button.vue             |  4 ----
 .../design-system/src/styleguide/colors.stories.mdx | 13 -------------
 2 files changed, 17 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index 0ce78082435e1..bf353868103ea 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -56,10 +56,6 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
-		active: {
-			type: Boolean,
-			default: false,
-		},
 		outline: {
 			type: Boolean,
 			default: false,
diff --git a/packages/design-system/src/styleguide/colors.stories.mdx b/packages/design-system/src/styleguide/colors.stories.mdx
index 6f0c3d8fac3a8..f9015b59b3e5c 100644
--- a/packages/design-system/src/styleguide/colors.stories.mdx
+++ b/packages/design-system/src/styleguide/colors.stories.mdx
@@ -104,19 +104,6 @@ import ColorCircles from './ColorCircles.vue';
 	</Story>
 </Canvas>
 
-## White
-
-<Canvas>
-	<Story name="white">
-		{{
-			template: `<color-circles :colors="['--color-white']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
 ## Text
 
 <Canvas>

From 4dd28dc437f79e58a1e1276c813501cad9a51009 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 6 Jun 2022 16:18:50 +0300
Subject: [PATCH 17/42] chore: Updated story properties for button components.

---
 .../components/N8nButton/Button.stories.ts    | 29 -------------------
 .../N8nIconButton/IconButton.stories.ts       | 16 ++--------
 2 files changed, 2 insertions(+), 43 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/Button.stories.ts b/packages/design-system/src/components/N8nButton/Button.stories.ts
index 797642f5cb726..c65b707e6b6e8 100644
--- a/packages/design-system/src/components/N8nButton/Button.stories.ts
+++ b/packages/design-system/src/components/N8nButton/Button.stories.ts
@@ -7,12 +7,6 @@ export default {
 	title: 'Atoms/Button',
 	component: N8nButton,
 	argTypes: {
-		label: {
-			control: 'text',
-		},
-		title: {
-			control: 'text',
-		},
 		type: {
 			control: 'select',
 			options: ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger'],
@@ -23,29 +17,6 @@ export default {
 				options: ['mini', 'small', 'medium', 'large', 'xlarge'],
 			},
 		},
-		outline: {
-			control: {
-				type: 'boolean',
-			},
-		},
-		text: {
-			control: {
-				type: 'boolean',
-			},
-		},
-		loading: {
-			control: {
-				type: 'boolean',
-			},
-		},
-		icon: {
-			control: {
-				type: 'text',
-			},
-		},
-		fullWidth: {
-			type: 'boolean',
-		},
 		float: {
 			type: 'select',
 			options: ['left', 'right'],
diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts b/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts
index 1d66494061521..49d65aabda473 100644
--- a/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts
+++ b/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts
@@ -17,19 +17,6 @@ export default {
 				options: ['mini', 'small', 'medium', 'large', 'xlarge'],
 			},
 		},
-		title: {
-			control: 'text',
-		},
-		loading: {
-			control: {
-				type: 'boolean',
-			},
-		},
-		icon: {
-			control: {
-				type: 'text',
-			},
-		},
 	},
 	parameters: {
 		backgrounds: { default: '--color-background-light' },
@@ -76,7 +63,8 @@ export const Outline = ManyTemplate.bind({});
 Outline.args = {
 	icon: 'plus',
 	title: 'my title',
-	type: 'outline',
+	type: 'primary',
+	outline: true
 };
 
 export const Light = ManyTemplate.bind({});

From 9c9df2da8beed6a6a06b202b997bec8de1dbf1aa Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 6 Jun 2022 17:26:58 +0300
Subject: [PATCH 18/42] fix: Added el-button fallback for places where
 el-button is not replaceable (messagebox).

---
 .../src/components/N8nButton/Button.vue       | 267 +++++++++---------
 .../N8nIconButton/IconButton.stories.ts       |   2 +-
 .../design-system/theme/src/message-box.scss  |  16 +-
 .../src/components/CredentialsList.vue        |   2 +-
 .../components/DuplicateWorkflowDialog.vue    |   2 +-
 .../components/FixedCollectionParameter.vue   |   7 +
 .../editor-ui/src/components/InputPanel.vue   |   2 +-
 .../src/components/MultipleParameter.vue      |  39 +--
 .../editor-ui/src/components/NodeTitle.vue    |   2 +-
 packages/editor-ui/src/components/RunData.vue |   2 +-
 .../TagsManager/TagsView/TagsTable.vue        |   6 +-
 packages/editor-ui/src/views/NodeView.vue     |   4 +-
 12 files changed, 185 insertions(+), 166 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index bf353868103ea..b78aa5708ead5 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -3,7 +3,6 @@
 		:class="classes"
 		:disabled="disabled || loading"
 		:aria-disabled="ariaDisabled"
-		:aria-pressed="ariaPressed"
 		:aria-busy="ariaBusy"
 		aria-live="polite"
 		v-on="$listeners"
@@ -88,18 +87,15 @@ export default Vue.extend({
 		ariaDisabled(): string {
 			return this.disabled ? 'true' : 'false';
 		},
-		ariaPressed(): string {
-			return this.active ? 'true' : 'false';
-		},
 		classes(): string {
-			return `button ${this.$style['button']} ${this.$style[this.type]}` +
+			return `button ${this.type}` +
+				` el-button el-button--${this.type}` +
+				`${this.size ? ` ${this.size} el-button--${this.size}` : ''}` +
 				`${this.outline ? ` ${this.$style['outline']}` : ''}` +
 				`${this.loading ? ` ${this.$style['loading']}` : ''}` +
-				`${this.size ? ` ${this.$style[this.size]}` : ''}` +
 				`${this.float ? ` ${this.$style[`float-${this.float}`]}` : ''}` +
 				`${this.text ? ` ${this.$style['text']}` : ''}` +
 				`${this.disabled ? ` ${this.$style['disabled']}` : ''}` +
-				`${this.active ? ` ${this.$style['active']}` : ''}` +
 				`${this.block ? ` ${this.$style['block']}` : ''}` +
 				`${this.icon || this.loading ? ` ${this.$style['icon']}` : ''}`;
 		},
@@ -107,132 +103,74 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="scss" module>
+<style lang="scss">
 @import '../../../theme/src/mixins/utils';
 @import '../../../theme/src/common/var';
 
-$loading-overlay-background-color: rgba(255, 255, 255, 0.35);
-
-.button {
-	display: inline-block;
-	line-height: 1;
-	white-space: nowrap;
-	cursor: pointer;
-
-	border: var(--border-width-base) $button-border-color var(--border-style-base);
-	color: $button-font-color;
-	background-color: $button-background-color;
-	font-weight: var(--font-weight-bold);
-	border-radius: $button-border-radius;
-	padding: $button-padding-vertical $button-padding-horizontal;
-	font-size: $button-font-size;
-
-	-webkit-appearance: none;
-	text-align: center;
-	box-sizing: border-box;
-	outline: none;
-	margin: 0;
-	transition: 0.3s;
-
-	@include utils-user-select(none);
-
-	&:hover {
-		color: $button-hover-color;
-		border-color: $button-hover-border-color;
-		background-color: $button-hover-background-color;
-	}
-
-	&:focus {
-		border-color: $button-focus-outline-color;
-		outline: $focus-outline-width solid $button-focus-outline-color;
-	}
-
-	&:active {
-		color: $button-active-color;
-		border-color: $button-active-border-color;
-		background-color: $button-active-background-color;
-		outline: none;
-	}
-
-	&::-moz-focus-inner {
-		border: 0;
-	}
-
-	> i {
-		display: none;
-	}
-
-	> span {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	span + span {
-		margin-left: var(--spacing-3xs);
-	}
-}
-
-/**
- * Sizes
- */
-
-.mini {
-	--button-padding-vertical: var(--spacing-4xs);
-	--button-padding-horizontal: var(--spacing-2xs);
-	--button-font-size: var(--font-size-2xs);
-
-	&.icon-button {
-		height: 22px;
-		width: 22px;
-	}
-}
-
-.small {
-	--button-padding-vertical: var(--spacing-3xs);
-	--button-padding-horizontal: var(--spacing-xs);
-	--button-font-size: var(--font-size-2xs);
+.button, .el-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+
+  border: var(--border-width-base) $button-border-color var(--border-style-base);
+  color: $button-font-color;
+  background-color: $button-background-color;
+  font-weight: var(--font-weight-bold);
+  border-radius: $button-border-radius;
+  padding: $button-padding-vertical $button-padding-horizontal;
+  font-size: $button-font-size;
+
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: none;
+  margin: 0;
+  transition: 0.3s;
+
+  @include utils-user-select(none);
+
+  &:hover {
+	color: $button-hover-color;
+	border-color: $button-hover-border-color;
+	background-color: $button-hover-background-color;
+  }
 
-	&.icon-button {
-		height: 26px;
-		width: 26px;
-	}
-}
+  &:focus {
+	border-color: $button-focus-outline-color;
+	outline: $focus-outline-width solid $button-focus-outline-color;
+  }
 
-.medium {
-	--button-padding-vertical: var(--spacing-2xs);
-	--button-padding-horizontal: var(--spacing-xs);
-	--button-font-size: var(--font-size-2xs);
+  &:active {
+	color: $button-active-color;
+	border-color: $button-active-border-color;
+	background-color: $button-active-background-color;
+	outline: none;
+  }
 
-	&.icon-button {
-		height: 32px;
-		width: 32px;
-	}
-}
+  &::-moz-focus-inner {
+	border: 0;
+  }
 
-.large {
-	&.icon-button {
-		height: 42px;
-		width: 42px;
-	}
-}
+  > i {
+	display: none;
+  }
 
-.xlarge {
-	--button-padding-vertical: var(--spacing-xs);
-	--button-padding-horizontal: var(--spacing-s);
-	--button-font-size: var(--font-size-m);
+  > span {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+  }
 
-	&.icon-button {
-		height: 46px;
-		width: 46px;
-	}
-}
+  span + span {
+	margin-left: var(--spacing-3xs);
+  }
 
-/**
- * Colors
- */
+  /**
+   * Colors
+   */
 
-.secondary {
+  &.secondary {
 	--button-color: var(--color-primary);
 	--button-border-color: var(--color-primary);
 	--button-background-color: var(--color-background-xlight);
@@ -246,9 +184,10 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 	--button-hover-border-color: var(--color-primary);
 
 	--button-focus-outline-color: var(--color-primary-tint-1);
-}
+  }
 
-.tertiary {
+  &.tertiary,
+  &.btn--cancel {
 	font-weight: var(--font-weight-regular) !important;
 
 	--button-background-color: var(--color-background-xlight);
@@ -264,9 +203,9 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 	--button-hover-border-color: var(--color-neutral-800);
 
 	--button-focus-outline-color: hsla(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l), 0.2);
-}
+  }
 
-.success {
+  &.success {
 	--button-background-color: var(--color-success);
 	--button-color: var(--color-text-xlight);
 	--button-border-color: var(--color-success);
@@ -278,9 +217,9 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 	--button-hover-border-color: var(--color-success-450);
 
 	--button-focus-outline-color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), 0.33);
-}
+  }
 
-.warning {
+  &.warning {
 	--button-background-color: var(--color-warning);
 	--button-color: var(--color-text-xlight);
 	--button-border-color: var(--color-warning);
@@ -292,9 +231,9 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 	--button-hover-border-color: var(--color-warning-650);
 
 	--button-focus-outline-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), 0.33);
-}
+  }
 
-.danger {
+  &.danger {
 	--button-background-color: var(--color-danger);
 	--button-color: var(--color-text-xlight);
 	--button-border-color: var(--color-danger);
@@ -307,7 +246,75 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 	--button-hover-border-color: var(--color-danger-700);
 
 	--button-focus-outline-color: hsla(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l), 0.33);
+  }
+
+  /**
+   * Sizes
+   */
+
+  &.mini,
+  &.el-button--mini {
+	--button-padding-vertical: var(--spacing-4xs);
+	--button-padding-horizontal: var(--spacing-2xs);
+	--button-font-size: var(--font-size-2xs);
+
+	&.icon-button {
+	  height: 22px;
+	  width: 22px;
+	}
+  }
+
+  &.small,
+  &.el-button--small  {
+	--button-padding-vertical: var(--spacing-3xs);
+	--button-padding-horizontal: var(--spacing-xs);
+	--button-font-size: var(--font-size-2xs);
+
+	&.icon-button {
+	  height: 26px;
+	  width: 26px;
+	}
+  }
+
+  &.medium,
+  &.el-button--medium  {
+	--button-padding-vertical: var(--spacing-2xs);
+	--button-padding-horizontal: var(--spacing-xs);
+	--button-font-size: var(--font-size-2xs);
+
+	&.icon-button {
+	  height: 32px;
+	  width: 32px;
+	}
+  }
+
+  &.large,
+  &.el-button--large  {
+	&.icon-button {
+	  height: 42px;
+	  width: 42px;
+	}
+  }
+
+  &.xlarge,
+  &.el-button--xlarge  {
+	--button-padding-vertical: var(--spacing-xs);
+	--button-padding-horizontal: var(--spacing-s);
+	--button-font-size: var(--font-size-m);
+
+	&.icon-button {
+	  height: 46px;
+	  width: 46px;
+	}
+  }
 }
+</style>
+
+<style lang="scss" module>
+@import '../../../theme/src/mixins/utils';
+@import '../../../theme/src/common/var';
+
+$loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 
 /**
  * Modifiers
diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts b/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts
index 49d65aabda473..a61c06bcc65e9 100644
--- a/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts
+++ b/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts
@@ -64,7 +64,7 @@ Outline.args = {
 	icon: 'plus',
 	title: 'my title',
 	type: 'primary',
-	outline: true
+	outline: true,
 };
 
 export const Light = ManyTemplate.bind({});
diff --git a/packages/design-system/theme/src/message-box.scss b/packages/design-system/theme/src/message-box.scss
index 95bb6931668d8..c6eeb040fa306 100644
--- a/packages/design-system/theme/src/message-box.scss
+++ b/packages/design-system/theme/src/message-box.scss
@@ -150,15 +150,13 @@
 			margin-left: 10px;
 		}
 
-		& .btn--confirm {
-			@include button.button-just-primary();
-			@include button.button-medium();
-		}
-
-		& .btn--cancel {
-			@include button.button-outline();
-			@include button.button-medium();
-		}
+		//& .btn--confirm {
+		//	@include button.button-just-primary();
+		//	@include button.button-medium();
+		//}
+		//
+		//& .btn--cancel {
+		//}
 	}
 
 	@include mixins.e(btns-reverse) {
diff --git a/packages/editor-ui/src/components/CredentialsList.vue b/packages/editor-ui/src/components/CredentialsList.vue
index 2fef894871967..bf419b121dad7 100644
--- a/packages/editor-ui/src/components/CredentialsList.vue
+++ b/packages/editor-ui/src/components/CredentialsList.vue
@@ -27,7 +27,7 @@
 					<template slot-scope="scope">
 						<div class="cred-operations">
 							<n8n-icon-button :title="$locale.baseText('credentialsList.editCredential')" @click.stop="editCredential(scope.row)" size="small" icon="pen" />
-							<n8n-icon-button :title="$locale.baseText('credentialsList.deleteCredential')" @click.stop="deleteCredential(scope.row)" size="small" icon="trash" />
+							<n8n-icon-button :title="$locale.baseText('credentialsList.deleteCredential')" @click.stop="deleteCredential(scope.row)" size="small" icon="trash" type="tertiary" />
 						</div>
 					</template>
 				</el-table-column>
diff --git a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
index 4edee24cc2001..b64c93b535146 100644
--- a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
+++ b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
@@ -31,7 +31,7 @@
 		<template v-slot:footer="{ close }">
 			<div :class="$style.footer">
 				<n8n-button @click="save" :loading="isSaving" :label="$locale.baseText('duplicateWorkflowDialog.save')" float="right" />
-				<n8n-button outline @click="close" :disabled="isSaving" :label="$locale.baseText('duplicateWorkflowDialog.cancel')" float="right" />
+				<n8n-button type="secondary" @click="close" :disabled="isSaving" :label="$locale.baseText('duplicateWorkflowDialog.cancel')" float="right" />
 			</div>
 		</template>
 	</Modal>
diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.vue b/packages/editor-ui/src/components/FixedCollectionParameter.vue
index 428981b477ea8..a4404582e4510 100644
--- a/packages/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.vue
@@ -287,6 +287,13 @@ export default mixins(genericHelpers)
 </script>
 
 <style scoped lang="scss">
+::v-deep {
+	.button {
+		--button-background-color: var(--color-background-base);
+		--button-border-color: var(--color-foreground-base);
+	}
+}
+
 .fixed-collection-parameter {
 	padding-left: var(--spacing-s);
 }
diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index b214c961d8c32..6f87bca49aece 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -32,7 +32,7 @@
 		<template v-slot:node-not-run>
 			<div :class="$style.noOutputData" v-if="parentNodes.length">
 				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.noOutputData.title') }}</n8n-text>
-				<NodeExecuteButton outline :transparent="true" :nodeName="currentNodeName" :label="$locale.baseText('ndv.input.noOutputData.executePrevious')" @execute="onNodeExecute" />
+				<NodeExecuteButton type="secondary" :transparent="true" :nodeName="currentNodeName" :label="$locale.baseText('ndv.input.noOutputData.executePrevious')" @execute="onNodeExecute" />
 				<n8n-text tag="div" size="small">
 					{{ $locale.baseText('ndv.input.noOutputData.hint') }}
 				</n8n-text>
diff --git a/packages/editor-ui/src/components/MultipleParameter.vue b/packages/editor-ui/src/components/MultipleParameter.vue
index 074bb26a7166d..2049669fe0d58 100644
--- a/packages/editor-ui/src/components/MultipleParameter.vue
+++ b/packages/editor-ui/src/components/MultipleParameter.vue
@@ -137,9 +137,10 @@ export default mixins(genericHelpers)
 </script>
 
 <style scoped lang="scss">
-
-.duplicate-parameter-item ~.add-item-wrapper {
-	margin-top: var(--spacing-xs);
+.duplicate-parameter-item {
+	~ .add-item-wrapper {
+		margin-top: var(--spacing-xs);
+	}
 }
 
 .delete-item {
@@ -157,25 +158,31 @@ export default mixins(genericHelpers)
 	}
 }
 
-::v-deep .duplicate-parameter-item {
-	position: relative;
+::v-deep {
+	.button {
+		--button-background-color: var(--color-background-base);
+		--button-border-color: var(--color-foreground-base);
+	}
+
+	.duplicate-parameter-item {
+		position: relative;
 
-	.multi > .delete-item{
-		top: 0.1em;
+		.multi > .delete-item{
+			top: 0.1em;
+		}
 	}
-}
 
-::v-deep .duplicate-parameter-input-item {
-	margin: 0.5em 0 0.25em 2em;
-}
+	.duplicate-parameter-input-item {
+		margin: 0.5em 0 0.25em 2em;
+	}
 
-::v-deep .duplicate-parameter-item + .duplicate-parameter-item {
-	.collection-parameter-wrapper {
-		border-top: 1px dashed #999;
-		margin-top: var(--spacing-xs);
+	.duplicate-parameter-item + .duplicate-parameter-item {
+		.collection-parameter-wrapper {
+			border-top: 1px dashed #999;
+			margin-top: var(--spacing-xs);
+		}
 	}
 }
-
 .no-items-exist {
 	margin: var(--spacing-xs) 0;
 }
diff --git a/packages/editor-ui/src/components/NodeTitle.vue b/packages/editor-ui/src/components/NodeTitle.vue
index f51254b676ef9..6b2f9eac99984 100644
--- a/packages/editor-ui/src/components/NodeTitle.vue
+++ b/packages/editor-ui/src/components/NodeTitle.vue
@@ -12,7 +12,7 @@
 					>{{ $locale.baseText('ndv.title.renameNode') }}</n8n-text>
 				<n8n-input ref="input" size="small" v-model="newName" />
 				<div :class="$style.editButtons">
-					<n8n-button outline size="small" @click="editName = false" :label="$locale.baseText('ndv.title.cancel')" />
+					<n8n-button type="secondary" size="small" @click="editName = false" :label="$locale.baseText('ndv.title.cancel')" />
 					<n8n-button type="primary" size="small" @click="onRename" :label="$locale.baseText('ndv.title.rename')" />
 				</div>
 			</div>
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index e383b65204f46..b37986b52288a 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -179,7 +179,7 @@
 
 								<div :class="$style.binaryButtonContainer">
 									<n8n-button size="small" :label="$locale.baseText('runData.showBinaryData')" class="binary-data-show-data-button" @click="displayBinaryData(index, key)" />
-									<n8n-button v-if="isDownloadable(index, key)" size="small" outline :label="$locale.baseText('runData.downloadBinaryData')" class="binary-data-show-data-button" @click="downloadBinaryData(index, key)" />
+									<n8n-button v-if="isDownloadable(index, key)" size="small" type="secondary" :label="$locale.baseText('runData.downloadBinaryData')" class="binary-data-show-data-button" @click="downloadBinaryData(index, key)" />
 								</div>
 							</div>
 						</div>
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
index b68bb99e2f4aa..9a48a1dbaadcf 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
@@ -44,15 +44,15 @@
 			<template slot-scope="scope">
 				<transition name="fade" mode="out-in">
 					<div class="ops" v-if="scope.row.create">
-						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" outline :disabled="isSaving" />
+						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" type="secondary" :disabled="isSaving" />
 						<n8n-button :label="$locale.baseText('tagsTable.createTag')" @click.stop="apply" :loading="isSaving" />
 					</div>
 					<div class="ops" v-else-if="scope.row.update">
-						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" outline :disabled="isSaving" />
+						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" type="secondary" :disabled="isSaving" />
 						<n8n-button :label="$locale.baseText('tagsTable.saveChanges')" @click.stop="apply" :loading="isSaving" />
 					</div>
 					<div class="ops" v-else-if="scope.row.delete">
-						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" outline :disabled="isSaving" />
+						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" type="secondary" :disabled="isSaving" />
 						<n8n-button :label="$locale.baseText('tagsTable.deleteTag')" @click.stop="apply" :loading="isSaving" />
 					</div>
 					<div class="ops main" v-else-if="!scope.row.disable">
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 7a200fcc613fd..206f535a4d6c7 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -106,10 +106,10 @@
 				@click.stop="runWorkflow()"
 				:loading="workflowRunning"
 				:label="runButtonText"
+				:title="$locale.baseText('nodeView.executesTheWorkflowFromTheStartOrWebhookNode')"
 				size="large"
 				icon="play-circle"
-				:title="$locale.baseText('nodeView.executesTheWorkflowFromTheStartOrWebhookNode')"
-				:type="workflowRunning ? 'secondary' : 'primary'"
+				type="primary"
 			/>
 
 			<n8n-icon-button

From 74813ba9644e47c80d1104da1750c2ab6fd505bc Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 16 Jun 2022 12:55:41 +0300
Subject: [PATCH 19/42] feat: Reverted to css modules. Replaced el-button with
 n8n-button at application level.

---
 .../components/N8nButton/Button.stories.ts    |   1 -
 .../src/components/N8nButton/Button.vue       | 253 +++++++++---------
 .../src/components/CollectionParameter.vue    |   4 +
 .../src/components/ExecutionsList.vue         |  21 +-
 packages/editor-ui/src/plugins/components.ts  |   1 +
 packages/editor-ui/src/views/NodeView.vue     |  10 +-
 6 files changed, 142 insertions(+), 148 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/Button.stories.ts b/packages/design-system/src/components/N8nButton/Button.stories.ts
index c65b707e6b6e8..aec891007cc21 100644
--- a/packages/design-system/src/components/N8nButton/Button.stories.ts
+++ b/packages/design-system/src/components/N8nButton/Button.stories.ts
@@ -155,7 +155,6 @@ Outline.args = {
 
 export const Text = AllColorsAndSizesTemplate.bind({});
 Text.args = {
-	type: 'primary',
 	text: true,
 	label: 'Button',
 };
diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index b78aa5708ead5..60adac4752d5c 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -88,9 +88,8 @@ export default Vue.extend({
 			return this.disabled ? 'true' : 'false';
 		},
 		classes(): string {
-			return `button ${this.type}` +
-				` el-button el-button--${this.type}` +
-				`${this.size ? ` ${this.size} el-button--${this.size}` : ''}` +
+			return `button ${this.$style['button']} ${this.$style[this.type]}` +
+				`${this.size ? ` ${this.$style[this.size]}` : ''}` +
 				`${this.outline ? ` ${this.$style['outline']}` : ''}` +
 				`${this.loading ? ` ${this.$style['loading']}` : ''}` +
 				`${this.float ? ` ${this.$style[`float-${this.float}`]}` : ''}` +
@@ -103,74 +102,77 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
 @import '../../../theme/src/mixins/utils';
 @import '../../../theme/src/common/var';
 
-.button, .el-button {
-  display: inline-block;
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-
-  border: var(--border-width-base) $button-border-color var(--border-style-base);
-  color: $button-font-color;
-  background-color: $button-background-color;
-  font-weight: var(--font-weight-bold);
-  border-radius: $button-border-radius;
-  padding: $button-padding-vertical $button-padding-horizontal;
-  font-size: $button-font-size;
-
-  -webkit-appearance: none;
-  text-align: center;
-  box-sizing: border-box;
-  outline: none;
-  margin: 0;
-  transition: 0.3s;
-
-  @include utils-user-select(none);
-
-  &:hover {
-	color: $button-hover-color;
-	border-color: $button-hover-border-color;
-	background-color: $button-hover-background-color;
-  }
-
-  &:focus {
-	border-color: $button-focus-outline-color;
-	outline: $focus-outline-width solid $button-focus-outline-color;
-  }
-
-  &:active {
-	color: $button-active-color;
-	border-color: $button-active-border-color;
-	background-color: $button-active-background-color;
+.button {
+	display: inline-block;
+	line-height: 1;
+	white-space: nowrap;
+	cursor: pointer;
+
+	border: var(--border-width-base) $button-border-color var(--border-style-base);
+	color: $button-font-color;
+	background-color: $button-background-color;
+	font-weight: var(--font-weight-bold);
+	border-radius: $button-border-radius;
+	padding: $button-padding-vertical $button-padding-horizontal;
+	font-size: $button-font-size;
+
+	-webkit-appearance: none;
+	text-align: center;
+	box-sizing: border-box;
 	outline: none;
-  }
+	margin: 0;
+	transition: 0.3s;
+
+	@include utils-user-select(none);
+
+	&:hover {
+		color: $button-hover-color;
+		border-color: $button-hover-border-color;
+		background-color: $button-hover-background-color;
+	}
+
+	&:focus {
+		border-color: $button-focus-outline-color;
+		outline: $focus-outline-width solid $button-focus-outline-color;
+	}
+
+	&:active {
+		color: $button-active-color;
+		border-color: $button-active-border-color;
+		background-color: $button-active-background-color;
+		outline: none;
+	}
+
+	&::-moz-focus-inner {
+		border: 0;
+	}
 
-  &::-moz-focus-inner {
-	border: 0;
-  }
+	> i {
+		display: none;
+	}
 
-  > i {
-	display: none;
-  }
+	> span {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 
-  > span {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-  }
+	span + span {
+		margin-left: var(--spacing-3xs);
+	}
+}
 
-  span + span {
-	margin-left: var(--spacing-3xs);
-  }
+$loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 
-  /**
-   * Colors
-   */
+/**
+ * Colors
+ */
 
-  &.secondary {
+.secondary {
 	--button-color: var(--color-primary);
 	--button-border-color: var(--color-primary);
 	--button-background-color: var(--color-background-xlight);
@@ -184,10 +186,9 @@ export default Vue.extend({
 	--button-hover-border-color: var(--color-primary);
 
 	--button-focus-outline-color: var(--color-primary-tint-1);
-  }
+}
 
-  &.tertiary,
-  &.btn--cancel {
+.tertiary {
 	font-weight: var(--font-weight-regular) !important;
 
 	--button-background-color: var(--color-background-xlight);
@@ -203,9 +204,9 @@ export default Vue.extend({
 	--button-hover-border-color: var(--color-neutral-800);
 
 	--button-focus-outline-color: hsla(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l), 0.2);
-  }
+}
 
-  &.success {
+.success {
 	--button-background-color: var(--color-success);
 	--button-color: var(--color-text-xlight);
 	--button-border-color: var(--color-success);
@@ -217,9 +218,9 @@ export default Vue.extend({
 	--button-hover-border-color: var(--color-success-450);
 
 	--button-focus-outline-color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), 0.33);
-  }
+}
 
-  &.warning {
+.warning {
 	--button-background-color: var(--color-warning);
 	--button-color: var(--color-text-xlight);
 	--button-border-color: var(--color-warning);
@@ -231,9 +232,9 @@ export default Vue.extend({
 	--button-hover-border-color: var(--color-warning-650);
 
 	--button-focus-outline-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), 0.33);
-  }
+}
 
-  &.danger {
+.danger {
 	--button-background-color: var(--color-danger);
 	--button-color: var(--color-text-xlight);
 	--button-border-color: var(--color-danger);
@@ -246,81 +247,69 @@ export default Vue.extend({
 	--button-hover-border-color: var(--color-danger-700);
 
 	--button-focus-outline-color: hsla(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l), 0.33);
-  }
+}
 
-  /**
-   * Sizes
-   */
+/**
+ * Sizes
+ */
 
-  &.mini,
-  &.el-button--mini {
+.mini {
 	--button-padding-vertical: var(--spacing-4xs);
 	--button-padding-horizontal: var(--spacing-2xs);
 	--button-font-size: var(--font-size-2xs);
 
 	&.icon-button {
-	  height: 22px;
-	  width: 22px;
+		height: 22px;
+		width: 22px;
 	}
-  }
+}
 
-  &.small,
-  &.el-button--small  {
+.small {
 	--button-padding-vertical: var(--spacing-3xs);
 	--button-padding-horizontal: var(--spacing-xs);
 	--button-font-size: var(--font-size-2xs);
 
 	&.icon-button {
-	  height: 26px;
-	  width: 26px;
+		height: 26px;
+		width: 26px;
 	}
-  }
+}
 
-  &.medium,
-  &.el-button--medium  {
+.medium {
 	--button-padding-vertical: var(--spacing-2xs);
 	--button-padding-horizontal: var(--spacing-xs);
 	--button-font-size: var(--font-size-2xs);
 
 	&.icon-button {
-	  height: 32px;
-	  width: 32px;
+		height: 32px;
+		width: 32px;
 	}
-  }
+}
 
-  &.large,
-  &.el-button--large  {
+.large {
 	&.icon-button {
-	  height: 42px;
-	  width: 42px;
+		height: 42px;
+		width: 42px;
 	}
-  }
+}
 
-  &.xlarge,
-  &.el-button--xlarge  {
+.xlarge {
 	--button-padding-vertical: var(--spacing-xs);
 	--button-padding-horizontal: var(--spacing-s);
 	--button-font-size: var(--font-size-m);
 
 	&.icon-button {
-	  height: 46px;
-	  width: 46px;
+		height: 46px;
+		width: 46px;
 	}
-  }
 }
-</style>
-
-<style lang="scss" module>
-@import '../../../theme/src/mixins/utils';
-@import '../../../theme/src/common/var';
-
-$loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 
 /**
  * Modifiers
  */
 
 .outline {
+	--button-color: var(--color-primary);
 	--button-background-color: transparent;
 	--button-disabled-background-color: transparent;
 	--button-active-background-color: transparent;
@@ -331,6 +320,10 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 		--button-active-background-color: var(--color-primary);
 	}
 
+	&.tertiary {
+		--button-color: var(--color-text-dark);
+	}
+
 	&.success {
 		--button-color: var(--color-success);
 		--button-border-color: var(--color-success);
@@ -354,8 +347,10 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 	--button-color: var(--color-text-light);
 	--button-border-color: transparent;
 	--button-background-color: transparent;
+	--button-active-color: var(--color-text-light);
 	--button-active-background-color: transparent;
 	--button-active-border-color: transparent;
+	--button-hover-color: var(--color-text-light);
 	--button-hover-background-color: transparent;
 	--button-hover-border-color: transparent;
 
@@ -396,33 +391,33 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 
 .loading,
 .active {
-  position: relative;
-  pointer-events: none;
-
-  &:before {
+	position: relative;
 	pointer-events: none;
-	content: '';
-	position: absolute;
-	left: -1px;
-	top: -1px;
-	right: -1px;
-	bottom: -1px;
-	border-radius: inherit;
-	background-color: $loading-overlay-background-color;
-  }
+
+	&:before {
+		pointer-events: none;
+		content: '';
+		position: absolute;
+		left: -1px;
+		top: -1px;
+		right: -1px;
+		bottom: -1px;
+		border-radius: inherit;
+		background-color: $loading-overlay-background-color;
+	}
 }
 
 .disabled {
-  &,
-  &:hover,
-  &:active,
-  &:focus {
-	cursor: not-allowed;
-	background-image: none;
-	color: $button-disabled-font-color;
-	background-color: $button-disabled-background-color;
-	border-color: $button-disabled-border-color;
-  }
+	&,
+	&:hover,
+	&:active,
+	&:focus {
+		cursor: not-allowed;
+		background-image: none;
+		color: $button-disabled-font-color;
+		background-color: $button-disabled-background-color;
+		border-color: $button-disabled-border-color;
+	}
 }
 
 .transparent {
diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue
index 7c8d79c07e5c8..3b8a59c4a97c9 100644
--- a/packages/editor-ui/src/components/CollectionParameter.vue
+++ b/packages/editor-ui/src/components/CollectionParameter.vue
@@ -194,6 +194,10 @@ export default mixins(
 
 	.param-options {
 		margin-top: var(--spacing-xs);
+
+		.button {
+			--button-background-color: var(--color-background-base);
+		}
 	}
 
 	.no-items-exist {
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index 2258b71ca4490..aa6f13646d01a 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -100,15 +100,14 @@
 						</n8n-tooltip>
 
 						<el-dropdown trigger="click" @command="handleRetryClick">
-							<span class="retry-button">
-								<n8n-icon-button
-									 v-if="scope.row.stoppedAt !== undefined && !scope.row.finished && scope.row.retryOf === undefined && scope.row.retrySuccessId === undefined && !scope.row.waitTill"
-									 :type="scope.row.stoppedAt === null ? 'warning': 'danger'"
-									 size="mini"
-									 :title="$locale.baseText('executionsList.retryExecution')"
-									 icon="redo"
-								/>
-							</span>
+							<n8n-icon-button
+								v-if="scope.row.stoppedAt !== undefined && !scope.row.finished && scope.row.retryOf === undefined && scope.row.retrySuccessId === undefined && !scope.row.waitTill"
+								:type="scope.row.stoppedAt === null ? 'warning': 'danger'"
+								class="ml-3xs"
+								size="mini"
+								:title="$locale.baseText('executionsList.retryExecution')"
+								icon="redo"
+							/>
 							<el-dropdown-menu slot="dropdown">
 								<el-dropdown-item :command="{command: 'currentlySaved', row: scope.row}">
 									{{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }}
@@ -756,10 +755,6 @@ export default mixins(
 	text-align: center;
 }
 
-.retry-button {
-	margin-left: 5px;
-}
-
 .selection-options {
 	height: 2em;
 }
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index 178e89ae9d30b..aa1aff25d628b 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -85,6 +85,7 @@ Vue.use(N8nActionBox);
 Vue.use(N8nActionToggle);
 Vue.use(N8nAvatar);
 Vue.component('n8n-button', N8nButton);
+Vue.component('el-button', N8nButton);
 Vue.component('n8n-card', N8nCard);
 Vue.component('n8n-form-box', N8nFormBox);
 Vue.component('n8n-form-inputs', N8nFormInputs);
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index fa97b21f8f99d..be0cb189a3982 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -89,14 +89,14 @@
 			@closeNodeCreator="closeNodeCreator"
 		/>
 		<div :class="{ 'zoom-menu': true, 'regular-zoom-menu': !isDemo, 'demo-zoom-menu': isDemo, expanded: !sidebarMenuCollapsed }">
-			<n8n-icon-button @click="zoomToFit" type="tertiary" size="xlarge" :title="$locale.baseText('nodeView.zoomToFit')" icon="expand" />
-			<n8n-icon-button @click="zoomIn" type="tertiary" size="xlarge" :title="$locale.baseText('nodeView.zoomIn')" icon="search-plus" />
-			<n8n-icon-button @click="zoomOut" type="tertiary" size="xlarge" :title="$locale.baseText('nodeView.zoomOut')" icon="search-minus" />
+			<n8n-icon-button @click="zoomToFit" type="tertiary" size="large" :title="$locale.baseText('nodeView.zoomToFit')" icon="expand" />
+			<n8n-icon-button @click="zoomIn" type="tertiary" size="large" :title="$locale.baseText('nodeView.zoomIn')" icon="search-plus" />
+			<n8n-icon-button @click="zoomOut" type="tertiary" size="large" :title="$locale.baseText('nodeView.zoomOut')" icon="search-minus" />
 			<n8n-icon-button
 				v-if="nodeViewScale !== 1 && !isDemo"
 				@click="resetZoom"
 				type="tertiary"
-				size="xlarge"
+				size="large"
 				:title="$locale.baseText('nodeView.resetZoom')"
 				icon="undo"
 			/>
@@ -2977,7 +2977,7 @@ export default mixins(
 	position: fixed;
 	left: $--sidebar-width + $--zoom-menu-margin;
 	width: 210px;
-	bottom: 45px;
+	bottom: 44px;
 	line-height: 25px;
 	color: #444;
 	padding-right: 5px;

From 56359986ca9ab0041ca98932b528255668cf05b8 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 16 Jun 2022 12:56:34 +0300
Subject: [PATCH 20/42] test: Updated button snapshot.

---
 .../N8nButton/__tests__/__snapshots__/Button.spec.ts.snap   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
index 08e482600779d..62c8235674e7d 100644
--- a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
+++ b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1
 
-exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button aria-disabled=\\"false\\" aria-pressed=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_1uqz3_239 _primary_1uqz3_411 _medium_1uqz3_314 _icon_1uqz3_299\\"><span class=\\"_icon_1uqz3_299\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
+exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_7t6ot_115 _primary_7t6ot_288 _medium_7t6ot_254 _icon_7t6ot_239\\"><span class=\\"_icon_7t6ot_239\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 
-exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button disabled=\\"disabled\\" aria-disabled=\\"false\\" aria-pressed=\\"false\\" aria-busy=\\"true\\" aria-live=\\"polite\\" class=\\"button _button_1uqz3_239 _primary_1uqz3_411 _loading_1uqz3_470 _medium_1uqz3_314 _icon_1uqz3_299\\"><span class=\\"_icon_1uqz3_299\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
+exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button disabled=\\"disabled\\" aria-disabled=\\"false\\" aria-busy=\\"true\\" aria-live=\\"polite\\" class=\\"button _button_7t6ot_115 _primary_7t6ot_288 _medium_7t6ot_254 _loading_7t6ot_352 _icon_7t6ot_239\\"><span class=\\"_icon_7t6ot_239\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
 
 exports[`components > N8nButton > should render correctly 1`] = `
-"<button aria-disabled=\\"false\\" aria-pressed=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_1uqz3_239 _primary_1uqz3_411 _medium_1uqz3_314\\">
+"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_7t6ot_115 _primary_7t6ot_288 _medium_7t6ot_254\\">
   <!----><span>Button</span></button>"
 `;

From 3ab8d12adb787b6b644a2d72c7c34fe4d4146f25 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 16 Jun 2022 13:29:50 +0300
Subject: [PATCH 21/42] fix: Fixed element-ui locally referenced buttons (via
 components: {}).

---
 .../design-system/theme/src/color-picker.scss | 630 +++++++++---------
 packages/editor-ui/vue.config.js              |   7 +
 2 files changed, 320 insertions(+), 317 deletions(-)

diff --git a/packages/design-system/theme/src/color-picker.scss b/packages/design-system/theme/src/color-picker.scss
index 3c4b114f95f33..e502636197194 100644
--- a/packages/design-system/theme/src/color-picker.scss
+++ b/packages/design-system/theme/src/color-picker.scss
@@ -3,380 +3,376 @@
 @use "./common/var";
 
 @include mixins.b(color-predefine) {
-	display: flex;
-	font-size: 12px;
-	margin-top: 8px;
-	width: 280px;
+  display: flex;
+  font-size: 12px;
+  margin-top: 8px;
+  width: 280px;
 
-	@include mixins.e(colors) {
-		display: flex;
-		flex: 1;
-		flex-wrap: wrap;
+  @include mixins.e(colors) {
+	display: flex;
+	flex: 1;
+	flex-wrap: wrap;
+  }
+
+  @include mixins.e(color-selector) {
+	margin: 0 0 8px 8px;
+	width: 20px;
+	height: 20px;
+	border-radius: 4px;
+	cursor: pointer;
+
+	&:nth-child(10n + 1) {
+	  margin-left: 0;
 	}
 
-	@include mixins.e(color-selector) {
-		margin: 0 0 8px 8px;
-		width: 20px;
-		height: 20px;
-		border-radius: 4px;
-		cursor: pointer;
-
-		&:nth-child(10n + 1) {
-			margin-left: 0;
-		}
-
-		&.selected {
-			box-shadow: 0 0 3px 2px var(--color-primary);
-		}
-
-		> div {
-			display: flex;
-			height: 100%;
-			border-radius: 3px;
-		}
-
-		@include mixins.when(alpha) {
-			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-		}
+	&.selected {
+	  box-shadow: 0 0 3px 2px var(--color-primary);
 	}
-}
 
-@include mixins.b(color-hue-slider) {
-	position: relative;
-	box-sizing: border-box;
-	width: 280px;
-	height: 12px;
-	background-color: #f00;
-	padding: 0 2px;
-
-	@include mixins.e(bar) {
-		position: relative;
-		background: linear-gradient(
-			to right,
-			#f00 0%,
-			#ff0 17%,
-			#0f0 33%,
-			#0ff 50%,
-			#00f 67%,
-			#f0f 83%,
-			#f00 100%
-		);
-		height: 100%;
+	> div {
+	  display: flex;
+	  height: 100%;
+	  border-radius: 3px;
 	}
 
-	@include mixins.e(thumb) {
-		position: absolute;
-		cursor: pointer;
-		box-sizing: border-box;
-		left: 0;
-		top: 0;
-		width: 4px;
-		height: 100%;
-		border-radius: 1px;
-		background: #fff;
-		border: 1px solid #f0f0f0;
-		box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
-		z-index: 1;
-	}
-
-	@include mixins.when(vertical) {
-		width: 12px;
-		height: 180px;
-		padding: 2px 0;
-
-		.el-color-hue-slider__bar {
-			background: linear-gradient(
-				to bottom,
-				#f00 0%,
-				#ff0 17%,
-				#0f0 33%,
-				#0ff 50%,
-				#00f 67%,
-				#f0f 83%,
-				#f00 100%
-			);
-		}
-
-		.el-color-hue-slider__thumb {
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 4px;
-		}
+	@include mixins.when(alpha) {
+	  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
 	}
+  }
 }
 
-@include mixins.b(color-svpanel) {
+@include mixins.b(color-hue-slider) {
+  position: relative;
+  box-sizing: border-box;
+  width: 280px;
+  height: 12px;
+  background-color: #f00;
+  padding: 0 2px;
+
+  @include mixins.e(bar) {
 	position: relative;
-	width: 280px;
+	background: linear-gradient(
+					to right,
+					#f00 0%,
+					#ff0 17%,
+					#0f0 33%,
+					#0ff 50%,
+					#00f 67%,
+					#f0f 83%,
+					#f00 100%
+	);
+	height: 100%;
+  }
+
+  @include mixins.e(thumb) {
+	position: absolute;
+	cursor: pointer;
+	box-sizing: border-box;
+	left: 0;
+	top: 0;
+	width: 4px;
+	height: 100%;
+	border-radius: 1px;
+	background: #fff;
+	border: 1px solid #f0f0f0;
+	box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+	z-index: 1;
+  }
+
+  @include mixins.when(vertical) {
+	width: 12px;
 	height: 180px;
-
-	@include mixins.e(('white', 'black')) {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
+	padding: 2px 0;
+
+	.el-color-hue-slider__bar {
+	  background: linear-gradient(
+					  to bottom,
+					  #f00 0%,
+					  #ff0 17%,
+					  #0f0 33%,
+					  #0ff 50%,
+					  #00f 67%,
+					  #f0f 83%,
+					  #f00 100%
+	  );
 	}
 
-	@include mixins.e('white') {
-		background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-	}
-
-	@include mixins.e('black') {
-		background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+	.el-color-hue-slider__thumb {
+	  left: 0;
+	  top: 0;
+	  width: 100%;
+	  height: 4px;
 	}
+  }
+}
 
-	@include mixins.e(cursor) {
-		position: absolute;
-
-		> div {
-			cursor: head;
-			width: 4px;
-			height: 4px;
-			box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
-				0 0 1px 2px rgba(0, 0, 0, 0.4);
-			border-radius: 50%;
-			transform: translate(-2px, -2px);
-		}
+@include mixins.b(color-svpanel) {
+  position: relative;
+  width: 280px;
+  height: 180px;
+
+  @include mixins.e(('white', 'black')) {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+  }
+
+  @include mixins.e('white') {
+	background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+  }
+
+  @include mixins.e('black') {
+	background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+  }
+
+  @include mixins.e(cursor) {
+	position: absolute;
+
+	> div {
+	  cursor: head;
+	  width: 4px;
+	  height: 4px;
+	  box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
+	  0 0 1px 2px rgba(0, 0, 0, 0.4);
+	  border-radius: 50%;
+	  transform: translate(-2px, -2px);
 	}
+  }
 }
 
 @include mixins.b(color-alpha-slider) {
+  position: relative;
+  box-sizing: border-box;
+  width: 280px;
+  height: 12px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+
+  @include mixins.e(bar) {
 	position: relative;
+	background: linear-gradient(
+					to right,
+					rgba(255, 255, 255, 0) 0%,
+					rgba(255, 255, 255, 1) 100%
+	);
+	height: 100%;
+  }
+
+  @include mixins.e(thumb) {
+	position: absolute;
+	cursor: pointer;
 	box-sizing: border-box;
-	width: 280px;
-	height: 12px;
-	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-
-	@include mixins.e(bar) {
-		position: relative;
-		background: linear-gradient(
-			to right,
-			rgba(255, 255, 255, 0) 0%,
-			rgba(255, 255, 255, 1) 100%
-		);
-		height: 100%;
-	}
+	left: 0;
+	top: 0;
+	width: 4px;
+	height: 100%;
+	border-radius: 1px;
+	background: #fff;
+	border: 1px solid #f0f0f0;
+	box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+	z-index: 1;
+  }
+
+  @include mixins.when(vertical) {
+	width: 20px;
+	height: 180px;
 
-	@include mixins.e(thumb) {
-		position: absolute;
-		cursor: pointer;
-		box-sizing: border-box;
-		left: 0;
-		top: 0;
-		width: 4px;
-		height: 100%;
-		border-radius: 1px;
-		background: #fff;
-		border: 1px solid #f0f0f0;
-		box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
-		z-index: 1;
+	.el-color-alpha-slider__bar {
+	  background: linear-gradient(
+					  to bottom,
+					  rgba(255, 255, 255, 0) 0%,
+					  rgba(255, 255, 255, 1) 100%
+	  );
 	}
 
-	@include mixins.when(vertical) {
-		width: 20px;
-		height: 180px;
-
-		.el-color-alpha-slider__bar {
-			background: linear-gradient(
-				to bottom,
-				rgba(255, 255, 255, 0) 0%,
-				rgba(255, 255, 255, 1) 100%
-			);
-		}
-
-		.el-color-alpha-slider__thumb {
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 4px;
-		}
+	.el-color-alpha-slider__thumb {
+	  left: 0;
+	  top: 0;
+	  width: 100%;
+	  height: 4px;
 	}
+  }
 }
 
 @include mixins.b(color-dropdown) {
-	width: 300px;
-
-	@include mixins.e(main-wrapper) {
-		margin-bottom: 6px;
-
-		&::after {
-			content: '';
-			display: table;
-			clear: both;
-		}
-	}
-
-	@include mixins.e(btns) {
-		margin-top: 6px;
-		text-align: right;
-	}
+  width: 300px;
 
-	@include mixins.e(value) {
-		float: left;
-		line-height: 26px;
-		font-size: 12px;
-		color: var.$color-black;
-		width: 160px;
-	}
+  @include mixins.e(main-wrapper) {
+	margin-bottom: 6px;
 
-	@include mixins.e(btn) {
-		@include button.button-round();
-		@include button.button-small();
-		@include button.button-just-primary();
+	&::after {
+	  content: '';
+	  display: table;
+	  clear: both;
 	}
+  }
 
-	@include mixins.e(link-btn) {
-		@include button.button-round();
-		@include button.button-outline();
-		@include button.button-small();
+  @include mixins.e(btns) {
+	margin-top: 6px;
+	text-align: right;
+  }
 
-		margin-right: var(--spacing-2xs);
-	}
+  @include mixins.e(value) {
+	float: left;
+	line-height: 26px;
+	font-size: 12px;
+	color: var.$color-black;
+	width: 160px;
+  }
+
+  @include mixins.e(btn) {
+	@include button.button-small();
+	@include button.button-just-primary();
+  }
+
+  @include mixins.e(link-btn) {
+	@include button.button-small();
+	margin-right: var(--spacing-2xs);
+  }
 }
 
 @include mixins.b(color-picker) {
-	display: inline-block;
-	position: relative;
-	line-height: normal;
-	height: 40px;
-
-	@include mixins.when(disabled) {
-		.el-color-picker__trigger {
-			cursor: not-allowed;
-		}
+  display: inline-block;
+  position: relative;
+  line-height: normal;
+  height: 40px;
+
+  @include mixins.when(disabled) {
+	.el-color-picker__trigger {
+	  cursor: not-allowed;
 	}
+  }
 
-	@include mixins.m(medium) {
-		height: 36px;
+  @include mixins.m(medium) {
+	height: 36px;
 
-		.el-color-picker__trigger {
-			height: 36px;
-			width: 36px;
-		}
-
-		.el-color-picker__mask {
-			height: 34px;
-			width: 34px;
-		}
+	.el-color-picker__trigger {
+	  height: 36px;
+	  width: 36px;
 	}
 
-	@include mixins.m(small) {
-		height: 32px;
-
-		.el-color-picker__trigger {
-			height: 32px;
-			width: 32px;
-		}
-
-		.el-color-picker__mask {
-			height: 30px;
-			width: 30px;
-		}
-
-		.el-color-picker__icon,
-		.el-color-picker__empty {
-			transform: translate3d(-50%, -50%, 0) scale(0.8);
-		}
+	.el-color-picker__mask {
+	  height: 34px;
+	  width: 34px;
 	}
+  }
 
-	@include mixins.m(mini) {
-		height: 28px;
-
-		.el-color-picker__trigger {
-			height: 28px;
-			width: 28px;
-		}
-
-		.el-color-picker__mask {
-			height: 26px;
-			width: 26px;
-		}
+  @include mixins.m(small) {
+	height: 32px;
 
-		.el-color-picker__icon,
-		.el-color-picker__empty {
-			transform: translate3d(-50%, -50%, 0) scale(0.8);
-		}
+	.el-color-picker__trigger {
+	  height: 32px;
+	  width: 32px;
 	}
 
-	@include mixins.e(mask) {
-		height: 38px;
-		width: 38px;
-		border-radius: 4px;
-		position: absolute;
-		top: 1px;
-		left: 1px;
-		z-index: 1;
-		cursor: not-allowed;
-		background-color: rgba(255, 255, 255, 0.7);
+	.el-color-picker__mask {
+	  height: 30px;
+	  width: 30px;
 	}
 
-	@include mixins.e(trigger) {
-		display: inline-block;
-		box-sizing: border-box;
-		height: 40px;
-		width: 40px;
-		padding: 4px;
-		border: 1px solid #e6e6e6;
-		border-radius: 4px;
-		font-size: 0;
-		position: relative;
-		cursor: pointer;
+	.el-color-picker__icon,
+	.el-color-picker__empty {
+	  transform: translate3d(-50%, -50%, 0) scale(0.8);
 	}
+  }
 
-	@include mixins.e(color) {
-		position: relative;
-		display: block;
-		box-sizing: border-box;
-		border: 1px solid #999;
-		border-radius: var(--border-radius-small);
-		width: 100%;
-		height: 100%;
-		text-align: center;
-
-		@include mixins.when(alpha) {
-			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-		}
-	}
+  @include mixins.m(mini) {
+	height: 28px;
 
-	@include mixins.e(color-inner) {
-		position: absolute;
-		left: 0;
-		top: 0;
-		right: 0;
-		bottom: 0;
+	.el-color-picker__trigger {
+	  height: 28px;
+	  width: 28px;
 	}
 
-	@include mixins.e(empty) {
-		font-size: 12px;
-		color: #999;
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate3d(-50%, -50%, 0);
+	.el-color-picker__mask {
+	  height: 26px;
+	  width: 26px;
 	}
 
-	@include mixins.e(icon) {
-		display: inline-block;
-		position: absolute;
-		width: 100%;
-		top: 50%;
-		left: 50%;
-		transform: translate3d(-50%, -50%, 0);
-		color: var.$color-white;
-		text-align: center;
-		font-size: 12px;
+	.el-color-picker__icon,
+	.el-color-picker__empty {
+	  transform: translate3d(-50%, -50%, 0) scale(0.8);
 	}
+  }
+
+  @include mixins.e(mask) {
+	height: 38px;
+	width: 38px;
+	border-radius: 4px;
+	position: absolute;
+	top: 1px;
+	left: 1px;
+	z-index: 1;
+	cursor: not-allowed;
+	background-color: rgba(255, 255, 255, 0.7);
+  }
+
+  @include mixins.e(trigger) {
+	display: inline-block;
+	box-sizing: border-box;
+	height: 40px;
+	width: 40px;
+	padding: 4px;
+	border: 1px solid #e6e6e6;
+	border-radius: 4px;
+	font-size: 0;
+	position: relative;
+	cursor: pointer;
+  }
 
-	@include mixins.e(panel) {
-		position: absolute;
-		z-index: 10;
-		padding: 6px;
-		box-sizing: content-box;
-		background-color: var.$color-white;
-		border: 1px solid var(--border-color-light);
-		border-radius: var(--border-radius-base);
-		box-shadow: var.$dropdown-menu-box-shadow;
+  @include mixins.e(color) {
+	position: relative;
+	display: block;
+	box-sizing: border-box;
+	border: 1px solid #999;
+	border-radius: var(--border-radius-small);
+	width: 100%;
+	height: 100%;
+	text-align: center;
+
+	@include mixins.when(alpha) {
+	  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
 	}
+  }
+
+  @include mixins.e(color-inner) {
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+  }
+
+  @include mixins.e(empty) {
+	font-size: 12px;
+	color: #999;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate3d(-50%, -50%, 0);
+  }
+
+  @include mixins.e(icon) {
+	display: inline-block;
+	position: absolute;
+	width: 100%;
+	top: 50%;
+	left: 50%;
+	transform: translate3d(-50%, -50%, 0);
+	color: var.$color-white;
+	text-align: center;
+	font-size: 12px;
+  }
+
+  @include mixins.e(panel) {
+	position: absolute;
+	z-index: 10;
+	padding: 6px;
+	box-sizing: content-box;
+	background-color: var.$color-white;
+	border: 1px solid var(--border-color-light);
+	border-radius: var(--border-radius-base);
+	box-shadow: var.$dropdown-menu-box-shadow;
+  }
 }
diff --git a/packages/editor-ui/vue.config.js b/packages/editor-ui/vue.config.js
index 35338dd497d82..b19f98f816ad7 100644
--- a/packages/editor-ui/vue.config.js
+++ b/packages/editor-ui/vue.config.js
@@ -1,3 +1,4 @@
+const path = require('path');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 module.exports = {
@@ -27,6 +28,12 @@ module.exports = {
 		plugins: [
 			new MonacoWebpackPlugin({ languages: ['javascript', 'json', 'typescript'] }),
 		],
+		resolve: {
+			alias: {
+				'element-ui/packages/button': path.resolve(__dirname, '..', 'design-system/src/components/N8nButton/Button.vue'),
+				'element-ui/lib/button': path.resolve(__dirname, '..', 'design-system/src/components/N8nButton/Button.vue'),
+			},
+		},
 	},
 	css: {
 		loaderOptions: {

From 4fe07cdda5bf7572eba7faee37f130e964e79155 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 20 Jun 2022 11:46:35 +0300
Subject: [PATCH 22/42] fix: Updated colors. Removed irrelevant validation.
 Added ElButton override component.

---
 package-lock.json                             | 2855 +++++++++--------
 .../N8nButton/__tests__/Button.spec.ts        |   16 +
 .../__snapshots__/Button.spec.ts.snap         |    5 +
 .../N8nButton/overrides/ElButton.vue          |   19 +
 .../components/N8nIconButton/IconButton.vue   |    4 -
 .../design-system/theme/src/_tokens.dark.scss |    4 +-
 packages/design-system/theme/src/_tokens.scss |    4 +-
 .../src/components/NodeExecuteButton.vue      |    4 -
 packages/editor-ui/vue.config.js              |    4 +-
 9 files changed, 1482 insertions(+), 1433 deletions(-)
 create mode 100644 packages/design-system/src/components/N8nButton/overrides/ElButton.vue

diff --git a/package-lock.json b/package-lock.json
index b942848b34209..dc664a831c710 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -605,17 +605,17 @@
 			}
 		},
 		"node_modules/@babel/compat-data": {
-			"version": "7.17.10",
-			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.10.tgz",
-			"integrity": "sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw==",
+			"version": "7.18.5",
+			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.5.tgz",
+			"integrity": "sha512-BxhE40PVCBxVEJsSBhB6UWyAuqJRxGsAw8BdHMJ3AKGydcwuWW4kOO3HmqBQAdcq/OP+/DlTVxLvsCzRTnZuGg==",
 			"engines": {
 				"node": ">=6.9.0"
 			}
 		},
 		"node_modules/@babel/core": {
-			"version": "7.18.2",
-			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.2.tgz",
-			"integrity": "sha512-A8pri1YJiC5UnkdrWcmfZTJTV85b4UXTAfImGmCfYmax4TR9Cw8sDS0MOk++Gp2mE/BefVJ5nwy5yzqNJbP/DQ==",
+			"version": "7.18.5",
+			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.5.tgz",
+			"integrity": "sha512-MGY8vg3DxMnctw0LdvSEojOsumc70g0t18gNyUdAZqB1Rpd1Bqo/svHGvt+UJ6JcGX+DIekGFDxxIWofBxLCnQ==",
 			"dependencies": {
 				"@ampproject/remapping": "^2.1.0",
 				"@babel/code-frame": "^7.16.7",
@@ -623,10 +623,10 @@
 				"@babel/helper-compilation-targets": "^7.18.2",
 				"@babel/helper-module-transforms": "^7.18.0",
 				"@babel/helpers": "^7.18.2",
-				"@babel/parser": "^7.18.0",
+				"@babel/parser": "^7.18.5",
 				"@babel/template": "^7.16.7",
-				"@babel/traverse": "^7.18.2",
-				"@babel/types": "^7.18.2",
+				"@babel/traverse": "^7.18.5",
+				"@babel/types": "^7.18.4",
 				"convert-source-map": "^1.7.0",
 				"debug": "^4.1.0",
 				"gensync": "^1.0.0-beta.2",
@@ -1043,9 +1043,9 @@
 			}
 		},
 		"node_modules/@babel/parser": {
-			"version": "7.18.4",
-			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.4.tgz",
-			"integrity": "sha512-FDge0dFazETFcxGw/EXzOkN8uJp0PC7Qbm+Pe9T+av2zlBpOgunFHkQPPn+eRuClU73JF+98D531UgayY89tow==",
+			"version": "7.18.5",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.5.tgz",
+			"integrity": "sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw==",
 			"bin": {
 				"parser": "bin/babel-parser.js"
 			},
@@ -1877,9 +1877,9 @@
 			}
 		},
 		"node_modules/@babel/plugin-transform-modules-systemjs": {
-			"version": "7.18.4",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.4.tgz",
-			"integrity": "sha512-lH2UaQaHVOAeYrUUuZ8i38o76J/FnO8vu21OE+tD1MyP9lxdZoSfz+pDbWkq46GogUrdrMz3tiz/FYGB+bVThg==",
+			"version": "7.18.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.5.tgz",
+			"integrity": "sha512-SEewrhPpcqMF1V7DhnEbhVJLrC+nnYfe1E0piZMZXBpxi9WvZqWGwpsk7JYP7wPWeqaBh4gyKlBhHJu3uz5g4Q==",
 			"dependencies": {
 				"@babel/helper-hoist-variables": "^7.16.7",
 				"@babel/helper-module-transforms": "^7.18.0",
@@ -1925,9 +1925,9 @@
 			}
 		},
 		"node_modules/@babel/plugin-transform-new-target": {
-			"version": "7.17.12",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.17.12.tgz",
-			"integrity": "sha512-CaOtzk2fDYisbjAD4Sd1MTKGVIpRtx9bWLyj24Y/k6p4s4gQ3CqDGJauFJxt8M/LEx003d0i3klVqnN73qvK3w==",
+			"version": "7.18.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.5.tgz",
+			"integrity": "sha512-TuRL5uGW4KXU6OsRj+mLp9BM7pO8e7SGNTEokQRRxHFkXYMFiy2jlKSZPFtI/mKORDzciH+hneskcSOp0gU8hg==",
 			"dependencies": {
 				"@babel/helper-plugin-utils": "^7.17.12"
 			},
@@ -2072,9 +2072,9 @@
 			}
 		},
 		"node_modules/@babel/plugin-transform-runtime": {
-			"version": "7.18.2",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.18.2.tgz",
-			"integrity": "sha512-mr1ufuRMfS52ttq+1G1PD8OJNqgcTFjq3hwn8SZ5n1x1pBhi0E36rYMdTK0TsKtApJ4lDEdfXJwtGobQMHSMPg==",
+			"version": "7.18.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.18.5.tgz",
+			"integrity": "sha512-Q17hHxXr2fplrE+5BSC1j1Fo5cOA8YeP8XW3/1paI8MzF/faZGh0MaH1KC4jLAvqLPamQWHB5/B7KqSLY1kuHA==",
 			"dependencies": {
 				"@babel/helper-module-imports": "^7.16.7",
 				"@babel/helper-plugin-utils": "^7.17.12",
@@ -2415,9 +2415,9 @@
 			}
 		},
 		"node_modules/@babel/traverse": {
-			"version": "7.18.2",
-			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.2.tgz",
-			"integrity": "sha512-9eNwoeovJ6KH9zcCNnENY7DMFwTU9JdGCFtqNLfUAqtUHRCOsTOqWoffosP8vKmNYeSBUv3yVJXjfd8ucwOjUA==",
+			"version": "7.18.5",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.5.tgz",
+			"integrity": "sha512-aKXj1KT66sBj0vVzk6rEeAO6Z9aiiQ68wfDgge3nHhA/my6xMM/7HGQUNumKZaoa2qUPQ5whJG9aAifsxUKfLA==",
 			"dependencies": {
 				"@babel/code-frame": "^7.16.7",
 				"@babel/generator": "^7.18.2",
@@ -2425,8 +2425,8 @@
 				"@babel/helper-function-name": "^7.17.9",
 				"@babel/helper-hoist-variables": "^7.16.7",
 				"@babel/helper-split-export-declaration": "^7.16.7",
-				"@babel/parser": "^7.18.0",
-				"@babel/types": "^7.18.2",
+				"@babel/parser": "^7.18.5",
+				"@babel/types": "^7.18.4",
 				"debug": "^4.1.0",
 				"globals": "^11.1.0"
 			},
@@ -2793,11 +2793,11 @@
 			}
 		},
 		"node_modules/@fortawesome/vue-fontawesome": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.6.tgz",
-			"integrity": "sha512-V3vT3flY15AKbUS31aZOP12awQI3aAzkr2B1KnqcHLmwrmy51DW3pwyBczKdypV8QxBZ8U68Hl2XxK2nudTxpg==",
+			"version": "2.0.8",
+			"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.8.tgz",
+			"integrity": "sha512-SRmP0q9Ox4zq8ydDR/hrH+23TVU1bdwYVnugLVaAIwklOHbf56gx6JUGlwES7zjuNYqzKgl8e39iYf6ph8qSQw==",
 			"peerDependencies": {
-				"@fortawesome/fontawesome-svg-core": "~1 || >=1.3.0-beta1",
+				"@fortawesome/fontawesome-svg-core": "~1 || ~6",
 				"vue": "~2"
 			}
 		},
@@ -10756,9 +10756,9 @@
 			}
 		},
 		"node_modules/@lit-labs/react": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.4.tgz",
-			"integrity": "sha512-Sy4RCxTZpTE2TwByjVac6gC7jzr8bCQC6s9bJhhJDKos4ZlN2cqcuVz63n0mpSSr1zxFh+Z0o0VR223l36Y4Ag=="
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.5.tgz",
+			"integrity": "sha512-GSbzzsIalrBOC11pC+KwQwvgvmVZpXfKo7k3BoGSqLf3jXD3GI2xIvIxTaMGp3OLDqG5F43jOMCPdsh0Nq97dg=="
 		},
 		"node_modules/@lit/reactive-element": {
 			"version": "1.3.2",
@@ -10837,9 +10837,9 @@
 			}
 		},
 		"node_modules/@mapbox/node-pre-gyp/node_modules/minipass": {
-			"version": "3.1.6",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-			"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+			"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 			"dependencies": {
 				"yallist": "^4.0.0"
 			},
@@ -11001,7 +11001,7 @@
 		"node_modules/@mdx-js/mdx/node_modules/source-map": {
 			"version": "0.5.7",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-			"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+			"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -11757,17 +11757,17 @@
 			"integrity": "sha512-/5O7Fq6Vnv8L6ucmPjaWbVG1XkP4FO+w5glqfkIsq3Xw4oyNAdJddbnYodNDAfjVUvo/rrSCTom4kAND7T1o5Q=="
 		},
 		"node_modules/@storybook/addon-actions": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.5.8.tgz",
-			"integrity": "sha512-9ciR1iWBTzQNBDlq0iQs9+TV7gng+FbQxW5mHNxNvT9SxY1dt02wCPHZeVE/5la61wBXZs/zpEepZA93VzVBDw==",
-			"dependencies": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.5.9.tgz",
+			"integrity": "sha512-wDYm3M1bN+zcYZV3Q24M03b/P8DDpvj1oSoY6VLlxDAi56h8qZB/voeIS2I6vWXOB79C5tbwljYNQO0GsufS0g==",
+			"dependencies": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/theming": "6.5.8",
+				"@storybook/theming": "6.5.9",
 				"core-js": "^3.8.2",
 				"fast-deep-equal": "^3.1.3",
 				"global": "^4.4.0",
@@ -11799,17 +11799,17 @@
 			}
 		},
 		"node_modules/@storybook/addon-backgrounds": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.5.8.tgz",
-			"integrity": "sha512-pvlP5ZVVfd2sWzgCqG/f6RJX/h9648znYbzaLQ4Z6whQIFobP3H3/cj9k/RTy3uXg5vC0IWDHSEaCXgin2sW1Q==",
-			"dependencies": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.5.9.tgz",
+			"integrity": "sha512-9k+GiY5aiANLOct34ar29jqgdi5ZpCqpZ86zPH0GsEC6ifH6nzP4trLU0vFUe260XDCvB4g8YaI7JZKPhozERg==",
+			"dependencies": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/theming": "6.5.8",
+				"@storybook/theming": "6.5.9",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
 				"memoizerific": "^1.11.3",
@@ -11835,19 +11835,19 @@
 			}
 		},
 		"node_modules/@storybook/addon-controls": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.5.8.tgz",
-			"integrity": "sha512-fB6p5DgVHUnJKUzOlT2mtvaSCincnO+vuYLyf++f+l4BlYK1Es9HNl/puaRoMgdW+LoGJjXPTIMcMByeHVIt6Q==",
-			"dependencies": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-common": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.5.9.tgz",
+			"integrity": "sha512-VvjkgK32bGURKyWU2No6Q2B0RQZjLZk8D3neVNCnrWxwrl1G82StegxjRPn/UZm9+MZVPvTvI46nj1VdgOktnw==",
+			"dependencies": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-common": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/node-logger": "6.5.8",
-				"@storybook/store": "6.5.8",
-				"@storybook/theming": "6.5.8",
+				"@storybook/node-logger": "6.5.9",
+				"@storybook/store": "6.5.9",
+				"@storybook/theming": "6.5.9",
 				"core-js": "^3.8.2",
 				"lodash": "^4.17.21",
 				"ts-dedent": "^2.0.0"
@@ -11870,28 +11870,28 @@
 			}
 		},
 		"node_modules/@storybook/addon-docs": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.5.8.tgz",
-			"integrity": "sha512-pAvWwh5YCrsW9nHCrd5BpFigvqn92JisX0aEnwAqKC9B1AW1LxhdPn1o9CQCeszQGaq163RA6AzkCejvAqhtUQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.5.9.tgz",
+			"integrity": "sha512-9lwOZyiOJFUgGd9ADVfcgpels5o0XOXqGMeVLuzT1160nopbZjNjo/3+YLJ0pyHRPpMJ4rmq2+vxRQR6PVRgPg==",
 			"dependencies": {
 				"@babel/plugin-transform-react-jsx": "^7.12.12",
 				"@babel/preset-env": "^7.12.11",
 				"@jest/transform": "^26.6.2",
 				"@mdx-js/react": "^1.6.22",
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-common": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-common": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/docs-tools": "6.5.8",
+				"@storybook/docs-tools": "6.5.9",
 				"@storybook/mdx1-csf": "^0.0.1",
-				"@storybook/node-logger": "6.5.8",
-				"@storybook/postinstall": "6.5.8",
-				"@storybook/preview-web": "6.5.8",
-				"@storybook/source-loader": "6.5.8",
-				"@storybook/store": "6.5.8",
-				"@storybook/theming": "6.5.8",
+				"@storybook/node-logger": "6.5.9",
+				"@storybook/postinstall": "6.5.9",
+				"@storybook/preview-web": "6.5.9",
+				"@storybook/source-loader": "6.5.9",
+				"@storybook/store": "6.5.9",
+				"@storybook/theming": "6.5.9",
 				"babel-loader": "^8.0.0",
 				"core-js": "^3.8.2",
 				"fast-deep-equal": "^3.1.3",
@@ -11925,22 +11925,22 @@
 			}
 		},
 		"node_modules/@storybook/addon-essentials": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.5.8.tgz",
-			"integrity": "sha512-K/Aw/GLugCz5/S3c2tz5lnfC8aN6dSoQQDr8xaMDcBlT9h/xZ1l4jQQnx/mvY/qEvXtexBF41DE6ROWGKSZeSg==",
-			"dependencies": {
-				"@storybook/addon-actions": "6.5.8",
-				"@storybook/addon-backgrounds": "6.5.8",
-				"@storybook/addon-controls": "6.5.8",
-				"@storybook/addon-docs": "6.5.8",
-				"@storybook/addon-measure": "6.5.8",
-				"@storybook/addon-outline": "6.5.8",
-				"@storybook/addon-toolbars": "6.5.8",
-				"@storybook/addon-viewport": "6.5.8",
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/core-common": "6.5.8",
-				"@storybook/node-logger": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.5.9.tgz",
+			"integrity": "sha512-V9ThjKQsde4A2Es20pLFBsn0MWx2KCJuoTcTsANP4JDcbvEmj8UjbDWbs8jAU+yzJT5r+CI6NoWmQudv12ZOgw==",
+			"dependencies": {
+				"@storybook/addon-actions": "6.5.9",
+				"@storybook/addon-backgrounds": "6.5.9",
+				"@storybook/addon-controls": "6.5.9",
+				"@storybook/addon-docs": "6.5.9",
+				"@storybook/addon-measure": "6.5.9",
+				"@storybook/addon-outline": "6.5.9",
+				"@storybook/addon-toolbars": "6.5.9",
+				"@storybook/addon-viewport": "6.5.9",
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/core-common": "6.5.9",
+				"@storybook/node-logger": "6.5.9",
 				"core-js": "^3.8.2",
 				"regenerator-runtime": "^0.13.7",
 				"ts-dedent": "^2.0.0"
@@ -12007,15 +12007,15 @@
 			}
 		},
 		"node_modules/@storybook/addon-links": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.5.8.tgz",
-			"integrity": "sha512-UxzEPnT1PLPsuy3tt+o3UJTbI4Kihec+/yzpzzGKreUnCC8EWTsOhtMQAVVit2t4BMl4vNrxKO0mKSc8saT3Gw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.5.9.tgz",
+			"integrity": "sha512-4BYC7pkxL3NLRnEgTA9jpIkObQKril+XFj1WtmY/lngF90vvK0Kc/TtvTA2/5tSgrHfxEuPevIdxMIyLJ4ejWQ==",
 			"dependencies": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+				"@storybook/addons": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/router": "6.5.8",
+				"@storybook/router": "6.5.9",
 				"@types/qs": "^6.9.5",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
@@ -12042,15 +12042,15 @@
 			}
 		},
 		"node_modules/@storybook/addon-measure": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-6.5.8.tgz",
-			"integrity": "sha512-zpNAt1XwBLnQ3OjCfj63J7vC2WCTyAjvbGVAsUkpQb21vr/e3sPFQZPKGwio85SYjIX7AJ+Oi28mbEwWzS8wFA==",
-			"dependencies": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-6.5.9.tgz",
+			"integrity": "sha512-0aA22wD0CIEUccsEbWkckCOXOwr4VffofMH1ToVCOeqBoyLOMB0gxFubESeprqM54CWsYh2DN1uujgD6508cwA==",
+			"dependencies": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0"
@@ -12073,15 +12073,15 @@
 			}
 		},
 		"node_modules/@storybook/addon-outline": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-6.5.8.tgz",
-			"integrity": "sha512-/bEjYTVJNM5QEiguS5nVQlerl5NhgOod1zLExnkchc8+FTJC58Vy7CRfzr2iaIMuf1QRPqBwSIy6ZqLJOdUfnQ==",
-			"dependencies": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-6.5.9.tgz",
+			"integrity": "sha512-oJ1DK3BDJr6aTlZc9axfOxV1oDkZO7hOohgUQDaKO1RZrSpyQsx2ViK2X6p/W7JhFJHKh7rv+nGCaVlLz3YIZA==",
+			"dependencies": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
@@ -12106,15 +12106,15 @@
 			}
 		},
 		"node_modules/@storybook/addon-toolbars": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.5.8.tgz",
-			"integrity": "sha512-16eRbbtn4/cH1xU8JlPZRdShwUwSsPcqpyH1JNl+rgYQ6SaSNq3aO/jDFeQe93guSD0YPRWHz8dKtn6OxVeozQ==",
-			"dependencies": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/theming": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.5.9.tgz",
+			"integrity": "sha512-6JFQNHYVZUwp17p5rppc+iQJ2QOIWPTF+ni1GMMThjc84mzXs2+899Sf1aPFTvrFJTklmT+bPX6x4aUTouVa1w==",
+			"dependencies": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/theming": "6.5.9",
 				"core-js": "^3.8.2",
 				"regenerator-runtime": "^0.13.7"
 			},
@@ -12136,16 +12136,16 @@
 			}
 		},
 		"node_modules/@storybook/addon-viewport": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.5.8.tgz",
-			"integrity": "sha512-MTpZWkBWNPH55iNHK4tBNKTdew5xKfoNvOj0pZn1rYDHlylMTlq7aoccwRjjK2jZeHHNnb1rm6ZkQDjmYu0Tcw==",
-			"dependencies": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-events": "6.5.8",
-				"@storybook/theming": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.5.9.tgz",
+			"integrity": "sha512-thKS+iw6M7ueDQQ7M66STZ5rgtJKliAcIX6UCopo0Ffh4RaRYmX6MCjqtvBKk8joyXUvm9SpWQemJD9uBQrjgw==",
+			"dependencies": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-events": "6.5.9",
+				"@storybook/theming": "6.5.9",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
 				"memoizerific": "^1.11.3",
@@ -12170,17 +12170,17 @@
 			}
 		},
 		"node_modules/@storybook/addons": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.8.tgz",
-			"integrity": "sha512-L3LmbsYP9tDHHvpr/yv8YuEkzym7SXp/jZ0km31tpG3EuZmgGu7MXPrZ2ymEw4PkAhQzztgRr23VTfKobGUojA==",
-			"dependencies": {
-				"@storybook/api": "6.5.8",
-				"@storybook/channels": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.9.tgz",
+			"integrity": "sha512-adwdiXg+mntfPocLc1KXjZXyLgGk7Aac699Fwe+OUYPEC5tW347Rm/kFatcE556d42o5czcRiq3ZSIGWnm9ieQ==",
+			"dependencies": {
+				"@storybook/api": "6.5.9",
+				"@storybook/channels": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/router": "6.5.8",
-				"@storybook/theming": "6.5.8",
+				"@storybook/router": "6.5.9",
+				"@storybook/theming": "6.5.9",
 				"@types/webpack-env": "^1.16.0",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
@@ -12196,17 +12196,17 @@
 			}
 		},
 		"node_modules/@storybook/api": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.8.tgz",
-			"integrity": "sha512-/MueV+wLCvy9gFA3ih4g7QYjDmn14i+D2ydonfaEC7R+agFGXxXwJGPKkz3yBNrRpNkBwcbY9mAmv8lE2AqgqQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.9.tgz",
+			"integrity": "sha512-9ylztnty4Y+ALU/ehW3BML9czjCAFsWvrwuCi6UgcwNjswwjSX3VRLhfD1KT3pl16ho//95LgZ0LnSwROCcPOA==",
 			"dependencies": {
-				"@storybook/channels": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+				"@storybook/channels": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/router": "6.5.8",
+				"@storybook/router": "6.5.9",
 				"@storybook/semver": "^7.3.2",
-				"@storybook/theming": "6.5.8",
+				"@storybook/theming": "6.5.9",
 				"core-js": "^3.8.2",
 				"fast-deep-equal": "^3.1.3",
 				"global": "^4.4.0",
@@ -12228,27 +12228,27 @@
 			}
 		},
 		"node_modules/@storybook/builder-webpack4": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/builder-webpack4/-/builder-webpack4-6.5.8.tgz",
-			"integrity": "sha512-4/CVp/AlOxCeWZ/DF1TVS/TuzHao4l9KCq7DhL+utFEVl9c/dpgoZXc0Gy2FfHa2RXHKckrH/VUfV2KQk4TNSw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/builder-webpack4/-/builder-webpack4-6.5.9.tgz",
+			"integrity": "sha512-YOeA4++9uRZ8Hog1wC60yjaxBOiI1FRQNtax7b9E7g+kP8UlSCPCGcv4gls9hFmzbzTOPfQTWnToA9Oa6jzRVw==",
 			"dependencies": {
 				"@babel/core": "^7.12.10",
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/channel-postmessage": "6.5.8",
-				"@storybook/channels": "6.5.8",
-				"@storybook/client-api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-common": "6.5.8",
-				"@storybook/core-events": "6.5.8",
-				"@storybook/node-logger": "6.5.8",
-				"@storybook/preview-web": "6.5.8",
-				"@storybook/router": "6.5.8",
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/channel-postmessage": "6.5.9",
+				"@storybook/channels": "6.5.9",
+				"@storybook/client-api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-common": "6.5.9",
+				"@storybook/core-events": "6.5.9",
+				"@storybook/node-logger": "6.5.9",
+				"@storybook/preview-web": "6.5.9",
+				"@storybook/router": "6.5.9",
 				"@storybook/semver": "^7.3.2",
-				"@storybook/store": "6.5.8",
-				"@storybook/theming": "6.5.8",
-				"@storybook/ui": "6.5.8",
+				"@storybook/store": "6.5.9",
+				"@storybook/theming": "6.5.9",
+				"@storybook/ui": "6.5.9",
 				"@types/node": "^14.0.10 || ^16.0.0",
 				"@types/webpack": "^4.41.26",
 				"autoprefixer": "^9.8.6",
@@ -12532,7 +12532,7 @@
 		"node_modules/@storybook/builder-webpack4/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -12542,13 +12542,13 @@
 			}
 		},
 		"node_modules/@storybook/channel-postmessage": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.5.8.tgz",
-			"integrity": "sha512-6IkIKk+UMYKk05vN8gWHvvOV/EZNXpQG/5gesGDALjkCyvRmcktHak1a9tHpoihZ3L7/gDwXOZraCZmuy8vBcQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.5.9.tgz",
+			"integrity": "sha512-pX/0R8UW7ezBhCrafRaL20OvMRcmESYvQQCDgjqSzJyHkcG51GOhsd6Ge93eJ6QvRMm9+w0Zs93N2VKjVtz0Qw==",
 			"dependencies": {
-				"@storybook/channels": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+				"@storybook/channels": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
 				"qs": "^6.10.0",
@@ -12560,12 +12560,12 @@
 			}
 		},
 		"node_modules/@storybook/channel-websocket": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/channel-websocket/-/channel-websocket-6.5.8.tgz",
-			"integrity": "sha512-lAtvgO0FWsyS3u7uFbsGIYp2aSWJfWU/LOtc3x1K5c84JJAd9fncYkyZMwP1gMbdNgYxJoxe8HXtVtfeNegPuQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/channel-websocket/-/channel-websocket-6.5.9.tgz",
+			"integrity": "sha512-xtHvSNwuOhkgALwVshKWsoFhDmuvcosdYfxcfFGEiYKXIu46tRS5ZXmpmgEC/0JAVkVoFj5nL8bV7IY5np6oaA==",
 			"dependencies": {
-				"@storybook/channels": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
+				"@storybook/channels": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
 				"telejson": "^6.0.8"
@@ -12576,9 +12576,9 @@
 			}
 		},
 		"node_modules/@storybook/channels": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.8.tgz",
-			"integrity": "sha512-fNql1lEIvWlI1NiRtwFMWOOvfW6qxgeSP6xoqiAJ0b+QYegEFG9UxJDuEvVHq++S81FulgQ5U+p+5R9XSV19tQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.9.tgz",
+			"integrity": "sha512-FvGA35nV38UPXWOl9ERapFTJaxwSTamQ339s2Ev7E9riyRG+GRkgTWzf5kECJgS1PAYKd/7m/RqKJT9BVv6A5g==",
 			"dependencies": {
 				"core-js": "^3.8.2",
 				"ts-dedent": "^2.0.0",
@@ -12590,17 +12590,17 @@
 			}
 		},
 		"node_modules/@storybook/client-api": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.5.8.tgz",
-			"integrity": "sha512-mdU+qQ4+T2OUbEnl+3MWRKxEPju/EOIUg66hMgmif8c5u7YFYBFulUMUYLICMjll8Jlu+37+g+qO3K2eEz6CEw==",
-			"dependencies": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/channel-postmessage": "6.5.8",
-				"@storybook/channels": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.5.9.tgz",
+			"integrity": "sha512-pc7JKJoWLesixUKvG2nV36HukUuYoGRyAgD3PpIV7qSBS4JixqZ3VAHFUtqV1UzfOSQTovLSl4a0rIRnpie6gA==",
+			"dependencies": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/channel-postmessage": "6.5.9",
+				"@storybook/channels": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/store": "6.5.8",
+				"@storybook/store": "6.5.9",
 				"@types/qs": "^6.9.5",
 				"@types/webpack-env": "^1.16.0",
 				"core-js": "^3.8.2",
@@ -12625,9 +12625,9 @@
 			}
 		},
 		"node_modules/@storybook/client-logger": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.8.tgz",
-			"integrity": "sha512-dH6HSaVuOIMHy1+rpsqcD3SJxVZEEbuEtsNpdUGwLJaIuduhUJJpM2xQfUW0siZDyrgwoa+znll+G0YNUbv7sg==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.9.tgz",
+			"integrity": "sha512-DOHL6p0uiDd3gV/Sb2FR+Vh6OiPrrf8BrA06uvXWsMRIIvEEvnparxv9EvPg7FlmUX0T3nq7d3juwjx4F8Wbcg==",
 			"dependencies": {
 				"core-js": "^3.8.2",
 				"global": "^4.4.0"
@@ -12638,15 +12638,16 @@
 			}
 		},
 		"node_modules/@storybook/components": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.8.tgz",
-			"integrity": "sha512-YE+LZ1/GXoqertxodsf+L9ehcohbICRAxgE/iNqc7MZfk95SD3XRSUbxhCpGe8QTIZJpzs1tK4LFZ3Fg5w/+Lg==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.9.tgz",
+			"integrity": "sha512-BhfX980O9zn/1J4FNMeDo8ZvL1m5Ml3T4HRpfYmEBnf8oW5b5BeF6S2K2cwFStZRjWqm1feUcwNpZxCBVMkQnQ==",
 			"dependencies": {
-				"@storybook/client-logger": "6.5.8",
+				"@storybook/client-logger": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/theming": "6.5.8",
+				"@storybook/theming": "6.5.9",
 				"@types/react-syntax-highlighter": "11.0.5",
 				"core-js": "^3.8.2",
+				"memoizerific": "^1.11.3",
 				"qs": "^6.10.0",
 				"react-syntax-highlighter": "^15.4.5",
 				"regenerator-runtime": "^0.13.7",
@@ -12662,12 +12663,12 @@
 			}
 		},
 		"node_modules/@storybook/core": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.5.8.tgz",
-			"integrity": "sha512-+Fv4n1E5N4Avty9GcRbz4vB2IWH//se2OUU+RTT3vneCOGjyus5bj0Or6GU5wef5UGuvHF78mHg/frhWpguzsw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.5.9.tgz",
+			"integrity": "sha512-Mt3TTQnjQt2/pa60A+bqDsAOrYpohapdtt4DDZEbS8h0V6u11KyYYh3w7FCySlL+sPEyogj63l5Ec76Jah3l2w==",
 			"dependencies": {
-				"@storybook/core-client": "6.5.8",
-				"@storybook/core-server": "6.5.8"
+				"@storybook/core-client": "6.5.9",
+				"@storybook/core-server": "6.5.9"
 			},
 			"funding": {
 				"type": "opencollective",
@@ -12691,20 +12692,20 @@
 			}
 		},
 		"node_modules/@storybook/core-client": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-6.5.8.tgz",
-			"integrity": "sha512-8x8qKQ2clvpfDcoWrNBmQ8Xt9z/i32TFIBp4PEZMcbB7eqo517nzfllLiXDipiJgO7BGxKtY5CRHQ9pAU9G27A==",
-			"dependencies": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/channel-postmessage": "6.5.8",
-				"@storybook/channel-websocket": "6.5.8",
-				"@storybook/client-api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-6.5.9.tgz",
+			"integrity": "sha512-LY0QbhShowO+PQx3gao3wdVjpKMH1AaSLmuI95FrcjoMmSXGf96jVLKQp9mJRGeHIsAa93EQBYuCihZycM3Kbg==",
+			"dependencies": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/channel-postmessage": "6.5.9",
+				"@storybook/channel-websocket": "6.5.9",
+				"@storybook/client-api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/preview-web": "6.5.8",
-				"@storybook/store": "6.5.8",
-				"@storybook/ui": "6.5.8",
+				"@storybook/preview-web": "6.5.9",
+				"@storybook/store": "6.5.9",
+				"@storybook/ui": "6.5.9",
 				"airbnb-js-shims": "^2.2.1",
 				"ansi-to-html": "^0.6.11",
 				"core-js": "^3.8.2",
@@ -12732,9 +12733,9 @@
 			}
 		},
 		"node_modules/@storybook/core-common": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-6.5.8.tgz",
-			"integrity": "sha512-ELGKLMx1d0oEA2LT+fsmo85X2RNE1EO+It7B1bw//g7jyf1hmZ7t3lXMZUCqt7eml1qy1N72LDkfmmU+H9H6ww==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-6.5.9.tgz",
+			"integrity": "sha512-NxOK0mrOCo0TWZ7Npc5HU66EKoRHlrtg18/ZixblLDWQMIqY9XCck8K1kJ8QYpYCHla+aHIsYUArFe2vhlEfZA==",
 			"dependencies": {
 				"@babel/core": "^7.12.10",
 				"@babel/plugin-proposal-class-properties": "^7.12.1",
@@ -12758,7 +12759,7 @@
 				"@babel/preset-react": "^7.12.10",
 				"@babel/preset-typescript": "^7.12.7",
 				"@babel/register": "^7.12.1",
-				"@storybook/node-logger": "6.5.8",
+				"@storybook/node-logger": "6.5.9",
 				"@storybook/semver": "^7.3.2",
 				"@types/node": "^14.0.10 || ^16.0.0",
 				"@types/pretty-hrtime": "^1.0.0",
@@ -12880,9 +12881,9 @@
 			}
 		},
 		"node_modules/@storybook/core-events": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.8.tgz",
-			"integrity": "sha512-lzG4Lg65WFYvjs2k/E3CP4+eyPexEGrDyRMO9Pbj9H9x+eosYptauEbT/wXF83bmUWZKLWWVUAZX7hDcxBO8cw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.9.tgz",
+			"integrity": "sha512-tXt7a3ZvJOCeEKpNa/B5rQM5VI7UJLlOh3IHOImWn4HqoBRrZvbourmac+PRZAtXpos0h3c6554Hjapj/Sny5Q==",
 			"dependencies": {
 				"core-js": "^3.8.2"
 			},
@@ -12892,22 +12893,22 @@
 			}
 		},
 		"node_modules/@storybook/core-server": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-6.5.8.tgz",
-			"integrity": "sha512-ti7+MW1xzD9O0JLwgZTwulxhJx5YGPNu+hRpGhJSjKrqGX1h6K6ilmkBSHvyLqpiE+F4mxvqb5Rx3KBIEdEgbw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-6.5.9.tgz",
+			"integrity": "sha512-YeePGUrd5fQPvGzMhowh124KrcZURFpFXg1VB0Op3ESqCIsInoMZeObci4Gc+binMXC7vcv7aw3EwSLU37qJzQ==",
 			"dependencies": {
 				"@discoveryjs/json-ext": "^0.5.3",
-				"@storybook/builder-webpack4": "6.5.8",
-				"@storybook/core-client": "6.5.8",
-				"@storybook/core-common": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+				"@storybook/builder-webpack4": "6.5.9",
+				"@storybook/core-client": "6.5.9",
+				"@storybook/core-common": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/csf-tools": "6.5.8",
-				"@storybook/manager-webpack4": "6.5.8",
-				"@storybook/node-logger": "6.5.8",
+				"@storybook/csf-tools": "6.5.9",
+				"@storybook/manager-webpack4": "6.5.9",
+				"@storybook/node-logger": "6.5.9",
 				"@storybook/semver": "^7.3.2",
-				"@storybook/store": "6.5.8",
-				"@storybook/telemetry": "6.5.8",
+				"@storybook/store": "6.5.9",
+				"@storybook/telemetry": "6.5.9",
 				"@types/node": "^14.0.10 || ^16.0.0",
 				"@types/node-fetch": "^2.5.7",
 				"@types/pretty-hrtime": "^1.0.0",
@@ -13035,9 +13036,9 @@
 			}
 		},
 		"node_modules/@storybook/csf-tools": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-6.5.8.tgz",
-			"integrity": "sha512-4VrjIMxKcp29OFSMDub52aQOMP4EvtZ5eWZkPeORRNQoJsnQaxhF9GGf71QdSaAQZhMoxdvmpA47ehrFk8Rnfw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-6.5.9.tgz",
+			"integrity": "sha512-RAdhsO2XmEDyWy0qNQvdKMLeIZAuyfD+tYlUwBHRU6DbByDucvwgMOGy5dF97YNJFmyo93EUYJzXjUrJs3U1LQ==",
 			"dependencies": {
 				"@babel/core": "^7.12.10",
 				"@babel/generator": "^7.12.11",
@@ -13101,13 +13102,13 @@
 			}
 		},
 		"node_modules/@storybook/docs-tools": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-6.5.8.tgz",
-			"integrity": "sha512-CWMW+3LSstvQmHKV5ggPR1beQZTpwCXEhfysZ9u4Yp/4fcoDIuQ7DTOK5uNFynGCGl1FG3lATriEOhEZ3bZCvQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-6.5.9.tgz",
+			"integrity": "sha512-UoTaXLvec8x+q+4oYIk/t8DBju9C3ZTGklqOxDIt+0kS3TFAqEgI3JhKXqQOXgN5zDcvLVSxi8dbVAeSxk2ktA==",
 			"dependencies": {
 				"@babel/core": "^7.12.10",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/store": "6.5.8",
+				"@storybook/store": "6.5.9",
 				"core-js": "^3.8.2",
 				"doctrine": "^3.0.0",
 				"lodash": "^4.17.21",
@@ -13119,19 +13120,19 @@
 			}
 		},
 		"node_modules/@storybook/manager-webpack4": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/manager-webpack4/-/manager-webpack4-6.5.8.tgz",
-			"integrity": "sha512-qW5/L3cJHvtNi5ylDxObALZWaAHMsWQlPP8GRxm95NHpff4CfRo/qs7puY9ZeLmJSic0KchoHEH/8AScflLOgA==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/manager-webpack4/-/manager-webpack4-6.5.9.tgz",
+			"integrity": "sha512-49LZlHqWc7zj9tQfOOANixPYmLxqWTTZceA6DSXnKd9xDiO2Gl23Y+l/CSPXNZGDB8QFAwpimwqyKJj/NLH45A==",
 			"dependencies": {
 				"@babel/core": "^7.12.10",
 				"@babel/plugin-transform-template-literals": "^7.12.1",
 				"@babel/preset-react": "^7.12.10",
-				"@storybook/addons": "6.5.8",
-				"@storybook/core-client": "6.5.8",
-				"@storybook/core-common": "6.5.8",
-				"@storybook/node-logger": "6.5.8",
-				"@storybook/theming": "6.5.8",
-				"@storybook/ui": "6.5.8",
+				"@storybook/addons": "6.5.9",
+				"@storybook/core-client": "6.5.9",
+				"@storybook/core-common": "6.5.9",
+				"@storybook/node-logger": "6.5.9",
+				"@storybook/theming": "6.5.9",
+				"@storybook/ui": "6.5.9",
 				"@types/node": "^14.0.10 || ^16.0.0",
 				"@types/webpack": "^4.41.26",
 				"babel-loader": "^8.0.0",
@@ -13251,9 +13252,9 @@
 			}
 		},
 		"node_modules/@storybook/node-logger": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.8.tgz",
-			"integrity": "sha512-BHdkSipgjnfsh4FRYbV2R0npM5gVx9JLRsDQ0KiTolRpN4SU98kT/6885zb9jZg6I0EY+UG9Qdr3fvL9VLpY1g==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.9.tgz",
+			"integrity": "sha512-nZZNZG2Wtwv6Trxi3FrnIqUmB55xO+X/WQGPT5iKlqNjdRIu/T72mE7addcp4rbuWCQfZUhcDDGpBOwKtBxaGg==",
 			"dependencies": {
 				"@types/npmlog": "^4.1.2",
 				"chalk": "^4.1.0",
@@ -13282,9 +13283,9 @@
 			}
 		},
 		"node_modules/@storybook/postinstall": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.5.8.tgz",
-			"integrity": "sha512-Z6zQnBOaMj+gHtF1XPMpwTIxYRCmh6eNirrJLrkPk5c+fKXtw6+vNCbmPvsyTGxGEHnyn/tYwe1fvwJTHDctUw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.5.9.tgz",
+			"integrity": "sha512-KQBupK+FMRrtSt8IL0MzCZ/w9qbd25Yxxp/+ajfWgZTRgsWgVFOqcDyMhS16eNbBp5qKIBCBDXfEF+/mK8HwQQ==",
 			"dependencies": {
 				"core-js": "^3.8.2"
 			},
@@ -13294,16 +13295,16 @@
 			}
 		},
 		"node_modules/@storybook/preview-web": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/preview-web/-/preview-web-6.5.8.tgz",
-			"integrity": "sha512-jEEAgvTVZfFA0B20mRJfLW6dPA5mG5PxUJtjMx6wH4Yw4+i3Sld/U63hTRt7ktpKdrcu4lX9E+PuaRLPq7S2kg==",
-			"dependencies": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/channel-postmessage": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/preview-web/-/preview-web-6.5.9.tgz",
+			"integrity": "sha512-4eMrO2HJyZUYyL/j+gUaDvry6iGedshwT5MQqe7J9FaA+Q2pNARQRB1X53f410w7S4sObRmYIAIluWPYdWym9w==",
+			"dependencies": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/channel-postmessage": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/store": "6.5.8",
+				"@storybook/store": "6.5.9",
 				"ansi-to-html": "^0.6.11",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
@@ -13325,12 +13326,14 @@
 			}
 		},
 		"node_modules/@storybook/router": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.8.tgz",
-			"integrity": "sha512-tseNJpZ2ZzVYowjekUMpGJVVRMrwOkttieD9mRbHrhh+2n7b+SoMKnuLi3ow0xeOyPL8ZDng2FgRjQzQHXA5Sw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.9.tgz",
+			"integrity": "sha512-G2Xp/2r8vU2O34eelE+G5VbEEVFDeHcCURrVJEROh6dq2asFJAPbzslVXSeCqgOTNLSpRDJ2NcN5BckkNqmqJg==",
 			"dependencies": {
-				"@storybook/client-logger": "6.5.8",
+				"@storybook/client-logger": "6.5.9",
 				"core-js": "^3.8.2",
+				"memoizerific": "^1.11.3",
+				"qs": "^6.10.0",
 				"regenerator-runtime": "^0.13.7"
 			},
 			"funding": {
@@ -13392,12 +13395,12 @@
 			}
 		},
 		"node_modules/@storybook/source-loader": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.8.tgz",
-			"integrity": "sha512-3bVxXKE2o6lS4WGga/S7WwgITxPQ96qsY+pQ1I7A+e4/cKSmZxlVWM9qfMW2ScmHTVoZE0Ujsmn6DWftxzCyrQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.9.tgz",
+			"integrity": "sha512-H03nFKaP6borfWMTTa9igBA+Jm2ph+FoVJImWC/X+LAmLSJYYSXuqSgmiZ/DZvbjxS4k8vccE2HXogne1IvaRA==",
 			"dependencies": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
+				"@storybook/addons": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
 				"core-js": "^3.8.2",
 				"estraverse": "^5.2.0",
@@ -13428,13 +13431,13 @@
 			}
 		},
 		"node_modules/@storybook/store": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/store/-/store-6.5.8.tgz",
-			"integrity": "sha512-5rhGjN/O0oLebRv947B0vgapq48qBBBYYOgq4krRUYU2ecS6LUgtAHR/kTa324o9aBO8cnIXHH78jZcSvMiJlQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/store/-/store-6.5.9.tgz",
+			"integrity": "sha512-80pcDTcCwK6wUA63aWOp13urI77jfipIVee9mpVvbNyfrNN8kGv1BS0z/JHDxuV6rC4g7LG1fb+BurR0yki7BA==",
 			"dependencies": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+				"@storybook/addons": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
 				"core-js": "^3.8.2",
 				"fast-deep-equal": "^3.1.3",
@@ -13458,12 +13461,12 @@
 			}
 		},
 		"node_modules/@storybook/telemetry": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-6.5.8.tgz",
-			"integrity": "sha512-QnAhYF8CwcjC1bT2PK7Zqvo6E42TPl0MY6JS+H6qSZU/BmYeS0It8ZURNfPsA/OzVVLHUkQs96CisKh3N0WWaw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-6.5.9.tgz",
+			"integrity": "sha512-JluoHCRhHAr4X0eUNVBSBi1JIBA92404Tu1TPdbN7x6gCZxHXXPTSUTAnspXp/21cTdMhY2x+kfZQ8fmlGK4MQ==",
 			"dependencies": {
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-common": "6.5.8",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-common": "6.5.9",
 				"chalk": "^4.1.0",
 				"core-js": "^3.8.2",
 				"detect-package-manager": "^2.0.1",
@@ -13529,12 +13532,13 @@
 			}
 		},
 		"node_modules/@storybook/theming": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.8.tgz",
-			"integrity": "sha512-1VaKHqj38Ls1bJwDpg3+aEOlvVib/DCFkP6WYrP/AQtNAzxiyw5WkaoRlTVJZvCdu5TxjpG4O6/Ai5TI9QftIg==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.9.tgz",
+			"integrity": "sha512-KM0AMP5jMQPAdaO8tlbFCYqx9uYM/hZXGSVUhznhLYu7bhNAIK7ZVmXxyE/z/khM++8eUHzRoZGiO/cwCkg9Xw==",
 			"dependencies": {
-				"@storybook/client-logger": "6.5.8",
+				"@storybook/client-logger": "6.5.9",
 				"core-js": "^3.8.2",
+				"memoizerific": "^1.11.3",
 				"regenerator-runtime": "^0.13.7"
 			},
 			"funding": {
@@ -13547,20 +13551,22 @@
 			}
 		},
 		"node_modules/@storybook/ui": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.5.8.tgz",
-			"integrity": "sha512-rL09kxgY9pCVbxr/VUK4b5FL5VbALfciZR+50sNT1EcTDb9k0OPeqx7a4Ptc+KNkgyPdSTxUGvhzVqH5PYrhZQ==",
-			"dependencies": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/channels": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-events": "6.5.8",
-				"@storybook/router": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.5.9.tgz",
+			"integrity": "sha512-ryuPxJgtbb0gPXKGgGAUC+Z185xGAd1IvQ0jM5fJ0SisHXI8jteG3RaWhntOehi9qCg+64Vv6eH/cj9QYNHt1Q==",
+			"dependencies": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/channels": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-events": "6.5.9",
+				"@storybook/router": "6.5.9",
 				"@storybook/semver": "^7.3.2",
-				"@storybook/theming": "6.5.8",
+				"@storybook/theming": "6.5.9",
 				"core-js": "^3.8.2",
+				"memoizerific": "^1.11.3",
+				"qs": "^6.10.0",
 				"regenerator-runtime": "^0.13.7",
 				"resolve-from": "^5.0.0"
 			},
@@ -13574,17 +13580,17 @@
 			}
 		},
 		"node_modules/@storybook/vue": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/vue/-/vue-6.5.8.tgz",
-			"integrity": "sha512-wrZSBcCXzW6yq4Q7/SDO6qItIqLfykOAyRglBP8Xi2HVOpW2OGXIm7nAyuT/HxIg85+nxBT2dAdwG5bl4ynrHw==",
-			"dependencies": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core": "6.5.8",
-				"@storybook/core-common": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/vue/-/vue-6.5.9.tgz",
+			"integrity": "sha512-/aaROupwLxDjZSkYHUnjvinHywcR0drJe8ROUfbSTFQOjd5boKTp3rfzwsv6WOpaDioIfI/LpCNOzS+F6+tGwA==",
+			"dependencies": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core": "6.5.9",
+				"@storybook/core-common": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/docs-tools": "6.5.8",
-				"@storybook/store": "6.5.8",
+				"@storybook/docs-tools": "6.5.9",
+				"@storybook/store": "6.5.9",
 				"@types/node": "^14.14.20 || ^16.0.0",
 				"@types/webpack-env": "^1.16.0",
 				"core-js": "^3.8.2",
@@ -13971,9 +13977,9 @@
 			}
 		},
 		"node_modules/@types/express-serve-static-core": {
-			"version": "4.17.28",
-			"resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
-			"integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
+			"version": "4.17.29",
+			"resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.29.tgz",
+			"integrity": "sha512-uMd++6dMKS32EOuw1Uli3e3BPgdLIXmezcfHv7N4c1s3gkhikBplORPpMq3fuWkxncZN1reb16d5n8yhQ80x7Q==",
 			"dependencies": {
 				"@types/node": "*",
 				"@types/qs": "*",
@@ -14341,9 +14347,9 @@
 			"integrity": "sha512-94+Ahf9IcaDuJTle/2b+wzvjmutxXAEXU6O81JHblYXUg2BDG+dnBy7VxIPHKAyEEDHzCMQydTJuWvrE+Aanzw=="
 		},
 		"node_modules/@types/node-fetch": {
-			"version": "2.6.1",
-			"resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.1.tgz",
-			"integrity": "sha512-oMqjURCaxoSIsHSr1E47QHzbmzNR5rK8McHuNb11BOM9cHcIK3Avy0s/b2JlXHoQGTYS3NsvWzV1M0iK7l0wbA==",
+			"version": "2.6.2",
+			"resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.2.tgz",
+			"integrity": "sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==",
 			"dependencies": {
 				"@types/node": "*",
 				"form-data": "^3.0.0"
@@ -14408,9 +14414,9 @@
 			}
 		},
 		"node_modules/@types/passport": {
-			"version": "1.0.8",
-			"resolved": "https://registry.npmjs.org/@types/passport/-/passport-1.0.8.tgz",
-			"integrity": "sha512-Gdcvis7+7G/Mobm+25AeFi+oe5teBhHzpbCOFWeN10Bj8tnoEE1L5lkraQjzmDEKkJQuM7xSJUGIFGl/giyRfQ==",
+			"version": "1.0.9",
+			"resolved": "https://registry.npmjs.org/@types/passport/-/passport-1.0.9.tgz",
+			"integrity": "sha512-9+ilzUhmZQR4JP49GdC2O4UdDE3POPLwpmaTC/iLkW7l0TZCXOo1zsTnnlXPq6rP1UsUZPfbAV4IUdiwiXyC7g==",
 			"dependencies": {
 				"@types/express": "*"
 			}
@@ -14490,9 +14496,9 @@
 			"integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
 		},
 		"node_modules/@types/react": {
-			"version": "18.0.12",
-			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.12.tgz",
-			"integrity": "sha512-duF1OTASSBQtcigUvhuiTB1Ya3OvSy+xORCiEf20H0P0lzx+/KeVsA99U5UjLXSbyo1DRJDlLKqTeM1ngosqtg==",
+			"version": "18.0.14",
+			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.14.tgz",
+			"integrity": "sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q==",
 			"dependencies": {
 				"@types/prop-types": "*",
 				"@types/scheduler": "*",
@@ -14686,9 +14692,9 @@
 			}
 		},
 		"node_modules/@types/testing-library__jest-dom": {
-			"version": "5.14.3",
-			"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz",
-			"integrity": "sha512-oKZe+Mf4ioWlMuzVBaXQ9WDnEm1+umLx0InILg+yvZVBBDmzV5KfZyLrCvadtWcx8+916jLmHafcmqqffl+iIw==",
+			"version": "5.14.4",
+			"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.4.tgz",
+			"integrity": "sha512-EUCs9PTBOEyfRtLKkKd31YrRCx/9Wxjy2Uqb6IH/KAOr7/vP0i8iClOyxQqjm/UxMGU5r5s2vOBM7vSPQVmabg==",
 			"dependencies": {
 				"@types/jest": "*"
 			}
@@ -14725,9 +14731,9 @@
 			}
 		},
 		"node_modules/@types/uglify-js": {
-			"version": "3.13.3",
-			"resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.3.tgz",
-			"integrity": "sha512-9dmBYXt/rKxedUXfCvXSxyiPvpDXLkiRlv17DnqdhS+pRustL1967rI1jZVt1xysTO+xJGMoZzcy3cWC9+b6Tw==",
+			"version": "3.16.0",
+			"resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.16.0.tgz",
+			"integrity": "sha512-0yeUr92L3r0GLRnBOvtYK1v2SjqMIqQDHMl7GLb+l2L8+6LSFWEEWEIgVsPdMn5ImLM8qzWT8xFPtQYpp8co0g==",
 			"dependencies": {
 				"source-map": "^0.6.1"
 			}
@@ -15021,14 +15027,14 @@
 			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
 		},
 		"node_modules/@typescript-eslint/utils": {
-			"version": "5.27.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.27.1.tgz",
-			"integrity": "sha512-mZ9WEn1ZLDaVrhRaYgzbkXBkTPghPFsup8zDbbsYTxC5OmqrFE7skkKS/sraVsLP3TcT3Ki5CSyEFBRkLH/H/w==",
+			"version": "5.28.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.28.0.tgz",
+			"integrity": "sha512-E60N5L0fjv7iPJV3UGc4EC+A3Lcj4jle9zzR0gW7vXhflO7/J29kwiTGITA2RlrmPokKiZbBy2DgaclCaEUs6g==",
 			"dependencies": {
 				"@types/json-schema": "^7.0.9",
-				"@typescript-eslint/scope-manager": "5.27.1",
-				"@typescript-eslint/types": "5.27.1",
-				"@typescript-eslint/typescript-estree": "5.27.1",
+				"@typescript-eslint/scope-manager": "5.28.0",
+				"@typescript-eslint/types": "5.28.0",
+				"@typescript-eslint/typescript-estree": "5.28.0",
 				"eslint-scope": "^5.1.1",
 				"eslint-utils": "^3.0.0"
 			},
@@ -15044,12 +15050,12 @@
 			}
 		},
 		"node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/scope-manager": {
-			"version": "5.27.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.27.1.tgz",
-			"integrity": "sha512-fQEOSa/QroWE6fAEg+bJxtRZJTH8NTskggybogHt4H9Da8zd4cJji76gA5SBlR0MgtwF7rebxTbDKB49YUCpAg==",
+			"version": "5.28.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.28.0.tgz",
+			"integrity": "sha512-LeBLTqF/he1Z+boRhSqnso6YrzcKMTQ8bO/YKEe+6+O/JGof9M0g3IJlIsqfrK/6K03MlFIlycbf1uQR1IjE+w==",
 			"dependencies": {
-				"@typescript-eslint/types": "5.27.1",
-				"@typescript-eslint/visitor-keys": "5.27.1"
+				"@typescript-eslint/types": "5.28.0",
+				"@typescript-eslint/visitor-keys": "5.28.0"
 			},
 			"engines": {
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -15060,9 +15066,9 @@
 			}
 		},
 		"node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/types": {
-			"version": "5.27.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.27.1.tgz",
-			"integrity": "sha512-LgogNVkBhCTZU/m8XgEYIWICD6m4dmEDbKXESCbqOXfKZxRKeqpiJXQIErv66sdopRKZPo5l32ymNqibYEH/xg==",
+			"version": "5.28.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.28.0.tgz",
+			"integrity": "sha512-2OOm8ZTOQxqkPbf+DAo8oc16sDlVR5owgJfKheBkxBKg1vAfw2JsSofH9+16VPlN9PWtv8Wzhklkqw3k/zCVxA==",
 			"engines": {
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			},
@@ -15072,12 +15078,12 @@
 			}
 		},
 		"node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/typescript-estree": {
-			"version": "5.27.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.27.1.tgz",
-			"integrity": "sha512-DnZvvq3TAJ5ke+hk0LklvxwYsnXpRdqUY5gaVS0D4raKtbznPz71UJGnPTHEFo0GDxqLOLdMkkmVZjSpET1hFw==",
+			"version": "5.28.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.28.0.tgz",
+			"integrity": "sha512-9GX+GfpV+F4hdTtYc6OV9ZkyYilGXPmQpm6AThInpBmKJEyRSIjORJd1G9+bknb7OTFYL+Vd4FBJAO6T78OVqA==",
 			"dependencies": {
-				"@typescript-eslint/types": "5.27.1",
-				"@typescript-eslint/visitor-keys": "5.27.1",
+				"@typescript-eslint/types": "5.28.0",
+				"@typescript-eslint/visitor-keys": "5.28.0",
 				"debug": "^4.3.4",
 				"globby": "^11.1.0",
 				"is-glob": "^4.0.3",
@@ -15098,11 +15104,11 @@
 			}
 		},
 		"node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/visitor-keys": {
-			"version": "5.27.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.27.1.tgz",
-			"integrity": "sha512-xYs6ffo01nhdJgPieyk7HAOpjhTsx7r/oB9LWEhwAXgwn33tkr+W8DI2ChboqhZlC4q3TC6geDYPoiX8ROqyOQ==",
+			"version": "5.28.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.28.0.tgz",
+			"integrity": "sha512-BtfP1vCor8cWacovzzPFOoeW4kBQxzmhxGoOpt0v1SFvG+nJ0cWaVdJk7cky1ArTcFHHKNIxyo2LLr3oNkSuXA==",
 			"dependencies": {
-				"@typescript-eslint/types": "5.27.1",
+				"@typescript-eslint/types": "5.28.0",
 				"eslint-visitor-keys": "^3.3.0"
 			},
 			"engines": {
@@ -15255,9 +15261,9 @@
 			}
 		},
 		"node_modules/@vue/babel-preset-app": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.5.17.tgz",
-			"integrity": "sha512-iFv9J3F5VKUPcbx+TqW5qhGmAVyXQxPRpKpPOuTLFIVTzg+iwJnrqVbL4kJU5ECGDxPESW2oCVgxv9bTlDPu7w==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.5.18.tgz",
+			"integrity": "sha512-P7ASKBNuz3IZxvO5VPsPGjRey4KRNMJ9Rav0nJ/v+m0ny6uUuwE03Xoli5G3mvdijUbtVZT7+/uULMCEg4bGew==",
 			"dependencies": {
 				"@babel/core": "^7.11.0",
 				"@babel/helper-compilation-targets": "^7.9.6",
@@ -15406,18 +15412,18 @@
 			}
 		},
 		"node_modules/@vue/cli-overlay": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-4.5.17.tgz",
-			"integrity": "sha512-QKKp66VbMg+X8Qh0wgXSwgxLfxY7EIkZkV6bZ6nFqBx8xtaJQVDbTL+4zcUPPA6nygbIcQ6gvTinNEqIqX6FUQ=="
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-4.5.18.tgz",
+			"integrity": "sha512-PZW6WRbmWx/I+PaP7PdjZGscvtUiIq/pRU38p3GLKMl53InBer12549CEAhPicAF5c38gBzGu/ifoPSvlPSZyg=="
 		},
 		"node_modules/@vue/cli-plugin-babel": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-babel/-/cli-plugin-babel-4.5.17.tgz",
-			"integrity": "sha512-6kZuc3PdoUvGAnndUq6+GqjIXn3bqdTR8lOcAb1BH2b4N7IKGlmzcipALGS23HLVMAvDgNuUS7vf0unin9j2cg==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-babel/-/cli-plugin-babel-4.5.18.tgz",
+			"integrity": "sha512-Juiu3EgV228pKcfWu6vrABrrXYoMtanf4PlG6P2drPHf1LgVmaUp1g/K7IxdCc63IY9E+eCWjZ2ZEnQvxMSWOQ==",
 			"dependencies": {
 				"@babel/core": "^7.11.0",
-				"@vue/babel-preset-app": "^4.5.17",
-				"@vue/cli-shared-utils": "^4.5.17",
+				"@vue/babel-preset-app": "^4.5.18",
+				"@vue/cli-shared-utils": "^4.5.18",
 				"babel-loader": "^8.1.0",
 				"cache-loader": "^4.1.0",
 				"thread-loader": "^2.1.3",
@@ -15428,11 +15434,11 @@
 			}
 		},
 		"node_modules/@vue/cli-plugin-eslint": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.5.17.tgz",
-			"integrity": "sha512-bVNDP+SuWcuJrBMc+JLaKvlxx25XKIlZBa+zzFnxhHZlwPZ7CeBD3e2wnsygJyPoKgDZcZwDgmEz1BZzMEjsNw==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.5.18.tgz",
+			"integrity": "sha512-UWacV26Ul+W61PwvMBv4Msh2h3Umr5FG0ApXFzLQTgyc/rCmXvhR53pW252zVZ2tf7s2n7xDFnp/mrCUrkb2tw==",
 			"dependencies": {
-				"@vue/cli-shared-utils": "^4.5.17",
+				"@vue/cli-shared-utils": "^4.5.18",
 				"eslint-loader": "^2.2.1",
 				"globby": "^9.2.0",
 				"inquirer": "^7.1.0",
@@ -15703,7 +15709,7 @@
 		"node_modules/@vue/cli-plugin-eslint/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -15713,23 +15719,23 @@
 			}
 		},
 		"node_modules/@vue/cli-plugin-router": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-4.5.17.tgz",
-			"integrity": "sha512-9r9CSwqv2+39XHQPDZJ0uaTtTP7oe0Gx17m7kBhHG3FA7R7AOSk2aVzhHZmDRhzlOxjx9kQSvrOSMfUG0kV4dQ==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-4.5.18.tgz",
+			"integrity": "sha512-J2SJpi7OKy6NE5yUz7eubTnzc+k2LHEcI+c0W8i4UoUumIVSkAgvKWZPFqoy/QIqnQpwW/75CUjpLGf6Fht2wQ==",
 			"dependencies": {
-				"@vue/cli-shared-utils": "^4.5.17"
+				"@vue/cli-shared-utils": "^4.5.18"
 			},
 			"peerDependencies": {
 				"@vue/cli-service": "^3.0.0 || ^4.0.0-0"
 			}
 		},
 		"node_modules/@vue/cli-plugin-typescript": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-typescript/-/cli-plugin-typescript-4.5.17.tgz",
-			"integrity": "sha512-7JeJ913td1xbNKcVO71clTEXWGq43/6FPLhph3kBEdUrMqANd1ENb4jFZ/Rl277YTFipV08WpzQ12d1ZtqwvEQ==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-typescript/-/cli-plugin-typescript-4.5.18.tgz",
+			"integrity": "sha512-6hbDtSmCCR0yDmXASeKpdXcrwELRRWw7yLzdXUioPBJ3hTFILuEx4gKbVoDF7NfoK0LG33A7XwosBx60QAS3zQ==",
 			"dependencies": {
 				"@types/webpack-env": "^1.15.2",
-				"@vue/cli-shared-utils": "^4.5.17",
+				"@vue/cli-shared-utils": "^4.5.18",
 				"cache-loader": "^4.1.0",
 				"fork-ts-checker-webpack-plugin": "^3.1.1",
 				"globby": "^9.2.0",
@@ -15745,11 +15751,16 @@
 			"peerDependencies": {
 				"@vue/cli-service": "^3.0.0 || ^4.0.0-0",
 				"@vue/compiler-sfc": "^3.0.0-beta.14",
-				"typescript": ">=2"
+				"typescript": ">=2",
+				"vue": "*",
+				"vue-template-compiler": "^2.0.0"
 			},
 			"peerDependenciesMeta": {
 				"@vue/compiler-sfc": {
 					"optional": true
+				},
+				"vue-template-compiler": {
+					"optional": true
 				}
 			}
 		},
@@ -16220,7 +16231,7 @@
 		"node_modules/@vue/cli-plugin-typescript/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -16296,14 +16307,14 @@
 			}
 		},
 		"node_modules/@vue/cli-plugin-unit-jest": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-unit-jest/-/cli-plugin-unit-jest-4.5.17.tgz",
-			"integrity": "sha512-Ta8hx68Y252umik1yD50dyyrwhzj4KzTEpngY9YKB6bY6pga9GK2olqyrb3+2X8o6tnSQkTFz+UcobfRQJDs5A==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-unit-jest/-/cli-plugin-unit-jest-4.5.18.tgz",
+			"integrity": "sha512-5B1k8b9pb/UJZ7askfgiRI7O2Q2XSgAYRSSGexEwQ5+shS5hXCRDivt2MzbH6VUKhYner8WxPdlzhuvnbc6lRw==",
 			"dependencies": {
 				"@babel/core": "^7.11.0",
 				"@babel/plugin-transform-modules-commonjs": "^7.9.6",
 				"@types/jest": "^24.0.19",
-				"@vue/cli-shared-utils": "^4.5.17",
+				"@vue/cli-shared-utils": "^4.5.18",
 				"babel-core": "^7.0.0-bridge.0",
 				"babel-jest": "^24.9.0",
 				"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
@@ -17904,7 +17915,7 @@
 		"node_modules/@vue/cli-plugin-unit-jest/node_modules/string-length": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
-			"integrity": "sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=",
+			"integrity": "sha512-Qka42GGrS8Mm3SZ+7cH8UXiIWI867/b/Z/feQSpQx/rbfB8UGknGEZVaUQMOUVj+soY6NpWAxily63HI1OckVQ==",
 			"dependencies": {
 				"astral-regex": "^1.0.0",
 				"strip-ansi": "^4.0.0"
@@ -17924,7 +17935,7 @@
 		"node_modules/@vue/cli-plugin-unit-jest/node_modules/string-length/node_modules/strip-ansi": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-			"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+			"integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
 			"dependencies": {
 				"ansi-regex": "^3.0.0"
 			},
@@ -17959,7 +17970,7 @@
 		"node_modules/@vue/cli-plugin-unit-jest/node_modules/strip-bom": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-			"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+			"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
 			"engines": {
 				"node": ">=4"
 			}
@@ -17992,12 +18003,12 @@
 		"node_modules/@vue/cli-plugin-unit-jest/node_modules/throat": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
-			"integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo="
+			"integrity": "sha512-wCVxLDcFxw7ujDxaeJC6nfl2XfHJNYs8yUYJnvMgtPEFlttP9tHSfRUv2vBe6C4hkVFPWoP1P6ZccbYjmSEkKA=="
 		},
 		"node_modules/@vue/cli-plugin-unit-jest/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -18021,7 +18032,7 @@
 		"node_modules/@vue/cli-plugin-unit-jest/node_modules/tr46": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
-			"integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
+			"integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
 			"dependencies": {
 				"punycode": "^2.1.0"
 			}
@@ -18063,7 +18074,7 @@
 		"node_modules/@vue/cli-plugin-unit-jest/node_modules/type-check": {
 			"version": "0.3.2",
 			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-			"integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+			"integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
 			"dependencies": {
 				"prelude-ls": "~1.1.2"
 			},
@@ -18189,17 +18200,17 @@
 			}
 		},
 		"node_modules/@vue/cli-plugin-vuex": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.17.tgz",
-			"integrity": "sha512-ck/ju2T2dmPKLWK/5QctNJs9SCb+eSZbbmr8neFkMc7GlbXw6qLWw5v3Vpd4KevdQA8QuQOA1pjUmzpCiU/mYQ==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.18.tgz",
+			"integrity": "sha512-8lnxtRJLa6Ki4FFYDtVA6Q4CRSjzWPXRkY7v8779nNq8eVLpGEyOtqDgu/VvNBs7EGKmveXZFNu8dUsfuTt7qA==",
 			"peerDependencies": {
 				"@vue/cli-service": "^3.0.0 || ^4.0.0-0"
 			}
 		},
 		"node_modules/@vue/cli-service": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-service/-/cli-service-4.5.17.tgz",
-			"integrity": "sha512-MqfkRYIcIUACe3nYlzNrYstJTWRXHlIqh6JCkbWbdnXWN+IfaVdlG8zw5Q0DVcSdGvkevUW7zB4UhtZB4uyAcA==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-service/-/cli-service-4.5.18.tgz",
+			"integrity": "sha512-ACRfiyzQNT+3Ko8NdkyvKMsAJ7IziQcM+QvRzfHo11v4YllcQBbRxYsmnffvjaZfNBefQvJ1qX9FI+ggIlxYQA==",
 			"dependencies": {
 				"@intervolga/optimize-cssnano-plugin": "^1.0.5",
 				"@soda/friendly-errors-webpack-plugin": "^1.7.1",
@@ -18207,10 +18218,10 @@
 				"@types/minimist": "^1.2.0",
 				"@types/webpack": "^4.0.0",
 				"@types/webpack-dev-server": "^3.11.0",
-				"@vue/cli-overlay": "^4.5.17",
-				"@vue/cli-plugin-router": "^4.5.17",
-				"@vue/cli-plugin-vuex": "^4.5.17",
-				"@vue/cli-shared-utils": "^4.5.17",
+				"@vue/cli-overlay": "^4.5.18",
+				"@vue/cli-plugin-router": "^4.5.18",
+				"@vue/cli-plugin-vuex": "^4.5.18",
+				"@vue/cli-shared-utils": "^4.5.18",
 				"@vue/component-compiler-utils": "^3.1.2",
 				"@vue/preload-webpack-plugin": "^1.1.0",
 				"@vue/web-component-wrapper": "^1.2.0",
@@ -18758,7 +18769,7 @@
 		"node_modules/@vue/cli-service/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -18770,7 +18781,7 @@
 		"node_modules/@vue/cli-service/node_modules/toposort": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",
-			"integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk="
+			"integrity": "sha512-FclLrw8b9bMWf4QlCJuHBEVhSRsqDj6u3nIjAzPeJvgl//1hBlffdlk0MALceL14+koWEdU4ofRAXofbODxQzg=="
 		},
 		"node_modules/@vue/cli-service/node_modules/url-loader": {
 			"version": "2.3.0",
@@ -18804,9 +18815,9 @@
 			}
 		},
 		"node_modules/@vue/cli-shared-utils": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.5.17.tgz",
-			"integrity": "sha512-VoFNdxvTW4vZu3ne+j1Mf7mU99J2SAoRVn9XPrsouTUUJablglM8DASk7Ixhsh6ymyL/W9EADQFR6Pgj8Ujjuw==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.5.18.tgz",
+			"integrity": "sha512-rYX8watG/+SFmkedXMZ3hJP+26/bz80f9zG9dMUfBMqTAqIDGICDtuP4H4QXZL3PCKI/HWFCMhRWf2wO4eGEPg==",
 			"dependencies": {
 				"@achrinza/node-ipc": "9.2.2",
 				"@hapi/joi": "^15.0.1",
@@ -19014,7 +19025,7 @@
 		"node_modules/@vue/component-compiler-utils/node_modules/yallist": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-			"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+			"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
 		},
 		"node_modules/@vue/eslint-config-prettier": {
 			"version": "6.0.0",
@@ -20229,7 +20240,7 @@
 		"node_modules/assert/node_modules/util": {
 			"version": "0.10.3",
 			"resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
-			"integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
+			"integrity": "sha512-5KiHfsmkqacuKjkRkdV7SsfDJ2EGiPsK92s2MhNSY0craxjTdKTtqKsJaCWp4LW33ZZ0OPUv1WO/TFvNQRiQxQ==",
 			"dependencies": {
 				"inherits": "2.0.1"
 			}
@@ -20419,9 +20430,9 @@
 			}
 		},
 		"node_modules/aws-sdk": {
-			"version": "2.1150.0",
-			"resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1150.0.tgz",
-			"integrity": "sha512-SNbVXNlFGNFVcztPk7iWnjtGL+Afm1nyidpvX2rEqYdap2Ow57njZJXvghQUici4Xhqe+BUuG+x1orlFjapo4g==",
+			"version": "2.1157.0",
+			"resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1157.0.tgz",
+			"integrity": "sha512-30t+zhCECib8uaggd0Du8ifab4vtJjgVvNKxHWTpiLa3deTnM+0K7x3pwM99zxw0gLDxAUet/oURaoPJHwk/5Q==",
 			"dependencies": {
 				"buffer": "4.9.2",
 				"events": "1.1.1",
@@ -20473,7 +20484,7 @@
 		"node_modules/aws-sdk/node_modules/url": {
 			"version": "0.10.3",
 			"resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
-			"integrity": "sha1-Ah5NnHcF8hu/N9A861h2dAJ3TGQ=",
+			"integrity": "sha512-hzSUW2q06EqL1gKM/a+obYHLIO6ct2hwPuviqTTOcfFVc61UbfJ2Q32+uGL/HCPxKqrdGB5QUwIe7UqlDgwsOQ==",
 			"dependencies": {
 				"punycode": "1.3.2",
 				"querystring": "0.2.0"
@@ -20499,7 +20510,7 @@
 		"node_modules/aws-sdk/node_modules/xmlbuilder": {
 			"version": "9.0.7",
 			"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
-			"integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=",
+			"integrity": "sha512-7YXTQc3P2l9+0rjaUbLwMKRhtmwg1M1eDf6nag7urC7pIPYLD9W/jmzQ4ptRSUbodw5S0jfoGTflLemQibSpeQ==",
 			"engines": {
 				"node": ">=4.0"
 			}
@@ -20591,7 +20602,7 @@
 		"node_modules/babel-code-frame/node_modules/strip-ansi": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-			"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+			"integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
 			"dependencies": {
 				"ansi-regex": "^2.0.0"
 			},
@@ -20602,7 +20613,7 @@
 		"node_modules/babel-code-frame/node_modules/supports-color": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-			"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+			"integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
 			"engines": {
 				"node": ">=0.8.0"
 			}
@@ -21323,7 +21334,7 @@
 		"node_modules/babel-jest/node_modules/strip-bom": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-			"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+			"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
 			"engines": {
 				"node": ">=4"
 			}
@@ -21356,7 +21367,7 @@
 		"node_modules/babel-jest/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -21739,7 +21750,7 @@
 		"node_modules/babel-types/node_modules/to-fast-properties": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
-			"integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=",
+			"integrity": "sha512-lxrWP8ejsq+7E3nNjwYmUBMAgjMTZoTI+sdBOpvNyijeDLa29LUn9QaoXAHv4+Z578hbmHHJKZknzxVtvo77og==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -23018,9 +23029,9 @@
 			}
 		},
 		"node_modules/caniuse-lite": {
-			"version": "1.0.30001350",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001350.tgz",
-			"integrity": "sha512-NZBql38Pzd+rAu5SPXv+qmTWGQuFsRiemHCJCAPvkoDxWV19/xqL2YHF32fDJ9SDLdLqfax8+S0CO3ncDCp9Iw==",
+			"version": "1.0.30001357",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001357.tgz",
+			"integrity": "sha512-b+KbWHdHePp+ZpNj+RDHFChZmuN+J5EvuQUlee9jOQIUAdhv9uvAZeEtUeLAknXbkiu1uxjQ9NLp1ie894CuWg==",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -23307,9 +23318,9 @@
 			}
 		},
 		"node_modules/ci-info": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.1.tgz",
-			"integrity": "sha512-SXgeMX9VwDe7iFFaEWkA5AstuER9YKqy4EhHqr4DVqkwmD9rpVimkMKWHdjn30Ja45txyjhSn63lVX69eVCckg=="
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.2.tgz",
+			"integrity": "sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg=="
 		},
 		"node_modules/cipher-base": {
 			"version": "1.0.4",
@@ -25772,7 +25783,7 @@
 		"node_modules/copy-webpack-plugin/node_modules/slash": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
-			"integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
+			"integrity": "sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -25850,9 +25861,9 @@
 			}
 		},
 		"node_modules/core-js": {
-			"version": "3.22.8",
-			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.8.tgz",
-			"integrity": "sha512-UoGQ/cfzGYIuiq6Z7vWL1HfkE9U9IZ4Ub+0XSiJTCzvbZzgPA69oDF2f+lgJ6dFFLEdjW5O6svvoKzXX23xFkA==",
+			"version": "3.23.1",
+			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.23.1.tgz",
+			"integrity": "sha512-wfMYHWi1WQjpgZNC9kAlN4ut04TM9fUTdi7CqIoTVM7yaiOUQTklOzfb+oWH3r9edQcT3F887swuVmxrV+CC8w==",
 			"hasInstallScript": true,
 			"funding": {
 				"type": "opencollective",
@@ -25860,11 +25871,11 @@
 			}
 		},
 		"node_modules/core-js-compat": {
-			"version": "3.22.8",
-			"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.22.8.tgz",
-			"integrity": "sha512-pQnwg4xtuvc2Bs/5zYQPaEYYSuTxsF7LBWF0SvnVhthZo/Qe+rJpcEekrdNK5DWwDJ0gv0oI9NNX5Mppdy0ctg==",
+			"version": "3.23.1",
+			"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.23.1.tgz",
+			"integrity": "sha512-KeYrEc8t6FJsKYB2qnDwRHWaC0cJNaqlHfCpMe5q3j/W1nje3moib/txNklddLPCtGb+etcBIyJ8zuMa/LN5/A==",
 			"dependencies": {
-				"browserslist": "^4.20.3",
+				"browserslist": "^4.20.4",
 				"semver": "7.0.0"
 			},
 			"funding": {
@@ -25881,9 +25892,9 @@
 			}
 		},
 		"node_modules/core-js-pure": {
-			"version": "3.22.8",
-			"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.22.8.tgz",
-			"integrity": "sha512-bOxbZIy9S5n4OVH63XaLVXZ49QKicjowDx/UELyJ68vxfCRpYsbyh/WNZNfEfAk+ekA8vSjt+gCDpvh672bc3w==",
+			"version": "3.23.1",
+			"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.23.1.tgz",
+			"integrity": "sha512-3qNgf6TqI3U1uhuSYRzJZGfFd4T+YlbyVPl+jgRiKjdZopvG4keZQwWZDAWpu1UH9nCgTpUzIV3GFawC7cJsqg==",
 			"hasInstallScript": true,
 			"funding": {
 				"type": "opencollective",
@@ -26233,7 +26244,7 @@
 		"node_modules/cpy/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -27261,7 +27272,7 @@
 		"node_modules/default-browser-id/node_modules/strip-bom": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-			"integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+			"integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
 			"optional": true,
 			"dependencies": {
 				"is-utf8": "^0.2.0"
@@ -27273,7 +27284,7 @@
 		"node_modules/default-browser-id/node_modules/strip-indent": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
-			"integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+			"integrity": "sha512-I5iQq6aFMM62fBEAIB/hXzwJD6EEZ0xEGCX2t7oXqaKPIRgt4WruAQ285BISgdkP+HLGWyeGmNJcpIwFeRYRUA==",
 			"optional": true,
 			"dependencies": {
 				"get-stdin": "^4.0.1"
@@ -27288,7 +27299,7 @@
 		"node_modules/default-browser-id/node_modules/trim-newlines": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-			"integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
+			"integrity": "sha512-Nm4cF79FhSTzrLKGDMi3I4utBtFv8qKy4sq1enftf2gMdpqI8oVQTAfySkTz5r49giVzDj88SVZXP4CeYQwjaw==",
 			"optional": true,
 			"engines": {
 				"node": ">=0.10.0"
@@ -27297,7 +27308,7 @@
 		"node_modules/default-browser-id/node_modules/untildify": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/untildify/-/untildify-2.1.0.tgz",
-			"integrity": "sha1-F+soB5h/dpUunASF/DEdBqgmouA=",
+			"integrity": "sha512-sJjbDp2GodvkB0FZZcn7k6afVisqX5BZD7Yq3xp4nN2O15BBK0cLm3Vwn2vQaF7UDS0UUsrQMkkplmDI5fskig==",
 			"optional": true,
 			"dependencies": {
 				"os-homedir": "^1.0.0"
@@ -28140,7 +28151,7 @@
 		"node_modules/editorconfig/node_modules/yallist": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-			"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+			"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
 		},
 		"node_modules/ee-first": {
 			"version": "1.1.1",
@@ -28162,9 +28173,9 @@
 			}
 		},
 		"node_modules/electron-to-chromium": {
-			"version": "1.4.148",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.148.tgz",
-			"integrity": "sha512-8MJk1bcQUAYkuvCyWZxaldiwoDG0E0AMzBGA6cv3WfuvJySiPgfidEPBFCRRH3cZm6SVZwo/oRlK1ehi1QNEIQ=="
+			"version": "1.4.161",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.161.tgz",
+			"integrity": "sha512-sTjBRhqh6wFodzZtc5Iu8/R95OkwaPNn7tj/TaDU5nu/5EFiQDtADGAXdR4tJcTEHlYfJpHqigzJqHvPgehP8A=="
 		},
 		"node_modules/element-ui": {
 			"version": "2.15.9",
@@ -28543,9 +28554,9 @@
 			}
 		},
 		"node_modules/esbuild": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.43.tgz",
-			"integrity": "sha512-Uf94+kQmy/5jsFwKWiQB4hfo/RkM9Dh7b79p8yqd1tshULdr25G2szLz631NoH3s2ujnKEKVD16RmOxvCNKRFA==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.46.tgz",
+			"integrity": "sha512-vdm5G1JdZBktva8dwQci/s44VbeBUg8g907xoZx77mqFZ4gU5GlMULNsdGeID+qXCXocsfYSGtE0LvqH3eiNQg==",
 			"hasInstallScript": true,
 			"bin": {
 				"esbuild": "bin/esbuild"
@@ -28554,32 +28565,32 @@
 				"node": ">=12"
 			},
 			"optionalDependencies": {
-				"esbuild-android-64": "0.14.43",
-				"esbuild-android-arm64": "0.14.43",
-				"esbuild-darwin-64": "0.14.43",
-				"esbuild-darwin-arm64": "0.14.43",
-				"esbuild-freebsd-64": "0.14.43",
-				"esbuild-freebsd-arm64": "0.14.43",
-				"esbuild-linux-32": "0.14.43",
-				"esbuild-linux-64": "0.14.43",
-				"esbuild-linux-arm": "0.14.43",
-				"esbuild-linux-arm64": "0.14.43",
-				"esbuild-linux-mips64le": "0.14.43",
-				"esbuild-linux-ppc64le": "0.14.43",
-				"esbuild-linux-riscv64": "0.14.43",
-				"esbuild-linux-s390x": "0.14.43",
-				"esbuild-netbsd-64": "0.14.43",
-				"esbuild-openbsd-64": "0.14.43",
-				"esbuild-sunos-64": "0.14.43",
-				"esbuild-windows-32": "0.14.43",
-				"esbuild-windows-64": "0.14.43",
-				"esbuild-windows-arm64": "0.14.43"
+				"esbuild-android-64": "0.14.46",
+				"esbuild-android-arm64": "0.14.46",
+				"esbuild-darwin-64": "0.14.46",
+				"esbuild-darwin-arm64": "0.14.46",
+				"esbuild-freebsd-64": "0.14.46",
+				"esbuild-freebsd-arm64": "0.14.46",
+				"esbuild-linux-32": "0.14.46",
+				"esbuild-linux-64": "0.14.46",
+				"esbuild-linux-arm": "0.14.46",
+				"esbuild-linux-arm64": "0.14.46",
+				"esbuild-linux-mips64le": "0.14.46",
+				"esbuild-linux-ppc64le": "0.14.46",
+				"esbuild-linux-riscv64": "0.14.46",
+				"esbuild-linux-s390x": "0.14.46",
+				"esbuild-netbsd-64": "0.14.46",
+				"esbuild-openbsd-64": "0.14.46",
+				"esbuild-sunos-64": "0.14.46",
+				"esbuild-windows-32": "0.14.46",
+				"esbuild-windows-64": "0.14.46",
+				"esbuild-windows-arm64": "0.14.46"
 			}
 		},
 		"node_modules/esbuild-android-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.43.tgz",
-			"integrity": "sha512-kqFXAS72K6cNrB6RiM7YJ5lNvmWRDSlpi7ZuRZ1hu1S3w0zlwcoCxWAyM23LQUyZSs1PbjHgdbbfYAN8IGh6xg==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.46.tgz",
+			"integrity": "sha512-ZyJqwAcjNbZprs0ZAxnUAOhEhdE5kTKwz+CZuLmZYNLAPyRgBtaC8pT2PCuPifNvV8Cl3yLlrQPaOCjovoyb5g==",
 			"cpu": [
 				"x64"
 			],
@@ -28592,9 +28603,9 @@
 			}
 		},
 		"node_modules/esbuild-android-arm64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.43.tgz",
-			"integrity": "sha512-bKS2BBFh+7XZY9rpjiHGRNA7LvWYbZWP87pLehggTG7tTaCDvj8qQGOU/OZSjCSKDYbgY7Q+oDw8RlYQ2Jt2BA==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.46.tgz",
+			"integrity": "sha512-BKcnUksvCijO9ONv6b4SikZE/OZftwJvX91XROODZGQmuwGVg97jmLDVu3lxuHdFlMNNzxh8taJ2mbCWZzH/Iw==",
 			"cpu": [
 				"arm64"
 			],
@@ -28607,9 +28618,9 @@
 			}
 		},
 		"node_modules/esbuild-darwin-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.43.tgz",
-			"integrity": "sha512-/3PSilx011ttoieRGkSZ0XV8zjBf2C9enV4ScMMbCT4dpx0mFhMOpFnCHkOK0pWGB8LklykFyHrWk2z6DENVUg==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.46.tgz",
+			"integrity": "sha512-/ss2kO92sUJ9/1nHnMb3+oab8w6dyqKrMtPMvSYJ9KZIYGAZxz/WYxfFprY7Xk+ZxWnnlASSyZlG+If1nVmFYg==",
 			"cpu": [
 				"x64"
 			],
@@ -28622,9 +28633,9 @@
 			}
 		},
 		"node_modules/esbuild-darwin-arm64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.43.tgz",
-			"integrity": "sha512-1HyFUKs8DMCBOvw1Qxpr5Vv/ThNcVIFb5xgXWK3pyT40WPvgYIiRTwJCvNs4l8i5qWF8/CK5bQxJVDjQvtv0Yw==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.46.tgz",
+			"integrity": "sha512-WX0JOaEFf6t+rIjXO6THsf/0fhQAt2Zb0/PSYlvXnuQQAmOmFAfPsuRNocp5ME0NGaUqZd4FxqqmLEVK3RzPAg==",
 			"cpu": [
 				"arm64"
 			],
@@ -28637,9 +28648,9 @@
 			}
 		},
 		"node_modules/esbuild-freebsd-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.43.tgz",
-			"integrity": "sha512-FNWc05TPHYgaXjbPZO5/rJKSBslfG6BeMSs8GhwnqAKP56eEhvmzwnIz1QcC9cRVyO+IKqWNfmHFkCa1WJTULA==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.46.tgz",
+			"integrity": "sha512-o+ozPFuHRCAGCVWU2bLurOUgVkT0jcPEu082VBUY2Q/yLf+B+/3nXzh4Fjp5O21tOvJRTn7hUVydG9j5+vYE6A==",
 			"cpu": [
 				"x64"
 			],
@@ -28652,9 +28663,9 @@
 			}
 		},
 		"node_modules/esbuild-freebsd-arm64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.43.tgz",
-			"integrity": "sha512-amrYopclz3VohqisOPR6hA3GOWA3LZC1WDLnp21RhNmoERmJ/vLnOpnrG2P/Zao+/erKTCUqmrCIPVtj58DRoA==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.46.tgz",
+			"integrity": "sha512-9zicZ0X43WDKz3sjNfcqYO38xbfJpSWYXB+FxvYYkmBwGA52K0SAu4oKuTTLi8od8X2IIo1x5C5TUNvKDSVJww==",
 			"cpu": [
 				"arm64"
 			],
@@ -28667,9 +28678,9 @@
 			}
 		},
 		"node_modules/esbuild-linux-32": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.43.tgz",
-			"integrity": "sha512-KoxoEra+9O3AKVvgDFvDkiuddCds6q71owSQEYwjtqRV7RwbPzKxJa6+uyzUulHcyGVq0g15K0oKG5CFBcvYDw==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.46.tgz",
+			"integrity": "sha512-ZnTpZMVb0VGvL99R5eh4OrJwbUyvpM6M88VAMuHP4LvFjuvZrhgefjKqEGuWZZW7JRnAjKqjXLjWdhdSjwMFnQ==",
 			"cpu": [
 				"ia32"
 			],
@@ -28682,9 +28693,9 @@
 			}
 		},
 		"node_modules/esbuild-linux-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.43.tgz",
-			"integrity": "sha512-EwINwGMyiJMgBby5/SbMqKcUhS5AYAZ2CpEBzSowsJPNBJEdhkCTtEjk757TN/wxgbu3QklqDM6KghY660QCUw==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.46.tgz",
+			"integrity": "sha512-ECCRRZtX6l4ubeVhHhiVoK/uYAkvzNqfmR4gP4N/9H9RPu+b8YCcN4bQGp7xCuYIV6Xd41WpOMyO+xpcQvjtQQ==",
 			"cpu": [
 				"x64"
 			],
@@ -28697,9 +28708,9 @@
 			}
 		},
 		"node_modules/esbuild-linux-arm": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.43.tgz",
-			"integrity": "sha512-e6YzQUoDxxtyamuF12eVzzRC7bbEFSZohJ6igQB9tBqnNmIQY3fI6Cns3z2wxtbZ3f2o6idkD2fQnlvs2902Dg==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.46.tgz",
+			"integrity": "sha512-RvTJEi4vj13c5FP9YPp+8Y6x6HK1E7uSqfy3y9UoeaNAzNZWA7fN1U3hQjTL/dy5zTJH5KE64mrt5k5+he+CQA==",
 			"cpu": [
 				"arm"
 			],
@@ -28712,9 +28723,9 @@
 			}
 		},
 		"node_modules/esbuild-linux-arm64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.43.tgz",
-			"integrity": "sha512-UlSpjMWllAc70zYbHxWuDS3FJytyuR/gHJYBr8BICcTNb/TSOYVBg6U7b3jZ3mILTrgzwJUHwhEwK18FZDouUQ==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.46.tgz",
+			"integrity": "sha512-HX0TXCHyI0NEWG4jg8LlW1PbZQbnz+PUH56yjx996cgM5pC90u32drKs/tyJiyyQmNk9OXOogjKw7LEdp/Qc1w==",
 			"cpu": [
 				"arm64"
 			],
@@ -28727,9 +28738,9 @@
 			}
 		},
 		"node_modules/esbuild-linux-mips64le": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.43.tgz",
-			"integrity": "sha512-f+v8cInPEL1/SDP//CfSYzcDNgE4CY3xgDV81DWm3KAPWzhvxARrKxB1Pstf5mB56yAslJDxu7ryBUPX207EZA==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.46.tgz",
+			"integrity": "sha512-jnb2NDwGqJUVmxn1v0f7seNdDm0nRNWHP9Z3MrWAGnBCdnnDlsjqRFDnbKoaQvWONEa+rOOr/giK+VL0hgQExA==",
 			"cpu": [
 				"mips64el"
 			],
@@ -28742,9 +28753,9 @@
 			}
 		},
 		"node_modules/esbuild-linux-ppc64le": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.43.tgz",
-			"integrity": "sha512-5wZYMDGAL/K2pqkdIsW+I4IR41kyfHr/QshJcNpUfK3RjB3VQcPWOaZmc+74rm4ZjVirYrtz+jWw0SgxtxRanA==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.46.tgz",
+			"integrity": "sha512-uu3JTQUrwwauKY9z8yq5MnDyOlT3f2DNOzBcYz4dB78HqwEqilCsifoBGd0WcbED5n57dc59X+LZMTZ8Ose44w==",
 			"cpu": [
 				"ppc64"
 			],
@@ -28757,9 +28768,9 @@
 			}
 		},
 		"node_modules/esbuild-linux-riscv64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.43.tgz",
-			"integrity": "sha512-lYcAOUxp85hC7lSjycJUVSmj4/9oEfSyXjb/ua9bNl8afonaduuqtw7hvKMoKuYnVwOCDw4RSfKpcnIRDWq+Bw==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.46.tgz",
+			"integrity": "sha512-OB29r1EG44ZY34JnXCRERxo7k4pRKoQdaoRg2HIeCavatsXZwW4LCakpLnMQ72vXT1HtpBUABEjHkKkn5JyrUg==",
 			"cpu": [
 				"riscv64"
 			],
@@ -28772,9 +28783,9 @@
 			}
 		},
 		"node_modules/esbuild-linux-s390x": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.43.tgz",
-			"integrity": "sha512-27e43ZhHvhFE4nM7HqtUbMRu37I/4eNSUbb8FGZWszV+uLzMIsHDwLoBiJmw7G9N+hrehNPeQ4F5Ujad0DrUKQ==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.46.tgz",
+			"integrity": "sha512-XQ/U9TueMSGYyPTKyZsJVraiuvxhwCDIMn/QwFXCRCJ6H/Cy/Rq33u9qhpeSziinHKfzJROGx5A8mQY6aYamdQ==",
 			"cpu": [
 				"s390x"
 			],
@@ -28787,9 +28798,9 @@
 			}
 		},
 		"node_modules/esbuild-netbsd-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.43.tgz",
-			"integrity": "sha512-2mH4QF6hHBn5zzAfxEI/2eBC0mspVsZ6UVo821LpAJKMvLJPBk3XJO5xwg7paDqSqpl7p6IRrAenW999AEfJhQ==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.46.tgz",
+			"integrity": "sha512-i15BwqHaAIFp1vBJkitAbHtwXcLk9TdHs/Ia1xGIAutQYXSJNPLM3Z4B4hyfHNEFl2yBqBIYpglMohv2ClNdOQ==",
 			"cpu": [
 				"x64"
 			],
@@ -28802,9 +28813,9 @@
 			}
 		},
 		"node_modules/esbuild-openbsd-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.43.tgz",
-			"integrity": "sha512-ZhQpiZjvqCqO8jKdGp9+8k9E/EHSA+zIWOg+grwZasI9RoblqJ1QiZqqi7jfd6ZrrG1UFBNGe4m0NFxCFbMVbg==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.46.tgz",
+			"integrity": "sha512-XwOIFCE140Y/PvjrwjFfa/QLWBuvhR1mPCOa35mKx02jt++wPNgf0qhn6HfdVC3vQe7R46RwTp4q2cp99fepEg==",
 			"cpu": [
 				"x64"
 			],
@@ -28817,9 +28828,9 @@
 			}
 		},
 		"node_modules/esbuild-sunos-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.43.tgz",
-			"integrity": "sha512-DgxSi9DaHReL9gYuul2rrQCAapgnCJkh3LSHPKsY26zytYppG0HgkgVF80zjIlvEsUbGBP/GHQzBtrezj/Zq1Q==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.46.tgz",
+			"integrity": "sha512-+kV3JnmfdxBVpHyFvuGXWtu6tXxXApOLPkSrVkMJf6+ns/3PLtPndpzwCzHjD+qYUEk8ln4MA+ufQ2qmjW5mZg==",
 			"cpu": [
 				"x64"
 			],
@@ -28832,9 +28843,9 @@
 			}
 		},
 		"node_modules/esbuild-windows-32": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.43.tgz",
-			"integrity": "sha512-Ih3+2O5oExiqm0mY6YYE5dR0o8+AspccQ3vIAtRodwFvhuyGLjb0Hbmzun/F3Lw19nuhPMu3sW2fqIJ5xBxByw==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.46.tgz",
+			"integrity": "sha512-gzGC1Q11B/Bo5A2EX4N22oigWmhL7Z0eDyc8kbSoJjqSrGQuRE7B0uMpluO+q0O/gZ1S3zdw+M4PCWlqOIeXLA==",
 			"cpu": [
 				"ia32"
 			],
@@ -28847,9 +28858,9 @@
 			}
 		},
 		"node_modules/esbuild-windows-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.43.tgz",
-			"integrity": "sha512-8NsuNfI8xwFuJbrCuI+aBqNTYkrWErejFO5aYM+yHqyHuL8mmepLS9EPzAzk8rvfaJrhN0+RvKWAcymViHOKEw==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.46.tgz",
+			"integrity": "sha512-Do2daaskfOjmCB7o3ygz6fD3K6SPjZLERiZLktzHz2oUCwsebKu/gmop0+j/XdrVIXC32wFzHzDS+9CTu9OShw==",
 			"cpu": [
 				"x64"
 			],
@@ -28862,9 +28873,9 @@
 			}
 		},
 		"node_modules/esbuild-windows-arm64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.43.tgz",
-			"integrity": "sha512-7ZlD7bo++kVRblJEoG+cepljkfP8bfuTPz5fIXzptwnPaFwGS6ahvfoYzY7WCf5v/1nX2X02HDraVItTgbHnKw==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.46.tgz",
+			"integrity": "sha512-VEzMy6bM60/HT/URTDElyhfi2Pk0quCCrEhRlI4MRno/AIqYUGw0rZwkPl6PeoqVI6BgoBHGY576GWTiPmshCA==",
 			"cpu": [
 				"arm64"
 			],
@@ -28968,7 +28979,7 @@
 		"node_modules/escodegen/node_modules/type-check": {
 			"version": "0.3.2",
 			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-			"integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+			"integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
 			"dependencies": {
 				"prelude-ls": "~1.1.2"
 			},
@@ -29192,9 +29203,9 @@
 			}
 		},
 		"node_modules/eslint-docgen/node_modules/eslint": {
-			"version": "8.17.0",
-			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.17.0.tgz",
-			"integrity": "sha512-gq0m0BTJfci60Fz4nczYxNAlED+sMcihltndR8t9t1evnU/azx53x3t2UHXC/uRjcbvRw/XctpaNygSTcQD+Iw==",
+			"version": "8.18.0",
+			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.18.0.tgz",
+			"integrity": "sha512-As1EfFMVk7Xc6/CvhssHUjsAQSkpfXvUGMFC3ce8JDe6WvqCgRrLOBQbVpsBFr1X1V+RACOadnzVvcUS5ni2bA==",
 			"dependencies": {
 				"@eslint/eslintrc": "^1.3.0",
 				"@humanwhocodes/config-array": "^0.9.2",
@@ -29573,9 +29584,9 @@
 			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
 		},
 		"node_modules/eslint-plugin-n8n-nodes-base": {
-			"version": "1.0.35",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-n8n-nodes-base/-/eslint-plugin-n8n-nodes-base-1.0.35.tgz",
-			"integrity": "sha512-E2tq2n27GuZRFjKr7BW0AR7qhmqPyE0+8HCfnN0ceIpOR5vZj3j+EgIJFPl+tK8SNznrMmpNF44l9HHTsoqVrA==",
+			"version": "1.0.43",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-n8n-nodes-base/-/eslint-plugin-n8n-nodes-base-1.0.43.tgz",
+			"integrity": "sha512-8r2CciEITucOR8dXr4FQLqRW8/6wSak+dDtE8NAzR1dNLTjxmIe1aBUAIhS0Hi3x+Mfj22z6wfqz+ZDULQtd9Q==",
 			"dependencies": {
 				"@typescript-eslint/utils": "^5.17.0",
 				"camel-case": "^4.1.2",
@@ -31082,7 +31093,7 @@
 		"node_modules/findup-sync/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -31132,9 +31143,9 @@
 			"integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg=="
 		},
 		"node_modules/flow-parser": {
-			"version": "0.179.0",
-			"resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.179.0.tgz",
-			"integrity": "sha512-M4dEgnvsGFa1lUTK05RFW+cwle8tkTHioFm6gGWdeGpDJjjhmvyaN8vLIqb8sAHI05TQxARsnUC3U2chzQP1Dw==",
+			"version": "0.180.0",
+			"resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.180.0.tgz",
+			"integrity": "sha512-kkzsuGAhckWgn/G+JfCyEa6BYslGrjlH4CJL0LZhdn9of9ukvi7SzVQSFsrEhuhh/zQUghfUEoaeZy1wjQXpUg==",
 			"engines": {
 				"node": ">=0.4.0"
 			}
@@ -33310,7 +33321,7 @@
 		"node_modules/glob-watcher/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -33504,7 +33515,7 @@
 		"node_modules/gm/node_modules/yallist": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-			"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+			"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
 		},
 		"node_modules/google-timezones-json": {
 			"version": "1.0.2",
@@ -33988,7 +33999,7 @@
 		"node_modules/gulp-cli/node_modules/string-width": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-			"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+			"integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==",
 			"dependencies": {
 				"code-point-at": "^1.0.0",
 				"is-fullwidth-code-point": "^1.0.0",
@@ -34001,7 +34012,7 @@
 		"node_modules/gulp-cli/node_modules/strip-ansi": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-			"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+			"integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
 			"dependencies": {
 				"ansi-regex": "^2.0.0"
 			},
@@ -34012,7 +34023,7 @@
 		"node_modules/gulp-cli/node_modules/strip-bom": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-			"integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+			"integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
 			"dependencies": {
 				"is-utf8": "^0.2.0"
 			},
@@ -34023,12 +34034,12 @@
 		"node_modules/gulp-cli/node_modules/which-module": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
-			"integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8="
+			"integrity": "sha512-F6+WgncZi/mJDrammbTuHe1q0R5hOXv/mBaiNA2TCNT/LTHusX0V+CJnj9XT8ki5ln2UZyyddDgHfCzyrOH7MQ=="
 		},
 		"node_modules/gulp-cli/node_modules/wrap-ansi": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
-			"integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+			"integrity": "sha512-vAaEaDM946gbNpH5pLVNR+vX2ht6n0Bt3GXwVB1AuAqZosOvHNF3P7wDnh8KLkSqgUh0uh77le7Owgoz+Z9XBw==",
 			"dependencies": {
 				"string-width": "^1.0.1",
 				"strip-ansi": "^3.0.1"
@@ -34206,7 +34217,7 @@
 		"node_modules/gulp-dart-sass/node_modules/strip-ansi": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-			"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+			"integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
 			"dependencies": {
 				"ansi-regex": "^3.0.0"
 			},
@@ -34888,7 +34899,7 @@
 		"node_modules/html-minifier/node_modules/upper-case": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
-			"integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg="
+			"integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA=="
 		},
 		"node_modules/html-tags": {
 			"version": "3.2.0",
@@ -36457,9 +36468,9 @@
 			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
 		},
 		"node_modules/iso-639-1": {
-			"version": "2.1.14",
-			"resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-2.1.14.tgz",
-			"integrity": "sha512-nekI+mmtSpYySPXIXJtWhv/s+06nAU9wQzq4QPu3YSEMmjnkOoippPY+MEdqDP0Pie8/LsOFEuPbUHslLanDag==",
+			"version": "2.1.15",
+			"resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-2.1.15.tgz",
+			"integrity": "sha512-7c7mBznZu2ktfvyT582E2msM+Udc1EjOyhVRE/0ZsjD9LBtWSm23h3PtiRh2a35XoUsTQQjJXaJzuLjXsOdFDg==",
 			"engines": {
 				"node": ">=6.0"
 			}
@@ -38292,7 +38303,7 @@
 		"node_modules/jest-environment-jsdom-fifteen/node_modules/strip-bom": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-			"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+			"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
 			"engines": {
 				"node": ">=4"
 			}
@@ -38325,7 +38336,7 @@
 		"node_modules/jest-environment-jsdom-fifteen/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -38350,7 +38361,7 @@
 		"node_modules/jest-environment-jsdom-fifteen/node_modules/tr46": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
-			"integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
+			"integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
 			"dependencies": {
 				"punycode": "^2.1.0"
 			}
@@ -38358,7 +38369,7 @@
 		"node_modules/jest-environment-jsdom-fifteen/node_modules/type-check": {
 			"version": "0.3.2",
 			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-			"integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+			"integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
 			"dependencies": {
 				"prelude-ls": "~1.1.2"
 			},
@@ -40496,7 +40507,7 @@
 		"node_modules/jest-watch-typeahead/node_modules/jest-watcher/node_modules/string-length": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
-			"integrity": "sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=",
+			"integrity": "sha512-Qka42GGrS8Mm3SZ+7cH8UXiIWI867/b/Z/feQSpQx/rbfB8UGknGEZVaUQMOUVj+soY6NpWAxily63HI1OckVQ==",
 			"dependencies": {
 				"astral-regex": "^1.0.0",
 				"strip-ansi": "^4.0.0"
@@ -40508,7 +40519,7 @@
 		"node_modules/jest-watch-typeahead/node_modules/jest-watcher/node_modules/strip-ansi": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-			"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+			"integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
 			"dependencies": {
 				"ansi-regex": "^3.0.0"
 			},
@@ -40595,7 +40606,7 @@
 		"node_modules/jest-watch-typeahead/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -40988,7 +40999,7 @@
 		"node_modules/jscodeshift/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -41172,7 +41183,7 @@
 		"node_modules/jshint/node_modules/strip-json-comments": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz",
-			"integrity": "sha1-HhX7ysl9Pumb8tc7TGVrCCu6+5E=",
+			"integrity": "sha512-AOPG8EBc5wAikaG1/7uFCNFJwnKOuQwFTpYBdTW6OvWHeZBQBrAA/amefHGrEiOnCPcLFZK6FUPtWVKpQVIRgg==",
 			"bin": {
 				"strip-json-comments": "cli.js"
 			},
@@ -41984,9 +41995,9 @@
 			}
 		},
 		"node_modules/lit": {
-			"version": "2.2.5",
-			"resolved": "https://registry.npmjs.org/lit/-/lit-2.2.5.tgz",
-			"integrity": "sha512-Ln463c0xJZfzVxBcHddNvFQQ8Z22NK7KgNmrzwFF1iESHUud412RRExzepj18wpTbusgwoTnOYuoTpo9uyNBaQ==",
+			"version": "2.2.6",
+			"resolved": "https://registry.npmjs.org/lit/-/lit-2.2.6.tgz",
+			"integrity": "sha512-K2vkeGABfSJSfkhqHy86ujchJs3NR9nW1bEEiV+bXDkbiQ60Tv5GUausYN2mXigZn8lC1qXuc46ArQRKYmumZw==",
 			"dependencies": {
 				"@lit/reactive-element": "^1.3.0",
 				"lit-element": "^3.2.0",
@@ -42003,9 +42014,9 @@
 			}
 		},
 		"node_modules/lit-html": {
-			"version": "2.2.5",
-			"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.5.tgz",
-			"integrity": "sha512-e56Y9V+RNA+SGYsWP2DGb/wad5Ccd3xUZYjmcmbeZcnc0wP4zFQRXeXn7W3bbfBekmHDK2dOnuYNYkg0bQjh/w==",
+			"version": "2.2.6",
+			"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.6.tgz",
+			"integrity": "sha512-xOKsPmq/RAKJ6dUeOxhmOYFjcjf0Q7aSdfBJgdJkOfCUnkmmJPxNrlZpRBeVe1Gg50oYWMlgm6ccAE/SpJgSdw==",
 			"dependencies": {
 				"@types/trusted-types": "^2.0.2"
 			}
@@ -42635,7 +42646,7 @@
 		"node_modules/lru-memoizer/node_modules/yallist": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-			"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+			"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
 		},
 		"node_modules/luxon": {
 			"version": "2.4.0",
@@ -42877,9 +42888,9 @@
 			}
 		},
 		"node_modules/mappersmith": {
-			"version": "2.38.1",
-			"resolved": "https://registry.npmjs.org/mappersmith/-/mappersmith-2.38.1.tgz",
-			"integrity": "sha512-ecZ+YyzBK7r3tC8MTaGo5tySHPhB6f9jdxN706Tux6dMlcE2fgwiBM/bf/+Sz5m2yKlTq5ntiahz7xSPgurD6w=="
+			"version": "2.39.1",
+			"resolved": "https://registry.npmjs.org/mappersmith/-/mappersmith-2.39.1.tgz",
+			"integrity": "sha512-f0QbIwG7CrwhIu7CZts2BsXyMhhZvmEeEtlHC+At23h4//mFVk0cRNZI+v21lzvvWAIBeE55AwEER7koi8iz/A=="
 		},
 		"node_modules/markdown-escapes": {
 			"version": "1.0.4",
@@ -43120,7 +43131,7 @@
 		"node_modules/matchdep/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -43225,11 +43236,11 @@
 			}
 		},
 		"node_modules/memfs": {
-			"version": "3.4.4",
-			"resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.4.tgz",
-			"integrity": "sha512-W4gHNUE++1oSJVn8Y68jPXi+mkx3fXR5ITE/Ubz6EQ3xRpCN5k2CQ4AUR8094Z7211F876TyoBACGsIveqgiGA==",
+			"version": "3.4.6",
+			"resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.6.tgz",
+			"integrity": "sha512-rH9mjopto6Wkr7RFuH9l9dk3qb2XGOcYKr7xMhaYqfzuJqOqhRrcFvfD7JMuPj6SLmPreh5+6eAuv36NFAU+Mw==",
 			"dependencies": {
-				"fs-monkey": "1.0.3"
+				"fs-monkey": "^1.0.3"
 			},
 			"engines": {
 				"node": ">= 4.0.0"
@@ -43579,9 +43590,9 @@
 			}
 		},
 		"node_modules/minipass-collect/node_modules/minipass": {
-			"version": "3.1.6",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-			"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+			"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 			"dependencies": {
 				"yallist": "^4.0.0"
 			},
@@ -43612,9 +43623,9 @@
 			}
 		},
 		"node_modules/minipass-fetch/node_modules/minipass": {
-			"version": "3.1.6",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-			"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+			"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 			"optional": true,
 			"dependencies": {
 				"yallist": "^4.0.0"
@@ -43654,9 +43665,9 @@
 			}
 		},
 		"node_modules/minipass-flush/node_modules/minipass": {
-			"version": "3.1.6",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-			"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+			"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 			"dependencies": {
 				"yallist": "^4.0.0"
 			},
@@ -43681,9 +43692,9 @@
 			}
 		},
 		"node_modules/minipass-pipeline/node_modules/minipass": {
-			"version": "3.1.6",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-			"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+			"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 			"dependencies": {
 				"yallist": "^4.0.0"
 			},
@@ -43709,9 +43720,9 @@
 			}
 		},
 		"node_modules/minipass-sized/node_modules/minipass": {
-			"version": "3.1.6",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-			"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+			"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 			"optional": true,
 			"dependencies": {
 				"yallist": "^4.0.0"
@@ -44231,7 +44242,7 @@
 		"node_modules/named-placeholders/node_modules/yallist": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-			"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+			"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
 		},
 		"node_modules/nan": {
 			"version": "2.16.0",
@@ -45092,7 +45103,7 @@
 		"node_modules/noms/node_modules/string_decoder": {
 			"version": "0.10.31",
 			"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-			"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+			"integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ=="
 		},
 		"node_modules/nopt": {
 			"version": "4.0.3",
@@ -48018,9 +48029,9 @@
 			}
 		},
 		"node_modules/prettier": {
-			"version": "2.6.2",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
-			"integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+			"integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
 			"bin": {
 				"prettier": "bin-prettier.js"
 			},
@@ -49210,7 +49221,7 @@
 		"node_modules/rc/node_modules/strip-json-comments": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-			"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+			"integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -49716,11 +49727,11 @@
 			}
 		},
 		"node_modules/registry-auth-token": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
-			"integrity": "sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==",
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.2.tgz",
+			"integrity": "sha512-PC5ZysNb42zpFME6D/XlIgtNGdTl8bBOCw90xQLVMpzuuubJKYDWFAEuUNc+Cn8Z8724tg2SDhDRrkVEsqfDMg==",
 			"dependencies": {
-				"rc": "^1.2.8"
+				"rc": "1.2.8"
 			},
 			"engines": {
 				"node": ">=6.0.0"
@@ -49896,7 +49907,7 @@
 		"node_modules/remark-mdx/node_modules/source-map": {
 			"version": "0.5.7",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-			"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+			"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -49931,7 +49942,7 @@
 		"node_modules/remark-parse/node_modules/trim": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
-			"integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0="
+			"integrity": "sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ=="
 		},
 		"node_modules/remark-slug": {
 			"version": "6.1.0",
@@ -50017,7 +50028,7 @@
 		"node_modules/renderkid/node_modules/strip-ansi": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-			"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+			"integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
 			"dependencies": {
 				"ansi-regex": "^2.0.0"
 			},
@@ -50520,9 +50531,9 @@
 			"integrity": "sha512-fJhQQI5tLrQvYIYFpOnFinzv9dwmR7hRnUz1XqP3OJ1jIweTNOd6aTO4jwQSgcBSFUB+/KHJxuGneime+FdzOw=="
 		},
 		"node_modules/rollup": {
-			"version": "2.75.6",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.6.tgz",
-			"integrity": "sha512-OEf0TgpC9vU6WGROJIk1JA3LR5vk/yvqlzxqdrE2CzzXnqKXNzbAwlWUXis8RS3ZPe7LAq+YUxsRa0l3r27MLA==",
+			"version": "2.75.7",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.7.tgz",
+			"integrity": "sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==",
 			"bin": {
 				"rollup": "dist/bin/rollup"
 			},
@@ -50837,7 +50848,7 @@
 		"node_modules/sane/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -50908,9 +50919,9 @@
 			}
 		},
 		"node_modules/sass": {
-			"version": "1.52.2",
-			"resolved": "https://registry.npmjs.org/sass/-/sass-1.52.2.tgz",
-			"integrity": "sha512-mfHB2VSeFS7sZlPv9YohB9GB7yWIgQNTGniQwfQ04EoQN0wsQEv7SwpCwy/x48Af+Z3vDeFXz+iuXM3HK/phZQ==",
+			"version": "1.52.3",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.52.3.tgz",
+			"integrity": "sha512-LNNPJ9lafx+j1ArtA7GyEJm9eawXN8KlA1+5dF6IZyoONg1Tyo/g+muOsENWJH/2Q1FHbbV4UwliU0cXMa/VIA==",
 			"dependencies": {
 				"chokidar": ">=3.0.0 <4.0.0",
 				"immutable": "^4.0.0",
@@ -51252,7 +51263,7 @@
 		"node_modules/serve-index/node_modules/statuses": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-			"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
+			"integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -51465,13 +51476,13 @@
 			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
 		},
 		"node_modules/simple-git": {
-			"version": "3.7.1",
-			"resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.7.1.tgz",
-			"integrity": "sha512-+Osjtsumbtew2y9to0pOYjNzSIr4NkKGBg7Po5SUtjQhaJf2QBmiTX/9E9cv9rmc7oUiSGFIB9e7ys5ibnT9+A==",
+			"version": "3.8.0",
+			"resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.8.0.tgz",
+			"integrity": "sha512-nbR1PufcbvCaW90CiAXC1mM7OnEqLzjSOnySnq7Sd2kcVG6GxSa+DhxhFmCgxLv4kWCKmZagkCZSjfNAQTZwaw==",
 			"dependencies": {
 				"@kwsites/file-exists": "^1.1.1",
 				"@kwsites/promise-deferred": "^1.1.1",
-				"debug": "^4.3.3"
+				"debug": "^4.3.4"
 			},
 			"funding": {
 				"type": "github",
@@ -51481,17 +51492,17 @@
 		"node_modules/simple-lru-cache": {
 			"version": "0.0.2",
 			"resolved": "https://registry.npmjs.org/simple-lru-cache/-/simple-lru-cache-0.0.2.tgz",
-			"integrity": "sha1-1ZzDoZPBpdAyD4Tucy9uRxPlEd0="
+			"integrity": "sha512-uEv/AFO0ADI7d99OHDmh1QfYzQk/izT1vCmu/riQfh7qjBVUUgRT87E5s5h7CxWCA/+YoZerykpEthzVrW3LIw=="
 		},
 		"node_modules/simple-mock": {
 			"version": "0.8.0",
 			"resolved": "https://registry.npmjs.org/simple-mock/-/simple-mock-0.8.0.tgz",
-			"integrity": "sha1-ScmiI/pu6o4sT9aUj+gwDNillPM="
+			"integrity": "sha512-rakKnocwPH9KPjOsmtMwJwKDmZIYyDeCz0bQYAdeB9h27SMpS5BS+0hDSzhAlvmzA3o7I9ck2NgqjcHpjIcwmA=="
 		},
 		"node_modules/simple-swizzle": {
 			"version": "0.2.2",
 			"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-			"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+			"integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
 			"dependencies": {
 				"is-arrayish": "^0.3.1"
 			}
@@ -51927,7 +51938,7 @@
 		"node_modules/sort-keys": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
-			"integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
+			"integrity": "sha512-vzn8aSqKgytVik0iwdBEi+zevbTYZogewTUM6dtpmGwEcdzbub/TX4bCzRhebDCRC3QzXgJsLRKB2V/Oof7HXg==",
 			"dependencies": {
 				"is-plain-obj": "^1.0.0"
 			},
@@ -52014,7 +52025,7 @@
 		"node_modules/sparse-bitfield": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
-			"integrity": "sha1-/0rm5oZWBWuks+eSqzM004JzyhE=",
+			"integrity": "sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==",
 			"optional": true,
 			"dependencies": {
 				"memory-pager": "^1.0.2"
@@ -52023,7 +52034,7 @@
 		"node_modules/spawn-command": {
 			"version": "0.0.2-1",
 			"resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
-			"integrity": "sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A="
+			"integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg=="
 		},
 		"node_modules/spdx-correct": {
 			"version": "3.1.1",
@@ -52378,9 +52389,9 @@
 			}
 		},
 		"node_modules/sqlite3/node_modules/minipass": {
-			"version": "3.1.6",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-			"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+			"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 			"dependencies": {
 				"yallist": "^4.0.0"
 			},
@@ -52609,9 +52620,9 @@
 			}
 		},
 		"node_modules/ssh2": {
-			"version": "1.10.0",
-			"resolved": "https://registry.npmjs.org/ssh2/-/ssh2-1.10.0.tgz",
-			"integrity": "sha512-OnKAAmf4j8wCRrXXZv3Tp5lCZkLJZtgZbn45ELiShCg27djDQ3XFGvIzuGsIsf4hdHslP+VdhA9BhUQdTdfd9w==",
+			"version": "1.11.0",
+			"resolved": "https://registry.npmjs.org/ssh2/-/ssh2-1.11.0.tgz",
+			"integrity": "sha512-nfg0wZWGSsfUe/IBJkXVll3PEZ//YH2guww+mP88gTpuSU4FtZN7zu9JoeTGOyCNx2dTDtT9fOpWwlzyj4uOOw==",
 			"hasInstallScript": true,
 			"dependencies": {
 				"asn1": "^0.2.4",
@@ -52622,7 +52633,7 @@
 			},
 			"optionalDependencies": {
 				"cpu-features": "~0.0.4",
-				"nan": "^2.15.0"
+				"nan": "^2.16.0"
 			}
 		},
 		"node_modules/ssh2-sftp-client": {
@@ -52726,9 +52737,9 @@
 			}
 		},
 		"node_modules/ssri/node_modules/minipass": {
-			"version": "3.1.6",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-			"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+			"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 			"dependencies": {
 				"yallist": "^4.0.0"
 			},
@@ -52749,7 +52760,7 @@
 		"node_modules/stack-trace": {
 			"version": "0.0.10",
 			"resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
-			"integrity": "sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=",
+			"integrity": "sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==",
 			"engines": {
 				"node": "*"
 			}
@@ -52891,7 +52902,7 @@
 		"node_modules/stealthy-require": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
-			"integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
+			"integrity": "sha512-ZnWpYnYugiOVEY5GkcuJK1io5V8QmNYChG62gSit9pQVGErXtrKuPC55ITaVSukmMta5qpMU7vqLt2Lnni4f/g==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -52902,9 +52913,9 @@
 			"integrity": "sha512-CMtO2Uneg3SAz/d6fZ/6qbqqQHi2ynq6/KzMD/26gTkiEShCcpqFfTHgOxsE0egAq6SX3FmN4CeSqn8BzXQkJg=="
 		},
 		"node_modules/storybook-addon-designs": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/storybook-addon-designs/-/storybook-addon-designs-6.2.1.tgz",
-			"integrity": "sha512-ihsscab8185HnxqTNZlM4TfrCPVsO7AimVA8BapuqT/sfZQF9m5H9C0plT3kbECdIMh2cmzMBF1Tc9ckWRgpWg==",
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/storybook-addon-designs/-/storybook-addon-designs-6.3.1.tgz",
+			"integrity": "sha512-QCHZp4KuUikOq52MPiMfU8QifYTfhHar5vWlbcfkFDz1YrgGMy+QAEt5Y3Vdnffl4GKSK1lAsLuvTuzqTBRvnw==",
 			"dependencies": {
 				"@figspec/react": "^1.0.0"
 			}
@@ -53050,7 +53061,7 @@
 		"node_modules/strict-uri-encode": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-			"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
+			"integrity": "sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -53494,7 +53505,7 @@
 		"node_modules/sver-compat": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/sver-compat/-/sver-compat-1.5.0.tgz",
-			"integrity": "sha1-PPh9/rTQe0o/FIJ7wYaz/QxkXNg=",
+			"integrity": "sha512-aFTHfmjwizMNlNE6dsGmoAM4lHjL0CyiobWaFiXWSlD7cIxshW422Nb8KbXCmR6z+0ZEPY+daXJrDyh/vuwTyg==",
 			"dependencies": {
 				"es6-iterator": "^2.0.1",
 				"es6-symbol": "^3.1.1"
@@ -53503,7 +53514,7 @@
 		"node_modules/svg-tags": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
-			"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q="
+			"integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA=="
 		},
 		"node_modules/svgo": {
 			"version": "1.3.2",
@@ -53752,7 +53763,7 @@
 		"node_modules/tapable": {
 			"version": "0.1.10",
 			"resolved": "https://registry.npmjs.org/tapable/-/tapable-0.1.10.tgz",
-			"integrity": "sha1-KcNXB8K3DlDQdIK10gLo7URtr9Q=",
+			"integrity": "sha512-jX8Et4hHg57mug1/079yitEKWGB3LCwoxByLsNim89LABq8NqgiX+6iYVOsq0vX8uJHkU+DZ5fnq95f800bEsQ==",
 			"engines": {
 				"node": ">=0.6"
 			}
@@ -54211,9 +54222,9 @@
 			}
 		},
 		"node_modules/terser-webpack-plugin/node_modules/minipass": {
-			"version": "3.1.6",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-			"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+			"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 			"dependencies": {
 				"yallist": "^4.0.0"
 			},
@@ -54342,9 +54353,9 @@
 			}
 		},
 		"node_modules/terser-webpack-plugin/node_modules/terser": {
-			"version": "5.14.0",
-			"resolved": "https://registry.npmjs.org/terser/-/terser-5.14.0.tgz",
-			"integrity": "sha512-JC6qfIEkPBd9j1SMO3Pfn+A6w2kQV54tv+ABQLgZr7dA3k/DL/OBoYSWxzVpZev3J+bUHXfr55L8Mox7AaNo6g==",
+			"version": "5.14.1",
+			"resolved": "https://registry.npmjs.org/terser/-/terser-5.14.1.tgz",
+			"integrity": "sha512-+ahUAE+iheqBTDxXhTisdA8hgvbEG1hHOQ9xmNjeUJSoi6DU/gMrKNcfZjHkyY6Alnuyc+ikYJaxxfHkT3+WuQ==",
 			"dependencies": {
 				"@jridgewell/source-map": "^0.3.2",
 				"acorn": "^8.5.0",
@@ -54403,7 +54414,7 @@
 		"node_modules/text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-			"integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
+			"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
 		},
 		"node_modules/thenify": {
 			"version": "3.3.1",
@@ -54545,7 +54556,7 @@
 		"node_modules/time-stamp": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz",
-			"integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=",
+			"integrity": "sha512-gLCeArryy2yNTRzTGKbZbloctj64jkZ57hj5zdraXue6aFgd6PmvVtEyiUU+hvU0v7q08oVv8r8ev0tRo6bvgw==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -54569,7 +54580,7 @@
 		"node_modules/timsort": {
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
-			"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
+			"integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A=="
 		},
 		"node_modules/tinycolor2": {
 			"version": "1.4.2",
@@ -54588,9 +54599,9 @@
 			}
 		},
 		"node_modules/tinyspy": {
-			"version": "0.3.2",
-			"resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-0.3.2.tgz",
-			"integrity": "sha512-2+40EP4D3sFYy42UkgkFFB+kiX2Tg3URG/lVvAZFfLxgGpnWl5qQJuBw1gaLttq8UOS+2p3C0WrhJnQigLTT2Q==",
+			"version": "0.3.3",
+			"resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-0.3.3.tgz",
+			"integrity": "sha512-gRiUR8fuhUf0W9lzojPf1N1euJYA30ISebSfgca8z76FOvXtVXqd5ojEIaKLWbDQhAaC3ibxZIjqbyi4ybjcTw==",
 			"engines": {
 				"node": ">=14.0.0"
 			}
@@ -54654,7 +54665,7 @@
 		"node_modules/to-absolute-glob": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",
-			"integrity": "sha1-GGX0PZ50sIItufFFt4z/fQ98hJs=",
+			"integrity": "sha512-rtwLUQEwT8ZeKQbyFJyomBRYXyE16U5VKuy0ftxLMK/PZb2fkOsg5r9kHdauuVDbsNdIBoC/HCthpidamQFXYA==",
 			"dependencies": {
 				"is-absolute": "^1.0.0",
 				"is-negated-glob": "^1.0.0"
@@ -54666,12 +54677,12 @@
 		"node_modules/to-arraybuffer": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
-			"integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M="
+			"integrity": "sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA=="
 		},
 		"node_modules/to-fast-properties": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-			"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+			"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
 			"engines": {
 				"node": ">=4"
 			}
@@ -54746,7 +54757,7 @@
 		"node_modules/to-through": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/to-through/-/to-through-2.0.0.tgz",
-			"integrity": "sha1-/JKtq6ByZHvAtn1rA2ZKoZUJOvY=",
+			"integrity": "sha512-+QIz37Ly7acM4EMdw2PRN389OneM5+d844tirkGp4dPKzI5OE72V9OsbFp+CIYJDahZ41ZV05hNtcPAQUAm9/Q==",
 			"dependencies": {
 				"through2": "^2.0.3"
 			},
@@ -54765,7 +54776,7 @@
 		"node_modules/token-stream": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/token-stream/-/token-stream-1.0.0.tgz",
-			"integrity": "sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ="
+			"integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg=="
 		},
 		"node_modules/token-types": {
 			"version": "2.1.1",
@@ -54791,7 +54802,7 @@
 		"node_modules/toposort": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
-			"integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+			"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
 		},
 		"node_modules/touch": {
 			"version": "3.1.0",
@@ -55254,7 +55265,7 @@
 		"node_modules/tsconfig-paths/node_modules/strip-bom": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-			"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+			"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
 			"engines": {
 				"node": ">=4"
 			}
@@ -55262,7 +55273,7 @@
 		"node_modules/tsconfig/node_modules/strip-bom": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-			"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+			"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
 			"engines": {
 				"node": ">=4"
 			}
@@ -55270,7 +55281,7 @@
 		"node_modules/tsconfig/node_modules/strip-json-comments": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-			"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+			"integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -55423,7 +55434,7 @@
 		"node_modules/tty-browserify": {
 			"version": "0.0.0",
 			"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
-			"integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
+			"integrity": "sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw=="
 		},
 		"node_modules/tunnel": {
 			"version": "0.0.6",
@@ -55687,7 +55698,7 @@
 		"node_modules/unc-path-regex": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
-			"integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=",
+			"integrity": "sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -55725,7 +55736,7 @@
 		"node_modules/undertaker-registry": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/undertaker-registry/-/undertaker-registry-1.0.1.tgz",
-			"integrity": "sha1-XkvaMI5KiirlhPm5pDWaSZglzFA=",
+			"integrity": "sha512-UR1khWeAjugW3548EfQmL9Z7pGMlBgXteQpr1IZeZBtnkCJQJIJ1Scj0mb9wQaPvUZ9Q17XqW6TIaPchJkyfqw==",
 			"engines": {
 				"node": ">= 0.10"
 			}
@@ -55899,12 +55910,12 @@
 		"node_modules/uniq": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
-			"integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
+			"integrity": "sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA=="
 		},
 		"node_modules/uniqs": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
-			"integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI="
+			"integrity": "sha512-mZdDpf3vBV5Efh29kMw5tXoup/buMgxLzOt/XKFKcVmi+15ManNQWr6HfZ2aiZTYlYixbdNJ0KFmIZIv52tHSQ=="
 		},
 		"node_modules/unique-filename": {
 			"version": "1.1.1",
@@ -56061,7 +56072,7 @@
 		"node_modules/unpipe": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-			"integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
+			"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
 			"engines": {
 				"node": ">= 0.8"
 			}
@@ -56069,7 +56080,7 @@
 		"node_modules/unquote": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
-			"integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ="
+			"integrity": "sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg=="
 		},
 		"node_modules/unset-value": {
 			"version": "1.0.0",
@@ -56260,7 +56271,7 @@
 		"node_modules/url": {
 			"version": "0.11.0",
 			"resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-			"integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
+			"integrity": "sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==",
 			"dependencies": {
 				"punycode": "1.3.2",
 				"querystring": "0.2.0"
@@ -56321,7 +56332,7 @@
 		"node_modules/url-parse-lax": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
-			"integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
+			"integrity": "sha512-NjFKA0DidqPa5ciFcSrXnAltTtzz84ogy+NebPvfEgAck0+TNg4UJ4IN+fB7zRZfbgUf0syOo9MDxFkDSMuFaQ==",
 			"dependencies": {
 				"prepend-http": "^2.0.0"
 			},
@@ -56353,7 +56364,7 @@
 		"node_modules/utf7": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/utf7/-/utf7-1.0.2.tgz",
-			"integrity": "sha1-lV9JCq5lO6IguUVqCod2wZk2CZE=",
+			"integrity": "sha512-qQrPtYLLLl12NF4DrM9CvfkxkYI97xOb5dsnGZHE3teFr0tWiEZ9UdgMPczv24vl708cYMpe6mGXGHrotIp3Bw==",
 			"dependencies": {
 				"semver": "~5.3.0"
 			}
@@ -56369,7 +56380,7 @@
 		"node_modules/utf8": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/utf8/-/utf8-2.1.2.tgz",
-			"integrity": "sha1-H6DZJw6b6FDZsFAn9jUZv0ZFfZY="
+			"integrity": "sha512-QXo+O/QkLP/x1nyi54uQiG0XrODxdysuQvE5dtVqv7F5K2Qb6FsN+qbr6KhF5wQ20tfcV3VQp0/2x1e1MRSPWg=="
 		},
 		"node_modules/util": {
 			"version": "0.11.1",
@@ -56416,12 +56427,12 @@
 		"node_modules/utila": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
-			"integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw="
+			"integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA=="
 		},
 		"node_modules/utils-merge": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-			"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
+			"integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
 			"engines": {
 				"node": ">= 0.4.0"
 			}
@@ -56429,7 +56440,7 @@
 		"node_modules/uuencode": {
 			"version": "0.0.4",
 			"resolved": "https://registry.npmjs.org/uuencode/-/uuencode-0.0.4.tgz",
-			"integrity": "sha1-yNUDcIhWY4eThas34zPH6OOwIYw="
+			"integrity": "sha512-yEEhCuCi5wRV7Z5ZVf9iV2gWMvUZqKJhAs1ecFdKJ0qzbyaVelmsE3QjYAamehfp9FKLiZbKldd+jklG3O0LfA=="
 		},
 		"node_modules/uuid": {
 			"version": "8.3.2",
@@ -56442,7 +56453,7 @@
 		"node_modules/uuid-browser": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/uuid-browser/-/uuid-browser-3.1.0.tgz",
-			"integrity": "sha1-DwWkCu90+eWVHiDvv0SxGHHlZBA="
+			"integrity": "sha512-dsNgbLaTrd6l3MMxTtouOCFw4CBFc/3a+GgYA2YyrJvyQ1u6q4pcu3ktLoUZ/VN/Aw9WsauazbgsgdfVWgAKQg=="
 		},
 		"node_modules/v-click-outside": {
 			"version": "3.2.0",
@@ -56518,7 +56529,7 @@
 		"node_modules/value-or-function": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/value-or-function/-/value-or-function-3.0.0.tgz",
-			"integrity": "sha1-HCQ6ULWVwb5Up1S/7OhWO5/42BM=",
+			"integrity": "sha512-jdBB2FrWvQC/pnPtIqcLsMaQgjhdb6B7tk1MMyTKapox+tQZbdRP4uLxu/JY0t7fbfDCUMnuelzEYv5GsxHhdg==",
 			"engines": {
 				"node": ">= 0.10"
 			}
@@ -56526,7 +56537,7 @@
 		"node_modules/vary": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-			"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
+			"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
 			"engines": {
 				"node": ">= 0.8"
 			}
@@ -56695,7 +56706,7 @@
 		"node_modules/vinyl-sourcemap": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/vinyl-sourcemap/-/vinyl-sourcemap-1.1.0.tgz",
-			"integrity": "sha1-kqgAWTo4cDqM2xHYswCtS+Y7PhY=",
+			"integrity": "sha512-NiibMgt6VJGJmyw7vtzhctDcfKch4e4n9TBeoWlirb7FMg9/1Ov9k+A5ZRAtywBpRPiyECvQRQllYM8dECegVA==",
 			"dependencies": {
 				"append-buffer": "^1.0.2",
 				"convert-source-map": "^1.5.0",
@@ -56723,7 +56734,7 @@
 		"node_modules/vinyl-sourcemaps-apply": {
 			"version": "0.2.1",
 			"resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz",
-			"integrity": "sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=",
+			"integrity": "sha512-+oDh3KYZBoZC8hfocrbrxbLUeaYtQK7J5WU5Br9VqWqmCll3tFJqKp97GC9GmMsVIL0qnx2DgEDVxdo5EZ5sSw==",
 			"dependencies": {
 				"source-map": "^0.5.1"
 			}
@@ -56731,7 +56742,7 @@
 		"node_modules/vinyl-sourcemaps-apply/node_modules/source-map": {
 			"version": "0.5.7",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-			"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+			"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -56977,7 +56988,7 @@
 		"node_modules/void-elements": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
-			"integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=",
+			"integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -57058,7 +57069,7 @@
 		"node_modules/vue-docgen-api/node_modules/yallist": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-			"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+			"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
 		},
 		"node_modules/vue-docgen-loader": {
 			"version": "1.5.1",
@@ -57272,7 +57283,7 @@
 		"node_modules/vue-jest/node_modules/source-map": {
 			"version": "0.5.7",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-			"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+			"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -57845,7 +57856,7 @@
 		"node_modules/watchpack-chokidar2/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"optional": true,
 			"dependencies": {
 				"is-number": "^3.0.0",
@@ -58735,7 +58746,7 @@
 		"node_modules/webpack-dev-server/node_modules/strip-ansi": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-			"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+			"integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
 			"dependencies": {
 				"ansi-regex": "^2.0.0"
 			},
@@ -58757,7 +58768,7 @@
 		"node_modules/webpack-dev-server/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -59250,7 +59261,7 @@
 		"node_modules/webpack/node_modules/to-regex-range": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dependencies": {
 				"is-number": "^3.0.0",
 				"repeat-string": "^1.6.1"
@@ -59719,9 +59730,9 @@
 			}
 		},
 		"node_modules/ws": {
-			"version": "8.7.0",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.7.0.tgz",
-			"integrity": "sha512-c2gsP0PRwcLFzUiA8Mkr37/MI7ilIlHQxaEAtd0uNMbVMoy8puJyafRlm0bV9MbGSabUPeLrRRaqIBcFcA2Pqg==",
+			"version": "8.8.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz",
+			"integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==",
 			"engines": {
 				"node": ">=10.0.0"
 			},
@@ -59741,7 +59752,7 @@
 		"node_modules/x-default-browser": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/x-default-browser/-/x-default-browser-0.4.0.tgz",
-			"integrity": "sha1-cM8NqF2nwKtcsPFaiX8jIqa91IE=",
+			"integrity": "sha512-7LKo7RtWfoFN/rHx1UELv/2zHGMx8MkZKDq1xENmOCTkfIqZJ0zZ26NEJX8czhnPXVcqS0ARjjfJB+eJ0/5Cvw==",
 			"bin": {
 				"x-default-browser": "bin/x-default-browser.js"
 			},
@@ -59821,7 +59832,7 @@
 		"node_modules/xregexp": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/xregexp/-/xregexp-2.0.0.tgz",
-			"integrity": "sha1-UqY+VsoLhKfzpfPWGHLxJq16WUM=",
+			"integrity": "sha512-xl/50/Cf32VsGq/1R8jJE5ajH1yMCQkpmoS10QbFZWl2Oor4H0Me64Pu2yxvsRWK3m6soJbmGfzSR7BYmDcWAA==",
 			"engines": {
 				"node": "*"
 			}
@@ -59937,7 +59948,7 @@
 		"node_modules/yargonaut/node_modules/strip-ansi": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-			"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+			"integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
 			"dependencies": {
 				"ansi-regex": "^2.0.0"
 			},
@@ -59948,7 +59959,7 @@
 		"node_modules/yargonaut/node_modules/supports-color": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-			"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+			"integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
 			"engines": {
 				"node": ">=0.8.0"
 			}
@@ -60168,7 +60179,7 @@
 		"node_modules/yorkie/node_modules/strip-indent": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz",
-			"integrity": "sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=",
+			"integrity": "sha512-RsSNPLpq6YUL7QYy44RnPVTn/lcVZtb48Uof3X5JLbF4zD/Gs7ZFDv2HWol+leoQN2mT86LAzSshGfkTlSOpsA==",
 			"engines": {
 				"node": ">=4"
 			}
@@ -60187,7 +60198,7 @@
 		"node_modules/yorkie/node_modules/yallist": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-			"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+			"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
 		},
 		"node_modules/yup": {
 			"version": "0.32.11",
@@ -60525,14 +60536,14 @@
 			}
 		},
 		"@babel/compat-data": {
-			"version": "7.17.10",
-			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.10.tgz",
-			"integrity": "sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw=="
+			"version": "7.18.5",
+			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.5.tgz",
+			"integrity": "sha512-BxhE40PVCBxVEJsSBhB6UWyAuqJRxGsAw8BdHMJ3AKGydcwuWW4kOO3HmqBQAdcq/OP+/DlTVxLvsCzRTnZuGg=="
 		},
 		"@babel/core": {
-			"version": "7.18.2",
-			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.2.tgz",
-			"integrity": "sha512-A8pri1YJiC5UnkdrWcmfZTJTV85b4UXTAfImGmCfYmax4TR9Cw8sDS0MOk++Gp2mE/BefVJ5nwy5yzqNJbP/DQ==",
+			"version": "7.18.5",
+			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.5.tgz",
+			"integrity": "sha512-MGY8vg3DxMnctw0LdvSEojOsumc70g0t18gNyUdAZqB1Rpd1Bqo/svHGvt+UJ6JcGX+DIekGFDxxIWofBxLCnQ==",
 			"requires": {
 				"@ampproject/remapping": "^2.1.0",
 				"@babel/code-frame": "^7.16.7",
@@ -60540,10 +60551,10 @@
 				"@babel/helper-compilation-targets": "^7.18.2",
 				"@babel/helper-module-transforms": "^7.18.0",
 				"@babel/helpers": "^7.18.2",
-				"@babel/parser": "^7.18.0",
+				"@babel/parser": "^7.18.5",
 				"@babel/template": "^7.16.7",
-				"@babel/traverse": "^7.18.2",
-				"@babel/types": "^7.18.2",
+				"@babel/traverse": "^7.18.5",
+				"@babel/types": "^7.18.4",
 				"convert-source-map": "^1.7.0",
 				"debug": "^4.1.0",
 				"gensync": "^1.0.0-beta.2",
@@ -60852,9 +60863,9 @@
 			}
 		},
 		"@babel/parser": {
-			"version": "7.18.4",
-			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.4.tgz",
-			"integrity": "sha512-FDge0dFazETFcxGw/EXzOkN8uJp0PC7Qbm+Pe9T+av2zlBpOgunFHkQPPn+eRuClU73JF+98D531UgayY89tow=="
+			"version": "7.18.5",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.5.tgz",
+			"integrity": "sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw=="
 		},
 		"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
 			"version": "7.17.12",
@@ -61371,9 +61382,9 @@
 			}
 		},
 		"@babel/plugin-transform-modules-systemjs": {
-			"version": "7.18.4",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.4.tgz",
-			"integrity": "sha512-lH2UaQaHVOAeYrUUuZ8i38o76J/FnO8vu21OE+tD1MyP9lxdZoSfz+pDbWkq46GogUrdrMz3tiz/FYGB+bVThg==",
+			"version": "7.18.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.5.tgz",
+			"integrity": "sha512-SEewrhPpcqMF1V7DhnEbhVJLrC+nnYfe1E0piZMZXBpxi9WvZqWGwpsk7JYP7wPWeqaBh4gyKlBhHJu3uz5g4Q==",
 			"requires": {
 				"@babel/helper-hoist-variables": "^7.16.7",
 				"@babel/helper-module-transforms": "^7.18.0",
@@ -61401,9 +61412,9 @@
 			}
 		},
 		"@babel/plugin-transform-new-target": {
-			"version": "7.17.12",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.17.12.tgz",
-			"integrity": "sha512-CaOtzk2fDYisbjAD4Sd1MTKGVIpRtx9bWLyj24Y/k6p4s4gQ3CqDGJauFJxt8M/LEx003d0i3klVqnN73qvK3w==",
+			"version": "7.18.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.5.tgz",
+			"integrity": "sha512-TuRL5uGW4KXU6OsRj+mLp9BM7pO8e7SGNTEokQRRxHFkXYMFiy2jlKSZPFtI/mKORDzciH+hneskcSOp0gU8hg==",
 			"requires": {
 				"@babel/helper-plugin-utils": "^7.17.12"
 			}
@@ -61488,9 +61499,9 @@
 			}
 		},
 		"@babel/plugin-transform-runtime": {
-			"version": "7.18.2",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.18.2.tgz",
-			"integrity": "sha512-mr1ufuRMfS52ttq+1G1PD8OJNqgcTFjq3hwn8SZ5n1x1pBhi0E36rYMdTK0TsKtApJ4lDEdfXJwtGobQMHSMPg==",
+			"version": "7.18.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.18.5.tgz",
+			"integrity": "sha512-Q17hHxXr2fplrE+5BSC1j1Fo5cOA8YeP8XW3/1paI8MzF/faZGh0MaH1KC4jLAvqLPamQWHB5/B7KqSLY1kuHA==",
 			"requires": {
 				"@babel/helper-module-imports": "^7.16.7",
 				"@babel/helper-plugin-utils": "^7.17.12",
@@ -61735,9 +61746,9 @@
 			}
 		},
 		"@babel/traverse": {
-			"version": "7.18.2",
-			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.2.tgz",
-			"integrity": "sha512-9eNwoeovJ6KH9zcCNnENY7DMFwTU9JdGCFtqNLfUAqtUHRCOsTOqWoffosP8vKmNYeSBUv3yVJXjfd8ucwOjUA==",
+			"version": "7.18.5",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.5.tgz",
+			"integrity": "sha512-aKXj1KT66sBj0vVzk6rEeAO6Z9aiiQ68wfDgge3nHhA/my6xMM/7HGQUNumKZaoa2qUPQ5whJG9aAifsxUKfLA==",
 			"requires": {
 				"@babel/code-frame": "^7.16.7",
 				"@babel/generator": "^7.18.2",
@@ -61745,8 +61756,8 @@
 				"@babel/helper-function-name": "^7.17.9",
 				"@babel/helper-hoist-variables": "^7.16.7",
 				"@babel/helper-split-export-declaration": "^7.16.7",
-				"@babel/parser": "^7.18.0",
-				"@babel/types": "^7.18.2",
+				"@babel/parser": "^7.18.5",
+				"@babel/types": "^7.18.4",
 				"debug": "^4.1.0",
 				"globals": "^11.1.0"
 			}
@@ -62054,9 +62065,9 @@
 			}
 		},
 		"@fortawesome/vue-fontawesome": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.6.tgz",
-			"integrity": "sha512-V3vT3flY15AKbUS31aZOP12awQI3aAzkr2B1KnqcHLmwrmy51DW3pwyBczKdypV8QxBZ8U68Hl2XxK2nudTxpg=="
+			"version": "2.0.8",
+			"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.8.tgz",
+			"integrity": "sha512-SRmP0q9Ox4zq8ydDR/hrH+23TVU1bdwYVnugLVaAIwklOHbf56gx6JUGlwES7zjuNYqzKgl8e39iYf6ph8qSQw=="
 		},
 		"@gar/promisify": {
 			"version": "1.1.3",
@@ -68975,9 +68986,9 @@
 			}
 		},
 		"@lit-labs/react": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.4.tgz",
-			"integrity": "sha512-Sy4RCxTZpTE2TwByjVac6gC7jzr8bCQC6s9bJhhJDKos4ZlN2cqcuVz63n0mpSSr1zxFh+Z0o0VR223l36Y4Ag=="
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.5.tgz",
+			"integrity": "sha512-GSbzzsIalrBOC11pC+KwQwvgvmVZpXfKo7k3BoGSqLf3jXD3GI2xIvIxTaMGp3OLDqG5F43jOMCPdsh0Nq97dg=="
 		},
 		"@lit/reactive-element": {
 			"version": "1.3.2",
@@ -69037,9 +69048,9 @@
 					}
 				},
 				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+					"version": "3.3.3",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+					"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 					"requires": {
 						"yallist": "^4.0.0"
 					}
@@ -69159,7 +69170,7 @@
 				"source-map": {
 					"version": "0.5.7",
 					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-					"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+					"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
 				}
 			}
 		},
@@ -69799,17 +69810,17 @@
 			"integrity": "sha512-/5O7Fq6Vnv8L6ucmPjaWbVG1XkP4FO+w5glqfkIsq3Xw4oyNAdJddbnYodNDAfjVUvo/rrSCTom4kAND7T1o5Q=="
 		},
 		"@storybook/addon-actions": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.5.8.tgz",
-			"integrity": "sha512-9ciR1iWBTzQNBDlq0iQs9+TV7gng+FbQxW5mHNxNvT9SxY1dt02wCPHZeVE/5la61wBXZs/zpEepZA93VzVBDw==",
-			"requires": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.5.9.tgz",
+			"integrity": "sha512-wDYm3M1bN+zcYZV3Q24M03b/P8DDpvj1oSoY6VLlxDAi56h8qZB/voeIS2I6vWXOB79C5tbwljYNQO0GsufS0g==",
+			"requires": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/theming": "6.5.8",
+				"@storybook/theming": "6.5.9",
 				"core-js": "^3.8.2",
 				"fast-deep-equal": "^3.1.3",
 				"global": "^4.4.0",
@@ -69825,17 +69836,17 @@
 			}
 		},
 		"@storybook/addon-backgrounds": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.5.8.tgz",
-			"integrity": "sha512-pvlP5ZVVfd2sWzgCqG/f6RJX/h9648znYbzaLQ4Z6whQIFobP3H3/cj9k/RTy3uXg5vC0IWDHSEaCXgin2sW1Q==",
-			"requires": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.5.9.tgz",
+			"integrity": "sha512-9k+GiY5aiANLOct34ar29jqgdi5ZpCqpZ86zPH0GsEC6ifH6nzP4trLU0vFUe260XDCvB4g8YaI7JZKPhozERg==",
+			"requires": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/theming": "6.5.8",
+				"@storybook/theming": "6.5.9",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
 				"memoizerific": "^1.11.3",
@@ -69845,47 +69856,47 @@
 			}
 		},
 		"@storybook/addon-controls": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.5.8.tgz",
-			"integrity": "sha512-fB6p5DgVHUnJKUzOlT2mtvaSCincnO+vuYLyf++f+l4BlYK1Es9HNl/puaRoMgdW+LoGJjXPTIMcMByeHVIt6Q==",
-			"requires": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-common": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.5.9.tgz",
+			"integrity": "sha512-VvjkgK32bGURKyWU2No6Q2B0RQZjLZk8D3neVNCnrWxwrl1G82StegxjRPn/UZm9+MZVPvTvI46nj1VdgOktnw==",
+			"requires": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-common": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/node-logger": "6.5.8",
-				"@storybook/store": "6.5.8",
-				"@storybook/theming": "6.5.8",
+				"@storybook/node-logger": "6.5.9",
+				"@storybook/store": "6.5.9",
+				"@storybook/theming": "6.5.9",
 				"core-js": "^3.8.2",
 				"lodash": "^4.17.21",
 				"ts-dedent": "^2.0.0"
 			}
 		},
 		"@storybook/addon-docs": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.5.8.tgz",
-			"integrity": "sha512-pAvWwh5YCrsW9nHCrd5BpFigvqn92JisX0aEnwAqKC9B1AW1LxhdPn1o9CQCeszQGaq163RA6AzkCejvAqhtUQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.5.9.tgz",
+			"integrity": "sha512-9lwOZyiOJFUgGd9ADVfcgpels5o0XOXqGMeVLuzT1160nopbZjNjo/3+YLJ0pyHRPpMJ4rmq2+vxRQR6PVRgPg==",
 			"requires": {
 				"@babel/plugin-transform-react-jsx": "^7.12.12",
 				"@babel/preset-env": "^7.12.11",
 				"@jest/transform": "^26.6.2",
 				"@mdx-js/react": "^1.6.22",
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-common": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-common": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/docs-tools": "6.5.8",
+				"@storybook/docs-tools": "6.5.9",
 				"@storybook/mdx1-csf": "^0.0.1",
-				"@storybook/node-logger": "6.5.8",
-				"@storybook/postinstall": "6.5.8",
-				"@storybook/preview-web": "6.5.8",
-				"@storybook/source-loader": "6.5.8",
-				"@storybook/store": "6.5.8",
-				"@storybook/theming": "6.5.8",
+				"@storybook/node-logger": "6.5.9",
+				"@storybook/postinstall": "6.5.9",
+				"@storybook/preview-web": "6.5.9",
+				"@storybook/source-loader": "6.5.9",
+				"@storybook/store": "6.5.9",
+				"@storybook/theming": "6.5.9",
 				"babel-loader": "^8.0.0",
 				"core-js": "^3.8.2",
 				"fast-deep-equal": "^3.1.3",
@@ -69899,37 +69910,37 @@
 			}
 		},
 		"@storybook/addon-essentials": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.5.8.tgz",
-			"integrity": "sha512-K/Aw/GLugCz5/S3c2tz5lnfC8aN6dSoQQDr8xaMDcBlT9h/xZ1l4jQQnx/mvY/qEvXtexBF41DE6ROWGKSZeSg==",
-			"requires": {
-				"@storybook/addon-actions": "6.5.8",
-				"@storybook/addon-backgrounds": "6.5.8",
-				"@storybook/addon-controls": "6.5.8",
-				"@storybook/addon-docs": "6.5.8",
-				"@storybook/addon-measure": "6.5.8",
-				"@storybook/addon-outline": "6.5.8",
-				"@storybook/addon-toolbars": "6.5.8",
-				"@storybook/addon-viewport": "6.5.8",
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/core-common": "6.5.8",
-				"@storybook/node-logger": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.5.9.tgz",
+			"integrity": "sha512-V9ThjKQsde4A2Es20pLFBsn0MWx2KCJuoTcTsANP4JDcbvEmj8UjbDWbs8jAU+yzJT5r+CI6NoWmQudv12ZOgw==",
+			"requires": {
+				"@storybook/addon-actions": "6.5.9",
+				"@storybook/addon-backgrounds": "6.5.9",
+				"@storybook/addon-controls": "6.5.9",
+				"@storybook/addon-docs": "6.5.9",
+				"@storybook/addon-measure": "6.5.9",
+				"@storybook/addon-outline": "6.5.9",
+				"@storybook/addon-toolbars": "6.5.9",
+				"@storybook/addon-viewport": "6.5.9",
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/core-common": "6.5.9",
+				"@storybook/node-logger": "6.5.9",
 				"core-js": "^3.8.2",
 				"regenerator-runtime": "^0.13.7",
 				"ts-dedent": "^2.0.0"
 			}
 		},
 		"@storybook/addon-links": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.5.8.tgz",
-			"integrity": "sha512-UxzEPnT1PLPsuy3tt+o3UJTbI4Kihec+/yzpzzGKreUnCC8EWTsOhtMQAVVit2t4BMl4vNrxKO0mKSc8saT3Gw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.5.9.tgz",
+			"integrity": "sha512-4BYC7pkxL3NLRnEgTA9jpIkObQKril+XFj1WtmY/lngF90vvK0Kc/TtvTA2/5tSgrHfxEuPevIdxMIyLJ4ejWQ==",
 			"requires": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+				"@storybook/addons": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/router": "6.5.8",
+				"@storybook/router": "6.5.9",
 				"@types/qs": "^6.9.5",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
@@ -69940,30 +69951,30 @@
 			}
 		},
 		"@storybook/addon-measure": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-6.5.8.tgz",
-			"integrity": "sha512-zpNAt1XwBLnQ3OjCfj63J7vC2WCTyAjvbGVAsUkpQb21vr/e3sPFQZPKGwio85SYjIX7AJ+Oi28mbEwWzS8wFA==",
-			"requires": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-6.5.9.tgz",
+			"integrity": "sha512-0aA22wD0CIEUccsEbWkckCOXOwr4VffofMH1ToVCOeqBoyLOMB0gxFubESeprqM54CWsYh2DN1uujgD6508cwA==",
+			"requires": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0"
 			}
 		},
 		"@storybook/addon-outline": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-6.5.8.tgz",
-			"integrity": "sha512-/bEjYTVJNM5QEiguS5nVQlerl5NhgOod1zLExnkchc8+FTJC58Vy7CRfzr2iaIMuf1QRPqBwSIy6ZqLJOdUfnQ==",
-			"requires": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-6.5.9.tgz",
+			"integrity": "sha512-oJ1DK3BDJr6aTlZc9axfOxV1oDkZO7hOohgUQDaKO1RZrSpyQsx2ViK2X6p/W7JhFJHKh7rv+nGCaVlLz3YIZA==",
+			"requires": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
@@ -69972,30 +69983,30 @@
 			}
 		},
 		"@storybook/addon-toolbars": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.5.8.tgz",
-			"integrity": "sha512-16eRbbtn4/cH1xU8JlPZRdShwUwSsPcqpyH1JNl+rgYQ6SaSNq3aO/jDFeQe93guSD0YPRWHz8dKtn6OxVeozQ==",
-			"requires": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/theming": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.5.9.tgz",
+			"integrity": "sha512-6JFQNHYVZUwp17p5rppc+iQJ2QOIWPTF+ni1GMMThjc84mzXs2+899Sf1aPFTvrFJTklmT+bPX6x4aUTouVa1w==",
+			"requires": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/theming": "6.5.9",
 				"core-js": "^3.8.2",
 				"regenerator-runtime": "^0.13.7"
 			}
 		},
 		"@storybook/addon-viewport": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.5.8.tgz",
-			"integrity": "sha512-MTpZWkBWNPH55iNHK4tBNKTdew5xKfoNvOj0pZn1rYDHlylMTlq7aoccwRjjK2jZeHHNnb1rm6ZkQDjmYu0Tcw==",
-			"requires": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-events": "6.5.8",
-				"@storybook/theming": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.5.9.tgz",
+			"integrity": "sha512-thKS+iw6M7ueDQQ7M66STZ5rgtJKliAcIX6UCopo0Ffh4RaRYmX6MCjqtvBKk8joyXUvm9SpWQemJD9uBQrjgw==",
+			"requires": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-events": "6.5.9",
+				"@storybook/theming": "6.5.9",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
 				"memoizerific": "^1.11.3",
@@ -70004,17 +70015,17 @@
 			}
 		},
 		"@storybook/addons": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.8.tgz",
-			"integrity": "sha512-L3LmbsYP9tDHHvpr/yv8YuEkzym7SXp/jZ0km31tpG3EuZmgGu7MXPrZ2ymEw4PkAhQzztgRr23VTfKobGUojA==",
-			"requires": {
-				"@storybook/api": "6.5.8",
-				"@storybook/channels": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.9.tgz",
+			"integrity": "sha512-adwdiXg+mntfPocLc1KXjZXyLgGk7Aac699Fwe+OUYPEC5tW347Rm/kFatcE556d42o5czcRiq3ZSIGWnm9ieQ==",
+			"requires": {
+				"@storybook/api": "6.5.9",
+				"@storybook/channels": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/router": "6.5.8",
-				"@storybook/theming": "6.5.8",
+				"@storybook/router": "6.5.9",
+				"@storybook/theming": "6.5.9",
 				"@types/webpack-env": "^1.16.0",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
@@ -70022,17 +70033,17 @@
 			}
 		},
 		"@storybook/api": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.8.tgz",
-			"integrity": "sha512-/MueV+wLCvy9gFA3ih4g7QYjDmn14i+D2ydonfaEC7R+agFGXxXwJGPKkz3yBNrRpNkBwcbY9mAmv8lE2AqgqQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.9.tgz",
+			"integrity": "sha512-9ylztnty4Y+ALU/ehW3BML9czjCAFsWvrwuCi6UgcwNjswwjSX3VRLhfD1KT3pl16ho//95LgZ0LnSwROCcPOA==",
 			"requires": {
-				"@storybook/channels": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+				"@storybook/channels": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/router": "6.5.8",
+				"@storybook/router": "6.5.9",
 				"@storybook/semver": "^7.3.2",
-				"@storybook/theming": "6.5.8",
+				"@storybook/theming": "6.5.9",
 				"core-js": "^3.8.2",
 				"fast-deep-equal": "^3.1.3",
 				"global": "^4.4.0",
@@ -70046,27 +70057,27 @@
 			}
 		},
 		"@storybook/builder-webpack4": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/builder-webpack4/-/builder-webpack4-6.5.8.tgz",
-			"integrity": "sha512-4/CVp/AlOxCeWZ/DF1TVS/TuzHao4l9KCq7DhL+utFEVl9c/dpgoZXc0Gy2FfHa2RXHKckrH/VUfV2KQk4TNSw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/builder-webpack4/-/builder-webpack4-6.5.9.tgz",
+			"integrity": "sha512-YOeA4++9uRZ8Hog1wC60yjaxBOiI1FRQNtax7b9E7g+kP8UlSCPCGcv4gls9hFmzbzTOPfQTWnToA9Oa6jzRVw==",
 			"requires": {
 				"@babel/core": "^7.12.10",
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/channel-postmessage": "6.5.8",
-				"@storybook/channels": "6.5.8",
-				"@storybook/client-api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-common": "6.5.8",
-				"@storybook/core-events": "6.5.8",
-				"@storybook/node-logger": "6.5.8",
-				"@storybook/preview-web": "6.5.8",
-				"@storybook/router": "6.5.8",
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/channel-postmessage": "6.5.9",
+				"@storybook/channels": "6.5.9",
+				"@storybook/client-api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-common": "6.5.9",
+				"@storybook/core-events": "6.5.9",
+				"@storybook/node-logger": "6.5.9",
+				"@storybook/preview-web": "6.5.9",
+				"@storybook/router": "6.5.9",
 				"@storybook/semver": "^7.3.2",
-				"@storybook/store": "6.5.8",
-				"@storybook/theming": "6.5.8",
-				"@storybook/ui": "6.5.8",
+				"@storybook/store": "6.5.9",
+				"@storybook/theming": "6.5.9",
+				"@storybook/ui": "6.5.9",
 				"@types/node": "^14.0.10 || ^16.0.0",
 				"@types/webpack": "^4.41.26",
 				"autoprefixer": "^9.8.6",
@@ -70285,7 +70296,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -70294,13 +70305,13 @@
 			}
 		},
 		"@storybook/channel-postmessage": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.5.8.tgz",
-			"integrity": "sha512-6IkIKk+UMYKk05vN8gWHvvOV/EZNXpQG/5gesGDALjkCyvRmcktHak1a9tHpoihZ3L7/gDwXOZraCZmuy8vBcQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.5.9.tgz",
+			"integrity": "sha512-pX/0R8UW7ezBhCrafRaL20OvMRcmESYvQQCDgjqSzJyHkcG51GOhsd6Ge93eJ6QvRMm9+w0Zs93N2VKjVtz0Qw==",
 			"requires": {
-				"@storybook/channels": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+				"@storybook/channels": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
 				"qs": "^6.10.0",
@@ -70308,21 +70319,21 @@
 			}
 		},
 		"@storybook/channel-websocket": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/channel-websocket/-/channel-websocket-6.5.8.tgz",
-			"integrity": "sha512-lAtvgO0FWsyS3u7uFbsGIYp2aSWJfWU/LOtc3x1K5c84JJAd9fncYkyZMwP1gMbdNgYxJoxe8HXtVtfeNegPuQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/channel-websocket/-/channel-websocket-6.5.9.tgz",
+			"integrity": "sha512-xtHvSNwuOhkgALwVshKWsoFhDmuvcosdYfxcfFGEiYKXIu46tRS5ZXmpmgEC/0JAVkVoFj5nL8bV7IY5np6oaA==",
 			"requires": {
-				"@storybook/channels": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
+				"@storybook/channels": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
 				"telejson": "^6.0.8"
 			}
 		},
 		"@storybook/channels": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.8.tgz",
-			"integrity": "sha512-fNql1lEIvWlI1NiRtwFMWOOvfW6qxgeSP6xoqiAJ0b+QYegEFG9UxJDuEvVHq++S81FulgQ5U+p+5R9XSV19tQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.9.tgz",
+			"integrity": "sha512-FvGA35nV38UPXWOl9ERapFTJaxwSTamQ339s2Ev7E9riyRG+GRkgTWzf5kECJgS1PAYKd/7m/RqKJT9BVv6A5g==",
 			"requires": {
 				"core-js": "^3.8.2",
 				"ts-dedent": "^2.0.0",
@@ -70330,17 +70341,17 @@
 			}
 		},
 		"@storybook/client-api": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.5.8.tgz",
-			"integrity": "sha512-mdU+qQ4+T2OUbEnl+3MWRKxEPju/EOIUg66hMgmif8c5u7YFYBFulUMUYLICMjll8Jlu+37+g+qO3K2eEz6CEw==",
-			"requires": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/channel-postmessage": "6.5.8",
-				"@storybook/channels": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.5.9.tgz",
+			"integrity": "sha512-pc7JKJoWLesixUKvG2nV36HukUuYoGRyAgD3PpIV7qSBS4JixqZ3VAHFUtqV1UzfOSQTovLSl4a0rIRnpie6gA==",
+			"requires": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/channel-postmessage": "6.5.9",
+				"@storybook/channels": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/store": "6.5.8",
+				"@storybook/store": "6.5.9",
 				"@types/qs": "^6.9.5",
 				"@types/webpack-env": "^1.16.0",
 				"core-js": "^3.8.2",
@@ -70357,24 +70368,25 @@
 			}
 		},
 		"@storybook/client-logger": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.8.tgz",
-			"integrity": "sha512-dH6HSaVuOIMHy1+rpsqcD3SJxVZEEbuEtsNpdUGwLJaIuduhUJJpM2xQfUW0siZDyrgwoa+znll+G0YNUbv7sg==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.9.tgz",
+			"integrity": "sha512-DOHL6p0uiDd3gV/Sb2FR+Vh6OiPrrf8BrA06uvXWsMRIIvEEvnparxv9EvPg7FlmUX0T3nq7d3juwjx4F8Wbcg==",
 			"requires": {
 				"core-js": "^3.8.2",
 				"global": "^4.4.0"
 			}
 		},
 		"@storybook/components": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.8.tgz",
-			"integrity": "sha512-YE+LZ1/GXoqertxodsf+L9ehcohbICRAxgE/iNqc7MZfk95SD3XRSUbxhCpGe8QTIZJpzs1tK4LFZ3Fg5w/+Lg==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.9.tgz",
+			"integrity": "sha512-BhfX980O9zn/1J4FNMeDo8ZvL1m5Ml3T4HRpfYmEBnf8oW5b5BeF6S2K2cwFStZRjWqm1feUcwNpZxCBVMkQnQ==",
 			"requires": {
-				"@storybook/client-logger": "6.5.8",
+				"@storybook/client-logger": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/theming": "6.5.8",
+				"@storybook/theming": "6.5.9",
 				"@types/react-syntax-highlighter": "11.0.5",
 				"core-js": "^3.8.2",
+				"memoizerific": "^1.11.3",
 				"qs": "^6.10.0",
 				"react-syntax-highlighter": "^15.4.5",
 				"regenerator-runtime": "^0.13.7",
@@ -70382,29 +70394,29 @@
 			}
 		},
 		"@storybook/core": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.5.8.tgz",
-			"integrity": "sha512-+Fv4n1E5N4Avty9GcRbz4vB2IWH//se2OUU+RTT3vneCOGjyus5bj0Or6GU5wef5UGuvHF78mHg/frhWpguzsw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.5.9.tgz",
+			"integrity": "sha512-Mt3TTQnjQt2/pa60A+bqDsAOrYpohapdtt4DDZEbS8h0V6u11KyYYh3w7FCySlL+sPEyogj63l5Ec76Jah3l2w==",
 			"requires": {
-				"@storybook/core-client": "6.5.8",
-				"@storybook/core-server": "6.5.8"
+				"@storybook/core-client": "6.5.9",
+				"@storybook/core-server": "6.5.9"
 			}
 		},
 		"@storybook/core-client": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-6.5.8.tgz",
-			"integrity": "sha512-8x8qKQ2clvpfDcoWrNBmQ8Xt9z/i32TFIBp4PEZMcbB7eqo517nzfllLiXDipiJgO7BGxKtY5CRHQ9pAU9G27A==",
-			"requires": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/channel-postmessage": "6.5.8",
-				"@storybook/channel-websocket": "6.5.8",
-				"@storybook/client-api": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-6.5.9.tgz",
+			"integrity": "sha512-LY0QbhShowO+PQx3gao3wdVjpKMH1AaSLmuI95FrcjoMmSXGf96jVLKQp9mJRGeHIsAa93EQBYuCihZycM3Kbg==",
+			"requires": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/channel-postmessage": "6.5.9",
+				"@storybook/channel-websocket": "6.5.9",
+				"@storybook/client-api": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/preview-web": "6.5.8",
-				"@storybook/store": "6.5.8",
-				"@storybook/ui": "6.5.8",
+				"@storybook/preview-web": "6.5.9",
+				"@storybook/store": "6.5.9",
+				"@storybook/ui": "6.5.9",
 				"airbnb-js-shims": "^2.2.1",
 				"ansi-to-html": "^0.6.11",
 				"core-js": "^3.8.2",
@@ -70418,9 +70430,9 @@
 			}
 		},
 		"@storybook/core-common": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-6.5.8.tgz",
-			"integrity": "sha512-ELGKLMx1d0oEA2LT+fsmo85X2RNE1EO+It7B1bw//g7jyf1hmZ7t3lXMZUCqt7eml1qy1N72LDkfmmU+H9H6ww==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-6.5.9.tgz",
+			"integrity": "sha512-NxOK0mrOCo0TWZ7Npc5HU66EKoRHlrtg18/ZixblLDWQMIqY9XCck8K1kJ8QYpYCHla+aHIsYUArFe2vhlEfZA==",
 			"requires": {
 				"@babel/core": "^7.12.10",
 				"@babel/plugin-proposal-class-properties": "^7.12.1",
@@ -70444,7 +70456,7 @@
 				"@babel/preset-react": "^7.12.10",
 				"@babel/preset-typescript": "^7.12.7",
 				"@babel/register": "^7.12.1",
-				"@storybook/node-logger": "6.5.8",
+				"@storybook/node-logger": "6.5.9",
 				"@storybook/semver": "^7.3.2",
 				"@types/node": "^14.0.10 || ^16.0.0",
 				"@types/pretty-hrtime": "^1.0.0",
@@ -70535,30 +70547,30 @@
 			}
 		},
 		"@storybook/core-events": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.8.tgz",
-			"integrity": "sha512-lzG4Lg65WFYvjs2k/E3CP4+eyPexEGrDyRMO9Pbj9H9x+eosYptauEbT/wXF83bmUWZKLWWVUAZX7hDcxBO8cw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.9.tgz",
+			"integrity": "sha512-tXt7a3ZvJOCeEKpNa/B5rQM5VI7UJLlOh3IHOImWn4HqoBRrZvbourmac+PRZAtXpos0h3c6554Hjapj/Sny5Q==",
 			"requires": {
 				"core-js": "^3.8.2"
 			}
 		},
 		"@storybook/core-server": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-6.5.8.tgz",
-			"integrity": "sha512-ti7+MW1xzD9O0JLwgZTwulxhJx5YGPNu+hRpGhJSjKrqGX1h6K6ilmkBSHvyLqpiE+F4mxvqb5Rx3KBIEdEgbw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-6.5.9.tgz",
+			"integrity": "sha512-YeePGUrd5fQPvGzMhowh124KrcZURFpFXg1VB0Op3ESqCIsInoMZeObci4Gc+binMXC7vcv7aw3EwSLU37qJzQ==",
 			"requires": {
 				"@discoveryjs/json-ext": "^0.5.3",
-				"@storybook/builder-webpack4": "6.5.8",
-				"@storybook/core-client": "6.5.8",
-				"@storybook/core-common": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+				"@storybook/builder-webpack4": "6.5.9",
+				"@storybook/core-client": "6.5.9",
+				"@storybook/core-common": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/csf-tools": "6.5.8",
-				"@storybook/manager-webpack4": "6.5.8",
-				"@storybook/node-logger": "6.5.8",
+				"@storybook/csf-tools": "6.5.9",
+				"@storybook/manager-webpack4": "6.5.9",
+				"@storybook/node-logger": "6.5.9",
 				"@storybook/semver": "^7.3.2",
-				"@storybook/store": "6.5.8",
-				"@storybook/telemetry": "6.5.8",
+				"@storybook/store": "6.5.9",
+				"@storybook/telemetry": "6.5.9",
 				"@types/node": "^14.0.10 || ^16.0.0",
 				"@types/node-fetch": "^2.5.7",
 				"@types/pretty-hrtime": "^1.0.0",
@@ -70649,9 +70661,9 @@
 			}
 		},
 		"@storybook/csf-tools": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-6.5.8.tgz",
-			"integrity": "sha512-4VrjIMxKcp29OFSMDub52aQOMP4EvtZ5eWZkPeORRNQoJsnQaxhF9GGf71QdSaAQZhMoxdvmpA47ehrFk8Rnfw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-6.5.9.tgz",
+			"integrity": "sha512-RAdhsO2XmEDyWy0qNQvdKMLeIZAuyfD+tYlUwBHRU6DbByDucvwgMOGy5dF97YNJFmyo93EUYJzXjUrJs3U1LQ==",
 			"requires": {
 				"@babel/core": "^7.12.10",
 				"@babel/generator": "^7.12.11",
@@ -70697,13 +70709,13 @@
 			}
 		},
 		"@storybook/docs-tools": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-6.5.8.tgz",
-			"integrity": "sha512-CWMW+3LSstvQmHKV5ggPR1beQZTpwCXEhfysZ9u4Yp/4fcoDIuQ7DTOK5uNFynGCGl1FG3lATriEOhEZ3bZCvQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-6.5.9.tgz",
+			"integrity": "sha512-UoTaXLvec8x+q+4oYIk/t8DBju9C3ZTGklqOxDIt+0kS3TFAqEgI3JhKXqQOXgN5zDcvLVSxi8dbVAeSxk2ktA==",
 			"requires": {
 				"@babel/core": "^7.12.10",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/store": "6.5.8",
+				"@storybook/store": "6.5.9",
 				"core-js": "^3.8.2",
 				"doctrine": "^3.0.0",
 				"lodash": "^4.17.21",
@@ -70711,19 +70723,19 @@
 			}
 		},
 		"@storybook/manager-webpack4": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/manager-webpack4/-/manager-webpack4-6.5.8.tgz",
-			"integrity": "sha512-qW5/L3cJHvtNi5ylDxObALZWaAHMsWQlPP8GRxm95NHpff4CfRo/qs7puY9ZeLmJSic0KchoHEH/8AScflLOgA==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/manager-webpack4/-/manager-webpack4-6.5.9.tgz",
+			"integrity": "sha512-49LZlHqWc7zj9tQfOOANixPYmLxqWTTZceA6DSXnKd9xDiO2Gl23Y+l/CSPXNZGDB8QFAwpimwqyKJj/NLH45A==",
 			"requires": {
 				"@babel/core": "^7.12.10",
 				"@babel/plugin-transform-template-literals": "^7.12.1",
 				"@babel/preset-react": "^7.12.10",
-				"@storybook/addons": "6.5.8",
-				"@storybook/core-client": "6.5.8",
-				"@storybook/core-common": "6.5.8",
-				"@storybook/node-logger": "6.5.8",
-				"@storybook/theming": "6.5.8",
-				"@storybook/ui": "6.5.8",
+				"@storybook/addons": "6.5.9",
+				"@storybook/core-client": "6.5.9",
+				"@storybook/core-common": "6.5.9",
+				"@storybook/node-logger": "6.5.9",
+				"@storybook/theming": "6.5.9",
+				"@storybook/ui": "6.5.9",
 				"@types/node": "^14.0.10 || ^16.0.0",
 				"@types/webpack": "^4.41.26",
 				"babel-loader": "^8.0.0",
@@ -70814,9 +70826,9 @@
 			}
 		},
 		"@storybook/node-logger": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.8.tgz",
-			"integrity": "sha512-BHdkSipgjnfsh4FRYbV2R0npM5gVx9JLRsDQ0KiTolRpN4SU98kT/6885zb9jZg6I0EY+UG9Qdr3fvL9VLpY1g==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.9.tgz",
+			"integrity": "sha512-nZZNZG2Wtwv6Trxi3FrnIqUmB55xO+X/WQGPT5iKlqNjdRIu/T72mE7addcp4rbuWCQfZUhcDDGpBOwKtBxaGg==",
 			"requires": {
 				"@types/npmlog": "^4.1.2",
 				"chalk": "^4.1.0",
@@ -70837,24 +70849,24 @@
 			}
 		},
 		"@storybook/postinstall": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.5.8.tgz",
-			"integrity": "sha512-Z6zQnBOaMj+gHtF1XPMpwTIxYRCmh6eNirrJLrkPk5c+fKXtw6+vNCbmPvsyTGxGEHnyn/tYwe1fvwJTHDctUw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.5.9.tgz",
+			"integrity": "sha512-KQBupK+FMRrtSt8IL0MzCZ/w9qbd25Yxxp/+ajfWgZTRgsWgVFOqcDyMhS16eNbBp5qKIBCBDXfEF+/mK8HwQQ==",
 			"requires": {
 				"core-js": "^3.8.2"
 			}
 		},
 		"@storybook/preview-web": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/preview-web/-/preview-web-6.5.8.tgz",
-			"integrity": "sha512-jEEAgvTVZfFA0B20mRJfLW6dPA5mG5PxUJtjMx6wH4Yw4+i3Sld/U63hTRt7ktpKdrcu4lX9E+PuaRLPq7S2kg==",
-			"requires": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/channel-postmessage": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/preview-web/-/preview-web-6.5.9.tgz",
+			"integrity": "sha512-4eMrO2HJyZUYyL/j+gUaDvry6iGedshwT5MQqe7J9FaA+Q2pNARQRB1X53f410w7S4sObRmYIAIluWPYdWym9w==",
+			"requires": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/channel-postmessage": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/store": "6.5.8",
+				"@storybook/store": "6.5.9",
 				"ansi-to-html": "^0.6.11",
 				"core-js": "^3.8.2",
 				"global": "^4.4.0",
@@ -70868,12 +70880,14 @@
 			}
 		},
 		"@storybook/router": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.8.tgz",
-			"integrity": "sha512-tseNJpZ2ZzVYowjekUMpGJVVRMrwOkttieD9mRbHrhh+2n7b+SoMKnuLi3ow0xeOyPL8ZDng2FgRjQzQHXA5Sw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.9.tgz",
+			"integrity": "sha512-G2Xp/2r8vU2O34eelE+G5VbEEVFDeHcCURrVJEROh6dq2asFJAPbzslVXSeCqgOTNLSpRDJ2NcN5BckkNqmqJg==",
 			"requires": {
-				"@storybook/client-logger": "6.5.8",
+				"@storybook/client-logger": "6.5.9",
 				"core-js": "^3.8.2",
+				"memoizerific": "^1.11.3",
+				"qs": "^6.10.0",
 				"regenerator-runtime": "^0.13.7"
 			}
 		},
@@ -70914,12 +70928,12 @@
 			}
 		},
 		"@storybook/source-loader": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.8.tgz",
-			"integrity": "sha512-3bVxXKE2o6lS4WGga/S7WwgITxPQ96qsY+pQ1I7A+e4/cKSmZxlVWM9qfMW2ScmHTVoZE0Ujsmn6DWftxzCyrQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.9.tgz",
+			"integrity": "sha512-H03nFKaP6borfWMTTa9igBA+Jm2ph+FoVJImWC/X+LAmLSJYYSXuqSgmiZ/DZvbjxS4k8vccE2HXogne1IvaRA==",
 			"requires": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
+				"@storybook/addons": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
 				"core-js": "^3.8.2",
 				"estraverse": "^5.2.0",
@@ -70938,13 +70952,13 @@
 			}
 		},
 		"@storybook/store": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/store/-/store-6.5.8.tgz",
-			"integrity": "sha512-5rhGjN/O0oLebRv947B0vgapq48qBBBYYOgq4krRUYU2ecS6LUgtAHR/kTa324o9aBO8cnIXHH78jZcSvMiJlQ==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/store/-/store-6.5.9.tgz",
+			"integrity": "sha512-80pcDTcCwK6wUA63aWOp13urI77jfipIVee9mpVvbNyfrNN8kGv1BS0z/JHDxuV6rC4g7LG1fb+BurR0yki7BA==",
 			"requires": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-events": "6.5.8",
+				"@storybook/addons": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-events": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
 				"core-js": "^3.8.2",
 				"fast-deep-equal": "^3.1.3",
@@ -70960,12 +70974,12 @@
 			}
 		},
 		"@storybook/telemetry": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-6.5.8.tgz",
-			"integrity": "sha512-QnAhYF8CwcjC1bT2PK7Zqvo6E42TPl0MY6JS+H6qSZU/BmYeS0It8ZURNfPsA/OzVVLHUkQs96CisKh3N0WWaw==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-6.5.9.tgz",
+			"integrity": "sha512-JluoHCRhHAr4X0eUNVBSBi1JIBA92404Tu1TPdbN7x6gCZxHXXPTSUTAnspXp/21cTdMhY2x+kfZQ8fmlGK4MQ==",
 			"requires": {
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core-common": "6.5.8",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core-common": "6.5.9",
 				"chalk": "^4.1.0",
 				"core-js": "^3.8.2",
 				"detect-package-manager": "^2.0.1",
@@ -71015,46 +71029,49 @@
 			}
 		},
 		"@storybook/theming": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.8.tgz",
-			"integrity": "sha512-1VaKHqj38Ls1bJwDpg3+aEOlvVib/DCFkP6WYrP/AQtNAzxiyw5WkaoRlTVJZvCdu5TxjpG4O6/Ai5TI9QftIg==",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.9.tgz",
+			"integrity": "sha512-KM0AMP5jMQPAdaO8tlbFCYqx9uYM/hZXGSVUhznhLYu7bhNAIK7ZVmXxyE/z/khM++8eUHzRoZGiO/cwCkg9Xw==",
 			"requires": {
-				"@storybook/client-logger": "6.5.8",
+				"@storybook/client-logger": "6.5.9",
 				"core-js": "^3.8.2",
+				"memoizerific": "^1.11.3",
 				"regenerator-runtime": "^0.13.7"
 			}
 		},
 		"@storybook/ui": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.5.8.tgz",
-			"integrity": "sha512-rL09kxgY9pCVbxr/VUK4b5FL5VbALfciZR+50sNT1EcTDb9k0OPeqx7a4Ptc+KNkgyPdSTxUGvhzVqH5PYrhZQ==",
-			"requires": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/api": "6.5.8",
-				"@storybook/channels": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/components": "6.5.8",
-				"@storybook/core-events": "6.5.8",
-				"@storybook/router": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.5.9.tgz",
+			"integrity": "sha512-ryuPxJgtbb0gPXKGgGAUC+Z185xGAd1IvQ0jM5fJ0SisHXI8jteG3RaWhntOehi9qCg+64Vv6eH/cj9QYNHt1Q==",
+			"requires": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/api": "6.5.9",
+				"@storybook/channels": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/components": "6.5.9",
+				"@storybook/core-events": "6.5.9",
+				"@storybook/router": "6.5.9",
 				"@storybook/semver": "^7.3.2",
-				"@storybook/theming": "6.5.8",
+				"@storybook/theming": "6.5.9",
 				"core-js": "^3.8.2",
+				"memoizerific": "^1.11.3",
+				"qs": "^6.10.0",
 				"regenerator-runtime": "^0.13.7",
 				"resolve-from": "^5.0.0"
 			}
 		},
 		"@storybook/vue": {
-			"version": "6.5.8",
-			"resolved": "https://registry.npmjs.org/@storybook/vue/-/vue-6.5.8.tgz",
-			"integrity": "sha512-wrZSBcCXzW6yq4Q7/SDO6qItIqLfykOAyRglBP8Xi2HVOpW2OGXIm7nAyuT/HxIg85+nxBT2dAdwG5bl4ynrHw==",
-			"requires": {
-				"@storybook/addons": "6.5.8",
-				"@storybook/client-logger": "6.5.8",
-				"@storybook/core": "6.5.8",
-				"@storybook/core-common": "6.5.8",
+			"version": "6.5.9",
+			"resolved": "https://registry.npmjs.org/@storybook/vue/-/vue-6.5.9.tgz",
+			"integrity": "sha512-/aaROupwLxDjZSkYHUnjvinHywcR0drJe8ROUfbSTFQOjd5boKTp3rfzwsv6WOpaDioIfI/LpCNOzS+F6+tGwA==",
+			"requires": {
+				"@storybook/addons": "6.5.9",
+				"@storybook/client-logger": "6.5.9",
+				"@storybook/core": "6.5.9",
+				"@storybook/core-common": "6.5.9",
 				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/docs-tools": "6.5.8",
-				"@storybook/store": "6.5.8",
+				"@storybook/docs-tools": "6.5.9",
+				"@storybook/store": "6.5.9",
 				"@types/node": "^14.14.20 || ^16.0.0",
 				"@types/webpack-env": "^1.16.0",
 				"core-js": "^3.8.2",
@@ -71391,9 +71408,9 @@
 			}
 		},
 		"@types/express-serve-static-core": {
-			"version": "4.17.28",
-			"resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
-			"integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
+			"version": "4.17.29",
+			"resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.29.tgz",
+			"integrity": "sha512-uMd++6dMKS32EOuw1Uli3e3BPgdLIXmezcfHv7N4c1s3gkhikBplORPpMq3fuWkxncZN1reb16d5n8yhQ80x7Q==",
 			"requires": {
 				"@types/node": "*",
 				"@types/qs": "*",
@@ -71752,9 +71769,9 @@
 			"integrity": "sha512-94+Ahf9IcaDuJTle/2b+wzvjmutxXAEXU6O81JHblYXUg2BDG+dnBy7VxIPHKAyEEDHzCMQydTJuWvrE+Aanzw=="
 		},
 		"@types/node-fetch": {
-			"version": "2.6.1",
-			"resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.1.tgz",
-			"integrity": "sha512-oMqjURCaxoSIsHSr1E47QHzbmzNR5rK8McHuNb11BOM9cHcIK3Avy0s/b2JlXHoQGTYS3NsvWzV1M0iK7l0wbA==",
+			"version": "2.6.2",
+			"resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.2.tgz",
+			"integrity": "sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==",
 			"requires": {
 				"@types/node": "*",
 				"form-data": "^3.0.0"
@@ -71817,9 +71834,9 @@
 			}
 		},
 		"@types/passport": {
-			"version": "1.0.8",
-			"resolved": "https://registry.npmjs.org/@types/passport/-/passport-1.0.8.tgz",
-			"integrity": "sha512-Gdcvis7+7G/Mobm+25AeFi+oe5teBhHzpbCOFWeN10Bj8tnoEE1L5lkraQjzmDEKkJQuM7xSJUGIFGl/giyRfQ==",
+			"version": "1.0.9",
+			"resolved": "https://registry.npmjs.org/@types/passport/-/passport-1.0.9.tgz",
+			"integrity": "sha512-9+ilzUhmZQR4JP49GdC2O4UdDE3POPLwpmaTC/iLkW7l0TZCXOo1zsTnnlXPq6rP1UsUZPfbAV4IUdiwiXyC7g==",
 			"requires": {
 				"@types/express": "*"
 			}
@@ -71899,9 +71916,9 @@
 			"integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
 		},
 		"@types/react": {
-			"version": "18.0.12",
-			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.12.tgz",
-			"integrity": "sha512-duF1OTASSBQtcigUvhuiTB1Ya3OvSy+xORCiEf20H0P0lzx+/KeVsA99U5UjLXSbyo1DRJDlLKqTeM1ngosqtg==",
+			"version": "18.0.14",
+			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.14.tgz",
+			"integrity": "sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q==",
 			"requires": {
 				"@types/prop-types": "*",
 				"@types/scheduler": "*",
@@ -72094,9 +72111,9 @@
 			}
 		},
 		"@types/testing-library__jest-dom": {
-			"version": "5.14.3",
-			"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz",
-			"integrity": "sha512-oKZe+Mf4ioWlMuzVBaXQ9WDnEm1+umLx0InILg+yvZVBBDmzV5KfZyLrCvadtWcx8+916jLmHafcmqqffl+iIw==",
+			"version": "5.14.4",
+			"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.4.tgz",
+			"integrity": "sha512-EUCs9PTBOEyfRtLKkKd31YrRCx/9Wxjy2Uqb6IH/KAOr7/vP0i8iClOyxQqjm/UxMGU5r5s2vOBM7vSPQVmabg==",
 			"requires": {
 				"@types/jest": "*"
 			}
@@ -72133,9 +72150,9 @@
 			}
 		},
 		"@types/uglify-js": {
-			"version": "3.13.3",
-			"resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.3.tgz",
-			"integrity": "sha512-9dmBYXt/rKxedUXfCvXSxyiPvpDXLkiRlv17DnqdhS+pRustL1967rI1jZVt1xysTO+xJGMoZzcy3cWC9+b6Tw==",
+			"version": "3.16.0",
+			"resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.16.0.tgz",
+			"integrity": "sha512-0yeUr92L3r0GLRnBOvtYK1v2SjqMIqQDHMl7GLb+l2L8+6LSFWEEWEIgVsPdMn5ImLM8qzWT8xFPtQYpp8co0g==",
 			"requires": {
 				"source-map": "^0.6.1"
 			}
@@ -72347,39 +72364,39 @@
 			}
 		},
 		"@typescript-eslint/utils": {
-			"version": "5.27.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.27.1.tgz",
-			"integrity": "sha512-mZ9WEn1ZLDaVrhRaYgzbkXBkTPghPFsup8zDbbsYTxC5OmqrFE7skkKS/sraVsLP3TcT3Ki5CSyEFBRkLH/H/w==",
+			"version": "5.28.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.28.0.tgz",
+			"integrity": "sha512-E60N5L0fjv7iPJV3UGc4EC+A3Lcj4jle9zzR0gW7vXhflO7/J29kwiTGITA2RlrmPokKiZbBy2DgaclCaEUs6g==",
 			"requires": {
 				"@types/json-schema": "^7.0.9",
-				"@typescript-eslint/scope-manager": "5.27.1",
-				"@typescript-eslint/types": "5.27.1",
-				"@typescript-eslint/typescript-estree": "5.27.1",
+				"@typescript-eslint/scope-manager": "5.28.0",
+				"@typescript-eslint/types": "5.28.0",
+				"@typescript-eslint/typescript-estree": "5.28.0",
 				"eslint-scope": "^5.1.1",
 				"eslint-utils": "^3.0.0"
 			},
 			"dependencies": {
 				"@typescript-eslint/scope-manager": {
-					"version": "5.27.1",
-					"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.27.1.tgz",
-					"integrity": "sha512-fQEOSa/QroWE6fAEg+bJxtRZJTH8NTskggybogHt4H9Da8zd4cJji76gA5SBlR0MgtwF7rebxTbDKB49YUCpAg==",
+					"version": "5.28.0",
+					"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.28.0.tgz",
+					"integrity": "sha512-LeBLTqF/he1Z+boRhSqnso6YrzcKMTQ8bO/YKEe+6+O/JGof9M0g3IJlIsqfrK/6K03MlFIlycbf1uQR1IjE+w==",
 					"requires": {
-						"@typescript-eslint/types": "5.27.1",
-						"@typescript-eslint/visitor-keys": "5.27.1"
+						"@typescript-eslint/types": "5.28.0",
+						"@typescript-eslint/visitor-keys": "5.28.0"
 					}
 				},
 				"@typescript-eslint/types": {
-					"version": "5.27.1",
-					"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.27.1.tgz",
-					"integrity": "sha512-LgogNVkBhCTZU/m8XgEYIWICD6m4dmEDbKXESCbqOXfKZxRKeqpiJXQIErv66sdopRKZPo5l32ymNqibYEH/xg=="
+					"version": "5.28.0",
+					"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.28.0.tgz",
+					"integrity": "sha512-2OOm8ZTOQxqkPbf+DAo8oc16sDlVR5owgJfKheBkxBKg1vAfw2JsSofH9+16VPlN9PWtv8Wzhklkqw3k/zCVxA=="
 				},
 				"@typescript-eslint/typescript-estree": {
-					"version": "5.27.1",
-					"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.27.1.tgz",
-					"integrity": "sha512-DnZvvq3TAJ5ke+hk0LklvxwYsnXpRdqUY5gaVS0D4raKtbznPz71UJGnPTHEFo0GDxqLOLdMkkmVZjSpET1hFw==",
+					"version": "5.28.0",
+					"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.28.0.tgz",
+					"integrity": "sha512-9GX+GfpV+F4hdTtYc6OV9ZkyYilGXPmQpm6AThInpBmKJEyRSIjORJd1G9+bknb7OTFYL+Vd4FBJAO6T78OVqA==",
 					"requires": {
-						"@typescript-eslint/types": "5.27.1",
-						"@typescript-eslint/visitor-keys": "5.27.1",
+						"@typescript-eslint/types": "5.28.0",
+						"@typescript-eslint/visitor-keys": "5.28.0",
 						"debug": "^4.3.4",
 						"globby": "^11.1.0",
 						"is-glob": "^4.0.3",
@@ -72388,11 +72405,11 @@
 					}
 				},
 				"@typescript-eslint/visitor-keys": {
-					"version": "5.27.1",
-					"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.27.1.tgz",
-					"integrity": "sha512-xYs6ffo01nhdJgPieyk7HAOpjhTsx7r/oB9LWEhwAXgwn33tkr+W8DI2ChboqhZlC4q3TC6geDYPoiX8ROqyOQ==",
+					"version": "5.28.0",
+					"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.28.0.tgz",
+					"integrity": "sha512-BtfP1vCor8cWacovzzPFOoeW4kBQxzmhxGoOpt0v1SFvG+nJ0cWaVdJk7cky1ArTcFHHKNIxyo2LLr3oNkSuXA==",
 					"requires": {
-						"@typescript-eslint/types": "5.27.1",
+						"@typescript-eslint/types": "5.28.0",
 						"eslint-visitor-keys": "^3.3.0"
 					}
 				},
@@ -72517,9 +72534,9 @@
 			}
 		},
 		"@vue/babel-preset-app": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.5.17.tgz",
-			"integrity": "sha512-iFv9J3F5VKUPcbx+TqW5qhGmAVyXQxPRpKpPOuTLFIVTzg+iwJnrqVbL4kJU5ECGDxPESW2oCVgxv9bTlDPu7w==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.5.18.tgz",
+			"integrity": "sha512-P7ASKBNuz3IZxvO5VPsPGjRey4KRNMJ9Rav0nJ/v+m0ny6uUuwE03Xoli5G3mvdijUbtVZT7+/uULMCEg4bGew==",
 			"requires": {
 				"@babel/core": "^7.11.0",
 				"@babel/helper-compilation-targets": "^7.9.6",
@@ -72629,18 +72646,18 @@
 			}
 		},
 		"@vue/cli-overlay": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-4.5.17.tgz",
-			"integrity": "sha512-QKKp66VbMg+X8Qh0wgXSwgxLfxY7EIkZkV6bZ6nFqBx8xtaJQVDbTL+4zcUPPA6nygbIcQ6gvTinNEqIqX6FUQ=="
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-4.5.18.tgz",
+			"integrity": "sha512-PZW6WRbmWx/I+PaP7PdjZGscvtUiIq/pRU38p3GLKMl53InBer12549CEAhPicAF5c38gBzGu/ifoPSvlPSZyg=="
 		},
 		"@vue/cli-plugin-babel": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-babel/-/cli-plugin-babel-4.5.17.tgz",
-			"integrity": "sha512-6kZuc3PdoUvGAnndUq6+GqjIXn3bqdTR8lOcAb1BH2b4N7IKGlmzcipALGS23HLVMAvDgNuUS7vf0unin9j2cg==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-babel/-/cli-plugin-babel-4.5.18.tgz",
+			"integrity": "sha512-Juiu3EgV228pKcfWu6vrABrrXYoMtanf4PlG6P2drPHf1LgVmaUp1g/K7IxdCc63IY9E+eCWjZ2ZEnQvxMSWOQ==",
 			"requires": {
 				"@babel/core": "^7.11.0",
-				"@vue/babel-preset-app": "^4.5.17",
-				"@vue/cli-shared-utils": "^4.5.17",
+				"@vue/babel-preset-app": "^4.5.18",
+				"@vue/cli-shared-utils": "^4.5.18",
 				"babel-loader": "^8.1.0",
 				"cache-loader": "^4.1.0",
 				"thread-loader": "^2.1.3",
@@ -72648,11 +72665,11 @@
 			}
 		},
 		"@vue/cli-plugin-eslint": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.5.17.tgz",
-			"integrity": "sha512-bVNDP+SuWcuJrBMc+JLaKvlxx25XKIlZBa+zzFnxhHZlwPZ7CeBD3e2wnsygJyPoKgDZcZwDgmEz1BZzMEjsNw==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.5.18.tgz",
+			"integrity": "sha512-UWacV26Ul+W61PwvMBv4Msh2h3Umr5FG0ApXFzLQTgyc/rCmXvhR53pW252zVZ2tf7s2n7xDFnp/mrCUrkb2tw==",
 			"requires": {
-				"@vue/cli-shared-utils": "^4.5.17",
+				"@vue/cli-shared-utils": "^4.5.18",
 				"eslint-loader": "^2.2.1",
 				"globby": "^9.2.0",
 				"inquirer": "^7.1.0",
@@ -72866,7 +72883,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -72875,20 +72892,20 @@
 			}
 		},
 		"@vue/cli-plugin-router": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-4.5.17.tgz",
-			"integrity": "sha512-9r9CSwqv2+39XHQPDZJ0uaTtTP7oe0Gx17m7kBhHG3FA7R7AOSk2aVzhHZmDRhzlOxjx9kQSvrOSMfUG0kV4dQ==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-4.5.18.tgz",
+			"integrity": "sha512-J2SJpi7OKy6NE5yUz7eubTnzc+k2LHEcI+c0W8i4UoUumIVSkAgvKWZPFqoy/QIqnQpwW/75CUjpLGf6Fht2wQ==",
 			"requires": {
-				"@vue/cli-shared-utils": "^4.5.17"
+				"@vue/cli-shared-utils": "^4.5.18"
 			}
 		},
 		"@vue/cli-plugin-typescript": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-typescript/-/cli-plugin-typescript-4.5.17.tgz",
-			"integrity": "sha512-7JeJ913td1xbNKcVO71clTEXWGq43/6FPLhph3kBEdUrMqANd1ENb4jFZ/Rl277YTFipV08WpzQ12d1ZtqwvEQ==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-typescript/-/cli-plugin-typescript-4.5.18.tgz",
+			"integrity": "sha512-6hbDtSmCCR0yDmXASeKpdXcrwELRRWw7yLzdXUioPBJ3hTFILuEx4gKbVoDF7NfoK0LG33A7XwosBx60QAS3zQ==",
 			"requires": {
 				"@types/webpack-env": "^1.15.2",
-				"@vue/cli-shared-utils": "^4.5.17",
+				"@vue/cli-shared-utils": "^4.5.18",
 				"cache-loader": "^4.1.0",
 				"fork-ts-checker-webpack-plugin": "^3.1.1",
 				"fork-ts-checker-webpack-plugin-v5": "npm:fork-ts-checker-webpack-plugin@^5.0.11",
@@ -73278,7 +73295,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -73334,14 +73351,14 @@
 			}
 		},
 		"@vue/cli-plugin-unit-jest": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-unit-jest/-/cli-plugin-unit-jest-4.5.17.tgz",
-			"integrity": "sha512-Ta8hx68Y252umik1yD50dyyrwhzj4KzTEpngY9YKB6bY6pga9GK2olqyrb3+2X8o6tnSQkTFz+UcobfRQJDs5A==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-unit-jest/-/cli-plugin-unit-jest-4.5.18.tgz",
+			"integrity": "sha512-5B1k8b9pb/UJZ7askfgiRI7O2Q2XSgAYRSSGexEwQ5+shS5hXCRDivt2MzbH6VUKhYner8WxPdlzhuvnbc6lRw==",
 			"requires": {
 				"@babel/core": "^7.11.0",
 				"@babel/plugin-transform-modules-commonjs": "^7.9.6",
 				"@types/jest": "^24.0.19",
-				"@vue/cli-shared-utils": "^4.5.17",
+				"@vue/cli-shared-utils": "^4.5.18",
 				"babel-core": "^7.0.0-bridge.0",
 				"babel-jest": "^24.9.0",
 				"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
@@ -74619,7 +74636,7 @@
 				"string-length": {
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
-					"integrity": "sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=",
+					"integrity": "sha512-Qka42GGrS8Mm3SZ+7cH8UXiIWI867/b/Z/feQSpQx/rbfB8UGknGEZVaUQMOUVj+soY6NpWAxily63HI1OckVQ==",
 					"requires": {
 						"astral-regex": "^1.0.0",
 						"strip-ansi": "^4.0.0"
@@ -74633,7 +74650,7 @@
 						"strip-ansi": {
 							"version": "4.0.0",
 							"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-							"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+							"integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
 							"requires": {
 								"ansi-regex": "^3.0.0"
 							}
@@ -74661,7 +74678,7 @@
 				"strip-bom": {
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-					"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
+					"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA=="
 				},
 				"supports-color": {
 					"version": "5.5.0",
@@ -74685,12 +74702,12 @@
 				"throat": {
 					"version": "4.1.0",
 					"resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
-					"integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo="
+					"integrity": "sha512-wCVxLDcFxw7ujDxaeJC6nfl2XfHJNYs8yUYJnvMgtPEFlttP9tHSfRUv2vBe6C4hkVFPWoP1P6ZccbYjmSEkKA=="
 				},
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -74708,7 +74725,7 @@
 				"tr46": {
 					"version": "1.0.1",
 					"resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
-					"integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
+					"integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
 					"requires": {
 						"punycode": "^2.1.0"
 					}
@@ -74740,7 +74757,7 @@
 				"type-check": {
 					"version": "0.3.2",
 					"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-					"integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+					"integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
 					"requires": {
 						"prelude-ls": "~1.1.2"
 					}
@@ -74860,14 +74877,14 @@
 			}
 		},
 		"@vue/cli-plugin-vuex": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.17.tgz",
-			"integrity": "sha512-ck/ju2T2dmPKLWK/5QctNJs9SCb+eSZbbmr8neFkMc7GlbXw6qLWw5v3Vpd4KevdQA8QuQOA1pjUmzpCiU/mYQ=="
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.18.tgz",
+			"integrity": "sha512-8lnxtRJLa6Ki4FFYDtVA6Q4CRSjzWPXRkY7v8779nNq8eVLpGEyOtqDgu/VvNBs7EGKmveXZFNu8dUsfuTt7qA=="
 		},
 		"@vue/cli-service": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-service/-/cli-service-4.5.17.tgz",
-			"integrity": "sha512-MqfkRYIcIUACe3nYlzNrYstJTWRXHlIqh6JCkbWbdnXWN+IfaVdlG8zw5Q0DVcSdGvkevUW7zB4UhtZB4uyAcA==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-service/-/cli-service-4.5.18.tgz",
+			"integrity": "sha512-ACRfiyzQNT+3Ko8NdkyvKMsAJ7IziQcM+QvRzfHo11v4YllcQBbRxYsmnffvjaZfNBefQvJ1qX9FI+ggIlxYQA==",
 			"requires": {
 				"@intervolga/optimize-cssnano-plugin": "^1.0.5",
 				"@soda/friendly-errors-webpack-plugin": "^1.7.1",
@@ -74875,10 +74892,10 @@
 				"@types/minimist": "^1.2.0",
 				"@types/webpack": "^4.0.0",
 				"@types/webpack-dev-server": "^3.11.0",
-				"@vue/cli-overlay": "^4.5.17",
-				"@vue/cli-plugin-router": "^4.5.17",
-				"@vue/cli-plugin-vuex": "^4.5.17",
-				"@vue/cli-shared-utils": "^4.5.17",
+				"@vue/cli-overlay": "^4.5.18",
+				"@vue/cli-plugin-router": "^4.5.18",
+				"@vue/cli-plugin-vuex": "^4.5.18",
+				"@vue/cli-shared-utils": "^4.5.18",
 				"@vue/component-compiler-utils": "^3.1.2",
 				"@vue/preload-webpack-plugin": "^1.1.0",
 				"@vue/web-component-wrapper": "^1.2.0",
@@ -75286,7 +75303,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -75295,7 +75312,7 @@
 				"toposort": {
 					"version": "1.0.7",
 					"resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",
-					"integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk="
+					"integrity": "sha512-FclLrw8b9bMWf4QlCJuHBEVhSRsqDj6u3nIjAzPeJvgl//1hBlffdlk0MALceL14+koWEdU4ofRAXofbODxQzg=="
 				},
 				"url-loader": {
 					"version": "2.3.0",
@@ -75319,9 +75336,9 @@
 			}
 		},
 		"@vue/cli-shared-utils": {
-			"version": "4.5.17",
-			"resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.5.17.tgz",
-			"integrity": "sha512-VoFNdxvTW4vZu3ne+j1Mf7mU99J2SAoRVn9XPrsouTUUJablglM8DASk7Ixhsh6ymyL/W9EADQFR6Pgj8Ujjuw==",
+			"version": "4.5.18",
+			"resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.5.18.tgz",
+			"integrity": "sha512-rYX8watG/+SFmkedXMZ3hJP+26/bz80f9zG9dMUfBMqTAqIDGICDtuP4H4QXZL3PCKI/HWFCMhRWf2wO4eGEPg==",
 			"requires": {
 				"@achrinza/node-ipc": "9.2.2",
 				"@hapi/joi": "^15.0.1",
@@ -75497,7 +75514,7 @@
 				"yallist": {
 					"version": "2.1.2",
 					"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-					"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+					"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
 				}
 			}
 		},
@@ -76430,7 +76447,7 @@
 				"util": {
 					"version": "0.10.3",
 					"resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
-					"integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
+					"integrity": "sha512-5KiHfsmkqacuKjkRkdV7SsfDJ2EGiPsK92s2MhNSY0craxjTdKTtqKsJaCWp4LW33ZZ0OPUv1WO/TFvNQRiQxQ==",
 					"requires": {
 						"inherits": "2.0.1"
 					}
@@ -76592,9 +76609,9 @@
 			"integrity": "sha512-z4oo33lmnvvNRqfUe3YjDGGpqu/L2+wXBIhMtwq6oqZ+exOUAkQYM6zd2VWKF7AIlajOF8ZZuPFfryTG9iLC/w=="
 		},
 		"aws-sdk": {
-			"version": "2.1150.0",
-			"resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1150.0.tgz",
-			"integrity": "sha512-SNbVXNlFGNFVcztPk7iWnjtGL+Afm1nyidpvX2rEqYdap2Ow57njZJXvghQUici4Xhqe+BUuG+x1orlFjapo4g==",
+			"version": "2.1157.0",
+			"resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1157.0.tgz",
+			"integrity": "sha512-30t+zhCECib8uaggd0Du8ifab4vtJjgVvNKxHWTpiLa3deTnM+0K7x3pwM99zxw0gLDxAUet/oURaoPJHwk/5Q==",
 			"requires": {
 				"buffer": "4.9.2",
 				"events": "1.1.1",
@@ -76640,7 +76657,7 @@
 				"url": {
 					"version": "0.10.3",
 					"resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
-					"integrity": "sha1-Ah5NnHcF8hu/N9A861h2dAJ3TGQ=",
+					"integrity": "sha512-hzSUW2q06EqL1gKM/a+obYHLIO6ct2hwPuviqTTOcfFVc61UbfJ2Q32+uGL/HCPxKqrdGB5QUwIe7UqlDgwsOQ==",
 					"requires": {
 						"punycode": "1.3.2",
 						"querystring": "0.2.0"
@@ -76663,7 +76680,7 @@
 				"xmlbuilder": {
 					"version": "9.0.7",
 					"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
-					"integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0="
+					"integrity": "sha512-7YXTQc3P2l9+0rjaUbLwMKRhtmwg1M1eDf6nag7urC7pIPYLD9W/jmzQ4ptRSUbodw5S0jfoGTflLemQibSpeQ=="
 				}
 			}
 		},
@@ -76739,7 +76756,7 @@
 				"strip-ansi": {
 					"version": "3.0.1",
 					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-					"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+					"integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
 					"requires": {
 						"ansi-regex": "^2.0.0"
 					}
@@ -76747,7 +76764,7 @@
 				"supports-color": {
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-					"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+					"integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g=="
 				}
 			}
 		},
@@ -77311,7 +77328,7 @@
 				"strip-bom": {
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-					"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
+					"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA=="
 				},
 				"supports-color": {
 					"version": "5.5.0",
@@ -77335,7 +77352,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -77652,7 +77669,7 @@
 				"to-fast-properties": {
 					"version": "1.0.3",
 					"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
-					"integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc="
+					"integrity": "sha512-lxrWP8ejsq+7E3nNjwYmUBMAgjMTZoTI+sdBOpvNyijeDLa29LUn9QaoXAHv4+Z578hbmHHJKZknzxVtvo77og=="
 				}
 			}
 		},
@@ -78692,9 +78709,9 @@
 			}
 		},
 		"caniuse-lite": {
-			"version": "1.0.30001350",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001350.tgz",
-			"integrity": "sha512-NZBql38Pzd+rAu5SPXv+qmTWGQuFsRiemHCJCAPvkoDxWV19/xqL2YHF32fDJ9SDLdLqfax8+S0CO3ncDCp9Iw=="
+			"version": "1.0.30001357",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001357.tgz",
+			"integrity": "sha512-b+KbWHdHePp+ZpNj+RDHFChZmuN+J5EvuQUlee9jOQIUAdhv9uvAZeEtUeLAknXbkiu1uxjQ9NLp1ie894CuWg=="
 		},
 		"capital-case": {
 			"version": "1.0.4",
@@ -78914,9 +78931,9 @@
 			"integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg=="
 		},
 		"ci-info": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.1.tgz",
-			"integrity": "sha512-SXgeMX9VwDe7iFFaEWkA5AstuER9YKqy4EhHqr4DVqkwmD9rpVimkMKWHdjn30Ja45txyjhSn63lVX69eVCckg=="
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.2.tgz",
+			"integrity": "sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg=="
 		},
 		"cipher-base": {
 			"version": "1.0.4",
@@ -80888,7 +80905,7 @@
 				"slash": {
 					"version": "1.0.0",
 					"resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
-					"integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU="
+					"integrity": "sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg=="
 				}
 			}
 		},
@@ -80948,16 +80965,16 @@
 			}
 		},
 		"core-js": {
-			"version": "3.22.8",
-			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.8.tgz",
-			"integrity": "sha512-UoGQ/cfzGYIuiq6Z7vWL1HfkE9U9IZ4Ub+0XSiJTCzvbZzgPA69oDF2f+lgJ6dFFLEdjW5O6svvoKzXX23xFkA=="
+			"version": "3.23.1",
+			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.23.1.tgz",
+			"integrity": "sha512-wfMYHWi1WQjpgZNC9kAlN4ut04TM9fUTdi7CqIoTVM7yaiOUQTklOzfb+oWH3r9edQcT3F887swuVmxrV+CC8w=="
 		},
 		"core-js-compat": {
-			"version": "3.22.8",
-			"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.22.8.tgz",
-			"integrity": "sha512-pQnwg4xtuvc2Bs/5zYQPaEYYSuTxsF7LBWF0SvnVhthZo/Qe+rJpcEekrdNK5DWwDJ0gv0oI9NNX5Mppdy0ctg==",
+			"version": "3.23.1",
+			"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.23.1.tgz",
+			"integrity": "sha512-KeYrEc8t6FJsKYB2qnDwRHWaC0cJNaqlHfCpMe5q3j/W1nje3moib/txNklddLPCtGb+etcBIyJ8zuMa/LN5/A==",
 			"requires": {
-				"browserslist": "^4.20.3",
+				"browserslist": "^4.20.4",
 				"semver": "7.0.0"
 			},
 			"dependencies": {
@@ -80969,9 +80986,9 @@
 			}
 		},
 		"core-js-pure": {
-			"version": "3.22.8",
-			"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.22.8.tgz",
-			"integrity": "sha512-bOxbZIy9S5n4OVH63XaLVXZ49QKicjowDx/UELyJ68vxfCRpYsbyh/WNZNfEfAk+ekA8vSjt+gCDpvh672bc3w=="
+			"version": "3.23.1",
+			"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.23.1.tgz",
+			"integrity": "sha512-3qNgf6TqI3U1uhuSYRzJZGfFd4T+YlbyVPl+jgRiKjdZopvG4keZQwWZDAWpu1UH9nCgTpUzIV3GFawC7cJsqg=="
 		},
 		"core-util-is": {
 			"version": "1.0.3",
@@ -81243,7 +81260,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -82047,7 +82064,7 @@
 				"strip-bom": {
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-					"integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+					"integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
 					"optional": true,
 					"requires": {
 						"is-utf8": "^0.2.0"
@@ -82056,7 +82073,7 @@
 				"strip-indent": {
 					"version": "1.0.1",
 					"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
-					"integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+					"integrity": "sha512-I5iQq6aFMM62fBEAIB/hXzwJD6EEZ0xEGCX2t7oXqaKPIRgt4WruAQ285BISgdkP+HLGWyeGmNJcpIwFeRYRUA==",
 					"optional": true,
 					"requires": {
 						"get-stdin": "^4.0.1"
@@ -82065,13 +82082,13 @@
 				"trim-newlines": {
 					"version": "1.0.0",
 					"resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-					"integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
+					"integrity": "sha512-Nm4cF79FhSTzrLKGDMi3I4utBtFv8qKy4sq1enftf2gMdpqI8oVQTAfySkTz5r49giVzDj88SVZXP4CeYQwjaw==",
 					"optional": true
 				},
 				"untildify": {
 					"version": "2.1.0",
 					"resolved": "https://registry.npmjs.org/untildify/-/untildify-2.1.0.tgz",
-					"integrity": "sha1-F+soB5h/dpUunASF/DEdBqgmouA=",
+					"integrity": "sha512-sJjbDp2GodvkB0FZZcn7k6afVisqX5BZD7Yq3xp4nN2O15BBK0cLm3Vwn2vQaF7UDS0UUsrQMkkplmDI5fskig==",
 					"optional": true,
 					"requires": {
 						"os-homedir": "^1.0.0"
@@ -82748,7 +82765,7 @@
 				"yallist": {
 					"version": "2.1.2",
 					"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-					"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+					"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
 				}
 			}
 		},
@@ -82766,9 +82783,9 @@
 			}
 		},
 		"electron-to-chromium": {
-			"version": "1.4.148",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.148.tgz",
-			"integrity": "sha512-8MJk1bcQUAYkuvCyWZxaldiwoDG0E0AMzBGA6cv3WfuvJySiPgfidEPBFCRRH3cZm6SVZwo/oRlK1ehi1QNEIQ=="
+			"version": "1.4.161",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.161.tgz",
+			"integrity": "sha512-sTjBRhqh6wFodzZtc5Iu8/R95OkwaPNn7tj/TaDU5nu/5EFiQDtADGAXdR4tJcTEHlYfJpHqigzJqHvPgehP8A=="
 		},
 		"element-ui": {
 			"version": "2.15.9",
@@ -83084,150 +83101,150 @@
 			}
 		},
 		"esbuild": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.43.tgz",
-			"integrity": "sha512-Uf94+kQmy/5jsFwKWiQB4hfo/RkM9Dh7b79p8yqd1tshULdr25G2szLz631NoH3s2ujnKEKVD16RmOxvCNKRFA==",
-			"requires": {
-				"esbuild-android-64": "0.14.43",
-				"esbuild-android-arm64": "0.14.43",
-				"esbuild-darwin-64": "0.14.43",
-				"esbuild-darwin-arm64": "0.14.43",
-				"esbuild-freebsd-64": "0.14.43",
-				"esbuild-freebsd-arm64": "0.14.43",
-				"esbuild-linux-32": "0.14.43",
-				"esbuild-linux-64": "0.14.43",
-				"esbuild-linux-arm": "0.14.43",
-				"esbuild-linux-arm64": "0.14.43",
-				"esbuild-linux-mips64le": "0.14.43",
-				"esbuild-linux-ppc64le": "0.14.43",
-				"esbuild-linux-riscv64": "0.14.43",
-				"esbuild-linux-s390x": "0.14.43",
-				"esbuild-netbsd-64": "0.14.43",
-				"esbuild-openbsd-64": "0.14.43",
-				"esbuild-sunos-64": "0.14.43",
-				"esbuild-windows-32": "0.14.43",
-				"esbuild-windows-64": "0.14.43",
-				"esbuild-windows-arm64": "0.14.43"
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.46.tgz",
+			"integrity": "sha512-vdm5G1JdZBktva8dwQci/s44VbeBUg8g907xoZx77mqFZ4gU5GlMULNsdGeID+qXCXocsfYSGtE0LvqH3eiNQg==",
+			"requires": {
+				"esbuild-android-64": "0.14.46",
+				"esbuild-android-arm64": "0.14.46",
+				"esbuild-darwin-64": "0.14.46",
+				"esbuild-darwin-arm64": "0.14.46",
+				"esbuild-freebsd-64": "0.14.46",
+				"esbuild-freebsd-arm64": "0.14.46",
+				"esbuild-linux-32": "0.14.46",
+				"esbuild-linux-64": "0.14.46",
+				"esbuild-linux-arm": "0.14.46",
+				"esbuild-linux-arm64": "0.14.46",
+				"esbuild-linux-mips64le": "0.14.46",
+				"esbuild-linux-ppc64le": "0.14.46",
+				"esbuild-linux-riscv64": "0.14.46",
+				"esbuild-linux-s390x": "0.14.46",
+				"esbuild-netbsd-64": "0.14.46",
+				"esbuild-openbsd-64": "0.14.46",
+				"esbuild-sunos-64": "0.14.46",
+				"esbuild-windows-32": "0.14.46",
+				"esbuild-windows-64": "0.14.46",
+				"esbuild-windows-arm64": "0.14.46"
 			}
 		},
 		"esbuild-android-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.43.tgz",
-			"integrity": "sha512-kqFXAS72K6cNrB6RiM7YJ5lNvmWRDSlpi7ZuRZ1hu1S3w0zlwcoCxWAyM23LQUyZSs1PbjHgdbbfYAN8IGh6xg==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.46.tgz",
+			"integrity": "sha512-ZyJqwAcjNbZprs0ZAxnUAOhEhdE5kTKwz+CZuLmZYNLAPyRgBtaC8pT2PCuPifNvV8Cl3yLlrQPaOCjovoyb5g==",
 			"optional": true
 		},
 		"esbuild-android-arm64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.43.tgz",
-			"integrity": "sha512-bKS2BBFh+7XZY9rpjiHGRNA7LvWYbZWP87pLehggTG7tTaCDvj8qQGOU/OZSjCSKDYbgY7Q+oDw8RlYQ2Jt2BA==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.46.tgz",
+			"integrity": "sha512-BKcnUksvCijO9ONv6b4SikZE/OZftwJvX91XROODZGQmuwGVg97jmLDVu3lxuHdFlMNNzxh8taJ2mbCWZzH/Iw==",
 			"optional": true
 		},
 		"esbuild-darwin-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.43.tgz",
-			"integrity": "sha512-/3PSilx011ttoieRGkSZ0XV8zjBf2C9enV4ScMMbCT4dpx0mFhMOpFnCHkOK0pWGB8LklykFyHrWk2z6DENVUg==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.46.tgz",
+			"integrity": "sha512-/ss2kO92sUJ9/1nHnMb3+oab8w6dyqKrMtPMvSYJ9KZIYGAZxz/WYxfFprY7Xk+ZxWnnlASSyZlG+If1nVmFYg==",
 			"optional": true
 		},
 		"esbuild-darwin-arm64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.43.tgz",
-			"integrity": "sha512-1HyFUKs8DMCBOvw1Qxpr5Vv/ThNcVIFb5xgXWK3pyT40WPvgYIiRTwJCvNs4l8i5qWF8/CK5bQxJVDjQvtv0Yw==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.46.tgz",
+			"integrity": "sha512-WX0JOaEFf6t+rIjXO6THsf/0fhQAt2Zb0/PSYlvXnuQQAmOmFAfPsuRNocp5ME0NGaUqZd4FxqqmLEVK3RzPAg==",
 			"optional": true
 		},
 		"esbuild-freebsd-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.43.tgz",
-			"integrity": "sha512-FNWc05TPHYgaXjbPZO5/rJKSBslfG6BeMSs8GhwnqAKP56eEhvmzwnIz1QcC9cRVyO+IKqWNfmHFkCa1WJTULA==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.46.tgz",
+			"integrity": "sha512-o+ozPFuHRCAGCVWU2bLurOUgVkT0jcPEu082VBUY2Q/yLf+B+/3nXzh4Fjp5O21tOvJRTn7hUVydG9j5+vYE6A==",
 			"optional": true
 		},
 		"esbuild-freebsd-arm64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.43.tgz",
-			"integrity": "sha512-amrYopclz3VohqisOPR6hA3GOWA3LZC1WDLnp21RhNmoERmJ/vLnOpnrG2P/Zao+/erKTCUqmrCIPVtj58DRoA==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.46.tgz",
+			"integrity": "sha512-9zicZ0X43WDKz3sjNfcqYO38xbfJpSWYXB+FxvYYkmBwGA52K0SAu4oKuTTLi8od8X2IIo1x5C5TUNvKDSVJww==",
 			"optional": true
 		},
 		"esbuild-linux-32": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.43.tgz",
-			"integrity": "sha512-KoxoEra+9O3AKVvgDFvDkiuddCds6q71owSQEYwjtqRV7RwbPzKxJa6+uyzUulHcyGVq0g15K0oKG5CFBcvYDw==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.46.tgz",
+			"integrity": "sha512-ZnTpZMVb0VGvL99R5eh4OrJwbUyvpM6M88VAMuHP4LvFjuvZrhgefjKqEGuWZZW7JRnAjKqjXLjWdhdSjwMFnQ==",
 			"optional": true
 		},
 		"esbuild-linux-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.43.tgz",
-			"integrity": "sha512-EwINwGMyiJMgBby5/SbMqKcUhS5AYAZ2CpEBzSowsJPNBJEdhkCTtEjk757TN/wxgbu3QklqDM6KghY660QCUw==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.46.tgz",
+			"integrity": "sha512-ECCRRZtX6l4ubeVhHhiVoK/uYAkvzNqfmR4gP4N/9H9RPu+b8YCcN4bQGp7xCuYIV6Xd41WpOMyO+xpcQvjtQQ==",
 			"optional": true
 		},
 		"esbuild-linux-arm": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.43.tgz",
-			"integrity": "sha512-e6YzQUoDxxtyamuF12eVzzRC7bbEFSZohJ6igQB9tBqnNmIQY3fI6Cns3z2wxtbZ3f2o6idkD2fQnlvs2902Dg==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.46.tgz",
+			"integrity": "sha512-RvTJEi4vj13c5FP9YPp+8Y6x6HK1E7uSqfy3y9UoeaNAzNZWA7fN1U3hQjTL/dy5zTJH5KE64mrt5k5+he+CQA==",
 			"optional": true
 		},
 		"esbuild-linux-arm64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.43.tgz",
-			"integrity": "sha512-UlSpjMWllAc70zYbHxWuDS3FJytyuR/gHJYBr8BICcTNb/TSOYVBg6U7b3jZ3mILTrgzwJUHwhEwK18FZDouUQ==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.46.tgz",
+			"integrity": "sha512-HX0TXCHyI0NEWG4jg8LlW1PbZQbnz+PUH56yjx996cgM5pC90u32drKs/tyJiyyQmNk9OXOogjKw7LEdp/Qc1w==",
 			"optional": true
 		},
 		"esbuild-linux-mips64le": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.43.tgz",
-			"integrity": "sha512-f+v8cInPEL1/SDP//CfSYzcDNgE4CY3xgDV81DWm3KAPWzhvxARrKxB1Pstf5mB56yAslJDxu7ryBUPX207EZA==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.46.tgz",
+			"integrity": "sha512-jnb2NDwGqJUVmxn1v0f7seNdDm0nRNWHP9Z3MrWAGnBCdnnDlsjqRFDnbKoaQvWONEa+rOOr/giK+VL0hgQExA==",
 			"optional": true
 		},
 		"esbuild-linux-ppc64le": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.43.tgz",
-			"integrity": "sha512-5wZYMDGAL/K2pqkdIsW+I4IR41kyfHr/QshJcNpUfK3RjB3VQcPWOaZmc+74rm4ZjVirYrtz+jWw0SgxtxRanA==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.46.tgz",
+			"integrity": "sha512-uu3JTQUrwwauKY9z8yq5MnDyOlT3f2DNOzBcYz4dB78HqwEqilCsifoBGd0WcbED5n57dc59X+LZMTZ8Ose44w==",
 			"optional": true
 		},
 		"esbuild-linux-riscv64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.43.tgz",
-			"integrity": "sha512-lYcAOUxp85hC7lSjycJUVSmj4/9oEfSyXjb/ua9bNl8afonaduuqtw7hvKMoKuYnVwOCDw4RSfKpcnIRDWq+Bw==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.46.tgz",
+			"integrity": "sha512-OB29r1EG44ZY34JnXCRERxo7k4pRKoQdaoRg2HIeCavatsXZwW4LCakpLnMQ72vXT1HtpBUABEjHkKkn5JyrUg==",
 			"optional": true
 		},
 		"esbuild-linux-s390x": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.43.tgz",
-			"integrity": "sha512-27e43ZhHvhFE4nM7HqtUbMRu37I/4eNSUbb8FGZWszV+uLzMIsHDwLoBiJmw7G9N+hrehNPeQ4F5Ujad0DrUKQ==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.46.tgz",
+			"integrity": "sha512-XQ/U9TueMSGYyPTKyZsJVraiuvxhwCDIMn/QwFXCRCJ6H/Cy/Rq33u9qhpeSziinHKfzJROGx5A8mQY6aYamdQ==",
 			"optional": true
 		},
 		"esbuild-netbsd-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.43.tgz",
-			"integrity": "sha512-2mH4QF6hHBn5zzAfxEI/2eBC0mspVsZ6UVo821LpAJKMvLJPBk3XJO5xwg7paDqSqpl7p6IRrAenW999AEfJhQ==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.46.tgz",
+			"integrity": "sha512-i15BwqHaAIFp1vBJkitAbHtwXcLk9TdHs/Ia1xGIAutQYXSJNPLM3Z4B4hyfHNEFl2yBqBIYpglMohv2ClNdOQ==",
 			"optional": true
 		},
 		"esbuild-openbsd-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.43.tgz",
-			"integrity": "sha512-ZhQpiZjvqCqO8jKdGp9+8k9E/EHSA+zIWOg+grwZasI9RoblqJ1QiZqqi7jfd6ZrrG1UFBNGe4m0NFxCFbMVbg==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.46.tgz",
+			"integrity": "sha512-XwOIFCE140Y/PvjrwjFfa/QLWBuvhR1mPCOa35mKx02jt++wPNgf0qhn6HfdVC3vQe7R46RwTp4q2cp99fepEg==",
 			"optional": true
 		},
 		"esbuild-sunos-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.43.tgz",
-			"integrity": "sha512-DgxSi9DaHReL9gYuul2rrQCAapgnCJkh3LSHPKsY26zytYppG0HgkgVF80zjIlvEsUbGBP/GHQzBtrezj/Zq1Q==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.46.tgz",
+			"integrity": "sha512-+kV3JnmfdxBVpHyFvuGXWtu6tXxXApOLPkSrVkMJf6+ns/3PLtPndpzwCzHjD+qYUEk8ln4MA+ufQ2qmjW5mZg==",
 			"optional": true
 		},
 		"esbuild-windows-32": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.43.tgz",
-			"integrity": "sha512-Ih3+2O5oExiqm0mY6YYE5dR0o8+AspccQ3vIAtRodwFvhuyGLjb0Hbmzun/F3Lw19nuhPMu3sW2fqIJ5xBxByw==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.46.tgz",
+			"integrity": "sha512-gzGC1Q11B/Bo5A2EX4N22oigWmhL7Z0eDyc8kbSoJjqSrGQuRE7B0uMpluO+q0O/gZ1S3zdw+M4PCWlqOIeXLA==",
 			"optional": true
 		},
 		"esbuild-windows-64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.43.tgz",
-			"integrity": "sha512-8NsuNfI8xwFuJbrCuI+aBqNTYkrWErejFO5aYM+yHqyHuL8mmepLS9EPzAzk8rvfaJrhN0+RvKWAcymViHOKEw==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.46.tgz",
+			"integrity": "sha512-Do2daaskfOjmCB7o3ygz6fD3K6SPjZLERiZLktzHz2oUCwsebKu/gmop0+j/XdrVIXC32wFzHzDS+9CTu9OShw==",
 			"optional": true
 		},
 		"esbuild-windows-arm64": {
-			"version": "0.14.43",
-			"resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.43.tgz",
-			"integrity": "sha512-7ZlD7bo++kVRblJEoG+cepljkfP8bfuTPz5fIXzptwnPaFwGS6ahvfoYzY7WCf5v/1nX2X02HDraVItTgbHnKw==",
+			"version": "0.14.46",
+			"resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.46.tgz",
+			"integrity": "sha512-VEzMy6bM60/HT/URTDElyhfi2Pk0quCCrEhRlI4MRno/AIqYUGw0rZwkPl6PeoqVI6BgoBHGY576GWTiPmshCA==",
 			"optional": true
 		},
 		"escalade": {
@@ -83292,7 +83309,7 @@
 				"type-check": {
 					"version": "0.3.2",
 					"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-					"integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+					"integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
 					"requires": {
 						"prelude-ls": "~1.1.2"
 					}
@@ -83523,9 +83540,9 @@
 					}
 				},
 				"eslint": {
-					"version": "8.17.0",
-					"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.17.0.tgz",
-					"integrity": "sha512-gq0m0BTJfci60Fz4nczYxNAlED+sMcihltndR8t9t1evnU/azx53x3t2UHXC/uRjcbvRw/XctpaNygSTcQD+Iw==",
+					"version": "8.18.0",
+					"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.18.0.tgz",
+					"integrity": "sha512-As1EfFMVk7Xc6/CvhssHUjsAQSkpfXvUGMFC3ce8JDe6WvqCgRrLOBQbVpsBFr1X1V+RACOadnzVvcUS5ni2bA==",
 					"requires": {
 						"@eslint/eslintrc": "^1.3.0",
 						"@humanwhocodes/config-array": "^0.9.2",
@@ -83826,9 +83843,9 @@
 			}
 		},
 		"eslint-plugin-n8n-nodes-base": {
-			"version": "1.0.35",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-n8n-nodes-base/-/eslint-plugin-n8n-nodes-base-1.0.35.tgz",
-			"integrity": "sha512-E2tq2n27GuZRFjKr7BW0AR7qhmqPyE0+8HCfnN0ceIpOR5vZj3j+EgIJFPl+tK8SNznrMmpNF44l9HHTsoqVrA==",
+			"version": "1.0.43",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-n8n-nodes-base/-/eslint-plugin-n8n-nodes-base-1.0.43.tgz",
+			"integrity": "sha512-8r2CciEITucOR8dXr4FQLqRW8/6wSak+dDtE8NAzR1dNLTjxmIe1aBUAIhS0Hi3x+Mfj22z6wfqz+ZDULQtd9Q==",
 			"requires": {
 				"@typescript-eslint/utils": "^5.17.0",
 				"camel-case": "^4.1.2",
@@ -84941,7 +84958,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -84981,9 +84998,9 @@
 			"integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg=="
 		},
 		"flow-parser": {
-			"version": "0.179.0",
-			"resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.179.0.tgz",
-			"integrity": "sha512-M4dEgnvsGFa1lUTK05RFW+cwle8tkTHioFm6gGWdeGpDJjjhmvyaN8vLIqb8sAHI05TQxARsnUC3U2chzQP1Dw=="
+			"version": "0.180.0",
+			"resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.180.0.tgz",
+			"integrity": "sha512-kkzsuGAhckWgn/G+JfCyEa6BYslGrjlH4CJL0LZhdn9of9ukvi7SzVQSFsrEhuhh/zQUghfUEoaeZy1wjQXpUg=="
 		},
 		"flush-write-stream": {
 			"version": "1.1.1",
@@ -86660,7 +86677,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -86811,7 +86828,7 @@
 				"yallist": {
 					"version": "2.1.2",
 					"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-					"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+					"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
 				}
 			}
 		},
@@ -87197,7 +87214,7 @@
 				"string-width": {
 					"version": "1.0.2",
 					"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-					"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+					"integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==",
 					"requires": {
 						"code-point-at": "^1.0.0",
 						"is-fullwidth-code-point": "^1.0.0",
@@ -87207,7 +87224,7 @@
 				"strip-ansi": {
 					"version": "3.0.1",
 					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-					"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+					"integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
 					"requires": {
 						"ansi-regex": "^2.0.0"
 					}
@@ -87215,7 +87232,7 @@
 				"strip-bom": {
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-					"integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+					"integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
 					"requires": {
 						"is-utf8": "^0.2.0"
 					}
@@ -87223,12 +87240,12 @@
 				"which-module": {
 					"version": "1.0.0",
 					"resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
-					"integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8="
+					"integrity": "sha512-F6+WgncZi/mJDrammbTuHe1q0R5hOXv/mBaiNA2TCNT/LTHusX0V+CJnj9XT8ki5ln2UZyyddDgHfCzyrOH7MQ=="
 				},
 				"wrap-ansi": {
 					"version": "2.1.0",
 					"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
-					"integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+					"integrity": "sha512-vAaEaDM946gbNpH5pLVNR+vX2ht6n0Bt3GXwVB1AuAqZosOvHNF3P7wDnh8KLkSqgUh0uh77le7Owgoz+Z9XBw==",
 					"requires": {
 						"string-width": "^1.0.1",
 						"strip-ansi": "^3.0.1"
@@ -87372,7 +87389,7 @@
 				"strip-ansi": {
 					"version": "4.0.0",
 					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-					"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+					"integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
 					"requires": {
 						"ansi-regex": "^3.0.0"
 					}
@@ -87900,7 +87917,7 @@
 				"upper-case": {
 					"version": "1.1.3",
 					"resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
-					"integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg="
+					"integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA=="
 				}
 			}
 		},
@@ -89063,9 +89080,9 @@
 			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
 		},
 		"iso-639-1": {
-			"version": "2.1.14",
-			"resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-2.1.14.tgz",
-			"integrity": "sha512-nekI+mmtSpYySPXIXJtWhv/s+06nAU9wQzq4QPu3YSEMmjnkOoippPY+MEdqDP0Pie8/LsOFEuPbUHslLanDag=="
+			"version": "2.1.15",
+			"resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-2.1.15.tgz",
+			"integrity": "sha512-7c7mBznZu2ktfvyT582E2msM+Udc1EjOyhVRE/0ZsjD9LBtWSm23h3PtiRh2a35XoUsTQQjJXaJzuLjXsOdFDg=="
 		},
 		"isobject": {
 			"version": "3.0.1",
@@ -90682,7 +90699,7 @@
 				"strip-bom": {
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-					"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
+					"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA=="
 				},
 				"supports-color": {
 					"version": "5.5.0",
@@ -90706,7 +90723,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -90725,7 +90742,7 @@
 				"tr46": {
 					"version": "1.0.1",
 					"resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
-					"integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
+					"integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
 					"requires": {
 						"punycode": "^2.1.0"
 					}
@@ -90733,7 +90750,7 @@
 				"type-check": {
 					"version": "0.3.2",
 					"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-					"integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+					"integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
 					"requires": {
 						"prelude-ls": "~1.1.2"
 					}
@@ -92190,7 +92207,7 @@
 						"string-length": {
 							"version": "2.0.0",
 							"resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
-							"integrity": "sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=",
+							"integrity": "sha512-Qka42GGrS8Mm3SZ+7cH8UXiIWI867/b/Z/feQSpQx/rbfB8UGknGEZVaUQMOUVj+soY6NpWAxily63HI1OckVQ==",
 							"requires": {
 								"astral-regex": "^1.0.0",
 								"strip-ansi": "^4.0.0"
@@ -92199,7 +92216,7 @@
 						"strip-ansi": {
 							"version": "4.0.0",
 							"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-							"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+							"integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
 							"requires": {
 								"ansi-regex": "^3.0.0"
 							}
@@ -92269,7 +92286,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -92578,7 +92595,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -92727,7 +92744,7 @@
 				"strip-json-comments": {
 					"version": "1.0.4",
 					"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz",
-					"integrity": "sha1-HhX7ysl9Pumb8tc7TGVrCCu6+5E="
+					"integrity": "sha512-AOPG8EBc5wAikaG1/7uFCNFJwnKOuQwFTpYBdTW6OvWHeZBQBrAA/amefHGrEiOnCPcLFZK6FUPtWVKpQVIRgg=="
 				}
 			}
 		},
@@ -93413,9 +93430,9 @@
 			}
 		},
 		"lit": {
-			"version": "2.2.5",
-			"resolved": "https://registry.npmjs.org/lit/-/lit-2.2.5.tgz",
-			"integrity": "sha512-Ln463c0xJZfzVxBcHddNvFQQ8Z22NK7KgNmrzwFF1iESHUud412RRExzepj18wpTbusgwoTnOYuoTpo9uyNBaQ==",
+			"version": "2.2.6",
+			"resolved": "https://registry.npmjs.org/lit/-/lit-2.2.6.tgz",
+			"integrity": "sha512-K2vkeGABfSJSfkhqHy86ujchJs3NR9nW1bEEiV+bXDkbiQ60Tv5GUausYN2mXigZn8lC1qXuc46ArQRKYmumZw==",
 			"requires": {
 				"@lit/reactive-element": "^1.3.0",
 				"lit-element": "^3.2.0",
@@ -93432,9 +93449,9 @@
 			}
 		},
 		"lit-html": {
-			"version": "2.2.5",
-			"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.5.tgz",
-			"integrity": "sha512-e56Y9V+RNA+SGYsWP2DGb/wad5Ccd3xUZYjmcmbeZcnc0wP4zFQRXeXn7W3bbfBekmHDK2dOnuYNYkg0bQjh/w==",
+			"version": "2.2.6",
+			"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.6.tgz",
+			"integrity": "sha512-xOKsPmq/RAKJ6dUeOxhmOYFjcjf0Q7aSdfBJgdJkOfCUnkmmJPxNrlZpRBeVe1Gg50oYWMlgm6ccAE/SpJgSdw==",
 			"requires": {
 				"@types/trusted-types": "^2.0.2"
 			}
@@ -93971,7 +93988,7 @@
 				"yallist": {
 					"version": "2.1.2",
 					"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-					"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+					"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
 				}
 			}
 		},
@@ -94176,9 +94193,9 @@
 			}
 		},
 		"mappersmith": {
-			"version": "2.38.1",
-			"resolved": "https://registry.npmjs.org/mappersmith/-/mappersmith-2.38.1.tgz",
-			"integrity": "sha512-ecZ+YyzBK7r3tC8MTaGo5tySHPhB6f9jdxN706Tux6dMlcE2fgwiBM/bf/+Sz5m2yKlTq5ntiahz7xSPgurD6w=="
+			"version": "2.39.1",
+			"resolved": "https://registry.npmjs.org/mappersmith/-/mappersmith-2.39.1.tgz",
+			"integrity": "sha512-f0QbIwG7CrwhIu7CZts2BsXyMhhZvmEeEtlHC+At23h4//mFVk0cRNZI+v21lzvvWAIBeE55AwEER7koi8iz/A=="
 		},
 		"markdown-escapes": {
 			"version": "1.0.4",
@@ -94375,7 +94392,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -94460,11 +94477,11 @@
 			"integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw=="
 		},
 		"memfs": {
-			"version": "3.4.4",
-			"resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.4.tgz",
-			"integrity": "sha512-W4gHNUE++1oSJVn8Y68jPXi+mkx3fXR5ITE/Ubz6EQ3xRpCN5k2CQ4AUR8094Z7211F876TyoBACGsIveqgiGA==",
+			"version": "3.4.6",
+			"resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.6.tgz",
+			"integrity": "sha512-rH9mjopto6Wkr7RFuH9l9dk3qb2XGOcYKr7xMhaYqfzuJqOqhRrcFvfD7JMuPj6SLmPreh5+6eAuv36NFAU+Mw==",
 			"requires": {
-				"fs-monkey": "1.0.3"
+				"fs-monkey": "^1.0.3"
 			}
 		},
 		"memoizerific": {
@@ -94740,9 +94757,9 @@
 			},
 			"dependencies": {
 				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+					"version": "3.3.3",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+					"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 					"requires": {
 						"yallist": "^4.0.0"
 					}
@@ -94767,9 +94784,9 @@
 			},
 			"dependencies": {
 				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+					"version": "3.3.3",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+					"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 					"optional": true,
 					"requires": {
 						"yallist": "^4.0.0"
@@ -94802,9 +94819,9 @@
 			},
 			"dependencies": {
 				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+					"version": "3.3.3",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+					"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 					"requires": {
 						"yallist": "^4.0.0"
 					}
@@ -94825,9 +94842,9 @@
 			},
 			"dependencies": {
 				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+					"version": "3.3.3",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+					"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 					"requires": {
 						"yallist": "^4.0.0"
 					}
@@ -94849,9 +94866,9 @@
 			},
 			"dependencies": {
 				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+					"version": "3.3.3",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+					"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 					"optional": true,
 					"requires": {
 						"yallist": "^4.0.0"
@@ -95253,7 +95270,7 @@
 				"yallist": {
 					"version": "2.1.2",
 					"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-					"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+					"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
 				}
 			}
 		},
@@ -95980,7 +95997,7 @@
 				"string_decoder": {
 					"version": "0.10.31",
 					"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-					"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+					"integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ=="
 				}
 			}
 		},
@@ -98296,9 +98313,9 @@
 			"integrity": "sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg=="
 		},
 		"prettier": {
-			"version": "2.6.2",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
-			"integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew=="
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+			"integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g=="
 		},
 		"prettier-linter-helpers": {
 			"version": "1.0.0",
@@ -99244,7 +99261,7 @@
 				"strip-json-comments": {
 					"version": "2.0.1",
 					"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-					"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
+					"integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ=="
 				}
 			}
 		},
@@ -99658,11 +99675,11 @@
 			}
 		},
 		"registry-auth-token": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
-			"integrity": "sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==",
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.2.tgz",
+			"integrity": "sha512-PC5ZysNb42zpFME6D/XlIgtNGdTl8bBOCw90xQLVMpzuuubJKYDWFAEuUNc+Cn8Z8724tg2SDhDRrkVEsqfDMg==",
 			"requires": {
-				"rc": "^1.2.8"
+				"rc": "1.2.8"
 			}
 		},
 		"registry-url": {
@@ -99796,7 +99813,7 @@
 				"source-map": {
 					"version": "0.5.7",
 					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-					"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+					"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
 				}
 			}
 		},
@@ -99826,7 +99843,7 @@
 				"trim": {
 					"version": "0.0.1",
 					"resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
-					"integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0="
+					"integrity": "sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ=="
 				}
 			}
 		},
@@ -99897,7 +99914,7 @@
 				"strip-ansi": {
 					"version": "3.0.1",
 					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-					"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+					"integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
 					"requires": {
 						"ansi-regex": "^2.0.0"
 					}
@@ -100276,9 +100293,9 @@
 			"integrity": "sha512-fJhQQI5tLrQvYIYFpOnFinzv9dwmR7hRnUz1XqP3OJ1jIweTNOd6aTO4jwQSgcBSFUB+/KHJxuGneime+FdzOw=="
 		},
 		"rollup": {
-			"version": "2.75.6",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.6.tgz",
-			"integrity": "sha512-OEf0TgpC9vU6WGROJIk1JA3LR5vk/yvqlzxqdrE2CzzXnqKXNzbAwlWUXis8RS3ZPe7LAq+YUxsRa0l3r27MLA==",
+			"version": "2.75.7",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.7.tgz",
+			"integrity": "sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==",
 			"requires": {
 				"fsevents": "~2.3.2"
 			}
@@ -100508,7 +100525,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -100561,9 +100578,9 @@
 			}
 		},
 		"sass": {
-			"version": "1.52.2",
-			"resolved": "https://registry.npmjs.org/sass/-/sass-1.52.2.tgz",
-			"integrity": "sha512-mfHB2VSeFS7sZlPv9YohB9GB7yWIgQNTGniQwfQ04EoQN0wsQEv7SwpCwy/x48Af+Z3vDeFXz+iuXM3HK/phZQ==",
+			"version": "1.52.3",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.52.3.tgz",
+			"integrity": "sha512-LNNPJ9lafx+j1ArtA7GyEJm9eawXN8KlA1+5dF6IZyoONg1Tyo/g+muOsENWJH/2Q1FHbbV4UwliU0cXMa/VIA==",
 			"requires": {
 				"chokidar": ">=3.0.0 <4.0.0",
 				"immutable": "^4.0.0",
@@ -100836,7 +100853,7 @@
 				"statuses": {
 					"version": "1.5.0",
 					"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-					"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+					"integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA=="
 				}
 			}
 		},
@@ -101008,29 +101025,29 @@
 			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
 		},
 		"simple-git": {
-			"version": "3.7.1",
-			"resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.7.1.tgz",
-			"integrity": "sha512-+Osjtsumbtew2y9to0pOYjNzSIr4NkKGBg7Po5SUtjQhaJf2QBmiTX/9E9cv9rmc7oUiSGFIB9e7ys5ibnT9+A==",
+			"version": "3.8.0",
+			"resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.8.0.tgz",
+			"integrity": "sha512-nbR1PufcbvCaW90CiAXC1mM7OnEqLzjSOnySnq7Sd2kcVG6GxSa+DhxhFmCgxLv4kWCKmZagkCZSjfNAQTZwaw==",
 			"requires": {
 				"@kwsites/file-exists": "^1.1.1",
 				"@kwsites/promise-deferred": "^1.1.1",
-				"debug": "^4.3.3"
+				"debug": "^4.3.4"
 			}
 		},
 		"simple-lru-cache": {
 			"version": "0.0.2",
 			"resolved": "https://registry.npmjs.org/simple-lru-cache/-/simple-lru-cache-0.0.2.tgz",
-			"integrity": "sha1-1ZzDoZPBpdAyD4Tucy9uRxPlEd0="
+			"integrity": "sha512-uEv/AFO0ADI7d99OHDmh1QfYzQk/izT1vCmu/riQfh7qjBVUUgRT87E5s5h7CxWCA/+YoZerykpEthzVrW3LIw=="
 		},
 		"simple-mock": {
 			"version": "0.8.0",
 			"resolved": "https://registry.npmjs.org/simple-mock/-/simple-mock-0.8.0.tgz",
-			"integrity": "sha1-ScmiI/pu6o4sT9aUj+gwDNillPM="
+			"integrity": "sha512-rakKnocwPH9KPjOsmtMwJwKDmZIYyDeCz0bQYAdeB9h27SMpS5BS+0hDSzhAlvmzA3o7I9ck2NgqjcHpjIcwmA=="
 		},
 		"simple-swizzle": {
 			"version": "0.2.2",
 			"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-			"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+			"integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
 			"requires": {
 				"is-arrayish": "^0.3.1"
 			},
@@ -101397,7 +101414,7 @@
 		"sort-keys": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
-			"integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
+			"integrity": "sha512-vzn8aSqKgytVik0iwdBEi+zevbTYZogewTUM6dtpmGwEcdzbub/TX4bCzRhebDCRC3QzXgJsLRKB2V/Oof7HXg==",
 			"requires": {
 				"is-plain-obj": "^1.0.0"
 			},
@@ -101465,7 +101482,7 @@
 		"sparse-bitfield": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
-			"integrity": "sha1-/0rm5oZWBWuks+eSqzM004JzyhE=",
+			"integrity": "sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==",
 			"optional": true,
 			"requires": {
 				"memory-pager": "^1.0.2"
@@ -101474,7 +101491,7 @@
 		"spawn-command": {
 			"version": "0.0.2-1",
 			"resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
-			"integrity": "sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A="
+			"integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg=="
 		},
 		"spdx-correct": {
 			"version": "3.1.1",
@@ -101767,9 +101784,9 @@
 					}
 				},
 				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+					"version": "3.3.3",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+					"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 					"requires": {
 						"yallist": "^4.0.0"
 					}
@@ -101936,14 +101953,14 @@
 			}
 		},
 		"ssh2": {
-			"version": "1.10.0",
-			"resolved": "https://registry.npmjs.org/ssh2/-/ssh2-1.10.0.tgz",
-			"integrity": "sha512-OnKAAmf4j8wCRrXXZv3Tp5lCZkLJZtgZbn45ELiShCg27djDQ3XFGvIzuGsIsf4hdHslP+VdhA9BhUQdTdfd9w==",
+			"version": "1.11.0",
+			"resolved": "https://registry.npmjs.org/ssh2/-/ssh2-1.11.0.tgz",
+			"integrity": "sha512-nfg0wZWGSsfUe/IBJkXVll3PEZ//YH2guww+mP88gTpuSU4FtZN7zu9JoeTGOyCNx2dTDtT9fOpWwlzyj4uOOw==",
 			"requires": {
 				"asn1": "^0.2.4",
 				"bcrypt-pbkdf": "^1.0.2",
 				"cpu-features": "~0.0.4",
-				"nan": "^2.15.0"
+				"nan": "^2.16.0"
 			}
 		},
 		"ssh2-sftp-client": {
@@ -102023,9 +102040,9 @@
 			},
 			"dependencies": {
 				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+					"version": "3.3.3",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+					"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 					"requires": {
 						"yallist": "^4.0.0"
 					}
@@ -102045,7 +102062,7 @@
 		"stack-trace": {
 			"version": "0.0.10",
 			"resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
-			"integrity": "sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA="
+			"integrity": "sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg=="
 		},
 		"stack-utils": {
 			"version": "2.0.5",
@@ -102155,7 +102172,7 @@
 		"stealthy-require": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
-			"integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks="
+			"integrity": "sha512-ZnWpYnYugiOVEY5GkcuJK1io5V8QmNYChG62gSit9pQVGErXtrKuPC55ITaVSukmMta5qpMU7vqLt2Lnni4f/g=="
 		},
 		"store2": {
 			"version": "2.13.2",
@@ -102163,9 +102180,9 @@
 			"integrity": "sha512-CMtO2Uneg3SAz/d6fZ/6qbqqQHi2ynq6/KzMD/26gTkiEShCcpqFfTHgOxsE0egAq6SX3FmN4CeSqn8BzXQkJg=="
 		},
 		"storybook-addon-designs": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/storybook-addon-designs/-/storybook-addon-designs-6.2.1.tgz",
-			"integrity": "sha512-ihsscab8185HnxqTNZlM4TfrCPVsO7AimVA8BapuqT/sfZQF9m5H9C0plT3kbECdIMh2cmzMBF1Tc9ckWRgpWg==",
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/storybook-addon-designs/-/storybook-addon-designs-6.3.1.tgz",
+			"integrity": "sha512-QCHZp4KuUikOq52MPiMfU8QifYTfhHar5vWlbcfkFDz1YrgGMy+QAEt5Y3Vdnffl4GKSK1lAsLuvTuzqTBRvnw==",
 			"requires": {
 				"@figspec/react": "^1.0.0"
 			}
@@ -102301,7 +102318,7 @@
 		"strict-uri-encode": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-			"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
+			"integrity": "sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ=="
 		},
 		"string_decoder": {
 			"version": "1.3.0",
@@ -102620,7 +102637,7 @@
 		"sver-compat": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/sver-compat/-/sver-compat-1.5.0.tgz",
-			"integrity": "sha1-PPh9/rTQe0o/FIJ7wYaz/QxkXNg=",
+			"integrity": "sha512-aFTHfmjwizMNlNE6dsGmoAM4lHjL0CyiobWaFiXWSlD7cIxshW422Nb8KbXCmR6z+0ZEPY+daXJrDyh/vuwTyg==",
 			"requires": {
 				"es6-iterator": "^2.0.1",
 				"es6-symbol": "^3.1.1"
@@ -102629,7 +102646,7 @@
 		"svg-tags": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
-			"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q="
+			"integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA=="
 		},
 		"svgo": {
 			"version": "1.3.2",
@@ -102834,7 +102851,7 @@
 		"tapable": {
 			"version": "0.1.10",
 			"resolved": "https://registry.npmjs.org/tapable/-/tapable-0.1.10.tgz",
-			"integrity": "sha1-KcNXB8K3DlDQdIK10gLo7URtr9Q="
+			"integrity": "sha512-jX8Et4hHg57mug1/079yitEKWGB3LCwoxByLsNim89LABq8NqgiX+6iYVOsq0vX8uJHkU+DZ5fnq95f800bEsQ=="
 		},
 		"tar": {
 			"version": "4.4.19",
@@ -103197,9 +103214,9 @@
 					}
 				},
 				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+					"version": "3.3.3",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.3.tgz",
+					"integrity": "sha512-N0BOsdFAlNRfmwMhjAsLVWOk7Ljmeb39iqFlsV1At+jqRhSUP9yeof8FyJu4imaJiSUp8vQebWD/guZwGQC8iA==",
 					"requires": {
 						"yallist": "^4.0.0"
 					}
@@ -103284,9 +103301,9 @@
 					}
 				},
 				"terser": {
-					"version": "5.14.0",
-					"resolved": "https://registry.npmjs.org/terser/-/terser-5.14.0.tgz",
-					"integrity": "sha512-JC6qfIEkPBd9j1SMO3Pfn+A6w2kQV54tv+ABQLgZr7dA3k/DL/OBoYSWxzVpZev3J+bUHXfr55L8Mox7AaNo6g==",
+					"version": "5.14.1",
+					"resolved": "https://registry.npmjs.org/terser/-/terser-5.14.1.tgz",
+					"integrity": "sha512-+ahUAE+iheqBTDxXhTisdA8hgvbEG1hHOQ9xmNjeUJSoi6DU/gMrKNcfZjHkyY6Alnuyc+ikYJaxxfHkT3+WuQ==",
 					"requires": {
 						"@jridgewell/source-map": "^0.3.2",
 						"acorn": "^8.5.0",
@@ -103330,7 +103347,7 @@
 		"text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-			"integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
+			"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
 		},
 		"thenify": {
 			"version": "3.3.1",
@@ -103458,7 +103475,7 @@
 		"time-stamp": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz",
-			"integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM="
+			"integrity": "sha512-gLCeArryy2yNTRzTGKbZbloctj64jkZ57hj5zdraXue6aFgd6PmvVtEyiUU+hvU0v7q08oVv8r8ev0tRo6bvgw=="
 		},
 		"timeago.js": {
 			"version": "4.0.2",
@@ -103476,7 +103493,7 @@
 		"timsort": {
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
-			"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
+			"integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A=="
 		},
 		"tinycolor2": {
 			"version": "1.4.2",
@@ -103489,9 +103506,9 @@
 			"integrity": "sha512-2IfcQh7CP46XGWGGbdyO4pjcKqsmVqFAPcXfPxcPXmOWt9cYkTP9HcDmGgsfijYoAEc4z9qcpM/BaBz46Y9/CQ=="
 		},
 		"tinyspy": {
-			"version": "0.3.2",
-			"resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-0.3.2.tgz",
-			"integrity": "sha512-2+40EP4D3sFYy42UkgkFFB+kiX2Tg3URG/lVvAZFfLxgGpnWl5qQJuBw1gaLttq8UOS+2p3C0WrhJnQigLTT2Q=="
+			"version": "0.3.3",
+			"resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-0.3.3.tgz",
+			"integrity": "sha512-gRiUR8fuhUf0W9lzojPf1N1euJYA30ISebSfgca8z76FOvXtVXqd5ojEIaKLWbDQhAaC3ibxZIjqbyi4ybjcTw=="
 		},
 		"title-case": {
 			"version": "3.0.3",
@@ -103547,7 +103564,7 @@
 		"to-absolute-glob": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",
-			"integrity": "sha1-GGX0PZ50sIItufFFt4z/fQ98hJs=",
+			"integrity": "sha512-rtwLUQEwT8ZeKQbyFJyomBRYXyE16U5VKuy0ftxLMK/PZb2fkOsg5r9kHdauuVDbsNdIBoC/HCthpidamQFXYA==",
 			"requires": {
 				"is-absolute": "^1.0.0",
 				"is-negated-glob": "^1.0.0"
@@ -103556,12 +103573,12 @@
 		"to-arraybuffer": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
-			"integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M="
+			"integrity": "sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA=="
 		},
 		"to-fast-properties": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-			"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+			"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
 		},
 		"to-object-path": {
 			"version": "0.3.0",
@@ -103619,7 +103636,7 @@
 		"to-through": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/to-through/-/to-through-2.0.0.tgz",
-			"integrity": "sha1-/JKtq6ByZHvAtn1rA2ZKoZUJOvY=",
+			"integrity": "sha512-+QIz37Ly7acM4EMdw2PRN389OneM5+d844tirkGp4dPKzI5OE72V9OsbFp+CIYJDahZ41ZV05hNtcPAQUAm9/Q==",
 			"requires": {
 				"through2": "^2.0.3"
 			}
@@ -103632,7 +103649,7 @@
 		"token-stream": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/token-stream/-/token-stream-1.0.0.tgz",
-			"integrity": "sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ="
+			"integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg=="
 		},
 		"token-types": {
 			"version": "2.1.1",
@@ -103653,7 +103670,7 @@
 		"toposort": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
-			"integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+			"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
 		},
 		"touch": {
 			"version": "3.1.0",
@@ -103967,12 +103984,12 @@
 				"strip-bom": {
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-					"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
+					"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA=="
 				},
 				"strip-json-comments": {
 					"version": "2.0.1",
 					"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-					"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
+					"integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ=="
 				}
 			}
 		},
@@ -103998,7 +104015,7 @@
 				"strip-bom": {
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-					"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
+					"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA=="
 				}
 			}
 		},
@@ -104112,7 +104129,7 @@
 		"tty-browserify": {
 			"version": "0.0.0",
 			"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
-			"integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
+			"integrity": "sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw=="
 		},
 		"tunnel": {
 			"version": "0.0.6",
@@ -104307,7 +104324,7 @@
 		"unc-path-regex": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
-			"integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo="
+			"integrity": "sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg=="
 		},
 		"undefsafe": {
 			"version": "2.0.5",
@@ -104346,7 +104363,7 @@
 		"undertaker-registry": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/undertaker-registry/-/undertaker-registry-1.0.1.tgz",
-			"integrity": "sha1-XkvaMI5KiirlhPm5pDWaSZglzFA="
+			"integrity": "sha512-UR1khWeAjugW3548EfQmL9Z7pGMlBgXteQpr1IZeZBtnkCJQJIJ1Scj0mb9wQaPvUZ9Q17XqW6TIaPchJkyfqw=="
 		},
 		"unescape": {
 			"version": "1.0.1",
@@ -104460,12 +104477,12 @@
 		"uniq": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
-			"integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
+			"integrity": "sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA=="
 		},
 		"uniqs": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
-			"integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI="
+			"integrity": "sha512-mZdDpf3vBV5Efh29kMw5tXoup/buMgxLzOt/XKFKcVmi+15ManNQWr6HfZ2aiZTYlYixbdNJ0KFmIZIv52tHSQ=="
 		},
 		"unique-filename": {
 			"version": "1.1.1",
@@ -104580,12 +104597,12 @@
 		"unpipe": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-			"integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+			"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ=="
 		},
 		"unquote": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
-			"integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ="
+			"integrity": "sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg=="
 		},
 		"unset-value": {
 			"version": "1.0.0",
@@ -104744,7 +104761,7 @@
 		"url": {
 			"version": "0.11.0",
 			"resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-			"integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
+			"integrity": "sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==",
 			"requires": {
 				"punycode": "1.3.2",
 				"querystring": "0.2.0"
@@ -104791,7 +104808,7 @@
 		"url-parse-lax": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
-			"integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
+			"integrity": "sha512-NjFKA0DidqPa5ciFcSrXnAltTtzz84ogy+NebPvfEgAck0+TNg4UJ4IN+fB7zRZfbgUf0syOo9MDxFkDSMuFaQ==",
 			"requires": {
 				"prepend-http": "^2.0.0"
 			},
@@ -104811,7 +104828,7 @@
 		"utf7": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/utf7/-/utf7-1.0.2.tgz",
-			"integrity": "sha1-lV9JCq5lO6IguUVqCod2wZk2CZE=",
+			"integrity": "sha512-qQrPtYLLLl12NF4DrM9CvfkxkYI97xOb5dsnGZHE3teFr0tWiEZ9UdgMPczv24vl708cYMpe6mGXGHrotIp3Bw==",
 			"requires": {
 				"semver": "~5.3.0"
 			},
@@ -104826,7 +104843,7 @@
 		"utf8": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/utf8/-/utf8-2.1.2.tgz",
-			"integrity": "sha1-H6DZJw6b6FDZsFAn9jUZv0ZFfZY="
+			"integrity": "sha512-QXo+O/QkLP/x1nyi54uQiG0XrODxdysuQvE5dtVqv7F5K2Qb6FsN+qbr6KhF5wQ20tfcV3VQp0/2x1e1MRSPWg=="
 		},
 		"util": {
 			"version": "0.11.1",
@@ -104872,17 +104889,17 @@
 		"utila": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
-			"integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw="
+			"integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA=="
 		},
 		"utils-merge": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-			"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+			"integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
 		},
 		"uuencode": {
 			"version": "0.0.4",
 			"resolved": "https://registry.npmjs.org/uuencode/-/uuencode-0.0.4.tgz",
-			"integrity": "sha1-yNUDcIhWY4eThas34zPH6OOwIYw="
+			"integrity": "sha512-yEEhCuCi5wRV7Z5ZVf9iV2gWMvUZqKJhAs1ecFdKJ0qzbyaVelmsE3QjYAamehfp9FKLiZbKldd+jklG3O0LfA=="
 		},
 		"uuid": {
 			"version": "8.3.2",
@@ -104892,7 +104909,7 @@
 		"uuid-browser": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/uuid-browser/-/uuid-browser-3.1.0.tgz",
-			"integrity": "sha1-DwWkCu90+eWVHiDvv0SxGHHlZBA="
+			"integrity": "sha512-dsNgbLaTrd6l3MMxTtouOCFw4CBFc/3a+GgYA2YyrJvyQ1u6q4pcu3ktLoUZ/VN/Aw9WsauazbgsgdfVWgAKQg=="
 		},
 		"v-click-outside": {
 			"version": "3.2.0",
@@ -104955,12 +104972,12 @@
 		"value-or-function": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/value-or-function/-/value-or-function-3.0.0.tgz",
-			"integrity": "sha1-HCQ6ULWVwb5Up1S/7OhWO5/42BM="
+			"integrity": "sha512-jdBB2FrWvQC/pnPtIqcLsMaQgjhdb6B7tk1MMyTKapox+tQZbdRP4uLxu/JY0t7fbfDCUMnuelzEYv5GsxHhdg=="
 		},
 		"vary": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-			"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+			"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
 		},
 		"vendors": {
 			"version": "1.0.4",
@@ -105090,7 +105107,7 @@
 		"vinyl-sourcemap": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/vinyl-sourcemap/-/vinyl-sourcemap-1.1.0.tgz",
-			"integrity": "sha1-kqgAWTo4cDqM2xHYswCtS+Y7PhY=",
+			"integrity": "sha512-NiibMgt6VJGJmyw7vtzhctDcfKch4e4n9TBeoWlirb7FMg9/1Ov9k+A5ZRAtywBpRPiyECvQRQllYM8dECegVA==",
 			"requires": {
 				"append-buffer": "^1.0.2",
 				"convert-source-map": "^1.5.0",
@@ -105114,7 +105131,7 @@
 		"vinyl-sourcemaps-apply": {
 			"version": "0.2.1",
 			"resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz",
-			"integrity": "sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=",
+			"integrity": "sha512-+oDh3KYZBoZC8hfocrbrxbLUeaYtQK7J5WU5Br9VqWqmCll3tFJqKp97GC9GmMsVIL0qnx2DgEDVxdo5EZ5sSw==",
 			"requires": {
 				"source-map": "^0.5.1"
 			},
@@ -105122,7 +105139,7 @@
 				"source-map": {
 					"version": "0.5.7",
 					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-					"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+					"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
 				}
 			}
 		},
@@ -105270,7 +105287,7 @@
 		"void-elements": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
-			"integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
+			"integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w=="
 		},
 		"vue": {
 			"version": "2.6.14",
@@ -105345,7 +105362,7 @@
 				"yallist": {
 					"version": "2.1.2",
 					"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-					"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+					"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
 				}
 			}
 		},
@@ -105509,7 +105526,7 @@
 				"source-map": {
 					"version": "0.5.7",
 					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-					"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+					"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
 				},
 				"supports-color": {
 					"version": "5.5.0",
@@ -105979,7 +105996,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"optional": true,
 					"requires": {
 						"is-number": "^3.0.0",
@@ -106306,7 +106323,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -106950,7 +106967,7 @@
 				"strip-ansi": {
 					"version": "3.0.1",
 					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-					"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+					"integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
 					"requires": {
 						"ansi-regex": "^2.0.0"
 					}
@@ -106966,7 +106983,7 @@
 				"to-regex-range": {
 					"version": "2.1.1",
 					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-					"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+					"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 					"requires": {
 						"is-number": "^3.0.0",
 						"repeat-string": "^1.6.1"
@@ -107467,14 +107484,14 @@
 			}
 		},
 		"ws": {
-			"version": "8.7.0",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.7.0.tgz",
-			"integrity": "sha512-c2gsP0PRwcLFzUiA8Mkr37/MI7ilIlHQxaEAtd0uNMbVMoy8puJyafRlm0bV9MbGSabUPeLrRRaqIBcFcA2Pqg=="
+			"version": "8.8.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz",
+			"integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ=="
 		},
 		"x-default-browser": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/x-default-browser/-/x-default-browser-0.4.0.tgz",
-			"integrity": "sha1-cM8NqF2nwKtcsPFaiX8jIqa91IE=",
+			"integrity": "sha512-7LKo7RtWfoFN/rHx1UELv/2zHGMx8MkZKDq1xENmOCTkfIqZJ0zZ26NEJX8czhnPXVcqS0ARjjfJB+eJ0/5Cvw==",
 			"requires": {
 				"default-browser-id": "^1.0.4"
 			}
@@ -107530,7 +107547,7 @@
 		"xregexp": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/xregexp/-/xregexp-2.0.0.tgz",
-			"integrity": "sha1-UqY+VsoLhKfzpfPWGHLxJq16WUM="
+			"integrity": "sha512-xl/50/Cf32VsGq/1R8jJE5ajH1yMCQkpmoS10QbFZWl2Oor4H0Me64Pu2yxvsRWK3m6soJbmGfzSR7BYmDcWAA=="
 		},
 		"xss": {
 			"version": "1.0.13",
@@ -107617,7 +107634,7 @@
 				"strip-ansi": {
 					"version": "3.0.1",
 					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-					"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+					"integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
 					"requires": {
 						"ansi-regex": "^2.0.0"
 					}
@@ -107625,7 +107642,7 @@
 				"supports-color": {
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-					"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+					"integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g=="
 				}
 			}
 		},
@@ -107791,7 +107808,7 @@
 				"strip-indent": {
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz",
-					"integrity": "sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g="
+					"integrity": "sha512-RsSNPLpq6YUL7QYy44RnPVTn/lcVZtb48Uof3X5JLbF4zD/Gs7ZFDv2HWol+leoQN2mT86LAzSshGfkTlSOpsA=="
 				},
 				"which": {
 					"version": "1.3.1",
@@ -107804,7 +107821,7 @@
 				"yallist": {
 					"version": "2.1.2",
 					"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-					"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+					"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
 				}
 			}
 		},
diff --git a/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts b/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts
index f0487e19f3f8c..e86cc1f3edbaa 100644
--- a/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts
+++ b/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts
@@ -1,5 +1,6 @@
 import {render} from '@testing-library/vue';
 import N8nButton from "../Button.vue";
+import ElButton from "../overrides/ElButton.vue";
 
 const slots = {
 	default: 'Button',
@@ -43,5 +44,20 @@ describe('components', () => {
 				});
 			});
 		});
+
+		describe('overrides', () => {
+			it('should render correctly', () => {
+				const wrapper = render(ElButton, {
+					props: {
+						icon: 'plus-circle',
+						type: 'secondary',
+					},
+					slots,
+					stubs,
+				});
+
+				expect(wrapper.html()).toMatchSnapshot();
+			});
+		});
 	});
 });
diff --git a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
index 62c8235674e7d..ff139089b833e 100644
--- a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
+++ b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
@@ -1,5 +1,10 @@
 // Vitest Snapshot v1
 
+exports[`components > N8nButton > overrides > should render correctly 1`] = `
+"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_7t6ot_115 _primary_7t6ot_288 _medium_7t6ot_254\\" icon=\\"plus-circle\\" type=\\"secondary\\">
+  <!----><span>Button</span></button>"
+`;
+
 exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_7t6ot_115 _primary_7t6ot_288 _medium_7t6ot_254 _icon_7t6ot_239\\"><span class=\\"_icon_7t6ot_239\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 
 exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button disabled=\\"disabled\\" aria-disabled=\\"false\\" aria-busy=\\"true\\" aria-live=\\"polite\\" class=\\"button _button_7t6ot_115 _primary_7t6ot_288 _medium_7t6ot_254 _loading_7t6ot_352 _icon_7t6ot_239\\"><span class=\\"_icon_7t6ot_239\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
diff --git a/packages/design-system/src/components/N8nButton/overrides/ElButton.vue b/packages/design-system/src/components/N8nButton/overrides/ElButton.vue
new file mode 100644
index 0000000000000..4ba1a0824bd5f
--- /dev/null
+++ b/packages/design-system/src/components/N8nButton/overrides/ElButton.vue
@@ -0,0 +1,19 @@
+<template>
+	<n8n-button
+		v-bind="$attrs"
+		v-on="$listeners"
+	>
+		<slot/>
+	</n8n-button>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+import N8nButton from '../Button.vue';
+
+export default Vue.extend({
+	components: {
+		N8nButton,
+	},
+});
+</script>
+
diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.vue b/packages/design-system/src/components/N8nIconButton/IconButton.vue
index c2bd618c2e235..f44242cbc9a6e 100644
--- a/packages/design-system/src/components/N8nIconButton/IconButton.vue
+++ b/packages/design-system/src/components/N8nIconButton/IconButton.vue
@@ -14,14 +14,10 @@ export default {
 		type: {
 			type: String,
 			default: 'primary',
-			validator: (value: string): boolean =>
-				['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger'].includes(value),
 		},
 		size: {
 			type: String,
 			default: 'medium',
-			validator: (value: string): boolean =>
-				['mini', 'small', 'medium', 'large', 'xlarge'].includes(value),
 		},
 		loading: {
 			type: Boolean,
diff --git a/packages/design-system/theme/src/_tokens.dark.scss b/packages/design-system/theme/src/_tokens.dark.scss
index 5cf77596b2dc1..af959ce185882 100644
--- a/packages/design-system/theme/src/_tokens.dark.scss
+++ b/packages/design-system/theme/src/_tokens.dark.scss
@@ -1,7 +1,7 @@
 @mixin theme {
-	--color-primary-h: 7;
+	--color-primary-h: 6.9;
 	--color-primary-s: 100%;
-	--color-primary-l: 68%;
+	--color-primary-l: 67.6%;
 	--color-primary: hsl(
 		var(--color-primary-h),
 		var(--color-primary-s),
diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss
index cd3b9d122be08..70ddb454b5dc8 100644
--- a/packages/design-system/theme/src/_tokens.scss
+++ b/packages/design-system/theme/src/_tokens.scss
@@ -1,9 +1,9 @@
 @use 'sass:math';
 
 @mixin theme {
-  --color-primary-h: 7;
+  --color-primary-h: 6.9;
   --color-primary-s: 100%;
-  --color-primary-l: 68%;
+  --color-primary-l: 67.6%;
   --color-primary: hsl(
 				  var(--color-primary-h),
 				  var(--color-primary-s),
diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
index 0b658d7b71f0b..1fde9d150fc7c 100644
--- a/packages/editor-ui/src/components/NodeExecuteButton.vue
+++ b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -4,7 +4,6 @@
 		:disabled="workflowRunning && !nodeRunning"
 		:label="buttonLabel"
 		:type="type"
-		:outline="outline"
 		:size="size"
 		:transparentBackground="transparent"
 		@click="onClick"
@@ -30,9 +29,6 @@ export default mixins(
 		type: {
 			type: String,
 		},
-		outline: {
-			type: Boolean,
-		},
 		size: {
 			type: String,
 		},
diff --git a/packages/editor-ui/vue.config.js b/packages/editor-ui/vue.config.js
index b19f98f816ad7..db1cd795fccb8 100644
--- a/packages/editor-ui/vue.config.js
+++ b/packages/editor-ui/vue.config.js
@@ -30,8 +30,8 @@ module.exports = {
 		],
 		resolve: {
 			alias: {
-				'element-ui/packages/button': path.resolve(__dirname, '..', 'design-system/src/components/N8nButton/Button.vue'),
-				'element-ui/lib/button': path.resolve(__dirname, '..', 'design-system/src/components/N8nButton/Button.vue'),
+				'element-ui/packages/button': path.resolve(__dirname, '..', 'design-system/src/components/N8nButton/overrides/ElButton.vue'),
+				'element-ui/lib/button': path.resolve(__dirname, '..', 'design-system/src/components/N8nButton/overrides/ElButton.vue'),
 			},
 		},
 	},

From 4fc7506737ec9c5ca31c6149be20766613b2bc5b Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 20 Jun 2022 11:55:17 +0300
Subject: [PATCH 23/42] test: Updated button override snapshot.

---
 .../N8nButton/__tests__/__snapshots__/Button.spec.ts.snap    | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
index ff139089b833e..74663044139bc 100644
--- a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
+++ b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
@@ -1,9 +1,6 @@
 // Vitest Snapshot v1
 
-exports[`components > N8nButton > overrides > should render correctly 1`] = `
-"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_7t6ot_115 _primary_7t6ot_288 _medium_7t6ot_254\\" icon=\\"plus-circle\\" type=\\"secondary\\">
-  <!----><span>Button</span></button>"
-`;
+exports[`components > N8nButton > overrides > should render correctly 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_7t6ot_115 _secondary_7t6ot_170 _medium_7t6ot_254 _icon_7t6ot_239\\" icon=\\"plus-circle\\" type=\\"secondary\\"><span class=\\"_icon_7t6ot_239\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 
 exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_7t6ot_115 _primary_7t6ot_288 _medium_7t6ot_254 _icon_7t6ot_239\\"><span class=\\"_icon_7t6ot_239\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 

From 77d970eb998f695756a1d997469c614e62ff875f Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 20 Jun 2022 13:14:44 +0300
Subject: [PATCH 24/42] fix: Various button adjustments and fixes.

---
 .../N8nButton/overrides/ElButton.vue          | 24 +++++++++++++++++--
 .../components/N8nButton/overrides/index.ts   |  1 +
 .../components/N8nIconButton/IconButton.vue   |  4 ++--
 .../design-system/src/components/index.ts     |  2 ++
 .../CredentialEdit/CredentialEdit.vue         |  6 +++--
 .../src/components/CredentialsList.vue        |  2 +-
 .../editor-ui/src/components/SaveButton.vue   |  1 +
 packages/editor-ui/src/plugins/components.ts  |  3 ++-
 8 files changed, 35 insertions(+), 8 deletions(-)
 create mode 100644 packages/design-system/src/components/N8nButton/overrides/index.ts

diff --git a/packages/design-system/src/components/N8nButton/overrides/ElButton.vue b/packages/design-system/src/components/N8nButton/overrides/ElButton.vue
index 4ba1a0824bd5f..0ef69b3ee7231 100644
--- a/packages/design-system/src/components/N8nButton/overrides/ElButton.vue
+++ b/packages/design-system/src/components/N8nButton/overrides/ElButton.vue
@@ -1,19 +1,39 @@
 <template>
 	<n8n-button
-		v-bind="$attrs"
+		ref="button"
+		v-bind="attrs"
 		v-on="$listeners"
 	>
 		<slot/>
 	</n8n-button>
 </template>
+
 <script lang="ts">
 import Vue from 'vue';
 import N8nButton from '../Button.vue';
 
+const classToTypeMap = {
+	'btn--cancel': 'secondary',
+};
+
 export default Vue.extend({
 	components: {
 		N8nButton,
 	},
+	computed: {
+		attrs() {
+			let type = 'primary';
+			Object.entries(classToTypeMap).forEach(([className, mappedType]) => {
+				if (this.$refs.button && (this.$refs.button as Vue).$el.classList.contains(className)) {
+					type = mappedType;
+				}
+			});
+
+			return {
+				type,
+				...this.$attrs,
+			};
+		},
+	},
 });
 </script>
-
diff --git a/packages/design-system/src/components/N8nButton/overrides/index.ts b/packages/design-system/src/components/N8nButton/overrides/index.ts
new file mode 100644
index 0000000000000..c62be6ec636fb
--- /dev/null
+++ b/packages/design-system/src/components/N8nButton/overrides/index.ts
@@ -0,0 +1 @@
+export { default as N8nElButton } from './ElButton.vue';
diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.vue b/packages/design-system/src/components/N8nIconButton/IconButton.vue
index f44242cbc9a6e..322b8288d150e 100644
--- a/packages/design-system/src/components/N8nIconButton/IconButton.vue
+++ b/packages/design-system/src/components/N8nIconButton/IconButton.vue
@@ -71,8 +71,8 @@ export default {
 }
 
 .medium {
-	height: 32px;
-	width: 32px;
+	height: 30px;
+	width: 30px;
 }
 
 .large {
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index 8d3cbd53728c9..8a7c07997304b 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -38,6 +38,7 @@ import N8nActionToggle from './N8nActionToggle';
 import N8nAvatar from './N8nAvatar';
 import N8nBadge from './N8nBadge';
 import N8nButton from './N8nButton';
+import { N8nElButton } from './N8nButton/overrides';
 import N8nCard from './N8nCard';
 import N8nFormBox from './N8nFormBox';
 import N8nFormInput from './N8nFormInput';
@@ -77,6 +78,7 @@ export {
 	N8nAvatar,
 	N8nBadge,
 	N8nButton,
+	N8nElButton,
 	N8nCard,
 	N8nHeading,
 	N8nFormBox,
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index 08da05b78def8..33ed9270d520c 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -24,10 +24,10 @@
 				<div :class="$style.credActions">
 					<n8n-icon-button
 						v-if="currentCredential"
-						size="small"
 						:title="$locale.baseText('credentialEdit.credentialEdit.delete')"
 						icon="trash"
-						text
+						size="medium"
+						type="tertiary"
 						:disabled="isSaving"
 						:loading="isDeleting"
 						@click="deleteCredential"
@@ -856,6 +856,8 @@ export default mixins(showMessage, nodeHelpers).extend({
 }
 
 .credActions {
+	display: flex;
+	align-items: flex-start;
 	margin-right: var(--spacing-xl);
 	> * {
 		margin-left: var(--spacing-2xs);
diff --git a/packages/editor-ui/src/components/CredentialsList.vue b/packages/editor-ui/src/components/CredentialsList.vue
index bf419b121dad7..2fef894871967 100644
--- a/packages/editor-ui/src/components/CredentialsList.vue
+++ b/packages/editor-ui/src/components/CredentialsList.vue
@@ -27,7 +27,7 @@
 					<template slot-scope="scope">
 						<div class="cred-operations">
 							<n8n-icon-button :title="$locale.baseText('credentialsList.editCredential')" @click.stop="editCredential(scope.row)" size="small" icon="pen" />
-							<n8n-icon-button :title="$locale.baseText('credentialsList.deleteCredential')" @click.stop="deleteCredential(scope.row)" size="small" icon="trash" type="tertiary" />
+							<n8n-icon-button :title="$locale.baseText('credentialsList.deleteCredential')" @click.stop="deleteCredential(scope.row)" size="small" icon="trash" />
 						</div>
 					</template>
 				</el-table-column>
diff --git a/packages/editor-ui/src/components/SaveButton.vue b/packages/editor-ui/src/components/SaveButton.vue
index c8e6f074c4103..b2ba5bad85616 100644
--- a/packages/editor-ui/src/components/SaveButton.vue
+++ b/packages/editor-ui/src/components/SaveButton.vue
@@ -49,6 +49,7 @@ export default Vue.extend({
 <style lang="scss" module>
 .container {
 	width: 65px;
+	display: inline-flex;
 }
 
 .saved {
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index aa1aff25d628b..4c9f8106ef8fb 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -48,6 +48,7 @@ import {
 	N8nAvatar,
 	N8nActionToggle,
 	N8nButton,
+	N8nElButton,
 	N8nCard,
 	N8nIcon,
 	N8nIconButton,
@@ -85,7 +86,7 @@ Vue.use(N8nActionBox);
 Vue.use(N8nActionToggle);
 Vue.use(N8nAvatar);
 Vue.component('n8n-button', N8nButton);
-Vue.component('el-button', N8nButton);
+Vue.component('el-button', N8nElButton);
 Vue.component('n8n-card', N8nCard);
 Vue.component('n8n-form-box', N8nFormBox);
 Vue.component('n8n-form-inputs', N8nFormInputs);

From 2804fb60ad8483ec2d6b2c016450f9ef0d976d05 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 28 Jun 2022 15:29:19 +0300
Subject: [PATCH 25/42] fix: Updated button disabled state.

---
 packages/design-system/src/components/N8nButton/Button.vue | 2 +-
 packages/design-system/theme/src/common/var.scss           | 2 +-
 packages/editor-ui/src/views/NodeView.vue                  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index 60adac4752d5c..05033ba02a788 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -166,7 +166,7 @@ export default Vue.extend({
 	}
 }
 
-$loading-overlay-background-color: rgba(255, 255, 255, 0.35);
+$loading-overlay-background-color: rgba(255, 255, 255, 0);
 
 /**
  * Colors
diff --git a/packages/design-system/theme/src/common/var.scss b/packages/design-system/theme/src/common/var.scss
index fc4604f70d67f..e82fc39c9b560 100644
--- a/packages/design-system/theme/src/common/var.scss
+++ b/packages/design-system/theme/src/common/var.scss
@@ -715,7 +715,7 @@ $button-disabled-background-color: var(
 				var(--color-light-grey)
 );
 /// color||Color|0
-$button-disabled-border-color: var(--button-disabled-border-color, var(--color-grey));
+$button-disabled-border-color: var(--button-disabled-border-color, var(--color-light-grey));
 
 /// color||Color|0
 $button-primary-border-color: var(--color-primary);
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 9a4ce1a60d20f..febe929492370 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -75,7 +75,7 @@
 					@click="nodeTypeSelected(STICKY_NODE_TYPE)"
 				>
 					<n8n-icon-button
-						size="large"
+						size="medium"
 						type="secondary"
 						:icon="['far', 'note-sticky']"
 						:title="$locale.baseText('nodeView.addSticky')"

From edd04d5f5c1eb53adb9a085f843396a280fce23f Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 28 Jun 2022 15:31:23 +0300
Subject: [PATCH 26/42] test: Updated snapshots.

---
 .../N8nButton/__tests__/__snapshots__/Button.spec.ts.snap | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
index 74663044139bc..33ec8d07ad964 100644
--- a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
+++ b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
@@ -1,12 +1,12 @@
 // Vitest Snapshot v1
 
-exports[`components > N8nButton > overrides > should render correctly 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_7t6ot_115 _secondary_7t6ot_170 _medium_7t6ot_254 _icon_7t6ot_239\\" icon=\\"plus-circle\\" type=\\"secondary\\"><span class=\\"_icon_7t6ot_239\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
+exports[`components > N8nButton > overrides > should render correctly 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_cccce_115 _secondary_cccce_170 _medium_cccce_254 _icon_cccce_239\\" icon=\\"plus-circle\\" type=\\"secondary\\"><span class=\\"_icon_cccce_239\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 
-exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_7t6ot_115 _primary_7t6ot_288 _medium_7t6ot_254 _icon_7t6ot_239\\"><span class=\\"_icon_7t6ot_239\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
+exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_cccce_115 _primary_cccce_288 _medium_cccce_254 _icon_cccce_239\\"><span class=\\"_icon_cccce_239\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 
-exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button disabled=\\"disabled\\" aria-disabled=\\"false\\" aria-busy=\\"true\\" aria-live=\\"polite\\" class=\\"button _button_7t6ot_115 _primary_7t6ot_288 _medium_7t6ot_254 _loading_7t6ot_352 _icon_7t6ot_239\\"><span class=\\"_icon_7t6ot_239\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
+exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button disabled=\\"disabled\\" aria-disabled=\\"false\\" aria-busy=\\"true\\" aria-live=\\"polite\\" class=\\"button _button_cccce_115 _primary_cccce_288 _medium_cccce_254 _loading_cccce_352 _icon_cccce_239\\"><span class=\\"_icon_cccce_239\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
 
 exports[`components > N8nButton > should render correctly 1`] = `
-"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_7t6ot_115 _primary_7t6ot_288 _medium_7t6ot_254\\">
+"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_cccce_115 _primary_cccce_288 _medium_cccce_254\\">
   <!----><span>Button</span></button>"
 `;

From 106397b9d4418627ddab407e050919af0af96eee Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 6 Jul 2022 10:23:18 +0300
Subject: [PATCH 27/42] fix: Consolidated css variables changes.

---
 .../design-system/theme/src/_tokens.dark.scss | 548 ++++++++++--------
 packages/design-system/theme/src/_tokens.scss |  22 +-
 2 files changed, 301 insertions(+), 269 deletions(-)

diff --git a/packages/design-system/theme/src/_tokens.dark.scss b/packages/design-system/theme/src/_tokens.dark.scss
index af959ce185882..7e03a21e3fcb8 100644
--- a/packages/design-system/theme/src/_tokens.dark.scss
+++ b/packages/design-system/theme/src/_tokens.dark.scss
@@ -1,260 +1,298 @@
+@use 'sass:math';
+
 @mixin theme {
-	--color-primary-h: 6.9;
-	--color-primary-s: 100%;
-	--color-primary-l: 67.6%;
-	--color-primary: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-l)
-	);
-
-	--color-primary-tint-1-l: 18%;
-	--color-primary-tint-1: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-tint-1-l)
-	);
-
-	--color-primary-tint-2-l: 9%;
-	--color-primary-tint-2: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-tint-2-l)
-	);
-
-	--color-primary-tint-3-l: 3%;
-	--color-primary-tint-3: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-tint-3-l)
-	);
-
-	--color-primary-shade-1-l: 89%;
-	--color-primary-shade-1: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-shade-1-l)
-	);
-
-	--color-secondary-h: 247;
-	--color-secondary-s: 100%;
-	--color-secondary-l: 35%;
-	--color-secondary: hsl(
-		var(--color-secondary-h),
-		var(--color-secondary-s),
-		var(--color-secondary-l)
-	);
-
-	--color-success-h: 150;
-	--color-success-s: 74%;
-	--color-success-l: 60%;
-	--color-success: hsl(
-		var(--color-success-h),
-		var(--color-success-s),
-		var(--color-success-l)
-	);
-
-	--color-success-tint-1-l: 12%;
-	--color-success-tint-1: hsl(
-		var(--color-success-h),
-		var(--color-success-s),
-		var(--color-success-tint-1-l)
-	);
-
-	--color-success-tint-2-l: 3%;
-	--color-success-tint-2: hsl(
-		var(--color-success-h),
-		var(--color-success-s),
-		var(--color-success-tint-2-l)
-	);
-
-	--color-warning-h: 36;
-	--color-warning-s: 77%;
-	--color-warning-l: 43%;
-	--color-warning: hsl(
-		var(--color-warning-h),
-		var(--color-warning-s),
-		var(--color-warning-l)
-	);
-
-	--color-warning-tint-1-l: 12%;
-	--color-warning-tint-1: hsl(
-		var(--color-warning-h),
-		var(--color-warning-s),
-		var(--color-warning-tint-1-l)
-	);
-
-	--color-warning-tint-2-l: 4%;
-	--color-warning-tint-2: hsl(
-		var(--color-warning-h),
-		var(--color-warning-s),
-		var(--color-warning-tint-2-l)
-	);
-
-	--color-danger-h: 0;
-	--color-danger-s: 88%;
-	--color-danger-l: 35%;
-	--color-danger: hsl(
-		var(--color-danger-h),
-		var(--color-danger-s),
-		var(--color-danger-l)
-	);
-
-	--color-danger-tint-1-l: 8%;
-	--color-danger-tint-1: hsl(
-		var(--color-danger-h),
-		var(--color-danger-s),
-		var(--color-danger-tint-1-l)
-	);
-
-	--color-danger-tint-2-l: 3%;
-	--color-danger-tint-2: hsl(
-		var(--color-danger-h),
-		var(--color-danger-s),
-		var(--color-danger-tint-2-l)
-	);
-
-	--color-info-h: 220;
-	--color-info-s: 4%;
-	--color-info-l: 42%;
-	--color-info: hsl(
-		var(--color-info-h),
-		var(--color-info-s),
-		var(--color-info-l)
-	);
-
-	--color-info-tint-1-l: 12%;
-	--color-info-tint-1: hsl(
-		var(--color-info-h),
-		var(--color-info-s),
-		var(--color-info-tint-1-l)
-	);
-
-	--color-info-tint-2-l: 4%;
-	--color-info-tint-2: hsl(
-		var(--color-info-h),
-		var(--color-info-s),
-		var(--color-info-tint-2-l)
-	);
-
-	--color-text-dark-h: 0;
-	--color-text-dark-s: 0%;
-	--color-text-dark-l: 100%;
-	--color-text-dark: hsl(
-		var(--color-text-dark-h),
-		var(--color-text-dark-s),
-		var(--color-text-dark-l)
-	);
-
-	--color-text-base-h: 240;
-	--color-text-base-s: 4%;
-	--color-text-base-l: 49%;
-	--color-text-base: hsl(
-		var(--color-text-base-h),
-		var(--color-text-base-s),
-		var(--color-text-base-l)
-	);
-
-	--color-text-light-h: 220;
-	--color-text-light-s: 4%;
-	--color-text-light-l: 42%;
-	--color-text-light: hsl(
-		var(--color-text-light-h),
-		var(--color-text-light-s),
-		var(--color-text-light-l)
-	);
-
-	--color-text-lighter-h: 222;
-	--color-text-lighter-s: 17%;
-	--color-text-lighter-l: 12%;
-	--color-text-lighter: hsl(
-		var(--color-text-lighter-h),
-		var(--color-text-lighter-s),
-		var(--color-text-lighter-l)
-	);
-
-	--color-text-xlight-h: 0;
-	--color-text-xlight-s: 0%;
-	--color-text-xlight-l: 100%;
-	--color-text-xlight: hsl(
-		var(--color-text-xlight-h),
-		var(--color-text-xlight-s),
-		var(--color-text-xlight-l)
-	);
-
-	--color-foreground-base-h: 220;
-	--color-foreground-base-s: 20%;
-	--color-foreground-base-l: 12%;
-	--color-foreground-base: hsl(
-		var(--color-foreground-base-h),
-		var(--color-foreground-base-s),
-		var(--color-foreground-base-l)
-	);
-
-	--color-foreground-light-h: 0;
-	--color-foreground-light-s: 0%;
-	--color-foreground-light-l: 7%;
-	--color-foreground-light: hsl(
-		var(--color-foreground-light-h),
-		var(--color-foreground-light-s),
-		var(--color-foreground-light-l)
-	);
-
-	--color-foreground-xlight-h: 0;
-	--color-foreground-xlight-s: 0%;
-	--color-foreground-xlight-l: 0%;
-	--color-foreground-xlight: hsl(
-		var(--color-foreground-xlight-h),
-		var(--color-foreground-xlight-s),
-		var(--color-foreground-xlight-l)
-	);
-
-	--color-background-dark-h: 0;
-	--color-background-dark-s: 0%;
-	--color-background-dark-l: 100%;
-	--color-background-dark: hsl(
-		var(--color-background-dark-h),
-		var(--color-background-dark-s),
-		var(--color-background-dark-l)
-	);
-
-	--color-background-base-h: 252;
-	--color-background-base-s: 71%;
-	--color-background-base-l: 99%;
-	--color-background-base: hsl(
-		var(--color-background-base-h),
-		var(--color-background-base-s),
-		var(--color-background-base-l)
-	);
-
-	--color-background-light-h: 220;
-	--color-background-light-s: 27%;
-	--color-background-light-l: 98%;
-	--color-background-light: hsl(
-		var(--color-background-light-h),
-		var(--color-background-light-s),
-		var(--color-background-light-l)
-	);
-
-	--color-background-lighter-h: 220;
-	--color-background-lighter-s: 30%;
-	--color-background-lighter-l: 96%;
-	--color-background-lighter: hsl(
-		var(--color-background-lighter-h),
-		var(--color-background-lighter-s),
-		var(--color-background-lighter-l)
-	);
-
-	--color-background-xlight-h: 240;
-	--color-background-xlight-s: 4%;
-	--color-background-xlight-l: 19%;
-	--color-background-xlight: hsl(
-		var(--color-background-xlight-h),
-		var(--color-background-xlight-s),
-		var(--color-background-xlight-l)
-	);
+  --color-primary-h: 7;
+  --color-primary-s: 100%;
+  --color-primary-l: 68%;
+  --color-primary: hsl(
+				  var(--color-primary-h),
+				  var(--color-primary-s),
+				  var(--color-primary-l)
+  );
+
+  --color-primary-tint-1-l: 18%;
+  --color-primary-tint-1: hsl(
+				  var(--color-primary-h),
+				  var(--color-primary-s),
+				  var(--color-primary-tint-1-l)
+  );
+
+  --color-primary-tint-2-l: 9%;
+  --color-primary-tint-2: hsl(
+				  var(--color-primary-h),
+				  var(--color-primary-s),
+				  var(--color-primary-tint-2-l)
+  );
+
+  --color-primary-tint-3-l: 3%;
+  --color-primary-tint-3: hsl(
+				  var(--color-primary-h),
+				  var(--color-primary-s),
+				  var(--color-primary-tint-3-l)
+  );
+
+  --color-primary-shade-1-l: 89%;
+  --color-primary-shade-1: hsl(
+				  var(--color-primary-h),
+				  var(--color-primary-s),
+				  var(--color-primary-shade-1-l)
+  );
+
+  --color-secondary-h: 247;
+  --color-secondary-s: 100%;
+  --color-secondary-l: 35%;
+  --color-secondary: hsl(
+				  var(--color-secondary-h),
+				  var(--color-secondary-s),
+				  var(--color-secondary-l)
+  );
+
+  --color-success-h: 150;
+  --color-success-s: 74%;
+  --color-success-l: 60%;
+  --color-success: hsl(
+				  var(--color-success-h),
+				  var(--color-success-s),
+				  var(--color-success-l)
+  );
+
+  --color-success-tint-1-l: 12%;
+  --color-success-tint-1: hsl(
+				  var(--color-success-h),
+				  var(--color-success-s),
+				  var(--color-success-tint-1-l)
+  );
+
+  --color-success-tint-2-l: 3%;
+  --color-success-tint-2: hsl(
+				  var(--color-success-h),
+				  var(--color-success-s),
+				  var(--color-success-tint-2-l)
+  );
+
+  --color-warning-h: 36;
+  --color-warning-s: 77%;
+  --color-warning-l: 43%;
+  --color-warning: hsl(
+				  var(--color-warning-h),
+				  var(--color-warning-s),
+				  var(--color-warning-l)
+  );
+
+  --color-warning-tint-1-l: 12%;
+  --color-warning-tint-1: hsl(
+				  var(--color-warning-h),
+				  var(--color-warning-s),
+				  var(--color-warning-tint-1-l)
+  );
+
+  --color-warning-tint-2-l: 4%;
+  --color-warning-tint-2: hsl(
+				  var(--color-warning-h),
+				  var(--color-warning-s),
+				  var(--color-warning-tint-2-l)
+  );
+
+  --color-danger-h: 0;
+  --color-danger-s: 88%;
+  --color-danger-l: 35%;
+  --color-danger: hsl(
+				  var(--color-danger-h),
+				  var(--color-danger-s),
+				  var(--color-danger-l)
+  );
+
+  --color-danger-tint-1-l: 8%;
+  --color-danger-tint-1: hsl(
+				  var(--color-danger-h),
+				  var(--color-danger-s),
+				  var(--color-danger-tint-1-l)
+  );
+
+  --color-danger-tint-2-l: 3%;
+  --color-danger-tint-2: hsl(
+				  var(--color-danger-h),
+				  var(--color-danger-s),
+				  var(--color-danger-tint-2-l)
+  );
+
+  --color-info-h: 220;
+  --color-info-s: 4%;
+  --color-info-l: 42%;
+  --color-info: hsl(
+				  var(--color-info-h),
+				  var(--color-info-s),
+				  var(--color-info-l)
+  );
+
+  --color-info-tint-1-l: 12%;
+  --color-info-tint-1: hsl(
+				  var(--color-info-h),
+				  var(--color-info-s),
+				  var(--color-info-tint-1-l)
+  );
+
+  --color-info-tint-2-l: 4%;
+  --color-info-tint-2: hsl(
+				  var(--color-info-h),
+				  var(--color-info-s),
+				  var(--color-info-tint-2-l)
+  );
+
+  --color-grey-h: 228;
+  --color-grey-s: 10%;
+  --color-grey-l: 80%;
+  --color-grey: hsl(
+				  var(--color-grey-h),
+				  var(--color-grey-s),
+				  var(--color-grey-l)
+  );
+
+  --color-light-grey-h: 220;
+  --color-light-grey-s: 20%;
+  --color-light-grey-l: 88%;
+  --color-light-grey: hsl(
+				  var(--color-light-grey-h),
+				  var(--color-light-grey-s),
+				  var(--color-light-grey-l)
+  );
+
+  --color-neutral-h: 228;
+  --color-neutral-s: 10%;
+  --color-neutral-l: 50%;
+  --color-neutral: hsl(
+				  var(--color-neutral-h),
+				  var(--color-neutral-s),
+				  var(--color-neutral-l)
+  );
+
+  --color-text-dark-h: 0;
+  --color-text-dark-s: 0%;
+  --color-text-dark-l: 100%;
+  --color-text-dark: hsl(
+				  var(--color-text-dark-h),
+				  var(--color-text-dark-s),
+				  var(--color-text-dark-l)
+  );
+
+  --color-text-base-h: 240;
+  --color-text-base-s: 4%;
+  --color-text-base-l: 49%;
+  --color-text-base: hsl(
+				  var(--color-text-base-h),
+				  var(--color-text-base-s),
+				  var(--color-text-base-l)
+  );
+
+  --color-text-light-h: 220;
+  --color-text-light-s: 4%;
+  --color-text-light-l: 42%;
+  --color-text-light: hsl(
+				  var(--color-text-light-h),
+				  var(--color-text-light-s),
+				  var(--color-text-light-l)
+  );
+
+  --color-text-lighter-h: 222;
+  --color-text-lighter-s: 17%;
+  --color-text-lighter-l: 12%;
+  --color-text-lighter: hsl(
+				  var(--color-text-lighter-h),
+				  var(--color-text-lighter-s),
+				  var(--color-text-lighter-l)
+  );
+
+  --color-text-xlight-h: 0;
+  --color-text-xlight-s: 0%;
+  --color-text-xlight-l: 100%;
+  --color-text-xlight: hsl(
+				  var(--color-text-xlight-h),
+				  var(--color-text-xlight-s),
+				  var(--color-text-xlight-l)
+  );
+
+  --color-foreground-base-h: 220;
+  --color-foreground-base-s: 20%;
+  --color-foreground-base-l: 12%;
+  --color-foreground-base: hsl(
+				  var(--color-foreground-base-h),
+				  var(--color-foreground-base-s),
+				  var(--color-foreground-base-l)
+  );
+
+  --color-foreground-light-h: 0;
+  --color-foreground-light-s: 0%;
+  --color-foreground-light-l: 7%;
+  --color-foreground-light: hsl(
+				  var(--color-foreground-light-h),
+				  var(--color-foreground-light-s),
+				  var(--color-foreground-light-l)
+  );
+
+  --color-foreground-xlight-h: 0;
+  --color-foreground-xlight-s: 0%;
+  --color-foreground-xlight-l: 0%;
+  --color-foreground-xlight: hsl(
+				  var(--color-foreground-xlight-h),
+				  var(--color-foreground-xlight-s),
+				  var(--color-foreground-xlight-l)
+  );
+
+  --color-background-dark-h: 0;
+  --color-background-dark-s: 0%;
+  --color-background-dark-l: 100%;
+  --color-background-dark: hsl(
+				  var(--color-background-dark-h),
+				  var(--color-background-dark-s),
+				  var(--color-background-dark-l)
+  );
+
+  --color-background-base-h: 252;
+  --color-background-base-s: 71%;
+  --color-background-base-l: 99%;
+  --color-background-base: hsl(
+				  var(--color-background-base-h),
+				  var(--color-background-base-s),
+				  var(--color-background-base-l)
+  );
+
+  --color-background-light-h: 220;
+  --color-background-light-s: 27%;
+  --color-background-light-l: 98%;
+  --color-background-light: hsl(
+				  var(--color-background-light-h),
+				  var(--color-background-light-s),
+				  var(--color-background-light-l)
+  );
+
+  --color-background-lighter-h: 220;
+  --color-background-lighter-s: 30%;
+  --color-background-lighter-l: 96%;
+  --color-background-lighter: hsl(
+				  var(--color-background-lighter-h),
+				  var(--color-background-lighter-s),
+				  var(--color-background-lighter-l)
+  );
+
+  --color-background-xlight-h: 240;
+  --color-background-xlight-s: 4%;
+  --color-background-xlight-l: 19%;
+  --color-background-xlight: hsl(
+				  var(--color-background-xlight-h),
+				  var(--color-background-xlight-s),
+				  var(--color-background-xlight-l)
+  );
+
+  // Generated Color Shades from 50 to 950
+  // Not yet used in design system
+  @each $color in ('neutral', 'success', 'warning', 'danger') {
+	@each $shade in (50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950) {
+	  --color-#{$color}-#{$shade}-l: #{math.div($shade, 10)}#{'%'};
+	  --color-#{$color}-#{$shade}: hsl(var(--color-#{$color}-h), var(--color-#{$color}-s), var(--color-#{$color}-#{$shade}-l));
+	}
+  }
 }
 
 body.theme-dark {
-	@include theme;
+  @include theme;
 }
diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss
index 70ddb454b5dc8..f60eeae641583 100644
--- a/packages/design-system/theme/src/_tokens.scss
+++ b/packages/design-system/theme/src/_tokens.scss
@@ -10,30 +10,24 @@
 				  var(--color-primary-l)
   );
 
-  --color-primary-tint-1-h: 11;
-  --color-primary-tint-1-s: 100%;
   --color-primary-tint-1-l: 88%;
   --color-primary-tint-1: hsl(
-				  var(--color-primary-tint-2-h),
-				  var(--color-primary-tint-2-s),
+				  var(--color-primary-h),
+				  var(--color-primary-s),
 				  var(--color-primary-tint-1-l)
   );
 
-  --color-primary-tint-2-h: 11;
-  --color-primary-tint-2-s: 100%;
-  --color-primary-tint-2-l: 95%;
+  --color-primary-tint-2-l: 94.5%;
   --color-primary-tint-2: hsl(
-				  var(--color-primary-tint-2-h),
-				  var(--color-primary-tint-2-s),
+				  var(--color-primary-h),
+				  var(--color-primary-s),
 				  var(--color-primary-tint-2-l)
   );
 
-  --color-primary-tint-3-h: 4;
-  --color-primary-tint-3-s: 100%;
-  --color-primary-tint-3-l: 97%;
+  --color-primary-tint-3-l: 96.9%;
   --color-primary-tint-3: hsl(
-				  var(--color-primary-tint-3-h),
-				  var(--color-primary-tint-3-s),
+				  var(--color-primary-h),
+				  var(--color-primary-s),
 				  var(--color-primary-tint-3-l)
   );
 

From d223080c3ad9ffa72911c756acf5545728c90f2c Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 18 Jul 2022 15:38:10 +0300
Subject: [PATCH 28/42] Data pinning (#3512)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: Aligned n8n-button usage inside of editor-ui.

* feat: Added edit data button on json hover.

* feat: Extracted code editor into separate form component.

* feat: Added edit data button on json hover.

* feat: Added pinData and edit mode methods.

* :fire: Remove conflict markers

* :pencil2: Update i18n keys

* :zap: Add JSON validation

* :card_file_box: Add `pinData` column to `workflow_entity`

* :blue_book: Tighten type

* :zap: Make `pinData` column nullable

* :zap: Adjust workflow endpoints for pin data

* :blue_book: Improve types

* :pencil2: Improve wording

* Inject pindata into items flow (#3420)

* :zap: Inject pin data - Second approach

* :fire: Remove unneeded lint exception

* feat: Added edit data button on json hover.

* feat: Extracted code editor into separate form component.

* feat: Added edit data button on json hover.

* fix: Fixed rebase conflicts.

* :rewind: Undo button change

* :bug: Fix runNode call

Adjust per update in bdb84130d687811d65337ff6b025e7cb0eae8256

* :test_tube: Fix workflow tests

* :bug: More merge conflict fixes

* feat: Added pin/unpin button and store mutations.

* feat: Size check. Various design and ux improvements.

* :zap: Add transformer

* :zap: Hoist pin data

* :zap: Adjust endpoints for hoisted pin data

* :blue_book: Expand interface

* :bug: Fix stray array

* :shirt: Fix build

* :shirt: Add lint exception

* :shirt: Fix header

* :art: Add color secondary tints

* :sparkles: Create `HeaderMessage` component

* :zap: Adjust `InfoTip` component

* :sparkles: Add `HeaderMessage` to `RunData`

* :bug: Fix console error

* :shirt: Fix lint

* :zap: Consolidate `HeaderMessage` and `Callout`

* :rewind: Undo `InfoTip` changes

* :fire: Remove duplicate icons

* :zap: Simplify template

* :art: Change cursor for action text

* :shirt: Fix lint

* :zap: Add URL

* :bug: Fix handler name

* :zap: Use constant

* :recycle: Refactor per feedback

* fix: Various fixes after data pinning relocation.

* fix: Added store mutation for setting pinned data.

* feat: Added pinned state for workflow canvas node.

* fix: Fixed workflow saving.

* fix: Removed pinData hoisting (no longer necessary).

* feat: Added canPinData flag to hide for input pane and binary data. Fixed unpin and execute flow.

* :zap: Fixes for canvas pin data (#3587)

* :zap: Fixes for canvas pin data

* :blue_book: Rename type

* :test_tube: Fix unrelated Public API test

* :fire: Remove logging

* feat: Updated pinData mixin to no longer include extra fields.

* :zap: Output same pindata for every run

* :art: Fix cropping

* :fire: Remove unrelated logging

* feat: Moved edit button next to pin button.

* feat: Changed data to be inserted for empty state.

* chore: Changed invalid editor output translation.

* feat: Added error line reporting on JSON Validation.

* feat: Migrated pinData edit mode to store.

* chore: Merged duplicate node border color condition.

* feat: Moved pin data validation to mixin. Added check before closing ndv modal.

* fix: Changed pinned data size calculation to discard active node pin data.

* feat: Added support for rename and delete node with pin data.

* feat: Simplified editing state. Fixed edit mode in input panel after store migration.

* feat: Various data pinning improvements.

* fix: Fixed callout link underline.

* refactor: Added support for both string and objects for data size check.

* feat: Added disabled node check for input panel. Fixed monaco editor resizing.

* fix: Fixed edit mode footer size.

* :zap: Fix pindata items per run

* :shirt: Remove unneeded exception

* refactor: Added isValidPinData() helper method.

* refactor: Changed how string size in bytes in calculated.g

* refactor: Updated pinData mixin interface.

* refactor: Merged filter and reduce in pinDataSize calculation.

* fix: Changed code-editor to correct type.

* fix: Added insert test data message to trigger nodes.

* feat: Disabled data pinning for multiple output nodes.

* refactor: Updated ndv.input.disabled translation to include node name.

* refactor: Aligned n8n-button usage inside of editor-ui.

* feat: Added edit data button on json hover.

* feat: Extracted code editor into separate form component.

* feat: Added edit data button on json hover.

* feat: Added pinData and edit mode methods.

* :fire: Remove conflict markers

* :pencil2: Update i18n keys

* :zap: Add JSON validation

* :card_file_box: Add `pinData` column to `workflow_entity`

* :blue_book: Tighten type

* :zap: Make `pinData` column nullable

* :zap: Adjust workflow endpoints for pin data

* :blue_book: Improve types

* :pencil2: Improve wording

* Inject pindata into items flow (#3420)

* :zap: Inject pin data - Second approach

* :fire: Remove unneeded lint exception

* feat: Added edit data button on json hover.

* feat: Extracted code editor into separate form component.

* feat: Added edit data button on json hover.

* fix: Fixed rebase conflicts.

* :rewind: Undo button change

* :bug: Fix runNode call

Adjust per update in bdb84130d687811d65337ff6b025e7cb0eae8256

* :test_tube: Fix workflow tests

* :bug: More merge conflict fixes

* feat: Added pin/unpin button and store mutations.

* feat: Size check. Various design and ux improvements.

* :zap: Add transformer

* :zap: Hoist pin data

* :zap: Adjust endpoints for hoisted pin data

* :blue_book: Expand interface

* :bug: Fix stray array

* :shirt: Fix build

* :art: Add color secondary tints

* :sparkles: Create `HeaderMessage` component

* :zap: Adjust `InfoTip` component

* :sparkles: Add `HeaderMessage` to `RunData`

* :bug: Fix console error

* :shirt: Fix lint

* :zap: Consolidate `HeaderMessage` and `Callout`

* :rewind: Undo `InfoTip` changes

* :fire: Remove duplicate icons

* :zap: Simplify template

* :art: Change cursor for action text

* :shirt: Fix lint

* :zap: Add URL

* :bug: Fix handler name

* :zap: Use constant

* :recycle: Refactor per feedback

* fix: Various fixes after data pinning relocation.

* fix: Added store mutation for setting pinned data.

* feat: Added pinned state for workflow canvas node.

* :zap: Fixes for canvas pin data (#3587)

* :zap: Fixes for canvas pin data

* :blue_book: Rename type

* :test_tube: Fix unrelated Public API test

* :fire: Remove logging

* feat: Updated pinData mixin to no longer include extra fields.

* fix: Removed pinData hoisting (no longer necessary).

* chore: Merged duplicate node border color condition.

* :zap: Output same pindata for every run

* :art: Fix cropping

* :bug: Fix excess closing template tag

* fix: Removed rogue template tag after merge.

* fix: Fixed code-editor resizing when moving ndv panel.

* feat: Added node duplication pin data.

* :zap: Implement telemetry

* :recycle: Add clarifications from call

* fix: Fixed run data header height.

* feat: Removed border from pin data callout.

* feat: Added line-break before 'or insert pin data'.

* feat: Changed enterEditMode to always insert test data if there's no execution data.

* feat: Removed copy output tooltip.

* feat: Removed unpin tooltip.

* fix: Removed thumbtack icon rotation.

* fix: Removed run info from Edit Output title.

* feat: Hid edit and pin buttons when editing.

* feat: Updated monaco code-editor padding and borders.

* feat: Progress on pinData error message format

* feat: Updated copy feature to work without any selected value.

* feat: Moved save and cancel buttons. Cleared notifications on save.

* feat: Changed pin data beforeClosing confirm text.

* feat: Closing ndv when discarding or saving pindata on close.

* feat: Added split in batches node to pin data denylist.

* fix: Added missing margin-bottom to webhook node.

* feat: Moved thumbtack icon to the right, replacing the checkmark.

* fix: Hid pagination while editing.

* feat: Added pin data discovery flow.

* feat: Changed pin data discovery flow to avoid tooltip glitching.

* fix: Changed copy selection to copy all input data.

* feat: Updated pin data validation error message for unexpected single quotes.

* fix: Replaced :manual='true' prop with manual shorthand.

* fix: Removed unused variable.

* chore: Renamed translation key to node.discovery.pinData.

* refactor: Extracted isPinDataNodeType to pinData mixin.

* fix: Updated watch condition to improve performance.

* refactor: Renamed some pin data variables and methods as per review.

* fix: Added partial translation for JSON.parse pin data error messages.

* chore: Temporarily disabled failing unit test.

* :test_tube: Fix data pinning workflow retrieval test

* :fire: Remove unused imports

* :fire: Remove leftover line

* :zap: Skip pindata node issues on BE

* :zap: Skip pindata node issues on FE

* :zap: Hide `RunInfo` for pindata node

* :zap: Hide purple banner in edit output mode

* feat: Updated data pinning discoverability flow.

* fix: Fixed paginated data pinning.

* fix: Disabled pin data in read only mode.

* :bug: Fix runtime error with non-array

* fix: Loading pin data when opening execution.

* :zap: Adjust stale data warning for pinned data

* :zap: Skip auth in endpoint

* :zap: Mark start node for pinned trigger

* :pencil2: Comment on passthrough

* :fire: Remove comment

* Final pindata metrics changes (#3673)

* :bug: Fix `pinData` tracked as `0`

* :zap: Add `is_pinned` to `nodesGraph`

* :blue_book: Extend `IWorkflowBase`

* :zap: Handle `pinData` being `undefined`

* :zap: Add `data_pinning_tooltip_presented`

* :recycle: Refactor to remove circular dependency

* fix: Added pin data handling when importing workflow. (#3698)

* :fire: Remove helper from WorkflowExecute

* :zap: Add logic for single pinned trigger

* :shirt: Remove lint exception

* fix: Added pin data handling in importWorkflowExact.

* N8N-4077 data pinning discoverability part 2 (#3701)

* fix: Fixed pin data discovery tooltip position when moving canvas.

* feat: Updated data pinning discovery tooltip copy.

* Fix data pinning build (#3702)

* :zap: Disable edit button for disabled node

* :zap: Ensure disabled pinned nodes are passthrough

* :bug: Fix JSON key unfurling in edit mode

* :zap: Improve implementation

* :bug: Fix console error

* fix: Fixed copying pinned output data. (#3715)

* Fix pinning for webhook responding with output from last node (#3719)

* fix: Fixed entering edit mode after refresh.

* fix: Fixed type error during build.

* fix: RunData import formatting.

* chore: Updated pin data types.

* fix: Added missing type to stringSizeInBytes.

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
---
 packages/cli/src/Interfaces.ts                |   2 +
 packages/cli/src/Server.ts                    | 154 ++---
 packages/cli/src/WebhookHelpers.ts            |   4 +
 packages/cli/src/WorkflowHelpers.ts           |  23 +-
 packages/cli/src/WorkflowRunner.ts            |   8 +-
 packages/cli/src/WorkflowRunnerProcess.ts     |  16 +-
 packages/cli/src/api/workflows.api.ts         | 134 ++++
 .../src/databases/entities/WorkflowEntity.ts  |  11 +-
 .../mysqldb/1654090101303-IntroducePinData.ts |  25 +
 .../src/databases/migrations/mysqldb/index.ts |   2 +
 .../1654090467022-IntroducePinData.ts         |  33 +
 .../databases/migrations/postgresdb/index.ts  |   2 +
 .../sqlite/1654089251344-IntroducePinData.ts  |  33 +
 .../src/databases/migrations/sqlite/index.ts  |   2 +
 .../cli/src/databases/utils/transformers.ts   |  10 +
 packages/cli/src/requests.d.ts                |   2 +
 .../integration/publicApi/workflows.test.ts   |   5 +-
 .../cli/test/integration/shared/testDb.ts     |   2 +-
 .../cli/test/integration/shared/types.d.ts    |   1 +
 packages/cli/test/integration/shared/utils.ts |  16 +-
 .../test/integration/workflows.api.test.ts    | 107 ++++
 packages/core/src/WorkflowExecute.ts          |  67 +-
 .../src/components/N8nCallout/Callout.vue     | 115 ++++
 .../N8nCallout/N8nCallout.stories.ts          | 107 ++++
 .../src/components/N8nCallout/index.ts        |   3 +
 .../components/N8nIconButton/IconButton.vue   |  30 +-
 .../src/components/N8nLink/Link.vue           |  43 +-
 .../design-system/src/components/index.ts     |   2 +
 packages/design-system/theme/src/_tokens.scss |  21 +
 packages/editor-ui/src/Interface.ts           |  10 +
 .../editor-ui/src/components/CodeEdit.vue     | 139 ++--
 .../src/components/HoverableNodeIcon.vue      |   2 +-
 packages/editor-ui/src/components/Node.vue    |  75 ++-
 .../src/components/NodeDetailsView.vue        | 111 +++-
 .../src/components/NodeExecuteButton.vue      |  38 +-
 .../editor-ui/src/components/NodeSettings.vue |  11 +-
 .../editor-ui/src/components/OutputPanel.vue  |  67 +-
 packages/editor-ui/src/components/RunData.vue | 592 +++++++++++++++++-
 .../editor-ui/src/components/TriggerPanel.vue |   8 +-
 .../src/components/forms/CodeEditor.vue       | 136 ++++
 .../editor-ui/src/components/forms/index.ts   |   1 +
 packages/editor-ui/src/components/helpers.ts  |   8 +-
 .../src/components/mixins/nodeHelpers.ts      |  16 +-
 .../src/components/mixins/pinData.ts          |  85 +++
 .../src/components/mixins/workflowHelpers.ts  |   1 +
 .../src/components/mixins/workflowRun.ts      |   2 +
 packages/editor-ui/src/constants.ts           |  27 +
 .../src/event-bus/data-pinning-event-bus.ts   |   3 +
 packages/editor-ui/src/modules/ui.ts          |  11 +
 packages/editor-ui/src/plugins/components.ts  |   2 +
 .../src/plugins/i18n/locales/en.json          |  43 +-
 packages/editor-ui/src/plugins/icons.ts       |   2 +
 packages/editor-ui/src/store.ts               |  64 +-
 packages/editor-ui/src/views/NodeView.vue     |  22 +-
 packages/workflow/src/Interfaces.ts           |   8 +
 packages/workflow/src/NodeHelpers.ts          |   5 +-
 packages/workflow/src/TelemetryHelpers.ts     |   1 +
 packages/workflow/src/Workflow.ts             |   7 +-
 58 files changed, 2093 insertions(+), 384 deletions(-)
 create mode 100644 packages/cli/src/api/workflows.api.ts
 create mode 100644 packages/cli/src/databases/migrations/mysqldb/1654090101303-IntroducePinData.ts
 create mode 100644 packages/cli/src/databases/migrations/postgresdb/1654090467022-IntroducePinData.ts
 create mode 100644 packages/cli/src/databases/migrations/sqlite/1654089251344-IntroducePinData.ts
 create mode 100644 packages/cli/test/integration/workflows.api.test.ts
 create mode 100644 packages/design-system/src/components/N8nCallout/Callout.vue
 create mode 100644 packages/design-system/src/components/N8nCallout/N8nCallout.stories.ts
 create mode 100644 packages/design-system/src/components/N8nCallout/index.ts
 create mode 100644 packages/editor-ui/src/components/forms/CodeEditor.vue
 create mode 100644 packages/editor-ui/src/components/forms/index.ts
 create mode 100644 packages/editor-ui/src/components/mixins/pinData.ts
 create mode 100644 packages/editor-ui/src/event-bus/data-pinning-event-bus.ts

diff --git a/packages/cli/src/Interfaces.ts b/packages/cli/src/Interfaces.ts
index be09ec0353107..c305a41c25d24 100644
--- a/packages/cli/src/Interfaces.ts
+++ b/packages/cli/src/Interfaces.ts
@@ -15,6 +15,7 @@ import {
 	ITelemetrySettings,
 	ITelemetryTrackProperties,
 	IWorkflowBase as IWorkflowBaseWorkflow,
+	PinData,
 	Workflow,
 	WorkflowExecuteMode,
 } from 'n8n-workflow';
@@ -646,6 +647,7 @@ export interface IWorkflowExecutionDataProcess {
 	executionMode: WorkflowExecuteMode;
 	executionData?: IRunExecutionData;
 	runData?: IRunData;
+	pinData?: PinData;
 	retryOf?: number | string;
 	sessionId?: string;
 	startNodes?: string[];
diff --git a/packages/cli/src/Server.ts b/packages/cli/src/Server.ts
index ec677a713fbcf..9369b14206332 100644
--- a/packages/cli/src/Server.ts
+++ b/packages/cli/src/Server.ts
@@ -74,6 +74,7 @@ import {
 	IWorkflowBase,
 	LoggerProxy,
 	NodeHelpers,
+	PinData,
 	WebhookHttpMethod,
 	Workflow,
 	WorkflowExecuteMode,
@@ -129,6 +130,7 @@ import {
 	WorkflowRunner,
 	getCredentialForUser,
 	getCredentialWithoutUser,
+	IWorkflowDb,
 } from '.';
 
 import config from '../config';
@@ -156,9 +158,9 @@ import type {
 } from './requests';
 import { DEFAULT_EXECUTIONS_GET_ALL_LIMIT, validateEntity } from './GenericHelpers';
 import { ExecutionEntity } from './databases/entities/ExecutionEntity';
-import { SharedWorkflow } from './databases/entities/SharedWorkflow';
 import { AUTH_COOKIE_NAME, RESPONSE_ERROR_MESSAGES } from './constants';
 import { credentialsController } from './api/credentials.api';
+import { workflowsController } from './api/workflows.api';
 import { oauth2CredentialController } from './api/oauth2Credential.api';
 import {
 	getInstanceBaseUrl,
@@ -166,6 +168,7 @@ import {
 	isUserManagementEnabled,
 } from './UserManagement/UserManagementHelper';
 import { loadPublicApiVersions } from './PublicApi';
+import { SharedWorkflow } from './databases/entities/SharedWorkflow';
 
 require('body-parser-xml')(bodyParser);
 
@@ -754,74 +757,6 @@ class App {
 		// Workflow
 		// ----------------------------------------
 
-		// Creates a new workflow
-		this.app.post(
-			`/${this.restEndpoint}/workflows`,
-			ResponseHelper.send(async (req: WorkflowRequest.Create) => {
-				delete req.body.id; // delete if sent
-
-				const newWorkflow = new WorkflowEntity();
-
-				Object.assign(newWorkflow, req.body);
-
-				await validateEntity(newWorkflow);
-
-				await this.externalHooks.run('workflow.create', [newWorkflow]);
-
-				const { tags: tagIds } = req.body;
-
-				if (tagIds?.length && !config.getEnv('workflowTagsDisabled')) {
-					newWorkflow.tags = await Db.collections.Tag.findByIds(tagIds, {
-						select: ['id', 'name'],
-					});
-				}
-
-				await WorkflowHelpers.replaceInvalidCredentials(newWorkflow);
-
-				let savedWorkflow: undefined | WorkflowEntity;
-
-				await getConnection().transaction(async (transactionManager) => {
-					savedWorkflow = await transactionManager.save<WorkflowEntity>(newWorkflow);
-
-					const role = await Db.collections.Role.findOneOrFail({
-						name: 'owner',
-						scope: 'workflow',
-					});
-
-					const newSharedWorkflow = new SharedWorkflow();
-
-					Object.assign(newSharedWorkflow, {
-						role,
-						user: req.user,
-						workflow: savedWorkflow,
-					});
-
-					await transactionManager.save<SharedWorkflow>(newSharedWorkflow);
-				});
-
-				if (!savedWorkflow) {
-					LoggerProxy.error('Failed to create workflow', { userId: req.user.id });
-					throw new ResponseHelper.ResponseError('Failed to save workflow');
-				}
-
-				if (tagIds && !config.getEnv('workflowTagsDisabled')) {
-					savedWorkflow.tags = TagHelpers.sortByRequestOrder(savedWorkflow.tags, {
-						requestOrder: tagIds,
-					});
-				}
-
-				await this.externalHooks.run('workflow.afterCreate', [savedWorkflow]);
-				void InternalHooksManager.getInstance().onWorkflowCreated(req.user.id, newWorkflow, false);
-
-				const { id, ...rest } = savedWorkflow;
-
-				return {
-					id: id.toString(),
-					...rest,
-				};
-			}),
-		);
-
 		// Reads and returns workflow data from an URL
 		this.app.get(
 			`/${this.restEndpoint}/workflows/from-url`,
@@ -947,50 +882,6 @@ class App {
 			}),
 		);
 
-		// Returns a specific workflow
-		this.app.get(
-			`/${this.restEndpoint}/workflows/:id`,
-			ResponseHelper.send(async (req: WorkflowRequest.Get) => {
-				const { id: workflowId } = req.params;
-
-				let relations = ['workflow', 'workflow.tags'];
-
-				if (config.getEnv('workflowTagsDisabled')) {
-					relations = relations.filter((relation) => relation !== 'workflow.tags');
-				}
-
-				const shared = await Db.collections.SharedWorkflow.findOne({
-					relations,
-					where: whereClause({
-						user: req.user,
-						entityType: 'workflow',
-						entityId: workflowId,
-					}),
-				});
-
-				if (!shared) {
-					LoggerProxy.info('User attempted to access a workflow without permissions', {
-						workflowId,
-						userId: req.user.id,
-					});
-					throw new ResponseHelper.ResponseError(
-						`Workflow with ID "${workflowId}" could not be found.`,
-						undefined,
-						404,
-					);
-				}
-
-				const {
-					workflow: { id, ...rest },
-				} = shared;
-
-				return {
-					id: id.toString(),
-					...rest,
-				};
-			}),
-		);
-
 		// Updates an existing workflow
 		this.app.patch(
 			`/${this.restEndpoint}/workflows/:id`,
@@ -1189,6 +1080,7 @@ class App {
 				): Promise<IExecutionPushResponse> => {
 					const { workflowData } = req.body;
 					const { runData } = req.body;
+					const { pinData } = req.body;
 					const { startNodes } = req.body;
 					const { destinationNode } = req.body;
 					const executionMode = 'manual';
@@ -1196,12 +1088,15 @@ class App {
 
 					const sessionId = GenericHelpers.getSessionId(req);
 
+					const pinnedTrigger = findFirstPinnedTrigger(workflowData, pinData);
+
 					// If webhooks nodes exist and are active we have to wait for till we receive a call
 					if (
-						runData === undefined ||
-						startNodes === undefined ||
-						startNodes.length === 0 ||
-						destinationNode === undefined
+						pinnedTrigger === undefined &&
+						(runData === undefined ||
+							startNodes === undefined ||
+							startNodes.length === 0 ||
+							destinationNode === undefined)
 					) {
 						const additionalData = await WorkflowExecuteAdditionalData.getBase(req.user.id);
 						const nodeTypes = NodeTypes();
@@ -1239,11 +1134,17 @@ class App {
 						destinationNode,
 						executionMode,
 						runData,
+						pinData,
 						sessionId,
 						startNodes,
 						workflowData,
 						userId: req.user.id,
 					};
+
+					if (pinnedTrigger) {
+						data.startNodes = [pinnedTrigger.name];
+					}
+
 					const workflowRunner = new WorkflowRunner();
 					const executionId = await workflowRunner.run(data);
 
@@ -1254,6 +1155,8 @@ class App {
 			),
 		);
 
+		this.app.use(`/${this.restEndpoint}/workflows`, workflowsController);
+
 		// Retrieves all tags, with or without usage count
 		this.app.get(
 			`/${this.restEndpoint}/tags`,
@@ -2912,3 +2815,20 @@ function isOAuth(credType: ICredentialType) {
 		)
 	);
 }
+
+const TRIGGER_NODE_SUFFIXES = ['trigger', 'webhook'];
+
+const isTrigger = (str: string) =>
+	TRIGGER_NODE_SUFFIXES.some((suffix) => str.toLowerCase().includes(suffix));
+
+function findFirstPinnedTrigger(workflow: IWorkflowDb, pinData?: PinData) {
+	if (!pinData) return;
+
+	const firstPinnedTriggerName = Object.keys(pinData).find(isTrigger);
+
+	if (!firstPinnedTriggerName) return;
+
+	return workflow.nodes.find(
+		({ type, name }) => isTrigger(type) && name === firstPinnedTriggerName,
+	);
+}
diff --git a/packages/cli/src/WebhookHelpers.ts b/packages/cli/src/WebhookHelpers.ts
index 2083acb510876..e737e20501a62 100644
--- a/packages/cli/src/WebhookHelpers.ts
+++ b/packages/cli/src/WebhookHelpers.ts
@@ -485,6 +485,10 @@ export async function executeWebhook(
 					return undefined;
 				}
 
+				if (workflowData.pinData) {
+					data.data.resultData.pinData = workflowData.pinData;
+				}
+
 				const returnData = WorkflowHelpers.getDataLastExecutedNodeData(data);
 				if (data.data.resultData.error || returnData?.error !== undefined) {
 					if (!didSendResponse) {
diff --git a/packages/cli/src/WorkflowHelpers.ts b/packages/cli/src/WorkflowHelpers.ts
index e625c6c591761..e7af8c1b037ad 100644
--- a/packages/cli/src/WorkflowHelpers.ts
+++ b/packages/cli/src/WorkflowHelpers.ts
@@ -50,7 +50,7 @@ const ERROR_TRIGGER_TYPE = config.getEnv('nodes.errorTriggerType');
  * @returns {(ITaskData | undefined)}
  */
 export function getDataLastExecutedNodeData(inputData: IRun): ITaskData | undefined {
-	const { runData } = inputData.data.resultData;
+	const { runData, pinData = {} } = inputData.data.resultData;
 	const { lastNodeExecuted } = inputData.data.resultData;
 
 	if (lastNodeExecuted === undefined) {
@@ -61,7 +61,26 @@ export function getDataLastExecutedNodeData(inputData: IRun): ITaskData | undefi
 		return undefined;
 	}
 
-	return runData[lastNodeExecuted][runData[lastNodeExecuted].length - 1];
+	const lastNodeRunData = runData[lastNodeExecuted][runData[lastNodeExecuted].length - 1];
+
+	let lastNodePinData = pinData[lastNodeExecuted];
+
+	if (lastNodePinData) {
+		if (!Array.isArray(lastNodePinData)) lastNodePinData = [lastNodePinData];
+
+		const itemsPerRun = lastNodePinData.map((item, index) => {
+			return { json: item, pairedItem: { item: index } };
+		});
+
+		return {
+			startTime: 0,
+			executionTime: 0,
+			data: { main: [itemsPerRun] },
+			source: lastNodeRunData.source,
+		};
+	}
+
+	return lastNodeRunData;
 }
 
 /**
diff --git a/packages/cli/src/WorkflowRunner.ts b/packages/cli/src/WorkflowRunner.ts
index cc3b0d7fcabf2..9cce04ffa4063 100644
--- a/packages/cli/src/WorkflowRunner.ts
+++ b/packages/cli/src/WorkflowRunner.ts
@@ -310,7 +310,12 @@ export class WorkflowRunner {
 
 				// Can execute without webhook so go on
 				const workflowExecute = new WorkflowExecute(additionalData, data.executionMode);
-				workflowExecution = workflowExecute.run(workflow, undefined, data.destinationNode);
+				workflowExecution = workflowExecute.run(
+					workflow,
+					undefined,
+					data.destinationNode,
+					data.pinData,
+				);
 			} else {
 				Logger.debug(`Execution ID ${executionId} is a partial execution.`, { executionId });
 				// Execute only the nodes between start and destination nodes
@@ -320,6 +325,7 @@ export class WorkflowRunner {
 					data.runData,
 					data.startNodes,
 					data.destinationNode,
+					data.pinData,
 				);
 			}
 
diff --git a/packages/cli/src/WorkflowRunnerProcess.ts b/packages/cli/src/WorkflowRunnerProcess.ts
index d77f5d329fdec..468ef57383a30 100644
--- a/packages/cli/src/WorkflowRunnerProcess.ts
+++ b/packages/cli/src/WorkflowRunnerProcess.ts
@@ -345,9 +345,22 @@ export class WorkflowRunnerProcess {
 		) {
 			// Execute all nodes
 
+			let startNode;
+			if (
+				this.data.startNodes?.length === 1 &&
+				Object.keys(this.data.pinData ?? {}).includes(this.data.startNodes[0])
+			) {
+				startNode = this.workflow.getNode(this.data.startNodes[0]) ?? undefined;
+			}
+
 			// Can execute without webhook so go on
 			this.workflowExecute = new WorkflowExecute(additionalData, this.data.executionMode);
-			return this.workflowExecute.run(this.workflow, undefined, this.data.destinationNode);
+			return this.workflowExecute.run(
+				this.workflow,
+				startNode,
+				this.data.destinationNode,
+				this.data.pinData,
+			);
 		}
 		// Execute only the nodes between start and destination nodes
 		this.workflowExecute = new WorkflowExecute(additionalData, this.data.executionMode);
@@ -356,6 +369,7 @@ export class WorkflowRunnerProcess {
 			this.data.runData,
 			this.data.startNodes,
 			this.data.destinationNode,
+			this.data.pinData,
 		);
 	}
 
diff --git a/packages/cli/src/api/workflows.api.ts b/packages/cli/src/api/workflows.api.ts
new file mode 100644
index 0000000000000..3afd63f8b7f24
--- /dev/null
+++ b/packages/cli/src/api/workflows.api.ts
@@ -0,0 +1,134 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable no-param-reassign */
+/* eslint-disable import/no-cycle */
+
+import express from 'express';
+import { LoggerProxy } from 'n8n-workflow';
+
+import { Db, ResponseHelper, whereClause, WorkflowHelpers } from '..';
+import config from '../../config';
+import * as TagHelpers from '../TagHelpers';
+import { SharedWorkflow } from '../databases/entities/SharedWorkflow';
+import { WorkflowEntity } from '../databases/entities/WorkflowEntity';
+import { validateEntity } from '../GenericHelpers';
+import { InternalHooksManager } from '../InternalHooksManager';
+import { externalHooks } from '../Server';
+import type { WorkflowRequest } from '../requests';
+
+export const workflowsController = express.Router();
+
+/**
+ * POST /workflows
+ */
+workflowsController.post(
+	'/',
+	ResponseHelper.send(async (req: WorkflowRequest.Create) => {
+		delete req.body.id; // delete if sent
+
+		const newWorkflow = new WorkflowEntity();
+
+		Object.assign(newWorkflow, req.body);
+
+		await validateEntity(newWorkflow);
+
+		await externalHooks.run('workflow.create', [newWorkflow]);
+
+		const { tags: tagIds } = req.body;
+
+		if (tagIds?.length && !config.getEnv('workflowTagsDisabled')) {
+			newWorkflow.tags = await Db.collections.Tag.findByIds(tagIds, {
+				select: ['id', 'name'],
+			});
+		}
+
+		await WorkflowHelpers.replaceInvalidCredentials(newWorkflow);
+
+		let savedWorkflow: undefined | WorkflowEntity;
+
+		await Db.transaction(async (transactionManager) => {
+			savedWorkflow = await transactionManager.save<WorkflowEntity>(newWorkflow);
+
+			const role = await Db.collections.Role.findOneOrFail({
+				name: 'owner',
+				scope: 'workflow',
+			});
+
+			const newSharedWorkflow = new SharedWorkflow();
+
+			Object.assign(newSharedWorkflow, {
+				role,
+				user: req.user,
+				workflow: savedWorkflow,
+			});
+
+			await transactionManager.save<SharedWorkflow>(newSharedWorkflow);
+		});
+
+		if (!savedWorkflow) {
+			LoggerProxy.error('Failed to create workflow', { userId: req.user.id });
+			throw new ResponseHelper.ResponseError('Failed to save workflow');
+		}
+
+		if (tagIds && !config.getEnv('workflowTagsDisabled')) {
+			savedWorkflow.tags = TagHelpers.sortByRequestOrder(savedWorkflow.tags, {
+				requestOrder: tagIds,
+			});
+		}
+
+		await externalHooks.run('workflow.afterCreate', [savedWorkflow]);
+		void InternalHooksManager.getInstance().onWorkflowCreated(req.user.id, newWorkflow, false);
+
+		const { id, ...rest } = savedWorkflow;
+
+		return {
+			id: id.toString(),
+			...rest,
+		};
+	}),
+);
+
+/**
+ * GET /workflows/:id
+ */
+workflowsController.get(
+	'/:id',
+	ResponseHelper.send(async (req: WorkflowRequest.Get) => {
+		const { id: workflowId } = req.params;
+
+		let relations = ['workflow', 'workflow.tags'];
+
+		if (config.getEnv('workflowTagsDisabled')) {
+			relations = relations.filter((relation) => relation !== 'workflow.tags');
+		}
+
+		const shared = await Db.collections.SharedWorkflow.findOne({
+			relations,
+			where: whereClause({
+				user: req.user,
+				entityType: 'workflow',
+				entityId: workflowId,
+			}),
+		});
+
+		if (!shared) {
+			LoggerProxy.info('User attempted to access a workflow without permissions', {
+				workflowId,
+				userId: req.user.id,
+			});
+			throw new ResponseHelper.ResponseError(
+				`Workflow with ID "${workflowId}" could not be found.`,
+				undefined,
+				404,
+			);
+		}
+
+		const {
+			workflow: { id, ...rest },
+		} = shared;
+
+		return {
+			id: id.toString(),
+			...rest,
+		};
+	}),
+);
diff --git a/packages/cli/src/databases/entities/WorkflowEntity.ts b/packages/cli/src/databases/entities/WorkflowEntity.ts
index 069f637737fe4..31b2b5fe70f0b 100644
--- a/packages/cli/src/databases/entities/WorkflowEntity.ts
+++ b/packages/cli/src/databases/entities/WorkflowEntity.ts
@@ -2,7 +2,7 @@
 /* eslint-disable import/no-cycle */
 import { Length } from 'class-validator';
 
-import { IConnections, IDataObject, INode, IWorkflowSettings } from 'n8n-workflow';
+import { IConnections, IDataObject, INode, IWorkflowSettings, PinData } from 'n8n-workflow';
 
 import {
 	BeforeUpdate,
@@ -22,7 +22,7 @@ import * as config from '../../../config';
 import { DatabaseType, IWorkflowDb } from '../..';
 import { TagEntity } from './TagEntity';
 import { SharedWorkflow } from './SharedWorkflow';
-import { objectRetriever } from '../utils/transformers';
+import { objectRetriever, serializer } from '../utils/transformers';
 
 function resolveDataType(dataType: string) {
 	const dbType = config.getEnv('database.type');
@@ -117,6 +117,13 @@ export class WorkflowEntity implements IWorkflowDb {
 	@OneToMany(() => SharedWorkflow, (sharedWorkflow) => sharedWorkflow.workflow)
 	shared: SharedWorkflow[];
 
+	@Column({
+		type: config.getEnv('database.type') === 'sqlite' ? 'text' : 'json',
+		nullable: true,
+		transformer: serializer,
+	})
+	pinData: PinData;
+
 	@BeforeUpdate()
 	setUpdateDate() {
 		this.updatedAt = new Date();
diff --git a/packages/cli/src/databases/migrations/mysqldb/1654090101303-IntroducePinData.ts b/packages/cli/src/databases/migrations/mysqldb/1654090101303-IntroducePinData.ts
new file mode 100644
index 0000000000000..c69a0848bea43
--- /dev/null
+++ b/packages/cli/src/databases/migrations/mysqldb/1654090101303-IntroducePinData.ts
@@ -0,0 +1,25 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+import { logMigrationEnd, logMigrationStart } from '../../utils/migrationHelpers';
+import config from '../../../../config';
+
+export class IntroducePinData1654090101303 implements MigrationInterface {
+	name = 'IntroducePinData1654090101303';
+
+	async up(queryRunner: QueryRunner): Promise<void> {
+		logMigrationStart(this.name);
+
+		const tablePrefix = config.getEnv('database.tablePrefix');
+
+		await queryRunner.query(
+			`ALTER TABLE \`${tablePrefix}workflow_entity\` ADD \`pinData\` json`,
+		);
+
+		logMigrationEnd(this.name);
+	}
+
+	async down(queryRunner: QueryRunner): Promise<void> {
+		const tablePrefix = config.getEnv('database.tablePrefix');
+
+		await queryRunner.query(`ALTER TABLE \`${tablePrefix}workflow_entity\` DROP COLUMN \`pinData\``);
+	}
+}
diff --git a/packages/cli/src/databases/migrations/mysqldb/index.ts b/packages/cli/src/databases/migrations/mysqldb/index.ts
index 31993d41cd603..a793ea3828a11 100644
--- a/packages/cli/src/databases/migrations/mysqldb/index.ts
+++ b/packages/cli/src/databases/migrations/mysqldb/index.ts
@@ -15,6 +15,7 @@ import { CreateUserManagement1646992772331 } from './1646992772331-CreateUserMan
 import { LowerCaseUserEmail1648740597343 } from './1648740597343-LowerCaseUserEmail';
 import { AddUserSettings1652367743993 } from './1652367743993-AddUserSettings';
 import { AddAPIKeyColumn1652905585850 } from './1652905585850-AddAPIKeyColumn';
+import { IntroducePinData1654090101303 } from './1654090101303-IntroducePinData';
 
 export const mysqlMigrations = [
 	InitialMigration1588157391238,
@@ -34,4 +35,5 @@ export const mysqlMigrations = [
 	LowerCaseUserEmail1648740597343,
 	AddUserSettings1652367743993,
 	AddAPIKeyColumn1652905585850,
+	IntroducePinData1654090101303,
 ];
diff --git a/packages/cli/src/databases/migrations/postgresdb/1654090467022-IntroducePinData.ts b/packages/cli/src/databases/migrations/postgresdb/1654090467022-IntroducePinData.ts
new file mode 100644
index 0000000000000..6b28194407265
--- /dev/null
+++ b/packages/cli/src/databases/migrations/postgresdb/1654090467022-IntroducePinData.ts
@@ -0,0 +1,33 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+import { logMigrationEnd, logMigrationStart } from '../../utils/migrationHelpers';
+import config from '../../../../config';
+
+export class IntroducePinData1654090467022 implements MigrationInterface {
+	name = 'IntroducePinData1654090467022';
+
+	async up(queryRunner: QueryRunner) {
+		logMigrationStart(this.name);
+
+		const schema = config.getEnv('database.postgresdb.schema');
+		const tablePrefix = config.getEnv('database.tablePrefix');
+
+		await queryRunner.query(`SET search_path TO ${schema}`);
+
+		await queryRunner.query(
+			`ALTER TABLE ${schema}.${tablePrefix}workflow_entity ADD "pinData" json`,
+		);
+
+		logMigrationEnd(this.name);
+	}
+
+	async down(queryRunner: QueryRunner) {
+		const schema = config.getEnv('database.postgresdb.schema');
+		const tablePrefix = config.getEnv('database.tablePrefix');
+
+		await queryRunner.query(`SET search_path TO ${schema}`);
+
+		await queryRunner.query(
+			`ALTER TABLE ${schema}.${tablePrefix}workflow_entity DROP COLUMN "pinData"`,
+		);
+	}
+}
diff --git a/packages/cli/src/databases/migrations/postgresdb/index.ts b/packages/cli/src/databases/migrations/postgresdb/index.ts
index 30cc17b873cd8..c8e689fb862c9 100644
--- a/packages/cli/src/databases/migrations/postgresdb/index.ts
+++ b/packages/cli/src/databases/migrations/postgresdb/index.ts
@@ -13,6 +13,7 @@ import { CreateUserManagement1646992772331 } from './1646992772331-CreateUserMan
 import { LowerCaseUserEmail1648740597343 } from './1648740597343-LowerCaseUserEmail';
 import { AddUserSettings1652367743993 } from './1652367743993-AddUserSettings';
 import { AddAPIKeyColumn1652905585850 } from './1652905585850-AddAPIKeyColumn';
+import { IntroducePinData1654090467022 } from './1654090467022-IntroducePinData';
 
 export const postgresMigrations = [
 	InitialMigration1587669153312,
@@ -30,4 +31,5 @@ export const postgresMigrations = [
 	LowerCaseUserEmail1648740597343,
 	AddUserSettings1652367743993,
 	AddAPIKeyColumn1652905585850,
+	IntroducePinData1654090467022,
 ];
diff --git a/packages/cli/src/databases/migrations/sqlite/1654089251344-IntroducePinData.ts b/packages/cli/src/databases/migrations/sqlite/1654089251344-IntroducePinData.ts
new file mode 100644
index 0000000000000..d36bca491baa6
--- /dev/null
+++ b/packages/cli/src/databases/migrations/sqlite/1654089251344-IntroducePinData.ts
@@ -0,0 +1,33 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+import { logMigrationEnd, logMigrationStart } from '../../utils/migrationHelpers';
+import config from '../../../../config';
+
+export class IntroducePinData1654089251344 implements MigrationInterface {
+	name = 'IntroducePinData1654089251344';
+
+	async up(queryRunner: QueryRunner): Promise<void> {
+		logMigrationStart(this.name);
+
+		const tablePrefix = config.getEnv('database.tablePrefix');
+
+		await queryRunner.query(
+			`ALTER TABLE \`${tablePrefix}workflow_entity\` ADD COLUMN "pinData" text`,
+		);
+
+		logMigrationEnd(this.name);
+	}
+
+	async down(queryRunner: QueryRunner): Promise<void> {
+		const tablePrefix = config.getEnv('database.tablePrefix');
+
+		await queryRunner.query(`ALTER TABLE \`${tablePrefix}workflow_entity\` RENAME TO "temporary_workflow_entity"`);
+		await queryRunner.query(
+			`CREATE TABLE \`${tablePrefix}workflow_entity\` (
+				"id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "name" varchar(128) NOT NULL, "active" boolean NOT NULL, "nodes" text NOT NULL, "connections" text NOT NULL, "createdAt" datetime NOT NULL, "updatedAt" datetime NOT NULL, "settings" text, "staticData" text`,
+		);
+		await queryRunner.query(
+			`INSERT INTO \`${tablePrefix}workflow_entity\` ("id", "name", "active", "nodes", "connections", "createdAt", "updatedAt", "settings", "staticData") SELECT "id", "name", "active", "nodes", "connections", "createdAt", "updatedAt", "settings", "staticData" FROM "temporary_workflow_entity"`,
+		);
+		await queryRunner.query(`DROP TABLE "temporary_workflow_entity"`);
+	}
+}
diff --git a/packages/cli/src/databases/migrations/sqlite/index.ts b/packages/cli/src/databases/migrations/sqlite/index.ts
index 1d51552e91430..c6044c5a7fc41 100644
--- a/packages/cli/src/databases/migrations/sqlite/index.ts
+++ b/packages/cli/src/databases/migrations/sqlite/index.ts
@@ -12,6 +12,7 @@ import { CreateUserManagement1646992772331 } from './1646992772331-CreateUserMan
 import { LowerCaseUserEmail1648740597343 } from './1648740597343-LowerCaseUserEmail';
 import { AddUserSettings1652367743993 } from './1652367743993-AddUserSettings';
 import { AddAPIKeyColumn1652905585850 } from './1652905585850-AddAPIKeyColumn';
+import { IntroducePinData1654089251344 } from './1654089251344-IntroducePinData';
 
 const sqliteMigrations = [
 	InitialMigration1588102412422,
@@ -28,6 +29,7 @@ const sqliteMigrations = [
 	LowerCaseUserEmail1648740597343,
 	AddUserSettings1652367743993,
 	AddAPIKeyColumn1652905585850,
+	IntroducePinData1654089251344,
 ];
 
 export { sqliteMigrations };
diff --git a/packages/cli/src/databases/utils/transformers.ts b/packages/cli/src/databases/utils/transformers.ts
index e3a77fc2df001..94f706a91d2d4 100644
--- a/packages/cli/src/databases/utils/transformers.ts
+++ b/packages/cli/src/databases/utils/transformers.ts
@@ -18,3 +18,13 @@ export const objectRetriever: ValueTransformer = {
 	from: (value: string | object): object =>
 		typeof value === 'string' ? (JSON.parse(value) as object) : value,
 };
+
+/**
+ * Transformer to store object as string and retrieve string as object.
+ */
+export const serializer: ValueTransformer = {
+	to: (value: object | string): string =>
+		typeof value === 'object' ? JSON.stringify(value) : value,
+	from: (value: string | object): object =>
+		typeof value === 'string' ? (JSON.parse(value) as object) : value,
+};
diff --git a/packages/cli/src/requests.d.ts b/packages/cli/src/requests.d.ts
index 9499dc25b1f6a..f6faf097cd894 100644
--- a/packages/cli/src/requests.d.ts
+++ b/packages/cli/src/requests.d.ts
@@ -8,6 +8,7 @@ import {
 	INodeCredentialTestRequest,
 	IRunData,
 	IWorkflowSettings,
+	PinData,
 } from 'n8n-workflow';
 
 import { User } from './databases/entities/User';
@@ -71,6 +72,7 @@ export declare namespace WorkflowRequest {
 		{
 			workflowData: IWorkflowDb;
 			runData: IRunData;
+			pinData: PinData;
 			startNodes?: string[];
 			destinationNode?: string;
 		}
diff --git a/packages/cli/test/integration/publicApi/workflows.test.ts b/packages/cli/test/integration/publicApi/workflows.test.ts
index e676b9c16461c..9d01a927f234e 100644
--- a/packages/cli/test/integration/publicApi/workflows.test.ts
+++ b/packages/cli/test/integration/publicApi/workflows.test.ts
@@ -38,7 +38,10 @@ beforeAll(async () => {
 });
 
 beforeEach(async () => {
-	await testDb.truncate(['SharedWorkflow', 'User', 'Workflow'], testDbName);
+	await testDb.truncate(
+		['SharedCredentials', 'SharedWorkflow', 'Tag', 'User', 'Workflow', 'Credentials'],
+		testDbName,
+	);
 
 	config.set('userManagement.disabled', false);
 	config.set('userManagement.isInstanceOwnerSetUp', true);
diff --git a/packages/cli/test/integration/shared/testDb.ts b/packages/cli/test/integration/shared/testDb.ts
index 3d7cc614021bc..e28a571e134e6 100644
--- a/packages/cli/test/integration/shared/testDb.ts
+++ b/packages/cli/test/integration/shared/testDb.ts
@@ -199,6 +199,7 @@ export async function truncate(collections: Array<CollectionName>, testDbName: s
 
 		const truncationPromises = collections.map((collection) => {
 			const tableName = toTableName(collection);
+			Db.collections[collection].clear();
 			return testDb.query(
 				`DELETE FROM ${tableName}; DELETE FROM sqlite_sequence WHERE name=${tableName};`,
 			);
@@ -221,7 +222,6 @@ export async function truncate(collections: Array<CollectionName>, testDbName: s
 		}
 
 		return await truncateMappingTables(dbType, collections, testDb);
-		// return Promise.resolve([])
 	}
 
 	/**
diff --git a/packages/cli/test/integration/shared/types.d.ts b/packages/cli/test/integration/shared/types.d.ts
index 1b31e598a4783..d628f7bf17888 100644
--- a/packages/cli/test/integration/shared/types.d.ts
+++ b/packages/cli/test/integration/shared/types.d.ts
@@ -17,6 +17,7 @@ type EndpointGroup =
 	| 'owner'
 	| 'passwordReset'
 	| 'credentials'
+	| 'workflows'
 	| 'publicApi';
 
 export type CredentialPayload = {
diff --git a/packages/cli/test/integration/shared/utils.ts b/packages/cli/test/integration/shared/utils.ts
index cfd681187e3f8..fc1e0d5ae855f 100644
--- a/packages/cli/test/integration/shared/utils.ts
+++ b/packages/cli/test/integration/shared/utils.ts
@@ -46,6 +46,7 @@ import { loadPublicApiVersions } from '../../../src/PublicApi/';
 import type { User } from '../../../src/databases/entities/User';
 import type { ApiPath, EndpointGroup, PostgresSchemaSection, TriggerTime } from './types';
 import type { N8nApp } from '../../../src/UserManagement/Interfaces';
+import { workflowsController } from '../../../src/api/workflows.api';
 
 /**
  * Initialize a test server.
@@ -87,16 +88,17 @@ export async function initTestServer({
 
 	if (routerEndpoints.length) {
 		const { apiRouters } = await loadPublicApiVersions(testServer.publicApiEndpoint);
-		const map: Record<string, express.Router | express.Router[]> = {
-			credentials: credentialsController,
-			publicApi: apiRouters,
+		const map: Record<string, express.Router | express.Router[] | any> = {
+			credentials: { controller: credentialsController, path: 'credentials' },
+			workflows: { controller: workflowsController, path: 'workflows' },
+			publicApi: apiRouters
 		};
 
 		for (const group of routerEndpoints) {
 			if (group === 'publicApi') {
 				testServer.app.use(...(map[group] as express.Router[]));
 			} else {
-				testServer.app.use(`/${testServer.restEndpoint}/${group}`, map[group]);
+				testServer.app.use(`/${testServer.restEndpoint}/${map[group].path}`, map[group].controller);
 			}
 		}
 	}
@@ -135,10 +137,10 @@ const classifyEndpointGroups = (endpointGroups: string[]) => {
 	const routerEndpoints: string[] = [];
 	const functionEndpoints: string[] = [];
 
+	const ROUTER_GROUP = ['credentials', 'workflows', 'publicApi'];
+
 	endpointGroups.forEach((group) =>
-		(group === 'credentials' || group === 'publicApi' ? routerEndpoints : functionEndpoints).push(
-			group,
-		),
+		(ROUTER_GROUP.includes(group) ? routerEndpoints : functionEndpoints).push(group),
 	);
 
 	return [routerEndpoints, functionEndpoints];
diff --git a/packages/cli/test/integration/workflows.api.test.ts b/packages/cli/test/integration/workflows.api.test.ts
new file mode 100644
index 0000000000000..0ff64b06556e0
--- /dev/null
+++ b/packages/cli/test/integration/workflows.api.test.ts
@@ -0,0 +1,107 @@
+import express from 'express';
+
+import * as utils from './shared/utils';
+import * as testDb from './shared/testDb';
+import { WorkflowEntity } from '../../src/databases/entities/WorkflowEntity';
+import type { Role } from '../../src/databases/entities/Role';
+import { PinData } from 'n8n-workflow';
+
+jest.mock('../../src/telemetry');
+
+let app: express.Application;
+let testDbName = '';
+let globalOwnerRole: Role;
+
+beforeAll(async () => {
+	app = await utils.initTestServer({
+		endpointGroups: ['workflows'],
+		applyAuth: true,
+	});
+	const initResult = await testDb.init();
+	testDbName = initResult.testDbName;
+
+	globalOwnerRole = await testDb.getGlobalOwnerRole();
+
+	utils.initTestLogger();
+	utils.initTestTelemetry();
+});
+
+beforeEach(async () => {
+	await testDb.truncate(['User', 'Workflow', 'SharedWorkflow'], testDbName);
+});
+
+afterAll(async () => {
+	await testDb.terminate(testDbName);
+});
+
+test('POST /workflows should store pin data for node in workflow', async () => {
+	const ownerShell = await testDb.createUserShell(globalOwnerRole);
+	const authOwnerAgent = utils.createAgent(app, { auth: true, user: ownerShell });
+
+	const workflow = makeWorkflow({ withPinData: true });
+
+	const response = await authOwnerAgent.post('/workflows').send(workflow);
+
+	expect(response.statusCode).toBe(200);
+
+	const { pinData } = response.body.data as { pinData: PinData };
+
+	expect(pinData).toMatchObject({ Spotify: [{ myKey: 'myValue' }] });
+});
+
+test('POST /workflows should set pin data to null if no pin data', async () => {
+	const ownerShell = await testDb.createUserShell(globalOwnerRole);
+	const authOwnerAgent = utils.createAgent(app, { auth: true, user: ownerShell });
+
+	const workflow = makeWorkflow({ withPinData: false });
+
+	const response = await authOwnerAgent.post('/workflows').send(workflow);
+
+	expect(response.statusCode).toBe(200);
+
+	const { pinData } = response.body.data as { pinData: PinData };
+
+	expect(pinData).toBeNull();
+});
+
+test('GET /workflows/:id should return pin data', async () => {
+	const ownerShell = await testDb.createUserShell(globalOwnerRole);
+	const authOwnerAgent = utils.createAgent(app, { auth: true, user: ownerShell });
+
+	const workflow = makeWorkflow({ withPinData: true });
+
+	const workflowCreationResponse = await authOwnerAgent.post('/workflows').send(workflow);
+
+	const { id } = workflowCreationResponse.body.data as { id: string };
+
+	const workflowRetrievalResponse = await authOwnerAgent.get(`/workflows/${id}`);
+
+	expect(workflowRetrievalResponse.statusCode).toBe(200);
+
+	const { pinData } = workflowRetrievalResponse.body.data as { pinData: PinData };
+
+	expect(pinData).toMatchObject({ Spotify: [{ myKey: 'myValue' }] });
+});
+
+function makeWorkflow({ withPinData }: { withPinData: boolean }) {
+	const workflow = new WorkflowEntity();
+
+	workflow.name = 'My Workflow';
+	workflow.active = false;
+	workflow.connections = {};
+	workflow.nodes = [
+		{
+			name: 'Spotify',
+			type: 'n8n-nodes-base.spotify',
+			parameters: { resource: 'track', operation: 'get', id: '123' },
+			typeVersion: 1,
+			position: [740, 240],
+		},
+	];
+
+	if (withPinData) {
+		workflow.pinData = { Spotify: [{ myKey: 'myValue' }] };
+	}
+
+	return workflow;
+}
diff --git a/packages/core/src/WorkflowExecute.ts b/packages/core/src/WorkflowExecute.ts
index ca2b0ecb75235..f404891890378 100644
--- a/packages/core/src/WorkflowExecute.ts
+++ b/packages/core/src/WorkflowExecute.ts
@@ -32,6 +32,7 @@ import {
 	LoggerProxy as Logger,
 	NodeApiError,
 	NodeOperationError,
+	PinData,
 	Workflow,
 	WorkflowExecuteMode,
 	WorkflowOperationError,
@@ -59,6 +60,7 @@ export class WorkflowExecute {
 			startData: {},
 			resultData: {
 				runData: {},
+				pinData: {},
 			},
 			executionData: {
 				contextData: {},
@@ -82,7 +84,12 @@ export class WorkflowExecute {
 	//            PCancelable to a regular Promise and does so not allow canceling
 	//            active executions anymore
 	// eslint-disable-next-line @typescript-eslint/promise-function-async
-	run(workflow: Workflow, startNode?: INode, destinationNode?: string): PCancelable<IRun> {
+	run(
+		workflow: Workflow,
+		startNode?: INode,
+		destinationNode?: string,
+		pinData?: PinData,
+	): PCancelable<IRun> {
 		// Get the nodes to start workflow execution from
 		startNode = startNode || workflow.getStartNode(destinationNode);
 
@@ -121,6 +128,7 @@ export class WorkflowExecute {
 			},
 			resultData: {
 				runData: {},
+				pinData,
 			},
 			executionData: {
 				contextData: {},
@@ -152,6 +160,7 @@ export class WorkflowExecute {
 		runData: IRunData,
 		startNodes: string[],
 		destinationNode: string,
+		pinData?: PinData,
 		// @ts-ignore
 	): PCancelable<IRun> {
 		let incomingNodeConnections: INodeConnections | undefined;
@@ -258,6 +267,7 @@ export class WorkflowExecute {
 			},
 			resultData: {
 				runData,
+				pinData,
 			},
 			executionData: {
 				contextData: {},
@@ -683,7 +693,13 @@ export class WorkflowExecute {
 			destinationNode = this.runExecutionData.startData.destinationNode;
 		}
 
-		const workflowIssues = workflow.checkReadyForExecution({ startNode, destinationNode });
+		const pinDataNodeNames = Object.keys(this.runExecutionData.resultData.pinData ?? {});
+
+		const workflowIssues = workflow.checkReadyForExecution({
+			startNode,
+			destinationNode,
+			pinDataNodeNames,
+		});
 		if (workflowIssues !== null) {
 			throw new Error(
 				'The workflow has issues and can for that reason not be executed. Please fix them first.',
@@ -914,24 +930,37 @@ export class WorkflowExecute {
 								}
 							}
 
-							Logger.debug(`Running node "${executionNode.name}" started`, {
-								node: executionNode.name,
-								workflowId: workflow.id,
-							});
-							const runNodeData = await workflow.runNode(
-								executionData,
-								this.runExecutionData,
-								runIndex,
-								this.additionalData,
-								NodeExecuteFunctions,
-								this.mode,
-							);
-							nodeSuccessData = runNodeData.data;
+							const { pinData } = this.runExecutionData.resultData;
+
+							if (pinData && !executionNode.disabled && pinData[executionNode.name] !== undefined) {
+								let nodePinData = pinData[executionNode.name];
+
+								if (!Array.isArray(nodePinData)) nodePinData = [nodePinData];
 
-							if (runNodeData.closeFunction) {
-								// Explanation why we do this can be found in n8n-workflow/Workflow.ts -> runNode
-								// eslint-disable-next-line @typescript-eslint/no-unsafe-call
-								closeFunction = runNodeData.closeFunction();
+								const itemsPerRun = nodePinData.map((item, index) => {
+									return { json: item, pairedItem: { item: index } };
+								});
+								nodeSuccessData = [itemsPerRun]; // always zeroth runIndex
+							} else {
+								Logger.debug(`Running node "${executionNode.name}" started`, {
+									node: executionNode.name,
+									workflowId: workflow.id,
+								});
+								const runNodeData = await workflow.runNode(
+									executionData,
+									this.runExecutionData,
+									runIndex,
+									this.additionalData,
+									NodeExecuteFunctions,
+									this.mode,
+								);
+								nodeSuccessData = runNodeData.data;
+
+								if (runNodeData.closeFunction) {
+									// Explanation why we do this can be found in n8n-workflow/Workflow.ts -> runNode
+									// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+									closeFunction = runNodeData.closeFunction();
+								}
 							}
 
 							Logger.debug(`Running node "${executionNode.name}" finished successfully`, {
diff --git a/packages/design-system/src/components/N8nCallout/Callout.vue b/packages/design-system/src/components/N8nCallout/Callout.vue
new file mode 100644
index 0000000000000..9100d38ec6f6d
--- /dev/null
+++ b/packages/design-system/src/components/N8nCallout/Callout.vue
@@ -0,0 +1,115 @@
+<template>
+	<div :class="classes" role="alert">
+
+		<div :class="$style['message-section']">
+			<div :class="$style.icon">
+				<n8n-icon
+					:icon="getIcon"
+					:size="theme === 'secondary' ? 'medium' : 'large'"
+				/>
+			</div>
+			<slot />
+		</div>
+
+		<slot name="trailingContent" />
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import N8nIcon from '../N8nIcon';
+
+const CALLOUT_DEFAULT_ICONS = {
+	info: 'info-circle',
+	success: 'check-circle',
+	warning: 'exclamation-triangle',
+	danger: 'times-circle',
+};
+
+export default Vue.extend({
+	name: 'n8n-callout',
+	components: {
+		N8nIcon,
+	},
+	props: {
+		theme: {
+			type: String,
+			required: true,
+			validator: (value: string): boolean =>
+				['info', 'success', 'secondary', 'warning', 'danger', 'custom'].includes(value),
+		},
+		icon: {
+			type: String,
+			default: 'info-circle'
+		},
+	},
+	computed: {
+		classes(): string[] {
+			return [
+				this.$style['callout'],
+				this.$style[this.theme],
+			];
+		},
+		getIcon(): string {
+			if (Object.keys(CALLOUT_DEFAULT_ICONS).includes(this.theme)) {
+				return CALLOUT_DEFAULT_ICONS[this.theme];
+			}
+
+			return this.icon;
+		},
+	}
+});
+</script>
+
+<style lang="scss" module>
+.callout {
+	display: flex;
+	justify-content: space-between;
+	font-size: var(--font-size-2xs);
+	padding: var(--spacing-xs);
+	border: var(--border-width-base) var(--border-style-base);
+	border-radius: var(--border-radius-base);
+	align-items: center;
+	line-height: var(--font-line-height-loose);
+}
+
+.message-section {
+	display: flex;
+}
+
+.info, .custom {
+	border-color: var(--color-foreground-base);
+	background-color: var(--color-background-light);
+	color: var(--color-info);
+}
+
+.warning {
+	border-color: var(--color-warning-tint-1);
+	background-color: var(--color-warning-tint-2);
+	color: var(--color-warning);
+}
+
+.success {
+	border-color: var(--color-success-tint-1);
+	background-color: var(--color-success-tint-2);
+	color: var(--color-success);
+}
+
+.danger {
+	border-color: var(--color-danger-tint-1);
+	background-color: var(--color-danger-tint-2);
+	color: var(--color-danger);
+}
+
+.icon {
+	margin-right: var(--spacing-xs);
+}
+
+.secondary {
+	font-size: var(--font-size-2xs);
+	font-weight: var(--font-weight-bold);
+	color: var(--color-secondary);
+	background-color: var(--color-secondary-tint-2);
+	border-color: var(--color-secondary-tint-1);
+}
+</style>
diff --git a/packages/design-system/src/components/N8nCallout/N8nCallout.stories.ts b/packages/design-system/src/components/N8nCallout/N8nCallout.stories.ts
new file mode 100644
index 0000000000000..0c7a315e1973c
--- /dev/null
+++ b/packages/design-system/src/components/N8nCallout/N8nCallout.stories.ts
@@ -0,0 +1,107 @@
+import N8nCallout from './Callout.vue';
+import { StoryFn } from '@storybook/vue';
+import N8nLink from '../N8nLink';
+import N8nText from '../N8nText';
+
+export default {
+	title: 'Atoms/Callout',
+	component: N8nCallout,
+	argTypes: {
+		theme: {
+			control: {
+				type: 'select',
+				options: ['info', 'secondary', 'success', 'warning', 'danger', 'custom'],
+			},
+		},
+		message: {
+			control: {
+				type: 'text',
+			},
+		},
+		icon: {
+			control: {
+				type: 'text',
+			},
+		},
+	},
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/tPpJvbrnHbP8C496cYuwyW/Node-pinning?node-id=15%3A5777',
+		},
+	},
+};
+
+const template: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nLink,
+		N8nText,
+		N8nCallout,
+	},
+	template: `
+		<n8n-callout v-bind="$props">
+			${args.default}
+			<template #actions v-if="actions">
+				${args.actions}
+			</template>
+			<template #trailingContent v-if="trailingContent">
+				${args.trailingContent}
+			</template>
+		</n8n-callout>
+	`,
+});
+
+export const customCallout = template.bind({});
+customCallout.args = {
+	theme: 'custom',
+	icon: 'code-branch',
+	default: `
+		<n8n-text
+			size="small"
+		>
+			This is a callout.
+		</n8n-text>
+	`,
+	actions: `
+		<n8n-link
+			size="small"
+		>
+			Do something!
+		</n8n-link>
+	`,
+};
+
+export const secondaryCallout = template.bind({});
+secondaryCallout.args = {
+	theme: 'secondary',
+	icon: 'thumbtack',
+	default: `
+		<n8n-text
+			size="small"
+			:bold="true"
+		>
+			This data is pinned.
+		</n8n-text>
+	`,
+	actions: `
+		<n8n-link
+			theme="secondary"
+			size="small"
+			:bold="true"
+		>
+			Unpin
+		</n8n-link>
+	`,
+	trailingContent: `
+		<n8n-link
+			theme="secondary"
+			size="small"
+			:bold="true"
+			:underline="true"
+			to="https://n8n.io"
+		>
+			Learn more
+		</n8n-link>
+	`,
+};
diff --git a/packages/design-system/src/components/N8nCallout/index.ts b/packages/design-system/src/components/N8nCallout/index.ts
new file mode 100644
index 0000000000000..fea22c69f70c6
--- /dev/null
+++ b/packages/design-system/src/components/N8nCallout/index.ts
@@ -0,0 +1,3 @@
+import N8nCallout from './Callout.vue';
+
+export default N8nCallout;
diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.vue b/packages/design-system/src/components/N8nIconButton/IconButton.vue
index 322b8288d150e..cf1482712d248 100644
--- a/packages/design-system/src/components/N8nIconButton/IconButton.vue
+++ b/packages/design-system/src/components/N8nIconButton/IconButton.vue
@@ -1,5 +1,9 @@
 <template>
-	<n8n-button :class="`icon-button ${$style['icon-button']} ${$style[size]}`" v-bind="$props" v-on="$listeners"/>
+	<n8n-button
+		:class="`icon-button ${$style['icon-button']} ${$style[size]}`"
+		v-bind="$props"
+		v-on="$listeners"
+	/>
 </template>
 
 <script lang="ts">
@@ -23,19 +27,19 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		disabled: {
+		outline: {
 			type: Boolean,
 			default: false,
 		},
-		active: {
+		text: {
 			type: Boolean,
 			default: false,
 		},
-		outline: {
+		disabled: {
 			type: Boolean,
 			default: false,
 		},
-		text: {
+		active: {
 			type: Boolean,
 			default: false,
 		},
@@ -48,16 +52,24 @@ export default {
 			validator: (value: string): boolean =>
 				['left', 'right'].includes(value),
 		},
+		circle: {
+			type: Boolean,
+			default: true,
+		},
+		circle: {
+			type: Boolean,
+			default: true,
+		},
 	},
 };
 </script>
 
 <style lang="scss" module>
 .icon-button {
-  padding: 0;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
+	padding: 0;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .mini {
diff --git a/packages/design-system/src/components/N8nLink/Link.vue b/packages/design-system/src/components/N8nLink/Link.vue
index b8a5ce55a0949..8db00ff826ad3 100644
--- a/packages/design-system/src/components/N8nLink/Link.vue
+++ b/packages/design-system/src/components/N8nLink/Link.vue
@@ -1,6 +1,6 @@
 <template functional>
 	<component :is="$options.components.N8nRoute" :to="props.to" :newWindow="props.newWindow"
-		@click="listeners.click"
+			   @click="listeners.click"
 	>
 		<span
 			:class="$style[`${props.underline ? `${props.theme}-underline` : props.theme}`]"
@@ -42,7 +42,7 @@ export default {
 			type: String,
 			default: 'primary',
 			validator: (value: string): boolean =>
-				['primary', 'danger', 'text'].includes(value),
+				['primary', 'danger', 'text', 'secondary'].includes(value),
 		},
 	},
 	components: {
@@ -60,10 +60,10 @@ export default {
 
 	&:active {
 		color: saturation(
-			--color-primary-h,
-			--color-primary-s,
-			--color-primary-l,
-			-(30%)
+				--color-primary-h,
+				--color-primary-s,
+				--color-primary-l,
+				-(30%)
 		);
 	}
 }
@@ -72,12 +72,7 @@ export default {
 	color: var(--color-text-base);
 
 	&:active {
-		color: saturation(
-			--color-primary-h,
-			--color-primary-s,
-			--color-primary-l,
-			-(30%)
-		);
+		color: saturation(--color-primary-h, --color-primary-s, --color-primary-l, -(30%));
 	}
 }
 
@@ -85,15 +80,23 @@ export default {
 	color: var(--color-danger);
 
 	&:active {
-		color: saturation(
-			--color-danger-h,
-			--color-danger-s,
-			--color-danger-l,
-			-(20%)
-		);
+		color: saturation(--color-danger-h, --color-danger-s, --color-danger-l, -(20%));
 	}
 }
 
+.secondary {
+	color: var(--color-secondary);
+
+	&:active {
+		color: saturation(--color-secondary-h, --color-secondary-s, --color-secondary-l, -(20%));
+	}
+}
+
+.secondary {
+	background-color: var(--color-secondary-tint-2);
+	color: var(--color-secondary);
+}
+
 .primary-underline {
 	composes: primary;
 	text-decoration: underline;
@@ -104,5 +107,9 @@ export default {
 	text-decoration: underline;
 }
 
+.secondary-underline {
+	composes: secondary;
+	text-decoration: underline;
+}
 
 </style>
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index 43a64ca9ec15e..4f7642a1da8de 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -40,6 +40,7 @@ import N8nAvatar from './N8nAvatar';
 import N8nBadge from './N8nBadge';
 import N8nButton from './N8nButton';
 import { N8nElButton } from './N8nButton/overrides';
+import N8nCallout from './N8nCallout';
 import N8nCard from './N8nCard';
 import N8nFormBox from './N8nFormBox';
 import N8nFormInput from './N8nFormInput';
@@ -82,6 +83,7 @@ export {
 	N8nBadge,
 	N8nButton,
 	N8nElButton,
+	N8nCallout,
 	N8nCard,
 	N8nHeading,
 	N8nFormBox,
diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss
index f60eeae641583..8baf9c58adf02 100644
--- a/packages/design-system/theme/src/_tokens.scss
+++ b/packages/design-system/theme/src/_tokens.scss
@@ -72,6 +72,27 @@
 				  var(--color-secondary-l)
   );
 
+	--color-secondary-tint-1-h: 247;
+	--color-secondary-tint-1-s: 49%;
+	--color-secondary-tint-1-l: 85%;
+	--color-secondary-tint-1: hsl(var(--color-secondary-tint-1-h),
+		var(--color-secondary-tint-1-s),
+		var(--color-secondary-tint-1-l));
+
+	--color-secondary-tint-2-h: 247;
+	--color-secondary-tint-2-s: 49%;
+	--color-secondary-tint-2-l: 92%;
+	--color-secondary-tint-2: hsl(var(--color-secondary-tint-2-h),
+		var(--color-secondary-tint-2-s),
+		var(--color-secondary-tint-2-l));
+
+	--color-secondary-tint-3-h: 247;
+	--color-secondary-tint-3-s: 49%;
+	--color-secondary-tint-3-l: 95%;
+	--color-secondary-tint-3: hsl(var(--color-secondary-tint-3-h),
+		var(--color-secondary-tint-3-s),
+		var(--color-secondary-tint-3-l));
+
   --color-success-h: 150.4;
   --color-success-s: 60%;
   --color-success-l: 40.4%;
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index dcd983794e097..cda60b0f74a53 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -21,6 +21,7 @@ import {
 	ITelemetrySettings,
 	IWorkflowSettings as IWorkflowSettingsWorkflow,
 	WorkflowExecuteMode,
+	PinData,
 } from 'n8n-workflow';
 
 export * from 'n8n-design-system/src/types';
@@ -145,6 +146,7 @@ export interface INodeUi extends INode {
 	notes?: string;
 	issues?: INodeIssues;
 	name: string;
+	pinData?: IDataObject;
 }
 
 export interface INodeTypesMaxCount {
@@ -211,6 +213,7 @@ export interface IStartRunData {
 	startNodes?: string[];
 	destinationNode?: string;
 	runData?: IRunData;
+	pinData?: PinData;
 }
 
 export interface IRunDataUi {
@@ -245,6 +248,7 @@ export interface IWorkflowData {
 	connections: IConnections;
 	settings?: IWorkflowSettings;
 	tags?: string[];
+	pinData?: PinData;
 }
 
 export interface IWorkflowDataUpdate {
@@ -255,6 +259,7 @@ export interface IWorkflowDataUpdate {
 	settings?: IWorkflowSettings;
 	active?: boolean;
 	tags?: ITag[] | string[]; // string[] when store or requested, ITag[] from API response
+	pinData?: PinData;
 }
 
 export interface IWorkflowTemplate {
@@ -277,6 +282,7 @@ export interface IWorkflowDb {
 	connections: IConnections;
 	settings?: IWorkflowSettings;
 	tags?: ITag[] | string[]; // string[] when store or requested, ITag[] from API response
+	pinData?: PinData;
 }
 
 // Identical to cli.Interfaces.ts
@@ -869,6 +875,10 @@ export interface IUiState {
 		};
 		output: {
 			displayMode: IRunDataDisplayMode;
+			editMode: {
+				enabled: boolean;
+				value: string;
+			};
 		};
 	};
 	mainPanelPosition: number;
diff --git a/packages/editor-ui/src/components/CodeEdit.vue b/packages/editor-ui/src/components/CodeEdit.vue
index b23d734284b84..1b6ece36145e9 100644
--- a/packages/editor-ui/src/components/CodeEdit.vue
+++ b/packages/editor-ui/src/components/CodeEdit.vue
@@ -8,15 +8,12 @@
 		:before-close="closeDialog"
 	>
 		<div class="text-editor-wrapper ignore-key-press">
-			<div ref="code" class="text-editor" @keydown.stop></div>
+			<code-editor :value="value" :autocomplete="loadAutocompleteData" @input="$emit('valueChanged', $event)" />
 		</div>
 	</el-dialog>
 </template>
 
 <script lang="ts">
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import {DateTime} from 'luxon';
-
 import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 
@@ -34,106 +31,19 @@ import {
 import {
 	PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
 } from '@/constants';
+import { CodeEditor } from './forms';
 
 export default mixins(
 	genericHelpers,
 	workflowHelpers,
 ).extend({
 	name: 'CodeEdit',
-	props: ['codeAutocomplete', 'parameter', 'path', 'type', 'value'],
-	data() {
-		return {
-			monacoInstance: null as monaco.editor.IStandaloneCodeEditor | null,
-			monacoLibrary: null as monaco.IDisposable | null,
-		};
-	},
-	mounted() {
-		setTimeout(this.loadEditor);
-	},
-	destroyed() {
-		if (this.monacoLibrary) {
-			this.monacoLibrary.dispose();
-		}
+	components: {
+		CodeEditor,
 	},
+	props: ['codeAutocomplete', 'parameter', 'path', 'type', 'value'],
 	methods: {
-		closeDialog() {
-			// Handle the close externally as the visible parameter is an external prop
-			// and is so not allowed to be changed here.
-			this.$emit('closeDialog');
-			return false;
-		},
-
-		createSimpleRepresentation(inputData: object | null | undefined | boolean | string | number | boolean[] | string[] | number[] | object[]): object | null | undefined | boolean | string | number | boolean[] | string[] | number[] | object[] {
-			if (inputData === null || inputData === undefined) {
-				return inputData;
-			} else if (typeof inputData === 'string') {
-				return '';
-			} else if (typeof inputData === 'boolean') {
-				return true;
-			} else if (typeof inputData === 'number') {
-				return 1;
-			} else if (Array.isArray(inputData)) {
-				return inputData.map(value => this.createSimpleRepresentation(value));
-			} else if (typeof inputData === 'object') {
-				const returnData: { [key: string]: object } = {};
-				Object.keys(inputData).forEach(key => {
-					// @ts-ignore
-					returnData[key] = this.createSimpleRepresentation(inputData[key]);
-				});
-				return returnData;
-			}
-			return inputData;
-		},
-
-		loadEditor() {
-			if (!this.$refs.code) return;
-
-			this.monacoInstance = monaco.editor.create(this.$refs.code as HTMLElement, {
-				automaticLayout: true,
-				value: this.value,
-				language: this.type === 'code' ? 'javascript' : 'json',
-				tabSize: 2,
-				wordBasedSuggestions: false,
-				readOnly: this.isReadOnly,
-				minimap: {
-					enabled: false,
-				},
-			});
-
-
-			this.monacoInstance.onDidChangeModelContent(() => {
-				const model = this.monacoInstance!.getModel();
-				if (model) {
-					this.$emit('valueChanged', model.getValue());
-				}
-			});
-
-			monaco.editor.defineTheme('n8nCustomTheme', {
-				base: 'vs',
-				inherit: true,
-				rules: [],
-				colors: {
-					'editor.background': '#f5f2f0',
-				},
-			});
-			monaco.editor.setTheme('n8nCustomTheme');
-
-			if (this.type === 'code') {
-				// As wordBasedSuggestions: false does not have any effect does it however seem
-				// to remove all all suggestions from the editor if I do this
-				monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-					allowNonTsExtensions: true,
-				});
-
-				this.loadAutocompleteData();
-			} else if (this.type === 'json') {
-				monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-					validate: true,
-				});
-			}
-		},
-
-		loadAutocompleteData(): void {
+		loadAutocompleteData(): string[] {
 			if (['function', 'functionItem'].includes(this.codeAutocomplete)) {
 				const itemIndex = 0;
 				const inputName = 'main';
@@ -149,8 +59,6 @@ export default mixins(
 					destinationIndex: 0,
 				};
 
-				const autocompleteData: string[] = [];
-
 				const executionData = this.$store.getters.getWorkflowExecution as IExecutionResponse | null;
 
 				let runExecutionData: IRunExecutionData;
@@ -262,17 +170,44 @@ export default mixins(
 					}
 				}
 
-				this.monacoLibrary = monaco.languages.typescript.javascriptDefaults.addExtraLib(
-					autoCompleteItems.join('\n'),
-				);
+				return autoCompleteItems;
+			}
+
+			return [];
+		},
+		closeDialog() {
+			// Handle the close externally as the visible parameter is an external prop
+			// and is so not allowed to be changed here.
+			this.$emit('closeDialog');
+			return false;
+		},
+
+		createSimpleRepresentation(inputData: object | null | undefined | boolean | string | number | boolean[] | string[] | number[] | object[]): object | null | undefined | boolean | string | number | boolean[] | string[] | number[] | object[] {
+			if (inputData === null || inputData === undefined) {
+				return inputData;
+			} else if (typeof inputData === 'string') {
+				return '';
+			} else if (typeof inputData === 'boolean') {
+				return true;
+			} else if (typeof inputData === 'number') {
+				return 1;
+			} else if (Array.isArray(inputData)) {
+				return inputData.map(value => this.createSimpleRepresentation(value));
+			} else if (typeof inputData === 'object') {
+				const returnData: { [key: string]: object } = {};
+				Object.keys(inputData).forEach(key => {
+					// @ts-ignore
+					returnData[key] = this.createSimpleRepresentation(inputData[key]);
+				});
+				return returnData;
 			}
+			return inputData;
 		},
 	},
 });
 </script>
 
 <style scoped>
-
 .text-editor {
 	min-height: 30rem;
 }
diff --git a/packages/editor-ui/src/components/HoverableNodeIcon.vue b/packages/editor-ui/src/components/HoverableNodeIcon.vue
index 582da3866ffc4..8f504714419e8 100644
--- a/packages/editor-ui/src/components/HoverableNodeIcon.vue
+++ b/packages/editor-ui/src/components/HoverableNodeIcon.vue
@@ -7,7 +7,7 @@
 		@mouseleave="showTooltip = false"
 	>
 		<div :class="$style.tooltip">
-			<n8n-tooltip placement="top" :manual="true" :value="showTooltip">
+			<n8n-tooltip placement="top" manual :value="showTooltip">
 				<div slot="content" v-text="nodeType.displayName"></div>
 				<span />
 			</n8n-tooltip>
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 8f1b52ad857e4..f0ef115173410 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -16,6 +16,10 @@
 							<font-awesome-icon icon="clock" />
 						</n8n-tooltip>
 					</div>
+					<span v-else-if="hasPinData" class="node-pin-data-icon">
+						<font-awesome-icon icon="thumbtack" />
+						<span v-if="workflowDataItems > 1" class="items-count"> {{ workflowDataItems }}</span>
+					</span>
 					<span v-else-if="workflowDataItems" class="data-count">
 						<font-awesome-icon icon="check" />
 						<span v-if="workflowDataItems > 1" class="items-count"> {{ workflowDataItems }}</span>
@@ -27,10 +31,22 @@
 				</div>
 
 				<div class="node-trigger-tooltip__wrapper">
-					<n8n-tooltip placement="top" :manual="true" :value="showTriggerNodeTooltip" popper-class="node-trigger-tooltip__wrapper--item">
+					<n8n-tooltip placement="top" manual :value="showTriggerNodeTooltip" popper-class="node-trigger-tooltip__wrapper--item">
 						<div slot="content" v-text="getTriggerNodeTooltip"></div>
 						<span />
 					</n8n-tooltip>
+					<n8n-tooltip
+						v-if="isTriggerNode"
+						placement="top"
+						manual
+						:value="pinDataDiscoveryTooltipVisible"
+						popper-class="node-trigger-tooltip__wrapper--item"
+					>
+						<template #content>
+							{{ $locale.baseText('node.discovery.pinData.canvas') }}
+						</template>
+						<span />
+					</n8n-tooltip>
 				</div>
 
 				<NodeIcon class="node-icon" :nodeType="nodeType" :size="40" :shrink="false" :disabled="this.data.disabled"/>
@@ -75,11 +91,12 @@
 <script lang="ts">
 
 import Vue from 'vue';
-import { CUSTOM_API_CALL_KEY, WAIT_TIME_UNLIMITED } from '@/constants';
+import {CUSTOM_API_CALL_KEY, LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG, WAIT_TIME_UNLIMITED} from '@/constants';
 import { externalHooks } from '@/components/mixins/externalHooks';
 import { nodeBase } from '@/components/mixins/nodeBase';
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
+import { pinData } from '@/components/mixins/pinData';
 
 import {
 	INodeTypeDescription,
@@ -95,7 +112,13 @@ import { get } from 'lodash';
 import { getStyleTokenValue, getTriggerNodeServiceName } from './helpers';
 import { INodeUi, XYPosition } from '@/Interface';
 
-export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).extend({
+export default mixins(
+	externalHooks,
+	nodeBase,
+	nodeHelpers,
+	workflowHelpers,
+	pinData,
+).extend({
 	name: 'Node',
 	components: {
 		NodeIcon,
@@ -105,6 +128,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			return this.$store.getters.getWorkflowResultDataByNodeName(this.data.name);
 		},
 		hasIssues (): boolean {
+			if (this.hasPinData) return false;
 			if (this.data.issues !== undefined && Object.keys(this.data.issues).length) {
 				return true;
 			}
@@ -257,11 +281,9 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			else if (!this.isExecuting) {
 				if (this.hasIssues) {
 					borderColor = getStyleTokenValue('--color-danger');
-				}
-				else if (this.waiting) {
+				} else if (this.waiting || this.hasPinData) {
 					borderColor = getStyleTokenValue('--color-secondary');
-				}
-				else if (this.workflowDataItems) {
+				} else if (this.workflowDataItems) {
 					borderColor = getStyleTokenValue('--color-success');
 				}
 			}
@@ -286,7 +308,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 				!this.isPollingTypeNode &&
 				!this.isNodeDisabled &&
 				this.workflowRunning &&
-				this.workflowDataItems === 0  &&
+				this.workflowDataItems === 0 &&
 				this.isSingleActiveTriggerNode &&
 				!this.isTriggerNodeTooltipEmpty &&
 				!this.hasIssues &&
@@ -306,6 +328,13 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 					this.showTriggerNodeTooltip = this.shouldShowTriggerTooltip;
 				}, 200);
 			}
+
+			if (this.pinDataDiscoveryTooltipVisible) {
+				this.pinDataDiscoveryTooltipVisible = false;
+				setTimeout(() => {
+					this.pinDataDiscoveryTooltipVisible = true;
+				}, 200);
+			}
 		},
 		shouldShowTriggerTooltip(shouldShowTriggerTooltip) {
 			if (shouldShowTriggerTooltip) {
@@ -320,6 +349,14 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			this.$emit('run', {name: this.data.name, data: newValue, waiting: !!this.waiting});
 		},
 	},
+	created() {
+		const hasSeenPinDataTooltip = localStorage.getItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG);
+		if (!hasSeenPinDataTooltip) {
+			this.unwatchWorkflowDataItems = this.$watch('workflowDataItems', (dataItemsCount: number) => {
+				this.showPinDataDiscoveryTooltip(dataItemsCount);
+			});
+		}
+	},
 	mounted() {
 		this.setSubtitle();
 		setTimeout(() => {
@@ -331,10 +368,22 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			isTouchActive: false,
 			nodeSubtitle: '',
 			showTriggerNodeTooltip: false,
+			pinDataDiscoveryTooltipVisible: false,
 			dragging: false,
+			unwatchWorkflowDataItems: () => {},
 		};
 	},
 	methods: {
+		showPinDataDiscoveryTooltip(dataItemsCount: number): void {
+			if (!this.isTriggerNode) { return; }
+
+			if (dataItemsCount > 0) {
+				localStorage.setItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG, 'true');
+
+				this.pinDataDiscoveryTooltipVisible = true;
+				this.unwatchWorkflowDataItems();
+			}
+		},
 		setSubtitle() {
 			const nodeSubtitle = this.getNodeSubtitle(this.data, this.nodeType, this.getWorkflow()) || '';
 
@@ -368,6 +417,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 
 		setNodeActive () {
 			this.$store.commit('setActiveNode', this.data.name);
+			this.pinDataDiscoveryTooltipVisible = false;
 		},
 		touchStart () {
 			if (this.isTouchDevice === true && this.isMacOs === false && this.isTouchActive === false) {
@@ -497,6 +547,15 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			}
 		}
 
+		.node-pin-data-icon {
+			color: var(--color-secondary);
+			margin-right: 2px;
+
+			svg {
+				height: 0.85rem;
+			}
+		}
+
 		.waiting {
 			color: var(--color-secondary);
 		}
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 973665b0be951..944aa6353cbc2 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -12,7 +12,7 @@
 			placement="bottom-start"
 			:value="showTriggerWaitingWarning"
 			:disabled="!showTriggerWaitingWarning"
-			:manual="true"
+			manual
 		>
 			<div slot="content" :class="$style.triggerWarning">
 				{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}
@@ -66,6 +66,7 @@
 						:runIndex="outputRun"
 						:linkedRuns="linked"
 						:sessionId="sessionId"
+						:isReadOnly="readOnly"
 						@linkRun="onLinkRunToOutput"
 						@unlinkRun="() => onUnlinkRun('output')"
 						@runChange="onRunOutputIndexChange"
@@ -121,15 +122,20 @@ import TriggerPanel from './TriggerPanel.vue';
 import { mapGetters } from 'vuex';
 import {
 	BASE_NODE_SURVEY_URL,
-	CRON_NODE_TYPE,
-	ERROR_TRIGGER_NODE_TYPE,
 	START_NODE_TYPE,
 	STICKY_NODE_TYPE,
 } from '@/constants';
-import { editor } from 'monaco-editor';
 import { workflowActivate } from './mixins/workflowActivate';
-
-export default mixins(externalHooks, nodeHelpers, workflowHelpers, workflowActivate).extend({
+import { pinData } from "@/components/mixins/pinData";
+import { dataPinningEventBus } from '../event-bus/data-pinning-event-bus';
+
+export default mixins(
+	externalHooks,
+	nodeHelpers,
+	workflowHelpers,
+	workflowActivate,
+	pinData,
+).extend({
 	name: 'NodeDetailsView',
 	components: {
 		NodeSettings,
@@ -156,10 +162,18 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers, workflowActiv
 			triggerWaitingWarningEnabled: false,
 			isDragging: false,
 			mainPanelPosition: 0,
+			pinDataDiscoveryTooltipVisible: false,
 		};
 	},
 	mounted() {
 		this.$store.commit('ui/setNDVSessionId');
+
+		dataPinningEventBus.$on('data-pinning-discovery', ({ isTooltipVisible }: { isTooltipVisible: boolean }) => {
+			this.pinDataDiscoveryTooltipVisible = isTooltipVisible;
+		});
+	},
+	destroyed () {
+		dataPinningEventBus.$off('data-pinning-discovery');
 	},
 	computed: {
 		...mapGetters(['executionWaitingForWebhook']),
@@ -313,6 +327,9 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers, workflowActiv
 			}
 			return `${BASE_NODE_SURVEY_URL}${this.activeNodeType.name}`;
 		},
+		outputPanelEditMode(): { enabled: boolean; value: string; } {
+			return this.$store.getters['ui/outputPanelEditMode'];
+		},
 	},
 	watch: {
 		activeNode(node, oldNode) {
@@ -329,28 +346,31 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers, workflowActiv
 				});
 
 				setTimeout(() => {
-					const outogingConnections = this.$store.getters.outgoingConnectionsByNodeName(
-						this.activeNode.name,
-					) as INodeConnections;
-
-					this.$telemetry.track('User opened node modal', {
-						node_type: this.activeNodeType ? this.activeNodeType.name : '',
-						workflow_id: this.$store.getters.workflowId,
-						session_id: this.sessionId,
-						parameters_pane_position: this.mainPanelPosition,
-						input_first_connector_runs: this.maxInputRun,
-						output_first_connector_runs: this.maxOutputRun,
-						selected_view_inputs: this.isTriggerNode
-							? 'trigger'
-							: this.$store.getters['ui/inputPanelDispalyMode'],
-						selected_view_outputs: this.$store.getters['ui/outputPanelDispalyMode'],
-						input_connectors: this.parentNodes.length,
-						output_connectors:
-							outogingConnections && outogingConnections.main && outogingConnections.main.length,
-						input_displayed_run_index: this.inputRun,
-						output_displayed_run_index: this.outputRun,
-					});
-				}, 0); // wait for display mode to be set correctly
+					if (this.activeNode) {
+						const outogingConnections = this.$store.getters.outgoingConnectionsByNodeName(
+							this.activeNode.name,
+						) as INodeConnections;
+
+						this.$telemetry.track('User opened node modal', {
+							node_type: this.activeNodeType ? this.activeNodeType.name : '',
+							workflow_id: this.$store.getters.workflowId,
+							session_id: this.sessionId,
+							parameters_pane_position: this.mainPanelPosition,
+							input_first_connector_runs: this.maxInputRun,
+							output_first_connector_runs: this.maxOutputRun,
+							selected_view_inputs: this.isTriggerNode
+								? 'trigger'
+								: this.$store.getters['ui/inputPanelDispalyMode'],
+							selected_view_outputs: this.$store.getters['ui/outputPanelDispalyMode'],
+							input_connectors: this.parentNodes.length,
+							output_connectors:
+								outogingConnections && outogingConnections.main && outogingConnections.main.length,
+							input_displayed_run_index: this.inputRun,
+							output_displayed_run_index: this.outputRun,
+							data_pinning_tooltip_presented: this.pinDataDiscoveryTooltipVisible,
+						});
+					}
+				}, 2000); // wait for RunData to mount and present pindata discovery tooltip
 			}
 			if (window.top && !this.isActiveStickyNode) {
 				window.top.postMessage(JSON.stringify({ command: node ? 'openNDV' : 'closeNDV' }), '*');
@@ -438,10 +458,43 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers, workflowActiv
 		nodeTypeSelected(nodeTypeName: string) {
 			this.$emit('nodeTypeSelected', nodeTypeName);
 		},
-		close() {
+		async close() {
 			if (this.isDragging) {
 				return;
 			}
+
+			if (this.outputPanelEditMode.enabled) {
+				const shouldPinDataBeforeClosing = await this.confirmMessage(
+					'',
+					this.$locale.baseText('ndv.pinData.beforeClosing.title'),
+					null,
+					this.$locale.baseText('ndv.pinData.beforeClosing.confirm'),
+					this.$locale.baseText('ndv.pinData.beforeClosing.cancel'),
+				);
+
+				if (shouldPinDataBeforeClosing) {
+					const { value } = this.outputPanelEditMode;
+
+					if (!this.isValidPinDataSize(value)) {
+						dataPinningEventBus.$emit(
+							'data-pinning-error', { errorType: 'data-too-large', source: 'on-ndv-close-modal' },
+						);
+						return;
+					}
+
+					if (!this.isValidPinDataJSON(value)) {
+						dataPinningEventBus.$emit(
+							'data-pinning-error', { errorType: 'invalid-json', source: 'on-ndv-close-modal' },
+						);
+						return;
+					}
+
+					this.$store.commit('pinData', { node: this.activeNode, data: JSON.parse(value) });
+				}
+
+				this.$store.commit('ui/setOutputPanelEditModeEnabled', false);
+			}
+
 			this.$externalHooks().run('dataDisplay.nodeEditingFinished');
 			this.$telemetry.track('User closed node modal', {
 				node_type: this.activeNodeType ? this.activeNodeType.name : '',
diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
index 5c84227ed2a8f..fdc0f8581ad64 100644
--- a/packages/editor-ui/src/components/NodeExecuteButton.vue
+++ b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -4,7 +4,7 @@
 		<div>
 			<n8n-button
 				:loading="nodeRunning && !isListeningForEvents"
-				:disabled="!!disabledHint"
+				:disabled="disabled || !!disabledHint"
 				:label="buttonLabel"
 				:type="type"
 				:size="size"
@@ -21,14 +21,21 @@ import { INodeUi } from '@/Interface';
 import { INodeTypeDescription } from 'n8n-workflow';
 import mixins from 'vue-typed-mixins';
 import { workflowRun } from './mixins/workflowRun';
+import { pinData } from './mixins/pinData';
+import { dataPinningEventBus } from '@/event-bus/data-pinning-event-bus';
 
 export default mixins(
 	workflowRun,
+	pinData,
 ).extend({
 	props: {
 		nodeName: {
 			type: String,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 		label: {
 			type: String,
 		},
@@ -156,14 +163,31 @@ export default mixins(
 			});
 		},
 
-		onClick() {
+		async onClick() {
 			if (this.isListeningForEvents) {
 				this.stopWaitingForWebhook();
-			}
-			else {
-				this.$telemetry.track('User clicked execute node button', { node_type: this.nodeName, workflow_id: this.$store.getters.workflowId, source: this.telemetrySource });
-				this.runWorkflow(this.nodeName, 'RunData.ExecuteNodeButton');
-				this.$emit('execute');
+			} else {
+				let shouldUnpinAndExecute = false;
+				if (this.hasPinData) {
+					shouldUnpinAndExecute = await this.confirmMessage(
+						this.$locale.baseText('ndv.pinData.unpinAndExecute.description'),
+						this.$locale.baseText('ndv.pinData.unpinAndExecute.title'),
+						null,
+						this.$locale.baseText('ndv.pinData.unpinAndExecute.confirm'),
+						this.$locale.baseText('ndv.pinData.unpinAndExecute.cancel'),
+					);
+
+					if (shouldUnpinAndExecute) {
+						dataPinningEventBus.$emit('data-unpinning', { source: 'unpin-and-execute-modal' });
+						this.$store.commit('unpinData', { node: this.node });
+					}
+				}
+
+				if (!this.hasPinData || shouldUnpinAndExecute) {
+					this.$telemetry.track('User clicked execute node button', { node_type: this.nodeName, workflow_id: this.$store.getters.workflowId, source: this.telemetrySource });
+					this.runWorkflow(this.nodeName, 'RunData.ExecuteNodeButton');
+					this.$emit('execute');
+				}
 			}
 		},
 	},
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 840f314745241..9af915eeb2dc8 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -6,7 +6,13 @@
 				<div
 					v-if="!isReadOnly"
 				>
-					<NodeExecuteButton :nodeName="node.name" @execute="onNodeExecute" size="small" telemetrySource="parameters" />
+					<NodeExecuteButton
+						:nodeName="node.name"
+						:disabled="outputPanelEditMode.enabled"
+						size="small"
+						telemetrySource="parameters"
+						@execute="onNodeExecute"
+					/>
 				</div>
 			</div>
 			<NodeSettingsTabs v-model="openPanel" :nodeType="nodeType" :sessionId="sessionId" />
@@ -169,6 +175,9 @@ export default mixins(
 
 				return this.nodeType.properties;
 			},
+			outputPanelEditMode(): { enabled: boolean; value: string; } {
+				return this.$store.getters['ui/outputPanelEditMode'];
+			},
 		},
 		props: {
 			eventBus: {
diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
index d1f0ddb7c64c7..255aad2c7c3bc 100644
--- a/packages/editor-ui/src/components/OutputPanel.vue
+++ b/packages/editor-ui/src/components/OutputPanel.vue
@@ -9,15 +9,23 @@
 		:isExecuting="isNodeRunning"
 		:executingMessage="$locale.baseText('ndv.output.executing')"
 		:sessionId="sessionId"
+		:isReadOnly="isReadOnly"
 		paneType="output"
 		@runChange="onRunIndexChange"
 		@linkRun="onLinkRun"
 		@unlinkRun="onUnlinkRun"
+		ref="runData"
 	>
 		<template v-slot:header>
 			<div :class="$style.titleSection">
-				<span :class="$style.title">{{ $locale.baseText('ndv.output') }}</span>
-				<RunInfo v-if="runsCount === 1" :taskData="runTaskData" />
+				<span :class="$style.title">
+					{{ $locale.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
+				</span>
+				<RunInfo
+					v-if="!hasPinData && runsCount === 1"
+					v-show="!outputPanelEditMode.enabled"
+					:taskData="runTaskData"
+				/>
 
 				<n8n-info-tip
 					theme="warning"
@@ -26,7 +34,9 @@
 					v-if="hasNodeRun && staleData"
 				>
 					<template>
-						<span v-html="$locale.baseText('ndv.output.staleDataWarning')"></span>
+						<span v-html="$locale.baseText(
+							hasPinData ? 'ndv.output.staleDataWarning.pinData' : 'ndv.output.staleDataWarning.regular'
+						)"></span>
 					</template>
 				</n8n-info-tip>
 			</div>
@@ -34,7 +44,20 @@
 
 		<template v-slot:node-not-run>
 			<n8n-text v-if="workflowRunning && !isTriggerNode">{{ $locale.baseText('ndv.output.waitingToRun') }}</n8n-text>
-			<n8n-text v-if="!workflowRunning && (isScheduleTrigger || !isTriggerNode)">{{ $locale.baseText('ndv.output.runNodeHint') }}</n8n-text>
+			<n8n-text v-if="!workflowRunning">
+				{{ $locale.baseText('ndv.output.runNodeHint') }}
+				<span @click="insertTestData" v-if="canPinData">
+					<br>
+					{{ $locale.baseText('generic.or') }}
+					<n8n-text
+						tag="a"
+						size="medium"
+						color="primary"
+					>
+						{{ $locale.baseText('ndv.output.insertTestData') }}
+					</n8n-text>
+				</span>
+			</n8n-text>
 		</template>
 
 		<template v-slot:no-output-data>
@@ -46,7 +69,7 @@
 			</n8n-text>
 		</template>
 
-		<template #run-info v-if="runsCount > 1">
+		<template #run-info v-if="!hasPinData && runsCount > 1">
 			<RunInfo :taskData="runTaskData" />
 		</template>
 	</RunData>
@@ -56,16 +79,25 @@
 import { IExecutionResponse, INodeUi } from '@/Interface';
 import { INodeTypeDescription, IRunData, IRunExecutionData, ITaskData } from 'n8n-workflow';
 import Vue from 'vue';
-import RunData from './RunData.vue';
+import RunData, { EnterEditModeArgs } from './RunData.vue';
 import RunInfo from './RunInfo.vue';
+import { pinData } from "@/components/mixins/pinData";
+import mixins from 'vue-typed-mixins';
+
+type RunData = Vue & { enterEditMode: (args: EnterEditModeArgs) => void };
 
-export default Vue.extend({
+export default mixins(
+	pinData,
+).extend({
 	name: 'OutputPanel',
 	components: { RunData, RunInfo },
 	props: {
 		runIndex: {
 			type: Number,
 		},
+		isReadOnly: {
+			type: Boolean,
+		},
 		linkedRuns: {
 			type: Boolean,
 		},
@@ -162,8 +194,29 @@ export default Vue.extend({
 			const runAt = this.runTaskData.startTime;
 			return updatedAt > runAt;
 		},
+		outputPanelEditMode(): { enabled: boolean; value: string; } {
+			return this.$store.getters['ui/outputPanelEditMode'];
+		},
+		canPinData(): boolean {
+			return this.isPinDataNodeType && !this.isReadOnly;
+		},
 	},
 	methods: {
+		insertTestData() {
+			if (this.$refs.runData) {
+				(this.$refs.runData as RunData).enterEditMode({
+					origin: 'insertTestDataLink',
+				});
+
+				this.$telemetry.track('User clicked ndv link', {
+					workflow_id: this.$store.getters.workflowId,
+					session_id: this.sessionId,
+					node_type: this.node.type,
+					pane: 'output',
+					type: 'insert-test-data',
+				});
+			}
+		},
 		onLinkRun() {
 			this.$emit('linkRun');
 		},
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index af3648a261dee..7eda024845e4a 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -1,20 +1,111 @@
 <template>
 	<div :class="$style.container">
+		<n8n-callout
+			v-if="canPinData && hasPinData && !editMode.enabled"
+			theme="secondary"
+			icon="thumbtack"
+			:class="$style['pinned-data-callout']"
+		>
+			{{ $locale.baseText('runData.pindata.thisDataIsPinned') }}
+			<span class="ml-4xs" v-if="!isReadOnly">
+				<n8n-link
+					theme="secondary"
+					size="small"
+					underline
+					bold
+					@click="onTogglePinData({ source: 'banner-link' })"
+				>
+					{{ $locale.baseText('runData.pindata.unpin') }}
+				</n8n-link>
+			</span>
+			<template #trailingContent>
+				<n8n-link
+					:to="dataPinningDocsUrl"
+					size="small"
+					theme="secondary"
+					bold
+					underline
+					@click="onClickDataPinningDocsLink"
+				>
+					{{ $locale.baseText('runData.pindata.learnMore') }}
+				</n8n-link>
+			</template>
+		</n8n-callout>
+
 		<BinaryDataDisplay :windowVisible="binaryDataDisplayVisible" :displayData="binaryDataDisplayData" @close="closeBinaryDataDisplay"/>
 
 		<div :class="$style.header">
 			<slot name="header"></slot>
 
-			<div v-show="!hasRunError && hasNodeRun && ((jsonData && jsonData.length > 0) || (binaryData && binaryData.length > 0))" @click.stop :class="$style.displayModes">
+			<div v-show="!hasRunError" @click.stop :class="$style.displayModes">
 				<n8n-radio-buttons
+					v-show="hasNodeRun && ((jsonData && jsonData.length > 0) || (binaryData && binaryData.length > 0)) && !editMode.enabled"
 					:value="displayMode"
 					:options="buttons"
 					@input="onDisplayModeChange"
 				/>
+				<n8n-icon-button
+					v-if="canPinData && !isReadOnly"
+					v-show="!editMode.enabled"
+					:title="$locale.baseText('runData.editOutput')"
+					:circle="false"
+					:disabled="node.disabled"
+					class="ml-2xs"
+					icon="pencil-alt"
+					type="tertiary"
+					@click="enterEditMode({ origin: 'editIconButton' })"
+				/>
+				<n8n-tooltip
+					placement="bottom-end"
+					v-if="canPinData && (jsonData && jsonData.length > 0)"
+					v-show="!editMode.enabled"
+					:value="pinDataDiscoveryTooltipVisible"
+					:manual="isControlledPinDataTooltip"
+				>
+					<template #content v-if="!isControlledPinDataTooltip">
+						<div :class="$style['tooltip-container']">
+							<strong>{{ $locale.baseText('ndv.pinData.pin.title') }}</strong>
+							<n8n-text size="small" tag="p">
+								{{ $locale.baseText('ndv.pinData.pin.description') }}
+
+								<n8n-link :to="dataPinningDocsUrl" size="small">
+									{{ $locale.baseText('ndv.pinData.pin.link') }}
+								</n8n-link>
+							</n8n-text>
+						</div>
+					</template>
+					<template #content v-else>
+						<div :class="$style['tooltip-container']">
+							{{ $locale.baseText('node.discovery.pinData.ndv') }}
+						</div>
+					</template>
+					<n8n-icon-button
+						:class="`ml-2xs ${$style['pin-data-button']} ${hasPinData ? $style['pin-data-button-active'] : ''}`"
+						type="tertiary"
+						active
+						icon="thumbtack"
+						:disabled="editMode.enabled || (inputData.length === 0 && !hasPinData) || isReadOnly"
+						@click="onTogglePinData({ source: 'pin-icon-click' })"
+					/>
+				</n8n-tooltip>
+
+				<div :class="$style['edit-mode-actions']" v-show="editMode.enabled">
+					<n8n-button
+						type="tertiary"
+						:label="$locale.baseText('runData.editor.cancel')"
+						@click="onClickCancelEdit"
+					/>
+					<n8n-button
+						class="ml-2xs"
+						type="primary"
+						:label="$locale.baseText('runData.editor.save')"
+						@click="onClickSaveEdit"
+					/>
+				</div>
 			</div>
 		</div>
 
-		<div :class="$style.runSelector" v-if="maxRunIndex > 0" >
+		<div :class="$style.runSelector" v-if="maxRunIndex > 0" v-show="!editMode.enabled">
 			<n8n-select size="small" :value="runIndex" @input="onRunIndexChange" @click.stop>
 				<template slot="prepend">{{ $locale.baseText('ndv.output.run') }}</template>
 				<n8n-option v-for="option in (maxRunIndex + 1)" :label="getRunLabel(option)" :value="option - 1" :key="option"></n8n-option>
@@ -33,28 +124,40 @@
 			<n8n-tabs :value="currentOutputIndex" @input="onBranchChange" :options="branches" />
 		</div>
 
-		<div v-else-if="hasNodeRun && dataCount > 0 && maxRunIndex === 0" :class="$style.itemsCount">
+		<div v-else-if="hasNodeRun && dataCount > 0 && maxRunIndex === 0" v-show="!editMode.enabled" :class="$style.itemsCount">
 			<n8n-text>
 				{{ dataCount }} {{ $locale.baseText('ndv.output.items', {adjustToNumber: dataCount}) }}
 			</n8n-text>
 		</div>
 
-		<div :class="$style.dataContainer" ref="dataContainer">
-			<div v-if="hasNodeRun && !hasRunError && displayMode === 'json' && state.path !== deselectedPlaceholder" :class="$style.copyButton">
-				<el-dropdown trigger="click" @command="handleCopyClick">
+		<div
+			:class="[$style['data-container'], copyDropdownOpen ? $style['copy-dropdown-open'] : '']"
+			ref="dataContainer"
+		>
+			<div v-if="hasNodeRun && !hasRunError && displayMode === 'json'" v-show="!editMode.enabled" :class="$style['actions-group']">
+				<el-dropdown
+					trigger="click"
+					@command="handleCopyClick"
+					@visible-change="copyDropdownOpen = $event"
+				>
 					<span class="el-dropdown-link">
-						<n8n-icon-button :title="$locale.baseText('runData.copyToClipboard')" icon="copy" />
+						<n8n-icon-button
+							:title="$locale.baseText('runData.copyToClipboard')"
+							icon="copy"
+							type="tertiary"
+							:circle="false"
+						/>
 					</span>
 					<el-dropdown-menu slot="dropdown">
-						<el-dropdown-item :command="{command: 'itemPath'}">
+						<el-dropdown-item :command="{command: 'value'}">
+							{{ $locale.baseText('runData.copyValue') }}
+						</el-dropdown-item>
+						<el-dropdown-item :command="{command: 'itemPath'}" divided>
 							{{ $locale.baseText('runData.copyItemPath') }}
 						</el-dropdown-item>
 						<el-dropdown-item :command="{command: 'parameterPath'}">
 							{{ $locale.baseText('runData.copyParameterPath') }}
 						</el-dropdown-item>
-						<el-dropdown-item :command="{command: 'value'}">
-							{{ $locale.baseText('runData.copyValue') }}
-						</el-dropdown-item>
 					</el-dropdown-menu>
 				</el-dropdown>
 			</div>
@@ -64,10 +167,38 @@
 				<n8n-text>{{ executingMessage }}</n8n-text>
 			</div>
 
+			<div v-else-if="editMode.enabled" :class="$style['edit-mode']">
+				<div :class="$style['edit-mode-body']">
+					<code-editor
+						:value="editMode.value"
+						:options="{ scrollBeyondLastLine: false }"
+						type="json"
+						@input="$store.commit('ui/setOutputPanelEditModeValue', $event)"
+					/>
+				</div>
+				<div :class="$style['edit-mode-footer']">
+					<n8n-info-tip :bold="false" :class="$style['edit-mode-footer-infotip']">
+						{{ $locale.baseText('runData.editor.copyDataInfo') }}
+						<n8n-link :to="dataPinningDocsUrl" size="small">
+							{{ $locale.baseText('generic.learnMore') }}
+						</n8n-link>
+					</n8n-info-tip>
+				</div>
+			</div>
+
 			<div v-else-if="!hasNodeRun" :class="$style.center">
 				<slot name="node-not-run"></slot>
 			</div>
 
+			<div v-else-if="paneType === 'input' && node.disabled" :class="$style.center">
+				<n8n-text>
+					{{ $locale.baseText('ndv.input.disabled', { interpolate: { nodeName: node.name } }) }}
+					<n8n-link @click="enableNode">
+						{{ $locale.baseText('ndv.input.disabled.cta') }}
+					</n8n-link>
+				</n8n-text>
+			</div>
+
 			<div v-else-if="hasNodeRun && hasRunError" :class="$style.errorDisplay">
 				<NodeErrorView :error="workflowRunData[node.name][runIndex].error" />
 			</div>
@@ -130,7 +261,7 @@
 				<vue-json-pretty
 					:data="jsonData"
 					:deep="10"
-					v-model="state.path"
+					v-model="selectedOutput.path"
 					:showLine="true"
 					:showLength="true"
 					selectableType="single"
@@ -187,7 +318,7 @@
 				</div>
 			</div>
 		</div>
-		<div :class="$style.pagination" v-if="hasNodeRun && !hasRunError && dataCount > pageSize">
+		<div :class="$style.pagination" v-if="hasNodeRun && !hasRunError && dataCount > pageSize" v-show="!editMode.enabled">
 			<el-pagination
 				background
 				:hide-on-single-page="true"
@@ -232,7 +363,7 @@ import {
 	INodeTypeDescription,
 	IRunData,
 	IRunExecutionData,
-	ITaskData,
+	PinData,
 } from 'n8n-workflow';
 
 import {
@@ -245,8 +376,12 @@ import {
 } from '@/Interface';
 
 import {
+	DATA_PINNING_DOCS_URL,
+	LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG,
+	LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG,
 	MAX_DISPLAY_DATA_SIZE,
 	MAX_DISPLAY_ITEMS_AUTO_ALL,
+	TEST_PIN_DATA,
 } from '@/constants';
 
 import BinaryDataDisplay from '@/components/BinaryDataDisplay.vue';
@@ -257,19 +392,28 @@ import { copyPaste } from '@/components/mixins/copyPaste';
 import { externalHooks } from "@/components/mixins/externalHooks";
 import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
+import { pinData } from '@/components/mixins/pinData';
 
 import mixins from 'vue-typed-mixins';
 
 import { saveAs } from 'file-saver';
+import { CodeEditor } from "@/components/forms";
+import { dataPinningEventBus } from '../event-bus/data-pinning-event-bus';
+import { stringSizeInBytes } from './helpers';
 
 // A path that does not exist so that nothing is selected by default
 const deselectedPlaceholder = '_!^&*';
 
+export type EnterEditModeArgs = {
+	origin: 'editIconButton' | 'insertTestDataLink',
+};
+
 export default mixins(
 	copyPaste,
 	externalHooks,
 	genericHelpers,
 	nodeHelpers,
+	pinData,
 )
 	.extend({
 		name: 'RunData',
@@ -278,6 +422,7 @@ export default mixins(
 			NodeErrorView,
 			VueJsonPretty,
 			WarningTooltip,
+			CodeEditor,
 		},
 		props: {
 			nodeUi: {
@@ -318,7 +463,7 @@ export default mixins(
 				binaryDataPreviewActive: false,
 				dataSize: 0,
 				deselectedPlaceholder,
-				state: {
+				selectedOutput: {
 					value: '' as object | number | string,
 					path: deselectedPlaceholder,
 				},
@@ -332,15 +477,38 @@ export default mixins(
 				currentPage: 1,
 				pageSize: 10,
 				pageSizes: [10, 25, 50, 100],
+				copyDropdownOpen: false,
+				eventBus: dataPinningEventBus,
+
+				pinDataDiscoveryTooltipVisible: false,
+				isControlledPinDataTooltip: false,
 			};
 		},
 		mounted() {
 			this.init();
+
+			if (this.paneType === 'output') {
+				this.eventBus.$on('data-pinning-error', this.onDataPinningError);
+				this.eventBus.$on('data-unpinning', this.onDataUnpinning);
+
+				const hasSeenPinDataTooltip = localStorage.getItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG);
+				if (!hasSeenPinDataTooltip) {
+					this.showPinDataDiscoveryTooltip(this.jsonData);
+				}
+			}
+		},
+		destroyed() {
+			this.hidePinDataDiscoveryTooltip();
+			this.eventBus.$off('data-pinning-error', this.onDataPinningError);
+			this.eventBus.$off('data-unpinning', this.onDataUnpinning);
 		},
 		computed: {
 			activeNode(): INodeUi {
 				return this.$store.getters.activeNode;
 			},
+			dataPinningDocsUrl(): string {
+				return DATA_PINNING_DOCS_URL;
+			},
 			displayMode(): IRunDataDisplayMode {
 				return this.$store.getters['ui/getPanelDisplayMode'](this.paneType);
 			},
@@ -353,6 +521,14 @@ export default mixins(
 				}
 				return null;
 			},
+			isTriggerNode (): boolean {
+				return !!(this.nodeType && this.nodeType.group.includes('trigger'));
+			},
+			canPinData (): boolean {
+				return this.paneType === 'output' &&
+					this.isPinDataNodeType &&
+					!(this.binaryData && this.binaryData.length > 0);
+			},
 			buttons(): Array<{label: string, value: string}> {
 				const defaults = [
 					{ label: this.$locale.baseText('runData.table'), value: 'table'},
@@ -367,7 +543,7 @@ export default mixins(
 				return defaults;
 			},
 			hasNodeRun(): boolean {
-				return Boolean(!this.isExecuting && this.node && this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name));
+				return Boolean(!this.isExecuting && this.node && (this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name) || this.hasPinData));
 			},
 			hasRunError(): boolean {
 				return Boolean(this.node && this.workflowRunData && this.workflowRunData[this.node.name] && this.workflowRunData[this.node.name][this.runIndex] && this.workflowRunData[this.node.name][this.runIndex].error);
@@ -432,12 +608,32 @@ export default mixins(
 
 				return 0;
 			},
-			inputData (): INodeExecutionData[] {
-				let inputData = this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex);
+			rawInputData (): INodeExecutionData[] {
+				let inputData: INodeExecutionData[] = [];
+
+				if (this.node) {
+					inputData = this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex);
+				}
+
 				if (inputData.length === 0 || !Array.isArray(inputData)) {
 					return [];
 				}
 
+				return inputData;
+			},
+			inputData (): INodeExecutionData[] {
+				let inputData = this.rawInputData;
+
+				if (this.node && this.pinData) {
+					inputData = Array.isArray(this.pinData)
+						? this.pinData.map((value) => ({
+							json: value,
+						}))
+						: [{
+							json: this.pinData,
+						}];
+				}
+
 				const offset = this.pageSize * (this.currentPage - 1);
 				inputData = inputData.slice(offset, offset + this.pageSize);
 
@@ -489,8 +685,201 @@ export default mixins(
 				}
 				return branches;
 			},
+			editMode(): { enabled: boolean; value: string; } {
+				return this.paneType === 'output'
+					? this.$store.getters['ui/outputPanelEditMode']
+					: { enabled: false, value: '' };
+			},
 		},
 		methods: {
+			onClickDataPinningDocsLink() {
+				this.$telemetry.track('User clicked ndv link', {
+					workflow_id: this.$store.getters.workflowId,
+					session_id: this.sessionId,
+					node_type: this.activeNode.type,
+					pane: 'output',
+					type: 'data-pinning-docs',
+				});
+			},
+			showPinDataDiscoveryTooltip(value: IDataObject[]) {
+				if (!this.isTriggerNode) {
+					return;
+				}
+
+				if (value && value.length > 0) {
+					this.pinDataDiscoveryComplete();
+
+					setTimeout(() => {
+						this.isControlledPinDataTooltip = true;
+						this.pinDataDiscoveryTooltipVisible = true;
+						this.eventBus.$emit('data-pinning-discovery', { isTooltipVisible: true });
+					}, 500); // Wait for NDV to open
+				}
+			},
+			hidePinDataDiscoveryTooltip() {
+				if (this.pinDataDiscoveryTooltipVisible) {
+					this.isControlledPinDataTooltip = false;
+					this.pinDataDiscoveryTooltipVisible = false;
+					this.eventBus.$emit('data-pinning-discovery', { isTooltipVisible: false });
+				}
+			},
+			pinDataDiscoveryComplete() {
+				localStorage.setItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG, 'true');
+				localStorage.setItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG, 'true');
+			},
+			enterEditMode({ origin }: EnterEditModeArgs) {
+				const inputData = this.pinData ? this.pinData : this.convertToJson(this.rawInputData);
+				const data = inputData.length > 0
+					? inputData
+					: TEST_PIN_DATA;
+
+				this.$store.commit('ui/setOutputPanelEditModeEnabled', true);
+				this.$store.commit('ui/setOutputPanelEditModeValue', JSON.stringify(data, null, 2));
+
+				this.$telemetry.track('User opened ndv edit state', {
+					node_type: this.activeNode.type,
+					click_type: origin === 'editIconButton' ? 'button' : 'link',
+					session_id: this.sessionId,
+					run_index: this.runIndex,
+					is_output_present: this.hasNodeRun || this.hasPinData,
+					view: !this.hasNodeRun && !this.hasPinData ? 'undefined' : this.displayMode,
+					is_data_pinned: this.hasPinData,
+				});
+			},
+			onClickCancelEdit() {
+				this.$store.commit('ui/setOutputPanelEditModeEnabled', false);
+				this.$store.commit('ui/setOutputPanelEditModeValue', '');
+				this.onExitEditMode({ type: 'cancel' });
+			},
+			onClickSaveEdit() {
+				const { value } = this.editMode;
+
+				this.clearAllStickyNotifications();
+
+				if (!this.isValidPinDataSize(value)) {
+					this.onDataPinningError({ errorType: 'data-too-large', source: 'save-edit' });
+					return;
+				}
+
+				if (!this.isValidPinDataJSON(value)) {
+					this.onDataPinningError({ errorType: 'invalid-json', source: 'save-edit' });
+					return;
+				}
+
+				this.$store.commit('ui/setOutputPanelEditModeEnabled', false);
+				this.$store.commit('pinData', { node: this.node, data: this.removeJsonKeys(value) });
+
+				this.onDataPinningSuccess({ source: 'save-edit' });
+
+				this.onExitEditMode({ type: 'save' });
+			},
+			removeJsonKeys(value: string) {
+				const parsed = JSON.parse(value);
+
+				return Array.isArray(parsed)
+					? parsed.map(item => this.isJsonKeyObject(item) ? item.json : item)
+					: parsed;
+			},
+			isJsonKeyObject(item: unknown): item is { json: unknown } {
+				if (!this.isObjectLiteral(item)) return false;
+
+				const keys = Object.keys(item);
+
+				return keys.length === 1 && keys[0] === 'json';
+			},
+			onExitEditMode({ type }: { type: 'save' | 'cancel' }) {
+				this.$telemetry.track('User closed ndv edit state', {
+					node_type: this.activeNode.type,
+					session_id: this.sessionId,
+					run_index: this.runIndex,
+					view: this.displayMode,
+					type,
+				});
+			},
+			onDataUnpinning(
+				{ source }: { source: 'banner-link' | 'pin-icon-click' | 'unpin-and-execute-modal' },
+			) {
+				this.$telemetry.track('User unpinned ndv data', {
+					node_type: this.activeNode.type,
+					session_id: this.sessionId,
+					run_index: this.runIndex,
+					source,
+					data_size: stringSizeInBytes(this.pinData),
+				});
+			},
+			onDataPinningSuccess({ source }: { source: 'pin-icon-click' | 'save-edit' }) {
+				this.$telemetry.track('Ndv data pinning success', {
+					pinning_source: source,
+					node_type: this.activeNode.type,
+					session_id: this.sessionId,
+					data_size: stringSizeInBytes(this.pinData),
+					view: this.displayMode,
+					run_index: this.runIndex,
+				});
+			},
+			onDataPinningError(
+				{ errorType, source }: {
+					errorType: 'data-too-large' | 'invalid-json',
+					source: 'on-ndv-close-modal' | 'pin-icon-click' | 'save-edit'
+				},
+			) {
+				this.$telemetry.track('Ndv data pinning failure', {
+					pinning_source: source,
+					node_type: this.activeNode.type,
+					session_id: this.sessionId,
+					data_size: stringSizeInBytes(this.pinData),
+					view: this.displayMode,
+					run_index: this.runIndex,
+					error_type: errorType,
+				});
+			},
+			async onTogglePinData(
+				{ source }: { source: 'banner-link' | 'pin-icon-click' | 'unpin-and-execute-modal' },
+			) {
+				if (source === 'pin-icon-click') {
+					this.$telemetry.track('User clicked pin data icon', {
+						node_type: this.activeNode.type,
+						session_id: this.sessionId,
+						run_index: this.runIndex,
+						view: !this.hasNodeRun && !this.hasPinData ? 'none' : this.displayMode,
+					});
+				}
+
+				this.updateNodeParameterIssues(this.node);
+
+				if (this.hasPinData) {
+					this.onDataUnpinning({ source });
+					this.$store.commit('unpinData', { node: this.node });
+					return;
+				}
+
+				const data = this.convertToJson(this.rawInputData);
+
+				if (!this.isValidPinDataSize(data)) {
+					this.onDataPinningError({ errorType: 'data-too-large', source: 'pin-icon-click' });
+					return;
+				}
+
+				this.onDataPinningSuccess({ source: 'save-edit' });
+
+				this.$store.commit('pinData', { node: this.node, data });
+
+				if (this.maxRunIndex > 0) {
+					this.$showToast({
+						title: this.$locale.baseText('ndv.pinData.pin.multipleRuns.title', {
+							interpolate: {
+								index: `${this.runIndex}`,
+							},
+						}),
+						message: this.$locale.baseText('ndv.pinData.pin.multipleRuns.description'),
+						type: 'success',
+						duration: 2000,
+					});
+				}
+
+				this.hidePinDataDiscoveryTooltip();
+				this.pinDataDiscoveryComplete();
+			},
 			switchToBinary() {
 				this.onDisplayModeChange('binary');
 			},
@@ -699,7 +1088,7 @@ export default mixins(
 				this.updateNodesExecutionIssues();
 			},
 			dataItemClicked (path: string, data: object | number | string) {
-				this.state.value = data;
+				this.selectedOutput.value = data;
 			},
 			isDownloadable (index: number, key: string): boolean {
 				const binaryDataItem: IBinaryData = this.binaryData[index][key];
@@ -780,15 +1169,34 @@ export default mixins(
 				return '["' + allParts.join('"]["') + '"]';
 			},
 			handleCopyClick (commandData: { command: string }) {
-				const newPath = this.convertPath(this.state.path);
+				const isNotSelected = this.selectedOutput.path === deselectedPlaceholder;
+				const selectedPath = isNotSelected ? '[""]' : this.selectedOutput.path;
+
+				let selectedValue = this.selectedOutput.value;
+				if (isNotSelected) {
+					if (this.hasPinData) {
+						selectedValue = this.pinData as object;
+					} else {
+						selectedValue = this.convertToJson(this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex));
+					}
+				}
+
+				const newPath = this.convertPath(selectedPath);
 
 				let value: string;
 				if (commandData.command === 'value') {
-					if (typeof this.state.value === 'object') {
-						value = JSON.stringify(this.state.value, null, 2);
+					if (typeof selectedValue === 'object') {
+						value = JSON.stringify(selectedValue, null, 2);
 					} else {
-						value = this.state.value.toString();
+						value = selectedValue.toString();
 					}
+
+					this.$showToast({
+						title: this.$locale.baseText('runData.copyValue.toast'),
+						message: '',
+						type: 'success',
+						duration: 2000,
+					});
 				} else {
 					let startPath = '';
 					let path = '';
@@ -797,9 +1205,23 @@ export default mixins(
 						const index = pathParts[0].slice(1);
 						path = pathParts.slice(1).join(']');
 						startPath = `$item(${index}).$node["${this.node!.name}"].json`;
+
+						this.$showToast({
+							title: this.$locale.baseText('runData.copyItemPath.toast'),
+							message: '',
+							type: 'success',
+							duration: 2000,
+						});
 					} else if (commandData.command === 'parameterPath') {
 						path = newPath.split(']').slice(1).join(']');
 						startPath = `$node["${this.node!.name}"].json`;
+
+						this.$showToast({
+							title: this.$locale.baseText('runData.copyParameterPath.toast'),
+							message: '',
+							type: 'success',
+							duration: 2000,
+						});
 					}
 					if (!path.startsWith('[') && !path.startsWith('.') && path) {
 						path += '.';
@@ -807,6 +1229,23 @@ export default mixins(
 					value = `{{ ${startPath + path} }}`;
 				}
 
+				const copyType = {
+					value: 'selection',
+					itemPath: 'item_path',
+					parameterPath: 'parameter_path',
+				}[commandData.command];
+
+				this.$telemetry.track('User copied ndv data', {
+					node_type: this.activeNode.type,
+					session_id: this.sessionId,
+					run_index: this.runIndex,
+					view: this.displayMode,
+					copy_type: copyType,
+					workflow_id: this.$store.getters.workflowId,
+					pane: 'output',
+					in_execution_log: this.isReadOnly,
+				});
+
 				this.copyToClipboard(value);
 			},
 			refreshDataSize () {
@@ -829,13 +1268,30 @@ export default mixins(
 			onRunIndexChange(run: number) {
 				this.$emit('runChange', run);
 			},
+			enableNode() {
+				if (this.node) {
+					const updateInformation = {
+						name: this.node.name,
+						properties: {
+							disabled: !this.node.disabled,
+						},
+					};
+
+					this.$store.commit('updateNodeProperties', updateInformation);
+				}
+			},
 		},
 		watch: {
 			node() {
 				this.init();
 			},
-			jsonData () {
+			jsonData (value: IDataObject[]) {
 				this.refreshDataSize();
+
+				const hasSeenPinDataTooltip = localStorage.getItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG);
+				if (!hasSeenPinDataTooltip) {
+					this.showPinDataDiscoveryTooltip(value);
+				}
 			},
 			binaryData (newData: IBinaryKeyData[], prevData: IBinaryKeyData[]) {
 				if (newData.length && !prevData.length && this.displayMode !== 'binary') {
@@ -878,22 +1334,36 @@ export default mixins(
 	flex-direction: column;
 }
 
+.pinned-data-callout {
+	border-radius: inherit;
+	border-bottom-right-radius: 0;
+	border-top: 0;
+	border-left: 0;
+	border-right: 0;
+}
+
 .header {
 	display: flex;
 	align-items: center;
 	margin-bottom: var(--spacing-s);
 	padding: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);
 	position: relative;
-	height: 30px;
 
 	> *:first-child {
 		flex-grow: 1;
 	}
 }
 
-.dataContainer {
+.data-container {
 	position: relative;
 	height: 100%;
+
+	&:hover,
+	&.copy-dropdown-open {
+		.actions-group {
+			opacity: 1;
+		}
+	}
 }
 
 .dataDisplay {
@@ -965,7 +1435,7 @@ export default mixins(
 }
 
 .runSelector {
-	max-width: 200px;
+	max-width: 210px;
 	margin-left: var(--spacing-s);
 	margin-bottom: var(--spacing-s);
 	display: flex;
@@ -975,12 +1445,13 @@ export default mixins(
 	}
 }
 
-.copyButton {
-	height: 30px;
-	top: 12px;
-	right: 24px;
+.actions-group {
 	position: absolute;
 	z-index: 10;
+	top: 12px;
+	right: var(--spacing-l);
+	opacity: 0;
+	transition: opacity 0.3s ease;
 }
 
 .pagination {
@@ -1065,6 +1536,27 @@ export default mixins(
 	flex-grow: 1;
 }
 
+.tooltip-container {
+	max-width: 240px;
+}
+
+.pin-data-button {
+	svg {
+		transition: transform 0.3s ease;
+	}
+}
+
+.pin-data-button-active {
+	&,
+	&:hover,
+	&:focus,
+	&:active {
+		border-color: var(--color-primary);
+		color: var(--color-primary);
+		background: var(--color-primary-tint-2);
+	}
+}
+
 .spinner {
 	* {
 		color: var(--color-primary);
@@ -1077,6 +1569,43 @@ export default mixins(
 	margin-bottom: var(--spacing-s);
 }
 
+.edit-mode {
+	height: calc(100% - var(--spacing-s));
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	align-items: flex-end;
+	padding-left: var(--spacing-s);
+	padding-right: var(--spacing-s);
+}
+
+.edit-mode-body {
+	flex: 1 1 auto;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.edit-mode-footer {
+	display: flex;
+	width: 100%;
+	justify-content: space-between;
+	align-items: center;
+	padding-top: var(--spacing-s);
+}
+
+.edit-mode-footer-infotip {
+	display: flex;
+	flex: 1;
+	width: 100%;
+}
+
+.edit-mode-actions {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	margin-left: var(--spacing-s);
+}
 </style>
 
 <style lang="scss">
@@ -1119,5 +1648,4 @@ export default mixins(
 .vjs-tree .vjs-tree__content.has-line {
 	border-left: 1px dotted var(--color-json-line);
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/TriggerPanel.vue b/packages/editor-ui/src/components/TriggerPanel.vue
index 8dcdf14c5d4ef..ca403b87fe15c 100644
--- a/packages/editor-ui/src/components/TriggerPanel.vue
+++ b/packages/editor-ui/src/components/TriggerPanel.vue
@@ -10,8 +10,8 @@
 					<n8n-text tag="div" size="large" color="text-dark" class="mb-2xs" bold>{{
 						$locale.baseText('ndv.trigger.webhookNode.listening')
 					}}</n8n-text>
-					<div :class="$style.shake">
-						<n8n-text class="mb-xs">
+					<div :class="[$style.shake, 'mb-xs']">
+						<n8n-text>
 							{{
 								$locale.baseText('ndv.trigger.webhookNode.requestHint', {
 									interpolate: { type: this.webhookHttpMethod },
@@ -33,8 +33,8 @@
 					<n8n-text tag="div" size="large" color="text-dark" class="mb-2xs" bold>{{
 						$locale.baseText('ndv.trigger.webhookBasedNode.listening')
 					}}</n8n-text>
-					<div :class="$style.shake">
-						<n8n-text class="mb-xs" tag="div">
+					<div :class="[$style.shake, 'mb-xs']">
+						<n8n-text tag="div">
 							{{
 								$locale.baseText('ndv.trigger.webhookBasedNode.serviceHint', {
 									interpolate: { service: serviceName },
diff --git a/packages/editor-ui/src/components/forms/CodeEditor.vue b/packages/editor-ui/src/components/forms/CodeEditor.vue
new file mode 100644
index 0000000000000..cbede9326ac34
--- /dev/null
+++ b/packages/editor-ui/src/components/forms/CodeEditor.vue
@@ -0,0 +1,136 @@
+<template>
+	<div ref="code" class="text-editor" @keydown.stop />
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
+export default Vue.extend({
+	props: {
+		type: {
+			type: String,
+			default: 'code',
+		},
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		value: {
+			type: String,
+			default: '',
+		},
+		autocomplete: {
+			type: Function,
+		},
+		options: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	data() {
+		return {
+			monacoInstance: null as monaco.editor.IStandaloneCodeEditor | null,
+			monacoLibrary: null as monaco.IDisposable | null,
+		};
+	},
+	methods: {
+		loadEditor() {
+			if (!this.$refs.code) return;
+
+			this.monacoInstance = monaco.editor.create(this.$refs.code as HTMLElement, {
+				automaticLayout: true,
+				value: this.value,
+				language: this.type === 'code' ? 'javascript' : 'json',
+				tabSize: 2,
+				wordBasedSuggestions: false,
+				readOnly: this.readonly,
+				padding: {
+					top: 16,
+				},
+				minimap: {
+					enabled: false,
+				},
+				...this.options,
+			});
+
+			this.monacoInstance.onDidChangeModelContent(() => {
+				const model = this.monacoInstance!.getModel();
+				if (model) {
+					this.$emit('input', model.getValue());
+				}
+			});
+
+			monaco.editor.defineTheme('n8nCustomTheme', {
+				base: 'vs',
+				inherit: true,
+				rules: [],
+				colors: {
+					'editor.background': '#f5f2f0',
+				},
+			});
+			monaco.editor.setTheme('n8nCustomTheme');
+
+			if (this.type === 'code') {
+				// As wordBasedSuggestions: false does not have any effect does it however seem
+				// to remove all all suggestions from the editor if I do this
+				monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+					allowNonTsExtensions: true,
+				});
+
+				if (this.autocomplete) {
+					this.monacoLibrary = monaco.languages.typescript.javascriptDefaults.addExtraLib(
+						this.autocomplete().join('\n'),
+					);
+				}
+			} else if (this.type === 'json') {
+				monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+					validate: true,
+				});
+			}
+		},
+		handleResize() {
+			if (this.monacoInstance) {
+				// Workaround to force Monaco to recompute its boundaries
+				this.monacoInstance.layout({} as unknown as undefined);
+			}
+		},
+	},
+	mounted() {
+		setTimeout(this.loadEditor);
+		window.addEventListener('resize', this.handleResize);
+	},
+	destroyed() {
+		if (this.monacoLibrary) {
+			this.monacoLibrary.dispose();
+		}
+		window.removeEventListener('resize', this.handleResize);
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.text-editor {
+	width: 100%;
+	height: 100%;
+	flex: 1 1 auto;
+	border: 1px solid var(--color-foreground-base);
+	border-radius: var(--border-radius-base);
+}
+
+::v-deep {
+	.monaco-editor {
+		.slider {
+			border-radius: var(--border-radius-base);
+		}
+
+		&,
+		&-background,
+		.inputarea.ime-input,
+		.margin {
+			border-radius: var(--border-radius-base);
+			background-color: var(--color-background-xlight) !important;
+		}
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/forms/index.ts b/packages/editor-ui/src/components/forms/index.ts
new file mode 100644
index 0000000000000..345b928ff05d8
--- /dev/null
+++ b/packages/editor-ui/src/components/forms/index.ts
@@ -0,0 +1 @@
+export { default as CodeEditor } from './CodeEditor.vue';
diff --git a/packages/editor-ui/src/components/helpers.ts b/packages/editor-ui/src/components/helpers.ts
index df3429756fe93..0817ba759a737 100644
--- a/packages/editor-ui/src/components/helpers.ts
+++ b/packages/editor-ui/src/components/helpers.ts
@@ -1,7 +1,7 @@
 import { CORE_NODES_CATEGORY, ERROR_TRIGGER_NODE_TYPE, TEMPLATES_NODES_FILTER } from '@/constants';
 import { INodeUi, ITemplatesNode } from '@/Interface';
 import dateformat from 'dateformat';
-import { INodeTypeDescription } from 'n8n-workflow';
+import {IDataObject, INodeTypeDescription} from 'n8n-workflow';
 
 const KEYWORDS_TO_FILTER = ['API', 'OAuth1', 'OAuth2'];
 const SI_SYMBOL = ['', 'k', 'M', 'G', 'T', 'P', 'E'];
@@ -68,3 +68,9 @@ export function isString(value: unknown): value is string {
 export function isNumber(value: unknown): value is number {
 	return typeof value === 'number';
 }
+
+export function stringSizeInBytes(input: string | IDataObject | IDataObject[] | undefined): number {
+	if (input === undefined) return 0;
+
+	return new Blob([typeof input === 'string' ? input : JSON.stringify(input)]).size;
+}
diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index 75c57cfc5f365..6fae0e4a9bf4c 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -47,10 +47,14 @@ export const nodeHelpers = mixins(
 				return Object.keys(node.parameters).includes('nodeCredentialType');
 			},
 
+			isObjectLiteral(maybeObject: unknown): maybeObject is { [key: string]: string } {
+				return typeof maybeObject === 'object' && maybeObject !== null && !Array.isArray(maybeObject);
+			},
+
 			isCustomApiCallSelected (nodeValues: INodeParameters): boolean {
 				const { parameters } = nodeValues;
 
-				if (!isObjectLiteral(parameters)) return false;
+				if (!this.isObjectLiteral(parameters)) return false;
 
 				return (
 					parameters.resource !== undefined && parameters.resource.includes(CUSTOM_API_CALL_KEY) ||
@@ -73,11 +77,13 @@ export const nodeHelpers = mixins(
 
 			// Returns all the issues of the node
 			getNodeIssues (nodeType: INodeTypeDescription | null, node: INodeUi, ignoreIssues?: string[]): INodeIssues | null {
+				const pinDataNodeNames = Object.keys(this.$store.getters.pinData || {});
+
 				let nodeIssues: INodeIssues | null = null;
 				ignoreIssues = ignoreIssues || [];
 
-				if (node.disabled === true) {
-					// Ignore issues on disabled nodes
+				if (node.disabled === true || pinDataNodeNames.includes(node.name)) {
+					// Ignore issues on disabled and pindata nodes
 					return null;
 				}
 
@@ -510,7 +516,3 @@ declare namespace HttpRequestNode {
 		};
 	}
 }
-
-function isObjectLiteral(maybeObject: unknown): maybeObject is { [key: string]: string } {
-	return typeof maybeObject === 'object' && maybeObject !== null && !Array.isArray(maybeObject);
-}
diff --git a/packages/editor-ui/src/components/mixins/pinData.ts b/packages/editor-ui/src/components/mixins/pinData.ts
new file mode 100644
index 0000000000000..d558bd7d84306
--- /dev/null
+++ b/packages/editor-ui/src/components/mixins/pinData.ts
@@ -0,0 +1,85 @@
+import Vue from 'vue';
+import { INodeUi } from "@/Interface";
+import {IDataObject, PinData} from "n8n-workflow";
+import {stringSizeInBytes} from "@/components/helpers";
+import {MAX_WORKFLOW_PINNED_DATA_SIZE, PIN_DATA_NODE_TYPES_DENYLIST} from "@/constants";
+
+interface PinDataContext {
+	node: INodeUi;
+	$showError(error: Error, title: string): void;
+}
+
+export const pinData = (Vue as Vue.VueConstructor<Vue & PinDataContext>).extend({
+	computed: {
+		pinData (): PinData[string] | undefined {
+			return this.node ? this.$store.getters['pinDataByNodeName'](this.node!.name) : undefined;
+		},
+		hasPinData (): boolean {
+			return !!this.node && typeof this.pinData !== 'undefined';
+		},
+		isPinDataNodeType(): boolean {
+			return !!this.node && !PIN_DATA_NODE_TYPES_DENYLIST.includes(this.node.type);
+		},
+	},
+	methods: {
+		isValidPinDataJSON(data: string): boolean {
+			try {
+				JSON.parse(data);
+
+				return true;
+			} catch (error) {
+				const title = this.$locale.baseText('runData.editOutputInvalid');
+
+				const toRemove = new RegExp(/JSON\.parse:|of the JSON data/, 'g');
+				const message = error.message.replace(toRemove, '').trim();
+				const positionMatchRegEx = /at position (\d+)/;
+				const positionMatch = error.message.match(positionMatchRegEx);
+
+				error.message = message.charAt(0).toUpperCase() + message.slice(1);
+				error.message = error.message.replace(
+					'Unexpected token \' in JSON',
+					this.$locale.baseText('runData.editOutputInvalid.singleQuote'),
+				);
+
+				if (positionMatch) {
+					const position = parseInt(positionMatch[1], 10);
+					const lineBreaksUpToPosition = (data.slice(0, position).match(/\n/g) || []).length;
+
+					error.message = error.message.replace(positionMatchRegEx,
+						this.$locale.baseText('runData.editOutputInvalid.atPosition', {
+							interpolate: {
+								position: `${position}`,
+							},
+						}),
+					);
+
+					error.message = `${
+						this.$locale.baseText('runData.editOutputInvalid.onLine', {
+							interpolate: {
+								line: `${lineBreaksUpToPosition + 1}`,
+							},
+						})
+					} ${error.message}`;
+				}
+
+				this.$showError(error, title);
+
+				return false;
+			}
+		},
+		isValidPinDataSize(data: string | object): boolean {
+			if (typeof data === 'object') data = JSON.stringify(data);
+
+			if (this.$store.getters['pinDataSize'] + stringSizeInBytes(data) > MAX_WORKFLOW_PINNED_DATA_SIZE) {
+				this.$showError(
+					new Error(this.$locale.baseText('ndv.pinData.error.tooLarge.description')),
+					this.$locale.baseText('ndv.pinData.error.tooLarge.title'),
+				);
+
+				return false;
+			}
+
+			return true;
+		},
+	},
+});
diff --git a/packages/editor-ui/src/components/mixins/workflowHelpers.ts b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
index 6fc7e5f83e425..cb21cdd8f1105 100644
--- a/packages/editor-ui/src/components/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
@@ -328,6 +328,7 @@ export const workflowHelpers = mixins(
 				const data: IWorkflowData = {
 					name: this.$store.getters.workflowName,
 					nodes,
+					pinData: this.$store.getters.pinData,
 					connections: workflowConnections,
 					active: this.$store.getters.isActive,
 					settings: this.$store.getters.workflowSettings,
diff --git a/packages/editor-ui/src/components/mixins/workflowRun.ts b/packages/editor-ui/src/components/mixins/workflowRun.ts
index ee243467ce1d9..135823446d2be 100644
--- a/packages/editor-ui/src/components/mixins/workflowRun.ts
+++ b/packages/editor-ui/src/components/mixins/workflowRun.ts
@@ -188,6 +188,7 @@ export const workflowRun = mixins(
 				const startRunData: IStartRunData = {
 					workflowData,
 					runData: newRunData,
+					pinData: workflowData.pinData,
 					startNodes,
 				};
 				if (nodeName) {
@@ -208,6 +209,7 @@ export const workflowRun = mixins(
 					data: {
 						resultData: {
 							runData: newRunData || {},
+							pinData: workflowData.pinData,
 							startNodes,
 							workflowData,
 						},
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 56bab6a9d7396..6986ba81a5f68 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -1,3 +1,5 @@
+export const MAX_WORKFLOW_SIZE = 16777216; // Workflow size limit in bytes
+export const MAX_WORKFLOW_PINNED_DATA_SIZE = 12582912; // Workflow pinned data size limit in bytes
 export const MAX_DISPLAY_DATA_SIZE = 204800;
 export const MAX_DISPLAY_ITEMS_AUTO_ALL = 250;
 export const NODE_NAME_PREFIX = 'node-';
@@ -47,6 +49,7 @@ export const BREAKPOINT_XL = 1920;
 
 
 export const N8N_IO_BASE_URL = `https://api.n8n.io/api/`;
+export const DATA_PINNING_DOCS_URL = 'https://docs.n8n.io/data/data-pinning/';
 
 // node types
 export const BAMBOO_HR_NODE_TYPE = 'n8n-nodes-base.bambooHr';
@@ -78,6 +81,7 @@ export const SET_NODE_TYPE = 'n8n-nodes-base.set';
 export const SERVICENOW_NODE_TYPE = 'n8n-nodes-base.serviceNow';
 export const SLACK_NODE_TYPE = 'n8n-nodes-base.slack';
 export const SPREADSHEET_FILE_NODE_TYPE = 'n8n-nodes-base.spreadsheetFile';
+export const SPLIT_IN_BATCHES_NODE_TYPE = 'n8n-nodes-base.splitInBatches';
 export const START_NODE_TYPE = 'n8n-nodes-base.start';
 export const SWITCH_NODE_TYPE = 'n8n-nodes-base.switch';
 export const THE_HIVE_TRIGGER_NODE_TYPE = 'n8n-nodes-base.theHiveTrigger';
@@ -89,6 +93,16 @@ export const XERO_NODE_TYPE = 'n8n-nodes-base.xero';
 export const ZENDESK_NODE_TYPE = 'n8n-nodes-base.zendesk';
 export const ZENDESK_TRIGGER_NODE_TYPE = 'n8n-nodes-base.zendeskTrigger';
 
+export const MULTIPLE_OUTPUT_NODE_TYPES = [
+	IF_NODE_TYPE,
+	SWITCH_NODE_TYPE,
+];
+
+export const PIN_DATA_NODE_TYPES_DENYLIST = [
+	...MULTIPLE_OUTPUT_NODE_TYPES,
+	SPLIT_IN_BATCHES_NODE_TYPE,
+];
+
 // Node creator
 export const CORE_NODES_CATEGORY = 'Core Nodes';
 export const CUSTOM_NODES_CATEGORY = 'Custom Nodes';
@@ -193,6 +207,8 @@ export const MODAL_CONFIRMED = 'confirmed';
 
 export const VALID_EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 export const LOCAL_STORAGE_ACTIVATION_FLAG = 'N8N_HIDE_ACTIVATION_ALERT';
+export const LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG = 'N8N_PIN_DATA_DISCOVERY_NDV';
+export const LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG = 'N8N_PIN_DATA_DISCOVERY_CANVAS';
 export const BASE_NODE_SURVEY_URL = 'https://n8n-community.typeform.com/to/BvmzxqYv#nodename=';
 
 export const HIRING_BANNER = `
@@ -242,3 +258,14 @@ export enum VIEWS {
 	API_SETTINGS = "APISettings",
 	NOT_FOUND = "NotFoundView",
 }
+
+export const TEST_PIN_DATA = [
+	{
+		name: "First item",
+		code: 1,
+	},
+	{
+		name: "Second item",
+		code: 2,
+	},
+];
diff --git a/packages/editor-ui/src/event-bus/data-pinning-event-bus.ts b/packages/editor-ui/src/event-bus/data-pinning-event-bus.ts
new file mode 100644
index 0000000000000..7eccde2710e4e
--- /dev/null
+++ b/packages/editor-ui/src/event-bus/data-pinning-event-bus.ts
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export const dataPinningEventBus = new Vue();
diff --git a/packages/editor-ui/src/modules/ui.ts b/packages/editor-ui/src/modules/ui.ts
index 60a0891c0a4c5..1994083feb745 100644
--- a/packages/editor-ui/src/modules/ui.ts
+++ b/packages/editor-ui/src/modules/ui.ts
@@ -96,6 +96,10 @@ const module: Module<IUiState, IRootState> = {
 			},
 			output: {
 				displayMode: 'table',
+				editMode: {
+					enabled: false,
+					value: '',
+				},
 			},
 		},
 		mainPanelPosition: 0.5,
@@ -126,6 +130,7 @@ const module: Module<IUiState, IRootState> = {
 		},
 		inputPanelDispalyMode: (state: IUiState) => state.ndv.input.displayMode,
 		outputPanelDispalyMode: (state: IUiState) => state.ndv.output.displayMode,
+		outputPanelEditMode: (state: IUiState): IUiState['ndv']['output']['editMode'] => state.ndv.output.editMode,
 		mainPanelPosition: (state: IUiState) => state.mainPanelPosition,
 	},
 	mutations: {
@@ -170,6 +175,12 @@ const module: Module<IUiState, IRootState> = {
 		setPanelDisplayMode: (state: IUiState, params: {pane: 'input' | 'output', mode: IRunDataDisplayMode}) => {
 			Vue.set(state.ndv[params.pane], 'displayMode', params.mode);
 		},
+		setOutputPanelEditModeEnabled: (state: IUiState, payload: boolean) => {
+			Vue.set(state.ndv.output.editMode, 'enabled', payload);
+		},
+		setOutputPanelEditModeValue: (state: IUiState, payload: string) => {
+			Vue.set(state.ndv.output.editMode, 'value', payload);
+		},
 		setMainPanelRelativePosition(state: IUiState, relativePosition: number) {
 			state.mainPanelPosition = relativePosition;
 		},
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index 1618c58392159..3b688763b3a64 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -50,6 +50,7 @@ import {
 	N8nActionToggle,
 	N8nButton,
 	N8nElButton,
+	N8nCallout,
 	N8nCard,
 	N8nIcon,
 	N8nIconButton,
@@ -90,6 +91,7 @@ Vue.use(N8nActionToggle);
 Vue.use(N8nAvatar);
 Vue.component('n8n-button', N8nButton);
 Vue.component('el-button', N8nElButton);
+Vue.component('n8n-callout', N8nCallout);
 Vue.component('n8n-card', N8nCard);
 Vue.component('n8n-form-box', N8nFormBox);
 Vue.component('n8n-form-inputs', N8nFormInputs);
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 5aaaec4135b31..3b91115711473 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -9,6 +9,7 @@
 	"generic.cancel": "Cancel",
 	"generic.delete": "Delete",
 	"generic.copy": "Copy",
+	"generic.or": "or",
 	"generic.clickToCopy": "Click to copy",
 	"generic.copiedToClipboard": "Copied to clipboard",
 	"generic.beta": "beta",
@@ -332,7 +333,10 @@
 	"ndv.input.notConnected.title": "Wire me up",
 	"ndv.input.notConnected.message": "This node can only receive input data if you connect it to another node.",
 	"ndv.input.notConnected.learnMore": "Learn more",
+	"ndv.input.disabled": "The '{nodeName}' node is disabled and won’t execute.",
+	"ndv.input.disabled.cta": "Enable it",
 	"ndv.output": "Output",
+	"ndv.output.edit": "Edit Output",
 	"ndv.output.all": "all",
 	"ndv.output.branch": "Branch",
 	"ndv.output.executing": "Executing node...",
@@ -346,7 +350,9 @@
 	"ndv.output.pageSize": "Page Size",
 	"ndv.output.run": "Run",
 	"ndv.output.runNodeHint": "Execute this node to output data",
-	"ndv.output.staleDataWarning": "Node parameters have changed. <br /> Execute node again to refresh output.",
+	"ndv.output.insertTestData": "insert test data",
+	"ndv.output.staleDataWarning.regular": "Node parameters have changed.<br>Execute node again to refresh output.",
+	"ndv.output.staleDataWarning.pinData": "Node parameter changes will not affect pinned output data.",
 	"ndv.output.tooMuchData.message": "The node contains {size} MB of data. Displaying it may cause problems. <br /> If you do decide to display it, avoid the JSON view.",
 	"ndv.output.tooMuchData.showDataAnyway": "Show data anyway",
 	"ndv.output.tooMuchData.title": "Output data is huge!",
@@ -354,6 +360,20 @@
 	"ndv.title.cancel": "Cancel",
 	"ndv.title.rename": "Rename",
 	"ndv.title.renameNode": "Rename node",
+	"ndv.pinData.pin.title": "Pin data",
+	"ndv.pinData.pin.description": "Node will always output this data instead of executing. You can also pin data from previous executions.",
+	"ndv.pinData.pin.link": "More info",
+	"ndv.pinData.pin.multipleRuns.title": "Run #{index} was pinned",
+	"ndv.pinData.pin.multipleRuns.description": "This run will be outputted each time the node is run.",
+	"ndv.pinData.unpinAndExecute.title": "Unpin output data?",
+	"ndv.pinData.unpinAndExecute.description": "Executing a node overwrites pinned data.",
+	"ndv.pinData.unpinAndExecute.cancel": "Cancel",
+	"ndv.pinData.unpinAndExecute.confirm": "Unpin and execute",
+	"ndv.pinData.beforeClosing.title": "Save output changes before closing?",
+	"ndv.pinData.beforeClosing.cancel": "Discard",
+	"ndv.pinData.beforeClosing.confirm": "Save",
+	"ndv.pinData.error.tooLarge.title": "Output data is too large to pin",
+	"ndv.pinData.error.tooLarge.description": "You can pin at most 12MB of output per workflow.",
 	"noTagsView.readyToOrganizeYourWorkflows": "Ready to organize your workflows?",
 	"noTagsView.withWorkflowTagsYouReFree": "With workflow tags, you're free to create the perfect tagging system for your flows",
 	"node.activateDeactivateNode": "Activate/Deactivate Node",
@@ -367,6 +387,8 @@
 	"node.nodeIsWaitingTill": "Node is waiting until {date} {time}",
 	"node.theNodeIsWaitingIndefinitelyForAnIncomingWebhookCall": "The node is waiting for an incoming webhook call (indefinitely)",
 	"node.waitingForYouToCreateAnEventIn": "Waiting for you to create an event in {nodeType}",
+	"node.discovery.pinData.canvas": "You can pin this output instead of waiting for a test event. Open node to do so.",
+	"node.discovery.pinData.ndv": "You can pin this output instead of waiting for a test event.",
 	"nodeBase.clickToAddNodeOrDragToConnect": "Click to add node<br />or drag to connect",
 	"nodeCreator.categoryNames.analytics": "Analytics",
 	"nodeCreator.categoryNames.communication": "Communication",
@@ -629,14 +651,25 @@
 	"runData.unlinking.hint": "Unlink displayed input and output runs",
 	"runData.binary": "Binary",
 	"runData.copyItemPath": "Copy Item Path",
+	"runData.copyItemPath.toast": "Item path copied",
 	"runData.copyParameterPath": "Copy Parameter Path",
+	"runData.copyParameterPath.toast": "Parameter path copied",
+	"runData.copyValue": "Copy Selection",
+	"runData.copyValue.toast": "Output data copied",
 	"runData.copyToClipboard": "Copy to Clipboard",
-	"runData.copyValue": "Copy Value",
+	"runData.copyDisabled": "First click on the output data you want to copy, then click this button.",
+	"runData.editOutput": "Edit Output",
+	"runData.editOutputInvalid": "Problem with output data",
+	"runData.editOutputInvalid.singleQuote": "Unexpected single quote. Please use double quotes (\") instead",
+	"runData.editOutputInvalid.onLine": "On line {line}:",
+	"runData.editOutputInvalid.atPosition": "(at position {position})",
+	"runData.editValue": "Edit Value",
 	"runData.downloadBinaryData": "Download",
 	"runData.executeNode": "Execute Node",
 	"runData.executionTime": "Execution Time",
 	"runData.fileExtension": "File Extension",
 	"runData.fileName": "File Name",
+	"runData.invalidPinnedData": "Invalid pinned data",
 	"runData.items": "Items",
 	"runData.json": "JSON",
 	"runData.mimeType": "Mime Type",
@@ -649,6 +682,12 @@
 	"runData.showBinaryData": "View",
 	"runData.startTime": "Start Time",
 	"runData.table": "Table",
+	"runData.pindata.learnMore": "Learn more",
+	"runData.pindata.thisDataIsPinned": "This data is pinned.",
+	"runData.pindata.unpin": "Unpin",
+	"runData.editor.save": "Save",
+	"runData.editor.cancel": "Cancel",
+	"runData.editor.copyDataInfo": "You can copy data from previous executions and paste it above.",
 	"saveButton.save": "@:_reusableBaseText.save",
 	"saveButton.saved": "Saved",
 	"saveButton.saving": "Saving",
diff --git a/packages/editor-ui/src/plugins/icons.ts b/packages/editor-ui/src/plugins/icons.ts
index c7d46714f1d79..61ea7d1830366 100644
--- a/packages/editor-ui/src/plugins/icons.ts
+++ b/packages/editor-ui/src/plugins/icons.ts
@@ -90,6 +90,7 @@ import {
 	faTasks,
 	faTerminal,
 	faThLarge,
+	faThumbtack,
 	faTimes,
 	faTrash,
 	faUndo,
@@ -199,6 +200,7 @@ addIcon(faTable);
 addIcon(faTasks);
 addIcon(faTerminal);
 addIcon(faThLarge);
+addIcon(faThumbtack);
 addIcon(faTimes);
 addIcon(faTrash);
 addIcon(faUndo);
diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts
index 26ac7bf79cfdb..4c1563f23e743 100644
--- a/packages/editor-ui/src/store.ts
+++ b/packages/editor-ui/src/store.ts
@@ -2,7 +2,10 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 
-import { PLACEHOLDER_EMPTY_WORKFLOW_ID, DEFAULT_NODETYPE_VERSION } from '@/constants';
+import {
+	PLACEHOLDER_EMPTY_WORKFLOW_ID,
+	DEFAULT_NODETYPE_VERSION,
+} from '@/constants';
 
 import {
 	IConnection,
@@ -14,6 +17,7 @@ import {
 	IRunData,
 	ITaskData,
 	IWorkflowSettings,
+	PinData,
 } from 'n8n-workflow';
 
 import {
@@ -39,6 +43,7 @@ import users from './modules/users';
 import workflows from './modules/workflows';
 import versions from './modules/versions';
 import templates from './modules/templates';
+import {stringSizeInBytes} from "@/components/helpers";
 
 Vue.use(Vuex);
 
@@ -87,6 +92,7 @@ const state: IRootState = {
 		nodes: [],
 		settings: {},
 		tags: [],
+		pinData: {},
 	},
 	sidebarMenuItems: [],
 	instanceId: '',
@@ -202,6 +208,23 @@ export const store = new Vuex.Store({
 			Vue.set(state, 'selectedNodes', []);
 		},
 
+		// Pin data
+		pinData(state, payload: { node: INodeUi, data: IDataObject }) {
+			if (state.workflow.pinData) {
+				Vue.set(state.workflow.pinData, payload.node.name, payload.data);
+			}
+
+			state.stateIsDirty = true;
+		},
+		unpinData(state, payload: { node: INodeUi }) {
+			if (state.workflow.pinData) {
+				Vue.set(state.workflow.pinData, payload.node.name, undefined);
+				delete state.workflow.pinData[payload.node.name];
+			}
+
+			state.stateIsDirty = true;
+		},
+
 		// Active
 		setActive (state, newActive: boolean) {
 			state.workflow.active = newActive;
@@ -332,6 +355,11 @@ export const store = new Vuex.Store({
 
 			Vue.set(state.nodeMetadata, nameData.new, state.nodeMetadata[nameData.old]);
 			Vue.delete(state.nodeMetadata, nameData.old);
+
+			if (state.workflow.pinData && state.workflow.pinData.hasOwnProperty(nameData.old)) {
+				Vue.set(state.workflow.pinData, nameData.new, state.workflow.pinData[nameData.old]);
+				Vue.delete(state.workflow.pinData, nameData.old);
+			}
 		},
 
 		resetAllNodesIssues (state) {
@@ -424,6 +452,10 @@ export const store = new Vuex.Store({
 		removeNode (state, node: INodeUi) {
 			Vue.delete(state.nodeMetadata, node.name);
 
+			if (state.workflow.pinData && state.workflow.pinData.hasOwnProperty(node.name)) {
+				Vue.delete(state.workflow.pinData, node.name);
+			}
+
 			for (let i = 0; i < state.workflow.nodes.length; i++) {
 				if (state.workflow.nodes[i].name === node.name) {
 					state.workflow.nodes.splice(i, 1);
@@ -436,6 +468,11 @@ export const store = new Vuex.Store({
 			if (data.setStateDirty === true) {
 				state.stateIsDirty = true;
 			}
+
+			if (data.removePinData) {
+				state.workflow.pinData = {};
+			}
+
 			state.workflow.nodes.splice(0, state.workflow.nodes.length);
 			state.nodeMetadata = {};
 		},
@@ -607,6 +644,10 @@ export const store = new Vuex.Store({
 			Vue.set(state.workflow, 'settings', workflowSettings);
 		},
 
+		setWorkflowPinData (state, pinData: Record<string, IDataObject>) {
+			Vue.set(state.workflow, 'pinData', pinData);
+		},
+
 		setWorkflowTagIds (state, tags: string[]) {
 			Vue.set(state.workflow, 'tags', tags);
 		},
@@ -844,6 +885,27 @@ export const store = new Vuex.Store({
 			return state.nodeTypes;
 		},
 
+		/**
+		 * Pin data
+		 */
+
+		pinData: (state): PinData | undefined => {
+			return state.workflow.pinData;
+		},
+		pinDataByNodeName: (state) => (nodeName: string) => {
+			return state.workflow.pinData && state.workflow.pinData[nodeName];
+		},
+		pinDataSize: (state) => {
+			return state.workflow.nodes
+				.reduce((acc, node) => {
+					if (typeof node.pinData !== 'undefined' && node.name !== state.activeNode) {
+						acc += stringSizeInBytes(node.pinData);
+					}
+
+					return acc;
+				}, 0);
+		},
+
 		/**
 		 * Getter for node default names ending with a number: `'S3'`, `'Magento 2'`, etc.
 		 */
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 4f3c20a74bdfe..50fad1352da81 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -548,6 +548,7 @@ export default mixins(
 				this.$store.commit('setWorkflowId', PLACEHOLDER_EMPTY_WORKFLOW_ID);
 
 				this.$store.commit('setWorkflowExecutionData', data);
+				this.$store.commit('setWorkflowPinData', data.workflowData.pinData);
 
 				await this.addNodes(JSON.parse(JSON.stringify(data.workflowData.nodes)), JSON.parse(JSON.stringify(data.workflowData.connections)));
 				this.$nextTick(() => {
@@ -555,6 +556,7 @@ export default mixins(
 					this.$store.commit('setStateDirty', false);
 				});
 
+
 				this.$externalHooks().run('execution.open', { workflowId: data.workflowData.id, workflowName: data.workflowData.name, executionId });
 				this.$telemetry.track('User opened read-only execution', { workflow_id: data.workflowData.id, execution_mode: data.mode, execution_finished: data.finished });
 
@@ -609,6 +611,11 @@ export default mixins(
 				this.resetWorkspace();
 				data.workflow.nodes = CanvasHelpers.getFixedNodesList(data.workflow.nodes);
 				await this.addNodes(data.workflow.nodes, data.workflow.connections);
+
+				if (data.workflow.pinData) {
+					this.$store.commit('setWorkflowPinData', data.workflow.pinData);
+				}
+
 				this.$nextTick(() => {
 					this.zoomToFit();
 				});
@@ -677,6 +684,7 @@ export default mixins(
 				this.$store.commit('setWorkflowId', workflowId);
 				this.$store.commit('setWorkflowName', {newName: data.name, setStateDirty: false});
 				this.$store.commit('setWorkflowSettings', data.settings || {});
+				this.$store.commit('setWorkflowPinData', data.pinData || {});
 
 				const tags = (data.tags || []) as ITag[];
 				this.$store.commit('tags/upsertTags', tags);
@@ -1311,6 +1319,10 @@ export default mixins(
 						});
 					});
 
+					if (workflowData.pinData) {
+						this.$store.commit('setWorkflowPinData', workflowData.pinData);
+					}
+
 					const tagsEnabled = this.$store.getters['settings/areTagsEnabled'];
 					if (importTags && tagsEnabled && Array.isArray(workflowData.tags)) {
 						const allTags: ITag[] = await this.$store.dispatch('tags/fetchAll');
@@ -2167,6 +2179,14 @@ export default mixins(
 
 				await this.addNodes([newNodeData]);
 
+				const pinData = this.$store.getters['pinDataByNodeName'](nodeName);
+				if (pinData) {
+					this.$store.commit('pinData', {
+						node: newNodeData,
+						data: pinData,
+					});
+				}
+
 				this.$store.commit('setStateDirty', true);
 
 				// Automatically deselect all nodes and select the current one and also active
@@ -2831,7 +2851,7 @@ export default mixins(
 				}
 
 				this.$store.commit('removeAllConnections', {setStateDirty: false});
-				this.$store.commit('removeAllNodes', {setStateDirty: false});
+				this.$store.commit('removeAllNodes', { setStateDirty: false, removePinData: true });
 
 				// Reset workflow execution data
 				this.$store.commit('setWorkflowExecutionData', null);
diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index 4a87b614ba914..8908a082c31c4 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -798,6 +798,11 @@ export interface INode {
 	parameters: INodeParameters;
 	credentials?: INodeCredentials;
 	webhookId?: string;
+	pinData?: IDataObject;
+}
+
+export interface PinData {
+	[nodeName: string]: IDataObject[];
 }
 
 export interface INodes {
@@ -1299,6 +1304,7 @@ export interface IRunExecutionData {
 	resultData: {
 		error?: ExecutionError;
 		runData: IRunData;
+		pinData?: PinData;
 		lastNodeExecuted?: string;
 	};
 	executionData?: {
@@ -1372,6 +1378,7 @@ export interface IWorkflowBase {
 	connections: IConnections;
 	settings?: IWorkflowSettings;
 	staticData?: IDataObject;
+	pinData?: PinData;
 }
 
 export interface IWorkflowCredentials {
@@ -1492,6 +1499,7 @@ export interface INodesGraph {
 	node_connections: IDataObject[];
 	nodes: INodesGraphNode;
 	notes: INotesGraphNode;
+	is_pinned: boolean;
 }
 
 export interface INodesGraphNode {
diff --git a/packages/workflow/src/NodeHelpers.ts b/packages/workflow/src/NodeHelpers.ts
index 723709e9f6cdd..366f760d7fe67 100644
--- a/packages/workflow/src/NodeHelpers.ts
+++ b/packages/workflow/src/NodeHelpers.ts
@@ -1060,12 +1060,13 @@ export function getNodeWebhookUrl(
 export function getNodeParametersIssues(
 	nodePropertiesArray: INodeProperties[],
 	node: INode,
+	pinDataNodeNames?: string[],
 ): INodeIssues | null {
 	const foundIssues: INodeIssues = {};
 	let propertyIssues: INodeIssues;
 
-	if (node.disabled === true) {
-		// Ignore issues on disabled nodes
+	if (node.disabled === true || pinDataNodeNames?.includes(node.name)) {
+		// Ignore issues on disabled and pindata nodes
 		return null;
 	}
 
diff --git a/packages/workflow/src/TelemetryHelpers.ts b/packages/workflow/src/TelemetryHelpers.ts
index 72f9054cfc944..3c29e5fa15342 100644
--- a/packages/workflow/src/TelemetryHelpers.ts
+++ b/packages/workflow/src/TelemetryHelpers.ts
@@ -120,6 +120,7 @@ export function generateNodesGraph(
 		node_connections: [],
 		nodes: {},
 		notes: {},
+		is_pinned: Object.keys(workflow.pinData ?? {}).length > 0,
 	};
 	const nodeNameAndIndex: INodeNameIndex = {};
 	const webhookNodeNames: string[] = [];
diff --git a/packages/workflow/src/Workflow.ts b/packages/workflow/src/Workflow.ts
index 1492ee8d85985..2205c23b2f82e 100644
--- a/packages/workflow/src/Workflow.ts
+++ b/packages/workflow/src/Workflow.ts
@@ -252,6 +252,7 @@ export class Workflow {
 	checkReadyForExecution(inputData: {
 		startNode?: string;
 		destinationNode?: string;
+		pinDataNodeNames?: string[];
 	}): IWorfklowIssues | null {
 		let node: INode;
 		let nodeType: INodeType | undefined;
@@ -287,7 +288,11 @@ export class Workflow {
 					typeUnknown: true,
 				};
 			} else {
-				nodeIssues = NodeHelpers.getNodeParametersIssues(nodeType.description.properties, node);
+				nodeIssues = NodeHelpers.getNodeParametersIssues(
+					nodeType.description.properties,
+					node,
+					inputData.pinDataNodeNames,
+				);
 			}
 
 			if (nodeIssues !== null) {

From ed3dceb9a595d3b24f139b7daca03b02ed5170d6 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 18 Jul 2022 16:33:21 +0300
Subject: [PATCH 29/42] fix: Showing pin data without executing the node only
 in output pane.

---
 packages/editor-ui/src/components/RunData.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 7eda024845e4a..691ed06e29d90 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -624,7 +624,7 @@ export default mixins(
 			inputData (): INodeExecutionData[] {
 				let inputData = this.rawInputData;
 
-				if (this.node && this.pinData) {
+				if (this.paneType === 'output' && this.node && this.pinData) {
 					inputData = Array.isArray(this.pinData)
 						? this.pinData.map((value) => ({
 							json: value,

From 7d8e39f1918696d4065f382c47013d67ad6283fa Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 19 Jul 2022 13:00:15 +0300
Subject: [PATCH 30/42] fix: Updated no data message when previous node not
 executed.

---
 packages/editor-ui/src/components/RunData.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 691ed06e29d90..51c4003901c80 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -543,7 +543,7 @@ export default mixins(
 				return defaults;
 			},
 			hasNodeRun(): boolean {
-				return Boolean(!this.isExecuting && this.node && (this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name) || this.hasPinData));
+				return Boolean(!this.isExecuting && this.node && (this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name) || (this.paneType === 'output' && this.hasPinData)));
 			},
 			hasRunError(): boolean {
 				return Boolean(this.node && this.workflowRunData && this.workflowRunData[this.node.name] && this.workflowRunData[this.node.name][this.runIndex] && this.workflowRunData[this.node.name][this.runIndex].error);

From 84c598a92838d0dc4181d4549a949c54aca897cb Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 20 Jul 2022 11:11:11 +0300
Subject: [PATCH 31/42] feat: Added expression input and evaluation for pin
 data nodes without execution.

---
 package-lock.json                             |  59 ++++-
 .../src/components/NodeDetailsView.vue        |   2 +-
 packages/editor-ui/src/components/RunData.vue |   8 +-
 .../src/components/VariableSelector.vue       |  85 +++++++-
 .../src/components/mixins/workflowHelpers.ts  |  56 ++++-
 packages/editor-ui/src/store.ts               | 202 ++++++++++++------
 packages/editor-ui/src/views/NodeView.vue     |  10 +-
 packages/workflow/src/WorkflowDataProxy.ts    |   1 +
 8 files changed, 324 insertions(+), 99 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6b6ab6e6e1976..61eec016ac367 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "n8n",
-	"version": "0.185.0",
+	"version": "0.186.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "n8n",
-			"version": "0.185.0",
+			"version": "0.186.1",
 			"dependencies": {
 				"@apidevtools/swagger-cli": "4.0.0",
 				"@babel/core": "^7.14.6",
@@ -22909,6 +22909,20 @@
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
 			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
 		},
+		"node_modules/body-parser/node_modules/qs": {
+			"version": "6.10.3",
+			"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+			"integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+			"dependencies": {
+				"side-channel": "^1.0.4"
+			},
+			"engines": {
+				"node": ">=0.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/bonjour": {
 			"version": "3.5.0",
 			"resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
@@ -31045,6 +31059,20 @@
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
 			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
 		},
+		"node_modules/express/node_modules/qs": {
+			"version": "6.10.3",
+			"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+			"integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+			"dependencies": {
+				"side-channel": "^1.0.4"
+			},
+			"engines": {
+				"node": ">=0.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/ext": {
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/ext/-/ext-1.6.0.tgz",
@@ -44023,9 +44051,9 @@
 			"integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
 		},
 		"node_modules/media-typer": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-			"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+			"integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
 			"engines": {
 				"node": ">= 0.8"
 			}
@@ -79256,6 +79284,14 @@
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
 					"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+				},
+				"qs": {
+					"version": "6.10.3",
+					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+					"integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+					"requires": {
+						"side-channel": "^1.0.4"
+					}
 				}
 			}
 		},
@@ -85540,6 +85576,14 @@
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
 					"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+				},
+				"qs": {
+					"version": "6.10.3",
+					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+					"integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+					"requires": {
+						"side-channel": "^1.0.4"
+					}
 				}
 			}
 		},
@@ -95765,8 +95809,9 @@
 			"integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
 		},
 		"media-typer": {
-			"version": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-			"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+			"integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw=="
 		},
 		"memfs": {
 			"version": "3.4.7",
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 944aa6353cbc2..32403397c9056 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -489,7 +489,7 @@ export default mixins(
 						return;
 					}
 
-					this.$store.commit('pinData', { node: this.activeNode, data: JSON.parse(value) });
+					this.$store.dispatch('pinData', { node: this.activeNode, data: JSON.parse(value) });
 				}
 
 				this.$store.commit('ui/setOutputPanelEditModeEnabled', false);
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 51c4003901c80..f312c35f620de 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -543,7 +543,7 @@ export default mixins(
 				return defaults;
 			},
 			hasNodeRun(): boolean {
-				return Boolean(!this.isExecuting && this.node && (this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name) || (this.paneType === 'output' && this.hasPinData)));
+				return Boolean(!this.isExecuting && this.node && (this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name) || this.hasPinData));
 			},
 			hasRunError(): boolean {
 				return Boolean(this.node && this.workflowRunData && this.workflowRunData[this.node.name] && this.workflowRunData[this.node.name][this.runIndex] && this.workflowRunData[this.node.name][this.runIndex].error);
@@ -624,7 +624,7 @@ export default mixins(
 			inputData (): INodeExecutionData[] {
 				let inputData = this.rawInputData;
 
-				if (this.paneType === 'output' && this.node && this.pinData) {
+				if (this.node && this.pinData) {
 					inputData = Array.isArray(this.pinData)
 						? this.pinData.map((value) => ({
 							json: value,
@@ -767,7 +767,7 @@ export default mixins(
 				}
 
 				this.$store.commit('ui/setOutputPanelEditModeEnabled', false);
-				this.$store.commit('pinData', { node: this.node, data: this.removeJsonKeys(value) });
+				this.$store.dispatch('pinData', { node: this.node, data: this.removeJsonKeys(value) });
 
 				this.onDataPinningSuccess({ source: 'save-edit' });
 
@@ -862,7 +862,7 @@ export default mixins(
 
 				this.onDataPinningSuccess({ source: 'save-edit' });
 
-				this.$store.commit('pinData', { node: this.node, data });
+				this.$store.dispatch('pinData', { node: this.node, data });
 
 				if (this.maxRunIndex > 0) {
 					this.$showToast({
diff --git a/packages/editor-ui/src/components/VariableSelector.vue b/packages/editor-ui/src/components/VariableSelector.vue
index 659da19ea068b..08a7cdfc552ee 100644
--- a/packages/editor-ui/src/components/VariableSelector.vue
+++ b/packages/editor-ui/src/components/VariableSelector.vue
@@ -19,10 +19,10 @@ import {
 import {
 	GenericValue,
 	IContextObject,
-	IDataObject,
+	IDataObject, INodeExecutionData,
 	IRunData,
 	IRunExecutionData,
-	IWorkflowDataProxyAdditionalKeys,
+	IWorkflowDataProxyAdditionalKeys, PinData,
 	Workflow,
 	WorkflowDataProxy,
 } from 'n8n-workflow';
@@ -248,19 +248,20 @@ export default mixins(
 			},
 
 			/**
-			 * Returns the data the a node does output
+			 * Get the node's output using runData
 			 *
-			 * @param {IRunData} runData The data of the run to get the data of
 			 * @param {string} nodeName The name of the node to get the data of
+			 * @param {IRunData} runData The data of the run to get the data of
 			 * @param {string} filterText Filter text for parameters
 			 * @param {number} [itemIndex=0] The index of the item
 			 * @param {number} [runIndex=0] The index of the run
 			 * @param {string} [inputName='main'] The name of the input
 			 * @param {number} [outputIndex=0] The index of the output
+			 * @param {boolean} [useShort=false] Use short notation
 			 * @returns
 			 * @memberof Workflow
 			 */
-			getNodeOutputData (runData: IRunData, nodeName: string, filterText: string, itemIndex = 0, runIndex = 0, inputName = 'main', outputIndex = 0, useShort = false): IVariableSelectorOption[] | null {
+			getNodeRunDataOutput(nodeName: string, runData: IRunData, filterText: string, itemIndex = 0, runIndex = 0, inputName = 'main', outputIndex = 0, useShort = false): IVariableSelectorOption[] | null {
 				if (!runData.hasOwnProperty(nodeName)) {
 					// No data found for node
 					return null;
@@ -297,6 +298,32 @@ export default mixins(
 
 				const outputData = runData[nodeName][runIndex].data![inputName][outputIndex]![itemIndex];
 
+				return this.getNodeOutput(nodeName, outputData, filterText, useShort);
+			},
+
+			/**
+			 * Get the node's output using pinData
+			 *
+			 * @param {string} nodeName The name of the node to get the data of
+			 * @param {PinData[string]} pinData The node's pin data
+			 * @param {string} filterText Filter text for parameters
+			 * @param {boolean} [useShort=false] Use short notation
+			 */
+			getNodePinDataOutput(nodeName: string, pinData: PinData[string], filterText: string, useShort = false): IVariableSelectorOption[] | null {
+				const outputData = pinData.map((data) => ({ json: data } as INodeExecutionData))[0];
+
+				return this.getNodeOutput(nodeName, outputData, filterText, useShort);
+			},
+
+			/**
+			 * Returns the node's output data
+			 *
+			 * @param {string} nodeName The name of the node to get the data of
+			 * @param {INodeExecutionData} outputData The data of the run to get the data of
+			 * @param {string} filterText Filter text for parameters
+			 * @param {boolean} [useShort=false] Use short notation
+			 */
+			getNodeOutput (nodeName: string, outputData: INodeExecutionData, filterText: string, useShort = false): IVariableSelectorOption[] | null {
 				const returnData: IVariableSelectorOption[] = [];
 
 				// Get json data
@@ -388,6 +415,8 @@ export default mixins(
 				const nodeConnection = this.workflow.getNodeConnectionIndexes(activeNode.name, parentNode[0], 'main');
 				const connectionInputData = this.connectionInputData(parentNode, nodeName, inputName, runIndex, nodeConnection);
 
+				console.log('getNodeContext', {activeNode, connectionInputData});
+
 				if (connectionInputData === null) {
 					return returnData;
 				}
@@ -416,6 +445,8 @@ export default mixins(
 					});
 				}
 
+				console.log('getNodeContext', returnData);
+
 				return returnData;
 			},
 			/**
@@ -491,7 +522,7 @@ export default mixins(
 					}
 				}
 
-				let tempOutputData;
+				let tempOutputData: IVariableSelectorOption[] | null;
 
 				if (parentNode.length) {
 					// If the node has an input node add the input data
@@ -502,7 +533,41 @@ export default mixins(
 					const nodeConnection = this.workflow.getNodeConnectionIndexes(activeNode.name, parentNode[0], 'main');
 					const outputIndex = nodeConnection === undefined ? 0: nodeConnection.sourceIndex;
 
-					tempOutputData = this.getNodeOutputData(runData, parentNode[0], filterText, itemIndex, 0, 'main', outputIndex, true) as IVariableSelectorOption[];
+					tempOutputData = this.getNodeRunDataOutput(parentNode[0], runData, filterText, itemIndex, 0, 'main', outputIndex, true) as IVariableSelectorOption[];
+
+					let pinDataOptions: IVariableSelectorOption[] = [];
+					parentNode.forEach((parentNodeName) => {
+						const pinData = this.$store.getters['pinDataByNodeName'](parentNodeName);
+
+						if (pinData) {
+							pinDataOptions = pinDataOptions.concat(this.getNodePinDataOutput(parentNodeName, pinData, filterText, true) || []);
+						}
+					});
+
+					if (pinDataOptions.length > 0) {
+						if (tempOutputData) {
+							const jsonTempOutputData = tempOutputData.find((tempData) => tempData.name === 'JSON');
+
+							if (jsonTempOutputData) {
+								if (!jsonTempOutputData.options) {
+									jsonTempOutputData.options = [];
+								}
+
+								(pinDataOptions[0].options || []).forEach((pinDataOption) => {
+									const existingOptionIndex = jsonTempOutputData.options!.findIndex((option) => option.name === pinDataOption.name);
+									if (existingOptionIndex !== -1) {
+										jsonTempOutputData.options![existingOptionIndex] = pinDataOption;
+									} else {
+										jsonTempOutputData.options!.push(pinDataOption);
+									}
+								});
+							} else {
+								tempOutputData.push(pinDataOptions[0]);
+							}
+						} else {
+							tempOutputData = pinDataOptions;
+						}
+					}
 
 					if (tempOutputData) {
 						if (JSON.stringify(tempOutputData).length < 102400) {
@@ -602,7 +667,11 @@ export default mixins(
 
 					if (upstreamNodes.includes(nodeName)) {
 						// If the node is an upstream node add also the output data which can be referenced
-						tempOutputData = this.getNodeOutputData(runData, nodeName, filterText, itemIndex);
+						const pinData = this.$store.getters['pinDataByNodeName'](nodeName);
+						tempOutputData = pinData
+							? this.getNodePinDataOutput(nodeName, pinData, filterText)
+							: this.getNodeRunDataOutput(nodeName, runData, filterText, itemIndex);
+
 						if (tempOutputData) {
 							nodeOptions.push(
 								{
diff --git a/packages/editor-ui/src/components/mixins/workflowHelpers.ts b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
index cb21cdd8f1105..9633e39fc616d 100644
--- a/packages/editor-ui/src/components/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
@@ -30,6 +30,7 @@ import {
 	IExecuteData,
 	INodeConnection,
 	IWebhookDescription,
+	PinData,
 } from 'n8n-workflow';
 
 import {
@@ -41,7 +42,7 @@ import {
 	IWorkflowDataUpdate,
 	XYPosition,
 	ITag,
-	IUpdateInformation,
+	IUpdateInformation, IVariableSelectorOption,
 } from '../../Interface';
 
 import { externalHooks } from '@/components/mixins/externalHooks';
@@ -69,7 +70,7 @@ export const workflowHelpers = mixins(
 					source: null,
 				} as IExecuteData;
 
-				if (parentNode.length) {
+				 if (parentNode.length) {
 					// Add the input data to be able to also resolve the short expression format
 					// which does not use the node name
 					const parentNodeName = parentNode[0];
@@ -78,6 +79,7 @@ export const workflowHelpers = mixins(
 					if (workflowRunData === null) {
 						return executeData;
 					}
+
 					if (!workflowRunData[parentNodeName] ||
 						workflowRunData[parentNodeName].length <= runIndex ||
 						!workflowRunData[parentNodeName][runIndex].hasOwnProperty('data') ||
@@ -108,7 +110,7 @@ export const workflowHelpers = mixins(
 			},
 			// Returns connectionInputData to be able to execute an expression.
 			connectionInputData (parentNode: string[], currentNode: string, inputName: string, runIndex: number, nodeConnection: INodeConnection = { sourceIndex: 0,	destinationIndex: 0 }): INodeExecutionData[] | null {
-				let connectionInputData = null;
+				let connectionInputData: INodeExecutionData[] | null = null;
 				const executeData = this.executeData(parentNode, currentNode, inputName, runIndex);
 				if (parentNode.length) {
 					if (!Object.keys(executeData.data).length || executeData.data[inputName].length <= nodeConnection.sourceIndex) {
@@ -131,6 +133,35 @@ export const workflowHelpers = mixins(
 					}
 				}
 
+				const parentPinData = parentNode.reduce((acc: INodeExecutionData[], parentNodeName, index) => {
+					const pinData = this.$store.getters['pinDataByNodeName'](parentNodeName);
+
+					if (pinData) {
+						acc.push({
+							json: pinData[0],
+							pairedItem: {
+								item: index,
+								input: 1,
+							},
+						});
+					}
+
+					return acc;
+				}, []);
+
+				if (parentPinData.length > 0) {
+					if (connectionInputData && connectionInputData.length > 0) {
+						parentPinData.forEach((parentPinDataEntry) => {
+							connectionInputData![0].json = {
+								...connectionInputData![0].json,
+								...parentPinDataEntry.json,
+							};
+						});
+					} else {
+						connectionInputData = parentPinData;
+					}
+				}
+
 				return connectionInputData;
 			},
 
@@ -491,6 +522,25 @@ export const workflowHelpers = mixins(
 					runExecutionData = executionData.data;
 				}
 
+				parentNode.forEach((parentNodeName) => {
+					const pinData: PinData[string] = this.$store.getters['pinDataByNodeName'](parentNodeName);
+
+					if (pinData) {
+						runExecutionData.resultData.runData[parentNodeName] = [
+							{
+								startTime: new Date().valueOf(),
+								executionTime: 0,
+								source: [],
+								data: {
+									main: [
+										pinData.map((data) => ({ json: data })),
+									],
+								},
+							},
+						];
+					}
+				});
+
 				if (connectionInputData === null) {
 					connectionInputData = [];
 				}
diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts
index 4c1563f23e743..657f77c376603 100644
--- a/packages/editor-ui/src/store.ts
+++ b/packages/editor-ui/src/store.ts
@@ -1,4 +1,3 @@
-
 import Vue from 'vue';
 import Vuex from 'vuex';
 
@@ -10,7 +9,7 @@ import {
 import {
 	IConnection,
 	IConnections,
-	IDataObject,
+	IDataObject, IExecuteData,
 	INodeConnections,
 	INodeIssueData,
 	INodeTypeDescription,
@@ -114,15 +113,27 @@ export const store = new Vuex.Store({
 	strict: process.env.NODE_ENV !== 'production',
 	modules,
 	state,
+	actions: {
+		pinData({commit, state}, payload: { node: INodeUi, data: PinData[string] }) {
+			commit('pinData', payload);
+			commit('setPinDataAsExecutionData', {
+				[payload.node.name]: payload.data,
+			});
+		},
+		setWorkflowPinData({commit, state}, payload: PinData) {
+			commit('setWorkflowPinData', payload);
+			commit('setPinDataAsExecutionData', payload);
+		},
+	},
 	mutations: {
 		// Active Actions
-		addActiveAction (state, action: string) {
+		addActiveAction(state, action: string) {
 			if (!state.activeActions.includes(action)) {
 				state.activeActions.push(action);
 			}
 		},
 
-		removeActiveAction (state, action: string) {
+		removeActiveAction(state, action: string) {
 			const actionIndex = state.activeActions.indexOf(action);
 			if (actionIndex !== -1) {
 				state.activeActions.splice(actionIndex, 1);
@@ -130,7 +141,7 @@ export const store = new Vuex.Store({
 		},
 
 		// Active Executions
-		addActiveExecution (state, newActiveExecution: IExecutionsCurrentSummaryExtended) {
+		addActiveExecution(state, newActiveExecution: IExecutionsCurrentSummaryExtended) {
 			// Check if the execution exists already
 			const activeExecution = state.activeExecutions.find(execution => {
 				return execution.id === newActiveExecution.id;
@@ -146,7 +157,7 @@ export const store = new Vuex.Store({
 
 			state.activeExecutions.unshift(newActiveExecution);
 		},
-		finishActiveExecution (state, finishedActiveExecution: IPushDataExecutionFinished) {
+		finishActiveExecution(state, finishedActiveExecution: IPushDataExecutionFinished) {
 			// Find the execution to set to finished
 			const activeExecution = state.activeExecutions.find(execution => {
 				return execution.id === finishedActiveExecution.executionId;
@@ -164,22 +175,22 @@ export const store = new Vuex.Store({
 			Vue.set(activeExecution, 'finished', finishedActiveExecution.data.finished);
 			Vue.set(activeExecution, 'stoppedAt', finishedActiveExecution.data.stoppedAt);
 		},
-		setActiveExecutions (state, newActiveExecutions: IExecutionsCurrentSummaryExtended[]) {
+		setActiveExecutions(state, newActiveExecutions: IExecutionsCurrentSummaryExtended[]) {
 			Vue.set(state, 'activeExecutions', newActiveExecutions);
 		},
 
 		// Active Workflows
-		setActiveWorkflows (state, newActiveWorkflows: string[]) {
+		setActiveWorkflows(state, newActiveWorkflows: string[]) {
 			state.activeWorkflows = newActiveWorkflows;
 		},
-		setWorkflowActive (state, workflowId: string) {
+		setWorkflowActive(state, workflowId: string) {
 			state.stateIsDirty = false;
 			const index = state.activeWorkflows.indexOf(workflowId);
 			if (index === -1) {
 				state.activeWorkflows.push(workflowId);
 			}
 		},
-		setWorkflowInactive (state, workflowId: string) {
+		setWorkflowInactive(state, workflowId: string) {
 			const index = state.activeWorkflows.indexOf(workflowId);
 			if (index !== -1) {
 				state.activeWorkflows.splice(index, 1);
@@ -187,15 +198,15 @@ export const store = new Vuex.Store({
 		},
 		// Set state condition dirty or not
 		// ** Dirty: if current workflow state has been synchronized with database AKA has it been saved
-		setStateDirty (state, dirty : boolean) {
+		setStateDirty(state, dirty: boolean) {
 			state.stateIsDirty = dirty;
 		},
 
 		// Selected Nodes
-		addSelectedNode (state, node: INodeUi) {
+		addSelectedNode(state, node: INodeUi) {
 			state.selectedNodes.push(node);
 		},
-		removeNodeFromSelection (state, node: INodeUi) {
+		removeNodeFromSelection(state, node: INodeUi) {
 			let index;
 			for (index in state.selectedNodes) {
 				if (state.selectedNodes[index].name === node.name) {
@@ -204,12 +215,12 @@ export const store = new Vuex.Store({
 				}
 			}
 		},
-		resetSelectedNodes (state) {
+		resetSelectedNodes(state) {
 			Vue.set(state, 'selectedNodes', []);
 		},
 
 		// Pin data
-		pinData(state, payload: { node: INodeUi, data: IDataObject }) {
+		pinData(state, payload: { node: INodeUi, data: PinData[string] }) {
 			if (state.workflow.pinData) {
 				Vue.set(state.workflow.pinData, payload.node.name, payload.data);
 			}
@@ -224,14 +235,63 @@ export const store = new Vuex.Store({
 
 			state.stateIsDirty = true;
 		},
+		setPinDataAsExecutionData(state, payload: PinData) {
+			let executionData: IExecutionResponse | null = state.workflowExecutionData;
+
+			if (!executionData) {
+				executionData = {
+					id: '',
+					workflowData: state.workflow,
+					data: {
+						startData: {},
+						resultData: {
+							runData: {},
+							lastNodeExecuted: '',
+						},
+						executionData: {
+							contextData: {},
+							nodeExecutionStack: [],
+							waitingExecution: {},
+							waitingExecutionSource: {},
+						},
+					},
+					mode: "manual",
+					startedAt: new Date(),
+					stoppedAt: new Date(),
+					finished: true,
+				};
+			}
+
+			Object.keys(payload).forEach((nodeName) => {
+				executionData!.data!.resultData.runData[nodeName] = [
+					{
+						startTime: 0,
+						executionTime: 0,
+						source: [],
+						data: {
+							main: [
+								payload[nodeName].map((data, index) => ({
+									json: data,
+									pairedItem: { item: index },
+								})),
+							],
+						},
+					},
+				];
+
+				executionData!.data!.resultData.lastNodeExecuted = nodeName;
+			});
+
+			// Vue.set(state, 'workflowExecutionData', executionData);
+		},
 
 		// Active
-		setActive (state, newActive: boolean) {
+		setActive(state, newActive: boolean) {
 			state.workflow.active = newActive;
 		},
 
 		// Connections
-		addConnection (state, data) {
+		addConnection(state, data) {
 			if (data.connection.length !== 2) {
 				// All connections need two entries
 				// TODO: Check if there is an error or whatever that is supposed to be returned
@@ -279,7 +339,7 @@ export const store = new Vuex.Store({
 			}
 
 		},
-		removeConnection (state, data) {
+		removeConnection(state, data) {
 			const sourceData = data.connection[0];
 			const destinationData = data.connection[1];
 
@@ -304,13 +364,13 @@ export const store = new Vuex.Store({
 			}
 
 		},
-		removeAllConnections (state, data) {
+		removeAllConnections(state, data) {
 			if (data && data.setStateDirty === true) {
 				state.stateIsDirty = true;
 			}
 			state.workflow.connections = {};
 		},
-		removeAllNodeConnection (state, node: INodeUi) {
+		removeAllNodeConnection(state, node: INodeUi) {
 			state.stateIsDirty = true;
 			// Remove all source connections
 			if (state.workflow.connections.hasOwnProperty(node.name)) {
@@ -339,7 +399,7 @@ export const store = new Vuex.Store({
 			}
 		},
 
-		renameNodeSelectedAndExecution (state, nameData) {
+		renameNodeSelectedAndExecution(state, nameData) {
 			state.stateIsDirty = true;
 			// If node has any WorkflowResultData rename also that one that the data
 			// does still get displayed also after node got renamed
@@ -362,7 +422,7 @@ export const store = new Vuex.Store({
 			}
 		},
 
-		resetAllNodesIssues (state) {
+		resetAllNodesIssues(state) {
 			state.workflow.nodes.forEach((node) => {
 				node.issues = undefined;
 			});
@@ -370,7 +430,7 @@ export const store = new Vuex.Store({
 			return true;
 		},
 
-		setNodeIssue (state, nodeIssueData: INodeIssueData) {
+		setNodeIssue(state, nodeIssueData: INodeIssueData) {
 
 			const node = state.workflow.nodes.find(node => {
 				return node.name === nodeIssueData.node;
@@ -406,7 +466,7 @@ export const store = new Vuex.Store({
 		},
 
 		// Name
-		setWorkflowName (state, data) {
+		setWorkflowName(state, data) {
 			if (data.setStateDirty === true) {
 				state.stateIsDirty = true;
 			}
@@ -414,7 +474,7 @@ export const store = new Vuex.Store({
 		},
 
 		// replace invalid credentials in workflow
-		replaceInvalidWorkflowCredentials(state, {credentials, invalid, type }) {
+		replaceInvalidWorkflowCredentials(state, {credentials, invalid, type}) {
 			state.workflow.nodes.forEach((node) => {
 				if (!node.credentials || !node.credentials[type]) {
 					return;
@@ -427,7 +487,7 @@ export const store = new Vuex.Store({
 				}
 
 				if (nodeCredentials.id === null) {
-					if (nodeCredentials.name === invalid.name){
+					if (nodeCredentials.name === invalid.name) {
 						node.credentials[type] = credentials;
 					}
 					return;
@@ -440,7 +500,7 @@ export const store = new Vuex.Store({
 		},
 
 		// Nodes
-		addNode (state, nodeData: INodeUi) {
+		addNode(state, nodeData: INodeUi) {
 			if (!nodeData.hasOwnProperty('name')) {
 				// All nodes have to have a name
 				// TODO: Check if there is an error or whatever that is supposed to be returned
@@ -449,7 +509,7 @@ export const store = new Vuex.Store({
 
 			state.workflow.nodes.push(nodeData);
 		},
-		removeNode (state, node: INodeUi) {
+		removeNode(state, node: INodeUi) {
 			Vue.delete(state.nodeMetadata, node.name);
 
 			if (state.workflow.pinData && state.workflow.pinData.hasOwnProperty(node.name)) {
@@ -464,7 +524,7 @@ export const store = new Vuex.Store({
 				}
 			}
 		},
-		removeAllNodes (state, data) {
+		removeAllNodes(state, data) {
 			if (data.setStateDirty === true) {
 				state.stateIsDirty = true;
 			}
@@ -476,7 +536,7 @@ export const store = new Vuex.Store({
 			state.workflow.nodes.splice(0, state.workflow.nodes.length);
 			state.nodeMetadata = {};
 		},
-		updateNodeProperties (state, updateInformation: INodeUpdatePropertiesInformation) {
+		updateNodeProperties(state, updateInformation: INodeUpdatePropertiesInformation) {
 			// Find the node that should be updated
 			const node = state.workflow.nodes.find(node => {
 				return node.name === updateInformation.name;
@@ -489,7 +549,7 @@ export const store = new Vuex.Store({
 				}
 			}
 		},
-		setNodeValue (state, updateInformation: IUpdateInformation) {
+		setNodeValue(state, updateInformation: IUpdateInformation) {
 			// Find the node that should be updated
 			const node = state.workflow.nodes.find(node => {
 				return node.name === updateInformation.name;
@@ -502,7 +562,7 @@ export const store = new Vuex.Store({
 			state.stateIsDirty = true;
 			Vue.set(node, updateInformation.key, updateInformation.value);
 		},
-		setNodeParameters (state, updateInformation: IUpdateInformation) {
+		setNodeParameters(state, updateInformation: IUpdateInformation) {
 			// Find the node that should be updated
 			const node = state.workflow.nodes.find(node => {
 				return node.name === updateInformation.name;
@@ -522,72 +582,72 @@ export const store = new Vuex.Store({
 		},
 
 		// Node-Index
-		addToNodeIndex (state, nodeName: string) {
+		addToNodeIndex(state, nodeName: string) {
 			state.nodeIndex.push(nodeName);
 		},
-		setNodeIndex (state, newData: { index: number, name: string | null}) {
+		setNodeIndex(state, newData: { index: number, name: string | null }) {
 			state.nodeIndex[newData.index] = newData.name;
 		},
-		resetNodeIndex (state) {
+		resetNodeIndex(state) {
 			Vue.set(state, 'nodeIndex', []);
 		},
 
 		// Node-View
-		setNodeViewMoveInProgress (state, value: boolean) {
+		setNodeViewMoveInProgress(state, value: boolean) {
 			state.nodeViewMoveInProgress = value;
 		},
-		setNodeViewOffsetPosition (state, data) {
+		setNodeViewOffsetPosition(state, data) {
 			state.nodeViewOffsetPosition = data.newOffset;
 		},
 
 		// Node-Types
-		setNodeTypes (state, nodeTypes: INodeTypeDescription[]) {
+		setNodeTypes(state, nodeTypes: INodeTypeDescription[]) {
 			Vue.set(state, 'nodeTypes', nodeTypes);
 		},
 
 		// Active Execution
-		setExecutingNode (state, executingNode: string) {
+		setExecutingNode(state, executingNode: string) {
 			state.executingNode = executingNode;
 		},
-		setExecutionWaitingForWebhook (state, newWaiting: boolean) {
+		setExecutionWaitingForWebhook(state, newWaiting: boolean) {
 			state.executionWaitingForWebhook = newWaiting;
 		},
-		setActiveExecutionId (state, executionId: string | null) {
+		setActiveExecutionId(state, executionId: string | null) {
 			state.executionId = executionId;
 		},
 
 		// Push Connection
-		setPushConnectionActive (state, newActive: boolean) {
+		setPushConnectionActive(state, newActive: boolean) {
 			state.pushConnectionActive = newActive;
 		},
 
 		// Webhooks
-		setUrlBaseWebhook (state, urlBaseWebhook: string) {
+		setUrlBaseWebhook(state, urlBaseWebhook: string) {
 			Vue.set(state, 'urlBaseWebhook', urlBaseWebhook);
 		},
-		setEndpointWebhook (state, endpointWebhook: string) {
+		setEndpointWebhook(state, endpointWebhook: string) {
 			Vue.set(state, 'endpointWebhook', endpointWebhook);
 		},
-		setEndpointWebhookTest (state, endpointWebhookTest: string) {
+		setEndpointWebhookTest(state, endpointWebhookTest: string) {
 			Vue.set(state, 'endpointWebhookTest', endpointWebhookTest);
 		},
 
-		setSaveDataErrorExecution (state, newValue: string) {
+		setSaveDataErrorExecution(state, newValue: string) {
 			Vue.set(state, 'saveDataErrorExecution', newValue);
 		},
-		setSaveDataSuccessExecution (state, newValue: string) {
+		setSaveDataSuccessExecution(state, newValue: string) {
 			Vue.set(state, 'saveDataSuccessExecution', newValue);
 		},
-		setSaveManualExecutions (state, saveManualExecutions: boolean) {
+		setSaveManualExecutions(state, saveManualExecutions: boolean) {
 			Vue.set(state, 'saveManualExecutions', saveManualExecutions);
 		},
-		setTimezone (state, timezone: string) {
+		setTimezone(state, timezone: string) {
 			Vue.set(state, 'timezone', timezone);
 		},
-		setExecutionTimeout (state, executionTimeout: number) {
+		setExecutionTimeout(state, executionTimeout: number) {
 			Vue.set(state, 'executionTimeout', executionTimeout);
 		},
-		setMaxExecutionTimeout (state, maxExecutionTimeout: number) {
+		setMaxExecutionTimeout(state, maxExecutionTimeout: number) {
 			Vue.set(state, 'maxExecutionTimeout', maxExecutionTimeout);
 		},
 		setVersionCli(state, version: string) {
@@ -605,25 +665,25 @@ export const store = new Vuex.Store({
 		setDefaultLocale(state, locale: string) {
 			Vue.set(state, 'defaultLocale', locale);
 		},
-		setActiveNode (state, nodeName: string) {
+		setActiveNode(state, nodeName: string) {
 			state.activeNode = nodeName;
 		},
-		setActiveCredentialType (state, activeCredentialType: string) {
+		setActiveCredentialType(state, activeCredentialType: string) {
 			state.activeCredentialType = activeCredentialType;
 		},
 
-		setLastSelectedNode (state, nodeName: string) {
+		setLastSelectedNode(state, nodeName: string) {
 			state.lastSelectedNode = nodeName;
 		},
 
-		setLastSelectedNodeOutputIndex (state, outputIndex: number | null) {
+		setLastSelectedNodeOutputIndex(state, outputIndex: number | null) {
 			state.lastSelectedNodeOutputIndex = outputIndex;
 		},
 
-		setWorkflowExecutionData (state, workflowResultData: IExecutionResponse | null) {
+		setWorkflowExecutionData(state, workflowResultData: IExecutionResponse | null) {
 			state.workflowExecutionData = workflowResultData;
 		},
-		addNodeExecutionData (state, pushData: IPushDataNodeExecuteAfter): void {
+		addNodeExecutionData(state, pushData: IPushDataNodeExecuteAfter): void {
 			if (state.workflowExecutionData === null) {
 				throw new Error('The "workflowExecutionData" is not initialized!');
 			}
@@ -632,7 +692,7 @@ export const store = new Vuex.Store({
 			}
 			state.workflowExecutionData.data.resultData.runData[pushData.nodeName].push(pushData.data);
 		},
-		clearNodeExecutionData (state, nodeName: string): void {
+		clearNodeExecutionData(state, nodeName: string): void {
 			if (state.workflowExecutionData === null) {
 				return;
 			}
@@ -640,23 +700,23 @@ export const store = new Vuex.Store({
 			Vue.delete(state.workflowExecutionData.data.resultData.runData, nodeName);
 		},
 
-		setWorkflowSettings (state, workflowSettings: IWorkflowSettings) {
+		setWorkflowSettings(state, workflowSettings: IWorkflowSettings) {
 			Vue.set(state.workflow, 'settings', workflowSettings);
 		},
 
-		setWorkflowPinData (state, pinData: Record<string, IDataObject>) {
+		setWorkflowPinData(state, pinData: PinData) {
 			Vue.set(state.workflow, 'pinData', pinData);
 		},
 
-		setWorkflowTagIds (state, tags: string[]) {
+		setWorkflowTagIds(state, tags: string[]) {
 			Vue.set(state.workflow, 'tags', tags);
 		},
 
-		addWorkflowTagIds (state, tags: string[]) {
+		addWorkflowTagIds(state, tags: string[]) {
 			Vue.set(state.workflow, 'tags', [...new Set([...(state.workflow.tags || []), ...tags])]);
 		},
 
-		removeWorkflowTagId (state, tagId: string) {
+		removeWorkflowTagId(state, tagId: string) {
 			const tags = state.workflow.tags as string[];
 			const updated = tags.filter((id: string) => id !== tagId);
 
@@ -664,7 +724,7 @@ export const store = new Vuex.Store({
 		},
 
 		// Workflow
-		setWorkflow (state, workflow: IWorkflowDb) {
+		setWorkflow(state, workflow: IWorkflowDb) {
 			Vue.set(state, 'workflow', workflow);
 
 			if (!state.workflow.hasOwnProperty('active')) {
@@ -690,21 +750,21 @@ export const store = new Vuex.Store({
 			}
 		},
 
-		updateNodeTypes (state, nodeTypes: INodeTypeDescription[]) {
+		updateNodeTypes(state, nodeTypes: INodeTypeDescription[]) {
 			const oldNodesToKeep = state.nodeTypes.filter(node => !nodeTypes.find(n => n.name === node.name && n.version.toString() === node.version.toString()));
 			const newNodesState = [...oldNodesToKeep, ...nodeTypes];
 			Vue.set(state, 'nodeTypes', newNodesState);
 			state.nodeTypes = newNodesState;
 		},
 
-		addSidebarMenuItems (state, menuItems: IMenuItem[]) {
+		addSidebarMenuItems(state, menuItems: IMenuItem[]) {
 			const updated = state.sidebarMenuItems.concat(menuItems);
 			Vue.set(state, 'sidebarMenuItems', updated);
 		},
 	},
 	getters: {
 		executedNode: (state): string | undefined => {
-			return state.workflowExecutionData? state.workflowExecutionData.executedNode: undefined;
+			return state.workflowExecutionData ? state.workflowExecutionData.executedNode : undefined;
 		},
 		activeCredentialType: (state): string | null => {
 			return state.activeCredentialType;
@@ -760,7 +820,7 @@ export const store = new Vuex.Store({
 			return `${state.urlBaseWebhook}${state.endpointWebhookTest}`;
 		},
 
-		getStateIsDirty: (state) : boolean => {
+		getStateIsDirty: (state): boolean => {
 			return state.stateIsDirty;
 		},
 
@@ -863,8 +923,8 @@ export const store = new Vuex.Store({
 		allNodes: (state): INodeUi[] => {
 			return state.workflow.nodes;
 		},
-		nodesByName: (state: IRootState): {[name: string]: INodeUi} => {
-			return state.workflow.nodes.reduce((accu: {[name: string]: INodeUi}, node) => {
+		nodesByName: (state: IRootState): { [name: string]: INodeUi } => {
+			return state.workflow.nodes.reduce((accu: { [name: string]: INodeUi }, node) => {
 				accu[node.name] = node;
 				return accu;
 			}, {});
@@ -910,7 +970,7 @@ export const store = new Vuex.Store({
 		 * Getter for node default names ending with a number: `'S3'`, `'Magento 2'`, etc.
 		 */
 		nativelyNumberSuffixedDefaults: (_, getters): string[] => {
-			const { allNodeTypes } = getters as {
+			const {allNodeTypes} = getters as {
 				allNodeTypes: Array<INodeTypeDescription & { defaults: { name: string } }>;
 			};
 
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 50fad1352da81..dc26d940305c8 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -548,7 +548,7 @@ export default mixins(
 				this.$store.commit('setWorkflowId', PLACEHOLDER_EMPTY_WORKFLOW_ID);
 
 				this.$store.commit('setWorkflowExecutionData', data);
-				this.$store.commit('setWorkflowPinData', data.workflowData.pinData);
+				this.$store.dispatch('setWorkflowPinData', data.workflowData.pinData);
 
 				await this.addNodes(JSON.parse(JSON.stringify(data.workflowData.nodes)), JSON.parse(JSON.stringify(data.workflowData.connections)));
 				this.$nextTick(() => {
@@ -613,7 +613,7 @@ export default mixins(
 				await this.addNodes(data.workflow.nodes, data.workflow.connections);
 
 				if (data.workflow.pinData) {
-					this.$store.commit('setWorkflowPinData', data.workflow.pinData);
+					this.$store.dispatch('setWorkflowPinData', data.workflow.pinData);
 				}
 
 				this.$nextTick(() => {
@@ -684,7 +684,7 @@ export default mixins(
 				this.$store.commit('setWorkflowId', workflowId);
 				this.$store.commit('setWorkflowName', {newName: data.name, setStateDirty: false});
 				this.$store.commit('setWorkflowSettings', data.settings || {});
-				this.$store.commit('setWorkflowPinData', data.pinData || {});
+				this.$store.dispatch('setWorkflowPinData', data.pinData || {});
 
 				const tags = (data.tags || []) as ITag[];
 				this.$store.commit('tags/upsertTags', tags);
@@ -1320,7 +1320,7 @@ export default mixins(
 					});
 
 					if (workflowData.pinData) {
-						this.$store.commit('setWorkflowPinData', workflowData.pinData);
+						this.$store.dispatch('setWorkflowPinData', workflowData.pinData);
 					}
 
 					const tagsEnabled = this.$store.getters['settings/areTagsEnabled'];
@@ -2181,7 +2181,7 @@ export default mixins(
 
 				const pinData = this.$store.getters['pinDataByNodeName'](nodeName);
 				if (pinData) {
-					this.$store.commit('pinData', {
+					this.$store.dispatch('pinData', {
 						node: newNodeData,
 						data: pinData,
 					});
diff --git a/packages/workflow/src/WorkflowDataProxy.ts b/packages/workflow/src/WorkflowDataProxy.ts
index bf243815610e6..3ee09923edd32 100644
--- a/packages/workflow/src/WorkflowDataProxy.ts
+++ b/packages/workflow/src/WorkflowDataProxy.ts
@@ -102,6 +102,7 @@ export class WorkflowDataProxy {
 		const that = this;
 		const node = this.workflow.nodes[nodeName];
 
+		console.log({ that });
 		return new Proxy(
 			{},
 			{

From 8d1ee92512f7542961737233b5e3333bed0f2570 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 20 Jul 2022 11:24:38 +0300
Subject: [PATCH 32/42] chore: Fixed linting issues and removed remnant
 console.log().

---
 packages/editor-ui/src/components/VariableSelector.vue | 10 ++++------
 .../editor-ui/src/components/mixins/workflowHelpers.ts |  2 +-
 packages/editor-ui/src/store.ts                        |  2 +-
 packages/workflow/src/WorkflowDataProxy.ts             |  1 -
 4 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/VariableSelector.vue b/packages/editor-ui/src/components/VariableSelector.vue
index 08a7cdfc552ee..8eed40da60290 100644
--- a/packages/editor-ui/src/components/VariableSelector.vue
+++ b/packages/editor-ui/src/components/VariableSelector.vue
@@ -19,10 +19,12 @@ import {
 import {
 	GenericValue,
 	IContextObject,
-	IDataObject, INodeExecutionData,
+	IDataObject,
+	INodeExecutionData,
 	IRunData,
 	IRunExecutionData,
-	IWorkflowDataProxyAdditionalKeys, PinData,
+	IWorkflowDataProxyAdditionalKeys,
+	PinData,
 	Workflow,
 	WorkflowDataProxy,
 } from 'n8n-workflow';
@@ -415,8 +417,6 @@ export default mixins(
 				const nodeConnection = this.workflow.getNodeConnectionIndexes(activeNode.name, parentNode[0], 'main');
 				const connectionInputData = this.connectionInputData(parentNode, nodeName, inputName, runIndex, nodeConnection);
 
-				console.log('getNodeContext', {activeNode, connectionInputData});
-
 				if (connectionInputData === null) {
 					return returnData;
 				}
@@ -445,8 +445,6 @@ export default mixins(
 					});
 				}
 
-				console.log('getNodeContext', returnData);
-
 				return returnData;
 			},
 			/**
diff --git a/packages/editor-ui/src/components/mixins/workflowHelpers.ts b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
index 9633e39fc616d..bf7d9520a1d1d 100644
--- a/packages/editor-ui/src/components/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
@@ -42,7 +42,7 @@ import {
 	IWorkflowDataUpdate,
 	XYPosition,
 	ITag,
-	IUpdateInformation, IVariableSelectorOption,
+	IUpdateInformation,
 } from '../../Interface';
 
 import { externalHooks } from '@/components/mixins/externalHooks';
diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts
index 657f77c376603..864fabbce1244 100644
--- a/packages/editor-ui/src/store.ts
+++ b/packages/editor-ui/src/store.ts
@@ -9,7 +9,7 @@ import {
 import {
 	IConnection,
 	IConnections,
-	IDataObject, IExecuteData,
+	IDataObject,
 	INodeConnections,
 	INodeIssueData,
 	INodeTypeDescription,
diff --git a/packages/workflow/src/WorkflowDataProxy.ts b/packages/workflow/src/WorkflowDataProxy.ts
index 3ee09923edd32..bf243815610e6 100644
--- a/packages/workflow/src/WorkflowDataProxy.ts
+++ b/packages/workflow/src/WorkflowDataProxy.ts
@@ -102,7 +102,6 @@ export class WorkflowDataProxy {
 		const that = this;
 		const node = this.workflow.nodes[nodeName];
 
-		console.log({ that });
 		return new Proxy(
 			{},
 			{

From eb7fa9b730eeaf60229d2b12357778e0dfae7fbc Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 20 Jul 2022 11:25:49 +0300
Subject: [PATCH 33/42] chore: Undone package-lock changes.

---
 package-lock.json | 59 ++++++-----------------------------------------
 1 file changed, 7 insertions(+), 52 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 61eec016ac367..6b6ab6e6e1976 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "n8n",
-	"version": "0.186.1",
+	"version": "0.185.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "n8n",
-			"version": "0.186.1",
+			"version": "0.185.0",
 			"dependencies": {
 				"@apidevtools/swagger-cli": "4.0.0",
 				"@babel/core": "^7.14.6",
@@ -22909,20 +22909,6 @@
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
 			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
 		},
-		"node_modules/body-parser/node_modules/qs": {
-			"version": "6.10.3",
-			"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
-			"integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
-			"dependencies": {
-				"side-channel": "^1.0.4"
-			},
-			"engines": {
-				"node": ">=0.6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/bonjour": {
 			"version": "3.5.0",
 			"resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
@@ -31059,20 +31045,6 @@
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
 			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
 		},
-		"node_modules/express/node_modules/qs": {
-			"version": "6.10.3",
-			"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
-			"integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
-			"dependencies": {
-				"side-channel": "^1.0.4"
-			},
-			"engines": {
-				"node": ">=0.6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/ext": {
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/ext/-/ext-1.6.0.tgz",
@@ -44051,9 +44023,9 @@
 			"integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
 		},
 		"node_modules/media-typer": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
-			"integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+			"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
 			"engines": {
 				"node": ">= 0.8"
 			}
@@ -79284,14 +79256,6 @@
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
 					"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-				},
-				"qs": {
-					"version": "6.10.3",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
-					"integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
-					"requires": {
-						"side-channel": "^1.0.4"
-					}
 				}
 			}
 		},
@@ -85576,14 +85540,6 @@
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
 					"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-				},
-				"qs": {
-					"version": "6.10.3",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
-					"integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
-					"requires": {
-						"side-channel": "^1.0.4"
-					}
 				}
 			}
 		},
@@ -95809,9 +95765,8 @@
 			"integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
 		},
 		"media-typer": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
-			"integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw=="
+			"version": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+			"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
 		},
 		"memfs": {
 			"version": "3.4.7",

From fdf23928e8617c0b80a668d66a3a99e581112c9d Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 20 Jul 2022 11:30:16 +0300
Subject: [PATCH 34/42] fix: Removed pin data store changes.

---
 .../src/components/NodeDetailsView.vue        |  2 +-
 packages/editor-ui/src/components/RunData.vue |  4 +-
 packages/editor-ui/src/store.ts               | 61 -------------------
 packages/editor-ui/src/views/NodeView.vue     | 10 +--
 4 files changed, 8 insertions(+), 69 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 32403397c9056..944aa6353cbc2 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -489,7 +489,7 @@ export default mixins(
 						return;
 					}
 
-					this.$store.dispatch('pinData', { node: this.activeNode, data: JSON.parse(value) });
+					this.$store.commit('pinData', { node: this.activeNode, data: JSON.parse(value) });
 				}
 
 				this.$store.commit('ui/setOutputPanelEditModeEnabled', false);
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index f312c35f620de..7eda024845e4a 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -767,7 +767,7 @@ export default mixins(
 				}
 
 				this.$store.commit('ui/setOutputPanelEditModeEnabled', false);
-				this.$store.dispatch('pinData', { node: this.node, data: this.removeJsonKeys(value) });
+				this.$store.commit('pinData', { node: this.node, data: this.removeJsonKeys(value) });
 
 				this.onDataPinningSuccess({ source: 'save-edit' });
 
@@ -862,7 +862,7 @@ export default mixins(
 
 				this.onDataPinningSuccess({ source: 'save-edit' });
 
-				this.$store.dispatch('pinData', { node: this.node, data });
+				this.$store.commit('pinData', { node: this.node, data });
 
 				if (this.maxRunIndex > 0) {
 					this.$showToast({
diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts
index 864fabbce1244..359fac6282ce7 100644
--- a/packages/editor-ui/src/store.ts
+++ b/packages/editor-ui/src/store.ts
@@ -113,18 +113,6 @@ export const store = new Vuex.Store({
 	strict: process.env.NODE_ENV !== 'production',
 	modules,
 	state,
-	actions: {
-		pinData({commit, state}, payload: { node: INodeUi, data: PinData[string] }) {
-			commit('pinData', payload);
-			commit('setPinDataAsExecutionData', {
-				[payload.node.name]: payload.data,
-			});
-		},
-		setWorkflowPinData({commit, state}, payload: PinData) {
-			commit('setWorkflowPinData', payload);
-			commit('setPinDataAsExecutionData', payload);
-		},
-	},
 	mutations: {
 		// Active Actions
 		addActiveAction(state, action: string) {
@@ -235,55 +223,6 @@ export const store = new Vuex.Store({
 
 			state.stateIsDirty = true;
 		},
-		setPinDataAsExecutionData(state, payload: PinData) {
-			let executionData: IExecutionResponse | null = state.workflowExecutionData;
-
-			if (!executionData) {
-				executionData = {
-					id: '',
-					workflowData: state.workflow,
-					data: {
-						startData: {},
-						resultData: {
-							runData: {},
-							lastNodeExecuted: '',
-						},
-						executionData: {
-							contextData: {},
-							nodeExecutionStack: [],
-							waitingExecution: {},
-							waitingExecutionSource: {},
-						},
-					},
-					mode: "manual",
-					startedAt: new Date(),
-					stoppedAt: new Date(),
-					finished: true,
-				};
-			}
-
-			Object.keys(payload).forEach((nodeName) => {
-				executionData!.data!.resultData.runData[nodeName] = [
-					{
-						startTime: 0,
-						executionTime: 0,
-						source: [],
-						data: {
-							main: [
-								payload[nodeName].map((data, index) => ({
-									json: data,
-									pairedItem: { item: index },
-								})),
-							],
-						},
-					},
-				];
-
-				executionData!.data!.resultData.lastNodeExecuted = nodeName;
-			});
-
-			// Vue.set(state, 'workflowExecutionData', executionData);
-		},
 
 		// Active
 		setActive(state, newActive: boolean) {
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index dc26d940305c8..50fad1352da81 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -548,7 +548,7 @@ export default mixins(
 				this.$store.commit('setWorkflowId', PLACEHOLDER_EMPTY_WORKFLOW_ID);
 
 				this.$store.commit('setWorkflowExecutionData', data);
-				this.$store.dispatch('setWorkflowPinData', data.workflowData.pinData);
+				this.$store.commit('setWorkflowPinData', data.workflowData.pinData);
 
 				await this.addNodes(JSON.parse(JSON.stringify(data.workflowData.nodes)), JSON.parse(JSON.stringify(data.workflowData.connections)));
 				this.$nextTick(() => {
@@ -613,7 +613,7 @@ export default mixins(
 				await this.addNodes(data.workflow.nodes, data.workflow.connections);
 
 				if (data.workflow.pinData) {
-					this.$store.dispatch('setWorkflowPinData', data.workflow.pinData);
+					this.$store.commit('setWorkflowPinData', data.workflow.pinData);
 				}
 
 				this.$nextTick(() => {
@@ -684,7 +684,7 @@ export default mixins(
 				this.$store.commit('setWorkflowId', workflowId);
 				this.$store.commit('setWorkflowName', {newName: data.name, setStateDirty: false});
 				this.$store.commit('setWorkflowSettings', data.settings || {});
-				this.$store.dispatch('setWorkflowPinData', data.pinData || {});
+				this.$store.commit('setWorkflowPinData', data.pinData || {});
 
 				const tags = (data.tags || []) as ITag[];
 				this.$store.commit('tags/upsertTags', tags);
@@ -1320,7 +1320,7 @@ export default mixins(
 					});
 
 					if (workflowData.pinData) {
-						this.$store.dispatch('setWorkflowPinData', workflowData.pinData);
+						this.$store.commit('setWorkflowPinData', workflowData.pinData);
 					}
 
 					const tagsEnabled = this.$store.getters['settings/areTagsEnabled'];
@@ -2181,7 +2181,7 @@ export default mixins(
 
 				const pinData = this.$store.getters['pinDataByNodeName'](nodeName);
 				if (pinData) {
-					this.$store.dispatch('pinData', {
+					this.$store.commit('pinData', {
 						node: newNodeData,
 						data: pinData,
 					});

From e51d12621c1e0bad8d076bce8c977bac6e7dfcf6 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 20 Jul 2022 11:34:51 +0300
Subject: [PATCH 35/42] fix: Created a new object using vuex runExecutionData.

---
 .../src/components/mixins/workflowHelpers.ts  | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/mixins/workflowHelpers.ts b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
index bf7d9520a1d1d..aedca43d9e6c9 100644
--- a/packages/editor-ui/src/components/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
@@ -526,18 +526,27 @@ export const workflowHelpers = mixins(
 					const pinData: PinData[string] = this.$store.getters['pinDataByNodeName'](parentNodeName);
 
 					if (pinData) {
-						runExecutionData.resultData.runData[parentNodeName] = [
-							{
-								startTime: new Date().valueOf(),
-								executionTime: 0,
-								source: [],
-								data: {
-									main: [
-										pinData.map((data) => ({ json: data })),
+						runExecutionData = {
+							...runExecutionData,
+							resultData: {
+								...runExecutionData.resultData,
+								runData: {
+									...runExecutionData.resultData.runData,
+									[parentNodeName]: [
+										{
+											startTime: new Date().valueOf(),
+											executionTime: 0,
+											source: [],
+											data: {
+												main: [
+													pinData.map((data) => ({json: data})),
+												],
+											},
+										},
 									],
 								},
 							},
-						];
+						};
 					}
 				});
 

From 0f922137dcc9164561d82a2041b44ac6c0b8a60a Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 20 Jul 2022 13:27:06 +0300
Subject: [PATCH 36/42] fix: Fixed bug appearing when adding a new node after
 executing.

---
 .../src/components/VariableSelector.vue       | 21 +++++++++++++------
 .../src/components/mixins/workflowHelpers.ts  |  8 ++++---
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/VariableSelector.vue b/packages/editor-ui/src/components/VariableSelector.vue
index 8eed40da60290..8b265d47a8759 100644
--- a/packages/editor-ui/src/components/VariableSelector.vue
+++ b/packages/editor-ui/src/components/VariableSelector.vue
@@ -259,7 +259,7 @@ export default mixins(
 			 * @param {number} [runIndex=0] The index of the run
 			 * @param {string} [inputName='main'] The name of the input
 			 * @param {number} [outputIndex=0] The index of the output
-			 * @param {boolean} [useShort=false] Use short notation
+			 * @param {boolean} [useShort=false] Use short notation $json vs. $node[NodeName].json
 			 * @returns
 			 * @memberof Workflow
 			 */
@@ -309,7 +309,7 @@ export default mixins(
 			 * @param {string} nodeName The name of the node to get the data of
 			 * @param {PinData[string]} pinData The node's pin data
 			 * @param {string} filterText Filter text for parameters
-			 * @param {boolean} [useShort=false] Use short notation
+			 * @param {boolean} [useShort=false] Use short notation $json vs. $node[NodeName].json
 			 */
 			getNodePinDataOutput(nodeName: string, pinData: PinData[string], filterText: string, useShort = false): IVariableSelectorOption[] | null {
 				const outputData = pinData.map((data) => ({ json: data } as INodeExecutionData))[0];
@@ -520,7 +520,7 @@ export default mixins(
 					}
 				}
 
-				let tempOutputData: IVariableSelectorOption[] | null;
+				let tempOutputData: IVariableSelectorOption[] | null | undefined;
 
 				if (parentNode.length) {
 					// If the node has an input node add the input data
@@ -533,16 +533,25 @@ export default mixins(
 
 					tempOutputData = this.getNodeRunDataOutput(parentNode[0], runData, filterText, itemIndex, 0, 'main', outputIndex, true) as IVariableSelectorOption[];
 
-					let pinDataOptions: IVariableSelectorOption[] = [];
+					let pinDataOptions: IVariableSelectorOption[] = [
+						{
+							name: 'JSON',
+							options: [],
+						},
+					];
 					parentNode.forEach((parentNodeName) => {
 						const pinData = this.$store.getters['pinDataByNodeName'](parentNodeName);
 
 						if (pinData) {
-							pinDataOptions = pinDataOptions.concat(this.getNodePinDataOutput(parentNodeName, pinData, filterText, true) || []);
+							const output = this.getNodePinDataOutput(parentNodeName, pinData, filterText, true);
+
+							pinDataOptions[0].options = pinDataOptions[0].options!.concat(
+								output && output[0].options ? output[0].options : [],
+							);
 						}
 					});
 
-					if (pinDataOptions.length > 0) {
+					if (pinDataOptions[0].options!.length > 0) {
 						if (tempOutputData) {
 							const jsonTempOutputData = tempOutputData.find((tempData) => tempData.name === 'JSON');
 
diff --git a/packages/editor-ui/src/components/mixins/workflowHelpers.ts b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
index aedca43d9e6c9..0b1844da47e67 100644
--- a/packages/editor-ui/src/components/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
@@ -505,7 +505,10 @@ export const workflowHelpers = mixins(
 				const workflowRunData = this.$store.getters.getWorkflowRunData as IRunData | null;
 				let runIndexParent = 0;
 				if (workflowRunData !== null && parentNode.length) {
-					runIndexParent = workflowRunData[parentNode[0]].length -1;
+					const firstParentWithWorkflowRunData = parentNode.find((parentNodeName) => workflowRunData[parentNodeName]);
+					if (firstParentWithWorkflowRunData) {
+						runIndexParent = workflowRunData[firstParentWithWorkflowRunData].length - 1;
+					}
 				}
 
 				const nodeConnection = workflow.getNodeConnectionIndexes(activeNode!.name, parentNode[0]);
@@ -539,7 +542,7 @@ export const workflowHelpers = mixins(
 											source: [],
 											data: {
 												main: [
-													pinData.map((data) => ({json: data})),
+													pinData.map((data) => ({ json: data })),
 												],
 											},
 										},
@@ -569,7 +572,6 @@ export const workflowHelpers = mixins(
 			},
 
 			resolveExpression(expression: string, siblingParameters: INodeParameters = {}) {
-
 				const parameters = {
 					'__xxxxxxx__': expression,
 					...siblingParameters,

From 95365f37821cb9e1168b5954df3e6d0303aa3f6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 20 Jul 2022 12:51:21 +0200
Subject: [PATCH 37/42] fix: Fix editor-ui build

---
 packages/editor-ui/src/components/VariableSelector.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/VariableSelector.vue b/packages/editor-ui/src/components/VariableSelector.vue
index 8b265d47a8759..ec5e53e4b5ece 100644
--- a/packages/editor-ui/src/components/VariableSelector.vue
+++ b/packages/editor-ui/src/components/VariableSelector.vue
@@ -533,7 +533,7 @@ export default mixins(
 
 					tempOutputData = this.getNodeRunDataOutput(parentNode[0], runData, filterText, itemIndex, 0, 'main', outputIndex, true) as IVariableSelectorOption[];
 
-					let pinDataOptions: IVariableSelectorOption[] = [
+					const pinDataOptions: IVariableSelectorOption[] = [
 						{
 							name: 'JSON',
 							options: [],

From cf0568c6a119c46f235a682759dbd9549b0ce0cb Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 20 Jul 2022 15:16:50 +0300
Subject: [PATCH 38/42] feat: Added green node connectors when having pin data
 output.

---
 .../src/components/VariableSelector.vue       |  2 +-
 packages/editor-ui/src/store.ts               |  7 ++++
 packages/editor-ui/src/views/NodeView.vue     | 41 ++++++++++++++++++-
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/VariableSelector.vue b/packages/editor-ui/src/components/VariableSelector.vue
index 8b265d47a8759..ec5e53e4b5ece 100644
--- a/packages/editor-ui/src/components/VariableSelector.vue
+++ b/packages/editor-ui/src/components/VariableSelector.vue
@@ -533,7 +533,7 @@ export default mixins(
 
 					tempOutputData = this.getNodeRunDataOutput(parentNode[0], runData, filterText, itemIndex, 0, 'main', outputIndex, true) as IVariableSelectorOption[];
 
-					let pinDataOptions: IVariableSelectorOption[] = [
+					const pinDataOptions: IVariableSelectorOption[] = [
 						{
 							name: 'JSON',
 							options: [],
diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts
index 359fac6282ce7..bdb813c1024d8 100644
--- a/packages/editor-ui/src/store.ts
+++ b/packages/editor-ui/src/store.ts
@@ -43,6 +43,7 @@ import workflows from './modules/workflows';
 import versions from './modules/versions';
 import templates from './modules/templates';
 import {stringSizeInBytes} from "@/components/helpers";
+import {dataPinningEventBus} from "@/event-bus/data-pinning-event-bus";
 
 Vue.use(Vuex);
 
@@ -214,6 +215,8 @@ export const store = new Vuex.Store({
 			}
 
 			state.stateIsDirty = true;
+
+			dataPinningEventBus.$emit('pin-data', { [payload.node.name]: payload.data });
 		},
 		unpinData(state, payload: { node: INodeUi }) {
 			if (state.workflow.pinData) {
@@ -222,6 +225,8 @@ export const store = new Vuex.Store({
 			}
 
 			state.stateIsDirty = true;
+
+			dataPinningEventBus.$emit('unpin-data', { [payload.node.name]: undefined });
 		},
 
 		// Active
@@ -645,6 +650,8 @@ export const store = new Vuex.Store({
 
 		setWorkflowPinData(state, pinData: PinData) {
 			Vue.set(state.workflow, 'pinData', pinData);
+
+			dataPinningEventBus.$emit('pin-data', pinData);
 		},
 
 		setWorkflowTagIds(state, tags: string[]) {
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 50fad1352da81..7e1e52cbbcddb 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -194,7 +194,7 @@ import {
 	INodeCredentialsDetails,
 	TelemetryHelpers,
 	ITelemetryTrackProperties,
-	IWorkflowBase,
+	IWorkflowBase, PinData,
 } from 'n8n-workflow';
 import {
 	ICredentialsResponse,
@@ -219,6 +219,8 @@ import {
 
 import '../plugins/N8nCustomConnectorType';
 import '../plugins/PlusEndpointType';
+import {dataPinningEventBus} from "@/event-bus/data-pinning-event-bus";
+import {addConnectionOutputSuccess} from "./canvasHelpers";
 
 interface AddNodeOptions {
 	position?: XYPosition;
@@ -2290,6 +2292,7 @@ export default mixins(
 
 								if (connection) {
 									const output = outputMap[sourceOutputIndex][targetNodeName][targetInputIndex];
+
 									if (!output || !output.total) {
 										CanvasHelpers.resetConnection(connection);
 									}
@@ -2956,6 +2959,33 @@ export default mixins(
 					await this.importWorkflowData(workflowData);
 				}
 			},
+			addPinDataConnections(pinData: PinData) {
+				Object.keys(pinData).forEach((nodeName) => {
+					// @ts-ignore
+					const connections = this.instance.getConnections({
+						source: NODE_NAME_PREFIX + this.getNodeIndex(nodeName),
+					}) as Connection[];
+
+					connections.forEach((connection) => {
+						CanvasHelpers.addConnectionOutputSuccess(connection, {
+							total: pinData[nodeName].length,
+							iterations: 0,
+						});
+					});
+				});
+			},
+			removePinDataConnections(pinData: PinData) {
+				Object.keys(pinData).forEach((nodeName) => {
+					// @ts-ignore
+					const connections = this.instance.getConnections({
+						source: NODE_NAME_PREFIX + this.getNodeIndex(nodeName),
+					}) as Connection[];
+
+					connections.forEach((connection) => {
+						CanvasHelpers.resetConnection(connection);
+					});
+				});
+			},
 		},
 
 		async mounted () {
@@ -3004,10 +3034,19 @@ export default mixins(
 				setTimeout(() => {
 					this.$store.dispatch('users/showPersonalizationSurvey');
 					this.checkForNewVersions();
+					this.addPinDataConnections(this.$store.getters.pinData);
 				}, 0);
 			});
 
 			this.$externalHooks().run('nodeView.mount');
+
+			dataPinningEventBus.$on('pin-data', (pinData: PinData) => {
+				this.addPinDataConnections(pinData);
+			});
+
+			dataPinningEventBus.$on('unpin-data', (pinData: PinData) => {
+				this.removePinDataConnections(pinData);
+			});
 		},
 
 		destroyed () {

From 3cd16c3792e3e5273487c6b065b0dcadcceab28c Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 20 Jul 2022 16:16:28 +0300
Subject: [PATCH 39/42] chore: Fixed linting errors.

---
 packages/editor-ui/src/views/NodeView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 7e1e52cbbcddb..a91715708121f 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -194,7 +194,8 @@ import {
 	INodeCredentialsDetails,
 	TelemetryHelpers,
 	ITelemetryTrackProperties,
-	IWorkflowBase, PinData,
+	IWorkflowBase,
+	PinData,
 } from 'n8n-workflow';
 import {
 	ICredentialsResponse,
@@ -220,7 +221,6 @@ import {
 import '../plugins/N8nCustomConnectorType';
 import '../plugins/PlusEndpointType';
 import {dataPinningEventBus} from "@/event-bus/data-pinning-event-bus";
-import {addConnectionOutputSuccess} from "./canvasHelpers";
 
 interface AddNodeOptions {
 	position?: XYPosition;

From b18309f2a888f5ba75193778372378fbc9ce8859 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 20 Jul 2022 16:31:59 +0300
Subject: [PATCH 40/42] fix: Added pin data eventBus unsubscribe.

---
 packages/editor-ui/src/views/NodeView.vue | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index a91715708121f..32e3699624695 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -2981,9 +2981,7 @@ export default mixins(
 						source: NODE_NAME_PREFIX + this.getNodeIndex(nodeName),
 					}) as Connection[];
 
-					connections.forEach((connection) => {
-						CanvasHelpers.resetConnection(connection);
-					});
+					connections.forEach(CanvasHelpers.resetConnection);
 				});
 			},
 		},
@@ -3040,13 +3038,8 @@ export default mixins(
 
 			this.$externalHooks().run('nodeView.mount');
 
-			dataPinningEventBus.$on('pin-data', (pinData: PinData) => {
-				this.addPinDataConnections(pinData);
-			});
-
-			dataPinningEventBus.$on('unpin-data', (pinData: PinData) => {
-				this.removePinDataConnections(pinData);
-			});
+			dataPinningEventBus.$on('pin-data', this.addPinDataConnections);
+			dataPinningEventBus.$on('unpin-data', this.removePinDataConnections);
 		},
 
 		destroyed () {
@@ -3056,6 +3049,9 @@ export default mixins(
 			this.$root.$off('newWorkflow', this.newWorkflow);
 			this.$root.$off('importWorkflowData', this.onImportWorkflowDataEvent);
 			this.$root.$off('importWorkflowUrl', this.onImportWorkflowUrlEvent);
+
+			dataPinningEventBus.$off('pin-data', this.addPinDataConnections);
+			dataPinningEventBus.$off('unpin-data', this.removePinDataConnections);
 		},
 	});
 </script>

From 030c9fa2d9ebe44b957cade502eaf2a9b5823baa Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 20 Jul 2022 16:57:38 +0300
Subject: [PATCH 41/42] fix: Added pin data color check after adding a
 connection.

---
 packages/editor-ui/src/views/NodeView.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 32e3699624695..1860cbb81441b 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -2090,6 +2090,10 @@ export default mixins(
 					// so if we do not connect we have to save the connection manually
 					this.$store.commit('addConnection', connectionProperties);
 				}
+
+				setTimeout(() => {
+					this.addPinDataConnections(this.$store.getters.pinData);
+				});
 			},
 			__removeConnection (connection: [IConnection, IConnection], removeVisualConnection = false) {
 				if (removeVisualConnection === true) {

From 9f4b37f73b5e7c1ff06cf0460e1aa74e434b3838 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 20 Jul 2022 17:27:33 +0200
Subject: [PATCH 42/42] :art: Add pindata styles

---
 packages/design-system/theme/src/_tokens.scss | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss
index 0375b9460874e..525216e6c1b06 100644
--- a/packages/design-system/theme/src/_tokens.scss
+++ b/packages/design-system/theme/src/_tokens.scss
@@ -88,6 +88,14 @@
 		var(--color-secondary-tint-2-l)
 	);
 
+	--color-secondary-tint-3-h: 247;
+	--color-secondary-tint-3-s: 49%;
+	--color-secondary-tint-3-l: 95%;
+	--color-secondary-tint-3: hsl(
+		var(--color-secondary-tint-3-h),
+		var(--color-secondary-tint-3-s),
+		var(--color-secondary-tint-3-l)
+	);
 
 	--color-success-h: 150.4;
 	--color-success-s: 60%;
@@ -192,6 +200,33 @@
 		var(--color-info-tint-2-l)
 	);
 
+	--color-grey-h: 228;
+	--color-grey-s: 10%;
+	--color-grey-l: 80%;
+	--color-grey: hsl(
+		var(--color-grey-h),
+		var(--color-grey-s),
+		var(--color-grey-l)
+  );
+
+	--color-light-grey-h: 220;
+	--color-light-grey-s: 20%;
+	--color-light-grey-l: 88%;
+	--color-light-grey: hsl(
+		var(--color-light-grey-h),
+		var(--color-light-grey-s),
+		var(--color-light-grey-l)
+  );
+
+	--color-neutral-h: 228;
+	--color-neutral-s: 10%;
+	--color-neutral-l: 50%;
+	--color-neutral: hsl(
+		var(--color-neutral-h),
+		var(--color-neutral-s),
+		var(--color-neutral-l)
+  );
+
 	--color-text-dark-h: 0;
 	--color-text-dark-s: 0%;
 	--color-text-dark-l: 33.3%;
@@ -374,6 +409,19 @@
 		var(--color-sticky-default-border-l)
 	);
 
+	// Generated Color Shades from 50 to 950
+	// Not yet used in design system
+	@each $color in ('neutral', 'success', 'warning', 'danger') {
+		@each $shade in (50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950) {
+			--color-#{$color}-#{$shade}-l: #{math.div($shade, 10)}#{'%'};
+			--color-#{$color}-#{$shade}: hsl(
+				var(--color-#{$color}-h),
+				var(--color-#{$color}-s),
+				var(--color-#{$color}-#{$shade}-l)
+			);
+		}
+	}
+
 	--border-radius-xlarge: 12px;
 	--border-radius-large: 8px;
 	--border-radius-base: 4px;