feat: Make it possible to dynamically load community nodes (#2849)

* ✨ Make it possible to dynamically load node packages

* ⚡ Fix comment

* ✨ Make possible to dynamically install nodes from npm

* Created migration for sqlite regarding community nodes

* Saving to db whenever a package with nodes is installed

* Created endpoint to fetch installed packages

* WIP - uninstall package with nodes

* Fix lint issues

* Updating nodes via API

* Lint and improvement fixes

* Created community node helpers and removed packages taht do not contain nodes

* Check for package updates when fetching installed packages

* Blocked access to non-owner and preventing incorrect install of packages

* Added auto healing process

* Unit tests for helpers

* Finishing tests for helpers

* Improved unit tests, refactored more helpers and created integration tests for GET

* Implemented detection of missing packages on init and added warning to frontend settings

* Add check for banned packages and fix broken tests

* Create migrations for other db systems

* Updated with latest changes from master

* Fixed conflict errors

* Improved unit tests, refactored more helpers and created integration tests for GET

* Implemented detection of missing packages on init and added warning to frontend settings

* 🔥 Removing access check for the Settings sidebar item

* ✨ Added inital community nodes settings screen

* ⚡Added executionMode flag to settings

* ✨ Implemented N8N-callout component

* 💄Updating Callout component template propery names

* 💄 Updating Callout component styling.

* 💄Updating Callout component sizing and colors.

* ✔️ Updating Callout component test snapshots after styling changes

* ✨ Updating the `ActionBox` component so it supports callouts and conditional button rendering

* 💄 Removing duplicate callout theme validation in the `ActionBox` component. Adding a selection control for it in the storybook.

* ✨ Added warning message if instance is in the queue mode. Updated colors based on the new design.

* ⚡ Added a custom permission support to router

* 🔨 Implemented UM detection as a custom permission.

* 👌Updating route permission logic.

* ✨ Implemented installed community packages list in the settings view

* 👌 Updating settings routes rules and community nodes setting view.

* Allow installation of packages that failed to load

* 👌 Updating `ActionBox`, `CommuntyPackageCard` components and settings loading logic.

* 👌 Fixing community nodes loading state and sidebar icon spacing.

* ✨ Implemented loading skeletons for community package cards

* 👌 Handling errrors while loading installed package list. Updating spacing.

* 👌 Updating community nodes error messages.

* Added disable flag

* 🐛 Fixing a community nodes update detection bug when there are missing packages. (#3497)

* ✨ Added front-end support for community nodes feature flag

* ✨ Implemented community package installation modal dialog

* 💄 Community nodes installation modal updates: Moved links to constants and used them in translations, disabling inputs in loading state.

* ✨ Implemented community packages install flow

* Standardize error codes (#3501)

* Standardize error: 400 for request issues such as invalid package name and 500 for installation problems

* Fix http status code for when package is not found

* ✨ Implemented community package installation modal dialog

* 💄 Community nodes installation modal updates: Moved links to constants and used them in translations, disabling inputs in loading state.

* ✨ Implemented community packages install flow

* ✨ Updated error handling based on the response codes

* ✨ Implemented community package installation modal dialog

* ✨ Implemented community package uninstall flow.

* ✨ Finished update confirm modal UI

* 💄 Replaced community nodes tooltip image with the one exported from figma.

* ✨ Implemented community package update process

* ✨ Updating community nodes list after successful package update

* 🔒 Updating public API setting route to use new access rules. Updating express app definition in community nodes tests

* ✨ Implemented community package installation modal dialog

* 💄 Community nodes installation modal updates: Moved links to constants and used them in translations, disabling inputs in loading state.

* ✨ Implemented community packages install flow

* ✨ Updated error handling based on the response codes

* Change output for installation request

* Improve payload for update requests

* 👌 Updating community nodes install modal UI

* 👌 Updating community nodes confirm modal logic

* 👌 Refactoring community nodes confirm modal dialog

* 👌 Separating community nodes components loading states

* 💄 Updating community nodes install modal spacing.

* Fix behavior for installing already installed packages

* 💡 Commenting community nodes install process

* 🔥 Removing leftover commits of deleted Vue mutations

* ✨ Updated node list to identify community nodes and handle node name clash

* ✨ Implemented missing community node dialog.

* 💄 Updating n8n-tabs component to support tooltips

* ✨ Updating node details with community node details.

* 🔨 Using back-end response when updating community packages

* 👌 Updating tabs component and refactoring community nodes store mutations

* 👌 Adding community node flag to node type descriptions and using it to identify community nodes

* 👌 Hiding unnecessary elements from missing node details panel.

* 👌 Updating missing node type descriptions for custom and community nodes

* 👌 Updating community node package name detection logic

* 👌 Removing communityNode flag from node description

* ✨ Adding `force` flag to credentials fetching (#3527)

* ✨ Adding `force` flag to credentials fetching which can be used to skip check when loading credentials

* ✨ Forcing credentials loading when opening nodeView

* 👌 Minor updates to community nodes details panel

* tests for post endpoint

* duplicate comments

* Add Patch and Delete enpoints tests

* 🔒 Using `pageCategory`prop to assemble the list of settings routes instead of hard-coded array (#3562)

* 📈 Added front-end telemetry events for community nodes

* 📈 Updating community nodes telemetry events

* 💄 Updating community nodes settings UI elements based on product/design review

* 💄 Updating node view & node details view for community nodes based on product/design feedback

* 💄 Fixing community node text capitalisation

* ✨ Adding community node install error message under the package name input field

* Fixed and improved tests

* Fix lint issue

* feat: Migrated to npm release of riot-tmpl fork.

* 📈 Updating community nodes telemetry events based on the product review

* 💄 Updating community nodes UI based on the design feedback

* 🔀 Merging recent node draggable panels changes

* Implement self healing process

* Improve error messages for package name requirement and disk space

* 💄 Removing front-end error message override since appropriate response is available from the back-end

* Fix lint issues

* Fix installed node name

* 💄 Removed additional node name parsing

* 📈 Updating community nodes telemetry events

* Fix postgres migration for cascading nodes when package is removed

* Remove postman mock for banned packages

* 📈 Adding missing telemetry event for community node documentation click

* 🐛 Fixing community nodes UI bugs reported during the bug bash

* Fix issue with uninstalling packages not reflecting UI

* 🐛 Fixing a missing node type bug when trying to run a workflow.

* Improve error detection for installing packages

* 💄 Updating community nodes components styling and wording based on the product feedback

* Implement telemetry be events

* Add author name and email to packages

* Fix telemetry be events for community packages

* 📈 Updating front-end telemetry events with community nodes author data

* 💄 Updating credentials documentation link logic to handle community nodes credentials

* 🐛 Fixing draggable panels logic

* Fix duplicate wrong import

* 💄 Hiding community nodes credentials documentation links when they don't contain an absolute URL

* Fix issue with detection of missing packages

* 💄 Adding the `Docs` tab to community nodes

* 💄 Adding a failed loading indicator to community nodes list

* Prevent n8n from crashing on startup

* Refactor and improve code quality

* ⚡ Remove not needed depenedency

Co-authored-by: Omar Ajoue <krynble@gmail.com>
Co-authored-by: Milorad Filipović <milorad@n8n.io>
Co-authored-by: Milorad FIlipović <miloradfilipovic19@gmail.com>
Co-authored-by: agobrech <ael.gobrecht@gmail.com>
Co-authored-by: Alex Grozav <alex@grozav.com>

packages/design-system/src/components/N8nActionBox/ActionBox.stories.js

@@ -5,6 +5,12 @@ export default {
 	title: 'Atoms/ActionBox',
 	component: N8nActionBox,
 	argTypes: {
+		calloutTheme: {
+			control: {
+				type: 'select',
+				options: ['info', 'success', 'warning', 'danger', 'custom'],
+			},
+		},
 	},
 	parameters: {
 		backgrounds: { default: '--color-background-light' },

packages/design-system/src/components/N8nActionBox/ActionBox.vue

@@ -3,12 +3,15 @@
 		<div :class="$style.heading" v-if="props.heading">
 			<component :is="$options.components.N8nHeading" size="xlarge" align="center">{{ props.heading }}</component>
 		</div>
-		<div :class="$style.description">
+		<div :class="$style.description" @click="(e) => listeners.descriptionClick && listeners.descriptionClick(e)">
 			<n8n-text color="text-base"><span v-html="props.description"></span></n8n-text>
 		</div>
-		<component :is="$options.components.N8nButton" :label="props.buttonText" size="large"
+		<component v-if="props.buttonText" :is="$options.components.N8nButton" :label="props.buttonText" size="large"
 			@click="(e) => listeners.click && listeners.click(e)"
 		/>
+		<component v-if="props.calloutText" :is="$options.components.N8nCallout"
+			:theme="props.calloutTheme" :message="props.calloutText" :icon="props.calloutIcon"
+		/>
 	</div>
 </template>
 
@@ -16,6 +19,7 @@
 import N8nButton from '../N8nButton';
 import N8nHeading from '../N8nHeading';
 import N8nText from '../N8nText';
+import N8nCallout from '../N8nCallout';
 
 export default {
 	name: 'n8n-action-box',
@@ -29,11 +33,22 @@ export default {
 		description: {
 			type: String,
 		},
+		calloutText: {
+			type: String,
+		},
+		calloutTheme: {
+			type: String,
+			default: 'info',
+		},
+		calloutIcon: {
+			type: String,
+		},
 	},
 	components: {
 		N8nButton,
 		N8nHeading,
 		N8nText,
+		N8nCallout,
 	},
 };
 </script>
@@ -61,6 +76,7 @@ export default {
 }
 
 .description {
+	color: var(--color-text-base);
 	margin-bottom: var(--spacing-xl);
 }
 </style>

packages/design-system/src/components/N8nActionToggle/ActionToggle.vue

@@ -15,6 +15,15 @@
 					:disabled="action.disabled"
 				>
 					{{action.label}}
+					<div :class="$style.iconContainer">
+						<component
+							v-if="action.type === 'external-link'"
+							:is="$options.components.N8nIcon"
+							icon="external-link-alt"
+							size="xsmall"
+							color="text-base"
+						/>
+					</div>
 				</el-dropdown-item>
 			</el-dropdown-menu>
 		</el-dropdown>
@@ -100,4 +109,12 @@ export default {
 		background-color: var(--color-background-xlight);
 	}
 }
+
+.iconContainer {
+	display: inline;
+}
+
+li:hover .iconContainer svg {
+	color: var(--color-primary-tint-1);
+}
 </style>

packages/design-system/src/components/N8nCallout/Callout.stories.ts

@@ -0,0 +1,40 @@
+import N8nCallout from './Callout.vue';
+import { StoryFn } from '@storybook/vue';
+
+export default {
+	title: 'Atoms/Callout',
+	component: N8nCallout,
+	argTypes: {
+		theme: {
+			control: {
+				type: 'select',
+				options: ['info', 'success', 'warning', 'danger', 'custom'],
+			},
+		},
+		message: {
+			control: {
+				type: 'text',
+			},
+		},
+		icon: {
+			control: {
+				type: 'text',
+			},
+		},
+	},
+};
+
+const template : StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nCallout,
+	},
+	template: `<n8n-callout v-bind="$props"></n8n-callout>`,
+});
+
+export const callout = template.bind({});
+callout.args = {
+	theme: 'custom',
+	icon: 'code-branch',
+	message: 'This is a callout. <a href="https://n8n.io" target="_blank">Read more.</a>',
+};

packages/design-system/src/components/N8nCallout/Callout.vue

@@ -0,0 +1,103 @@
+<template>
+	<div :class="classes" role="alert">
+		<div :class="$style.icon">
+			<n8n-icon v-bind="$attrs" :icon="getIcon" size="large"/>
+		</div>
+		<div :class="$style.message" >
+			<n8n-text size="small" v-bind="$attrs"><span v-html="message"></span></n8n-text>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import N8nIcon from '../N8nIcon';
+import N8nText from '../N8nText';
+
+export default Vue.extend({
+	name: 'n8n-callout',
+	components: {
+		N8nIcon,
+		N8nText
+	},
+	props: {
+		theme: {
+			type: String,
+			required: true,
+			validator: (value: string): boolean =>
+				['info', 'success', 'warning', 'danger', 'custom'].includes(value),
+		},
+		message: {
+			type: String,
+			required: true
+		},
+		icon: {
+			type: String,
+			default: 'info-circle'
+		}
+	},
+	data() {
+		return {
+			defaultIcons: {
+				'info': 'info-circle',
+				'success': 'check-circle',
+				'warning': 'exclamation-triangle',
+				'danger': 'times-circle',
+			}
+		}
+	},
+	computed: {
+		classes(): string[] {
+			return [
+				this.$style['callout'],
+				this.$style[this.theme],
+			];
+		},
+		getIcon(): string {
+			if(this.theme === 'custom') {
+				return this.icon;
+			}
+			return this.defaultIcons[this.theme];
+		},
+	}
+});
+</script>
+
+<style lang="scss" module>
+	.callout {
+		display: flex;
+		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;
+	}
+
+	.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);
+	}
+</style>

packages/design-system/src/components/N8nCallout/__tests__/Callout.spec.ts

@@ -0,0 +1,107 @@
+import { render } from '@testing-library/vue';
+import N8nCallout from '../Callout.vue';
+
+describe('components', () => {
+	describe('N8NCallout', () => {
+		describe('props', () => {
+			it('should render info theme correctly', () => {
+				const wrapper = render(N8nCallout, {
+					props: {
+						theme: 'info',
+						message: 'This is an info callout.',
+					},
+					stubs: [
+						'n8n-icon',
+						'n8n-text',
+					],
+				});
+				expect(wrapper.html()).toMatchSnapshot();
+			});
+			it('should render success theme correctly', () => {
+				const wrapper = render(N8nCallout, {
+					props: {
+						theme: 'success',
+						message: 'This is an success callout.',
+					},
+					stubs: [
+						'n8n-icon',
+						'n8n-text',
+					],
+				});
+				expect(wrapper.html()).toMatchSnapshot();
+			});
+			it('should render warning theme correctly', () => {
+				const wrapper = render(N8nCallout, {
+					props: {
+						theme: 'warning',
+						message: 'This is an warning callout.',
+					},
+					stubs: [
+						'n8n-icon',
+						'n8n-text',
+					],
+				});
+				expect(wrapper.html()).toMatchSnapshot();
+			});
+			it('should render danger theme correctly', () => {
+				const wrapper = render(N8nCallout, {
+					props: {
+						theme: 'danger',
+						message: 'This is an danger callout.',
+					},
+					stubs: [
+						'n8n-icon',
+						'n8n-text',
+					],
+				});
+				expect(wrapper.html()).toMatchSnapshot();
+			});
+			it('should render custom theme correctly', () => {
+				const wrapper = render(N8nCallout, {
+					props: {
+						theme: 'custom',
+						message: 'This is an custom callout.',
+						icon: 'code',
+					},
+					stubs: [
+						'n8n-icon',
+						'n8n-text',
+					],
+				});
+				expect(wrapper.html()).toMatchSnapshot();
+			});
+		});
+		describe('content', () => {
+			it('should render custom HTML content correctly', () => {
+				const wrapper = render(N8nCallout, {
+					props: {
+						theme: 'custom',
+						message: 'This is an HTML callout. <a href="#" target="_blank"><b>Read more</b></a>',
+						icon: 'code',
+					},
+					stubs: [
+						'n8n-icon',
+						'n8n-text',
+					],
+				});
+				expect(wrapper.html()).toMatchSnapshot();
+			});
+			it('should pass props to text component correctly', () => {
+				const wrapper = render(N8nCallout, {
+					props: {
+						theme: 'warning',
+						message: 'This is a callout.',
+						bold: true,
+						align: 'center',
+						tag: 'p',
+					},
+					stubs: [
+						'n8n-icon',
+						'n8n-text',
+					],
+				});
+				expect(wrapper.html()).toMatchSnapshot();
+			});
+		});
+	});
+});

packages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap

@@ -0,0 +1,78 @@
+// Vitest Snapshot v1
+
+exports[`components > N8NCallout > content > should pass props to text component correctly 1`] = `
+"<div role=\\"alert\\" class=\\"_callout_a6gr6_1 _warning_a6gr6_16\\" bold=\\"true\\" align=\\"center\\" tag=\\"p\\">
+  <div class=\\"_icon_a6gr6_34\\">
+    <n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"large\\" bold=\\"true\\" align=\\"center\\" tag=\\"p\\"></n8n-icon-stub>
+  </div>
+  <div>
+    <n8n-text-stub bold=\\"true\\" size=\\"small\\" align=\\"center\\" tag=\\"p\\"><span>This is a callout.</span></n8n-text-stub>
+  </div>
+</div>"
+`;
+
+exports[`components > N8NCallout > content > should render custom HTML content correctly 1`] = `
+"<div role=\\"alert\\" class=\\"_callout_a6gr6_1 _custom_a6gr6_10\\">
+  <div class=\\"_icon_a6gr6_34\\">
+    <n8n-icon-stub icon=\\"code\\" size=\\"large\\"></n8n-icon-stub>
+  </div>
+  <div>
+    <n8n-text-stub size=\\"small\\" tag=\\"span\\"><span>This is an HTML callout. <a href=\\"#\\" target=\\"_blank\\"><b>Read more</b></a></span></n8n-text-stub>
+  </div>
+</div>"
+`;
+
+exports[`components > N8NCallout > props > should render custom theme correctly 1`] = `
+"<div role=\\"alert\\" class=\\"_callout_a6gr6_1 _custom_a6gr6_10\\">
+  <div class=\\"_icon_a6gr6_34\\">
+    <n8n-icon-stub icon=\\"code\\" size=\\"large\\"></n8n-icon-stub>
+  </div>
+  <div>
+    <n8n-text-stub size=\\"small\\" tag=\\"span\\"><span>This is an custom callout.</span></n8n-text-stub>
+  </div>
+</div>"
+`;
+
+exports[`components > N8NCallout > props > should render danger theme correctly 1`] = `
+"<div role=\\"alert\\" class=\\"_callout_a6gr6_1 _danger_a6gr6_28\\">
+  <div class=\\"_icon_a6gr6_34\\">
+    <n8n-icon-stub icon=\\"times-circle\\" size=\\"large\\"></n8n-icon-stub>
+  </div>
+  <div>
+    <n8n-text-stub size=\\"small\\" tag=\\"span\\"><span>This is an danger callout.</span></n8n-text-stub>
+  </div>
+</div>"
+`;
+
+exports[`components > N8NCallout > props > should render info theme correctly 1`] = `
+"<div role=\\"alert\\" class=\\"_callout_a6gr6_1 _info_a6gr6_10\\">
+  <div class=\\"_icon_a6gr6_34\\">
+    <n8n-icon-stub icon=\\"info-circle\\" size=\\"large\\"></n8n-icon-stub>
+  </div>
+  <div>
+    <n8n-text-stub size=\\"small\\" tag=\\"span\\"><span>This is an info callout.</span></n8n-text-stub>
+  </div>
+</div>"
+`;
+
+exports[`components > N8NCallout > props > should render success theme correctly 1`] = `
+"<div role=\\"alert\\" class=\\"_callout_a6gr6_1 _success_a6gr6_22\\">
+  <div class=\\"_icon_a6gr6_34\\">
+    <n8n-icon-stub icon=\\"check-circle\\" size=\\"large\\"></n8n-icon-stub>
+  </div>
+  <div>
+    <n8n-text-stub size=\\"small\\" tag=\\"span\\"><span>This is an success callout.</span></n8n-text-stub>
+  </div>
+</div>"
+`;
+
+exports[`components > N8NCallout > props > should render warning theme correctly 1`] = `
+"<div role=\\"alert\\" class=\\"_callout_a6gr6_1 _warning_a6gr6_16\\">
+  <div class=\\"_icon_a6gr6_34\\">
+    <n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"large\\"></n8n-icon-stub>
+  </div>
+  <div>
+    <n8n-text-stub size=\\"small\\" tag=\\"span\\"><span>This is an warning callout.</span></n8n-text-stub>
+  </div>
+</div>"
+`;

packages/design-system/src/components/N8nCallout/index.ts

@@ -0,0 +1,3 @@
+import N8nCallout from './Callout.vue';
+
+export default N8nCallout;

packages/design-system/src/components/N8nIcon/Icon.stories.js

@@ -10,7 +10,7 @@ export default {
 		size: {
 			control: {
 				type: 'select',
-				options: ['small', 'medium', 'large'],
+				options: ['xsmall', 'small', 'medium', 'large'],
 			},
 		},
 		spin: {

packages/design-system/src/components/N8nIcon/Icon.vue

@@ -37,6 +37,7 @@ export default {
 			default: false,
 		},
 		color: {
+			type: String,
 		},
 	},
 };
@@ -59,4 +60,8 @@ export default {
 .small {
 	width: var(--font-size-2xs) !important;
 }
+
+.xsmall {
+	width: var(--font-size-3xs) !important;
+}
 </style>

packages/design-system/src/components/N8nTabs/Tabs.vue

@@ -7,28 +7,35 @@
 			<n8n-icon icon="chevron-right" size="small" />
 		</div>
 		<div ref="tabs" :class="$style.tabs">
-			<div  v-for="option in options" :key="option.value" :class="{ [$style.alignRight]: option.align === 'right' }">
-				<a
-					v-if="option.href"
-					target="_blank"
-					:href="option.href"
-					:class="[$style.link, $style.tab]"
-					@click="() => handleTabClick(option.value)"
-				>
-					<div>
-						{{ option.label }}
-						<span :class="$style.external"><n8n-icon icon="external-link-alt" size="small" /></span>
-					</div>
-				</a>
+			<div  v-for="option in options"
+				:key="option.value"
+				:id="option.value"
+				:class="{ [$style.alignRight]: option.align === 'right' }"
+			>
+				<n8n-tooltip :disabled="!option.tooltip" placement="bottom">
+					<div slot="content" v-html="option.tooltip" @click="handleTooltipClick(option.value, $event)"></div>
+					<a
+						v-if="option.href"
+						target="_blank"
+						:href="option.href"
+						:class="[$style.link, $style.tab]"
+						@click="() => handleTabClick(option.value)"
+					>
+						<div>
+							{{ option.label }}
+							<span :class="$style.external"><n8n-icon icon="external-link-alt" size="small" /></span>
+						</div>
+					</a>
 
-				<div
-					v-else
-					:class="{ [$style.tab]: true, [$style.activeTab]: value === option.value }"
-					@click="() => handleTabClick(option.value)"
-				>
-					<n8n-icon v-if="option.icon" :icon="option.icon" size="medium" />
-					<span v-if="option.label">{{ option.label }}</span>
-				</div>
+					<div
+						v-else
+						:class="{ [$style.tab]: true, [$style.activeTab]: value === option.value }"
+						@click="() => handleTabClick(option.value)"
+					>
+						<n8n-icon v-if="option.icon" :icon="option.icon" size="medium" />
+						<span v-if="option.label">{{ option.label }}</span>
+					</div>
+				</n8n-tooltip>
 			</div>
 		</div>
 	</div>
@@ -82,6 +89,9 @@ export default Vue.extend({
 		},
 	},
 	methods: {
+		handleTooltipClick(tab: string, event: MouseEvent) {
+			this.$emit('tooltipClick', tab, event);
+		},
 		handleTabClick(tab: string) {
 			this.$emit('input', tab);
 		},

packages/design-system/src/components/index.ts

@@ -39,6 +39,7 @@ import N8nActionToggle from './N8nActionToggle';
 import N8nAvatar from './N8nAvatar';
 import N8nBadge from './N8nBadge';
 import N8nButton from './N8nButton';
+import N8nCallout from './N8nCallout';
 import N8nCard from './N8nCard';
 import N8nFormBox from './N8nFormBox';
 import N8nFormInput from './N8nFormInput';
@@ -80,6 +81,7 @@ export {
 	N8nAvatar,
 	N8nBadge,
 	N8nButton,
+	N8nCallout,
 	N8nCard,
 	N8nHeading,
 	N8nFormBox,