From 96c6be1d59b48b873bc2f9778bb4306ca9c06ece Mon Sep 17 00:00:00 2001
From: GitHub <action@github.com>
Date: Sat, 4 May 2024 21:07:53 +0000
Subject: [PATCH] Fixing build (#255)

---
 docs/package.json                             |    2 +
 docs/src/components/alert/fb-alert.mdx        |   39 +-
 .../components/alert/fb-alert.stories.scss    |   14 +-
 docs/src/components/alert/fb-alert.stories.ts |  404 ++--
 docs/src/components/app-bar/fb-app-bar.mdx    |    9 +-
 .../components/app-bar/fb-app-bar.stories.ts  |   66 +-
 docs/src/components/badge/fb-badge.mdx        |   24 +-
 .../components/badge/fb-badge.stories.scss    |    8 +-
 docs/src/components/badge/fb-badge.stories.ts |  274 +--
 .../fb-bottom-navigation.mdx                  |    9 +-
 .../fb-bottom-navigation.stories.ts           |   56 +-
 .../components/breadcrumb/fb-breadcrumb.mdx   |    4 +-
 .../breadcrumb/fb-breadcrumb.stories.scss     |    4 +-
 .../breadcrumb/fb-breadcrumb.stories.ts       |   72 +-
 docs/src/components/button/fb-button.mdx      |   64 +-
 .../components/button/fb-button.stories.scss  |   42 +-
 .../components/button/fb-button.stories.ts    |  804 ++++----
 docs/src/components/card/fb-card.mdx          |    8 +-
 docs/src/components/card/fb-card.stories.scss |   40 +-
 docs/src/components/card/fb-card.stories.ts   |  532 ++---
 docs/src/components/checkbox/fb-checkbox.mdx  |   39 +-
 .../checkbox/fb-checkbox.stories.scss         |   14 +-
 .../checkbox/fb-checkbox.stories.ts           |  388 ++--
 .../fb-component-loading-error.stories.ts     |   66 +-
 .../fb-component-loading.stories.ts           |   66 +-
 docs/src/components/divider/fb-divider.mdx    |    4 +-
 .../divider/fb-divider.stories.scss           |    8 +-
 .../components/divider/fb-divider.stories.ts  |  214 +-
 docs/src/components/drawer/fb-drawer.mdx      |    4 +-
 .../components/drawer/fb-drawer.stories.scss  |   32 +-
 .../components/drawer/fb-drawer.stories.ts    |  500 ++---
 .../icon-with-child/fb-icon-with-child.mdx    |    4 +-
 .../fb-icon-with-child.stories.scss           |   22 +-
 .../fb-icon-with-child.stories.ts             |  130 +-
 .../input-number/fb-input-number.mdx          |   39 +-
 .../input-number/fb-input-number.stories.scss |    6 +-
 .../input-number/fb-input-number.stories.ts   |  310 +--
 docs/src/components/input/fb-input.mdx        |   59 +-
 .../components/input/fb-input.stories.scss    |   58 +-
 docs/src/components/input/fb-input.stories.ts |  482 ++---
 docs/src/components/list/fb-list.mdx          |   14 +-
 docs/src/components/list/fb-list.stories.ts   |  110 +-
 .../components/loading-box/fb-loading-box.mdx |   14 +-
 .../loading-box/fb-loading-box.stories.scss   |   12 +-
 .../loading-box/fb-loading-box.stories.ts     |  238 +--
 .../components/media-item/fb-media-item.mdx   |    9 +-
 .../media-item/fb-media-item.stories.ts       |  182 +-
 docs/src/components/menu/fb-menu.mdx          |    4 +-
 docs/src/components/menu/fb-menu.stories.scss |   32 +-
 docs/src/components/menu/fb-menu.stories.ts   |  274 +--
 .../components/message-box/fb-message-box.mdx |   24 +-
 .../message-box/fb-message-box.stories.ts     |  398 ++--
 docs/src/components/message/fb-message.mdx    |   40 +-
 .../components/message/fb-message.stories.ts  |  334 ++--
 docs/src/components/modal/fb-modal.mdx        |    9 +-
 .../components/modal/fb-modal.stories.scss    |   14 +-
 docs/src/components/modal/fb-modal.stories.ts | 1156 +++++------
 docs/src/components/radio/fb-radio.mdx        |   29 +-
 .../components/radio/fb-radio.stories.scss    |   14 +-
 docs/src/components/radio/fb-radio.stories.ts |  224 +--
 docs/src/components/result/fb-result.mdx      |    4 +-
 .../components/result/fb-result.stories.ts    |  226 +--
 .../src/components/scrollbar/fb-scrollbar.mdx |    4 +-
 .../scrollbar/fb-scrollbar.stories.scss       |   54 +-
 .../scrollbar/fb-scrollbar.stories.ts         |  234 +--
 docs/src/components/select/fb-select.mdx      |   79 +-
 .../components/select/fb-select.stories.scss  |  166 +-
 .../components/select/fb-select.stories.ts    | 1766 ++++++++---------
 docs/src/components/slider/fb-slider.mdx      |   49 +-
 .../components/slider/fb-slider.stories.scss  |   20 +-
 .../components/slider/fb-slider.stories.ts    |  470 ++---
 docs/src/components/spinner/fb-spinner.mdx    |    4 +-
 .../spinner/fb-spinner.stories.scss           |   16 +-
 .../components/spinner/fb-spinner.stories.ts  |  136 +-
 docs/src/components/swipe/fb-swipe.mdx        |    9 +-
 .../components/swipe/fb-swipe.stories.scss    |   90 +-
 docs/src/components/swipe/fb-swipe.stories.ts |   98 +-
 docs/src/components/switch/fb-switch.mdx      |    4 +-
 .../components/switch/fb-switch.stories.scss  |   40 +-
 .../components/switch/fb-switch.stories.ts    |  756 +++----
 docs/src/components/tabs/fb-tabs.mdx          |    4 +-
 docs/src/components/tabs/fb-tabs.stories.scss |   54 +-
 docs/src/components/tabs/fb-tabs.stories.ts   |  674 +++----
 docs/src/components/tag/fb-tag.mdx            |    4 +-
 docs/src/components/tag/fb-tag.stories.scss   |   30 +-
 docs/src/components/tag/fb-tag.stories.ts     |  466 ++---
 docs/src/components/tooltip/fb-tooltip.mdx    |    8 +-
 .../tooltip/fb-tooltip.stories.scss           |  100 +-
 .../components/tooltip/fb-tooltip.stories.ts  |  396 ++--
 docs/src/stories/colors.scss                  |   98 +-
 docs/src/stories/colors.stories.ts            |   12 +-
 docs/src/stories/intro.mdx                    |    2 +-
 packages/theme-chalk/src/color/index.scss     |    2 +-
 packages/theme-chalk/src/mixins/_var.scss     |    3 +-
 packages/theme-chalk/src/mixins/function.scss |    6 +-
 packages/theme-chalk/src/mixins/mixins.scss   |    7 +-
 96 files changed, 6955 insertions(+), 7187 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 678b12b3..d051c37e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -57,6 +57,8 @@
     "prettier": "^3.2",
     "remark-gfm": "^4.0",
     "rimraf": "^5.0",
+    "sass": "^1.76",
+    "sass-loader": "^14.2",
     "storybook": "^8.0",
     "storybook-dark-mode": "^4.0",
     "typescript": "^5.4",
diff --git a/docs/src/components/alert/fb-alert.mdx b/docs/src/components/alert/fb-alert.mdx
index 11402655..06d64c16 100644
--- a/docs/src/components/alert/fb-alert.mdx
+++ b/docs/src/components/alert/fb-alert.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as AlertStories from './fb-alert.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as AlertStories from "./fb-alert.stories";
 
 <Meta of={AlertStories} />
 
@@ -15,10 +15,7 @@ Displays important alert messages.
 
 ## Basic Usage
 
-<Canvas
-	withToolbar={true}
-	of={AlertStories.BasicUsage}
-/>
+<Canvas withToolbar={true} of={AlertStories.BasicUsage} />
 
 ## Theme
 
@@ -26,10 +23,7 @@ Alert provide two different themes, `light` and `dark`.
 
 Set `effect` to change theme, default is `light`.
 
-<Canvas
-	withToolbar={true}
-	of={AlertStories.Dark}
-/>
+<Canvas withToolbar={true} of={AlertStories.Dark} />
 
 ## Customizable Close Button
 
@@ -39,10 +33,7 @@ Alert allows you to configure if it's closable. The close button text and closin
 can be closed or not. It accepts `boolean`, and the default is `false`. You can set `close-text` property to replace the default cross symbol as the close button.
 Be careful that `close-text` must be a string. `close` event fires when the component is closed.
 
-<Canvas
-	withToolbar={true}
-	of={AlertStories.CloseButton}
-/>
+<Canvas withToolbar={true} of={AlertStories.CloseButton} />
 
 ## With Icon
 
@@ -50,19 +41,13 @@ Displaying an icon improves readability.
 
 Setting the `show-icon` property displays an icon that corresponds with the current Alert type.
 
-<Canvas
-	withToolbar={true}
-	of={AlertStories.Icon}
-/>
+<Canvas withToolbar={true} of={AlertStories.Icon} />
 
 ## Centered Text
 
 Use the `center` property to center the text.
 
-<Canvas
-	withToolbar={true}
-	of={AlertStories.Center}
-/>
+<Canvas withToolbar={true} of={AlertStories.Center} />
 
 ## With Description
 
@@ -71,19 +56,13 @@ Description includes a message with more detailed information.
 Besides the required `title` slot, you can add a `description` slot to help you describe the alert with more details. Description can only store text string,
 and it will word wrap automatically.
 
-<Canvas
-	withToolbar={true}
-	of={AlertStories.Title}
-/>
+<Canvas withToolbar={true} of={AlertStories.Title} />
 
 ## With Icon and Description
 
 At last, this is an example with both icon and description.
 
-<Canvas
-	withToolbar={true}
-	of={AlertStories.TitleIcon}
-/>
+<Canvas withToolbar={true} of={AlertStories.TitleIcon} />
 
 ---
 
diff --git a/docs/src/components/alert/fb-alert.stories.scss b/docs/src/components/alert/fb-alert.stories.scss
index e8ac3bbc..c7d1091a 100644
--- a/docs/src/components/alert/fb-alert.stories.scss
+++ b/docs/src/components/alert/fb-alert.stories.scss
@@ -1,11 +1,11 @@
 .fb-alert-story-block {
-	max-width: 600px;
+    max-width: 600px;
 
-	.fb-alert-story-block__item {
-		margin-bottom: 20px;
-	}
+    .fb-alert-story-block__item {
+        margin-bottom: 20px;
+    }
 
-	.fb-alert-story-block__item:last-child {
-		margin-bottom: 0;
-	}
+    .fb-alert-story-block__item:last-child {
+        margin-bottom: 0;
+    }
 }
diff --git a/docs/src/components/alert/fb-alert.stories.ts b/docs/src/components/alert/fb-alert.stories.ts
index 0a7b4330..9d7dda25 100644
--- a/docs/src/components/alert/fb-alert.stories.ts
+++ b/docs/src/components/alert/fb-alert.stories.ts
@@ -1,118 +1,118 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
-import { fn } from '@storybook/test';
-import { FbAlert } from '@fastybird/web-ui-components';
-import { VariantTypes, EffectTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { action } from "@storybook/addon-actions";
+import { fn } from "@storybook/test";
+import { FbAlert } from "@fastybird/web-ui-components";
+import { VariantTypes, EffectTypes } from "@fastybird/web-ui-constants";
 
-import './fb-alert.stories.scss';
+import "./fb-alert.stories.scss";
 
 const meta: Meta<typeof FbAlert> = {
-	component: FbAlert,
-	title: 'Components/Feedback/Alert',
-	argTypes: {
-		title: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'content of the alert title',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		description: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'content of the alert description',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		icon: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'slot for inserting custom icon. this slot will override default component icon',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		default: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'slot for inserting custom content. This slot will override `title` and `description` slots',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		variant: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.ERROR],
-			description: 'alert variant',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: VariantTypes.DEFAULT },
-			},
-		},
-		effect: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [EffectTypes.LIGHT, EffectTypes.DARK],
-			description: 'alert theme style',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: EffectTypes.LIGHT },
-			},
-		},
-		center: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether content is placed in the center',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		closable: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether alert can be dismissed',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		closeText: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'customized close button text',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: undefined },
-			},
-		},
-		onClose: {
-			table: {
-				disable: true,
-			},
-		},
-	},
-	args: {
-		description:
-			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nunc massa, sollicitudin eget ex eget, pellentesque ultrices felis.',
-		variant: VariantTypes.DEFAULT,
-		effect: EffectTypes.LIGHT,
-		center: false,
-		closable: false,
-		onClose: fn(),
-	},
-	excludeStories: /.*Data$/,
+    component: FbAlert,
+    title: "Components/Feedback/Alert",
+    argTypes: {
+        title: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "content of the alert title",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        description: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "content of the alert description",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        icon: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "slot for inserting custom icon. this slot will override default component icon",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        default: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "slot for inserting custom content. This slot will override `title` and `description` slots",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        variant: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.ERROR],
+            description: "alert variant",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: VariantTypes.DEFAULT },
+            },
+        },
+        effect: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [EffectTypes.LIGHT, EffectTypes.DARK],
+            description: "alert theme style",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: EffectTypes.LIGHT },
+            },
+        },
+        center: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether content is placed in the center",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        closable: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether alert can be dismissed",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        closeText: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "customized close button text",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: undefined },
+            },
+        },
+        onClose: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    args: {
+        description:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nunc massa, sollicitudin eget ex eget, pellentesque ultrices felis.",
+        variant: VariantTypes.DEFAULT,
+        effect: EffectTypes.LIGHT,
+        center: false,
+        closable: false,
+        onClose: fn(),
+    },
+    excludeStories: /.*Data$/,
 };
 
 export const actionsData = {
-	onClose: action('close'),
+    onClose: action("close"),
 };
 
 export default meta;
@@ -120,17 +120,17 @@ export default meta;
 type Story = StoryObj<typeof FbAlert>;
 
 export const Component: Story = {
-	tags: ['hideInSidebar'],
-	args: {
-		description: 'A simple default alert — check it out!',
-	},
+    tags: ["hideInSidebar"],
+    args: {
+        description: "A simple default alert — check it out!",
+    },
 };
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-alert>
 		<template #description>A simple default alert — check it out!</template>
@@ -148,13 +148,13 @@ export const BasicUsage: Story = {
 		<template #description>A simple error alert — check it out!</template>
 	</fb-alert>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbAlert },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbAlert },
+        template: `
 <div class="fb-alert-story-block">
 	<div class="fb-alert-story-block__item">
 		<fb-alert>
@@ -182,14 +182,14 @@ export const BasicUsage: Story = {
 		</fb-alert>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Dark: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-alert effect="${EffectTypes.DARK}">
 		<template #description>A simple default alert — check it out!</template>
@@ -207,13 +207,13 @@ export const Dark: Story = {
 		<template #description>A simple error alert — check it out!</template>
 	</fb-alert>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbAlert },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbAlert },
+        template: `
 <div class="fb-alert-story-block">
 	<div class="fb-alert-story-block__item">
 		<fb-alert effect="${EffectTypes.DARK}">
@@ -241,14 +241,14 @@ export const Dark: Story = {
 		</fb-alert>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const CloseButton: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-alert :closable="false">
 		<template #description>Unclosable alert</template>
@@ -266,18 +266,18 @@ const hello = (): void => {
 	alert("Hi! I'm on close callback");
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbAlert },
-		methods: {
-			hello: () => {
-				alert("Hi! I'm on close callback");
-			},
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbAlert },
+        methods: {
+            hello: () => {
+                alert("Hi! I'm on close callback");
+            },
+        },
+        template: `
 <div class="fb-alert-story-block">
 	<div class="fb-alert-story-block__item">
 		<fb-alert :closable="false">
@@ -295,14 +295,14 @@ const hello = (): void => {
 		</fb-alert>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Icon: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-alert variant="${VariantTypes.INFO}" icon>
 		<template #description>A simple info alert — check it out!</template>
@@ -317,13 +317,13 @@ export const Icon: Story = {
 		<template #description>A simple error alert — check it out!</template>
 	</fb-alert>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbAlert },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbAlert },
+        template: `
 <div class="fb-alert-story-block">
 	<div class="fb-alert-story-block__item">
 		<fb-alert variant="${VariantTypes.INFO}">
@@ -346,14 +346,14 @@ export const Icon: Story = {
 		</fb-alert>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Center: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-alert center>
 		<template #description>A simple default alert — check it out!</template>
@@ -371,13 +371,13 @@ export const Center: Story = {
 		<template #description>A simple error alert — check it out!</template>
 	</fb-alert>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbAlert },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbAlert },
+        template: `
 <div class="fb-alert-story-block">
 	<div class="fb-alert-story-block__item">
 		<fb-alert center icon>
@@ -405,41 +405,41 @@ export const Center: Story = {
 		</fb-alert>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Title: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-alert variant="${VariantTypes.INFO}">
 		<template #title>With title</template>
 		<template #description>This is a description.</template>
 	</fb-alert>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbAlert },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbAlert },
+        template: `
 <div class="fb-alert-story-block">
 	<fb-alert variant="${VariantTypes.INFO}">
 		<template #title>With title</template>
 		<template #description>This is a description.</template>
 	</fb-alert>
 </div>`,
-	}),
+    }),
 };
 
 export const TitleIcon: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-alert variant="${VariantTypes.INFO}" icon>
 		<template #title>Info alert</template>
@@ -458,13 +458,13 @@ export const TitleIcon: Story = {
 		<template #description>More text description</template>
 	</fb-alert>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbAlert },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbAlert },
+        template: `
 <div class="fb-alert-story-block">
 	<div class="fb-alert-story-block__item">
 		<fb-alert variant="${VariantTypes.INFO}" icon>
@@ -491,5 +491,5 @@ export const TitleIcon: Story = {
 		</fb-alert>
 	</div>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/app-bar/fb-app-bar.mdx b/docs/src/components/app-bar/fb-app-bar.mdx
index 7b5d3e4d..9861af1b 100644
--- a/docs/src/components/app-bar/fb-app-bar.mdx
+++ b/docs/src/components/app-bar/fb-app-bar.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as AppBarStories from './fb-app-bar.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as AppBarStories from "./fb-app-bar.stories";
 
 <Meta of={AppBarStories} />
 
@@ -7,10 +7,7 @@ import * as AppBarStories from './fb-app-bar.stories';
 
 ## Basic Usage
 
-<Canvas
-	withAppBar={true}
-	of={AppBarStories.BasicUsage}
-/>
+<Canvas withAppBar={true} of={AppBarStories.BasicUsage} />
 
 ---
 
diff --git a/docs/src/components/app-bar/fb-app-bar.stories.ts b/docs/src/components/app-bar/fb-app-bar.stories.ts
index 6fe0c9e5..acd30a4c 100644
--- a/docs/src/components/app-bar/fb-app-bar.stories.ts
+++ b/docs/src/components/app-bar/fb-app-bar.stories.ts
@@ -1,14 +1,14 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FasMagnifyingGlass, FasPenToSquare } from '@fastybird/web-ui-icons';
-import { FbAppBar, FbAppBarHeading, FbAppBarButton, FbAppBarIcon, FbAppBarContent, FbButton, FbIcon } from '@fastybird/web-ui-components';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FasMagnifyingGlass, FasPenToSquare } from "@fastybird/web-ui-icons";
+import { FbAppBar, FbAppBarHeading, FbAppBarButton, FbAppBarIcon, FbAppBarContent, FbButton, FbIcon } from "@fastybird/web-ui-components";
 
-import './fb-app-bar.stories.scss';
-import { ref } from 'vue';
+import "./fb-app-bar.stories.scss";
+import { ref } from "vue";
 
 const meta: Meta<typeof FbAppBar> = {
-	component: FbAppBar,
-	title: 'Components/Navigation/App bar',
-	excludeStories: /.*Data$/,
+    component: FbAppBar,
+    title: "Components/Navigation/App bar",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -16,10 +16,10 @@ export default meta;
 type Story = StoryObj<typeof FbAppBar>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 </template>
 
@@ -28,22 +28,32 @@ export const BasicUsage: Story = {
 
 <style scoped>
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbAppBar, FbAppBarHeading, FbAppBarButton, FbAppBarIcon, FbAppBarContent, FbButton, FbIcon, FasMagnifyingGlass, FasPenToSquare },
-		setup: () => {
-			const menuCollapsed = ref<boolean>(true);
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: {
+            FbAppBar,
+            FbAppBarHeading,
+            FbAppBarButton,
+            FbAppBarIcon,
+            FbAppBarContent,
+            FbButton,
+            FbIcon,
+            FasMagnifyingGlass,
+            FasPenToSquare,
+        },
+        setup: () => {
+            const menuCollapsed = ref<boolean>(true);
 
-			return {
-				menuCollapsed,
-				FasMagnifyingGlass,
-				FasPenToSquare,
-			};
-		},
-		template: `
+            return {
+                menuCollapsed,
+                FasMagnifyingGlass,
+                FasPenToSquare,
+            };
+        },
+        template: `
 <div class="fb-app-bar-story-block">
 	<fb-app-bar
 		:menuCollapsed="menuCollapsed"
@@ -92,5 +102,5 @@ export const BasicUsage: Story = {
 		</template>
 	</fb-app-bar>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/badge/fb-badge.mdx b/docs/src/components/badge/fb-badge.mdx
index acba54a6..0d2c0431 100644
--- a/docs/src/components/badge/fb-badge.mdx
+++ b/docs/src/components/badge/fb-badge.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as BadgeStories from './fb-badge.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as BadgeStories from "./fb-badge.stories";
 
 <Meta of={BadgeStories} />
 
@@ -19,10 +19,7 @@ Displays the amount of new messages.
 
 The amount is defined with value which accepts Number or String.
 
-<Canvas
-	withToolbar={true}
-	of={BadgeStories.BasicUsage}
-/>
+<Canvas withToolbar={true} of={BadgeStories.BasicUsage} />
 
 ## Max Value
 
@@ -30,10 +27,7 @@ You can customize the max value.
 
 The max value is defined by property max which is a Number. Note that it only works when value is also a Number.
 
-<Canvas
-	withToolbar={true}
-	of={BadgeStories.MaxValue}
-/>
+<Canvas withToolbar={true} of={BadgeStories.MaxValue} />
 
 ## Customizations
 
@@ -41,10 +35,7 @@ Displays text content other than numbers.
 
 When value is a String, it can display customized text.
 
-<Canvas
-	withToolbar={true}
-	of={BadgeStories.Customizations}
-/>
+<Canvas withToolbar={true} of={BadgeStories.Customizations} />
 
 ## Red Dot
 
@@ -52,10 +43,7 @@ Use a red dot to mark content that needs to be noticed.
 
 Use the property `is-dot`. It is a Boolean.
 
-<Canvas
-	withToolbar={true}
-	of={BadgeStories.RedDot}
-/>
+<Canvas withToolbar={true} of={BadgeStories.RedDot} />
 
 ---
 
diff --git a/docs/src/components/badge/fb-badge.stories.scss b/docs/src/components/badge/fb-badge.stories.scss
index 3c09c1fb..b839287a 100644
--- a/docs/src/components/badge/fb-badge.stories.scss
+++ b/docs/src/components/badge/fb-badge.stories.scss
@@ -1,7 +1,7 @@
 .fb-badge-story-block {
-	max-width: 600px;
+    max-width: 600px;
 
-	.fb-badge-story-block__item {
-		margin-right: 40px;
-	}
+    .fb-badge-story-block__item {
+        margin-right: 40px;
+    }
 }
diff --git a/docs/src/components/badge/fb-badge.stories.ts b/docs/src/components/badge/fb-badge.stories.ts
index f353f155..064ffb11 100644
--- a/docs/src/components/badge/fb-badge.stories.ts
+++ b/docs/src/components/badge/fb-badge.stories.ts
@@ -1,94 +1,94 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
-import { FasShare } from '@fastybird/web-ui-icons';
-import { FbBadge, FbButton } from '@fastybird/web-ui-components';
-import { VariantTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { action } from "@storybook/addon-actions";
+import { FasShare } from "@fastybird/web-ui-icons";
+import { FbBadge, FbButton } from "@fastybird/web-ui-components";
+import { VariantTypes } from "@fastybird/web-ui-constants";
 
-import './fb-badge.stories.scss';
+import "./fb-badge.stories.scss";
 
 const meta: Meta<typeof FbBadge> = {
-	component: FbBadge,
-	title: 'Components/Data/Badge',
-	argTypes: {
-		default: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'customize default content',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		value: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'display value',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		max: {
-			type: { name: 'number', required: false },
-			control: { type: 'text' },
-			description: 'maximum value, shows `{max}+` when exceeded. Only works if value is a number',
-			table: {
-				type: { summary: 'number' },
-				defaultValue: { summary: '99' },
-			},
-		},
-		isDot: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether a little dot is displayed',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		hidden: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether a badge is hidden',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		variant: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
-			description: 'badge variant',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: VariantTypes.DANGER },
-			},
-		},
-		showZero: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether to show badge when value is zero',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-	},
-	args: {
-		value: '15',
-		max: 99,
-		isDot: false,
-		hidden: false,
-		variant: VariantTypes.DANGER,
-		showZero: true,
-		default: 'Here is some badge',
-	},
-	excludeStories: /.*Data$/,
+    component: FbBadge,
+    title: "Components/Data/Badge",
+    argTypes: {
+        default: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "customize default content",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        value: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "display value",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        max: {
+            type: { name: "number", required: false },
+            control: { type: "text" },
+            description: "maximum value, shows `{max}+` when exceeded. Only works if value is a number",
+            table: {
+                type: { summary: "number" },
+                defaultValue: { summary: "99" },
+            },
+        },
+        isDot: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether a little dot is displayed",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        hidden: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether a badge is hidden",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        variant: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
+            description: "badge variant",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: VariantTypes.DANGER },
+            },
+        },
+        showZero: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether to show badge when value is zero",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+    },
+    args: {
+        value: "15",
+        max: 99,
+        isDot: false,
+        hidden: false,
+        variant: VariantTypes.DANGER,
+        showZero: true,
+        default: "Here is some badge",
+    },
+    excludeStories: /.*Data$/,
 };
 
 export const actionsData = {
-	onClose: action('close'),
+    onClose: action("close"),
 };
 
 export default meta;
@@ -96,14 +96,14 @@ export default meta;
 type Story = StoryObj<typeof FbBadge>;
 
 export const Component: Story = {
-	tags: ['hideInSidebar'],
+    tags: ["hideInSidebar"],
 };
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-badge :value="12">
 		<fb-button>comments</fb-button>
@@ -118,13 +118,13 @@ export const BasicUsage: Story = {
 		<fb-button>replies</fb-button>
 	</fb-badge>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbBadge, FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbBadge, FbButton },
+        template: `
 <div class="fb-badge-story-block">
 	<fb-badge :value="12" class="fb-badge-story-block__item">
 		<fb-button>comments</fb-button>
@@ -139,14 +139,14 @@ export const BasicUsage: Story = {
 		<fb-button>replies</fb-button>
 	</fb-badge>
 </div>`,
-	}),
+    }),
 };
 
 export const MaxValue: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-badge :value="200" :max="99">
 		<fb-button>comments</fb-button>
@@ -155,13 +155,13 @@ export const MaxValue: Story = {
 		<fb-button>replies</fb-button>
 	</fb-badge>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbBadge, FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbBadge, FbButton },
+        template: `
 <div class="fb-badge-story-block">
 	<fb-badge :value="200" :max="99" class="fb-badge-story-block__item">
 		<fb-button>comments</fb-button>
@@ -170,14 +170,14 @@ export const MaxValue: Story = {
 		<fb-button>replies</fb-button>
 	</fb-badge>
 </div>`,
-	}),
+    }),
 };
 
 export const Customizations: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-badge value="new">
 		<fb-button>comments</fb-button>
@@ -186,13 +186,13 @@ export const Customizations: Story = {
 		<fb-button>replies</fb-button>
 	</fb-badge>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbBadge, FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbBadge, FbButton },
+        template: `
 <div class="fb-badge-story-block">
 	<fb-badge value="new" class="fb-badge-story-block__item">
 		<fb-button>comments</fb-button>
@@ -201,14 +201,14 @@ export const Customizations: Story = {
 		<fb-button>replies</fb-button>
 	</fb-badge>
 </div>`,
-	}),
+    }),
 };
 
 export const RedDot: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-badge is-dot>query</fb-badge>
 	<fb-badge is-dot>
@@ -219,21 +219,21 @@ export const RedDot: Story = {
 <script lang="ts" setup>
 import { FasShare } from '@fastybird/web-ui-icons';
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbBadge, FbButton },
-		setup() {
-			return { FasShare };
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbBadge, FbButton },
+        setup() {
+            return { FasShare };
+        },
+        template: `
 <div class="fb-badge-story-block">
 	<fb-badge is-dot class="fb-badge-story-block__item">query</fb-badge>
 	<fb-badge is-dot class="fb-badge-story-block__item">
 		<fb-button :icon="FasShare" variant="${VariantTypes.PRIMARY}" />
 	</fb-badge>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/bottom-navigation/fb-bottom-navigation.mdx b/docs/src/components/bottom-navigation/fb-bottom-navigation.mdx
index 68d54cbb..e193e6f8 100644
--- a/docs/src/components/bottom-navigation/fb-bottom-navigation.mdx
+++ b/docs/src/components/bottom-navigation/fb-bottom-navigation.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as BottomNavigationStories from './fb-bottom-navigation.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as BottomNavigationStories from "./fb-bottom-navigation.stories";
 
 <Meta of={BottomNavigationStories} />
 
@@ -7,10 +7,7 @@ import * as BottomNavigationStories from './fb-bottom-navigation.stories';
 
 ## Basic Usage
 
-<Canvas
-	withBottomNavigation={true}
-	of={BottomNavigationStories.BasicUsage}
-/>
+<Canvas withBottomNavigation={true} of={BottomNavigationStories.BasicUsage} />
 
 ---
 
diff --git a/docs/src/components/bottom-navigation/fb-bottom-navigation.stories.ts b/docs/src/components/bottom-navigation/fb-bottom-navigation.stories.ts
index f5783243..9248e5c5 100644
--- a/docs/src/components/bottom-navigation/fb-bottom-navigation.stories.ts
+++ b/docs/src/components/bottom-navigation/fb-bottom-navigation.stories.ts
@@ -1,14 +1,14 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
-import { FbBottomNavigation, FbBottomNavigationHeading, FbButton } from '@fastybird/web-ui-components';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { action } from "@storybook/addon-actions";
+import { FbBottomNavigation, FbBottomNavigationHeading, FbButton } from "@fastybird/web-ui-components";
 
-import './fb-bottom-navigation.stories.scss';
-import { ref } from 'vue';
+import "./fb-bottom-navigation.stories.scss";
+import { ref } from "vue";
 
 const meta: Meta<typeof FbBottomNavigation> = {
-	component: FbBottomNavigation,
-	title: 'Components/Navigation/Bottom navigation',
-	excludeStories: /.*Data$/,
+    component: FbBottomNavigation,
+    title: "Components/Navigation/Bottom navigation",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -16,10 +16,10 @@ export default meta;
 type Story = StoryObj<typeof FbBottomNavigation>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 </template>
 
@@ -28,22 +28,22 @@ export const BasicUsage: Story = {
 
 <style scoped>
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbBottomNavigation, FbBottomNavigationHeading, FbButton },
-		setup: () => {
-			const show = ref<boolean>(false);
-			const onClick = action('button-clicked');
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbBottomNavigation, FbBottomNavigationHeading, FbButton },
+        setup: () => {
+            const show = ref<boolean>(false);
+            const onClick = action("button-clicked");
 
-			return {
-				show,
-				onClick,
-			};
-		},
-		template: `
+            return {
+                show,
+                onClick,
+            };
+        },
+        template: `
 <div class="fb-bottom-navigation-story-block">
 	<fb-button @click="show = true">Open menu</fb-button>
 
@@ -91,5 +91,5 @@ export const BasicUsage: Story = {
 		</fb-bottom-navigation-content>
 	</fb-bottom-navigation>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/breadcrumb/fb-breadcrumb.mdx b/docs/src/components/breadcrumb/fb-breadcrumb.mdx
index da001d1c..a2f897aa 100644
--- a/docs/src/components/breadcrumb/fb-breadcrumb.mdx
+++ b/docs/src/components/breadcrumb/fb-breadcrumb.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as BreadcrumbStories from './fb-breadcrumb.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as BreadcrumbStories from "./fb-breadcrumb.stories";
 
 <Meta of={BreadcrumbStories} />
 
diff --git a/docs/src/components/breadcrumb/fb-breadcrumb.stories.scss b/docs/src/components/breadcrumb/fb-breadcrumb.stories.scss
index 2e435c2c..14581d45 100644
--- a/docs/src/components/breadcrumb/fb-breadcrumb.stories.scss
+++ b/docs/src/components/breadcrumb/fb-breadcrumb.stories.scss
@@ -1,4 +1,4 @@
 .fb-breadcrumb-story-block {
-	.fb-breadcrumb-story-block__item {
-	}
+    .fb-breadcrumb-story-block__item {
+    }
 }
diff --git a/docs/src/components/breadcrumb/fb-breadcrumb.stories.ts b/docs/src/components/breadcrumb/fb-breadcrumb.stories.ts
index 95e92494..c23c5fcc 100644
--- a/docs/src/components/breadcrumb/fb-breadcrumb.stories.ts
+++ b/docs/src/components/breadcrumb/fb-breadcrumb.stories.ts
@@ -1,13 +1,13 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FasChevronRight } from '@fastybird/web-ui-icons';
-import { FbBreadcrumb, FbBreadcrumbItem } from '@fastybird/web-ui-components';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FasChevronRight } from "@fastybird/web-ui-icons";
+import { FbBreadcrumb, FbBreadcrumbItem } from "@fastybird/web-ui-components";
 
-import './fb-breadcrumb.stories.scss';
+import "./fb-breadcrumb.stories.scss";
 
 const meta: Meta<typeof FbBreadcrumb> = {
-	component: FbBreadcrumb,
-	title: 'Components/Navigation/Breadcrumb',
-	excludeStories: /.*Data$/,
+    component: FbBreadcrumb,
+    title: "Components/Navigation/Breadcrumb",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -15,10 +15,10 @@ export default meta;
 type Story = StoryObj<typeof FbBreadcrumb>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-breadcrumb separator="/">
 		<fb-breadcrumb-item :to="{ path: '/' }">homepage</fb-breadcrumb-item>
@@ -29,13 +29,13 @@ export const BasicUsage: Story = {
 		<fb-breadcrumb-item>promotion detail</fb-breadcrumb-item>
 	</fb-breadcrumb>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbBreadcrumb, FbBreadcrumbItem },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbBreadcrumb, FbBreadcrumbItem },
+        template: `
 <div class="fb-breadcrumb-story-block">
 	<div class="fb-breadcrumb-story-block__item">
 		<fb-breadcrumb separator="/">
@@ -48,14 +48,14 @@ export const BasicUsage: Story = {
 		</fb-breadcrumb>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const IconSeparator: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-breadcrumb :separator-icon="FasChevronRight">
 		<fb-breadcrumb-item :to="{ path: '/' }">homepage</fb-breadcrumb-item>
@@ -68,18 +68,18 @@ export const IconSeparator: Story = {
 <script lang="ts" setup>
 import { FasChevronRight } from '@fastybird/web-ui-icons';
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbBreadcrumb, FbBreadcrumbItem, FasChevronRight },
-		setup: () => {
-			return {
-				FasChevronRight,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbBreadcrumb, FbBreadcrumbItem, FasChevronRight },
+        setup: () => {
+            return {
+                FasChevronRight,
+            };
+        },
+        template: `
 <div class="fb-breadcrumb-story-block">
 	<div class="fb-breadcrumb-story-block__item">
 		<fb-breadcrumb :separator-icon="FasChevronRight">
@@ -90,5 +90,5 @@ import { FasChevronRight } from '@fastybird/web-ui-icons';
 		</fb-breadcrumb>
 	</div>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/button/fb-button.mdx b/docs/src/components/button/fb-button.mdx
index 6d8a326d..87f74a42 100644
--- a/docs/src/components/button/fb-button.mdx
+++ b/docs/src/components/button/fb-button.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as ButtonStories from './fb-button.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as ButtonStories from "./fb-button.stories";
 
 <Meta of={ButtonStories} />
 
@@ -17,10 +17,7 @@ Commonly used button.
 
 Use `variant`, `plain`, `round` and `circle` to define Button's style.
 
-<Canvas
-	withToolbar={true}
-	of={ButtonStories.BasicUsage}
-/>
+<Canvas withToolbar={true} of={ButtonStories.BasicUsage} />
 
 ## Disabled Button
 
@@ -28,26 +25,17 @@ The `disabled` property determines if the button is disabled.
 
 Use `disabled` property to determine whether a button is disabled. It accepts a `Boolean` value.
 
-<Canvas
-	withToolbar={true}
-	of={ButtonStories.Disabled}
-/>
+<Canvas withToolbar={true} of={ButtonStories.Disabled} />
 
 ## Link Button
 
 ### Basic link button
 
-<Canvas
-	withToolbar={true}
-	of={ButtonStories.Link}
-/>
+<Canvas withToolbar={true} of={ButtonStories.Link} />
 
 ### Disabled link button
 
-<Canvas
-	withToolbar={true}
-	of={ButtonStories.LinkDisabled}
-/>
+<Canvas withToolbar={true} of={ButtonStories.LinkDisabled} />
 
 ## Text Button
 
@@ -55,24 +43,15 @@ Buttons without border and background.
 
 ### Basic text button
 
-<Canvas
-	withToolbar={true}
-	of={ButtonStories.Text}
-/>
+<Canvas withToolbar={true} of={ButtonStories.Text} />
 
 ### Background color always on
 
-<Canvas
-	withToolbar={true}
-	of={ButtonStories.TextBg}
-/>
+<Canvas withToolbar={true} of={ButtonStories.TextBg} />
 
 ### Disabled text button
 
-<Canvas
-	withToolbar={true}
-	of={ButtonStories.TextDisabled}
-/>
+<Canvas withToolbar={true} of={ButtonStories.TextDisabled} />
 
 ## Icon Button
 
@@ -81,10 +60,7 @@ Use icons to add more meaning to Button. You can use icon alone to save some spa
 Use the `icon` property to add icon. We are using [FontAwesome icons](https://fontawesome.com/icons/). Adding icons to the right side of the text is
 achievable with an `<i>` tag. Custom icons can be used as well.
 
-<Canvas
-	withToolbar={true}
-	of={ButtonStories.Icon}
-/>
+<Canvas withToolbar={true} of={ButtonStories.Icon} />
 
 ## Loading Button
 
@@ -92,10 +68,7 @@ Click the button to load data, then the button displays a loading state.
 
 Set `loading` property to `true` to display loading state.
 
-<Canvas
-	withToolbar={true}
-	of={ButtonStories.Loading}
-/>
+<Canvas withToolbar={true} of={ButtonStories.Loading} />
 
 ## Sizes
 
@@ -103,19 +76,13 @@ Besides default size, Button component provides four additional sizes for you to
 
 Use property `size` to set additional sizes with `large` or `small`.
 
-<Canvas
-	withToolbar={true}
-	of={ButtonStories.Sizes}
-/>
+<Canvas withToolbar={true} of={ButtonStories.Sizes} />
 
 ## Tag
 
 You can custom element tag, For example button, div, a, router-link, nuxt-link.
 
-<Canvas
-	withToolbar={true}
-	of={ButtonStories.Tag}
-/>
+<Canvas withToolbar={true} of={ButtonStories.Tag} />
 
 ## Custom Color
 
@@ -123,10 +90,7 @@ You can custom button color.
 
 We will calculate hover color & active color automatically.
 
-<Canvas
-	withToolbar={true}
-	of={ButtonStories.CustomColor}
-/>
+<Canvas withToolbar={true} of={ButtonStories.CustomColor} />
 
 ---
 
diff --git a/docs/src/components/button/fb-button.stories.scss b/docs/src/components/button/fb-button.stories.scss
index 4c796b26..3b6b687b 100644
--- a/docs/src/components/button/fb-button.stories.scss
+++ b/docs/src/components/button/fb-button.stories.scss
@@ -1,27 +1,27 @@
 .fb-button-story-block {
-	.fb-button-story-block__item {
-		margin-bottom: 20px;
-	}
+    .fb-button-story-block__item {
+        margin-bottom: 20px;
+    }
 
-	.fb-button-story-block__item:last-child {
-		margin-bottom: 0;
-	}
+    .fb-button-story-block__item:last-child {
+        margin-bottom: 0;
+    }
 
-	.button-icon {
-		margin-left: 6px;
-	}
+    .button-icon {
+        margin-left: 6px;
+    }
 
-	.custom-loading {
-		animation: loading-rotate 2s linear infinite;
-	}
+    .custom-loading {
+        animation: loading-rotate 2s linear infinite;
+    }
 
-	.custom-loading path {
-		fill: rgba(0, 0, 0, 0);
-		animation: loading-dash 1.5s ease-in-out infinite;
-		stroke-dasharray: 90, 150;
-		stroke-dashoffset: 0;
-		stroke-width: 2px;
-		stroke: var(--fb-button-text-color);
-		stroke-linecap: round;
-	}
+    .custom-loading path {
+        fill: rgba(0, 0, 0, 0);
+        animation: loading-dash 1.5s ease-in-out infinite;
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: 0;
+        stroke-width: 2px;
+        stroke: var(--fb-button-text-color);
+        stroke-linecap: round;
+    }
 }
diff --git a/docs/src/components/button/fb-button.stories.ts b/docs/src/components/button/fb-button.stories.ts
index 652b33d5..57e1502f 100644
--- a/docs/src/components/button/fb-button.stories.ts
+++ b/docs/src/components/button/fb-button.stories.ts
@@ -1,248 +1,256 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
-import { fn } from '@storybook/test';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { action } from "@storybook/addon-actions";
+import { fn } from "@storybook/test";
 import {
-	FasMagnifyingGlass,
-	FasPenToSquare,
-	FasEnvelope,
-	FasCheck,
-	FasStar,
-	FasTrashCan,
-	FasShareNodes,
-	FasSpinner,
-	FasUpload,
-} from '@fastybird/web-ui-icons';
-import { FbButton, ButtonButtonTypes, FbIcon } from '@fastybird/web-ui-components';
-import { ComponentSizeTypes, VariantTypes } from '@fastybird/web-ui-constants';
+    FasMagnifyingGlass,
+    FasPenToSquare,
+    FasEnvelope,
+    FasCheck,
+    FasStar,
+    FasTrashCan,
+    FasShareNodes,
+    FasSpinner,
+    FasUpload,
+} from "@fastybird/web-ui-icons";
+import { FbButton, ButtonButtonTypes, FbIcon } from "@fastybird/web-ui-components";
+import { ComponentSizeTypes, VariantTypes } from "@fastybird/web-ui-constants";
 
-import './fb-button.stories.scss';
+import "./fb-button.stories.scss";
 
 const meta: Meta<typeof FbButton> = {
-	component: FbButton,
-	title: 'Components/Basic/Button',
-	argTypes: {
-		default: {
-			type: { name: 'string', required: true },
-			control: { type: 'text' },
-			description: 'required slot representing button content',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		size: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
-			description: 'button size',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: ComponentSizeTypes.DEFAULT },
-			},
-		},
-		variant: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: ['', VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
-			description: 'button variant',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		type: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [ButtonButtonTypes.BUTTON, ButtonButtonTypes.SUBMIT, ButtonButtonTypes.RESET],
-			description: "same as native button's `type`",
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: ButtonButtonTypes.BUTTON },
-			},
-		},
-		block: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether button is stretched to full width',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		uppercase: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether button text is in uppercase',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		link: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: "whether it's a link button",
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		round: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: "whether it's a round button",
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		circle: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: "whether it's a circle button",
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		text: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: "whether it's a text button",
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		plain: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: "whether it's a plain button",
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		bg: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether the text button background color is always on',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		color: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'custom button color, automatically calculate `hover` and `active` color',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		active: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: "whether it's a active button",
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		disabled: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether button is disabled',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		autofocus: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: "same as native button's `autofocus`",
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		loading: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: "whether it's loading",
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		loadingIcon: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'customize loading icon component',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		icon: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'icon component',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		tag: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'custom element tag',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: 'button' },
-			},
-		},
-		dark: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'dark mode, which automatically converts `color` to dark mode colors',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		onClick: {
-			table: {
-				disable: true,
-			},
-		},
-	},
-	args: {
-		size: ComponentSizeTypes.DEFAULT,
-		type: ButtonButtonTypes.BUTTON,
-		block: false,
-		uppercase: false,
-		link: false,
-		round: false,
-		circle: false,
-		text: false,
-		plain: false,
-		bg: false,
-		active: false,
-		disabled: false,
-		autofocus: false,
-		loading: false,
-		tag: 'button',
-		dark: false,
-		onClick: fn(),
-	},
-	excludeStories: /.*Data$/,
+    component: FbButton,
+    title: "Components/Basic/Button",
+    argTypes: {
+        default: {
+            type: { name: "string", required: true },
+            control: { type: "text" },
+            description: "required slot representing button content",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        size: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
+            description: "button size",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: ComponentSizeTypes.DEFAULT },
+            },
+        },
+        variant: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [
+                "",
+                VariantTypes.DEFAULT,
+                VariantTypes.PRIMARY,
+                VariantTypes.INFO,
+                VariantTypes.SUCCESS,
+                VariantTypes.WARNING,
+                VariantTypes.DANGER,
+            ],
+            description: "button variant",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        type: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [ButtonButtonTypes.BUTTON, ButtonButtonTypes.SUBMIT, ButtonButtonTypes.RESET],
+            description: "same as native button's `type`",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: ButtonButtonTypes.BUTTON },
+            },
+        },
+        block: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether button is stretched to full width",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        uppercase: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether button text is in uppercase",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        link: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether it's a link button",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        round: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether it's a round button",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        circle: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether it's a circle button",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        text: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether it's a text button",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        plain: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether it's a plain button",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        bg: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether the text button background color is always on",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        color: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "custom button color, automatically calculate `hover` and `active` color",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        active: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether it's a active button",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        disabled: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether button is disabled",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        autofocus: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "same as native button's `autofocus`",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        loading: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether it's loading",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        loadingIcon: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "customize loading icon component",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        icon: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "icon component",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        tag: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "custom element tag",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "button" },
+            },
+        },
+        dark: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "dark mode, which automatically converts `color` to dark mode colors",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        onClick: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    args: {
+        size: ComponentSizeTypes.DEFAULT,
+        type: ButtonButtonTypes.BUTTON,
+        block: false,
+        uppercase: false,
+        link: false,
+        round: false,
+        circle: false,
+        text: false,
+        plain: false,
+        bg: false,
+        active: false,
+        disabled: false,
+        autofocus: false,
+        loading: false,
+        tag: "button",
+        dark: false,
+        onClick: fn(),
+    },
+    excludeStories: /.*Data$/,
 };
 
 export const actionsData = {
-	onClick: action('click'),
+    onClick: action("click"),
 };
 
 export default meta;
@@ -250,17 +258,17 @@ export default meta;
 type Story = StoryObj<typeof FbButton>;
 
 export const Component: Story = {
-	tags: ['hideInSidebar'],
-	args: {
-		default: 'Default',
-	},
+    tags: ["hideInSidebar"],
+    args: {
+        default: "Default",
+    },
 };
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<fb-button>Default</fb-button>
@@ -309,16 +317,16 @@ import {
   FasTrashCan,
 } from '@fastybird/web-ui-icons';
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		setup() {
-			return { FasMagnifyingGlass, FasPenToSquare, FasEnvelope, FasCheck, FasStar, FasTrashCan };
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        setup() {
+            return { FasMagnifyingGlass, FasPenToSquare, FasEnvelope, FasCheck, FasStar, FasTrashCan };
+        },
+        template: `
 <div class="fb-button-story-block">
 	<div class="fb-button-story-block__item">
 		<fb-button>Default</fb-button>
@@ -353,14 +361,14 @@ import {
 		<fb-button variant="${VariantTypes.DANGER}" circle :icon="FasTrashCan" />
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Disabled: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<fb-button disabled>Default</fb-button>
@@ -380,13 +388,13 @@ export const Disabled: Story = {
 		<fb-button variant="${VariantTypes.DANGER}" plain disabled>Danger</fb-button>
 	</div>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        template: `
 <div class="fb-button-story-block">
 	<div class="fb-button-story-block__item">
 		<fb-button disabled>Default</fb-button>
@@ -405,14 +413,14 @@ export const Disabled: Story = {
 		<fb-button variant="${VariantTypes.DANGER}" plain disabled>Danger</fb-button>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Link: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button link>Default</fb-button>
 	<fb-button variant="${VariantTypes.PRIMARY}" link>Primary</fb-button>
@@ -421,13 +429,13 @@ export const Link: Story = {
 	<fb-button variant="${VariantTypes.WARNING}" link>Warning</fb-button>
 	<fb-button variant="${VariantTypes.DANGER}" link>Danger</fb-button>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        template: `
 <div class="fb-button-story-block">
 	<fb-button link>Default</fb-button>
 	<fb-button variant="${VariantTypes.PRIMARY}" link>Primary</fb-button>
@@ -436,14 +444,14 @@ export const Link: Story = {
 	<fb-button variant="${VariantTypes.WARNING}" link>Warning</fb-button>
 	<fb-button variant="${VariantTypes.DANGER}" link>Danger</fb-button>
 </div>`,
-	}),
+    }),
 };
 
 export const LinkDisabled: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button link disabled>Plain</fb-button>
 	<fb-button variant="${VariantTypes.PRIMARY}" link disabled>Primary</fb-button>
@@ -452,13 +460,13 @@ export const LinkDisabled: Story = {
 	<fb-button variant="${VariantTypes.WARNING}" link disabled>Warning</fb-button>
 	<fb-button variant="${VariantTypes.DANGER}" link disabled>Danger</fb-button>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        template: `
 <div class="fb-button-story-block">
 	<fb-button link disabled>Plain</fb-button>
 	<fb-button variant="${VariantTypes.PRIMARY}" link disabled>Primary</fb-button>
@@ -467,14 +475,14 @@ export const LinkDisabled: Story = {
 	<fb-button variant="${VariantTypes.WARNING}" link disabled>Warning</fb-button>
 	<fb-button variant="${VariantTypes.DANGER}" link disabled>Danger</fb-button>
 </div>`,
-	}),
+    }),
 };
 
 export const Text: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button text>Plain</fb-button>
 	<fb-button variant="${VariantTypes.PRIMARY}" text>Primary</fb-button>
@@ -483,13 +491,13 @@ export const Text: Story = {
 	<fb-button variant="${VariantTypes.WARNING}" text>Warning</fb-button>
 	<fb-button variant="${VariantTypes.DANGER}" text>Danger</fb-button>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        template: `
 <div class="fb-button-story-block">
 	<fb-button text>Plain</fb-button>
 	<fb-button variant="${VariantTypes.PRIMARY}" text>Primary</fb-button>
@@ -498,14 +506,14 @@ export const Text: Story = {
 	<fb-button variant="${VariantTypes.WARNING}" text>Warning</fb-button>
 	<fb-button variant="${VariantTypes.DANGER}" text>Danger</fb-button>
 </div>`,
-	}),
+    }),
 };
 
 export const TextBg: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button text bg>Plain</fb-button>
 	<fb-button variant="${VariantTypes.PRIMARY}" text bg>Primary</fb-button>
@@ -514,13 +522,13 @@ export const TextBg: Story = {
 	<fb-button variant="${VariantTypes.WARNING}" text bg>Warning</fb-button>
 	<fb-button variant="${VariantTypes.DANGER}" text bg>Danger</fb-button>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        template: `
 <div class="fb-button-story-block">
 	<fb-button text bg>Plain</fb-button>
 	<fb-button variant="${VariantTypes.PRIMARY}" text bg>Primary</fb-button>
@@ -529,14 +537,14 @@ export const TextBg: Story = {
 	<fb-button variant="${VariantTypes.WARNING}" text bg>Warning</fb-button>
 	<fb-button variant="${VariantTypes.DANGER}" text bg>Danger</fb-button>
 </div>`,
-	}),
+    }),
 };
 
 export const TextDisabled: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button text disabled>Plain</fb-button>
 	<fb-button variant="${VariantTypes.PRIMARY}" text disabled>Primary</fb-button>
@@ -545,13 +553,13 @@ export const TextDisabled: Story = {
 	<fb-button variant="${VariantTypes.WARNING}" text disabled>Warning</fb-button>
 	<fb-button variant="${VariantTypes.DANGER}" text disabled>Danger</fb-button>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        template: `
 <div class="fb-button-story-block">
 	<fb-button text disabled>Plain</fb-button>
 	<fb-button variant="${VariantTypes.PRIMARY}" text disabled>Primary</fb-button>
@@ -560,14 +568,14 @@ export const TextDisabled: Story = {
 	<fb-button variant="${VariantTypes.WARNING}" text disabled>Warning</fb-button>
 	<fb-button variant="${VariantTypes.DANGER}" text disabled>Danger</fb-button>
 </div>`,
-	}),
+    }),
 };
 
 export const Icon: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button variant="${VariantTypes.PRIMARY}" :icon="FasPenToSquare" />
 	<fb-button variant="${VariantTypes.PRIMARY}" :icon="FasShareNodes" />
@@ -596,16 +604,16 @@ import {
 	margin-left: 6px;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton, FbIcon, FasUpload },
-		setup() {
-			return { FasPenToSquare, FasShareNodes, FasTrashCan, FasMagnifyingGlass };
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton, FbIcon, FasUpload },
+        setup() {
+            return { FasPenToSquare, FasShareNodes, FasTrashCan, FasMagnifyingGlass };
+        },
+        template: `
 <div class="fb-button-story-block">
 	<fb-button variant="${VariantTypes.PRIMARY}" :icon="FasPenToSquare" />
 	<fb-button variant="${VariantTypes.PRIMARY}" :icon="FasShareNodes" />
@@ -613,14 +621,14 @@ import {
 	<fb-button variant="${VariantTypes.PRIMARY}" :icon="FasMagnifyingGlass">Search</fb-button>
 	<fb-button variant="${VariantTypes.PRIMARY}">Upload<fb-icon class="button-icon"><fas-upload /></fb-icon></fb-button>
 </div>`,
-	}),
+    }),
 };
 
 export const Loading: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button variant="${VariantTypes.PRIMARY}" loading>Loading</fb-button>
 	<fb-button variant="${VariantTypes.PRIMARY}" loading :loadingIcon="FasSpinner">Loading</fb-button>
@@ -659,16 +667,16 @@ export const Loading: Story = {
 	stroke-linecap: round;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton, FbIcon },
-		setup() {
-			return { FasSpinner };
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton, FbIcon },
+        setup() {
+            return { FasSpinner };
+        },
+        template: `
 <div class="fb-button-story-block">
 	<fb-button variant="${VariantTypes.PRIMARY}" loading>Loading</fb-button>
 	<fb-button variant="${VariantTypes.PRIMARY}" loading :loadingIcon="FasSpinner">Loading</fb-button>
@@ -692,14 +700,14 @@ export const Loading: Story = {
 		Loading
 	</fb-button>
 </div>`,
-	}),
+    }),
 };
 
 export const Sizes: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<fb-button size="${ComponentSizeTypes.LARGE}">Large</fb-button>
@@ -729,16 +737,16 @@ export const Sizes: Story = {
 <script lang="ts" setup>
 import { FasMagnifyingGlass } from '@fastybird/web-ui-icons';
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		setup() {
-			return { FasMagnifyingGlass };
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        setup() {
+            return { FasMagnifyingGlass };
+        },
+        template: `
 <div class="fb-button-story-block">
 	<div class="fb-button-story-block__item">
 		<fb-button size="${ComponentSizeTypes.LARGE}">Large</fb-button>
@@ -764,14 +772,14 @@ import { FasMagnifyingGlass } from '@fastybird/web-ui-icons';
 		<fb-button size="${ComponentSizeTypes.SMALL}" circle :icon="FasMagnifyingGlass" />
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Tag: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button>button</fb-button>
 	<fb-button tag="div" role="button" tabindex="0">div</fb-button>
@@ -785,13 +793,13 @@ export const Tag: Story = {
 		a
 	</fb-button>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        template: `
 <div class="fb-button-story-block">
 	<fb-button>button</fb-button>
 	<fb-button tag="div" role="button" tabindex="0">div</fb-button>
@@ -805,14 +813,14 @@ export const Tag: Story = {
 		a
 	</fb-button>
 </div>`,
-	}),
+    }),
 };
 
 export const CustomColor: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button color="#626aef">Default</fb-button>
 	<fb-button color="#626aef" plain>Plain</fb-button>
@@ -820,13 +828,13 @@ export const CustomColor: Story = {
 	<fb-button color="#626aef" disabled>Disabled</fb-button>
 	<fb-button color="#626aef" disabled plain>Disabled Plain</fb-button>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        template: `
 <div class="fb-button-story-block">
 	<fb-button color="#626aef">Default</fb-button>
 	<fb-button color="#626aef" plain>Plain</fb-button>
@@ -834,5 +842,5 @@ export const CustomColor: Story = {
 	<fb-button color="#626aef" disabled>Disabled</fb-button>
 	<fb-button color="#626aef" disabled plain>Disabled Plain</fb-button>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/card/fb-card.mdx b/docs/src/components/card/fb-card.mdx
index 1ff6c51d..c32ecd73 100644
--- a/docs/src/components/card/fb-card.mdx
+++ b/docs/src/components/card/fb-card.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
-import * as CardStories from './fb-card.stories';
+import { Canvas, Meta, Controls, Story } from "@storybook/blocks";
+import * as CardStories from "./fb-card.stories";
 
 <Meta of={CardStories} />
 
@@ -31,8 +31,8 @@ The header and footer part can be omitted.
 
 A borderless card on a gray background.
 
-<div style={{ background: '#f0f2f5' }}>
-	<Canvas of={CardStories.NoBorder} />
+<div style={{ background: "#f0f2f5" }}>
+    <Canvas of={CardStories.NoBorder} />
 </div>
 
 ## Shadow
diff --git a/docs/src/components/card/fb-card.stories.scss b/docs/src/components/card/fb-card.stories.scss
index 3f8deeed..a3b79ae4 100644
--- a/docs/src/components/card/fb-card.stories.scss
+++ b/docs/src/components/card/fb-card.stories.scss
@@ -1,26 +1,26 @@
 .fb-card-story-block {
-	&-–flex {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		gap: 20px;
-	}
+    &-–flex {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 20px;
+    }
 
-	.fb-card-story-block__item {
-		max-width: 480px;
-		margin-bottom: 20px;
+    .fb-card-story-block__item {
+        max-width: 480px;
+        margin-bottom: 20px;
 
-		.fb-card-story-block__item-actions {
-			display: flex;
+        .fb-card-story-block__item-actions {
+            display: flex;
 
-			.fb-card-story-block__item-actions-button {
-				flex: 1;
-			}
-		}
-	}
+            .fb-card-story-block__item-actions-button {
+                flex: 1;
+            }
+        }
+    }
 
-	.fb-card-story-block__in-column-item {
-		width: 100%;
-		margin: 10px 0;
-	}
+    .fb-card-story-block__in-column-item {
+        width: 100%;
+        margin: 10px 0;
+    }
 }
diff --git a/docs/src/components/card/fb-card.stories.ts b/docs/src/components/card/fb-card.stories.ts
index f3d8f836..47d4cc24 100644
--- a/docs/src/components/card/fb-card.stories.ts
+++ b/docs/src/components/card/fb-card.stories.ts
@@ -1,148 +1,180 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbCard, FbButton, FbDivider, FbRow, FbCol, CardShadowTypes } from '@fastybird/web-ui-components';
-import { FasGear, FasEllipsis, FasPencil } from '@fastybird/web-ui-icons';
-import { VariantTypes, EffectTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbCard, FbButton, FbDivider, FbRow, FbCol, CardShadowTypes } from "@fastybird/web-ui-components";
+import { FasGear, FasEllipsis, FasPencil } from "@fastybird/web-ui-icons";
+import { VariantTypes, EffectTypes } from "@fastybird/web-ui-constants";
 
 // @ts-ignore
-import imageFile from './../../../static/example_01.jpg';
+import imageFile from "./../../../static/example_01.jpg";
 
-import './fb-card.stories.scss';
+import "./fb-card.stories.scss";
 
 const meta: Meta<typeof FbCard> = {
-	component: FbCard,
-	title: 'Components/Data/Card',
-	argTypes: {
-		header: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'content of the card header',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		default: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'customize default content',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		footer: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'content of the card footer',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		extra: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'content of the extra part of the card header',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		cover: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'content of the card cover used for images',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		variant: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: ['', VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
-			description: 'card variant',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		effect: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: ['', EffectTypes.LIGHT, EffectTypes.DARK],
-			description: 'card theme style',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: EffectTypes.LIGHT },
-			},
-		},
-		headerVariant: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: ['', VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
-			description: 'card header variant',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		bodyVariant: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: ['', VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
-			description: 'card body variant',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		footerVariant: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: ['', VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
-			description: 'card footer variant',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		shadow: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [CardShadowTypes.ALWAYS, CardShadowTypes.HOVER, CardShadowTypes.NEVER],
-			description: 'when to show card shadows',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: CardShadowTypes.ALWAYS },
-			},
-		},
-		bordered: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'when to show card border',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: true },
-			},
-		},
-		loading: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'when to show card loading animation',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-	},
-	args: {
-		effect: EffectTypes.LIGHT,
-		shadow: CardShadowTypes.ALWAYS,
-		bordered: true,
-		loading: false,
-	},
-	excludeStories: /.*Data$/,
+    component: FbCard,
+    title: "Components/Data/Card",
+    argTypes: {
+        header: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "content of the card header",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        default: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "customize default content",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        footer: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "content of the card footer",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        extra: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "content of the extra part of the card header",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        cover: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "content of the card cover used for images",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        variant: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [
+                "",
+                VariantTypes.DEFAULT,
+                VariantTypes.PRIMARY,
+                VariantTypes.INFO,
+                VariantTypes.SUCCESS,
+                VariantTypes.WARNING,
+                VariantTypes.DANGER,
+            ],
+            description: "card variant",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        effect: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: ["", EffectTypes.LIGHT, EffectTypes.DARK],
+            description: "card theme style",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: EffectTypes.LIGHT },
+            },
+        },
+        headerVariant: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [
+                "",
+                VariantTypes.DEFAULT,
+                VariantTypes.PRIMARY,
+                VariantTypes.INFO,
+                VariantTypes.SUCCESS,
+                VariantTypes.WARNING,
+                VariantTypes.DANGER,
+            ],
+            description: "card header variant",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        bodyVariant: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [
+                "",
+                VariantTypes.DEFAULT,
+                VariantTypes.PRIMARY,
+                VariantTypes.INFO,
+                VariantTypes.SUCCESS,
+                VariantTypes.WARNING,
+                VariantTypes.DANGER,
+            ],
+            description: "card body variant",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        footerVariant: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [
+                "",
+                VariantTypes.DEFAULT,
+                VariantTypes.PRIMARY,
+                VariantTypes.INFO,
+                VariantTypes.SUCCESS,
+                VariantTypes.WARNING,
+                VariantTypes.DANGER,
+            ],
+            description: "card footer variant",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        shadow: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [CardShadowTypes.ALWAYS, CardShadowTypes.HOVER, CardShadowTypes.NEVER],
+            description: "when to show card shadows",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: CardShadowTypes.ALWAYS },
+            },
+        },
+        bordered: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "when to show card border",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            },
+        },
+        loading: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "when to show card loading animation",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+    },
+    args: {
+        effect: EffectTypes.LIGHT,
+        shadow: CardShadowTypes.ALWAYS,
+        bordered: true,
+        loading: false,
+    },
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -150,19 +182,19 @@ export default meta;
 type Story = StoryObj<typeof FbCard>;
 
 export const Component: Story = {
-	tags: ['hideInSidebar'],
-	args: {
-		header: 'Card name',
-		default: 'Card body content',
-		footer: 'Footer content',
-	},
+    tags: ["hideInSidebar"],
+    args: {
+        header: "Card name",
+        default: "Card body content",
+        footer: "Footer content",
+    },
 };
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-card class="card">
 		<template #header>
@@ -184,13 +216,13 @@ export const BasicUsage: Story = {
 	max-width: 480px;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCard },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCard },
+        template: `
 <div class="fb-card-story-block">
 	<fb-card class="fb-card-story-block__item">
 		<template #header>
@@ -203,14 +235,14 @@ export const BasicUsage: Story = {
 		<template #footer>Footer content</template>
 	</fb-card>
 </div>`,
-	}),
+    }),
 };
 
 export const Simple: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-card class="card">
 		<p v-for="o in 4" :key="o">{{ 'List item ' + o }}</p>
@@ -222,26 +254,26 @@ export const Simple: Story = {
 	max-width: 480px;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCard },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCard },
+        template: `
 <div class="fb-card-story-block">
 	<fb-card class="fb-card-story-block__item">
 		<p v-for="o in 4" :key="o">{{ 'List item ' + o }}</p>
 	</fb-card>
 </div>`,
-	}),
+    }),
 };
 
 export const NoBorder: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-card class="card" :bordered="false">
 		<template #header>
@@ -263,13 +295,13 @@ export const NoBorder: Story = {
 	max-width: 480px;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCard },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCard },
+        template: `
 <div class="fb-card-story-block">
 	<fb-card class="fb-card-story-block__item" :bordered="false" shadow="${CardShadowTypes.NEVER}">
 		<template #header>
@@ -282,14 +314,14 @@ export const NoBorder: Story = {
 		<template #footer>Footer content</template>
 	</fb-card>
 </div>`,
-	}),
+    }),
 };
 
 export const Shadow: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-card class="card" shadow="${CardShadowTypes.ALWAYS}">Always</fb-card>
 	<fb-card class="card" shadow="${CardShadowTypes.HOVER}">Hover</fb-card>
@@ -301,26 +333,26 @@ export const Shadow: Story = {
 	max-width: 480px;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCard },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCard },
+        template: `
 <div class="fb-card-story-block">
 	<fb-card class="fb-card-story-block__item" shadow="${CardShadowTypes.ALWAYS}">Always</fb-card>
 	<fb-card class="fb-card-story-block__item" shadow="${CardShadowTypes.HOVER}">Hover</fb-card>
 	<fb-card class="fb-card-story-block__item" shadow="${CardShadowTypes.NEVER}">Never</fb-card>
 </div>`,
-	}),
+    }),
 };
 
 export const Variants: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-row :gutter="20">
 		<fb-col :sm="12" :md="8">
@@ -391,13 +423,13 @@ export const Variants: Story = {
 	margin: 10px 0;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCard, FbRow, FbCol },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCard, FbRow, FbCol },
+        template: `
 <div class="fb-card-story-block">
 	<fb-row :gutter="20">
 		<fb-col :sm="12" :md="8">
@@ -461,14 +493,14 @@ export const Variants: Story = {
 		</fb-col>
 	</fb-row>
 </div>`,
-	}),
+    }),
 };
 
 export const VariantsDark: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-row :gutter="20">
 		<fb-col :sm="12" :md="8">
@@ -539,13 +571,13 @@ export const VariantsDark: Story = {
 	margin: 10px 0;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCard, FbRow, FbCol },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCard, FbRow, FbCol },
+        template: `
 <div class="fb-card-story-block">
 	<fb-row :gutter="20">
 		<fb-col :sm="12" :md="8">
@@ -609,14 +641,14 @@ export const VariantsDark: Story = {
 		</fb-col>
 	</fb-row>
 </div>`,
-	}),
+    }),
 };
 
 export const VariantsParts: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-row :gutter="20">
 		<fb-col :sm="12" :md="8">
@@ -687,13 +719,13 @@ export const VariantsParts: Story = {
 	margin: 10px 0;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCard, FbRow, FbCol },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCard, FbRow, FbCol },
+        template: `
 <div class="fb-card-story-block">
 	<fb-row :gutter="20">
 		<fb-col :sm="12" :md="8">
@@ -757,14 +789,14 @@ export const VariantsParts: Story = {
 		</fb-col>
 	</fb-row>
 </div>`,
-	}),
+    }),
 };
 
 export const MoreContent: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-card class="card">
 		<template #cover>
@@ -799,21 +831,21 @@ export const MoreContent: Story = {
 	flex: 1;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCard, FbButton, FbDivider },
-		setup() {
-			return {
-				FasGear,
-				FasEllipsis,
-				FasPencil,
-				imageFile,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCard, FbButton, FbDivider },
+        setup() {
+            return {
+                FasGear,
+                FasEllipsis,
+                FasPencil,
+                imageFile,
+            };
+        },
+        template: `
 <div class="fb-card-story-block">
 	<fb-card class="fb-card-story-block__item">
 		<template #cover>
@@ -834,5 +866,5 @@ export const MoreContent: Story = {
 		</template>
 	</fb-card>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/checkbox/fb-checkbox.mdx b/docs/src/components/checkbox/fb-checkbox.mdx
index a2294033..3911eea9 100644
--- a/docs/src/components/checkbox/fb-checkbox.mdx
+++ b/docs/src/components/checkbox/fb-checkbox.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as CheckboxStories from './fb-checkbox.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as CheckboxStories from "./fb-checkbox.stories";
 
 <Meta of={CheckboxStories} />
 
@@ -14,19 +14,13 @@ Checkbox can be used alone to switch between two states.
 To define a bound variable using `v-model` in `fb-checkbox`, set the default value as a `Boolean` for a single `checkbox`. When selected, it defaults
 to `true`. Content within the `fb-checkbox` tag becomes the description displayed alongside the Checkbox button.
 
-<Canvas
-	withToolbar={true}
-	of={CheckboxStories.BasicUsage}
-/>
+<Canvas withToolbar={true} of={CheckboxStories.BasicUsage} />
 
 ## Disabled
 
 To disable a Checkbox, simply add the `disabled` property.
 
-<Canvas
-	withToolbar={true}
-	of={CheckboxStories.Disabled}
-/>
+<Canvas withToolbar={true} of={CheckboxStories.Disabled} />
 
 ## Checkbox Group
 
@@ -34,47 +28,32 @@ The `fb-checkbox-group` component manages multiple Checkboxes bound to an array
 has a `value` property representing its value. If no content is provided within the tag, the `label` property serves as the Checkbox description.
 The Checkbox is considered selected if its value exists in the array bound to `v-model`, and vice versa.
 
-<Canvas
-	withToolbar={true}
-	of={CheckboxStories.CheckboxGroup}
-/>
+<Canvas withToolbar={true} of={CheckboxStories.CheckboxGroup} />
 
 ## Indeterminate
 
 The `indeterminate` property enables you to achieve a "check all" effect.
 
-<Canvas
-	withToolbar={true}
-	of={CheckboxStories.Indeterminate}
-/>
+<Canvas withToolbar={true} of={CheckboxStories.Indeterminate} />
 
 ## Minimum & Maximum Items Checked
 
 The `min` and `max` properties can be used to restrict the number of checked items.
 
-<Canvas
-	withToolbar={true}
-	of={CheckboxStories.MinMax}
-/>
+<Canvas withToolbar={true} of={CheckboxStories.MinMax} />
 
 ## Button Style
 
 To style a Checkbox like a button, replace the `fb-checkbox` element with the `fb-checkbox-button` element. Additionally, you can use the `size` property
 for customization.
 
-<Canvas
-	withToolbar={true}
-	of={CheckboxStories.Button}
-/>
+<Canvas withToolbar={true} of={CheckboxStories.Button} />
 
 ## With Borders
 
 The `border` property adds a border to Checkboxes.
 
-<Canvas
-	withToolbar={true}
-	of={CheckboxStories.Bordered}
-/>
+<Canvas withToolbar={true} of={CheckboxStories.Bordered} />
 
 ---
 
diff --git a/docs/src/components/checkbox/fb-checkbox.stories.scss b/docs/src/components/checkbox/fb-checkbox.stories.scss
index 49a47644..11df7986 100644
--- a/docs/src/components/checkbox/fb-checkbox.stories.scss
+++ b/docs/src/components/checkbox/fb-checkbox.stories.scss
@@ -1,11 +1,11 @@
 .fb-checkbox-story-block {
-	max-width: 600px;
+    max-width: 600px;
 
-	.fb-checkbox-story-block__item {
-		margin-bottom: 20px;
-	}
+    .fb-checkbox-story-block__item {
+        margin-bottom: 20px;
+    }
 
-	.fb-checkbox-story-block__item:last-child {
-		margin-bottom: 0;
-	}
+    .fb-checkbox-story-block__item:last-child {
+        margin-bottom: 0;
+    }
 }
diff --git a/docs/src/components/checkbox/fb-checkbox.stories.ts b/docs/src/components/checkbox/fb-checkbox.stories.ts
index 14f6a043..3ea55a87 100644
--- a/docs/src/components/checkbox/fb-checkbox.stories.ts
+++ b/docs/src/components/checkbox/fb-checkbox.stories.ts
@@ -1,15 +1,15 @@
-import { ref } from 'vue';
+import { ref } from "vue";
 
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbCheckbox, FbCheckboxGroup, FbCheckboxButton } from '@fastybird/web-ui-components';
-import { ComponentSizeTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbCheckbox, FbCheckboxGroup, FbCheckboxButton } from "@fastybird/web-ui-components";
+import { ComponentSizeTypes } from "@fastybird/web-ui-constants";
 
-import './fb-checkbox.stories.scss';
+import "./fb-checkbox.stories.scss";
 
 const meta: Meta<typeof FbCheckbox> = {
-	component: FbCheckbox,
-	title: 'Components/Form/Checkbox',
-	excludeStories: /.*Data$/,
+    component: FbCheckbox,
+    title: "Components/Form/Checkbox",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -17,10 +17,10 @@ export default meta;
 type Story = StoryObj<typeof FbCheckbox>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<fb-checkbox v-model="checked1" label="Option 1" size="${ComponentSizeTypes.LARGE}" />
@@ -52,34 +52,34 @@ const checked6 = ref(false);
 const checked7 = ref(false);
 const checked8 = ref(false);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCheckbox },
-		setup: () => {
-			const checked1 = ref(true);
-			const checked2 = ref(false);
-			const checked3 = ref(false);
-			const checked4 = ref(false);
-			const checked5 = ref(false);
-			const checked6 = ref(false);
-			const checked7 = ref(false);
-			const checked8 = ref(false);
-
-			return {
-				checked1,
-				checked2,
-				checked3,
-				checked4,
-				checked5,
-				checked6,
-				checked7,
-				checked8,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCheckbox },
+        setup: () => {
+            const checked1 = ref(true);
+            const checked2 = ref(false);
+            const checked3 = ref(false);
+            const checked4 = ref(false);
+            const checked5 = ref(false);
+            const checked6 = ref(false);
+            const checked7 = ref(false);
+            const checked8 = ref(false);
+
+            return {
+                checked1,
+                checked2,
+                checked3,
+                checked4,
+                checked5,
+                checked6,
+                checked7,
+                checked8,
+            };
+        },
+        template: `
 <div class="fb-checkbox-story-block">
 	<div class="fb-checkbox-story-block__item">
 		<fb-checkbox v-model="checked1" label="Option 1" size="${ComponentSizeTypes.LARGE}" />
@@ -98,14 +98,14 @@ const checked8 = ref(false);
 		<fb-checkbox v-model="checked8" label="Option 2" size="${ComponentSizeTypes.SMALL}" disabled />
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Disabled: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-checkbox v-model="checked1" disabled>Disabled</fb-checkbox>
 	<fb-checkbox v-model="checked2">Not disabled</fb-checkbox>
@@ -117,34 +117,34 @@ import { ref } from 'vue';
 const checked1 = ref(true);
 const checked2 = ref(false);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCheckbox },
-		setup: () => {
-			const checked1 = ref(true);
-			const checked2 = ref(false);
-
-			return {
-				checked1,
-				checked2,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCheckbox },
+        setup: () => {
+            const checked1 = ref(true);
+            const checked2 = ref(false);
+
+            return {
+                checked1,
+                checked2,
+            };
+        },
+        template: `
 <div class="fb-checkbox-story-block">
 	<fb-checkbox v-model="checked1" disabled>Disabled</fb-checkbox>
 	<fb-checkbox v-model="checked2">Not disabled</fb-checkbox>
 </div>`,
-	}),
+    }),
 };
 
 export const CheckboxGroup: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-checkbox-group v-model="checkList">
 		<fb-checkbox label="Option A" value="Value A" />
@@ -164,20 +164,20 @@ import { ref } from 'vue';
 
 const checkList = ref(['Value selected and disabled', 'Value A']);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCheckbox, FbCheckboxGroup },
-		setup: () => {
-			const checkList = ref(['Value selected and disabled', 'Value A']);
-
-			return {
-				checkList,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCheckbox, FbCheckboxGroup },
+        setup: () => {
+            const checkList = ref(["Value selected and disabled", "Value A"]);
+
+            return {
+                checkList,
+            };
+        },
+        template: `
 <div class="fb-checkbox-story-block">
 	<fb-checkbox-group v-model="checkList">
 		<fb-checkbox label="Option A" value="Value A" />
@@ -191,14 +191,14 @@ const checkList = ref(['Value selected and disabled', 'Value A']);
 		/>
 	</fb-checkbox-group>
 </div>`,
-	}),
+    }),
 };
 
 export const Indeterminate: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-checkbox
 		v-model="checkAll"
@@ -241,39 +241,39 @@ const handleCheckedCitiesChange = (value: string[]) => {
 	isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
 };
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCheckbox, FbCheckboxGroup },
-		setup: () => {
-			const checkAll = ref(false);
-			const isIndeterminate = ref(true);
-			const checkedCities = ref(['New York', 'Washington']);
-			const cities = ['New York', 'Washington', 'Los Angeles', 'Chicago'];
-
-			const handleCheckAllChange = (val: boolean) => {
-				checkedCities.value = val ? cities : [];
-				isIndeterminate.value = false;
-			};
-
-			const handleCheckedCitiesChange = (value: string[]) => {
-				const checkedCount = value.length;
-				checkAll.value = checkedCount === cities.length;
-				isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
-			};
-
-			return {
-				checkAll,
-				isIndeterminate,
-				checkedCities,
-				cities,
-				handleCheckAllChange,
-				handleCheckedCitiesChange,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCheckbox, FbCheckboxGroup },
+        setup: () => {
+            const checkAll = ref(false);
+            const isIndeterminate = ref(true);
+            const checkedCities = ref(["New York", "Washington"]);
+            const cities = ["New York", "Washington", "Los Angeles", "Chicago"];
+
+            const handleCheckAllChange = (val: boolean) => {
+                checkedCities.value = val ? cities : [];
+                isIndeterminate.value = false;
+            };
+
+            const handleCheckedCitiesChange = (value: string[]) => {
+                const checkedCount = value.length;
+                checkAll.value = checkedCount === cities.length;
+                isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
+            };
+
+            return {
+                checkAll,
+                isIndeterminate,
+                checkedCities,
+                cities,
+                handleCheckAllChange,
+                handleCheckedCitiesChange,
+            };
+        },
+        template: `
 <div class="fb-checkbox-story-block">
 	<fb-checkbox
 		v-model="checkAll"
@@ -296,14 +296,14 @@ const handleCheckedCitiesChange = (value: string[]) => {
 		</fb-checkbox>
 	</fb-checkbox-group>
 </div>`,
-	}),
+    }),
 };
 
 export const MinMax: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-checkbox-group v-model="checkedCities" :min="1" :max="2">
 		<fb-checkbox
@@ -323,22 +323,22 @@ import { ref } from 'vue';
 const checkedCities = ref(['New York', 'Washington']);
 const cities = ['New York', 'Washington', 'Los Angeles', 'Chicago'];
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCheckbox, FbCheckboxGroup },
-		setup: () => {
-			const checkedCities = ref(['New York', 'Washington']);
-			const cities = ['New York', 'Washington', 'Los Angeles', 'Chicago'];
-
-			return {
-				checkedCities,
-				cities,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCheckbox, FbCheckboxGroup },
+        setup: () => {
+            const checkedCities = ref(["New York", "Washington"]);
+            const cities = ["New York", "Washington", "Los Angeles", "Chicago"];
+
+            return {
+                checkedCities,
+                cities,
+            };
+        },
+        template: `
 <div class="fb-checkbox-story-block">
 	<fb-checkbox-group v-model="checkedCities" :min="1" :max="2">
 		<fb-checkbox
@@ -351,14 +351,14 @@ const cities = ['New York', 'Washington', 'Los Angeles', 'Chicago'];
 		</fb-checkbox>
 	</fb-checkbox-group>
 </div>`,
-	}),
+    }),
 };
 
 export const Button: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<fb-checkbox-group v-model="checkboxGroup1" size="${ComponentSizeTypes.LARGE}">
@@ -404,28 +404,28 @@ const checkboxGroup3 = ref(['Los Angeles']);
 const checkboxGroup4 = ref(['Chicago']);
 const cities = ['New York', 'Washington', 'Los Angeles', 'Chicago'];
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCheckbox, FbCheckboxGroup, FbCheckboxButton },
-		setup: () => {
-			const checkboxGroup1 = ref(['New York']);
-			const checkboxGroup2 = ref(['Washington']);
-			const checkboxGroup3 = ref(['Los Angeles']);
-			const checkboxGroup4 = ref(['Chicago']);
-			const cities = ['New York', 'Washington', 'Los Angeles', 'Chicago'];
-
-			return {
-				checkboxGroup1,
-				checkboxGroup2,
-				checkboxGroup3,
-				checkboxGroup4,
-				cities,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCheckbox, FbCheckboxGroup, FbCheckboxButton },
+        setup: () => {
+            const checkboxGroup1 = ref(["New York"]);
+            const checkboxGroup2 = ref(["Washington"]);
+            const checkboxGroup3 = ref(["Los Angeles"]);
+            const checkboxGroup4 = ref(["Chicago"]);
+            const cities = ["New York", "Washington", "Los Angeles", "Chicago"];
+
+            return {
+                checkboxGroup1,
+                checkboxGroup2,
+                checkboxGroup3,
+                checkboxGroup4,
+                cities,
+            };
+        },
+        template: `
 <div class="fb-checkbox-story-block">
 	<div class="fb-checkbox-story-block__item">
 		<fb-checkbox-group v-model="checkboxGroup1" size="${ComponentSizeTypes.LARGE}">
@@ -461,14 +461,14 @@ const cities = ['New York', 'Washington', 'Los Angeles', 'Chicago'];
 		</fb-checkbox-group>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Bordered: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<fb-checkbox v-model="checked1" label="Option1" size="${ComponentSizeTypes.LARGE}" border />
@@ -501,28 +501,28 @@ const checked3 = ref(false);
 const checked4 = ref(true);
 const checkboxGroup1 = ref(['Value1']);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCheckbox, FbCheckboxGroup },
-		setup: () => {
-			const checked1 = ref(true);
-			const checked2 = ref(false);
-			const checked3 = ref(false);
-			const checked4 = ref(true);
-			const checkboxGroup1 = ref(['Value1']);
-
-			return {
-				checked1,
-				checked2,
-				checked3,
-				checked4,
-				checkboxGroup1,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCheckbox, FbCheckboxGroup },
+        setup: () => {
+            const checked1 = ref(true);
+            const checked2 = ref(false);
+            const checked3 = ref(false);
+            const checked4 = ref(true);
+            const checkboxGroup1 = ref(["Value1"]);
+
+            return {
+                checked1,
+                checked2,
+                checked3,
+                checked4,
+                checkboxGroup1,
+            };
+        },
+        template: `
 <div class="fb-checkbox-story-block">
 	<div class="fb-checkbox-story-block__item">
 		<fb-checkbox v-model="checked1" label="Option1" size="${ComponentSizeTypes.LARGE}" border />
@@ -545,5 +545,5 @@ const checkboxGroup1 = ref(['Value1']);
 		</fb-checkbox-group>
 	</div>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/component-loading-error/fb-component-loading-error.stories.ts b/docs/src/components/component-loading-error/fb-component-loading-error.stories.ts
index e1437452..cec9a603 100644
--- a/docs/src/components/component-loading-error/fb-component-loading-error.stories.ts
+++ b/docs/src/components/component-loading-error/fb-component-loading-error.stories.ts
@@ -1,26 +1,26 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbComponentLoadingError } from '@fastybird/web-ui-components';
-import { ComponentSizeTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbComponentLoadingError } from "@fastybird/web-ui-components";
+import { ComponentSizeTypes } from "@fastybird/web-ui-constants";
 
 const meta: Meta<typeof FbComponentLoadingError> = {
-	component: FbComponentLoadingError,
-	title: 'Components/Feedback/Component loading error',
-	argTypes: {
-		size: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
-			description: 'loading result size',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: ComponentSizeTypes.DEFAULT },
-			},
-		},
-	},
-	args: {
-		size: ComponentSizeTypes.DEFAULT,
-	},
-	excludeStories: /.*Data$/,
+    component: FbComponentLoadingError,
+    title: "Components/Feedback/Component loading error",
+    argTypes: {
+        size: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
+            description: "loading result size",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: ComponentSizeTypes.DEFAULT },
+            },
+        },
+    },
+    args: {
+        size: ComponentSizeTypes.DEFAULT,
+    },
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -30,22 +30,22 @@ type Story = StoryObj<typeof FbComponentLoadingError>;
 export const Component: Story = {};
 
 export const Sizes: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-component-loading-error size="${ComponentSizeTypes.LARGE}" />
 	<fb-component-loading-error />
 	<fb-component-loading-error size="${ComponentSizeTypes.SMALL}" />
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbComponentLoadingError },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbComponentLoadingError },
+        template: `
 <div style="max-width: 600px;">
 	<div>
 		<fb-component-loading-error size="${ComponentSizeTypes.LARGE}" />
@@ -57,5 +57,5 @@ export const Sizes: Story = {
 		<fb-component-loading-error size="${ComponentSizeTypes.SMALL}" />
 	</div>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/component-loading/fb-component-loading.stories.ts b/docs/src/components/component-loading/fb-component-loading.stories.ts
index a43ca9ac..ee029c27 100644
--- a/docs/src/components/component-loading/fb-component-loading.stories.ts
+++ b/docs/src/components/component-loading/fb-component-loading.stories.ts
@@ -1,26 +1,26 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbComponentLoading } from '@fastybird/web-ui-components';
-import { ComponentSizeTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbComponentLoading } from "@fastybird/web-ui-components";
+import { ComponentSizeTypes } from "@fastybird/web-ui-constants";
 
 const meta: Meta<typeof FbComponentLoading> = {
-	component: FbComponentLoading,
-	title: 'Components/Feedback/Component loading',
-	argTypes: {
-		size: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
-			description: 'loading status size',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: ComponentSizeTypes.DEFAULT },
-			},
-		},
-	},
-	args: {
-		size: ComponentSizeTypes.DEFAULT,
-	},
-	excludeStories: /.*Data$/,
+    component: FbComponentLoading,
+    title: "Components/Feedback/Component loading",
+    argTypes: {
+        size: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
+            description: "loading status size",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: ComponentSizeTypes.DEFAULT },
+            },
+        },
+    },
+    args: {
+        size: ComponentSizeTypes.DEFAULT,
+    },
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -30,22 +30,22 @@ type Story = StoryObj<typeof FbComponentLoading>;
 export const Component: Story = {};
 
 export const Sizes: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-component-loading size="${ComponentSizeTypes.LARGE}" />
 	<fb-component-loading />
 	<fb-component-loading size="${ComponentSizeTypes.SMALL}" />
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbComponentLoading },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbComponentLoading },
+        template: `
 <div style="max-width: 600px;">
 	<div>
 		<fb-component-loading size="${ComponentSizeTypes.LARGE}" />
@@ -57,5 +57,5 @@ export const Sizes: Story = {
 		<fb-component-loading size="${ComponentSizeTypes.SMALL}" />
 	</div>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/divider/fb-divider.mdx b/docs/src/components/divider/fb-divider.mdx
index 176e5a52..fbddddff 100644
--- a/docs/src/components/divider/fb-divider.mdx
+++ b/docs/src/components/divider/fb-divider.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as DividerStories from './fb-divider.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as DividerStories from "./fb-divider.stories";
 
 <Meta of={DividerStories} />
 
diff --git a/docs/src/components/divider/fb-divider.stories.scss b/docs/src/components/divider/fb-divider.stories.scss
index 66cb85b4..9ee91761 100644
--- a/docs/src/components/divider/fb-divider.stories.scss
+++ b/docs/src/components/divider/fb-divider.stories.scss
@@ -1,6 +1,6 @@
 .fb-divider-story-block {
-	&--vertical {
-		display: flex;
-		flex-direction: row;
-	}
+    &--vertical {
+        display: flex;
+        flex-direction: row;
+    }
 }
diff --git a/docs/src/components/divider/fb-divider.stories.ts b/docs/src/components/divider/fb-divider.stories.ts
index e9a5f3a2..9650fccd 100644
--- a/docs/src/components/divider/fb-divider.stories.ts
+++ b/docs/src/components/divider/fb-divider.stories.ts
@@ -1,66 +1,66 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FasStar } from '@fastybird/web-ui-icons';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FasStar } from "@fastybird/web-ui-icons";
 import {
-	FbDivider,
-	FbIcon,
-	DividerDirectionTypes,
-	dividerDirections,
-	DividerContentPositionTypes,
-	dividerContentPositions,
-} from '@fastybird/web-ui-components';
+    FbDivider,
+    FbIcon,
+    DividerDirectionTypes,
+    dividerDirections,
+    DividerContentPositionTypes,
+    dividerContentPositions,
+} from "@fastybird/web-ui-components";
 
-import './fb-divider.stories.scss';
+import "./fb-divider.stories.scss";
 
 const meta: Meta<typeof FbDivider> = {
-	component: FbDivider,
-	title: 'Components/Layout/Divider',
-	argTypes: {
-		direction: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: dividerDirections,
-			description: "set divider's direction",
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: DividerDirectionTypes.HORIZONTAL },
-			},
-		},
-		borderStyle: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'set the style of divider',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: 'solid' },
-			},
-		},
-		contentPosition: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: dividerContentPositions,
-			description: 'the position of the customized content on the divider line',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: DividerContentPositionTypes.CENTER },
-			},
-		},
-		gradient: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'determine whether show divider with gradient effect',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-	},
-	args: {
-		direction: DividerDirectionTypes.HORIZONTAL,
-		borderStyle: 'solid',
-		contentPosition: DividerContentPositionTypes.CENTER,
-		gradient: false,
-	},
-	excludeStories: /.*Data$/,
+    component: FbDivider,
+    title: "Components/Layout/Divider",
+    argTypes: {
+        direction: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: dividerDirections,
+            description: "set divider's direction",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: DividerDirectionTypes.HORIZONTAL },
+            },
+        },
+        borderStyle: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "set the style of divider",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "solid" },
+            },
+        },
+        contentPosition: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: dividerContentPositions,
+            description: "the position of the customized content on the divider line",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: DividerContentPositionTypes.CENTER },
+            },
+        },
+        gradient: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "determine whether show divider with gradient effect",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+    },
+    args: {
+        direction: DividerDirectionTypes.HORIZONTAL,
+        borderStyle: "solid",
+        contentPosition: DividerContentPositionTypes.CENTER,
+        gradient: false,
+    },
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -68,10 +68,10 @@ export default meta;
 type Story = StoryObj<typeof FbDivider>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<span>
 		I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.
@@ -81,13 +81,13 @@ export const BasicUsage: Story = {
 		There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.
 	</span>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbDivider },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbDivider },
+        template: `
 <span>
 	I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.
 </span>
@@ -95,14 +95,14 @@ export const BasicUsage: Story = {
 <span>
 	There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.
 </span>`,
-	}),
+    }),
 };
 
 export const CustomContent: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<span>What you are you do not see, what you see is your shadow. </span>
 	<fb-divider content-position="${DividerContentPositionTypes.LEFT}">Rabindranath Tagore</fb-divider>
@@ -119,13 +119,13 @@ export const CustomContent: Story = {
 <script lang="ts" setup>
 import { FasStar } from '@fastybird/web-ui-icons';
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbDivider, FbIcon, FasStar },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbDivider, FbIcon, FasStar },
+        template: `
 <span>What you are you do not see, what you see is your shadow. </span>
 <fb-divider content-position="${DividerContentPositionTypes.LEFT}">Rabindranath Tagore</fb-divider>
 <span>
@@ -136,14 +136,14 @@ import { FasStar } from '@fastybird/web-ui-icons';
 </fb-divider>
 <span>I cannot choose the best. The best chooses me.</span>
 <fb-divider content-position="${DividerContentPositionTypes.RIGHT}">Rabindranath Tagore</fb-divider>`,
-	}),
+    }),
 };
 
 export const DashedLine: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<span>What language is thine, O sea?</span>
@@ -155,13 +155,13 @@ export const DashedLine: Story = {
 	<fb-divider border-style="double" />
 	<span>The language of eternal silence.</span>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbDivider },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbDivider },
+        template: `
 <div>
 	<span>What language is thine, O sea?</span>
 	<fb-divider border-style="dashed" />
@@ -171,14 +171,14 @@ export const DashedLine: Story = {
 <span>What language is thy answer, O sky?</span>
 <fb-divider border-style="double" />
 <span>The language of eternal silence.</span>`,
-	}),
+    }),
 };
 
 export const VerticalDivider: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div class="row">
 		<span>Rain</span>
@@ -195,13 +195,13 @@ export const VerticalDivider: Story = {
 	flex-direction: row;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbDivider },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbDivider },
+        template: `
 <div class="fb-divider-story-block--vertical">
 	<span>Rain</span>
 	<fb-divider direction="${DividerDirectionTypes.VERTICAL}" />
@@ -209,5 +209,5 @@ export const VerticalDivider: Story = {
 	<fb-divider direction="${DividerDirectionTypes.VERTICAL}" border-style="dashed" />
 	<span>Grass</span>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/drawer/fb-drawer.mdx b/docs/src/components/drawer/fb-drawer.mdx
index 916c9987..81e7458b 100644
--- a/docs/src/components/drawer/fb-drawer.mdx
+++ b/docs/src/components/drawer/fb-drawer.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as DrawerStories from './fb-drawer.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as DrawerStories from "./fb-drawer.stories";
 
 <Meta of={DrawerStories} />
 
diff --git a/docs/src/components/drawer/fb-drawer.stories.scss b/docs/src/components/drawer/fb-drawer.stories.scss
index 94c05952..14bad12e 100644
--- a/docs/src/components/drawer/fb-drawer.stories.scss
+++ b/docs/src/components/drawer/fb-drawer.stories.scss
@@ -1,21 +1,21 @@
 .fb-drawer-story-block {
-	.fb-drawer-story-block__item {
-		margin-bottom: 20px;
-	}
+    .fb-drawer-story-block__item {
+        margin-bottom: 20px;
+    }
 
-	.fb-drawer-story-block__item:last-child {
-		margin-bottom: 0;
-	}
+    .fb-drawer-story-block__item:last-child {
+        margin-bottom: 0;
+    }
 
-	.fb-drawer-story-block__basic-usage-button {
-		margin-left: 16px;
-	}
+    .fb-drawer-story-block__basic-usage-button {
+        margin-left: 16px;
+    }
 
-	.fb-drawer-story-block__custom-drawer-header {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		gap: 16px;
-		padding: 10px;
-	}
+    .fb-drawer-story-block__custom-drawer-header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 16px;
+        padding: 10px;
+    }
 }
diff --git a/docs/src/components/drawer/fb-drawer.stories.ts b/docs/src/components/drawer/fb-drawer.stories.ts
index 9993cbf4..4ad6290f 100644
--- a/docs/src/components/drawer/fb-drawer.stories.ts
+++ b/docs/src/components/drawer/fb-drawer.stories.ts
@@ -1,29 +1,29 @@
-import { Meta, StoryObj } from '@storybook/vue3';
+import { Meta, StoryObj } from "@storybook/vue3";
 import {
-	FbDrawer,
-	FbButton,
-	FbRadio,
-	FbRadioGroup,
-	FbForm,
-	FbFormItem,
-	FbInput,
-	FbSelect,
-	FbOption,
-	FbIcon,
-	FbMessageBox,
-	MessageBoxAction,
-	MessageBoxActionTypes,
-} from '@fastybird/web-ui-components';
-import { VariantTypes } from '@fastybird/web-ui-constants';
-import { FasCircleXmark, FasImage, FasKeyboard } from '@fastybird/web-ui-icons';
-
-import './fb-drawer.stories.scss';
-import { reactive, ref } from 'vue';
+    FbDrawer,
+    FbButton,
+    FbRadio,
+    FbRadioGroup,
+    FbForm,
+    FbFormItem,
+    FbInput,
+    FbSelect,
+    FbOption,
+    FbIcon,
+    FbMessageBox,
+    MessageBoxAction,
+    MessageBoxActionTypes,
+} from "@fastybird/web-ui-components";
+import { VariantTypes } from "@fastybird/web-ui-constants";
+import { FasCircleXmark, FasImage, FasKeyboard } from "@fastybird/web-ui-icons";
+
+import "./fb-drawer.stories.scss";
+import { reactive, ref } from "vue";
 
 const meta: Meta<typeof FbDrawer> = {
-	component: FbDrawer,
-	title: 'Components/Feedback/Drawer',
-	excludeStories: /.*Data$/,
+    component: FbDrawer,
+    title: "Components/Feedback/Drawer",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -31,10 +31,10 @@ export default meta;
 type Story = StoryObj<typeof FbDrawer>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-radio-group v-model="direction">
 		<fb-radio value="ltr">left to right</fb-radio>
@@ -114,49 +114,49 @@ const confirmClick = () => {
 	});
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbDrawer, FbButton, FbRadio, FbRadioGroup },
-		setup: () => {
-			const drawer1 = ref(false);
-			const drawer2 = ref(false);
-			const direction = ref('rtl');
-			const radio1 = ref('Option 1');
-
-			const handleClose = (done: () => void) => {
-				FbMessageBox.confirm('Are you sure you want to close this?', {
-					onAction: () => {
-						done();
-					},
-				});
-			};
-
-			const cancelClick = (): void => {
-				drawer2.value = false;
-			};
-
-			const confirmClick = (): void => {
-				FbMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`, {
-					onAction: () => {
-						drawer2.value = false;
-					},
-				});
-			};
-
-			return {
-				drawer1,
-				drawer2,
-				direction,
-				radio1,
-				handleClose,
-				cancelClick,
-				confirmClick,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbDrawer, FbButton, FbRadio, FbRadioGroup },
+        setup: () => {
+            const drawer1 = ref(false);
+            const drawer2 = ref(false);
+            const direction = ref("rtl");
+            const radio1 = ref("Option 1");
+
+            const handleClose = (done: () => void) => {
+                FbMessageBox.confirm("Are you sure you want to close this?", {
+                    onAction: () => {
+                        done();
+                    },
+                });
+            };
+
+            const cancelClick = (): void => {
+                drawer2.value = false;
+            };
+
+            const confirmClick = (): void => {
+                FbMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`, {
+                    onAction: () => {
+                        drawer2.value = false;
+                    },
+                });
+            };
+
+            return {
+                drawer1,
+                drawer2,
+                direction,
+                radio1,
+                handleClose,
+                cancelClick,
+                confirmClick,
+            };
+        },
+        template: `
 <div class="fb-drawer-story-block">
 	<div class="fb-drawer-story-block__item">
 		<fb-radio-group v-model="direction">
@@ -208,14 +208,14 @@ const confirmClick = () => {
 		</fb-drawer>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const NoTitle: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button @click="drawer = true">
 		Open drawer without header
@@ -231,20 +231,20 @@ import { ref } from 'vue';
 
 const drawer = ref(false);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbDrawer, FbButton },
-		setup: () => {
-			const drawer = ref(false);
-
-			return {
-				drawer,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbDrawer, FbButton },
+        setup: () => {
+            const drawer = ref(false);
+
+            return {
+                drawer,
+            };
+        },
+        template: `
 <div class="fb-drawer-story-block">
 	<div class="fb-drawer-story-block__item">
 		<fb-button @click="drawer = true">
@@ -256,14 +256,14 @@ const drawer = ref(false);
 		</fb-drawer>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const CustomizedContent: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button @click="dialog = true">
 		Open drawer with form
@@ -366,80 +366,80 @@ const cancelForm = () => {
 	clearTimeout(timer);
 };
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbDrawer, FbButton, FbForm, FbFormItem, FbInput, FbSelect, FbOption, FasKeyboard },
-		setup: () => {
-			const formLabelWidth = '80px';
-
-			let timer;
-
-			const dialog = ref(false);
-			const loading = ref(false);
-
-			const form = reactive({
-				name: '',
-				region: '',
-				date1: '',
-				date2: '',
-				delivery: false,
-				type: [],
-				resource: '',
-				desc: '',
-			});
-
-			const drawerRef = ref<InstanceType<typeof FbDrawer>>();
-
-			const onClick = () => {
-				drawerRef.value!.handleClose();
-			};
-
-			const handleClose = (done) => {
-				if (loading.value) {
-					return;
-				}
-
-				FbMessageBox.confirm('Do you want to submit?', {
-					onAction: (action: MessageBoxAction) => {
-						if (action === MessageBoxActionTypes.CONFIRM) {
-							loading.value = true;
-
-							timer = setTimeout(() => {
-								done();
-								setTimeout(() => {
-									loading.value = false;
-								}, 400);
-							}, 2000);
-						} else {
-							done();
-						}
-					},
-				});
-			};
-
-			const cancelForm = () => {
-				loading.value = false;
-				dialog.value = false;
-
-				clearTimeout(timer);
-			};
-
-			return {
-				formLabelWidth,
-				dialog,
-				loading,
-				form,
-				drawerRef,
-				onClick,
-				handleClose,
-				cancelForm,
-				FasKeyboard,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbDrawer, FbButton, FbForm, FbFormItem, FbInput, FbSelect, FbOption, FasKeyboard },
+        setup: () => {
+            const formLabelWidth = "80px";
+
+            let timer;
+
+            const dialog = ref(false);
+            const loading = ref(false);
+
+            const form = reactive({
+                name: "",
+                region: "",
+                date1: "",
+                date2: "",
+                delivery: false,
+                type: [],
+                resource: "",
+                desc: "",
+            });
+
+            const drawerRef = ref<InstanceType<typeof FbDrawer>>();
+
+            const onClick = () => {
+                drawerRef.value!.handleClose();
+            };
+
+            const handleClose = (done) => {
+                if (loading.value) {
+                    return;
+                }
+
+                FbMessageBox.confirm("Do you want to submit?", {
+                    onAction: (action: MessageBoxAction) => {
+                        if (action === MessageBoxActionTypes.CONFIRM) {
+                            loading.value = true;
+
+                            timer = setTimeout(() => {
+                                done();
+                                setTimeout(() => {
+                                    loading.value = false;
+                                }, 400);
+                            }, 2000);
+                        } else {
+                            done();
+                        }
+                    },
+                });
+            };
+
+            const cancelForm = () => {
+                loading.value = false;
+                dialog.value = false;
+
+                clearTimeout(timer);
+            };
+
+            return {
+                formLabelWidth,
+                dialog,
+                loading,
+                form,
+                drawerRef,
+                onClick,
+                handleClose,
+                cancelForm,
+                FasKeyboard,
+            };
+        },
+        template: `
 <div class="fb-drawer-story-block">
 	<div class="fb-drawer-story-block__item">
 		<fb-button @click="dialog = true">
@@ -484,14 +484,14 @@ const cancelForm = () => {
 		</fb-drawer>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const CustomizedHeader: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button @click="visible = true">
 		Open drawer with customized header
@@ -527,21 +527,21 @@ const visible = ref(false);
 	padding: 10px;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbDrawer, FbButton, FbIcon, FasCircleXmark },
-		setup: () => {
-			const visible = ref(false);
-
-			return {
-				visible,
-				FasCircleXmark,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbDrawer, FbButton, FbIcon, FasCircleXmark },
+        setup: () => {
+            const visible = ref(false);
+
+            return {
+                visible,
+                FasCircleXmark,
+            };
+        },
+        template: `
 <div class="fb-drawer-story-block">
 	<div class="fb-drawer-story-block__item">
 		<fb-button @click="visible = true">
@@ -563,14 +563,14 @@ const visible = ref(false);
 		</fb-drawer>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const NestedDrawer: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button @click="drawer = true">
 		Open nested drawers
@@ -607,31 +607,31 @@ const handleClose = (done: () => void) => {
 	});
 };
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbDrawer, FbButton },
-		setup: () => {
-			const drawer = ref(false);
-			const innerDrawer = ref(false);
-
-			const handleClose = (done: () => void) => {
-				FbMessageBox.confirm('You still have unsaved data, proceed?', {
-					onAction: () => {
-						done();
-					},
-				});
-			};
-
-			return {
-				drawer,
-				innerDrawer,
-				handleClose,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbDrawer, FbButton },
+        setup: () => {
+            const drawer = ref(false);
+            const innerDrawer = ref(false);
+
+            const handleClose = (done: () => void) => {
+                FbMessageBox.confirm("You still have unsaved data, proceed?", {
+                    onAction: () => {
+                        done();
+                    },
+                });
+            };
+
+            return {
+                drawer,
+                innerDrawer,
+                handleClose,
+            };
+        },
+        template: `
 <div class="fb-drawer-story-block">
 	<div class="fb-drawer-story-block__item">
 		<fb-button @click="drawer = true">
@@ -654,14 +654,14 @@ const handleClose = (done: () => void) => {
 		</fb-drawer>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const WithDescription: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button @click="drawer = true">
 		Open nested drawers
@@ -699,32 +699,32 @@ const handleClose = (done: () => void) => {
 	});
 };
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbDrawer, FbButton, FasImage },
-		setup: () => {
-			const drawer = ref(false);
-			const innerDrawer = ref(false);
-
-			const handleClose = (done: () => void) => {
-				FbMessageBox.confirm('You still have unsaved data, proceed?', {
-					onAction: () => {
-						done();
-					},
-				});
-			};
-
-			return {
-				drawer,
-				innerDrawer,
-				handleClose,
-				FasImage,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbDrawer, FbButton, FasImage },
+        setup: () => {
+            const drawer = ref(false);
+            const innerDrawer = ref(false);
+
+            const handleClose = (done: () => void) => {
+                FbMessageBox.confirm("You still have unsaved data, proceed?", {
+                    onAction: () => {
+                        done();
+                    },
+                });
+            };
+
+            return {
+                drawer,
+                innerDrawer,
+                handleClose,
+                FasImage,
+            };
+        },
+        template: `
 <div class="fb-drawer-story-block">
 	<div class="fb-drawer-story-block__item">
 		<fb-button @click="drawer = true">
@@ -747,5 +747,5 @@ const handleClose = (done: () => void) => {
 		</fb-drawer>
 	</div>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/icon-with-child/fb-icon-with-child.mdx b/docs/src/components/icon-with-child/fb-icon-with-child.mdx
index d6f93612..d17671a0 100644
--- a/docs/src/components/icon-with-child/fb-icon-with-child.mdx
+++ b/docs/src/components/icon-with-child/fb-icon-with-child.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as IconWithChildStories from './fb-icon-with-child.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as IconWithChildStories from "./fb-icon-with-child.stories";
 
 <Meta of={IconWithChildStories} />
 
diff --git a/docs/src/components/icon-with-child/fb-icon-with-child.stories.scss b/docs/src/components/icon-with-child/fb-icon-with-child.stories.scss
index b7ac9e94..ce9b6b16 100644
--- a/docs/src/components/icon-with-child/fb-icon-with-child.stories.scss
+++ b/docs/src/components/icon-with-child/fb-icon-with-child.stories.scss
@@ -1,16 +1,16 @@
 .fb-icon-with-child-story-block {
-	display: flex;
-	align-items: center;
+    display: flex;
+    align-items: center;
 
-	.fb-icon-with-child-story-block__item {
-		margin-right: 20px;
-	}
+    .fb-icon-with-child-story-block__item {
+        margin-right: 20px;
+    }
 
-	.fb-icon-with-child-story-block__item:last-child {
-		margin-right: 0;
-	}
+    .fb-icon-with-child-story-block__item:last-child {
+        margin-right: 0;
+    }
 
-	.icon-color {
-		color: var(--fb-color-default);
-	}
+    .icon-color {
+        color: var(--fb-color-default);
+    }
 }
diff --git a/docs/src/components/icon-with-child/fb-icon-with-child.stories.ts b/docs/src/components/icon-with-child/fb-icon-with-child.stories.ts
index 4a059a9d..67adb2ee 100644
--- a/docs/src/components/icon-with-child/fb-icon-with-child.stories.ts
+++ b/docs/src/components/icon-with-child/fb-icon-with-child.stories.ts
@@ -1,47 +1,47 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FasBell, FasEnvelope } from '@fastybird/web-ui-icons';
-import { FbIconWithChild } from '@fastybird/web-ui-components';
-import { VariantTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FasBell, FasEnvelope } from "@fastybird/web-ui-icons";
+import { FbIconWithChild } from "@fastybird/web-ui-components";
+import { VariantTypes } from "@fastybird/web-ui-constants";
 
-import './fb-icon-with-child.stories.scss';
+import "./fb-icon-with-child.stories.scss";
 
 const meta: Meta<typeof FbIconWithChild> = {
-	component: FbIconWithChild,
-	title: 'Components/Basic/Icon with child',
-	argTypes: {
-		variant: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
-			description: 'child icon variant',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: VariantTypes.DEFAULT },
-			},
-		},
-		size: {
-			type: { name: 'number', required: false },
-			control: { type: 'text' },
-			description: 'main icon size',
-			table: {
-				type: { summary: 'number' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		color: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'main icon color',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-	},
-	args: {
-		variant: VariantTypes.DEFAULT,
-	},
-	excludeStories: /.*Data$/,
+    component: FbIconWithChild,
+    title: "Components/Basic/Icon with child",
+    argTypes: {
+        variant: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
+            description: "child icon variant",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: VariantTypes.DEFAULT },
+            },
+        },
+        size: {
+            type: { name: "number", required: false },
+            control: { type: "text" },
+            description: "main icon size",
+            table: {
+                type: { summary: "number" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        color: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "main icon color",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+    },
+    args: {
+        variant: VariantTypes.DEFAULT,
+    },
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -49,10 +49,10 @@ export default meta;
 type Story = StoryObj<typeof FbIconWithChild>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-icon-with-child :size="50">
 		<template #icon><fas-envelope class="icon" /></template>
@@ -85,13 +85,13 @@ export const BasicUsage: Story = {
 	color: var(--fb-color-default-light-5);
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbIconWithChild, FasBell, FasEnvelope },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbIconWithChild, FasBell, FasEnvelope },
+        template: `
 <div class="fb-icon-with-child-story-block">
 	<div class="fb-icon-with-child-story-block__item">
 		<fb-icon-with-child :size="50">
@@ -130,14 +130,14 @@ export const BasicUsage: Story = {
 		</fb-icon-with-child>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Sizes: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-icon-with-child :size="80" variant="${VariantTypes.PRIMARY}">
 		<template #icon><fas-envelope class="icon" /></template>
@@ -166,13 +166,13 @@ export const Sizes: Story = {
 	color: var(--fb-color-default-light-5);
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbIconWithChild, FasBell, FasEnvelope },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbIconWithChild, FasBell, FasEnvelope },
+        template: `
 <div class="fb-icon-with-child-story-block">
 	<div class="fb-icon-with-child-story-block__item">
 		<fb-icon-with-child :size="80" variant="${VariantTypes.PRIMARY}">
@@ -205,5 +205,5 @@ export const Sizes: Story = {
 		</fb-icon-with-child>
 	</div>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/input-number/fb-input-number.mdx b/docs/src/components/input-number/fb-input-number.mdx
index 680b6cca..f9709044 100644
--- a/docs/src/components/input-number/fb-input-number.mdx
+++ b/docs/src/components/input-number/fb-input-number.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as InputNumberStories from './fb-input-number.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as InputNumberStories from "./fb-input-number.stories";
 
 <Meta of={InputNumberStories} />
 
@@ -13,38 +13,26 @@ the minimum and maximum values allowed for input, enabling users to specify valu
 > **TIP:**
 > If an invalid string is entered into the input box, the input value will emit `NaN` to the upper layer as a result of the error.
 
-<Canvas
-	withToolbar={true}
-	of={InputNumberStories.BasicUsage}
-/>
+<Canvas withToolbar={true} of={InputNumberStories.BasicUsage} />
 
 ## Disabled
 
 The `disabled` property accepts a `boolean`. If set to `true`, the component is disabled. To control the value within a range, you can use the `min`
 property to set the minimum value and `max` to set the maximum value. By default, the minimum value is `0`.
 
-<Canvas
-	withToolbar={true}
-	of={InputNumberStories.Disabled}
-/>
+<Canvas withToolbar={true} of={InputNumberStories.Disabled} />
 
 ## Steps
 
 You can define incremental steps by adding the `step` property and setting the desired step value.
 
-<Canvas
-	withToolbar={true}
-	of={InputNumberStories.Steps}
-/>
+<Canvas withToolbar={true} of={InputNumberStories.Steps} />
 
 ## Step Strictly
 
 The `step-strictly` property accepts a boolean value. When set to true, the input value can only be a multiple of the step value.
 
-<Canvas
-	withToolbar={true}
-	of={InputNumberStories.StrictlyStep}
-/>
+<Canvas withToolbar={true} of={InputNumberStories.StrictlyStep} />
 
 ## Precision
 
@@ -53,28 +41,19 @@ The `precision` property allows you to specify the precision of the input value.
 > **TIP:**
 > The value of precision must be a non-negative integer and should not be less than the number of decimal places in the step.
 
-<Canvas
-	withToolbar={true}
-	of={InputNumberStories.Precision}
-/>
+<Canvas withToolbar={true} of={InputNumberStories.Precision} />
 
 ## Size
 
 You can use the `size` property to adjust the size of the input field. Possible values include `large` or `small`.
 
-<Canvas
-	withToolbar={true}
-	of={InputNumberStories.Size}
-/>
+<Canvas withToolbar={true} of={InputNumberStories.Size} />
 
 ## Controls Position
 
 You can specify the position of control buttons using the `controls-position` property.
 
-<Canvas
-	withToolbar={true}
-	of={InputNumberStories.ControlsPosition}
-/>
+<Canvas withToolbar={true} of={InputNumberStories.ControlsPosition} />
 
 ---
 
diff --git a/docs/src/components/input-number/fb-input-number.stories.scss b/docs/src/components/input-number/fb-input-number.stories.scss
index 8f70c340..db61f1d3 100644
--- a/docs/src/components/input-number/fb-input-number.stories.scss
+++ b/docs/src/components/input-number/fb-input-number.stories.scss
@@ -1,5 +1,5 @@
 .fb-input-number-story-block {
-	display: flex;
-	gap: 20px;
-	align-items: baseline;
+    display: flex;
+    gap: 20px;
+    align-items: baseline;
 }
diff --git a/docs/src/components/input-number/fb-input-number.stories.ts b/docs/src/components/input-number/fb-input-number.stories.ts
index c08b2dad..ccc00a03 100644
--- a/docs/src/components/input-number/fb-input-number.stories.ts
+++ b/docs/src/components/input-number/fb-input-number.stories.ts
@@ -1,15 +1,15 @@
-import { ref } from 'vue';
+import { ref } from "vue";
 
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbInputNumber, InputNumberControlPositionTypes } from '@fastybird/web-ui-components';
-import { ComponentSizeTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbInputNumber, InputNumberControlPositionTypes } from "@fastybird/web-ui-components";
+import { ComponentSizeTypes } from "@fastybird/web-ui-constants";
 
-import './fb-input-number.stories.scss';
+import "./fb-input-number.stories.scss";
 
 const meta: Meta<typeof FbInputNumber> = {
-	component: FbInputNumber,
-	title: 'Components/Form/Input number',
-	excludeStories: /.*Data$/,
+    component: FbInputNumber,
+    title: "Components/Form/Input number",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -17,10 +17,10 @@ export default meta;
 type Story = StoryObj<typeof FbInputNumber>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
 </template>
@@ -34,33 +34,33 @@ const handleChange = (value: number) => {
 	console.log(value);
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInputNumber },
-		setup: () => {
-			const num = ref(1);
-
-			const handleChange = (value: number): void => {
-				console.log(value);
-			};
-
-			return {
-				num,
-				handleChange,
-			};
-		},
-		template: `<fb-input-number v-model="num" :min="1" :max="10" @change="handleChange" />`,
-	}),
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInputNumber },
+        setup: () => {
+            const num = ref(1);
+
+            const handleChange = (value: number): void => {
+                console.log(value);
+            };
+
+            return {
+                num,
+                handleChange,
+            };
+        },
+        template: `<fb-input-number v-model="num" :min="1" :max="10" @change="handleChange" />`,
+    }),
 };
 
 export const Disabled: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-input-number v-model="num" :disabled="true" />
 </template>
@@ -70,28 +70,28 @@ import { ref } from 'vue';
 
 const num = ref(1);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInputNumber },
-		setup: () => {
-			const num = ref(1);
-
-			return {
-				num,
-			};
-		},
-		template: `<fb-input-number v-model="num" :disabled="true" />`,
-	}),
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInputNumber },
+        setup: () => {
+            const num = ref(1);
+
+            return {
+                num,
+            };
+        },
+        template: `<fb-input-number v-model="num" :disabled="true" />`,
+    }),
 };
 
 export const Steps: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-input-number v-model="num" :step="2" />
 </template>
@@ -101,28 +101,28 @@ import { ref } from 'vue';
 
 const num = ref(5);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInputNumber },
-		setup: () => {
-			const num = ref(5);
-
-			return {
-				num,
-			};
-		},
-		template: `<fb-input-number v-model="num" :step="2" />`,
-	}),
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInputNumber },
+        setup: () => {
+            const num = ref(5);
+
+            return {
+                num,
+            };
+        },
+        template: `<fb-input-number v-model="num" :step="2" />`,
+    }),
 };
 
 export const StrictlyStep: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-input-number v-model="num" :step="2" step-strictly />
 </template>
@@ -132,28 +132,28 @@ import { ref } from 'vue';
 
 const num = ref(2);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInputNumber },
-		setup: () => {
-			const num = ref(2);
-
-			return {
-				num,
-			};
-		},
-		template: `<fb-input-number v-model="num" :step="2" step-strictly />`,
-	}),
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInputNumber },
+        setup: () => {
+            const num = ref(2);
+
+            return {
+                num,
+            };
+        },
+        template: `<fb-input-number v-model="num" :step="2" step-strictly />`,
+    }),
 };
 
 export const Precision: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-input-number v-model="num" :precision="2" :step="0.1" :max="10" />
 </template>
@@ -163,28 +163,28 @@ import { ref } from 'vue';
 
 const num = ref(1);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInputNumber },
-		setup: () => {
-			const num = ref(1);
-
-			return {
-				num,
-			};
-		},
-		template: `<fb-input-number v-model="num" :precision="2" :step="0.1" :max="10" />`,
-	}),
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInputNumber },
+        setup: () => {
+            const num = ref(1);
+
+            return {
+                num,
+            };
+        },
+        template: `<fb-input-number v-model="num" :precision="2" :step="0.1" :max="10" />`,
+    }),
 };
 
 export const Size: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-input-number v-model="num1" size="${ComponentSizeTypes.LARGE}" />
 	<fb-input-number v-model="num2" />
@@ -198,37 +198,37 @@ const num1 = ref(1);
 const num2 = ref(2);
 const num3 = ref(3);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInputNumber },
-		setup: () => {
-			const num1 = ref(1);
-			const num2 = ref(2);
-			const num3 = ref(3);
-
-			return {
-				num1,
-				num2,
-				num3,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInputNumber },
+        setup: () => {
+            const num1 = ref(1);
+            const num2 = ref(2);
+            const num3 = ref(3);
+
+            return {
+                num1,
+                num2,
+                num3,
+            };
+        },
+        template: `
 <div class="fb-input-number-story-block">
 	<fb-input-number v-model="num1" size="${ComponentSizeTypes.LARGE}" />
 	<fb-input-number v-model="num2" />
 	<fb-input-number v-model="num3" size="${ComponentSizeTypes.SMALL}" />
 </div>`,
-	}),
+    }),
 };
 
 export const ControlsPosition: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-input-number
 		v-model="num"
@@ -264,25 +264,25 @@ const handleChange = (value: number) => {
 	console.log(value);
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInputNumber },
-		setup: () => {
-			const num = ref(1);
-
-			const handleChange = (value: number) => {
-				console.log(value);
-			};
-
-			return {
-				num,
-				handleChange,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInputNumber },
+        setup: () => {
+            const num = ref(1);
+
+            const handleChange = (value: number) => {
+                console.log(value);
+            };
+
+            return {
+                num,
+                handleChange,
+            };
+        },
+        template: `
 <div class="fb-input-number-story-block">
 	<fb-input-number
 		v-model="num"
@@ -308,5 +308,5 @@ const handleChange = (value: number) => {
 		@change="handleChange"
 	/>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/input/fb-input.mdx b/docs/src/components/input/fb-input.mdx
index 5605a3dd..2fcfcd2b 100644
--- a/docs/src/components/input/fb-input.mdx
+++ b/docs/src/components/input/fb-input.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as InputStories from './fb-input.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as InputStories from "./fb-input.stories";
 
 <Meta of={InputStories} />
 
@@ -13,97 +13,67 @@ Enter data using either mouse or keyboard inputs.
 
 ## Basic usage
 
-<Canvas
-	withToolbar={true}
-	of={InputStories.BasicUsage}
-/>
+<Canvas withToolbar={true} of={InputStories.BasicUsage} />
 
 ## Disabled
 
 To disable the Input, simply set the `disabled` property to `true`. This will prevent users from interacting with the input field.
 
-<Canvas
-	withToolbar={true}
-	of={InputStories.Disabled}
-/>
+<Canvas withToolbar={true} of={InputStories.Disabled} />
 
 ## Clearable
 
 You can make the Input clearable by setting the `clearable` property to `true`. This adds a clear icon to the input field, allowing users to easily
 clear the input value with a click.
 
-<Canvas
-	withToolbar={true}
-	of={InputStories.Clearable}
-/>
+<Canvas withToolbar={true} of={InputStories.Clearable} />
 
 ## Formatter
 
 You can customize the display value of the Input component using the `formatter` property. Additionally, you can define a `parser` function to parse
 the user input value into the desired format. This combination allows you to control both the displayed value and the parsed value of the Input component.
 
-<Canvas
-	withToolbar={true}
-	of={InputStories.Formatter}
-/>
+<Canvas withToolbar={true} of={InputStories.Formatter} />
 
 ## Password Box
 
 You can create a toggle-able password Input by using the `show-password` property. When this property is set to `true`, the Input will display the password
 in plain text, allowing users to view the entered text.
 
-<Canvas
-	withToolbar={true}
-	of={InputStories.Password}
-/>
+<Canvas withToolbar={true} of={InputStories.Password} />
 
 ## Input With Icon
 
 To indicate the input type with an icon, you can utilize the `prefix-icon` and `suffix-icon` properties. Additionally, you can use the `prefix` and `suffix`
 named slots to achieve the same effect.
 
-<Canvas
-	withToolbar={true}
-	of={InputStories.WithIcon}
-/>
+<Canvas withToolbar={true} of={InputStories.WithIcon} />
 
 ## Textarea
 
 To enable users to input multiple lines of text, you can set the `type` attribute to "textarea" and control the height using the `rows` property. This makes
 the input resizable for entering larger amounts of text.
 
-<Canvas
-	withToolbar={true}
-	of={InputStories.Textarea}
-/>
+<Canvas withToolbar={true} of={InputStories.Textarea} />
 
 ## Autosize Textarea
 
 When using a textarea type of Input, you can set the `autosize` property to automatically adjust the height based on the content. You can provide an options
 object to `autosize` to specify the minimum and maximum number of lines the textarea can automatically adjust to.
 
-<Canvas
-	withToolbar={true}
-	of={InputStories.AutosizeTextarea}
-/>
+<Canvas withToolbar={true} of={InputStories.AutosizeTextarea} />
 
 ## Mixed Input
 
 You can use slots to distribute elements that you want to prepend or append to the Input component.
 
-<Canvas
-	withToolbar={true}
-	of={InputStories.Mixed}
-/>
+<Canvas withToolbar={true} of={InputStories.Mixed} />
 
 ## Sizes
 
 You can use the `size` property to adjust the size of the Input component. It supports three options: `default`, `large`, and `small`.
 
-<Canvas
-	withToolbar={true}
-	of={InputStories.Sizes}
-/>
+<Canvas withToolbar={true} of={InputStories.Sizes} />
 
 ## Limit Length
 
@@ -111,10 +81,7 @@ The `maxlength` and `minlength` properties of the input allow you to set limits
 for a text or textarea type of Input, it restricts the length of the input value. Additionally, you can display the word count by setting the `show-word-limit`
 property to true. The "number of characters" is measured using JavaScript string length.
 
-<Canvas
-	withToolbar={true}
-	of={InputStories.LimitLength}
-/>
+<Canvas withToolbar={true} of={InputStories.LimitLength} />
 
 ---
 
diff --git a/docs/src/components/input/fb-input.stories.scss b/docs/src/components/input/fb-input.stories.scss
index 71960b84..85b64bcb 100644
--- a/docs/src/components/input/fb-input.stories.scss
+++ b/docs/src/components/input/fb-input.stories.scss
@@ -1,38 +1,38 @@
 .fb-input-story-block {
-	.fb-input-story-block__item {
-		margin-bottom: 20px;
-	}
+    .fb-input-story-block__item {
+        margin-bottom: 20px;
+    }
 
-	.fb-input-story-block__item:last-child {
-		margin-bottom: 0;
-	}
+    .fb-input-story-block__item:last-child {
+        margin-bottom: 0;
+    }
 
-	.fb-input-story-block__form-row {
-		display: flex;
-		gap: 20px;
-		align-items: baseline;
-		margin-bottom: 20px;
+    .fb-input-story-block__form-row {
+        display: flex;
+        gap: 20px;
+        align-items: baseline;
+        margin-bottom: 20px;
 
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
 
-	.fb-input-story-block__divider {
-		margin: 20px 0;
-	}
+    .fb-input-story-block__divider {
+        margin: 20px 0;
+    }
 
-	.fb-input,
-	.fb-textarea {
-		width: 240px;
-	}
+    .fb-input,
+    .fb-textarea {
+        width: 240px;
+    }
 
-	.fb-select {
-		width: 115px;
-	}
+    .fb-select {
+        width: 115px;
+    }
 
-	.fb-input.large-input,
-	.fb-textarea.large-input {
-		width: 600px;
-	}
+    .fb-input.large-input,
+    .fb-textarea.large-input {
+        width: 600px;
+    }
 }
diff --git a/docs/src/components/input/fb-input.stories.ts b/docs/src/components/input/fb-input.stories.ts
index 60e6a7eb..5314cfe1 100644
--- a/docs/src/components/input/fb-input.stories.ts
+++ b/docs/src/components/input/fb-input.stories.ts
@@ -1,15 +1,15 @@
-import { ref } from 'vue';
+import { ref } from "vue";
 
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbInput, FbSelect, FbOption, FbIcon, FbButton } from '@fastybird/web-ui-components';
-import { FasCalendar, FasMagnifyingGlass } from '@fastybird/web-ui-icons';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbInput, FbSelect, FbOption, FbIcon, FbButton } from "@fastybird/web-ui-components";
+import { FasCalendar, FasMagnifyingGlass } from "@fastybird/web-ui-icons";
 
-import './fb-input.stories.scss';
+import "./fb-input.stories.scss";
 
 const meta: Meta<typeof FbInput> = {
-	component: FbInput,
-	title: 'Components/Form/Input',
-	excludeStories: /.*Data$/,
+    component: FbInput,
+    title: "Components/Form/Input",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -17,10 +17,10 @@ export default meta;
 type Story = StoryObj<typeof FbInput>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-input v-model="input" placeholder="Please input" />
 </template>
@@ -30,31 +30,31 @@ import { ref } from 'vue';
 
 const input = ref('');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInput },
-		setup: () => {
-			const input = ref('');
-
-			return {
-				input,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInput },
+        setup: () => {
+            const input = ref("");
+
+            return {
+                input,
+            };
+        },
+        template: `
 <div class="fb-input-story-block">
 	<fb-input v-model="input" placeholder="Please input" />
 </div>`,
-	}),
+    }),
 };
 
 export const Disabled: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-input v-model="input" disabled placeholder="Please input" />
 </template>
@@ -64,31 +64,31 @@ import { ref } from 'vue';
 
 const input = ref('');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInput },
-		setup: () => {
-			const input = ref('');
-
-			return {
-				input,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInput },
+        setup: () => {
+            const input = ref("");
+
+            return {
+                input,
+            };
+        },
+        template: `
 <div class="fb-input-story-block">
 	<fb-input v-model="input" disabled placeholder="Please input" />
 </div>`,
-	}),
+    }),
 };
 
 export const Clearable: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-input v-model="input" placeholder="Please input" clearable />
 </template>
@@ -98,31 +98,31 @@ import { ref } from 'vue';
 
 const input = ref('');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInput },
-		setup: () => {
-			const input = ref('');
-
-			return {
-				input,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInput },
+        setup: () => {
+            const input = ref("");
+
+            return {
+                input,
+            };
+        },
+        template: `
 <div class="fb-input-story-block">
 	<fb-input v-model="input" placeholder="Please input" clearable />
 </div>`,
-	}),
+    }),
 };
 
 export const Formatter: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-input
 		v-model="input"
@@ -137,20 +137,20 @@ import { ref } from 'vue';
 
 const input = ref('');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInput },
-		setup: () => {
-			const input = ref('');
-
-			return {
-				input,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInput },
+        setup: () => {
+            const input = ref("");
+
+            return {
+                input,
+            };
+        },
+        template: `
 <div class="fb-input-story-block">
 	<fb-input
 		v-model="input"
@@ -159,14 +159,14 @@ const input = ref('');
 		:parser="(value) => value.replace(/\\$\\s?|(,*)/g, '')"
 	/>
 </div>`,
-	}),
+    }),
 };
 
 export const Password: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-input v-model="input" type="password" placeholder="Please input password" show-password />
 </template>
@@ -176,31 +176,31 @@ import { ref } from 'vue';
 
 const input = ref('');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInput },
-		setup: () => {
-			const input = ref('');
-
-			return {
-				input,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInput },
+        setup: () => {
+            const input = ref("");
+
+            return {
+                input,
+            };
+        },
+        template: `
 <div class="fb-input-story-block">
 	<fb-input v-model="input" type="password" placeholder="Please input password" show-password />
 </div>`,
-	}),
+    }),
 };
 
 export const WithIcon: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<span>Using attributes</span>
@@ -239,28 +239,28 @@ const input2 = ref('');
 const input3 = ref('');
 const input4 = ref('');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInput, FbIcon, FasCalendar, FasMagnifyingGlass },
-		setup: () => {
-			const input1 = ref('');
-			const input2 = ref('');
-			const input3 = ref('');
-			const input4 = ref('');
-
-			return {
-				input1,
-				input2,
-				input3,
-				input4,
-				FasCalendar,
-				FasMagnifyingGlass,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInput, FbIcon, FasCalendar, FasMagnifyingGlass },
+        setup: () => {
+            const input1 = ref("");
+            const input2 = ref("");
+            const input3 = ref("");
+            const input4 = ref("");
+
+            return {
+                input1,
+                input2,
+                input3,
+                input4,
+                FasCalendar,
+                FasMagnifyingGlass,
+            };
+        },
+        template: `
 <div class="fb-input-story-block">
 	<div class="fb-input-story-block__form-row">
 		<span>Using attributes</span>
@@ -289,14 +289,14 @@ const input4 = ref('');
 		</fb-input>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Textarea: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-input
 		v-model="textarea"
@@ -311,20 +311,20 @@ import { ref } from 'vue';
 
 const textarea = ref('');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInput },
-		setup: () => {
-			const textarea = ref('');
-
-			return {
-				textarea,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInput },
+        setup: () => {
+            const textarea = ref("");
+
+            return {
+                textarea,
+            };
+        },
+        template: `
 <div class="fb-input-story-block">
 	<fb-input
 		v-model="textarea"
@@ -333,14 +333,14 @@ const textarea = ref('');
 		placeholder="Please input"
 	/>
 </div>`,
-	}),
+    }),
 };
 
 export const AutosizeTextarea: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-input
 		v-model="textarea1"
@@ -363,22 +363,22 @@ import { ref } from 'vue';
 const textarea1 = ref('');
 const textarea2 = ref('');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInput },
-		setup: () => {
-			const textarea1 = ref('');
-			const textarea2 = ref('');
-
-			return {
-				textarea1,
-				textarea2,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInput },
+        setup: () => {
+            const textarea1 = ref("");
+            const textarea2 = ref("");
+
+            return {
+                textarea1,
+                textarea2,
+            };
+        },
+        template: `
 <div class="fb-input-story-block">
 	<fb-input
 		v-model="textarea1"
@@ -396,14 +396,14 @@ const textarea2 = ref('');
 		placeholder="Please input"
 	/>
 </div>`,
-	}),
+    }),
 };
 
 export const Mixed: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<fb-input v-model="input1" placeholder="Please input">
@@ -454,27 +454,27 @@ const input2 = ref('');
 const input3 = ref('');
 const select = ref('');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInput, FbSelect, FbOption, FbButton, FasMagnifyingGlass },
-		setup: () => {
-			const input1 = ref('');
-			const input2 = ref('');
-			const input3 = ref('');
-			const select = ref('');
-
-			return {
-				input1,
-				input2,
-				input3,
-				select,
-				FasMagnifyingGlass,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInput, FbSelect, FbOption, FbButton, FasMagnifyingGlass },
+        setup: () => {
+            const input1 = ref("");
+            const input2 = ref("");
+            const input3 = ref("");
+            const select = ref("");
+
+            return {
+                input1,
+                input2,
+                input3,
+                select,
+                FasMagnifyingGlass,
+            };
+        },
+        template: `
 <div class="fb-input-story-block">
 	<div class="fb-input-story-block__item">
 		<fb-input
@@ -531,14 +531,14 @@ const select = ref('');
 		</fb-input>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Sizes: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<fb-input
@@ -604,25 +604,25 @@ const input1 = ref('');
 const input2 = ref('');
 const input3 = ref('');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInput, FasMagnifyingGlass },
-		setup: () => {
-			const input1 = ref('');
-			const input2 = ref('');
-			const input3 = ref('');
-
-			return {
-				input1,
-				input2,
-				input3,
-				FasMagnifyingGlass,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInput, FasMagnifyingGlass },
+        setup: () => {
+            const input1 = ref("");
+            const input2 = ref("");
+            const input3 = ref("");
+
+            return {
+                input1,
+                input2,
+                input3,
+                FasMagnifyingGlass,
+            };
+        },
+        template: `
 <div class="fb-input-story-block">
 	<div class="fb-input-story-block__form-row">
 		<fb-input
@@ -679,14 +679,14 @@ const input3 = ref('');
 		/>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const LimitLength: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-input
 		v-model="text"
@@ -711,22 +711,22 @@ import { ref } from 'vue';
 const text = ref('');
 const textarea = ref('');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbInput },
-		setup: () => {
-			const text = ref('');
-			const textarea = ref('');
-
-			return {
-				text,
-				textarea,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbInput },
+        setup: () => {
+            const text = ref("");
+            const textarea = ref("");
+
+            return {
+                text,
+                textarea,
+            };
+        },
+        template: `
 <div class="fb-input-story-block">
 	<fb-input
 		v-model="text"
@@ -746,5 +746,5 @@ const textarea = ref('');
 		type="textarea"
 	/>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/list/fb-list.mdx b/docs/src/components/list/fb-list.mdx
index da6b0734..d7f958d9 100644
--- a/docs/src/components/list/fb-list.mdx
+++ b/docs/src/components/list/fb-list.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as ListStories from './fb-list.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as ListStories from "./fb-list.stories";
 
 <Meta of={ListStories} />
 
@@ -7,17 +7,11 @@ import * as ListStories from './fb-list.stories';
 
 ## Basic Usage
 
-<Canvas
-	withToolbar={true}
-	of={ListStories.BasicUsage}
-/>
+<Canvas withToolbar={true} of={ListStories.BasicUsage} />
 
 ## List Style
 
-<Canvas
-	withToolbar={true}
-	of={ListStories.ListStyle}
-/>
+<Canvas withToolbar={true} of={ListStories.ListStyle} />
 
 ---
 
diff --git a/docs/src/components/list/fb-list.stories.ts b/docs/src/components/list/fb-list.stories.ts
index ca95d923..3471c3e3 100644
--- a/docs/src/components/list/fb-list.stories.ts
+++ b/docs/src/components/list/fb-list.stories.ts
@@ -1,18 +1,18 @@
-import { ref } from 'vue';
+import { ref } from "vue";
 
-import { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
-import { FasGear, FasPlug } from '@fastybird/web-ui-icons';
-import { FbList, FbListItem, FbButton, FbSwitch, FbIcon, ItemVariantTypes } from '@fastybird/web-ui-components';
-import { ComponentSizeTypes, VariantTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { action } from "@storybook/addon-actions";
+import { FasGear, FasPlug } from "@fastybird/web-ui-icons";
+import { FbList, FbListItem, FbButton, FbSwitch, FbIcon, ItemVariantTypes } from "@fastybird/web-ui-components";
+import { ComponentSizeTypes, VariantTypes } from "@fastybird/web-ui-constants";
 
-import './fb-list.stories.scss';
+import "./fb-list.stories.scss";
 
 const meta: Meta<typeof FbList> = {
-	component: FbList,
-	subcomponents: { FbListItem },
-	title: 'Components/Data/List',
-	excludeStories: /.*Data$/,
+    component: FbList,
+    subcomponents: { FbListItem },
+    title: "Components/Data/List",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -20,10 +20,10 @@ export default meta;
 type Story = StoryObj<typeof FbList>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-list>
 		<template #heading>List of awesome items</template>
@@ -76,24 +76,24 @@ const onClick = () => {
 	console.log('clicked')
 };
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbList, FbListItem, FbButton, FbSwitch, FbIcon, FasGear, FasPlug },
-		setup: () => {
-			const switchState = ref(true);
-			const onClick = action('button-clicked');
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbList, FbListItem, FbButton, FbSwitch, FbIcon, FasGear, FasPlug },
+        setup: () => {
+            const switchState = ref(true);
+            const onClick = action("button-clicked");
 
-			return {
-				switchState,
-				onClick,
-				FasGear,
-				FasPlug,
-			};
-		},
-		template: `
+            return {
+                switchState,
+                onClick,
+                FasGear,
+                FasPlug,
+            };
+        },
+        template: `
 <fb-list>
 	<template #heading>List of awesome items</template>
 	<template #subheading>Subheading of awesome items</template>
@@ -134,14 +134,14 @@ const onClick = () => {
 		</template>
 	</fb-list-item>
 </fb-list>`,
-	}),
+    }),
 };
 
 export const ListStyle: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-list>
 		<template #heading>List of awesome items</template>
@@ -194,24 +194,24 @@ const onClick = () => {
 	console.log('clicked')
 };
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbList, FbListItem, FbButton, FbSwitch, FbIcon, FasGear, FasPlug },
-		setup: () => {
-			const switchState = ref(true);
-			const onClick = action('button-clicked');
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbList, FbListItem, FbButton, FbSwitch, FbIcon, FasGear, FasPlug },
+        setup: () => {
+            const switchState = ref(true);
+            const onClick = action("button-clicked");
 
-			return {
-				switchState,
-				onClick,
-				FasGear,
-				FasPlug,
-			};
-		},
-		template: `
+            return {
+                switchState,
+                onClick,
+                FasGear,
+                FasPlug,
+            };
+        },
+        template: `
 <fb-list>
 	<template #heading>List of awesome items</template>
 	<template #subheading>Subheading of awesome items</template>
@@ -252,5 +252,5 @@ const onClick = () => {
 		</template>
 	</fb-list-item>
 </fb-list>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/loading-box/fb-loading-box.mdx b/docs/src/components/loading-box/fb-loading-box.mdx
index da9ebefb..d6e67515 100644
--- a/docs/src/components/loading-box/fb-loading-box.mdx
+++ b/docs/src/components/loading-box/fb-loading-box.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as LoadingBoxStories from './fb-loading-box.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as LoadingBoxStories from "./fb-loading-box.stories";
 
 <Meta of={LoadingBoxStories} />
 
@@ -17,19 +17,13 @@ Show animation while loading data.
 
 You can customize loading text, loading spinner or even use your own icon.
 
-<Canvas
-	withToolbar={true}
-	of={LoadingBoxStories.WithIcon}
-/>
+<Canvas withToolbar={true} of={LoadingBoxStories.WithIcon} />
 
 ## Custom logo
 
 And you could also use your own logo
 
-<Canvas
-	withToolbar={true}
-	of={LoadingBoxStories.CustomLogo}
-/>
+<Canvas withToolbar={true} of={LoadingBoxStories.CustomLogo} />
 
 ---
 
diff --git a/docs/src/components/loading-box/fb-loading-box.stories.scss b/docs/src/components/loading-box/fb-loading-box.stories.scss
index fd372b72..65adaaad 100644
--- a/docs/src/components/loading-box/fb-loading-box.stories.scss
+++ b/docs/src/components/loading-box/fb-loading-box.stories.scss
@@ -1,9 +1,9 @@
 .fb-loading-box-story-block {
-	.logo-color-primary {
-		fill: #d9230f;
-	}
+    .logo-color-primary {
+        fill: #d9230f;
+    }
 
-	.logo-color {
-		fill: #444;
-	}
+    .logo-color {
+        fill: #444;
+    }
 }
diff --git a/docs/src/components/loading-box/fb-loading-box.stories.ts b/docs/src/components/loading-box/fb-loading-box.stories.ts
index 1c8bba1b..2a526dff 100644
--- a/docs/src/components/loading-box/fb-loading-box.stories.ts
+++ b/docs/src/components/loading-box/fb-loading-box.stories.ts
@@ -1,100 +1,100 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FasUserSecret } from '@fastybird/web-ui-icons';
-import { FbLoadingBox, FbIcon } from '@fastybird/web-ui-components';
-import { ComponentSizeTypes, VariantTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FasUserSecret } from "@fastybird/web-ui-icons";
+import { FbLoadingBox, FbIcon } from "@fastybird/web-ui-components";
+import { ComponentSizeTypes, VariantTypes } from "@fastybird/web-ui-constants";
 
-import './fb-loading-box.stories.scss';
+import "./fb-loading-box.stories.scss";
 
 const meta: Meta<typeof FbLoadingBox> = {
-	component: FbLoadingBox,
-	title: 'Components/Feedback/Loading box',
-	argTypes: {
-		default: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			defaultValue: 'Loading & preparing content...',
-			description: 'Loading box info text slot',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		icon: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			defaultValue: null,
-			description: 'Optional loading box icon slot',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		size: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
-			description: 'loading box size',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: ComponentSizeTypes.DEFAULT },
-			},
-		},
-		variant: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
-			description: 'loading box variant',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: VariantTypes.DEFAULT },
-			},
-		},
-		show: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'determine whether loading box is shown',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		fullScreen: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'determine whether loading box is stretched to full screen',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		animation: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'determine whether loading box is shown with animation effect',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		spinner: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'customize loading box spinner component',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-	},
-	args: {
-		default: 'Loading & preparing content...',
-		size: ComponentSizeTypes.DEFAULT,
-		variant: VariantTypes.PRIMARY,
-		show: true,
-		fullScreen: false,
-		animation: false,
-	},
-	excludeStories: /.*Data$/,
+    component: FbLoadingBox,
+    title: "Components/Feedback/Loading box",
+    argTypes: {
+        default: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            defaultValue: "Loading & preparing content...",
+            description: "Loading box info text slot",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        icon: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            defaultValue: null,
+            description: "Optional loading box icon slot",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        size: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
+            description: "loading box size",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: ComponentSizeTypes.DEFAULT },
+            },
+        },
+        variant: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
+            description: "loading box variant",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: VariantTypes.DEFAULT },
+            },
+        },
+        show: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "determine whether loading box is shown",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        fullScreen: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "determine whether loading box is stretched to full screen",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        animation: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "determine whether loading box is shown with animation effect",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        spinner: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "customize loading box spinner component",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+    },
+    args: {
+        default: "Loading & preparing content...",
+        size: ComponentSizeTypes.DEFAULT,
+        variant: VariantTypes.PRIMARY,
+        show: true,
+        fullScreen: false,
+        animation: false,
+    },
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -102,14 +102,14 @@ export default meta;
 type Story = StoryObj<typeof FbLoadingBox>;
 
 export const Component: Story = {
-	tags: ['hideInSidebar'],
+    tags: ["hideInSidebar"],
 };
 
 export const WithIcon: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-loading-box
 		:animation="true"
@@ -121,13 +121,13 @@ export const WithIcon: Story = {
 		<p>Loading you user account<br />Please stand by...</p>
 	</fb-loading-box>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbLoadingBox, FbIcon, FasUserSecret },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbLoadingBox, FbIcon, FasUserSecret },
+        template: `
 <fb-loading-box
 	:animation="true"
 	:show="true"
@@ -137,14 +137,14 @@ export const WithIcon: Story = {
 	<template #icon><fb-icon :size="100" class="is-fade"><fas-user-secret /></fb-icon></template>
 	<p>Loading you user account<br />Please stand by...</p>
 </fb-loading-box>`,
-	}),
+    }),
 };
 
 export const CustomLogo: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-loading-box
 		:show="true"
@@ -193,13 +193,13 @@ export const CustomLogo: Story = {
 	fill: #444;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbLoadingBox },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbLoadingBox },
+        template: `
 <div class="fb-loading-box-story-block">
 	<fb-loading-box
 		:show="true"
@@ -238,5 +238,5 @@ export const CustomLogo: Story = {
 		Preparing application, please wait a moment...
 	</fb-loading-box>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/media-item/fb-media-item.mdx b/docs/src/components/media-item/fb-media-item.mdx
index 2674ebad..c2d2254a 100644
--- a/docs/src/components/media-item/fb-media-item.mdx
+++ b/docs/src/components/media-item/fb-media-item.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as MediaItemStories from './fb-media-item.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as MediaItemStories from "./fb-media-item.stories";
 
 <Meta of={MediaItemStories} />
 
@@ -13,10 +13,7 @@ import * as MediaItemStories from './fb-media-item.stories';
 
 ## Basic Usage
 
-<Canvas
-	withToolbar={true}
-	of={MediaItemStories.BasicUsage}
-/>
+<Canvas withToolbar={true} of={MediaItemStories.BasicUsage} />
 
 ---
 
diff --git a/docs/src/components/media-item/fb-media-item.stories.ts b/docs/src/components/media-item/fb-media-item.stories.ts
index e7c5115e..b89765e4 100644
--- a/docs/src/components/media-item/fb-media-item.stories.ts
+++ b/docs/src/components/media-item/fb-media-item.stories.ts
@@ -1,62 +1,62 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
-import { FasWandMagicSparkles } from '@fastybird/web-ui-icons';
-import { FbMediaItem, FbButton, FbIcon } from '@fastybird/web-ui-components';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { action } from "@storybook/addon-actions";
+import { FasWandMagicSparkles } from "@fastybird/web-ui-icons";
+import { FbMediaItem, FbButton, FbIcon } from "@fastybird/web-ui-components";
 
-import './fb-media-item.stories.scss';
+import "./fb-media-item.stories.scss";
 
 const meta: Meta<typeof FbMediaItem> = {
-	component: FbMediaItem,
-	title: 'Components/Data/Media item',
-	argTypes: {
-		left: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'Item left box content slot',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		right: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'Item right box content slot',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		heading: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'Item heading slot',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		description: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'Item description slot',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		action: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'Item action slot',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-	},
-	args: {},
-	excludeStories: /.*Data$/,
+    component: FbMediaItem,
+    title: "Components/Data/Media item",
+    argTypes: {
+        left: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "Item left box content slot",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        right: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "Item right box content slot",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        heading: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "Item heading slot",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        description: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "Item description slot",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        action: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "Item action slot",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+    },
+    args: {},
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -64,31 +64,31 @@ export default meta;
 type Story = StoryObj<typeof FbMediaItem>;
 
 export const Component: Story = {
-	tags: ['hideInSidebar'],
-	render: (args) => ({
-		components: { FbMediaItem, FbButton, FbIcon, FasWandMagicSparkles },
-		template: `
+    tags: ["hideInSidebar"],
+    render: (args) => ({
+        components: { FbMediaItem, FbButton, FbIcon, FasWandMagicSparkles },
+        template: `
 <fb-media-item>
-	${args.left !== null && typeof args.left !== 'undefined' ? `<template #left>${args.left}</template>` : ''}
-	${args.right !== null && typeof args.right !== 'undefined' ? `<template #right>${args.right}</template>` : ''}
-	${args.heading !== null && typeof args.heading !== 'undefined' ? `<template #heading>${args.heading}</template>` : ''}
-	${args.description !== null && typeof args.description !== 'undefined' ? `<template #description>${args.description}</template>` : ''}
-	${args.action !== null && typeof args.action !== 'undefined' ? `<template #action>${args.action}</template>` : ''}
+	${args.left !== null && typeof args.left !== "undefined" ? `<template #left>${args.left}</template>` : ""}
+	${args.right !== null && typeof args.right !== "undefined" ? `<template #right>${args.right}</template>` : ""}
+	${args.heading !== null && typeof args.heading !== "undefined" ? `<template #heading>${args.heading}</template>` : ""}
+	${args.description !== null && typeof args.description !== "undefined" ? `<template #description>${args.description}</template>` : ""}
+	${args.action !== null && typeof args.action !== "undefined" ? `<template #action>${args.action}</template>` : ""}
 </fb-media-item>`,
-	}),
-	args: {
-		left: '<fb-icon size="35"><fas-wand-magic-sparkles /></fb-icon>',
-		heading: 'All created items',
-		description: 'Here could find all created items stored in database',
-		action: '<fb-button>Reload</fb-button>',
-	},
+    }),
+    args: {
+        left: '<fb-icon size="35"><fas-wand-magic-sparkles /></fb-icon>',
+        heading: "All created items",
+        description: "Here could find all created items stored in database",
+        action: "<fb-button>Reload</fb-button>",
+    },
 };
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-media-item>
 		<template #left>
@@ -113,21 +113,21 @@ const handleClick = (): void => {
 	console.log('Button clicked');
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbMediaItem, FbButton, FbIcon, FasWandMagicSparkles },
-		setup: () => {
-			const onClick = action('button-clicked');
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbMediaItem, FbButton, FbIcon, FasWandMagicSparkles },
+        setup: () => {
+            const onClick = action("button-clicked");
 
-			return {
-				onClick,
-				FasWandMagicSparkles,
-			};
-		},
-		template: `
+            return {
+                onClick,
+                FasWandMagicSparkles,
+            };
+        },
+        template: `
 <fb-media-item>
 	<template #left>
 		<fb-icon size="35">
@@ -144,5 +144,5 @@ const handleClick = (): void => {
 		<fb-button @click.prevent="onClick">Reload</fb-button>
 	</template>
 </fb-media-item>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/menu/fb-menu.mdx b/docs/src/components/menu/fb-menu.mdx
index 9e20fe21..f70fab90 100644
--- a/docs/src/components/menu/fb-menu.mdx
+++ b/docs/src/components/menu/fb-menu.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as MenuStories from './fb-menu.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as MenuStories from "./fb-menu.stories";
 
 <Meta of={MenuStories} />
 
diff --git a/docs/src/components/menu/fb-menu.stories.scss b/docs/src/components/menu/fb-menu.stories.scss
index d77057f7..16fa93d9 100644
--- a/docs/src/components/menu/fb-menu.stories.scss
+++ b/docs/src/components/menu/fb-menu.stories.scss
@@ -1,22 +1,22 @@
 .fb-menu-story-block {
-	.fb-menu-story-block__item {
-		margin-bottom: 20px;
-	}
+    .fb-menu-story-block__item {
+        margin-bottom: 20px;
+    }
 
-	.fb-menu-story-block__item:last-child {
-		margin-bottom: 0;
-	}
+    .fb-menu-story-block__item:last-child {
+        margin-bottom: 0;
+    }
 
-	.fb-menu-story-block__items-space {
-		flex-grow: 1;
-	}
+    .fb-menu-story-block__items-space {
+        flex-grow: 1;
+    }
 
-	.fb-menu-story-block__vertical-demo:not(.fb-menu--collapse) {
-		width: 200px;
-		min-height: 400px;
-	}
+    .fb-menu-story-block__vertical-demo:not(.fb-menu--collapse) {
+        width: 200px;
+        min-height: 400px;
+    }
 
-	.fb-menu-story-block__popper-demo {
-		max-width: 580px;
-	}
+    .fb-menu-story-block__popper-demo {
+        max-width: 580px;
+    }
 }
diff --git a/docs/src/components/menu/fb-menu.stories.ts b/docs/src/components/menu/fb-menu.stories.ts
index a3ad6eb7..b523adf4 100644
--- a/docs/src/components/menu/fb-menu.stories.ts
+++ b/docs/src/components/menu/fb-menu.stories.ts
@@ -1,14 +1,14 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbMenu, FbMenuItem, FbMenuItemGroup, FbSubMenu, FbRow, FbCol, FbIcon, FbRadioGroup, FbRadioButton } from '@fastybird/web-ui-components';
-import { FasLocationDot, FasBars, FarFileLines, FasGear } from '@fastybird/web-ui-icons';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbMenu, FbMenuItem, FbMenuItemGroup, FbSubMenu, FbRow, FbCol, FbIcon, FbRadioGroup, FbRadioButton } from "@fastybird/web-ui-components";
+import { FasLocationDot, FasBars, FarFileLines, FasGear } from "@fastybird/web-ui-icons";
 
-import './fb-menu.stories.scss';
-import { ref } from 'vue';
+import "./fb-menu.stories.scss";
+import { ref } from "vue";
 
 const meta: Meta<typeof FbMenu> = {
-	component: FbMenu,
-	title: 'Components/Navigation/Menu',
-	excludeStories: /.*Data$/,
+    component: FbMenu,
+    title: "Components/Navigation/Menu",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -16,10 +16,10 @@ export default meta;
 type Story = StoryObj<typeof FbMenu>;
 
 export const TopBar: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-menu
 		:default-active="activeIndex1"
@@ -79,27 +79,27 @@ const handleSelect = (key: string, keyPath: string[]): void => {
 	console.log(key, keyPath);
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbMenu, FbSubMenu, FbMenuItem },
-		setup: () => {
-			const activeIndex1 = ref('1');
-			const activeIndex2 = ref('1');
-
-			const handleSelect = (key: string, keyPath: string[]): void => {
-				console.log(key, keyPath);
-			};
-
-			return {
-				activeIndex1,
-				activeIndex2,
-				handleSelect,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbMenu, FbSubMenu, FbMenuItem },
+        setup: () => {
+            const activeIndex1 = ref("1");
+            const activeIndex2 = ref("1");
+
+            const handleSelect = (key: string, keyPath: string[]): void => {
+                console.log(key, keyPath);
+            };
+
+            return {
+                activeIndex1,
+                activeIndex2,
+                handleSelect,
+            };
+        },
+        template: `
 <div class="fb-menu-story-block">
 	<div class="fb-menu-story-block__item">
 		<fb-menu
@@ -152,14 +152,14 @@ const handleSelect = (key: string, keyPath: string[]): void => {
 		</fb-menu>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const LeftRight: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-menu
 		:default-active="activeIndex"
@@ -219,25 +219,25 @@ const handleSelect = (key: string, keyPath: string[]): void => {
   flex-grow: 1;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbMenu, FbSubMenu, FbMenuItem },
-		setup: () => {
-			const activeIndex = ref('1');
-
-			const handleSelect = (key: string, keyPath: string[]): void => {
-				console.log(key, keyPath);
-			};
-
-			return {
-				activeIndex,
-				handleSelect,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbMenu, FbSubMenu, FbMenuItem },
+        setup: () => {
+            const activeIndex = ref("1");
+
+            const handleSelect = (key: string, keyPath: string[]): void => {
+                console.log(key, keyPath);
+            };
+
+            return {
+                activeIndex,
+                handleSelect,
+            };
+        },
+        template: `
 <div class="fb-menu-story-block">
 	<div class="fb-menu-story-block__item">
 		<fb-menu
@@ -283,14 +283,14 @@ const handleSelect = (key: string, keyPath: string[]): void => {
 		</fb-menu>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const SideBar: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-row>
 		<fb-col :span="12">
@@ -389,27 +389,27 @@ const handleClose = (key: string, keyPath: string[]): void => {
 	console.log(key, keyPath);
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbMenu, FbSubMenu, FbMenuItem, FbMenuItemGroup, FbRow, FbCol, FbIcon, FasLocationDot, FasBars, FarFileLines, FasGear },
-		setup: () => {
-			const handleOpen = (key: string, keyPath: string[]): void => {
-				console.log(key, keyPath);
-			};
-
-			const handleClose = (key: string, keyPath: string[]): void => {
-				console.log(key, keyPath);
-			};
-
-			return {
-				handleOpen,
-				handleClose,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbMenu, FbSubMenu, FbMenuItem, FbMenuItemGroup, FbRow, FbCol, FbIcon, FasLocationDot, FasBars, FarFileLines, FasGear },
+        setup: () => {
+            const handleOpen = (key: string, keyPath: string[]): void => {
+                console.log(key, keyPath);
+            };
+
+            const handleClose = (key: string, keyPath: string[]): void => {
+                console.log(key, keyPath);
+            };
+
+            return {
+                handleOpen,
+                handleClose,
+            };
+        },
+        template: `
 <div class="fb-menu-story-block">
 	<div class="fb-menu-story-block__item">
 		<fb-row>
@@ -498,14 +498,14 @@ const handleClose = (key: string, keyPath: string[]): void => {
 		</fb-row>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Collapse: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-radio-group v-model="isCollapse" style="margin-bottom: 20px">
 		<fb-radio-button :value="false">expand</fb-radio-button>
@@ -573,42 +573,42 @@ const handleClose = (key: string, keyPath: string[]): void => {
   min-height: 400px;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: {
-			FbMenu,
-			FbSubMenu,
-			FbMenuItem,
-			FbMenuItemGroup,
-			FbIcon,
-			FbRadioGroup,
-			FbRadioButton,
-			FasLocationDot,
-			FasBars,
-			FarFileLines,
-			FasGear,
-		},
-		setup: () => {
-			const isCollapse = ref(true);
-
-			const handleOpen = (key: string, keyPath: string[]): void => {
-				console.log(key, keyPath);
-			};
-
-			const handleClose = (key: string, keyPath: string[]): void => {
-				console.log(key, keyPath);
-			};
-
-			return {
-				isCollapse,
-				handleOpen,
-				handleClose,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: {
+            FbMenu,
+            FbSubMenu,
+            FbMenuItem,
+            FbMenuItemGroup,
+            FbIcon,
+            FbRadioGroup,
+            FbRadioButton,
+            FasLocationDot,
+            FasBars,
+            FarFileLines,
+            FasGear,
+        },
+        setup: () => {
+            const isCollapse = ref(true);
+
+            const handleOpen = (key: string, keyPath: string[]): void => {
+                console.log(key, keyPath);
+            };
+
+            const handleClose = (key: string, keyPath: string[]): void => {
+                console.log(key, keyPath);
+            };
+
+            return {
+                isCollapse,
+                handleOpen,
+                handleClose,
+            };
+        },
+        template: `
 <div class="fb-menu-story-block">
 	<fb-radio-group v-model="isCollapse" style="margin-bottom: 20px">
 		<fb-radio-button :value="false">expand</fb-radio-button>
@@ -656,14 +656,14 @@ const handleClose = (key: string, keyPath: string[]): void => {
 		</fb-menu>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const PopperOffset: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-menu
 		ellipsis
@@ -700,13 +700,13 @@ export const PopperOffset: Story = {
 		<fb-menu-item index="5">Orders</fb-menu-item>
 	</fb-menu>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbMenu, FbSubMenu, FbMenuItem },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbMenu, FbSubMenu, FbMenuItem },
+        template: `
 <div class="fb-menu-story-block">
 	<div class="fb-menu-story-block__item">
 		<fb-menu
@@ -745,5 +745,5 @@ export const PopperOffset: Story = {
 		</fb-menu>
 	</div>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/message-box/fb-message-box.mdx b/docs/src/components/message-box/fb-message-box.mdx
index 3896a609..71792c6e 100644
--- a/docs/src/components/message-box/fb-message-box.mdx
+++ b/docs/src/components/message-box/fb-message-box.mdx
@@ -1,24 +1,12 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as MessageBoxStories from './fb-message-box.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as MessageBoxStories from "./fb-message-box.stories";
 
 <Meta of={MessageBoxStories} />
 
-<Canvas
-	withToolbar={true}
-	of={MessageBoxStories.Alert}
-/>
+<Canvas withToolbar={true} of={MessageBoxStories.Alert} />
 
-<Canvas
-	withToolbar={true}
-	of={MessageBoxStories.Confirm}
-/>
+<Canvas withToolbar={true} of={MessageBoxStories.Confirm} />
 
-<Canvas
-	withToolbar={true}
-	of={MessageBoxStories.Prompt}
-/>
+<Canvas withToolbar={true} of={MessageBoxStories.Prompt} />
 
-<Canvas
-	withToolbar={true}
-	of={MessageBoxStories.Customization}
-/>
+<Canvas withToolbar={true} of={MessageBoxStories.Customization} />
diff --git a/docs/src/components/message-box/fb-message-box.stories.ts b/docs/src/components/message-box/fb-message-box.stories.ts
index 27888abe..96c2a774 100644
--- a/docs/src/components/message-box/fb-message-box.stories.ts
+++ b/docs/src/components/message-box/fb-message-box.stories.ts
@@ -1,16 +1,16 @@
-import { h, ref } from 'vue';
+import { h, ref } from "vue";
 
-import { FbButton, FbMessage, FbMessageBox, FbSwitch, MessageBoxActionTypes } from '@fastybird/web-ui-components';
-import { VariantTypes } from '@fastybird/web-ui-constants';
-import { Meta, StoryObj } from '@storybook/vue3';
+import { FbButton, FbMessage, FbMessageBox, FbSwitch, MessageBoxActionTypes } from "@fastybird/web-ui-components";
+import { VariantTypes } from "@fastybird/web-ui-constants";
+import { Meta, StoryObj } from "@storybook/vue3";
 
-import './fb-message-box.stories.scss';
+import "./fb-message-box.stories.scss";
 
-import type { MessageBoxAction } from '@fastybird/web-ui-components';
+import type { MessageBoxAction } from "@fastybird/web-ui-components";
 
 const meta: Meta<typeof FbMessageBox> = {
-	title: 'Components/Feedback/Message box',
-	excludeStories: /.*Data$/,
+    title: "Components/Feedback/Message box",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -18,10 +18,10 @@ export default meta;
 type Story = StoryObj<typeof FbMessageBox>;
 
 export const Alert: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button plain @click="openError">Click to open the error Alert message</fb-button>
 	<fb-button plain @click="openInfo">Click to open the info Alert message</fb-button>
@@ -57,50 +57,50 @@ const openInfo = () => {
 	});
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		methods: {
-			openError: () => {
-				FbMessageBox.alert('This is a alert message', 'With some title', {
-					confirmButtonText: 'This is OK',
-					type: VariantTypes.ERROR,
-					onAction: (action: MessageBoxAction) => {
-						FbMessage({
-							type: VariantTypes.INFO,
-							message: `You clicked: ${action}`,
-						});
-					},
-				});
-			},
-			openInfo: () => {
-				FbMessageBox.alert('This is a info message', 'With some title', {
-					confirmButtonText: 'This is OK',
-					type: VariantTypes.INFO,
-					onAction: (action: MessageBoxAction) => {
-						FbMessage({
-							type: VariantTypes.INFO,
-							message: `You clicked: ${action}`,
-						});
-					},
-				});
-			},
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        methods: {
+            openError: () => {
+                FbMessageBox.alert("This is a alert message", "With some title", {
+                    confirmButtonText: "This is OK",
+                    type: VariantTypes.ERROR,
+                    onAction: (action: MessageBoxAction) => {
+                        FbMessage({
+                            type: VariantTypes.INFO,
+                            message: `You clicked: ${action}`,
+                        });
+                    },
+                });
+            },
+            openInfo: () => {
+                FbMessageBox.alert("This is a info message", "With some title", {
+                    confirmButtonText: "This is OK",
+                    type: VariantTypes.INFO,
+                    onAction: (action: MessageBoxAction) => {
+                        FbMessage({
+                            type: VariantTypes.INFO,
+                            message: `You clicked: ${action}`,
+                        });
+                    },
+                });
+            },
+        },
+        template: `
 <fb-button plain @click="openError">Click to open the error Alert message</fb-button>
 <fb-button plain @click="openInfo">Click to open the info Alert message</fb-button>
 `,
-	}),
+    }),
 };
 
 export const Confirm: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button plain @click="open">Click to open the Confirmation message</fb-button>
 </template>
@@ -134,43 +134,43 @@ const open = () => {
 	);
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		methods: {
-			open: () => {
-				FbMessageBox.confirm('This action will permanently delete data. Continue?', 'Are you sure?', {
-					confirmButtonText: 'OK',
-					cancelButtonText: 'Cancel',
-					type: VariantTypes.WARNING,
-					onAction: (action: MessageBoxAction): void => {
-						if (action === MessageBoxActionTypes.CONFIRM) {
-							FbMessage({
-								type: VariantTypes.SUCCESS,
-								message: 'Delete completed',
-							});
-						} else {
-							FbMessage({
-								type: VariantTypes.INFO,
-								message: 'Delete canceled',
-							});
-						}
-					},
-				});
-			},
-		},
-		template: '<fb-button plain @click="open">Click to open the Confirmation message</fb-button>',
-	}),
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        methods: {
+            open: () => {
+                FbMessageBox.confirm("This action will permanently delete data. Continue?", "Are you sure?", {
+                    confirmButtonText: "OK",
+                    cancelButtonText: "Cancel",
+                    type: VariantTypes.WARNING,
+                    onAction: (action: MessageBoxAction): void => {
+                        if (action === MessageBoxActionTypes.CONFIRM) {
+                            FbMessage({
+                                type: VariantTypes.SUCCESS,
+                                message: "Delete completed",
+                            });
+                        } else {
+                            FbMessage({
+                                type: VariantTypes.INFO,
+                                message: "Delete canceled",
+                            });
+                        }
+                    },
+                });
+            },
+        },
+        template: '<fb-button plain @click="open">Click to open the Confirmation message</fb-button>',
+    }),
 };
 
 export const Prompt: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button plain @click="open">Click to open the Confirmation message</fb-button>
 </template>
@@ -201,44 +201,44 @@ const open = () => {
 	});
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		methods: {
-			open: () => {
-				FbMessageBox.prompt('Please input your e-mail', 'Tip', {
-					confirmButtonText: 'OK',
-					cancelButtonText: 'Cancel',
-					inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
-					inputErrorMessage: 'Invalid Email',
-					onAction: (action: MessageBoxAction, _context, value: string): void => {
-						if (action === MessageBoxActionTypes.CONFIRM) {
-							FbMessage({
-								type: VariantTypes.SUCCESS,
-								message: `Your email is: ${value}`,
-							});
-						} else {
-							FbMessage({
-								type: VariantTypes.INFO,
-								message: 'Input canceled',
-							});
-						}
-					},
-				});
-			},
-		},
-		template: '<fb-button plain @click="open">Click to open the Prompt message</fb-button>',
-	}),
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        methods: {
+            open: () => {
+                FbMessageBox.prompt("Please input your e-mail", "Tip", {
+                    confirmButtonText: "OK",
+                    cancelButtonText: "Cancel",
+                    inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+                    inputErrorMessage: "Invalid Email",
+                    onAction: (action: MessageBoxAction, _context, value: string): void => {
+                        if (action === MessageBoxActionTypes.CONFIRM) {
+                            FbMessage({
+                                type: VariantTypes.SUCCESS,
+                                message: `Your email is: ${value}`,
+                            });
+                        } else {
+                            FbMessage({
+                                type: VariantTypes.INFO,
+                                message: "Input canceled",
+                            });
+                        }
+                    },
+                });
+            },
+        },
+        template: '<fb-button plain @click="open">Click to open the Prompt message</fb-button>',
+    }),
 };
 
 export const Vnode: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button plain @click="openOne">Common VNode</fb-button>
 	<fb-button plain @click="openTwo">Dynamic props</fb-button>
@@ -271,47 +271,47 @@ const openTwo = () => {
 	});
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton, FbSwitch },
-		methods: {
-			openOne: () => {
-				FbMessageBox({
-					title: 'Message',
-					message: h('p', null, [h('span', null, 'Message can be '), h('i', { style: 'color: teal' }, 'VNode')]),
-				});
-			},
-			openTwo: () => {
-				const checked = ref<boolean | string | number>(false);
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton, FbSwitch },
+        methods: {
+            openOne: () => {
+                FbMessageBox({
+                    title: "Message",
+                    message: h("p", null, [h("span", null, "Message can be "), h("i", { style: "color: teal" }, "VNode")]),
+                });
+            },
+            openTwo: () => {
+                const checked = ref<boolean | string | number>(false);
 
-				FbMessageBox({
-					title: 'Message',
-					// Should pass a function if VNode contains dynamic props
-					message: () =>
-						h(FbSwitch, {
-							modelValue: checked.value,
-							'onUpdate:modelValue': (val: boolean | string | number) => {
-								checked.value = val;
-							},
-						}),
-				});
-			},
-		},
-		template: `
+                FbMessageBox({
+                    title: "Message",
+                    // Should pass a function if VNode contains dynamic props
+                    message: () =>
+                        h(FbSwitch, {
+                            modelValue: checked.value,
+                            "onUpdate:modelValue": (val: boolean | string | number) => {
+                                checked.value = val;
+                            },
+                        }),
+                });
+            },
+        },
+        template: `
 <fb-button plain @click="openOne">Common VNode</fb-button>
 <fb-button plain @click="openTwo">Dynamic props</fb-button>
 `,
-	}),
+    }),
 };
 
 export const Customization: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button plain @click="open">Click to open the Confirmation message</fb-button>
 </template>
@@ -344,51 +344,51 @@ const open = () => {
 	);
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		methods: {
-			open: () => {
-				FbMessageBox({
-					title: 'Message',
-					message: h('p', null, [h('span', null, 'Message can be '), h('i', { style: 'color: teal' }, 'VNode')]),
-					showCancelButton: true,
-					confirmButtonText: 'OK',
-					cancelButtonText: 'Cancel',
-					beforeClose: (action: MessageBoxAction, instance, done) => {
-						if (action === MessageBoxActionTypes.CONFIRM) {
-							instance.confirmButtonRef.value.loading = true;
-							instance.confirmButtonRef.value.text = 'Loading...';
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        methods: {
+            open: () => {
+                FbMessageBox({
+                    title: "Message",
+                    message: h("p", null, [h("span", null, "Message can be "), h("i", { style: "color: teal" }, "VNode")]),
+                    showCancelButton: true,
+                    confirmButtonText: "OK",
+                    cancelButtonText: "Cancel",
+                    beforeClose: (action: MessageBoxAction, instance, done) => {
+                        if (action === MessageBoxActionTypes.CONFIRM) {
+                            instance.confirmButtonRef.value.loading = true;
+                            instance.confirmButtonRef.value.text = "Loading...";
 
-							setTimeout(() => {
-								done();
-								setTimeout(() => {
-									instance.confirmButtonRef.value.loading = false;
-								}, 300);
-							}, 3000);
-						} else {
-							done();
-						}
-					},
-					onAction: (action: MessageBoxAction): void => {
-						if (action === MessageBoxActionTypes.CONFIRM) {
-							FbMessage({
-								type: VariantTypes.SUCCESS,
-								message: 'Delete completed',
-							});
-						} else {
-							FbMessage({
-								type: VariantTypes.INFO,
-								message: 'Delete canceled',
-							});
-						}
-					},
-				});
-			},
-		},
-		template: '<fb-button plain @click="open">Click to open the Customized message</fb-button>',
-	}),
+                            setTimeout(() => {
+                                done();
+                                setTimeout(() => {
+                                    instance.confirmButtonRef.value.loading = false;
+                                }, 300);
+                            }, 3000);
+                        } else {
+                            done();
+                        }
+                    },
+                    onAction: (action: MessageBoxAction): void => {
+                        if (action === MessageBoxActionTypes.CONFIRM) {
+                            FbMessage({
+                                type: VariantTypes.SUCCESS,
+                                message: "Delete completed",
+                            });
+                        } else {
+                            FbMessage({
+                                type: VariantTypes.INFO,
+                                message: "Delete canceled",
+                            });
+                        }
+                    },
+                });
+            },
+        },
+        template: '<fb-button plain @click="open">Click to open the Customized message</fb-button>',
+    }),
 };
diff --git a/docs/src/components/message/fb-message.mdx b/docs/src/components/message/fb-message.mdx
index 82834487..49b4497e 100644
--- a/docs/src/components/message/fb-message.mdx
+++ b/docs/src/components/message/fb-message.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as MessageStories from './fb-message.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as MessageStories from "./fb-message.stories";
 
 <Meta of={MessageStories} />
 
@@ -15,10 +15,7 @@ The setup of Message is very similar to notification, so parts of the options wo
 combined with notification doc to understand it. FastyBird UI library has registered a `$message` method for invoking. Message can take a string or a VNode as parameter,
 and it will be shown as the main body.
 
-<Canvas
-	withToolbar={true}
-	of={MessageStories.BasicUsage}
-/>
+<Canvas withToolbar={true} of={MessageStories.BasicUsage} />
 
 ## Types
 
@@ -28,10 +25,7 @@ When you need more customizations, Message component can also take an object as
 and its default is `info`. In such cases the main body is passed in as the value of message. Also, we have registered methods for different types, so you
 can directly call it without passing a type like `open4`.
 
-<Canvas
-	withToolbar={true}
-	of={MessageStories.Types}
-/>
+<Canvas withToolbar={true} of={MessageStories.Types} />
 
 ## Closable
 
@@ -40,19 +34,13 @@ A close button can be added.
 A default Message cannot be closed manually. If you need a closable message, you can set `show-close` field. Besides, same as notification, message
 has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to 0.
 
-<Canvas
-	withToolbar={true}
-	of={MessageStories.Closable}
-/>
+<Canvas withToolbar={true} of={MessageStories.Closable} />
 
 ## Centered Text
 
 Use the `center` property to center the text.
 
-<Canvas
-	withToolbar={true}
-	of={MessageStories.CenteredText}
-/>
+<Canvas withToolbar={true} of={MessageStories.CenteredText} />
 
 ## Use HTML String
 
@@ -63,10 +51,7 @@ Set `dangerouslyUseHTMLString` to `true` and `message` will be treated as an HTM
 > **WARNING:**
 > Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
 
-<Canvas
-	withToolbar={true}
-	of={MessageStories.HtmlContent}
-/>
+<Canvas withToolbar={true} of={MessageStories.HtmlContent} />
 
 ## Grouping
 
@@ -74,10 +59,7 @@ Merge messages with the same content.
 
 Set `grouping` to true and the same content of `message` will be merged.
 
-<Canvas
-	withToolbar={true}
-	of={MessageStories.Grouping}
-/>
+<Canvas withToolbar={true} of={MessageStories.Grouping} />
 
 ## Global method
 
@@ -86,7 +68,7 @@ FastyBird UI library has added a global method `$message` for `app.config.global
 ## Local import
 
 ```ts
-import { FbMessage } from '@fastybird/web-ui-library';
+import { FbMessage } from "@fastybird/web-ui-library";
 ```
 
 In this case you should call `FbMessage(options)`. We have also registered methods for different types, e.g. `FbMessage.success(options)`. You can call `FbMessage.closeAll()` to manually close all the instances.
@@ -101,8 +83,8 @@ You can use it like this:
 > If you globally registered FbMessage component, it will automatically inherit your app context.
 
 ```ts
-import { getCurrentInstance } from 'vue';
-import { FbMessage } from '@fastybird/web-ui-library';
+import { getCurrentInstance } from "vue";
+import { FbMessage } from "@fastybird/web-ui-library";
 
 // in your setup method
 const { appContext } = getCurrentInstance()!;
diff --git a/docs/src/components/message/fb-message.stories.ts b/docs/src/components/message/fb-message.stories.ts
index e2f085cc..7308a371 100644
--- a/docs/src/components/message/fb-message.stories.ts
+++ b/docs/src/components/message/fb-message.stories.ts
@@ -1,14 +1,14 @@
-import { h } from 'vue';
+import { h } from "vue";
 
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbMessage, FbButton } from '@fastybird/web-ui-components';
-import { VariantTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbMessage, FbButton } from "@fastybird/web-ui-components";
+import { VariantTypes } from "@fastybird/web-ui-constants";
 
-import './fb-message.stories.scss';
+import "./fb-message.stories.scss";
 
 const meta: Meta<typeof FbMessage> = {
-	title: 'Components/Feedback/Message',
-	excludeStories: /.*Data$/,
+    title: "Components/Feedback/Message",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -16,10 +16,10 @@ export default meta;
 type Story = StoryObj<typeof FbMessage>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button :plain="true" @click="open">Show message</fb-button>
 	<fb-button :plain="true" @click="openVn">VNode</fb-button>
@@ -42,36 +42,36 @@ const openVn = () => {
 	});
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		methods: {
-			open: () => {
-				FbMessage.success('This is a message.');
-			},
-			openVn: () => {
-				FbMessage({
-					message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
-						h('span', null, 'Message can be '),
-						h('i', { style: 'color: teal' }, 'VNode'),
-					]),
-				});
-			},
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        methods: {
+            open: () => {
+                FbMessage.success("This is a message.");
+            },
+            openVn: () => {
+                FbMessage({
+                    message: h("p", { style: "line-height: 1; font-size: 14px" }, [
+                        h("span", null, "Message can be "),
+                        h("i", { style: "color: teal" }, "VNode"),
+                    ]),
+                });
+            },
+        },
+        template: `
 <fb-button :plain="true" @click="open">Show message</fb-button>
 <fb-button :plain="true" @click="openVn">VNode</fb-button>`,
-	}),
+    }),
 };
 
 export const Types: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button :plain="true" @click="open2">Success</fb-button>
 	<fb-button :plain="true" @click="open3">Warning</fb-button>
@@ -104,45 +104,45 @@ const open4 = (): void => {
 	FbMessage.error('Oops, this is a error message.');
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		methods: {
-			open1: () => {
-				FbMessage.success('This is a message.');
-			},
-			open2: () => {
-				FbMessage({
-					message: 'Congrats, this is a success message.',
-					type: VariantTypes.SUCCESS,
-				});
-			},
-			open3: () => {
-				FbMessage({
-					message: 'Warning, this is a warning message.',
-					type: VariantTypes.WARNING,
-				});
-			},
-			open4: () => {
-				FbMessage.error('Oops, this is a error message.');
-			},
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        methods: {
+            open1: () => {
+                FbMessage.success("This is a message.");
+            },
+            open2: () => {
+                FbMessage({
+                    message: "Congrats, this is a success message.",
+                    type: VariantTypes.SUCCESS,
+                });
+            },
+            open3: () => {
+                FbMessage({
+                    message: "Warning, this is a warning message.",
+                    type: VariantTypes.WARNING,
+                });
+            },
+            open4: () => {
+                FbMessage.error("Oops, this is a error message.");
+            },
+        },
+        template: `
 <fb-button :plain="true" @click="open2">Success</fb-button>
 <fb-button :plain="true" @click="open3">Warning</fb-button>
 <fb-button :plain="true" @click="open1">Message</fb-button>
 <fb-button :plain="true" @click="open4">Error</fb-button>`,
-	}),
+    }),
 };
 
 export const Closable: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button :plain="true" @click="open1">Message</fb-button>
 	<fb-button :plain="true" @click="open2">Success</fb-button>
@@ -184,54 +184,54 @@ const open4 = (): void => {
 	});
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		methods: {
-			open1: () => {
-				FbMessage({
-					showClose: true,
-					message: 'This is a message.',
-				});
-			},
-			open2: () => {
-				FbMessage({
-					showClose: true,
-					message: 'Congrats, this is a success message.',
-					type: VariantTypes.SUCCESS,
-				});
-			},
-			open3: () => {
-				FbMessage({
-					showClose: true,
-					message: 'Warning, this is a warning message.',
-					type: VariantTypes.WARNING,
-				});
-			},
-			open4: () => {
-				FbMessage({
-					showClose: true,
-					message: 'Oops, this is a error message.',
-					type: VariantTypes.ERROR,
-				});
-			},
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        methods: {
+            open1: () => {
+                FbMessage({
+                    showClose: true,
+                    message: "This is a message.",
+                });
+            },
+            open2: () => {
+                FbMessage({
+                    showClose: true,
+                    message: "Congrats, this is a success message.",
+                    type: VariantTypes.SUCCESS,
+                });
+            },
+            open3: () => {
+                FbMessage({
+                    showClose: true,
+                    message: "Warning, this is a warning message.",
+                    type: VariantTypes.WARNING,
+                });
+            },
+            open4: () => {
+                FbMessage({
+                    showClose: true,
+                    message: "Oops, this is a error message.",
+                    type: VariantTypes.ERROR,
+                });
+            },
+        },
+        template: `
 <fb-button :plain="true" @click="open1">Message</fb-button>
 <fb-button :plain="true" @click="open2">Success</fb-button>
 <fb-button :plain="true" @click="open3">Warning</fb-button>
 <fb-button :plain="true" @click="open4">Error</fb-button>`,
-	}),
+    }),
 };
 
 export const CenteredText: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button plain @click="openCenter">Centered text</fb-button>
 </template>
@@ -247,31 +247,31 @@ const openCenter = (): void => {
 	});
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		methods: {
-			openCenter: () => {
-				FbMessage({
-					showClose: true,
-					message: 'Centered text',
-					center: true,
-				});
-			},
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        methods: {
+            openCenter: () => {
+                FbMessage({
+                    showClose: true,
+                    message: "Centered text",
+                    center: true,
+                });
+            },
+        },
+        template: `
 <fb-button plain @click="openCenter">Centered text</fb-button>`,
-	}),
+    }),
 };
 
 export const HtmlContent: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button :plain="true" @click="openHTML">Use HTML string</fb-button>
 </template>
@@ -286,30 +286,30 @@ const openHTML = (): void => {
 	});
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		methods: {
-			openHTML: () => {
-				FbMessage({
-					dangerouslyUseHTMLString: true,
-					message: '<strong>This is <i>HTML</i> string</strong>',
-				});
-			},
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        methods: {
+            openHTML: () => {
+                FbMessage({
+                    dangerouslyUseHTMLString: true,
+                    message: "<strong>This is <i>HTML</i> string</strong>",
+                });
+            },
+        },
+        template: `
 <fb-button :plain="true" @click="openHTML">Use HTML string</fb-button>`,
-	}),
+    }),
 };
 
 export const Grouping: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button :plain="true" @click="open">Show message</fb-button>
 </template>
@@ -325,22 +325,22 @@ const open = (): void => {
   });
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbButton },
-		methods: {
-			open: () => {
-				FbMessage({
-					message: 'This is a message.',
-					grouping: true,
-					type: VariantTypes.SUCCESS,
-				});
-			},
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbButton },
+        methods: {
+            open: () => {
+                FbMessage({
+                    message: "This is a message.",
+                    grouping: true,
+                    type: VariantTypes.SUCCESS,
+                });
+            },
+        },
+        template: `
 <fb-button :plain="true" @click="open">Show message</fb-button>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/modal/fb-modal.mdx b/docs/src/components/modal/fb-modal.mdx
index b6adcd8d..d0f2bd8d 100644
--- a/docs/src/components/modal/fb-modal.mdx
+++ b/docs/src/components/modal/fb-modal.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
-import * as ModalStories from './fb-modal.stories';
+import { Canvas, Controls, Meta } from "@storybook/blocks";
+import * as ModalStories from "./fb-modal.stories";
 
 <Meta of={ModalStories} />
 
@@ -20,10 +20,7 @@ The modal component displays a customizable modal dialog box.
 To show the modal, set the `model-value` or use `v-model` with a `Boolean` value. The modal consists of three sections: `header`, `body`, and `footer`.
 You can optionally define a title using the `title` property, which is empty by default.
 
-<Canvas
-	of={ModalStories.BasicUsage}
-	class={'test'}
-/>
+<Canvas of={ModalStories.BasicUsage} class={"test"} />
 
 > **TIP:**
 > The `before-close` event handler triggers only when the user clicks the close icon or the backdrop. If you have buttons in the footer slot that close
diff --git a/docs/src/components/modal/fb-modal.stories.scss b/docs/src/components/modal/fb-modal.stories.scss
index 164a3c82..6afb0029 100644
--- a/docs/src/components/modal/fb-modal.stories.scss
+++ b/docs/src/components/modal/fb-modal.stories.scss
@@ -1,9 +1,9 @@
 .fb-modal-story-block {
-	.fb-modal-story-block__custom-modal-header {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		gap: 16px;
-		padding: 10px;
-	}
+    .fb-modal-story-block__custom-modal-header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 16px;
+        padding: 10px;
+    }
 }
diff --git a/docs/src/components/modal/fb-modal.stories.ts b/docs/src/components/modal/fb-modal.stories.ts
index b31fe97b..1bf61772 100644
--- a/docs/src/components/modal/fb-modal.stories.ts
+++ b/docs/src/components/modal/fb-modal.stories.ts
@@ -1,373 +1,373 @@
-import { reactive, ref } from 'vue';
+import { reactive, ref } from "vue";
 
-import { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
-import { FasCircleXmark, FasImage, FasKeyboard } from '@fastybird/web-ui-icons';
-import { FbModal, FbButton, FbIcon, FbForm, FbFormItem, FbInput } from '@fastybird/web-ui-components';
-import { VariantTypes, LayoutTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { action } from "@storybook/addon-actions";
+import { FasCircleXmark, FasImage, FasKeyboard } from "@fastybird/web-ui-icons";
+import { FbModal, FbButton, FbIcon, FbForm, FbFormItem, FbInput } from "@fastybird/web-ui-components";
+import { VariantTypes, LayoutTypes } from "@fastybird/web-ui-constants";
 
-import './fb-modal.stories.scss';
+import "./fb-modal.stories.scss";
 
 const meta: Meta<typeof FbModal> = {
-	component: FbModal,
-	title: 'Components/Feedback/Modal',
-	argTypes: {
-		content: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'content of the modal footer for replacing whole modal content with custom one',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		header: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'content of the modal header for replacing whole modal header content with custom one',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		footer: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'content of the modal footer for replacing whole modal footer content with custom one',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		title: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'title of the modal',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		subtitle: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'subtitle of the modal',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		icon: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'modal header icon',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		default: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'content of modal',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		'left-button': {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'slot for using custom left button used as `Close` action',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		'right-button': {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'slot for using custom right button used as `Ok` action',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		variant: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [VariantTypes.PRIMARY, VariantTypes.DEFAULT, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.ERROR],
-			description: 'modal header and button variant',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: VariantTypes.PRIMARY },
-			},
-		},
-		layout: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [LayoutTypes.DEFAULT, LayoutTypes.PHONE, LayoutTypes.TABLET],
-			description: 'modal layout',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: LayoutTypes.DEFAULT },
-			},
-		},
-		width: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'width of modal, default is 50%',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '50%' },
-			},
-		},
-		fullscreen: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether the modal takes up full screen',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		top: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'value for `margin-top` of modal CSS, default is 15vh',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '15vh' },
-			},
-		},
-		showHeader: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether a modal header is displayed',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: true },
-			},
-		},
-		showFooter: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether a modal footer is displayed',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: true },
-			},
-		},
-		backdrop: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether a mask is displayed',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: true },
-			},
-		},
-		customClass: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'custom class names for backdrop',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		appendToBody: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether to append modal itself to body. A nested modal should have this attribute set to `true`',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		appendTo: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'which element the modal appends to. Will override `append-to-body`',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: 'body' },
-			},
-		},
-		lockScroll: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether scroll of body is disabled while modal is displayed',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		openDelay: {
-			type: { name: 'number', required: false },
-			control: { type: 'text' },
-			description: 'the time in milliseconds before open',
-			table: {
-				type: { summary: 'number' },
-				defaultValue: { summary: 0 },
-			},
-		},
-		closeDelay: {
-			type: { name: 'number', required: false },
-			control: { type: 'text' },
-			description: 'the time in milliseconds before close',
-			table: {
-				type: { summary: 'number' },
-				defaultValue: { summary: 0 },
-			},
-		},
-		closeOnClickBackdrop: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether the modal can be closed by clicking the backdrop',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: true },
-			},
-		},
-		closeOnPressEscape: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether the modal can be closed by pressing ESC',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: true },
-			},
-		},
-		showClose: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether to show a close button',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: true },
-			},
-		},
-		showLeftBtn: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether to show a left action button',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: true },
-			},
-		},
-		leftBtnLabel: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'left action button label',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: 'Close' },
-			},
-		},
-		showRightBtn: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether to show a right action button',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: true },
-			},
-		},
-		rightBtnLabel: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'right action button label',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: 'Ok' },
-			},
-		},
-		draggable: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'enable dragging feature for modal',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		overflow: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'draggable modal can overflow the viewport',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		center: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether to align the header and footer in center',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		alignCenter: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether to align the modal both horizontally and vertically',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		closable: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether enable or disable modal close action',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: true },
-			},
-		},
-		destroyOnClose: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'destroy elements in modal when closed',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-	},
-	args: {
-		variant: VariantTypes.PRIMARY,
-		layout: LayoutTypes.DEFAULT,
-		width: '50%',
-		fullscreen: false,
-		top: '15vh',
-		showHeader: true,
-		showFooter: true,
-		backdrop: true,
-		appendToBody: false,
-		appendTo: 'body',
-		lockScroll: false,
-		openDelay: 0,
-		closeDelay: 0,
-		closeOnClickBackdrop: true,
-		closeOnPressEscape: true,
-		showClose: true,
-		showLeftBtn: true,
-		leftBtnLabel: 'Close',
-		showRightBtn: true,
-		rightBtnLabel: 'Ok',
-		draggable: false,
-		overflow: false,
-		center: false,
-		alignCenter: false,
-		closable: true,
-		destroyOnClose: false,
-	},
-	excludeStories: /.*Data$/,
+    component: FbModal,
+    title: "Components/Feedback/Modal",
+    argTypes: {
+        content: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "content of the modal footer for replacing whole modal content with custom one",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        header: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "content of the modal header for replacing whole modal header content with custom one",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        footer: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "content of the modal footer for replacing whole modal footer content with custom one",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        title: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "title of the modal",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        subtitle: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "subtitle of the modal",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        icon: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "modal header icon",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        default: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "content of modal",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        "left-button": {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "slot for using custom left button used as `Close` action",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        "right-button": {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "slot for using custom right button used as `Ok` action",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        variant: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [VariantTypes.PRIMARY, VariantTypes.DEFAULT, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.ERROR],
+            description: "modal header and button variant",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: VariantTypes.PRIMARY },
+            },
+        },
+        layout: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [LayoutTypes.DEFAULT, LayoutTypes.PHONE, LayoutTypes.TABLET],
+            description: "modal layout",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: LayoutTypes.DEFAULT },
+            },
+        },
+        width: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "width of modal, default is 50%",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "50%" },
+            },
+        },
+        fullscreen: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether the modal takes up full screen",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        top: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "value for `margin-top` of modal CSS, default is 15vh",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "15vh" },
+            },
+        },
+        showHeader: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether a modal header is displayed",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            },
+        },
+        showFooter: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether a modal footer is displayed",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            },
+        },
+        backdrop: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether a mask is displayed",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            },
+        },
+        customClass: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "custom class names for backdrop",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        appendToBody: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether to append modal itself to body. A nested modal should have this attribute set to `true`",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        appendTo: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "which element the modal appends to. Will override `append-to-body`",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "body" },
+            },
+        },
+        lockScroll: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether scroll of body is disabled while modal is displayed",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        openDelay: {
+            type: { name: "number", required: false },
+            control: { type: "text" },
+            description: "the time in milliseconds before open",
+            table: {
+                type: { summary: "number" },
+                defaultValue: { summary: 0 },
+            },
+        },
+        closeDelay: {
+            type: { name: "number", required: false },
+            control: { type: "text" },
+            description: "the time in milliseconds before close",
+            table: {
+                type: { summary: "number" },
+                defaultValue: { summary: 0 },
+            },
+        },
+        closeOnClickBackdrop: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether the modal can be closed by clicking the backdrop",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            },
+        },
+        closeOnPressEscape: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether the modal can be closed by pressing ESC",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            },
+        },
+        showClose: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether to show a close button",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            },
+        },
+        showLeftBtn: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether to show a left action button",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            },
+        },
+        leftBtnLabel: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "left action button label",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "Close" },
+            },
+        },
+        showRightBtn: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether to show a right action button",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            },
+        },
+        rightBtnLabel: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "right action button label",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "Ok" },
+            },
+        },
+        draggable: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "enable dragging feature for modal",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        overflow: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "draggable modal can overflow the viewport",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        center: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether to align the header and footer in center",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        alignCenter: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether to align the modal both horizontally and vertically",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        closable: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether enable or disable modal close action",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            },
+        },
+        destroyOnClose: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "destroy elements in modal when closed",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+    },
+    args: {
+        variant: VariantTypes.PRIMARY,
+        layout: LayoutTypes.DEFAULT,
+        width: "50%",
+        fullscreen: false,
+        top: "15vh",
+        showHeader: true,
+        showFooter: true,
+        backdrop: true,
+        appendToBody: false,
+        appendTo: "body",
+        lockScroll: false,
+        openDelay: 0,
+        closeDelay: 0,
+        closeOnClickBackdrop: true,
+        closeOnPressEscape: true,
+        showClose: true,
+        showLeftBtn: true,
+        leftBtnLabel: "Close",
+        showRightBtn: true,
+        rightBtnLabel: "Ok",
+        draggable: false,
+        overflow: false,
+        center: false,
+        alignCenter: false,
+        closable: true,
+        destroyOnClose: false,
+    },
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -375,10 +375,10 @@ export default meta;
 type Story = StoryObj<typeof FbModal>;
 
 export const Playground: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button plain @click="modalVisible = true">
 		Click to open the Modal
@@ -394,24 +394,24 @@ import { ref } from 'vue';
 
 const modalVisible = ref(false);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: (args) => ({
-		components: { FbModal, FbButton },
-		setup() {
-			const modalVisible = ref<boolean>(false);
-
-			return { args, modalVisible };
-		},
-		methods: {
-			onClick: action('button-clicked'),
-			onClose: action('modal-close-action-triggered'),
-			onLeftClick: action('modal-left-button-clicked'),
-			onRightClick: action('modal-right-button-clicked'),
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: (args) => ({
+        components: { FbModal, FbButton },
+        setup() {
+            const modalVisible = ref<boolean>(false);
+
+            return { args, modalVisible };
+        },
+        methods: {
+            onClick: action("button-clicked"),
+            onClose: action("modal-close-action-triggered"),
+            onLeftClick: action("modal-left-button-clicked"),
+            onRightClick: action("modal-right-button-clicked"),
+        },
+        template: `
 <fb-button @click.prevent="() => { modalVisible = true }">Open modal</fb-button>
 
 <fb-modal
@@ -422,85 +422,85 @@ const modalVisible = ref(false);
 	@rightClick="(e) => { modalVisible = false; onRightClick(e) }"
 >
 	<template
-		v-if="${args.content !== null && typeof args.content !== 'undefined'}"
+		v-if="${args.content !== null && typeof args.content !== "undefined"}"
 		#content
 	>
 		${args.content}
 	</template>
 
 	<template
-		v-if="${args.header !== null && typeof args.header !== 'undefined'}"
+		v-if="${args.header !== null && typeof args.header !== "undefined"}"
 		#header
 	>
 		${args.header}
 	</template>
 
 	<template
-		v-if="${args.title !== null && typeof args.title !== 'undefined'}"
+		v-if="${args.title !== null && typeof args.title !== "undefined"}"
 		#title
 	>
 		${args.title}
 	</template>
 
 	<template
-		v-if="${args.subtitle !== null && typeof args.subtitle !== 'undefined'}"
+		v-if="${args.subtitle !== null && typeof args.subtitle !== "undefined"}"
 		#subtitle
 	>
 		${args.subtitle}
 	</template>
 
 	<template
-		v-if="${args.icon !== null && typeof args.icon !== 'undefined'}"
+		v-if="${args.icon !== null && typeof args.icon !== "undefined"}"
 		#icon
 	>
 		${args.icon}
 	</template>
 
 	<template
-		v-if="${args.default !== null && typeof args.default !== 'undefined'}"
+		v-if="${args.default !== null && typeof args.default !== "undefined"}"
 		#default
 	>
 		${args.default}
 	</template>
 
 	<template
-		v-if="${args.footer !== null && typeof args.footer !== 'undefined'}"
+		v-if="${args.footer !== null && typeof args.footer !== "undefined"}"
 		#footer
 	>
 		${args.footer}
 	</template>
 
 	<template
-		v-if="${args['left-button'] !== null && typeof args['left-button'] !== 'undefined'}"
+		v-if="${args["left-button"] !== null && typeof args["left-button"] !== "undefined"}"
 		#left-button
 	>
-		${args['left-button']}
+		${args["left-button"]}
 	</template>
 
 	<template
-		v-if="${args['right-button'] !== null && typeof args['right-button'] !== 'undefined'}"
+		v-if="${args["right-button"] !== null && typeof args["right-button"] !== "undefined"}"
 		#right-button
 	>
-		${args['right-button']}
+		${args["right-button"]}
 	</template>
 </fb-modal>`,
-	}),
-	args: {
-		title: 'Modal window header',
-		default: `
+    }),
+    args: {
+        title: "Modal window header",
+        default: `
 			<div>
 				<p>Phasellus sapien felis, vulputate a nibh eu, tempor dictum turpis. Pellentesque non ex condimentum, dictum mauris non, ullamcorper nisi. Nunc sodales vel libero ac gravida. Maecenas malesuada viverra odio at molestie.</p>
 				<p>Donec ultrices vel nibh a iaculis. Morbi dapibus sollicitudin libero facilisis dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 				<p>Phasellus sapien felis, vulputate a nibh eu, tempor dictum turpis. Pellentesque non ex condimentum, dictum mauris non, ullamcorper nisi. Nunc sodales vel libero ac gravida. Maecenas malesuada viverra odio at molestie.</p>
 			</div>`,
-	},
+    },
 };
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button plain @click="modalVisible = true">
 		Click to open the Modal
@@ -522,18 +522,18 @@ import { ref } from 'vue';
 
 const modalVisible = ref(false);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbModal, FbButton, FasImage },
-		setup() {
-			const modalVisible = ref(false);
-
-			return { FasImage, modalVisible };
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbModal, FbButton, FasImage },
+        setup() {
+            const modalVisible = ref(false);
+
+            return { FasImage, modalVisible };
+        },
+        template: `
 <fb-button plain @click="modalVisible = true">
 	Click to open the Modal
 </fb-button>
@@ -549,14 +549,14 @@ const modalVisible = ref(false);
 	<span>Phasellus sapien felis, vulputate a nibh eu, tempor dictum turpis. Pellentesque non ex condimentum, dictum mauris non, ullamcorper nisi.</span>
 	<template #icon><fas-image /></template>
 </fb-modal>`,
-	}),
+    }),
 };
 
 export const CustomContent: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button plain @click="modalTableVisible = true">
 		Open a Table nested Modal
@@ -638,54 +638,54 @@ const gridData = [
   },
 ];
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbModal, FbButton, FbForm, FbFormItem, FbInput, FasKeyboard },
-		setup() {
-			const modalTableVisible = ref(false);
-			const modalFormVisible = ref(false);
-			const formLabelWidth = '140px';
-
-			const form = reactive({
-				name: '',
-				region: '',
-				date1: '',
-				date2: '',
-				delivery: false,
-				type: [],
-				resource: '',
-				desc: '',
-			});
-
-			const gridData = [
-				{
-					date: '2016-05-02',
-					name: 'John Smith',
-					address: 'No.1518,  Jinshajiang Road, Putuo District',
-				},
-				{
-					date: '2016-05-04',
-					name: 'John Smith',
-					address: 'No.1518,  Jinshajiang Road, Putuo District',
-				},
-				{
-					date: '2016-05-01',
-					name: 'John Smith',
-					address: 'No.1518,  Jinshajiang Road, Putuo District',
-				},
-				{
-					date: '2016-05-03',
-					name: 'John Smith',
-					address: 'No.1518,  Jinshajiang Road, Putuo District',
-				},
-			];
-
-			return { modalTableVisible, modalFormVisible, formLabelWidth, form, gridData, FasKeyboard };
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbModal, FbButton, FbForm, FbFormItem, FbInput, FasKeyboard },
+        setup() {
+            const modalTableVisible = ref(false);
+            const modalFormVisible = ref(false);
+            const formLabelWidth = "140px";
+
+            const form = reactive({
+                name: "",
+                region: "",
+                date1: "",
+                date2: "",
+                delivery: false,
+                type: [],
+                resource: "",
+                desc: "",
+            });
+
+            const gridData = [
+                {
+                    date: "2016-05-02",
+                    name: "John Smith",
+                    address: "No.1518,  Jinshajiang Road, Putuo District",
+                },
+                {
+                    date: "2016-05-04",
+                    name: "John Smith",
+                    address: "No.1518,  Jinshajiang Road, Putuo District",
+                },
+                {
+                    date: "2016-05-01",
+                    name: "John Smith",
+                    address: "No.1518,  Jinshajiang Road, Putuo District",
+                },
+                {
+                    date: "2016-05-03",
+                    name: "John Smith",
+                    address: "No.1518,  Jinshajiang Road, Putuo District",
+                },
+            ];
+
+            return { modalTableVisible, modalFormVisible, formLabelWidth, form, gridData, FasKeyboard };
+        },
+        template: `
 <fb-button plain @click="modalTableVisible = true">
 	Open a Table nested Modal
 </fb-button>
@@ -733,14 +733,14 @@ const gridData = [
 		</div>
 	</template>
 </fb-modal>`,
-	}),
+    }),
 };
 
 export const CustomHeader: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button plain @click="modalVisible = true">
 		Open Modal with customized header
@@ -776,18 +776,18 @@ const modalVisible = ref(false);
   gap: 16px;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbModal, FbButton, FbIcon, FasCircleXmark },
-		setup() {
-			const modalVisible = ref(false);
-
-			return { FasCircleXmark, modalVisible };
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbModal, FbButton, FbIcon, FasCircleXmark },
+        setup() {
+            const modalVisible = ref(false);
+
+            return { FasCircleXmark, modalVisible };
+        },
+        template: `
 <div class="fb-modal-story-block">
 	<fb-button plain @click="modalVisible = true">
 		Open Modal with customized header
@@ -814,14 +814,14 @@ const modalVisible = ref(false);
 		This is modal content.
 	</fb-modal>
 </div>`,
-	}),
+    }),
 };
 
 export const NestedModal: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button plain @click="outerVisible = true">
 		Open the outer Modal
@@ -854,19 +854,19 @@ import { ref } from 'vue';
 const outerVisible = ref(false);
 const innerVisible = ref(false);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbModal, FbButton },
-		setup() {
-			const outerVisible = ref(false);
-			const innerVisible = ref(false);
-
-			return { outerVisible, innerVisible };
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbModal, FbButton },
+        setup() {
+            const outerVisible = ref(false);
+            const innerVisible = ref(false);
+
+            return { outerVisible, innerVisible };
+        },
+        template: `
 <div>
 	<fb-button plain @click="outerVisible = true">
 		Open the outer Modal
@@ -894,14 +894,14 @@ const innerVisible = ref(false);
 		</template>
 	</fb-modal>
 </div>`,
-	}),
+    }),
 };
 
 export const CentredContent: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button plain @click="modalVisible = true">
 		Click to open the Modal
@@ -923,18 +923,18 @@ import { ref } from 'vue';
 
 const modalVisible = ref(false);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbModal, FbButton, FasImage },
-		setup() {
-			const modalVisible = ref(false);
-
-			return { FasImage, modalVisible };
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbModal, FbButton, FasImage },
+        setup() {
+            const modalVisible = ref(false);
+
+            return { FasImage, modalVisible };
+        },
+        template: `
 <fb-button plain @click="modalVisible = true">
 	Click to open the Modal
 </fb-button>
@@ -950,14 +950,14 @@ const modalVisible = ref(false);
 >
 	<span>It should be noted that the content will not be aligned in center by default</span>
 </fb-modal>`,
-	}),
+    }),
 };
 
 export const AlignCentred: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button plain @click="modalVisible = true">
 		Click to open the Modal
@@ -979,18 +979,18 @@ import { ref } from 'vue';
 
 const modalVisible = ref(false);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbModal, FbButton, FasImage },
-		setup() {
-			const modalVisible = ref(false);
-
-			return { FasImage, modalVisible };
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbModal, FbButton, FasImage },
+        setup() {
+            const modalVisible = ref(false);
+
+            return { FasImage, modalVisible };
+        },
+        template: `
 <fb-button plain @click="modalVisible = true">
 	Click to open the Modal
 </fb-button>
@@ -1006,14 +1006,14 @@ const modalVisible = ref(false);
 >
 	<span>It should be noted that the content will not be aligned in center by default</span>
 </fb-modal>`,
-	}),
+    }),
 };
 
 export const Draggable: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button plain @click="modalVisible = true">
     Open a draggable Modal
@@ -1051,19 +1051,19 @@ import { ref } from 'vue';
 const modalVisible = ref(false);
 const modalVisiblemodalOverflowVisible = ref(false);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbModal, FbButton, FasImage },
-		setup() {
-			const modalVisible = ref(false);
-			const modalOverflowVisible = ref(false);
-
-			return { FasImage, modalVisible, modalOverflowVisible };
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbModal, FbButton, FasImage },
+        setup() {
+            const modalVisible = ref(false);
+            const modalOverflowVisible = ref(false);
+
+            return { FasImage, modalVisible, modalOverflowVisible };
+        },
+        template: `
 <fb-button plain @click="modalVisible = true">
 	Open a draggable Modal
 </fb-button>
@@ -1092,14 +1092,14 @@ const modalVisiblemodalOverflowVisible = ref(false);
 >
 	<span>It's a overflow draggable Dialog</span>
 </fb-modal>`,
-	}),
+    }),
 };
 
 export const WithDescription: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button plain @click="modalVisible = true">
 		Click to open the Modal
@@ -1124,18 +1124,18 @@ import { ref } from 'vue';
 
 const modalVisible = ref(false);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbModal, FbButton, FasImage },
-		setup() {
-			const modalVisible = ref(false);
-
-			return { FasImage, modalVisible };
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbModal, FbButton, FasImage },
+        setup() {
+            const modalVisible = ref(false);
+
+            return { FasImage, modalVisible };
+        },
+        template: `
 <fb-button plain @click="modalVisible = true">
 	Click to open the Modal
 </fb-button>
@@ -1154,5 +1154,5 @@ const modalVisible = ref(false);
 	</template>
 	<template #icon><fas-image /></template>
 </fb-modal>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/radio/fb-radio.mdx b/docs/src/components/radio/fb-radio.mdx
index 60349753..6b9004f3 100644
--- a/docs/src/components/radio/fb-radio.mdx
+++ b/docs/src/components/radio/fb-radio.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as RadioStories from './fb-radio.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as RadioStories from "./fb-radio.stories";
 
 <Meta of={RadioStories} />
 
@@ -12,19 +12,13 @@ This component allows for single selection from multiple options.
 It's recommended not to use Radios for too many options; instead, consider using the Select component. To create a Radio component, simply bind a variable
 to the `v-model` of the Radio component. This variable will hold the value of the selected Radio button, which can be of type `String`, `Number`, or `Boolean`.
 
-<Canvas
-	withToolbar={true}
-	of={RadioStories.BasicUsage}
-/>
+<Canvas withToolbar={true} of={RadioStories.BasicUsage} />
 
 ## Disabled
 
 To disable a Radio button, simply add the `disabled` property to it.
 
-<Canvas
-	withToolbar={true}
-	of={RadioStories.Disabled}
-/>
+<Canvas withToolbar={true} of={RadioStories.Disabled} />
 
 ## Radio Group
 
@@ -32,29 +26,20 @@ To create a group of mutually exclusive options, you can use the `fb-radio-group
 to the `v-model` of the `fb-radio-group` element to track the selected option. Each `fb-radio` component should specify its label value. Additionally,
 you can listen for the `change` event on the `fb-radio-group` component to handle changes in selection, with the current value provided as a parameter.
 
-<Canvas
-	withToolbar={true}
-	of={RadioStories.RadioGroup}
-/>
+<Canvas withToolbar={true} of={RadioStories.RadioGroup} />
 
 ## Button Style
 
 To style Radio buttons as buttons, simply replace the `fb-radio` element with the `fb-radio-button` element. Additionally, you can use the `size` property
 to adjust the button size as needed.
 
-<Canvas
-	withToolbar={true}
-	of={RadioStories.Button}
-/>
+<Canvas withToolbar={true} of={RadioStories.Button} />
 
 ## With Borders
 
 The `border` property adds a border around the Radio buttons. You can use this property to enhance the visual appearance of the Radio buttons with borders.
 
-<Canvas
-	withToolbar={true}
-	of={RadioStories.Bordered}
-/>
+<Canvas withToolbar={true} of={RadioStories.Bordered} />
 
 ---
 
diff --git a/docs/src/components/radio/fb-radio.stories.scss b/docs/src/components/radio/fb-radio.stories.scss
index 1b77475c..8b68017c 100644
--- a/docs/src/components/radio/fb-radio.stories.scss
+++ b/docs/src/components/radio/fb-radio.stories.scss
@@ -1,11 +1,11 @@
 .fb-radio-story-block {
-	max-width: 600px;
+    max-width: 600px;
 
-	.fb-radio-story-block__item {
-		margin-bottom: 20px;
-	}
+    .fb-radio-story-block__item {
+        margin-bottom: 20px;
+    }
 
-	.fb-radio-story-block__item:last-child {
-		margin-bottom: 0;
-	}
+    .fb-radio-story-block__item:last-child {
+        margin-bottom: 0;
+    }
 }
diff --git a/docs/src/components/radio/fb-radio.stories.ts b/docs/src/components/radio/fb-radio.stories.ts
index 99b4b2d5..ec12d83e 100644
--- a/docs/src/components/radio/fb-radio.stories.ts
+++ b/docs/src/components/radio/fb-radio.stories.ts
@@ -1,15 +1,15 @@
-import { ref } from 'vue';
+import { ref } from "vue";
 
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbRadio, FbRadioGroup, FbRadioButton } from '@fastybird/web-ui-components';
-import { ComponentSizeTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbRadio, FbRadioGroup, FbRadioButton } from "@fastybird/web-ui-components";
+import { ComponentSizeTypes } from "@fastybird/web-ui-constants";
 
-import './fb-radio.stories.scss';
+import "./fb-radio.stories.scss";
 
 const meta: Meta<typeof FbRadio> = {
-	component: FbRadio,
-	title: 'Components/Form/Radio',
-	excludeStories: /.*Data$/,
+    component: FbRadio,
+    title: "Components/Form/Radio",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -17,10 +17,10 @@ export default meta;
 type Story = StoryObj<typeof FbRadio>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<fb-radio-group v-model="radio1">
@@ -55,24 +55,24 @@ const radio1 = ref('1');
 const radio2 = ref('1');
 const radio3 = ref('1');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbRadio, FbRadioGroup },
-		setup: () => {
-			const radio1 = ref('1');
-			const radio2 = ref('1');
-			const radio3 = ref('1');
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbRadio, FbRadioGroup },
+        setup: () => {
+            const radio1 = ref("1");
+            const radio2 = ref("1");
+            const radio3 = ref("1");
 
-			return {
-				radio1,
-				radio2,
-				radio3,
-			};
-		},
-		template: `
+            return {
+                radio1,
+                radio2,
+                radio3,
+            };
+        },
+        template: `
 <div class="fb-radio-story-block">
 	<div class="fb-radio-story-block__item">
 		<fb-radio-group v-model="radio1">
@@ -99,14 +99,14 @@ const radio3 = ref('1');
 		</fb-radio-group>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Disabled: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-radio v-model="radio" disabled value="disabled">Option A</fb-radio>
 	<fb-radio v-model="radio" disabled value="selected and disabled">Option B</fb-radio>
@@ -117,32 +117,32 @@ import { ref } from 'vue';
 
 const radio = ref('selected and disabled');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbRadio },
-		setup: () => {
-			const radio = ref('selected and disabled');
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbRadio },
+        setup: () => {
+            const radio = ref("selected and disabled");
 
-			return {
-				radio,
-			};
-		},
-		template: `
+            return {
+                radio,
+            };
+        },
+        template: `
 <div class="fb-radio-story-block">
 	<fb-radio v-model="radio" disabled value="disabled">Option A</fb-radio>
 	<fb-radio v-model="radio" disabled value="selected and disabled">Option B</fb-radio>
 </div>`,
-	}),
+    }),
 };
 
 export const RadioGroup: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-radio-group v-model="radio">
 		<fb-radio :value="3">Option A</fb-radio>
@@ -156,20 +156,20 @@ import { ref } from 'vue';
 
 const radio = ref(3)
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbRadio, FbRadioGroup },
-		setup: () => {
-			const radio = ref(3);
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbRadio, FbRadioGroup },
+        setup: () => {
+            const radio = ref(3);
 
-			return {
-				radio,
-			};
-		},
-		template: `
+            return {
+                radio,
+            };
+        },
+        template: `
 <div class="fb-radio-story-block">
 	<fb-radio-group v-model="radio">
 		<fb-radio :value="3">Option A</fb-radio>
@@ -177,14 +177,14 @@ const radio = ref(3)
 		<fb-radio :value="9">Option C</fb-radio>
 	</fb-radio-group>
 </div>`,
-	}),
+    }),
 };
 
 export const Button: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<fb-radio-group v-model="radio1" size="${ComponentSizeTypes.LARGE}">
@@ -219,24 +219,24 @@ const radio1 = ref('New York');
 const radio2 = ref('New York');
 const radio3 = ref('New York');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbRadio, FbRadioGroup, FbRadioButton },
-		setup: () => {
-			const radio1 = ref('New York');
-			const radio2 = ref('New York');
-			const radio3 = ref('New York');
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbRadio, FbRadioGroup, FbRadioButton },
+        setup: () => {
+            const radio1 = ref("New York");
+            const radio2 = ref("New York");
+            const radio3 = ref("New York");
 
-			return {
-				radio1,
-				radio2,
-				radio3,
-			};
-		},
-		template: `
+            return {
+                radio1,
+                radio2,
+                radio3,
+            };
+        },
+        template: `
 <div class="fb-radio-story-block">
 	<div class="fb-radio-story-block__item">
 		<fb-radio-group v-model="radio1" size="${ComponentSizeTypes.LARGE}">
@@ -263,14 +263,14 @@ const radio3 = ref('New York');
 		</fb-radio-group>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Bordered: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<fb-radio-group v-model="radio1">
@@ -306,26 +306,26 @@ const radio2 = ref('1');
 const radio3 = ref('1');
 const radio4 = ref('1');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbRadio, FbRadioGroup },
-		setup: () => {
-			const radio1 = ref('1');
-			const radio2 = ref('1');
-			const radio3 = ref('1');
-			const radio4 = ref('1');
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbRadio, FbRadioGroup },
+        setup: () => {
+            const radio1 = ref("1");
+            const radio2 = ref("1");
+            const radio3 = ref("1");
+            const radio4 = ref("1");
 
-			return {
-				radio1,
-				radio2,
-				radio3,
-				radio4,
-			};
-		},
-		template: `
+            return {
+                radio1,
+                radio2,
+                radio3,
+                radio4,
+            };
+        },
+        template: `
 <div class="fb-radio-story-block">
 	<div class="fb-radio-story-block__item">
 		<fb-radio-group v-model="radio1">
@@ -352,5 +352,5 @@ const radio4 = ref('1');
 		</fb-radio-group>
 	</div>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/result/fb-result.mdx b/docs/src/components/result/fb-result.mdx
index 3c120238..3ac89da0 100644
--- a/docs/src/components/result/fb-result.mdx
+++ b/docs/src/components/result/fb-result.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as ResultStories from './fb-result.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as ResultStories from "./fb-result.stories";
 
 <Meta of={ResultStories} />
 
diff --git a/docs/src/components/result/fb-result.stories.ts b/docs/src/components/result/fb-result.stories.ts
index 181e6d15..0468d8eb 100644
--- a/docs/src/components/result/fb-result.stories.ts
+++ b/docs/src/components/result/fb-result.stories.ts
@@ -1,58 +1,58 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FarFaceSmile } from '@fastybird/web-ui-icons';
-import { FbResult, FbRow, FbCol, FbButton, FbIcon, ResultIconTypes, resultIcons } from '@fastybird/web-ui-components';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FarFaceSmile } from "@fastybird/web-ui-icons";
+import { FbResult, FbRow, FbCol, FbButton, FbIcon, ResultIconTypes, resultIcons } from "@fastybird/web-ui-components";
 
-import './fb-result.stories.scss';
+import "./fb-result.stories.scss";
 
 const meta: Meta<typeof FbResult> = {
-	component: FbResult,
-	title: 'Components/Feedback/Result',
-	argTypes: {
-		title: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'content as result title',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		subtitle: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'content as result subtitle',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		status: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: resultIcons,
-			description: 'result status variant',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: ResultIconTypes.INFO },
-			},
-		},
-		animation: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'animate status icon',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-	},
-	args: {
-		title: 'Successfully Configured Device!',
-		subtitle: 'Your device: Living room heater is being to be prepared, please wait.',
-		status: ResultIconTypes.INFO,
-		animation: false,
-	},
-	excludeStories: /.*Data$/,
+    component: FbResult,
+    title: "Components/Feedback/Result",
+    argTypes: {
+        title: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "content as result title",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        subtitle: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "content as result subtitle",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        status: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: resultIcons,
+            description: "result status variant",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: ResultIconTypes.INFO },
+            },
+        },
+        animation: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "animate status icon",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+    },
+    args: {
+        title: "Successfully Configured Device!",
+        subtitle: "Your device: Living room heater is being to be prepared, please wait.",
+        status: ResultIconTypes.INFO,
+        animation: false,
+    },
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -60,14 +60,14 @@ export default meta;
 type Story = StoryObj<typeof FbResult>;
 
 export const Component: Story = {
-	tags: ['hideInSidebar'],
+    tags: ["hideInSidebar"],
 };
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-row>
 		<fb-col :sm="12" :lg="6">
@@ -116,13 +116,13 @@ export const BasicUsage: Story = {
 		</fb-col>
 	</fb-row>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbResult, FbRow, FbCol, FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbResult, FbRow, FbCol, FbButton },
+        template: `
 <fb-row>
 	<fb-col :sm="12" :lg="6">
 		<fb-result
@@ -169,14 +169,14 @@ export const BasicUsage: Story = {
 		</fb-result>
 	</fb-col>
 </fb-row>`,
-	}),
+    }),
 };
 
 export const LoadingStatus403: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-result
 		status="${ResultIconTypes.NOT_ALLOWED}"
@@ -188,13 +188,13 @@ export const LoadingStatus403: Story = {
 		</template>
 	</fb-result>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbResult, FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbResult, FbButton },
+        template: `
 <fb-result
 	status="${ResultIconTypes.NOT_ALLOWED}"
 	title="403"
@@ -204,14 +204,14 @@ export const LoadingStatus403: Story = {
 		<fb-button>Back Home</fb-button>
 	</template>
 </fb-result>`,
-	}),
+    }),
 };
 
 export const LoadingStatus404: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-result
 		status="${ResultIconTypes.NOT_FOUND}"
@@ -223,13 +223,13 @@ export const LoadingStatus404: Story = {
 		</template>
 	</fb-result>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbResult, FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbResult, FbButton },
+        template: `
 <fb-result
 	status="${ResultIconTypes.NOT_FOUND}"
 	title="404"
@@ -239,14 +239,14 @@ export const LoadingStatus404: Story = {
 		<fb-button>Back Home</fb-button>
 	</template>
 </fb-result>`,
-	}),
+    }),
 };
 
 export const LoadingStatus500: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-result
 		status="${ResultIconTypes.SERVER_ERROR}"
@@ -258,13 +258,13 @@ export const LoadingStatus500: Story = {
 		</template>
 	</fb-result>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbResult, FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbResult, FbButton },
+        template: `
 <fb-result
 	status="${ResultIconTypes.SERVER_ERROR}"
 	title="500"
@@ -274,14 +274,14 @@ export const LoadingStatus500: Story = {
 		<fb-button>Back Home</fb-button>
 	</template>
 </fb-result>`,
-	}),
+    }),
 };
 
 export const CustomIcon: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-result
 		title="Great, we have done all the operations!"
@@ -296,13 +296,13 @@ export const CustomIcon: Story = {
 		</template>
 	</fb-result>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbResult, FbButton, FbIcon, FarFaceSmile },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbResult, FbButton, FbIcon, FarFaceSmile },
+        template: `
 <fb-result
 	title="Great, we have done all the operations!"
 >
@@ -315,5 +315,5 @@ export const CustomIcon: Story = {
 		<fb-button>Next</fb-button>
 	</template>
 </fb-result>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/scrollbar/fb-scrollbar.mdx b/docs/src/components/scrollbar/fb-scrollbar.mdx
index 629e25d3..443e1dc4 100644
--- a/docs/src/components/scrollbar/fb-scrollbar.mdx
+++ b/docs/src/components/scrollbar/fb-scrollbar.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as ScrollbarStories from './fb-scrollbar.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as ScrollbarStories from "./fb-scrollbar.stories";
 
 <Meta of={ScrollbarStories} />
 
diff --git a/docs/src/components/scrollbar/fb-scrollbar.stories.scss b/docs/src/components/scrollbar/fb-scrollbar.stories.scss
index 60eafbb7..1fd6884f 100644
--- a/docs/src/components/scrollbar/fb-scrollbar.stories.scss
+++ b/docs/src/components/scrollbar/fb-scrollbar.stories.scss
@@ -1,31 +1,31 @@
 .fb-scrollbar-story-block {
-	.fb-scrollbar-story-block__inner {
-		display: flex;
-	}
+    .fb-scrollbar-story-block__inner {
+        display: flex;
+    }
 
-	.fb-scrollbar-story-block__item {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 50px;
-		margin: 10px;
-		text-align: center;
-		border-radius: 4px;
-		background: var(--fb-color-primary-light-9);
-		color: var(--fb-color-primary);
-	}
+    .fb-scrollbar-story-block__item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 50px;
+        margin: 10px;
+        text-align: center;
+        border-radius: 4px;
+        background: var(--fb-color-primary-light-9);
+        color: var(--fb-color-primary);
+    }
 
-	.fb-scrollbar-story-block__item--vertical {
-		flex-shrink: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100px;
-		height: 150px;
-		margin: 10px;
-		text-align: center;
-		border-radius: 4px;
-		background: var(--fb-color-danger-light-9);
-		color: var(--fb-color-danger);
-	}
+    .fb-scrollbar-story-block__item--vertical {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100px;
+        height: 150px;
+        margin: 10px;
+        text-align: center;
+        border-radius: 4px;
+        background: var(--fb-color-danger-light-9);
+        color: var(--fb-color-danger);
+    }
 }
diff --git a/docs/src/components/scrollbar/fb-scrollbar.stories.ts b/docs/src/components/scrollbar/fb-scrollbar.stories.ts
index c9c14cf5..b48bfb11 100644
--- a/docs/src/components/scrollbar/fb-scrollbar.stories.ts
+++ b/docs/src/components/scrollbar/fb-scrollbar.stories.ts
@@ -1,15 +1,15 @@
-import { onMounted, ref } from 'vue';
+import { onMounted, ref } from "vue";
 
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbScrollbar, FbButton, FbSlider } from '@fastybird/web-ui-components';
-import { EffectTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbScrollbar, FbButton, FbSlider } from "@fastybird/web-ui-components";
+import { EffectTypes } from "@fastybird/web-ui-constants";
 
-import './fb-scrollbar.stories.scss';
+import "./fb-scrollbar.stories.scss";
 
 const meta: Meta<typeof FbScrollbar> = {
-	component: FbScrollbar,
-	title: 'Components/Basic/Scrollbar',
-	excludeStories: /.*Data$/,
+    component: FbScrollbar,
+    title: "Components/Basic/Scrollbar",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -17,10 +17,10 @@ export default meta;
 type Story = StoryObj<typeof FbScrollbar>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-scrollbar height="400px">
 		<p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
@@ -40,13 +40,13 @@ export const BasicUsage: Story = {
   color: var(--fb-color-primary);
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbScrollbar },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbScrollbar },
+        template: `
 <div class="fb-scrollbar-story-block">
 	<fb-scrollbar height="400px">
 		<p v-for="item in 20" :key="item" class="fb-scrollbar-story-block__item">
@@ -54,14 +54,14 @@ export const BasicUsage: Story = {
 		</p>
 	</fb-scrollbar>
 </div>`,
-	}),
+    }),
 };
 
 export const WithShadow: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-scrollbar height="400px" shadow="${EffectTypes.DARK}">
 		<p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
@@ -81,13 +81,13 @@ export const WithShadow: Story = {
   color: var(--fb-color-primary);
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbScrollbar },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbScrollbar },
+        template: `
 <div class="fb-scrollbar-story-block">
 	<fb-scrollbar height="400px" shadow="${EffectTypes.DARK}">
 		<p v-for="item in 20" :key="item" class="fb-scrollbar-story-block__item">
@@ -95,14 +95,14 @@ export const WithShadow: Story = {
 		</p>
 	</fb-scrollbar>
 </div>`,
-	}),
+    }),
 };
 
 export const Horizontal: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-scrollbar>
 		<div class="scrollbar-flex-content">
@@ -132,13 +132,13 @@ export const Horizontal: Story = {
   color: var(--fb-color-danger);
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbScrollbar },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbScrollbar },
+        template: `
 <div class="fb-scrollbar-story-block">
 	<fb-scrollbar>
 		<div class="fb-scrollbar-story-block__inner">
@@ -148,14 +148,14 @@ export const Horizontal: Story = {
 		</div>
 	</fb-scrollbar>
 </div>`,
-	}),
+    }),
 };
 
 export const MaxHeight: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button @click="add">Add Item</fb-button>
 	<fb-button @click="onDelete">Delete Item</fb-button>
@@ -195,32 +195,32 @@ const onDelete = () => {
   color: var(--fb-color-primary);
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbScrollbar, FbButton },
-		setup: () => {
-			const count = ref(3);
-
-			const add = () => {
-				count.value++;
-			};
-
-			const onDelete = () => {
-				if (count.value > 0) {
-					count.value--;
-				}
-			};
-
-			return {
-				count,
-				add,
-				onDelete,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbScrollbar, FbButton },
+        setup: () => {
+            const count = ref(3);
+
+            const add = () => {
+                count.value++;
+            };
+
+            const onDelete = () => {
+                if (count.value > 0) {
+                    count.value--;
+                }
+            };
+
+            return {
+                count,
+                add,
+                onDelete,
+            };
+        },
+        template: `
 <div class="fb-scrollbar-story-block">
 	<fb-button @click="add">Add Item</fb-button>
 
@@ -232,14 +232,14 @@ const onDelete = () => {
 		</p>
 	</fb-scrollbar>
 </div>`,
-	}),
+    }),
 };
 
 export const Manual: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
 		<div ref="innerRef">
@@ -300,43 +300,43 @@ const formatTooltip = (value: number): string => {
   margin-top: 20px;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbScrollbar, FbSlider },
-		setup: () => {
-			const max = ref<number>(0);
-			const value = ref<number>(0);
-			const innerRef = ref<HTMLDivElement | undefined>();
-			const scrollbarRef = ref<InstanceType<typeof FbScrollbar>>();
-
-			onMounted((): void => {
-				max.value = innerRef.value!.clientHeight - 380;
-			});
-
-			const inputSlider = (value: number): void => {
-				scrollbarRef.value!.setScrollTop(value);
-			};
-			const scroll = ({ scrollTop }): void => {
-				value.value = scrollTop;
-			};
-			const formatTooltip = (value: number): string => {
-				return `${value} px`;
-			};
-
-			return {
-				max,
-				value,
-				innerRef,
-				scrollbarRef,
-				inputSlider,
-				scroll,
-				formatTooltip,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbScrollbar, FbSlider },
+        setup: () => {
+            const max = ref<number>(0);
+            const value = ref<number>(0);
+            const innerRef = ref<HTMLDivElement | undefined>();
+            const scrollbarRef = ref<InstanceType<typeof FbScrollbar>>();
+
+            onMounted((): void => {
+                max.value = innerRef.value!.clientHeight - 380;
+            });
+
+            const inputSlider = (value: number): void => {
+                scrollbarRef.value!.setScrollTop(value);
+            };
+            const scroll = ({ scrollTop }): void => {
+                value.value = scrollTop;
+            };
+            const formatTooltip = (value: number): string => {
+                return `${value} px`;
+            };
+
+            return {
+                max,
+                value,
+                innerRef,
+                scrollbarRef,
+                inputSlider,
+                scroll,
+                formatTooltip,
+            };
+        },
+        template: `
 <div class="fb-scrollbar-story-block">
 	<fb-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
 		<div ref="innerRef">
@@ -353,5 +353,5 @@ const formatTooltip = (value: number): string => {
 		@input="inputSlider"
 	/>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/select/fb-select.mdx b/docs/src/components/select/fb-select.mdx
index d4ab3d60..aff6cb89 100644
--- a/docs/src/components/select/fb-select.mdx
+++ b/docs/src/components/select/fb-select.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as SelectStories from './fb-select.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as SelectStories from "./fb-select.stories";
 
 <Meta of={SelectStories} />
 
@@ -11,19 +11,13 @@ When there are plenty of options, use a drop-down menu to display and select des
 
 `v-model` is the value of `fb-option` that is currently selected.
 
-<Canvas
-	withToolbar={true}
-	of={SelectStories.BasicUsage}
-/>
+<Canvas withToolbar={true} of={SelectStories.BasicUsage} />
 
 ## Disabled Option
 
 Set the value of `disabled` property of the `fb-option` to `true` to disable this option.
 
-<Canvas
-	withToolbar={true}
-	of={SelectStories.DisabledOption}
-/>
+<Canvas withToolbar={true} of={SelectStories.DisabledOption} />
 
 ## Disabled Select
 
@@ -31,10 +25,7 @@ Disable the whole component.
 
 Set `disabled` property of `fb-select` to make it disabled.
 
-<Canvas
-	withToolbar={true}
-	of={SelectStories.DisabledSelect}
-/>
+<Canvas withToolbar={true} of={SelectStories.DisabledSelect} />
 
 ## Clearable Single Select
 
@@ -42,10 +33,7 @@ You can clear Select using a clear icon.
 
 Set `clearable` property for `fb-select` and a clear icon will appear. Note that `clearable` is only for single select.
 
-<Canvas
-	withToolbar={true}
-	of={SelectStories.Clearable}
-/>
+<Canvas withToolbar={true} of={SelectStories.Clearable} />
 
 ## Multiple select
 
@@ -55,10 +43,7 @@ Set `multiple` property for `fb-select` to enable multiple mode. In this case, t
 the selected options will be displayed as Tags. You can collapse them to a text by using `collapse-tags` property. You can check them when mouse hover
 collapse text by using `collapse-tags-tooltip` property.
 
-<Canvas
-	withToolbar={true}
-	of={SelectStories.MultipleSelect}
-/>
+<Canvas withToolbar={true} of={SelectStories.MultipleSelect} />
 
 ## Custom Template
 
@@ -66,10 +51,7 @@ You can customize HTML templates for options.
 
 Insert customized HTML templates into the slot of `fb-option`.
 
-<Canvas
-	withToolbar={true}
-	of={SelectStories.CustomTemplate}
-/>
+<Canvas withToolbar={true} of={SelectStories.CustomTemplate} />
 
 ## Header Of The Dropdown
 
@@ -77,10 +59,7 @@ You can customize the header of the dropdown.
 
 Use slot to customize the content.
 
-<Canvas
-	withToolbar={true}
-	of={SelectStories.DropdownHeader}
-/>
+<Canvas withToolbar={true} of={SelectStories.DropdownHeader} />
 
 ## Footer Of The Dropdown
 
@@ -88,10 +67,7 @@ You can customize the footer of the dropdown.
 
 Use slot to customize the content.
 
-<Canvas
-	withToolbar={true}
-	of={SelectStories.DropdownFooter}
-/>
+<Canvas withToolbar={true} of={SelectStories.DropdownFooter} />
 
 ## Grouping
 
@@ -99,10 +75,7 @@ Display options in groups.
 
 Use `fb-option-group` to group the options, and its `label` property stands for the name of the group.
 
-<Canvas
-	withToolbar={true}
-	of={SelectStories.Grouping}
-/>
+<Canvas withToolbar={true} of={SelectStories.Grouping} />
 
 ## Option Filtering
 
@@ -112,10 +85,7 @@ Adding `filterable` to `fb-select` enables filtering. By default, Select will fi
 prefer other filtering strategies, you can pass the `filter-method`. `filter-method` is a Function that gets called when the input value changes, and its
 parameter is the current input value.
 
-<Canvas
-	withToolbar={true}
-	of={SelectStories.OptionFilter}
-/>
+<Canvas withToolbar={true} of={SelectStories.OptionFilter} />
 
 ## Remote Search
 
@@ -125,10 +95,7 @@ Set the value of `filterable` and `remote` property with `true` to enable remote
 that gets called when the input value changes, and its parameter is the current input value. Note that if `fb-option` is rendered with the v-for directive,
 you should add the key attribute for `fb-option`. Its value needs to be unique, such as `item.value` in the following example.
 
-<Canvas
-	withToolbar={true}
-	of={SelectStories.RemoteSearch}
-/>
+<Canvas withToolbar={true} of={SelectStories.RemoteSearch} />
 
 ## Create New Items
 
@@ -138,10 +105,7 @@ By using the `allow-create` property, users can create new items by typing in th
 This example also demonstrates `default-first-option`. When this attribute is set to true, you can select the first option in the current option list
 by hitting enter without having to navigate with mouse or arrow keys.
 
-<Canvas
-	withToolbar={true}
-	of={SelectStories.CreateNewItems}
-/>
+<Canvas withToolbar={true} of={SelectStories.CreateNewItems} />
 
 ## Use Value-Key Attribute
 
@@ -150,10 +114,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 By using the `value-key` property, data with duplicate labels can be properly handled. The value of the `label` property is duplicated, but the option
 can be identified through the id.
 
-<Canvas
-	withToolbar={true}
-	of={SelectStories.ValueKeyAttribute}
-/>
+<Canvas withToolbar={true} of={SelectStories.ValueKeyAttribute} />
 
 ## Custom Tag
 
@@ -161,19 +122,13 @@ You can customize tags.
 
 Insert customized tags into the slot of `fb-select`. `collapse-tags`, `collapse-tags-tooltip`, `max-collapse-tags` will not work.
 
-<Canvas
-	withToolbar={true}
-	of={SelectStories.CustomTag}
-/>
+<Canvas withToolbar={true} of={SelectStories.CustomTag} />
 
 ## Custom Loading
 
 Override loading content.
 
-<Canvas
-	withToolbar={true}
-	of={SelectStories.CustomLoading}
-/>
+<Canvas withToolbar={true} of={SelectStories.CustomLoading} />
 
 ---
 
diff --git a/docs/src/components/select/fb-select.stories.scss b/docs/src/components/select/fb-select.stories.scss
index a22671c0..43d9696e 100644
--- a/docs/src/components/select/fb-select.stories.scss
+++ b/docs/src/components/select/fb-select.stories.scss
@@ -1,137 +1,137 @@
 .fb-select-story-block {
-	.fb-select-story-block__item {
-		margin-bottom: 20px;
-	}
+    .fb-select-story-block__item {
+        margin-bottom: 20px;
+    }
 
-	.fb-select-story-block__item:last-child {
-		margin-bottom: 0;
-	}
+    .fb-select-story-block__item:last-child {
+        margin-bottom: 0;
+    }
 
-	.fb-select-story-block__form-row {
-		display: flex;
-		gap: 20px;
-		align-items: baseline;
-		margin-bottom: 20px;
+    .fb-select-story-block__form-row {
+        display: flex;
+        gap: 20px;
+        align-items: baseline;
+        margin-bottom: 20px;
 
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
 
-	.fb-select {
-		width: 240px;
-	}
+    .fb-select {
+        width: 240px;
+    }
 }
 
 .fb-select-story-block__custom-template-label {
-	float: left;
+    float: left;
 }
 
 .fb-select-story-block__custom-template-description {
-	float: right;
-	color: var(--fb-text-color-secondary);
-	font-size: 13px;
+    float: right;
+    color: var(--fb-text-color-secondary);
+    font-size: 13px;
 }
 
 .fb-select-story-block__custom-footer-input {
-	width: 100%;
-	margin-bottom: 8px;
+    width: 100%;
+    margin-bottom: 8px;
 }
 
 .fb-select-story-block__custom-tag-list {
-	border: none;
-	aspect-ratio: 1;
+    border: none;
+    aspect-ratio: 1;
 }
 
 .fb-select-story-block__custom-tag-option {
-	border: none;
-	aspect-ratio: 1;
-	margin-right: 8px;
+    border: none;
+    aspect-ratio: 1;
+    margin-right: 8px;
 }
 
 .fb-select-story-block__circular-loader-icon {
-	display: inline;
-	height: 30px;
-	width: 30px;
-	animation: fb-select-story-block__circular-loader-icon-animation 2s linear infinite;
+    display: inline;
+    height: 30px;
+    width: 30px;
+    animation: fb-select-story-block__circular-loader-icon-animation 2s linear infinite;
 }
 
 .fb-select-story-block__circular-loader-icon-path {
-	animation: fb-select-story-block__circular-loader-icon-animation-dash 1.5s ease-in-out infinite;
-	stroke-dasharray: 90, 150;
-	stroke-dashoffset: 0;
-	stroke-width: 2;
-	stroke: var(--fb-color-primary);
-	stroke-linecap: round;
+    animation: fb-select-story-block__circular-loader-icon-animation-dash 1.5s ease-in-out infinite;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: 0;
+    stroke-width: 2;
+    stroke: var(--fb-color-primary);
+    stroke-linecap: round;
 }
 
 .fb-select-story-block__dot-loader-path {
-	animation: none;
-	stroke: none;
+    animation: none;
+    stroke: none;
 }
 
 .fb-select-story-block__dot-loader .dot1 {
-	transform: translate(3.75px, 3.75px);
-	fill: var(--fb-color-primary);
-	animation: fb-select-story-block__circular-loader-icon-animation-spin 1s infinite linear alternate;
-	opacity: 0.3;
+    transform: translate(3.75px, 3.75px);
+    fill: var(--fb-color-primary);
+    animation: fb-select-story-block__circular-loader-icon-animation-spin 1s infinite linear alternate;
+    opacity: 0.3;
 }
 
 .fb-select-story-block__dot-loader .dot2 {
-	transform: translate(calc(100% - 3.75px), 3.75px);
-	fill: var(--fb-color-primary);
-	animation: fb-select-story-block__circular-loader-icon-animation-spin 1s infinite linear alternate;
-	opacity: 0.3;
-	animation-delay: 0.4s;
+    transform: translate(calc(100% - 3.75px), 3.75px);
+    fill: var(--fb-color-primary);
+    animation: fb-select-story-block__circular-loader-icon-animation-spin 1s infinite linear alternate;
+    opacity: 0.3;
+    animation-delay: 0.4s;
 }
 
 .fb-select-story-block__dot-loader .dot3 {
-	transform: translate(3.75px, calc(100% - 3.75px));
-	fill: var(--fb-color-primary);
-	animation: fb-select-story-block__circular-loader-icon-animation-spin 1s infinite linear alternate;
-	opacity: 0.3;
-	animation-delay: 1.2s;
+    transform: translate(3.75px, calc(100% - 3.75px));
+    fill: var(--fb-color-primary);
+    animation: fb-select-story-block__circular-loader-icon-animation-spin 1s infinite linear alternate;
+    opacity: 0.3;
+    animation-delay: 1.2s;
 }
 
 .fb-select-story-block__dot-loader .dot4 {
-	transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
-	fill: var(--fb-color-primary);
-	animation: fb-select-story-block__circular-loader-icon-animation-spin 1s infinite linear alternate;
-	opacity: 0.3;
-	animation-delay: 0.8s;
+    transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
+    fill: var(--fb-color-primary);
+    animation: fb-select-story-block__circular-loader-icon-animation-spin 1s infinite linear alternate;
+    opacity: 0.3;
+    animation-delay: 0.8s;
 }
 
 .fb-select-dropdown__loading {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 100px;
-	font-size: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100px;
+    font-size: 20px;
 }
 
 @keyframes fb-select-story-block__circular-loader-icon-animation {
-	to {
-		transform: rotate(360deg);
-	}
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 @keyframes fb-select-story-block__circular-loader-icon-animation-dash {
-	0% {
-		stroke-dasharray: 1, 200;
-		stroke-dashoffset: 0;
-	}
-	50% {
-		stroke-dasharray: 90, 150;
-		stroke-dashoffset: -40px;
-	}
-	100% {
-		stroke-dasharray: 90, 150;
-		stroke-dashoffset: -120px;
-	}
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -40px;
+    }
+    100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -120px;
+    }
 }
 
 @keyframes fb-select-story-block__circular-loader-icon-animation-spin {
-	to {
-		opacity: 1;
-	}
+    to {
+        opacity: 1;
+    }
 }
diff --git a/docs/src/components/select/fb-select.stories.ts b/docs/src/components/select/fb-select.stories.ts
index 219ed845..501880e9 100644
--- a/docs/src/components/select/fb-select.stories.ts
+++ b/docs/src/components/select/fb-select.stories.ts
@@ -1,27 +1,27 @@
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from "vue";
 
-import { Meta, StoryObj } from '@storybook/vue3';
+import { Meta, StoryObj } from "@storybook/vue3";
 import {
-	FbSelect,
-	FbOption,
-	FbOptionGroup,
-	FbCheckbox,
-	FbInput,
-	FbIcon,
-	FbButton,
-	FbRow,
-	FbCol,
-	FbTag,
-	CheckboxValueType,
-} from '@fastybird/web-ui-components';
-import { VariantTypes, ComponentSizeTypes } from '@fastybird/web-ui-constants';
-
-import './fb-select.stories.scss';
+    FbSelect,
+    FbOption,
+    FbOptionGroup,
+    FbCheckbox,
+    FbInput,
+    FbIcon,
+    FbButton,
+    FbRow,
+    FbCol,
+    FbTag,
+    CheckboxValueType,
+} from "@fastybird/web-ui-components";
+import { VariantTypes, ComponentSizeTypes } from "@fastybird/web-ui-constants";
+
+import "./fb-select.stories.scss";
 
 const meta: Meta<typeof FbSelect> = {
-	component: FbSelect,
-	title: 'Components/Form/Select',
-	excludeStories: /.*Data$/,
+    component: FbSelect,
+    title: "Components/Form/Select",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -29,10 +29,10 @@ export default meta;
 type Story = StoryObj<typeof FbSelect>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-select
 		v-model="value"
@@ -101,44 +101,44 @@ const options = [
 	},
 ];
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSelect, FbOption },
-		setup: () => {
-			const value = ref('');
-
-			const options = [
-				{
-					value: 'Option1',
-					label: 'Option1',
-				},
-				{
-					value: 'Option2',
-					label: 'Option2',
-				},
-				{
-					value: 'Option3',
-					label: 'Option3',
-				},
-				{
-					value: 'Option4',
-					label: 'Option4',
-				},
-				{
-					value: 'Option5',
-					label: 'Option5',
-				},
-			];
-
-			return {
-				value,
-				options,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSelect, FbOption },
+        setup: () => {
+            const value = ref("");
+
+            const options = [
+                {
+                    value: "Option1",
+                    label: "Option1",
+                },
+                {
+                    value: "Option2",
+                    label: "Option2",
+                },
+                {
+                    value: "Option3",
+                    label: "Option3",
+                },
+                {
+                    value: "Option4",
+                    label: "Option4",
+                },
+                {
+                    value: "Option5",
+                    label: "Option5",
+                },
+            ];
+
+            return {
+                value,
+                options,
+            };
+        },
+        template: `
 <div class="fb-select-story-block">
 	<div class="fb-select-story-block__form-row">
 		<fb-select
@@ -177,14 +177,14 @@ const options = [
 		</fb-select>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const DisabledOption: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-select
 		v-model="value"
@@ -229,49 +229,49 @@ const options = [
 	},
 ];
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSelect, FbOption },
-		setup: () => {
-			const value = ref('');
-
-			const options = [
-				{
-					value: 'Option1',
-					label: 'Option1',
-					disabled: false,
-				},
-				{
-					value: 'Option2',
-					label: 'Option2',
-					disabled: true,
-				},
-				{
-					value: 'Option3',
-					label: 'Option3',
-					disabled: false,
-				},
-				{
-					value: 'Option4',
-					label: 'Option4',
-					disabled: false,
-				},
-				{
-					value: 'Option5',
-					label: 'Option5',
-					disabled: false,
-				},
-			];
-
-			return {
-				value,
-				options,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSelect, FbOption },
+        setup: () => {
+            const value = ref("");
+
+            const options = [
+                {
+                    value: "Option1",
+                    label: "Option1",
+                    disabled: false,
+                },
+                {
+                    value: "Option2",
+                    label: "Option2",
+                    disabled: true,
+                },
+                {
+                    value: "Option3",
+                    label: "Option3",
+                    disabled: false,
+                },
+                {
+                    value: "Option4",
+                    label: "Option4",
+                    disabled: false,
+                },
+                {
+                    value: "Option5",
+                    label: "Option5",
+                    disabled: false,
+                },
+            ];
+
+            return {
+                value,
+                options,
+            };
+        },
+        template: `
 <div class="fb-select-story-block">
 	<div class="fb-select-story-block__item">
 		<fb-select
@@ -288,14 +288,14 @@ const options = [
 		</fb-select>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const DisabledSelect: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-select
 		v-model="value"
@@ -339,44 +339,44 @@ const options = [
 	},
 ];
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSelect, FbOption },
-		setup: () => {
-			const value = ref('');
-
-			const options = [
-				{
-					value: 'Option1',
-					label: 'Option1',
-				},
-				{
-					value: 'Option2',
-					label: 'Option2',
-				},
-				{
-					value: 'Option3',
-					label: 'Option3',
-				},
-				{
-					value: 'Option4',
-					label: 'Option4',
-				},
-				{
-					value: 'Option5',
-					label: 'Option5',
-				},
-			];
-
-			return {
-				value,
-				options,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSelect, FbOption },
+        setup: () => {
+            const value = ref("");
+
+            const options = [
+                {
+                    value: "Option1",
+                    label: "Option1",
+                },
+                {
+                    value: "Option2",
+                    label: "Option2",
+                },
+                {
+                    value: "Option3",
+                    label: "Option3",
+                },
+                {
+                    value: "Option4",
+                    label: "Option4",
+                },
+                {
+                    value: "Option5",
+                    label: "Option5",
+                },
+            ];
+
+            return {
+                value,
+                options,
+            };
+        },
+        template: `
 <div class="fb-select-story-block">
 	<div class="fb-select-story-block__item">
 		<fb-select
@@ -393,14 +393,14 @@ const options = [
 		</fb-select>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Clearable: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-select
 		v-model="value"
@@ -444,44 +444,44 @@ const options = [
 	},
 ];
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSelect, FbOption },
-		setup: () => {
-			const value = ref('');
-
-			const options = [
-				{
-					value: 'Option1',
-					label: 'Option1',
-				},
-				{
-					value: 'Option2',
-					label: 'Option2',
-				},
-				{
-					value: 'Option3',
-					label: 'Option3',
-				},
-				{
-					value: 'Option4',
-					label: 'Option4',
-				},
-				{
-					value: 'Option5',
-					label: 'Option5',
-				},
-			];
-
-			return {
-				value,
-				options,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSelect, FbOption },
+        setup: () => {
+            const value = ref("");
+
+            const options = [
+                {
+                    value: "Option1",
+                    label: "Option1",
+                },
+                {
+                    value: "Option2",
+                    label: "Option2",
+                },
+                {
+                    value: "Option3",
+                    label: "Option3",
+                },
+                {
+                    value: "Option4",
+                    label: "Option4",
+                },
+                {
+                    value: "Option5",
+                    label: "Option5",
+                },
+            ];
+
+            return {
+                value,
+                options,
+            };
+        },
+        template: `
 <div class="fb-select-story-block">
 	<div class="fb-select-story-block__item">
 		<fb-select
@@ -498,14 +498,14 @@ const options = [
 		</fb-select>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const MultipleSelect: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-row :gutter="20" align="middle">
 		<fb-col :sm="12" :md="5">
@@ -628,50 +628,50 @@ const options = [
 	},
 ];
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSelect, FbOption, FbRow, FbCol },
-		setup: () => {
-			const value1 = ref([]);
-			const value2 = ref([]);
-			const value3 = ref([]);
-			const value4 = ref([]);
-
-			const options = [
-				{
-					value: 'Option1',
-					label: 'Option1',
-				},
-				{
-					value: 'Option2',
-					label: 'Option2',
-				},
-				{
-					value: 'Option3',
-					label: 'Option3',
-				},
-				{
-					value: 'Option4',
-					label: 'Option4',
-				},
-				{
-					value: 'Option5',
-					label: 'Option5',
-				},
-			];
-
-			return {
-				value1,
-				value2,
-				value3,
-				value4,
-				options,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSelect, FbOption, FbRow, FbCol },
+        setup: () => {
+            const value1 = ref([]);
+            const value2 = ref([]);
+            const value3 = ref([]);
+            const value4 = ref([]);
+
+            const options = [
+                {
+                    value: "Option1",
+                    label: "Option1",
+                },
+                {
+                    value: "Option2",
+                    label: "Option2",
+                },
+                {
+                    value: "Option3",
+                    label: "Option3",
+                },
+                {
+                    value: "Option4",
+                    label: "Option4",
+                },
+                {
+                    value: "Option5",
+                    label: "Option5",
+                },
+            ];
+
+            return {
+                value1,
+                value2,
+                value3,
+                value4,
+                options,
+            };
+        },
+        template: `
 <div class="fb-select-story-block">
 	<fb-row :gutter="20" align="middle" class="fb-select-story-block__item">
 		<fb-col :sm="12" :md="5">
@@ -762,14 +762,14 @@ const options = [
 		</fb-col>
 	</fb-row>
 </div>`,
-	}),
+    }),
 };
 
 export const CustomTemplate: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-select v-model="value" placeholder="Select">
 		<fb-option
@@ -838,54 +838,54 @@ const cities = [
 	font-size: 13px;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSelect, FbOption },
-		setup: () => {
-			const value = ref('');
-
-			const cities = [
-				{
-					value: 'Vienna',
-					label: 'Vienna',
-					country: 'Austria',
-				},
-				{
-					value: 'Sofia',
-					label: 'Sofia',
-					country: 'Bulgaria',
-				},
-				{
-					value: 'Helsinki',
-					label: 'Helsinki',
-					country: 'Finland',
-				},
-				{
-					value: 'Rome',
-					label: 'Rome',
-					country: 'Italy',
-				},
-				{
-					value: 'Monaco',
-					label: 'Monaco',
-					country: 'Monaco',
-				},
-				{
-					value: 'Lisbon',
-					label: 'Lisbon',
-					country: 'Portugal',
-				},
-			];
-
-			return {
-				value,
-				cities,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSelect, FbOption },
+        setup: () => {
+            const value = ref("");
+
+            const cities = [
+                {
+                    value: "Vienna",
+                    label: "Vienna",
+                    country: "Austria",
+                },
+                {
+                    value: "Sofia",
+                    label: "Sofia",
+                    country: "Bulgaria",
+                },
+                {
+                    value: "Helsinki",
+                    label: "Helsinki",
+                    country: "Finland",
+                },
+                {
+                    value: "Rome",
+                    label: "Rome",
+                    country: "Italy",
+                },
+                {
+                    value: "Monaco",
+                    label: "Monaco",
+                    country: "Monaco",
+                },
+                {
+                    value: "Lisbon",
+                    label: "Lisbon",
+                    country: "Portugal",
+                },
+            ];
+
+            return {
+                value,
+                cities,
+            };
+        },
+        template: `
 <div class="fb-select-story-block">
 	<div class="fb-select-story-block__item">
 		<fb-select v-model="value" placeholder="Select">
@@ -905,14 +905,14 @@ const cities = [
 		</fb-select>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const DropdownHeader: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-select
 		v-model="value"
@@ -1000,74 +1000,74 @@ const handleCheckAll = (val: CheckboxValueType) => {
 	}
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSelect, FbOption, FbCheckbox },
-		setup: () => {
-			const checkAll = ref(false);
-			const indeterminate = ref(false);
-			const value = ref<CheckboxValueType[]>([]);
-
-			const cities = ref([
-				{
-					value: 'Vienna',
-					label: 'Vienna',
-				},
-				{
-					value: 'Sofia',
-					label: 'Sofia',
-				},
-				{
-					value: 'Helsinki',
-					label: 'Helsinki',
-				},
-				{
-					value: 'Rome',
-					label: 'Rome',
-				},
-				{
-					value: 'Monaco',
-					label: 'Monaco',
-				},
-				{
-					value: 'Lisbon',
-					label: 'Lisbon',
-				},
-			]);
-
-			watch(value, (val) => {
-				if (val.length === 0) {
-					checkAll.value = false;
-					indeterminate.value = false;
-				} else if (val.length === cities.value.length) {
-					checkAll.value = true;
-					indeterminate.value = false;
-				} else {
-					indeterminate.value = true;
-				}
-			});
-
-			const handleCheckAll = (val: CheckboxValueType) => {
-				indeterminate.value = false;
-				if (val) {
-					value.value = cities.value.map((_) => _.value);
-				} else {
-					value.value = [];
-				}
-			};
-
-			return {
-				checkAll,
-				indeterminate,
-				value,
-				cities,
-				handleCheckAll,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSelect, FbOption, FbCheckbox },
+        setup: () => {
+            const checkAll = ref(false);
+            const indeterminate = ref(false);
+            const value = ref<CheckboxValueType[]>([]);
+
+            const cities = ref([
+                {
+                    value: "Vienna",
+                    label: "Vienna",
+                },
+                {
+                    value: "Sofia",
+                    label: "Sofia",
+                },
+                {
+                    value: "Helsinki",
+                    label: "Helsinki",
+                },
+                {
+                    value: "Rome",
+                    label: "Rome",
+                },
+                {
+                    value: "Monaco",
+                    label: "Monaco",
+                },
+                {
+                    value: "Lisbon",
+                    label: "Lisbon",
+                },
+            ]);
+
+            watch(value, (val) => {
+                if (val.length === 0) {
+                    checkAll.value = false;
+                    indeterminate.value = false;
+                } else if (val.length === cities.value.length) {
+                    checkAll.value = true;
+                    indeterminate.value = false;
+                } else {
+                    indeterminate.value = true;
+                }
+            });
+
+            const handleCheckAll = (val: CheckboxValueType) => {
+                indeterminate.value = false;
+                if (val) {
+                    value.value = cities.value.map((_) => _.value);
+                } else {
+                    value.value = [];
+                }
+            };
+
+            return {
+                checkAll,
+                indeterminate,
+                value,
+                cities,
+                handleCheckAll,
+            };
+        },
+        template: `
 <div class="fb-select-story-block">
 	<div class="fb-select-story-block__item">
 		<fb-select
@@ -1098,14 +1098,14 @@ const handleCheckAll = (val: CheckboxValueType) => {
 		</fb-select>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const DropdownFooter: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-select v-model="value" placeholder="Select">
 		<fb-option
@@ -1200,74 +1200,74 @@ const clear = () => {
 	margin-bottom: 8px;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSelect, FbOption, FbButton, FbInput },
-		setup: () => {
-			const isAdding = ref(false);
-			const value = ref<CheckboxValueType[]>([]);
-			const optionName = ref('');
-
-			const cities = ref([
-				{
-					value: 'Vienna',
-					label: 'Vienna',
-				},
-				{
-					value: 'Sofia',
-					label: 'Sofia',
-				},
-				{
-					value: 'Helsinki',
-					label: 'Helsinki',
-				},
-				{
-					value: 'Rome',
-					label: 'Rome',
-				},
-				{
-					value: 'Monaco',
-					label: 'Monaco',
-				},
-				{
-					value: 'Lisbon',
-					label: 'Lisbon',
-				},
-			]);
-
-			const onAddOption = () => {
-				isAdding.value = true;
-			};
-
-			const onConfirm = () => {
-				if (optionName.value) {
-					cities.value.push({
-						label: optionName.value,
-						value: optionName.value,
-					});
-					clear();
-				}
-			};
-
-			const clear = () => {
-				optionName.value = '';
-				isAdding.value = false;
-			};
-
-			return {
-				isAdding,
-				value,
-				optionName,
-				cities,
-				onAddOption,
-				onConfirm,
-				clear,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSelect, FbOption, FbButton, FbInput },
+        setup: () => {
+            const isAdding = ref(false);
+            const value = ref<CheckboxValueType[]>([]);
+            const optionName = ref("");
+
+            const cities = ref([
+                {
+                    value: "Vienna",
+                    label: "Vienna",
+                },
+                {
+                    value: "Sofia",
+                    label: "Sofia",
+                },
+                {
+                    value: "Helsinki",
+                    label: "Helsinki",
+                },
+                {
+                    value: "Rome",
+                    label: "Rome",
+                },
+                {
+                    value: "Monaco",
+                    label: "Monaco",
+                },
+                {
+                    value: "Lisbon",
+                    label: "Lisbon",
+                },
+            ]);
+
+            const onAddOption = () => {
+                isAdding.value = true;
+            };
+
+            const onConfirm = () => {
+                if (optionName.value) {
+                    cities.value.push({
+                        label: optionName.value,
+                        value: optionName.value,
+                    });
+                    clear();
+                }
+            };
+
+            const clear = () => {
+                optionName.value = "";
+                isAdding.value = false;
+            };
+
+            return {
+                isAdding,
+                value,
+                optionName,
+                cities,
+                onAddOption,
+                onConfirm,
+                clear,
+            };
+        },
+        template: `
 <div class="fb-select-story-block">
 	<div class="fb-select-story-block__item">
 		<fb-select v-model="value" placeholder="Select">
@@ -1300,14 +1300,14 @@ const clear = () => {
 		</fb-select>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Grouping: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-select v-model="value" placeholder="Select">
 		<fb-option-group
@@ -1367,58 +1367,58 @@ const options = [
 	},
 ];
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSelect, FbOptionGroup, FbOption },
-		setup: () => {
-			const value = ref('');
-
-			const options = [
-				{
-					label: 'Popular cities',
-					options: [
-						{
-							value: 'Rome',
-							label: 'Rome',
-						},
-						{
-							value: 'Vienna',
-							label: 'Vienna',
-						},
-					],
-				},
-				{
-					label: 'City name',
-					options: [
-						{
-							value: 'Sofia',
-							label: 'Sofia',
-						},
-						{
-							value: 'Helsinki',
-							label: 'Helsinki',
-						},
-						{
-							value: 'Monaco',
-							label: 'Monaco',
-						},
-						{
-							value: 'Lisbon',
-							label: 'Lisbon',
-						},
-					],
-				},
-			];
-
-			return {
-				value,
-				options,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSelect, FbOptionGroup, FbOption },
+        setup: () => {
+            const value = ref("");
+
+            const options = [
+                {
+                    label: "Popular cities",
+                    options: [
+                        {
+                            value: "Rome",
+                            label: "Rome",
+                        },
+                        {
+                            value: "Vienna",
+                            label: "Vienna",
+                        },
+                    ],
+                },
+                {
+                    label: "City name",
+                    options: [
+                        {
+                            value: "Sofia",
+                            label: "Sofia",
+                        },
+                        {
+                            value: "Helsinki",
+                            label: "Helsinki",
+                        },
+                        {
+                            value: "Monaco",
+                            label: "Monaco",
+                        },
+                        {
+                            value: "Lisbon",
+                            label: "Lisbon",
+                        },
+                    ],
+                },
+            ];
+
+            return {
+                value,
+                options,
+            };
+        },
+        template: `
 <div class="fb-select-story-block">
 	<div class="fb-select-story-block__item">
 		<fb-select v-model="value" placeholder="Select">
@@ -1437,14 +1437,14 @@ const options = [
 		</fb-select>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const OptionFilter: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-select
 		v-model="value"
@@ -1492,48 +1492,48 @@ const options = [
 	},
 ];
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSelect, FbOption },
-		setup: () => {
-			const value = ref('');
-
-			const options = [
-				{
-					value: 'Vienna',
-					label: 'Vienna',
-				},
-				{
-					value: 'Sofia',
-					label: 'Sofia',
-				},
-				{
-					value: 'Helsinki',
-					label: 'Helsinki',
-				},
-				{
-					value: 'Rome',
-					label: 'Rome',
-				},
-				{
-					value: 'Monaco',
-					label: 'Monaco',
-				},
-				{
-					value: 'Lisbon',
-					label: 'Lisbon',
-				},
-			];
-
-			return {
-				value,
-				options,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSelect, FbOption },
+        setup: () => {
+            const value = ref("");
+
+            const options = [
+                {
+                    value: "Vienna",
+                    label: "Vienna",
+                },
+                {
+                    value: "Sofia",
+                    label: "Sofia",
+                },
+                {
+                    value: "Helsinki",
+                    label: "Helsinki",
+                },
+                {
+                    value: "Rome",
+                    label: "Rome",
+                },
+                {
+                    value: "Monaco",
+                    label: "Monaco",
+                },
+                {
+                    value: "Lisbon",
+                    label: "Lisbon",
+                },
+            ];
+
+            return {
+                value,
+                options,
+            };
+        },
+        template: `
 <div class="fb-select-story-block">
 	<div class="fb-select-story-block__item">
 		<fb-select
@@ -1550,14 +1550,14 @@ const options = [
 		</fb-select>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const RemoteSearch: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-row :gutter="20" align="middle" class="fb-select-story-block__item">
 		<fb-col :sm="12" :md="5">
@@ -1700,106 +1700,106 @@ const states = [
 	'Wyoming',
 ];
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSelect, FbOption, FbRow, FbCol },
-		setup: () => {
-			interface ListItem {
-				value: string;
-				label: string;
-			}
-
-			const list = ref<ListItem[]>([]);
-			const options = ref<ListItem[]>([]);
-			const value = ref<string[]>([]);
-			const loading = ref(false);
-
-			onMounted(() => {
-				list.value = states.map((item) => {
-					return { value: `value:${item}`, label: item };
-				});
-			});
-
-			const remoteMethod = (query: string) => {
-				if (query) {
-					loading.value = true;
-					setTimeout(() => {
-						loading.value = false;
-						options.value = list.value.filter((item) => {
-							return item.label.toLowerCase().includes(query.toLowerCase());
-						});
-					}, 200);
-				} else {
-					options.value = [];
-				}
-			};
-
-			const states = [
-				'Alabama',
-				'Alaska',
-				'Arizona',
-				'Arkansas',
-				'California',
-				'Colorado',
-				'Connecticut',
-				'Delaware',
-				'Florida',
-				'Georgia',
-				'Hawaii',
-				'Idaho',
-				'Illinois',
-				'Indiana',
-				'Iowa',
-				'Kansas',
-				'Kentucky',
-				'Louisiana',
-				'Maine',
-				'Maryland',
-				'Massachusetts',
-				'Michigan',
-				'Minnesota',
-				'Mississippi',
-				'Missouri',
-				'Montana',
-				'Nebraska',
-				'Nevada',
-				'New Hampshire',
-				'New Jersey',
-				'New Mexico',
-				'New York',
-				'North Carolina',
-				'North Dakota',
-				'Ohio',
-				'Oklahoma',
-				'Oregon',
-				'Pennsylvania',
-				'Rhode Island',
-				'South Carolina',
-				'South Dakota',
-				'Tennessee',
-				'Texas',
-				'Utah',
-				'Vermont',
-				'Virginia',
-				'Washington',
-				'West Virginia',
-				'Wisconsin',
-				'Wyoming',
-			];
-
-			return {
-				list,
-				options,
-				value,
-				loading,
-				states,
-				remoteMethod,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSelect, FbOption, FbRow, FbCol },
+        setup: () => {
+            interface ListItem {
+                value: string;
+                label: string;
+            }
+
+            const list = ref<ListItem[]>([]);
+            const options = ref<ListItem[]>([]);
+            const value = ref<string[]>([]);
+            const loading = ref(false);
+
+            onMounted(() => {
+                list.value = states.map((item) => {
+                    return { value: `value:${item}`, label: item };
+                });
+            });
+
+            const remoteMethod = (query: string) => {
+                if (query) {
+                    loading.value = true;
+                    setTimeout(() => {
+                        loading.value = false;
+                        options.value = list.value.filter((item) => {
+                            return item.label.toLowerCase().includes(query.toLowerCase());
+                        });
+                    }, 200);
+                } else {
+                    options.value = [];
+                }
+            };
+
+            const states = [
+                "Alabama",
+                "Alaska",
+                "Arizona",
+                "Arkansas",
+                "California",
+                "Colorado",
+                "Connecticut",
+                "Delaware",
+                "Florida",
+                "Georgia",
+                "Hawaii",
+                "Idaho",
+                "Illinois",
+                "Indiana",
+                "Iowa",
+                "Kansas",
+                "Kentucky",
+                "Louisiana",
+                "Maine",
+                "Maryland",
+                "Massachusetts",
+                "Michigan",
+                "Minnesota",
+                "Mississippi",
+                "Missouri",
+                "Montana",
+                "Nebraska",
+                "Nevada",
+                "New Hampshire",
+                "New Jersey",
+                "New Mexico",
+                "New York",
+                "North Carolina",
+                "North Dakota",
+                "Ohio",
+                "Oklahoma",
+                "Oregon",
+                "Pennsylvania",
+                "Rhode Island",
+                "South Carolina",
+                "South Dakota",
+                "Tennessee",
+                "Texas",
+                "Utah",
+                "Vermont",
+                "Virginia",
+                "Washington",
+                "West Virginia",
+                "Wisconsin",
+                "Wyoming",
+            ];
+
+            return {
+                list,
+                options,
+                value,
+                loading,
+                states,
+                remoteMethod,
+            };
+        },
+        template: `
 <div class="fb-select-story-block">
 	<fb-row :gutter="20" align="middle" class="fb-select-story-block__item">
 		<fb-col :sm="12" :md="5">
@@ -1854,14 +1854,14 @@ const states = [
 		</fb-col>
 	</fb-row>
 </div>`,
-	}),
+    }),
 };
 
 export const CreateNewItems: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-select
 		v-model="value"
@@ -1901,36 +1901,36 @@ const options = [
 	},
 ];
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSelect, FbOption },
-		setup: () => {
-			const value = ref<string[]>([]);
-
-			const options = [
-				{
-					value: 'HTML',
-					label: 'HTML',
-				},
-				{
-					value: 'CSS',
-					label: 'CSS',
-				},
-				{
-					value: 'JavaScript',
-					label: 'JavaScript',
-				},
-			];
-
-			return {
-				value,
-				options,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSelect, FbOption },
+        setup: () => {
+            const value = ref<string[]>([]);
+
+            const options = [
+                {
+                    value: "HTML",
+                    label: "HTML",
+                },
+                {
+                    value: "CSS",
+                    label: "CSS",
+                },
+                {
+                    value: "JavaScript",
+                    label: "JavaScript",
+                },
+            ];
+
+            return {
+                value,
+                options,
+            };
+        },
+        template: `
 <div class="fb-select-story-block">
 	<div class="fb-select-story-block__item">
 		<fb-select
@@ -1951,14 +1951,14 @@ const options = [
 		</fb-select>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const ValueKeyAttribute: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-select
 		v-model="value"
@@ -1997,34 +1997,34 @@ const options = ref([
 	{ id: 4, label: 'Option A', desc: 'Option A - 230507' },
 ]);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSelect, FbOption },
-		setup: () => {
-			type Option = {
-				id: number;
-				label: string;
-				desc: string;
-			};
-
-			const value = ref<Option>();
-
-			const options = ref([
-				{ id: 1, label: 'Option A', desc: 'Option A - 230506' },
-				{ id: 2, label: 'Option B', desc: 'Option B - 230506' },
-				{ id: 3, label: 'Option C', desc: 'Option C - 230506' },
-				{ id: 4, label: 'Option A', desc: 'Option A - 230507' },
-			]);
-
-			return {
-				value,
-				options,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSelect, FbOption },
+        setup: () => {
+            type Option = {
+                id: number;
+                label: string;
+                desc: string;
+            };
+
+            const value = ref<Option>();
+
+            const options = ref([
+                { id: 1, label: "Option A", desc: "Option A - 230506" },
+                { id: 2, label: "Option B", desc: "Option B - 230506" },
+                { id: 3, label: "Option C", desc: "Option C - 230506" },
+                { id: 4, label: "Option A", desc: "Option A - 230507" },
+            ]);
+
+            return {
+                value,
+                options,
+            };
+        },
+        template: `
 <div class="fb-select-story-block">
 	<div class="fb-select-story-block__item">
 		<fb-select
@@ -2046,14 +2046,14 @@ const options = ref([
 		<strong>{{ value ? value.desc : 'nothing selected' }}</strong>
 	</p>
 </div>`,
-	}),
+    }),
 };
 
 export const CustomTag: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-select
 		v-model="value"
@@ -2122,56 +2122,56 @@ colors.forEach((color) => {
 	aspect-ratio: 1;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSelect, FbOption, FbTag },
-		setup: () => {
-			const value = ref([]);
-
-			const colors = [
-				{
-					value: '#E63415',
-					label: 'red',
-				},
-				{
-					value: '#FF6600',
-					label: 'orange',
-				},
-				{
-					value: '#FFDE0A',
-					label: 'yellow',
-				},
-				{
-					value: '#1EC79D',
-					label: 'green',
-				},
-				{
-					value: '#14CCCC',
-					label: 'cyan',
-				},
-				{
-					value: '#4167F0',
-					label: 'blue',
-				},
-				{
-					value: '#6222C9',
-					label: 'purple',
-				},
-			];
-
-			colors.forEach((color) => {
-				value.value.push(color.value);
-			});
-
-			return {
-				value,
-				colors,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSelect, FbOption, FbTag },
+        setup: () => {
+            const value = ref([]);
+
+            const colors = [
+                {
+                    value: "#E63415",
+                    label: "red",
+                },
+                {
+                    value: "#FF6600",
+                    label: "orange",
+                },
+                {
+                    value: "#FFDE0A",
+                    label: "yellow",
+                },
+                {
+                    value: "#1EC79D",
+                    label: "green",
+                },
+                {
+                    value: "#14CCCC",
+                    label: "cyan",
+                },
+                {
+                    value: "#4167F0",
+                    label: "blue",
+                },
+                {
+                    value: "#6222C9",
+                    label: "purple",
+                },
+            ];
+
+            colors.forEach((color) => {
+                value.value.push(color.value);
+            });
+
+            return {
+                value,
+                colors,
+            };
+        },
+        template: `
 <div class="fb-select-story-block">
 	<div class="fb-select-story-block__item">
 		<fb-select
@@ -2194,14 +2194,14 @@ colors.forEach((color) => {
 		</fb-select>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const CustomLoading: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-row :gutter="20" align="middle">
 		<fb-col :sm="12" :md="5">
@@ -2435,107 +2435,107 @@ const states = [
   }
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSelect, FbOption, FbIcon, FbRow, FbCol },
-		setup: () => {
-			interface ListItem {
-				value: string;
-				label: string;
-			}
-
-			const list = ref<ListItem[]>([]);
-			const options = ref<ListItem[]>([]);
-			const value = ref<string[]>([]);
-			const loading = ref(false);
-
-			onMounted(() => {
-				list.value = states.map((item) => {
-					return { value: `value:${item}`, label: item };
-				});
-			});
-
-			const remoteMethod = (query: string): void => {
-				if (query) {
-					loading.value = true;
-
-					setTimeout(() => {
-						loading.value = false;
-						options.value = list.value.filter((item) => {
-							return item.label.toLowerCase().includes(query.toLowerCase());
-						});
-					}, 3000);
-				} else {
-					options.value = [];
-				}
-			};
-
-			const states = [
-				'Alabama',
-				'Alaska',
-				'Arizona',
-				'Arkansas',
-				'California',
-				'Colorado',
-				'Connecticut',
-				'Delaware',
-				'Florida',
-				'Georgia',
-				'Hawaii',
-				'Idaho',
-				'Illinois',
-				'Indiana',
-				'Iowa',
-				'Kansas',
-				'Kentucky',
-				'Louisiana',
-				'Maine',
-				'Maryland',
-				'Massachusetts',
-				'Michigan',
-				'Minnesota',
-				'Mississippi',
-				'Missouri',
-				'Montana',
-				'Nebraska',
-				'Nevada',
-				'New Hampshire',
-				'New Jersey',
-				'New Mexico',
-				'New York',
-				'North Carolina',
-				'North Dakota',
-				'Ohio',
-				'Oklahoma',
-				'Oregon',
-				'Pennsylvania',
-				'Rhode Island',
-				'South Carolina',
-				'South Dakota',
-				'Tennessee',
-				'Texas',
-				'Utah',
-				'Vermont',
-				'Virginia',
-				'Washington',
-				'West Virginia',
-				'Wisconsin',
-				'Wyoming',
-			];
-
-			return {
-				list,
-				options,
-				value,
-				loading,
-				remoteMethod,
-				states,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSelect, FbOption, FbIcon, FbRow, FbCol },
+        setup: () => {
+            interface ListItem {
+                value: string;
+                label: string;
+            }
+
+            const list = ref<ListItem[]>([]);
+            const options = ref<ListItem[]>([]);
+            const value = ref<string[]>([]);
+            const loading = ref(false);
+
+            onMounted(() => {
+                list.value = states.map((item) => {
+                    return { value: `value:${item}`, label: item };
+                });
+            });
+
+            const remoteMethod = (query: string): void => {
+                if (query) {
+                    loading.value = true;
+
+                    setTimeout(() => {
+                        loading.value = false;
+                        options.value = list.value.filter((item) => {
+                            return item.label.toLowerCase().includes(query.toLowerCase());
+                        });
+                    }, 3000);
+                } else {
+                    options.value = [];
+                }
+            };
+
+            const states = [
+                "Alabama",
+                "Alaska",
+                "Arizona",
+                "Arkansas",
+                "California",
+                "Colorado",
+                "Connecticut",
+                "Delaware",
+                "Florida",
+                "Georgia",
+                "Hawaii",
+                "Idaho",
+                "Illinois",
+                "Indiana",
+                "Iowa",
+                "Kansas",
+                "Kentucky",
+                "Louisiana",
+                "Maine",
+                "Maryland",
+                "Massachusetts",
+                "Michigan",
+                "Minnesota",
+                "Mississippi",
+                "Missouri",
+                "Montana",
+                "Nebraska",
+                "Nevada",
+                "New Hampshire",
+                "New Jersey",
+                "New Mexico",
+                "New York",
+                "North Carolina",
+                "North Dakota",
+                "Ohio",
+                "Oklahoma",
+                "Oregon",
+                "Pennsylvania",
+                "Rhode Island",
+                "South Carolina",
+                "South Dakota",
+                "Tennessee",
+                "Texas",
+                "Utah",
+                "Vermont",
+                "Virginia",
+                "Washington",
+                "West Virginia",
+                "Wisconsin",
+                "Wyoming",
+            ];
+
+            return {
+                list,
+                options,
+                value,
+                loading,
+                remoteMethod,
+                states,
+            };
+        },
+        template: `
 <div class="fb-select-story-block">
 	<fb-row :gutter="20" align="middle" class="fb-select-story-block__item">
 		<fb-col :sm="12" :md="5">
@@ -2609,5 +2609,5 @@ const states = [
 		</fb-col>
 	</fb-row>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/slider/fb-slider.mdx b/docs/src/components/slider/fb-slider.mdx
index 3d87b5f4..4794ec5e 100644
--- a/docs/src/components/slider/fb-slider.mdx
+++ b/docs/src/components/slider/fb-slider.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as SliderStories from './fb-slider.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as SliderStories from "./fb-slider.stories";
 
 <Meta of={SliderStories} />
 
@@ -11,10 +11,7 @@ You can drag the slider within a fixed range.
 
 The current value is displayed while dragging the slider. You can customize the initial value of the slider by setting the binding value.
 
-<Canvas
-	withToolbar={true}
-	of={SliderStories.BasicUsage}
-/>
+<Canvas withToolbar={true} of={SliderStories.BasicUsage} />
 
 ## Discrete Values
 
@@ -22,10 +19,7 @@ The options can be discrete.
 
 Define the step size using the `step` property. You can choose to display breakpoints by setting the `show-stops` property.
 
-<Canvas
-	withToolbar={true}
-	of={SliderStories.Discrete}
-/>
+<Canvas withToolbar={true} of={SliderStories.Discrete} />
 
 ## With Input Box
 
@@ -33,61 +27,40 @@ Set value via an input box.
 
 Enable the input box by setting the `show-input` property to display it on the right side.
 
-<Canvas
-	withToolbar={true}
-	of={SliderStories.WithInput}
-/>
+<Canvas withToolbar={true} of={SliderStories.WithInput} />
 
 ## Sizes
 
-<Canvas
-	withToolbar={true}
-	of={SliderStories.Sizes}
-/>
+<Canvas withToolbar={true} of={SliderStories.Sizes} />
 
 ## Variants
 
-<Canvas
-	withToolbar={true}
-	of={SliderStories.Variants}
-/>
+<Canvas withToolbar={true} of={SliderStories.Variants} />
 
 ## Placement
 
 You can customize the tooltip placement.
 
-<Canvas
-	withToolbar={true}
-	of={SliderStories.Placement}
-/>
+<Canvas withToolbar={true} of={SliderStories.Placement} />
 
 ## Range Selection
 
 Support for selecting a range of values is available. When you set the `range` property, it activates range mode. In this mode, the binding value
 becomes an array consisting of two boundary values.
 
-<Canvas
-	withToolbar={true}
-	of={SliderStories.RangeSelection}
-/>
+<Canvas withToolbar={true} of={SliderStories.RangeSelection} />
 
 ## Vertical Mode
 
 When you set the `vertical` property to `true`, it enables vertical mode. In this mode, you need to specify the `height` property.
 
-<Canvas
-	withToolbar={true}
-	of={SliderStories.Vertical}
-/>
+<Canvas withToolbar={true} of={SliderStories.Vertical} />
 
 ## Show Marks
 
 By setting the `marks` property, you can display marks on the slider.
 
-<Canvas
-	withToolbar={true}
-	of={SliderStories.Marks}
-/>
+<Canvas withToolbar={true} of={SliderStories.Marks} />
 
 ---
 
diff --git a/docs/src/components/slider/fb-slider.stories.scss b/docs/src/components/slider/fb-slider.stories.scss
index 93177223..d905afbd 100644
--- a/docs/src/components/slider/fb-slider.stories.scss
+++ b/docs/src/components/slider/fb-slider.stories.scss
@@ -1,14 +1,14 @@
 .fb-slider-story-block {
-	.fb-slider-story-block__item {
-		max-width: 600px;
-		margin-bottom: 20px;
-	}
+    .fb-slider-story-block__item {
+        max-width: 600px;
+        margin-bottom: 20px;
+    }
 
-	.fb-slider-story-block__item:last-child {
-		margin-bottom: 0;
-	}
+    .fb-slider-story-block__item:last-child {
+        margin-bottom: 0;
+    }
 
-	.fb-col {
-		margin-bottom: 20px;
-	}
+    .fb-col {
+        margin-bottom: 20px;
+    }
 }
diff --git a/docs/src/components/slider/fb-slider.stories.ts b/docs/src/components/slider/fb-slider.stories.ts
index 8b687e8d..458437ad 100644
--- a/docs/src/components/slider/fb-slider.stories.ts
+++ b/docs/src/components/slider/fb-slider.stories.ts
@@ -1,17 +1,17 @@
-import { reactive, ref } from 'vue';
+import { reactive, ref } from "vue";
 
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbSlider, FbRow, FbCol } from '@fastybird/web-ui-components';
-import { ComponentSizeTypes, VariantTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbSlider, FbRow, FbCol } from "@fastybird/web-ui-components";
+import { ComponentSizeTypes, VariantTypes } from "@fastybird/web-ui-constants";
 
-import './fb-slider.stories.scss';
+import "./fb-slider.stories.scss";
 
-import type { CSSProperties } from 'vue';
+import type { CSSProperties } from "vue";
 
 const meta: Meta<typeof FbSlider> = {
-	component: FbSlider,
-	title: 'Components/Form/Slider',
-	excludeStories: /.*Data$/,
+    component: FbSlider,
+    title: "Components/Form/Slider",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -19,10 +19,10 @@ export default meta;
 type Story = StoryObj<typeof FbSlider>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-row :gutter="20" align="middle">
 		<fb-col :sm="12" :md="6">
@@ -79,33 +79,33 @@ const formatTooltip = (val: number) => {
 	return val / 100;
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSlider, FbRow, FbCol },
-		setup: () => {
-			const value1 = ref(0);
-			const value2 = ref(0);
-			const value3 = ref(0);
-			const value4 = ref(0);
-			const value5 = ref(0);
-
-			const formatTooltip = (val: number) => {
-				return val / 100;
-			};
-
-			return {
-				value1,
-				value2,
-				value3,
-				value4,
-				value5,
-				formatTooltip,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSlider, FbRow, FbCol },
+        setup: () => {
+            const value1 = ref(0);
+            const value2 = ref(0);
+            const value3 = ref(0);
+            const value4 = ref(0);
+            const value5 = ref(0);
+
+            const formatTooltip = (val: number) => {
+                return val / 100;
+            };
+
+            return {
+                value1,
+                value2,
+                value3,
+                value4,
+                value5,
+                formatTooltip,
+            };
+        },
+        template: `
 <div class="fb-slider-story-block">
 	<fb-row :gutter="20" align="middle">
 		<fb-col :sm="12" :md="6">
@@ -148,14 +148,14 @@ const formatTooltip = (val: number) => {
 		</fb-col>
 	</fb-row>
 </div>`,
-	}),
+    }),
 };
 
 export const Discrete: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-row :gutter="20" align="middle">
 		<fb-col :sm="12" :md="6">
@@ -181,22 +181,22 @@ import { ref } from 'vue';
 const value1 = ref(0);
 const value2 = ref(0);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSlider, FbRow, FbCol },
-		setup: () => {
-			const value1 = ref(0);
-			const value2 = ref(0);
-
-			return {
-				value1,
-				value2,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSlider, FbRow, FbCol },
+        setup: () => {
+            const value1 = ref(0);
+            const value2 = ref(0);
+
+            return {
+                value1,
+                value2,
+            };
+        },
+        template: `
 <div class="fb-slider-story-block">
 	<fb-row :gutter="20" align="middle">
 		<fb-col :sm="12" :md="6">
@@ -215,14 +215,14 @@ const value2 = ref(0);
 		</fb-col>
 	</fb-row>
 </div>`,
-	}),
+    }),
 };
 
 export const WithInput: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-slider v-model="value" show-input />
 </template>
@@ -232,33 +232,33 @@ import { ref } from 'vue';
 
 const value = ref(0);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSlider },
-		setup: () => {
-			const value = ref(0);
-
-			return {
-				value,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSlider },
+        setup: () => {
+            const value = ref(0);
+
+            return {
+                value,
+            };
+        },
+        template: `
 <div class="fb-slider-story-block">
 	<div class="fb-slider-story-block__item">
 		<fb-slider v-model="value" show-input />
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Sizes: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-slider v-model="value" show-input size="${ComponentSizeTypes.LARGE}" />
 	<fb-slider v-model="value" show-input />
@@ -270,20 +270,20 @@ import { ref } from 'vue';
 
 const value = ref(0);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSlider },
-		setup: () => {
-			const value = ref(0);
-
-			return {
-				value,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSlider },
+        setup: () => {
+            const value = ref(0);
+
+            return {
+                value,
+            };
+        },
+        template: `
 <div class="fb-slider-story-block">
 	<div class="fb-slider-story-block__item">
 		<fb-slider v-model="value" show-input size="${ComponentSizeTypes.LARGE}" />
@@ -295,14 +295,14 @@ const value = ref(0);
 		<fb-slider v-model="value" show-input size="${ComponentSizeTypes.SMALL}" />
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Variants: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-row :gutter="20" align="middle">
 		<fb-col :sm="12" :md="3">
@@ -368,35 +368,35 @@ const formatTooltip = (val: number) => {
 	return val / 100;
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSlider, FbRow, FbCol },
-		setup: () => {
-			const value1 = ref(20);
-			const value2 = ref(10);
-			const value3 = ref(50);
-			const value4 = ref(30);
-			const value5 = ref(40);
-			const value6 = ref(20);
-
-			const formatTooltip = (val: number) => {
-				return val / 100;
-			};
-
-			return {
-				value1,
-				value2,
-				value3,
-				value4,
-				value5,
-				value6,
-				formatTooltip,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSlider, FbRow, FbCol },
+        setup: () => {
+            const value1 = ref(20);
+            const value2 = ref(10);
+            const value3 = ref(50);
+            const value4 = ref(30);
+            const value5 = ref(40);
+            const value6 = ref(20);
+
+            const formatTooltip = (val: number) => {
+                return val / 100;
+            };
+
+            return {
+                value1,
+                value2,
+                value3,
+                value4,
+                value5,
+                value6,
+                formatTooltip,
+            };
+        },
+        template: `
 <div class="fb-slider-story-block">
 	<fb-row :gutter="20" align="middle">
 		<fb-col :sm="12" :md="3">
@@ -447,14 +447,14 @@ const formatTooltip = (val: number) => {
 		</fb-col>
 	</fb-row>
 </div>`,
-	}),
+    }),
 };
 
 export const Placement: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-slider v-model="value1" />
 	<fb-slider v-model="value2" placement="bottom" />
@@ -470,26 +470,26 @@ const value2 = ref(20);
 const value3 = ref(30);
 const value4 = ref(40);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSlider },
-		setup: () => {
-			const value1 = ref(10);
-			const value2 = ref(20);
-			const value3 = ref(30);
-			const value4 = ref(40);
-
-			return {
-				value1,
-				value2,
-				value3,
-				value4,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSlider },
+        setup: () => {
+            const value1 = ref(10);
+            const value2 = ref(20);
+            const value3 = ref(30);
+            const value4 = ref(40);
+
+            return {
+                value1,
+                value2,
+                value3,
+                value4,
+            };
+        },
+        template: `
 <div class="fb-slider-story-block">
 	<div class="fb-slider-story-block__item">
 		<fb-slider v-model="value1" />
@@ -504,14 +504,14 @@ const value4 = ref(40);
 		<fb-slider v-model="value4" placement="left" />
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const RangeSelection: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-slider v-model="value" range show-stops :max="10" />
 </template>
@@ -521,33 +521,33 @@ import { ref } from 'vue';
 
 const value = ref([4, 8]);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSlider },
-		setup: () => {
-			const value = ref([4, 8]);
-
-			return {
-				value,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSlider },
+        setup: () => {
+            const value = ref([4, 8]);
+
+            return {
+                value,
+            };
+        },
+        template: `
 <div class="fb-slider-story-block">
 	<div class="fb-slider-story-block__item">
 		<fb-slider v-model="value" range show-stops :max="10" />
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Vertical: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-slider v-model="value" vertical height="200px" />
 </template>
@@ -557,33 +557,33 @@ import { ref } from 'vue';
 
 const value = ref(0);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSlider },
-		setup: () => {
-			const value = ref(0);
-
-			return {
-				value,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSlider },
+        setup: () => {
+            const value = ref(0);
+
+            return {
+                value,
+            };
+        },
+        template: `
 <div class="fb-slider-story-block">
 	<div class="fb-slider-story-block__item">
 		<fb-slider v-model="value" vertical height="200px" />
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Marks: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-slider v-model="value" range :marks="marks" />
 </template>
@@ -613,43 +613,43 @@ const marks = reactive<Marks>({
 	},
 });
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSlider },
-		setup: () => {
-			interface Mark {
-				style: CSSProperties;
-				label: string;
-			}
-
-			type Marks = Record<number, Mark | string>;
-
-			const value = ref([30, 60]);
-			const marks = reactive<Marks>({
-				0: '0°C',
-				8: '8°C',
-				37: '37°C',
-				50: {
-					style: {
-						color: '#1989FA',
-					},
-					label: '50%',
-				},
-			});
-
-			return {
-				value,
-				marks,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSlider },
+        setup: () => {
+            interface Mark {
+                style: CSSProperties;
+                label: string;
+            }
+
+            type Marks = Record<number, Mark | string>;
+
+            const value = ref([30, 60]);
+            const marks = reactive<Marks>({
+                0: "0°C",
+                8: "8°C",
+                37: "37°C",
+                50: {
+                    style: {
+                        color: "#1989FA",
+                    },
+                    label: "50%",
+                },
+            });
+
+            return {
+                value,
+                marks,
+            };
+        },
+        template: `
 <div class="fb-slider-story-block">
 	<div class="fb-slider-story-block__item">
 		<fb-slider v-model="value" range :marks="marks" />
 	</div>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/spinner/fb-spinner.mdx b/docs/src/components/spinner/fb-spinner.mdx
index 6fc7ac8a..00566e2c 100644
--- a/docs/src/components/spinner/fb-spinner.mdx
+++ b/docs/src/components/spinner/fb-spinner.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as SpinnerStories from './fb-spinner.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as SpinnerStories from "./fb-spinner.stories";
 
 <Meta of={SpinnerStories} />
 
diff --git a/docs/src/components/spinner/fb-spinner.stories.scss b/docs/src/components/spinner/fb-spinner.stories.scss
index d5014883..5d51c719 100644
--- a/docs/src/components/spinner/fb-spinner.stories.scss
+++ b/docs/src/components/spinner/fb-spinner.stories.scss
@@ -1,12 +1,12 @@
 .fb-spinner-story-block {
-	display: flex;
-	align-items: center;
+    display: flex;
+    align-items: center;
 
-	.fb-spinner-story-block__item {
-		margin-right: 20px;
-	}
+    .fb-spinner-story-block__item {
+        margin-right: 20px;
+    }
 
-	.fb-spinner-story-block__item:last-child {
-		margin-right: 0;
-	}
+    .fb-spinner-story-block__item:last-child {
+        margin-right: 0;
+    }
 }
diff --git a/docs/src/components/spinner/fb-spinner.stories.ts b/docs/src/components/spinner/fb-spinner.stories.ts
index d3ab04b1..593f497e 100644
--- a/docs/src/components/spinner/fb-spinner.stories.ts
+++ b/docs/src/components/spinner/fb-spinner.stories.ts
@@ -1,49 +1,49 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbSpinner } from '@fastybird/web-ui-components';
-import { ComponentSizeTypes, VariantTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbSpinner } from "@fastybird/web-ui-components";
+import { ComponentSizeTypes, VariantTypes } from "@fastybird/web-ui-constants";
 
-import './fb-spinner.stories.scss';
+import "./fb-spinner.stories.scss";
 
 const meta: Meta<typeof FbSpinner> = {
-	component: FbSpinner,
-	title: 'Components/Feedback/Spinner',
-	argTypes: {
-		size: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
-			description: 'spinner size',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: ComponentSizeTypes.DEFAULT },
-			},
-		},
-		variant: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
-			description: 'spinner variant',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: VariantTypes.DEFAULT },
-			},
-		},
-		bg: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'determine whether the spinner background color is always on',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-	},
-	args: {
-		size: ComponentSizeTypes.DEFAULT,
-		variant: VariantTypes.DEFAULT,
-		bg: true,
-	},
-	excludeStories: /.*Data$/,
+    component: FbSpinner,
+    title: "Components/Feedback/Spinner",
+    argTypes: {
+        size: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
+            description: "spinner size",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: ComponentSizeTypes.DEFAULT },
+            },
+        },
+        variant: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
+            description: "spinner variant",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: VariantTypes.DEFAULT },
+            },
+        },
+        bg: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "determine whether the spinner background color is always on",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+    },
+    args: {
+        size: ComponentSizeTypes.DEFAULT,
+        variant: VariantTypes.DEFAULT,
+        bg: true,
+    },
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -51,26 +51,26 @@ export default meta;
 type Story = StoryObj<typeof FbSpinner>;
 
 export const Component: Story = {
-	tags: ['hideInSidebar'],
+    tags: ["hideInSidebar"],
 };
 
 export const Sizes: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-spinner size="${ComponentSizeTypes.LARGE}" />
 	<fb-spinner />
 	<fb-spinner size="${ComponentSizeTypes.SMALL}" />
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSpinner },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSpinner },
+        template: `
 <div class="fb-spinner-story-block">
 	<div class="fb-spinner-story-block__item">
 		<fb-spinner size="${ComponentSizeTypes.LARGE}" />
@@ -82,14 +82,14 @@ export const Sizes: Story = {
 		<fb-spinner size="${ComponentSizeTypes.SMALL}" />
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Variants: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-spinner variant="${VariantTypes.PRIMARY}" />
 	<fb-spinner variant="${VariantTypes.DEFAULT}" />
@@ -98,13 +98,13 @@ export const Variants: Story = {
 	<fb-spinner variant="${VariantTypes.WARNING}" />
 	<fb-spinner variant="${VariantTypes.DANGER}" />
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSpinner },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSpinner },
+        template: `
 <div class="fb-spinner-story-block">
 	<div class="fb-spinner-story-block__item">
 		<fb-spinner variant="${VariantTypes.PRIMARY}" />
@@ -125,5 +125,5 @@ export const Variants: Story = {
 		<fb-spinner variant="${VariantTypes.DANGER}" />
 	</div>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/swipe/fb-swipe.mdx b/docs/src/components/swipe/fb-swipe.mdx
index 3de46a4c..05c9747b 100644
--- a/docs/src/components/swipe/fb-swipe.mdx
+++ b/docs/src/components/swipe/fb-swipe.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as SwipeStories from './fb-swipe.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as SwipeStories from "./fb-swipe.stories";
 
 <Meta of={SwipeStories} />
 
@@ -7,10 +7,7 @@ import * as SwipeStories from './fb-swipe.stories';
 
 ## Basic Usage
 
-<Canvas
-	withToolbar={true}
-	of={SwipeStories.BasicUsage}
-/>
+<Canvas withToolbar={true} of={SwipeStories.BasicUsage} />
 
 ---
 
diff --git a/docs/src/components/swipe/fb-swipe.stories.scss b/docs/src/components/swipe/fb-swipe.stories.scss
index 6d159653..174565f9 100644
--- a/docs/src/components/swipe/fb-swipe.stories.scss
+++ b/docs/src/components/swipe/fb-swipe.stories.scss
@@ -1,52 +1,52 @@
 .fb-swipe-story-block {
-	.fb-swipe-story-block__item {
-		width: 100%;
-		box-shadow: none;
-		border: 1px solid lightgray;
-		padding: 1rem;
-	}
+    .fb-swipe-story-block__item {
+        width: 100%;
+        box-shadow: none;
+        border: 1px solid lightgray;
+        padding: 1rem;
+    }
 
-	.fb-swipe__item:not(:last-child) .fb-swipe-story-block__item {
-		border-bottom: none;
-	}
+    .fb-swipe__item:not(:last-child) .fb-swipe-story-block__item {
+        border-bottom: none;
+    }
 
-	.fb-swipe-story-block__button-trash {
-		display: flex;
-		align-items: center;
-		padding: 0 3rem;
-		cursor: pointer;
-		left: 0;
-		color: white;
-		background-color: rgb(255, 59, 48);
-	}
+    .fb-swipe-story-block__button-trash {
+        display: flex;
+        align-items: center;
+        padding: 0 3rem;
+        cursor: pointer;
+        left: 0;
+        color: white;
+        background-color: rgb(255, 59, 48);
+    }
 
-	.fb-swipe-story-block__button-close {
-		display: flex;
-		align-items: center;
-		padding: 0 3rem;
-		cursor: pointer;
-		left: 0;
-		color: white;
-		background-color: rgb(88, 86, 214);
-	}
+    .fb-swipe-story-block__button-close {
+        display: flex;
+        align-items: center;
+        padding: 0 3rem;
+        cursor: pointer;
+        left: 0;
+        color: white;
+        background-color: rgb(88, 86, 214);
+    }
 
-	.fb-swipe-story-block__button-favorite {
-		display: flex;
-		align-items: center;
-		padding: 0 3rem;
-		cursor: pointer;
-		left: 0;
-		color: white;
-		background-color: rgb(0, 122, 255);
-	}
+    .fb-swipe-story-block__button-favorite {
+        display: flex;
+        align-items: center;
+        padding: 0 3rem;
+        cursor: pointer;
+        left: 0;
+        color: white;
+        background-color: rgb(0, 122, 255);
+    }
 
-	.fb-swipe-story-block__button-edit {
-		display: flex;
-		align-items: center;
-		padding: 0 3rem;
-		cursor: pointer;
-		left: 0;
-		color: white;
-		background-color: rgb(76, 217, 100);
-	}
+    .fb-swipe-story-block__button-edit {
+        display: flex;
+        align-items: center;
+        padding: 0 3rem;
+        cursor: pointer;
+        left: 0;
+        color: white;
+        background-color: rgb(76, 217, 100);
+    }
 }
diff --git a/docs/src/components/swipe/fb-swipe.stories.ts b/docs/src/components/swipe/fb-swipe.stories.ts
index 3b50da7e..b51b4a31 100644
--- a/docs/src/components/swipe/fb-swipe.stories.ts
+++ b/docs/src/components/swipe/fb-swipe.stories.ts
@@ -1,13 +1,13 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FasTrash, FasXmark, FasHeart, FasPenToSquare } from '@fastybird/web-ui-icons';
-import { FbSwipe, FbIcon } from '@fastybird/web-ui-components';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FasTrash, FasXmark, FasHeart, FasPenToSquare } from "@fastybird/web-ui-icons";
+import { FbSwipe, FbIcon } from "@fastybird/web-ui-components";
 
-import './fb-swipe.stories.scss';
+import "./fb-swipe.stories.scss";
 
 const meta: Meta<typeof FbSwipe> = {
-	component: FbSwipe,
-	title: 'Components/Data/Swipe actions',
-	excludeStories: /.*Data$/,
+    component: FbSwipe,
+    title: "Components/Data/Swipe actions",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -15,10 +15,10 @@ export default meta;
 type Story = StoryObj<typeof FbSwipe>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-swipe
 		:items="items"
@@ -141,43 +141,43 @@ const items = [
 	background-color: rgb(76, 217, 100);
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSwipe, FbIcon, FasTrash, FasXmark, FasHeart, FasPenToSquare },
-		setup: () => {
-			const items = [
-				{
-					id: 'a',
-					title: 'Some title',
-					description: 'some description',
-					disabled: false,
-				},
-				{
-					id: 'b',
-					title: 'Some title',
-					description: 'some description',
-					disabled: false,
-				},
-				{
-					id: 'c',
-					title: 'Some title',
-					description: 'some description',
-					disabled: false,
-				},
-			];
-
-			return {
-				items,
-				FasTrash,
-				FasXmark,
-				FasHeart,
-				FasPenToSquare,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSwipe, FbIcon, FasTrash, FasXmark, FasHeart, FasPenToSquare },
+        setup: () => {
+            const items = [
+                {
+                    id: "a",
+                    title: "Some title",
+                    description: "some description",
+                    disabled: false,
+                },
+                {
+                    id: "b",
+                    title: "Some title",
+                    description: "some description",
+                    disabled: false,
+                },
+                {
+                    id: "c",
+                    title: "Some title",
+                    description: "some description",
+                    disabled: false,
+                },
+            ];
+
+            return {
+                items,
+                FasTrash,
+                FasXmark,
+                FasHeart,
+                FasPenToSquare,
+            };
+        },
+        template: `
 <div class="fb-swipe-story-block">
 	<fb-swipe
 		:items="items"
@@ -226,5 +226,5 @@ const items = [
 		</template>
 	</fb-swipe>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/switch/fb-switch.mdx b/docs/src/components/switch/fb-switch.mdx
index 610105f4..ea43ea08 100644
--- a/docs/src/components/switch/fb-switch.mdx
+++ b/docs/src/components/switch/fb-switch.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as SwitchStories from './fb-switch.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as SwitchStories from "./fb-switch.stories";
 
 <Meta of={SwitchStories} />
 
diff --git a/docs/src/components/switch/fb-switch.stories.scss b/docs/src/components/switch/fb-switch.stories.scss
index a22caf74..cd1dfb8b 100644
--- a/docs/src/components/switch/fb-switch.stories.scss
+++ b/docs/src/components/switch/fb-switch.stories.scss
@@ -1,27 +1,27 @@
 .fb-switch-story-block {
-	.fb-switch-story-block__item {
-		margin-bottom: 20px;
-	}
+    .fb-switch-story-block__item {
+        margin-bottom: 20px;
+    }
 
-	.fb-switch-story-block__item:last-child {
-		margin-bottom: 0;
-	}
+    .fb-switch-story-block__item:last-child {
+        margin-bottom: 0;
+    }
 
-	.fb-switch-story-block__row-item {
-		margin-right: 20px;
-		display: inline-block;
-	}
+    .fb-switch-story-block__row-item {
+        margin-right: 20px;
+        display: inline-block;
+    }
 
-	.fb-switch-story-block__row-item:last-child {
-		margin-right: 0;
-	}
+    .fb-switch-story-block__row-item:last-child {
+        margin-right: 0;
+    }
 
-	.fb-col {
-		margin-bottom: 20px;
-	}
+    .fb-col {
+        margin-bottom: 20px;
+    }
 
-	.switch-colors {
-		--fb-switch-on-color: #13ce66;
-		--fb-switch-off-color: #ff4949;
-	}
+    .switch-colors {
+        --fb-switch-on-color: #13ce66;
+        --fb-switch-off-color: #ff4949;
+    }
 }
diff --git a/docs/src/components/switch/fb-switch.stories.ts b/docs/src/components/switch/fb-switch.stories.ts
index f05e3405..f00d66c9 100644
--- a/docs/src/components/switch/fb-switch.stories.ts
+++ b/docs/src/components/switch/fb-switch.stories.ts
@@ -1,117 +1,117 @@
-import { ref } from 'vue';
+import { ref } from "vue";
 
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbMessage, FbSwitch, FbTooltip, FbRow, FbCol } from '@fastybird/web-ui-components';
-import { FasXmark, FasCheck, FasEye, FasEyeSlash } from '@fastybird/web-ui-icons';
-import { ComponentSizeTypes, VariantTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbMessage, FbSwitch, FbTooltip, FbRow, FbCol } from "@fastybird/web-ui-components";
+import { FasXmark, FasCheck, FasEye, FasEyeSlash } from "@fastybird/web-ui-icons";
+import { ComponentSizeTypes, VariantTypes } from "@fastybird/web-ui-constants";
 
-import './fb-switch.stories.scss';
+import "./fb-switch.stories.scss";
 
 const meta: Meta<typeof FbSwitch> = {
-	component: FbSwitch,
-	title: 'Components/Form/Switch',
-	argTypes: {
-		disabled: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether switch is disabled',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		loading: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether switch is in loading state',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		size: {
-			type: { name: 'string', required: false },
-			control: { type: 'select' },
-			options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
-			description: 'spinner size',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: ComponentSizeTypes.DEFAULT },
-			},
-		},
-		width: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'width of switch',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		inlinePrompt: {
-			type: { name: 'boolean', required: false },
-			control: { type: 'boolean' },
-			description: 'whether icon or text is displayed inside dot, only the first character will be rendered for text',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		activeText: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'text displayed when in `on` state',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		inactiveText: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'text displayed when in `off` state',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-		activeValue: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'switch value when in `on` state',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: true },
-			},
-		},
-		inactiveValue: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'switch value when in `off` state',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: false },
-			},
-		},
-		name: {
-			type: { name: 'string', required: false },
-			control: { type: 'text' },
-			description: 'input name of switch',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: '-' },
-			},
-		},
-	},
-	args: {
-		disabled: false,
-		loading: false,
-		size: ComponentSizeTypes.DEFAULT,
-		inlinePrompt: false,
-		activeValue: 'true',
-		inactiveValue: 'false',
-	},
-	excludeStories: /.*Data$/,
+    component: FbSwitch,
+    title: "Components/Form/Switch",
+    argTypes: {
+        disabled: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether switch is disabled",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        loading: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether switch is in loading state",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        size: {
+            type: { name: "string", required: false },
+            control: { type: "select" },
+            options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
+            description: "spinner size",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: ComponentSizeTypes.DEFAULT },
+            },
+        },
+        width: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "width of switch",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        inlinePrompt: {
+            type: { name: "boolean", required: false },
+            control: { type: "boolean" },
+            description: "whether icon or text is displayed inside dot, only the first character will be rendered for text",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        activeText: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "text displayed when in `on` state",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        inactiveText: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "text displayed when in `off` state",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+        activeValue: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "switch value when in `on` state",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: true },
+            },
+        },
+        inactiveValue: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "switch value when in `off` state",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: false },
+            },
+        },
+        name: {
+            type: { name: "string", required: false },
+            control: { type: "text" },
+            description: "input name of switch",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "-" },
+            },
+        },
+    },
+    args: {
+        disabled: false,
+        loading: false,
+        size: ComponentSizeTypes.DEFAULT,
+        inlinePrompt: false,
+        activeValue: "true",
+        inactiveValue: "false",
+    },
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -119,14 +119,14 @@ export default meta;
 type Story = StoryObj<typeof FbSwitch>;
 
 export const Component: Story = {
-	tags: ['hideInSidebar'],
+    tags: ["hideInSidebar"],
 };
 
 export const Basic: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-switch v-model="value1" />
 	<fb-switch v-model="value2" class="switch-colors" />
@@ -145,34 +145,34 @@ const value2 = ref(true);
 	--fb-switch-off-color: #ff4949
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSwitch },
-		setup: () => {
-			const value1 = ref(true);
-			const value2 = ref(true);
-
-			return {
-				value1,
-				value2,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSwitch },
+        setup: () => {
+            const value1 = ref(true);
+            const value2 = ref(true);
+
+            return {
+                value1,
+                value2,
+            };
+        },
+        template: `
 <div class="fb-switch-story-block">
 	<fb-switch v-model="value1" class="fb-switch-story-block__row-item" />
 	<fb-switch v-model="value2"  class="switch-colors fb-switch-story-block__row-item" />
 </div>`,
-	}),
+    }),
 };
 
 export const Sizes: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-switch
 		v-model="value"
@@ -196,20 +196,20 @@ import { ref } from 'vue';
 
 const value = ref(true);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSwitch },
-		setup: () => {
-			const value = ref(true);
-
-			return {
-				value,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSwitch },
+        setup: () => {
+            const value = ref(true);
+
+            return {
+                value,
+            };
+        },
+        template: `
 <div class="fb-switch-story-block">
 	<div class="fb-switch-story-block__item">
 		<fb-switch
@@ -231,14 +231,14 @@ const value = ref(true);
 		/>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Variants: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-row :gutter="20" align="middle">
 		<fb-col :sm="12" :md="4">
@@ -295,20 +295,20 @@ import { ref } from 'vue';
 
 const value = ref(true);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSwitch, FbRow, FbCol },
-		setup: () => {
-			const value = ref(true);
-
-			return {
-				value,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSwitch, FbRow, FbCol },
+        setup: () => {
+            const value = ref(true);
+
+            return {
+                value,
+            };
+        },
+        template: `
 <div class="fb-switch-story-block">
 	<fb-row :gutter="20" align="middle">
 		<fb-col :sm="12" :md="4">
@@ -359,14 +359,14 @@ const value = ref(true);
 		</fb-col>
 	</fb-row>
 </div>`,
-	}),
+    }),
 };
 
 export const TextDescription: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-switch
 		v-model="value1"
@@ -423,30 +423,30 @@ const value4 = ref(true);
 const value5 = ref(true);
 const value6 = ref(true);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSwitch },
-		setup: () => {
-			const value1 = ref(true);
-			const value2 = ref(true);
-			const value3 = ref(true);
-			const value4 = ref(true);
-			const value5 = ref(true);
-			const value6 = ref(true);
-
-			return {
-				value1,
-				value2,
-				value3,
-				value4,
-				value5,
-				value6,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSwitch },
+        setup: () => {
+            const value1 = ref(true);
+            const value2 = ref(true);
+            const value3 = ref(true);
+            const value4 = ref(true);
+            const value5 = ref(true);
+            const value6 = ref(true);
+
+            return {
+                value1,
+                value2,
+                value3,
+                value4,
+                value5,
+                value6,
+            };
+        },
+        template: `
 <div class="fb-switch-story-block">
 	<div class="fb-switch-story-block__item">
 		<fb-switch
@@ -495,14 +495,14 @@ const value6 = ref(true);
 		/>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const CustomIcons: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-switch v-model="value1" :active-icon="FasCheck" :inactive-icon="FasXmark" class="fb-switch-story-block__row-item" />
 
@@ -515,24 +515,24 @@ import { ref } from 'vue';
 const value1 = ref(true);
 const value2 = ref(true);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSwitch },
-		setup: () => {
-			const value1 = ref(true);
-			const value2 = ref(true);
-
-			return {
-				FasXmark,
-				FasCheck,
-				value1,
-				value2,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSwitch },
+        setup: () => {
+            const value1 = ref(true);
+            const value2 = ref(true);
+
+            return {
+                FasXmark,
+                FasCheck,
+                value1,
+                value2,
+            };
+        },
+        template: `
 <div class="fb-switch-story-block">
 	<div class="fb-switch-story-block__item">
 		<fb-switch v-model="value1" :active-icon="FasCheck" :inactive-icon="FasXmark" />
@@ -541,14 +541,14 @@ const value2 = ref(true);
 		<fb-switch v-model="value2" inline-prompt :active-icon="FasCheck" :inactive-icon="FasXmark" />
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const CustomActionIcons: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-switch
 		v-model="value"
@@ -563,35 +563,35 @@ import { FasEye, FasEyeSlash } from '@fastybird/web-ui-icons';
 
 const value = ref(true);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSwitch },
-		setup: () => {
-			const value = ref(true);
-
-			return {
-				FasEye,
-				FasEyeSlash,
-				value,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSwitch },
+        setup: () => {
+            const value = ref(true);
+
+            return {
+                FasEye,
+                FasEyeSlash,
+                value,
+            };
+        },
+        template: `
 <fb-switch
 	v-model="value"
 	:active-action-icon="FasEye"
 	:inactive-action-icon="FasEyeSlash"
 />`,
-	}),
+    }),
 };
 
 export const ValueTypes: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tooltip :content="'Switch value: ' + value" placement="top">
 		<fb-switch
@@ -608,20 +608,20 @@ import { ref } from 'vue';
 
 const value = ref('100');
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSwitch, FbTooltip },
-		setup: () => {
-			const value = ref('100');
-
-			return {
-				value,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSwitch, FbTooltip },
+        setup: () => {
+            const value = ref("100");
+
+            return {
+                value,
+            };
+        },
+        template: `
 <div class="fb-switch-story-block">
 	<fb-tooltip :content="'Switch value: ' + value" placement="top">
 		<fb-switch
@@ -632,14 +632,14 @@ const value = ref('100');
 		/>
 	</fb-tooltip>
 </div>`,
-	}),
+    }),
 };
 
 export const Disabled: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-switch v-model="value1" disabled />
 	<fb-switch v-model="value2" />
@@ -651,34 +651,34 @@ import { ref } from 'vue';
 const value1 = ref(true);
 const value2 = ref(true);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSwitch },
-		setup: () => {
-			const value1 = ref(true);
-			const value2 = ref(true);
-
-			return {
-				value1,
-				value2,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSwitch },
+        setup: () => {
+            const value1 = ref(true);
+            const value2 = ref(true);
+
+            return {
+                value1,
+                value2,
+            };
+        },
+        template: `
 <div class="fb-switch-story-block">
 	<fb-switch v-model="value1" disabled class="fb-switch-story-block__row-item" />
 	<fb-switch v-model="value2" class="fb-switch-story-block__row-item" />
 </div>`,
-	}),
+    }),
 };
 
 export const Loading: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-switch v-model="value1" loading />
 	<fb-switch v-model="value2" loading />
@@ -690,34 +690,34 @@ import { ref } from 'vue';
 const value1 = ref(true);
 const value2 = ref(false);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSwitch },
-		setup: () => {
-			const value1 = ref(true);
-			const value2 = ref(false);
-
-			return {
-				value1,
-				value2,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSwitch },
+        setup: () => {
+            const value1 = ref(true);
+            const value2 = ref(false);
+
+            return {
+                value1,
+                value2,
+            };
+        },
+        template: `
 <div class="fb-switch-story-block">
 	<fb-switch v-model="value1" loading class="fb-switch-story-block__row-item" />
 	<fb-switch v-model="value2" loading class="fb-switch-story-block__row-item" />
 </div>`,
-	}),
+    }),
 };
 
 export const PreventSwitching: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-switch
 		v-model="value1"
@@ -768,56 +768,56 @@ const beforeChange2 = (): Promise<boolean> => {
 	});
 };
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSwitch },
-		setup: () => {
-			const value1 = ref(true);
-			const value2 = ref(false);
-			const loading1 = ref(false);
-			const loading2 = ref(false);
-
-			const beforeChange1 = (): Promise<boolean> => {
-				loading1.value = true;
-
-				return new Promise((resolve): void => {
-					setTimeout((): void => {
-						loading1.value = false;
-
-						FbMessage.success('Switch success');
-
-						resolve(true);
-					}, 1000);
-				});
-			};
-
-			const beforeChange2 = (): Promise<boolean> => {
-				loading2.value = true;
-
-				return new Promise((_, reject): void => {
-					setTimeout((): void => {
-						loading2.value = false;
-
-						FbMessage.error('Switch failed');
-
-						reject(new Error('Error'));
-					}, 1000);
-				});
-			};
-
-			return {
-				value1,
-				value2,
-				loading1,
-				loading2,
-				beforeChange1,
-				beforeChange2,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSwitch },
+        setup: () => {
+            const value1 = ref(true);
+            const value2 = ref(false);
+            const loading1 = ref(false);
+            const loading2 = ref(false);
+
+            const beforeChange1 = (): Promise<boolean> => {
+                loading1.value = true;
+
+                return new Promise((resolve): void => {
+                    setTimeout((): void => {
+                        loading1.value = false;
+
+                        FbMessage.success("Switch success");
+
+                        resolve(true);
+                    }, 1000);
+                });
+            };
+
+            const beforeChange2 = (): Promise<boolean> => {
+                loading2.value = true;
+
+                return new Promise((_, reject): void => {
+                    setTimeout((): void => {
+                        loading2.value = false;
+
+                        FbMessage.error("Switch failed");
+
+                        reject(new Error("Error"));
+                    }, 1000);
+                });
+            };
+
+            return {
+                value1,
+                value2,
+                loading1,
+                loading2,
+                beforeChange1,
+                beforeChange2,
+            };
+        },
+        template: `
 <div class="fb-switch-story-block">
 	<fb-switch
 		v-model="value1"
@@ -832,14 +832,14 @@ const beforeChange2 = (): Promise<boolean> => {
 		class="fb-switch-story-block__row-item"
 	/>
 </div>`,
-	}),
+    }),
 };
 
 export const CustomActionSlot: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-switch v-model="value">
 		<template #active-action>
@@ -856,20 +856,20 @@ import { ref } from 'vue';
 
 const value = ref(true);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbSwitch },
-		setup: () => {
-			const value = ref(true);
-
-			return {
-				value,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbSwitch },
+        setup: () => {
+            const value = ref(true);
+
+            return {
+                value,
+            };
+        },
+        template: `
 <div class="fb-switch-story-block">
 	<fb-switch v-model="value">
 		<template #active-action>
@@ -880,5 +880,5 @@ const value = ref(true);
 		</template>
 	</fb-switch>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/tabs/fb-tabs.mdx b/docs/src/components/tabs/fb-tabs.mdx
index 4914e749..b073b474 100644
--- a/docs/src/components/tabs/fb-tabs.mdx
+++ b/docs/src/components/tabs/fb-tabs.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as TabsStories from './fb-tabs.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as TabsStories from "./fb-tabs.stories";
 
 <Meta of={TabsStories} />
 
diff --git a/docs/src/components/tabs/fb-tabs.stories.scss b/docs/src/components/tabs/fb-tabs.stories.scss
index dd783f75..2d3da77d 100644
--- a/docs/src/components/tabs/fb-tabs.stories.scss
+++ b/docs/src/components/tabs/fb-tabs.stories.scss
@@ -1,35 +1,35 @@
 .fb-tabs-story-block {
-	.fb-tabs-story-block__item {
-		margin-bottom: 20px;
-	}
+    .fb-tabs-story-block__item {
+        margin-bottom: 20px;
+    }
 
-	.fb-tabs-story-block__item:last-child {
-		margin-bottom: 0;
-	}
+    .fb-tabs-story-block__item:last-child {
+        margin-bottom: 0;
+    }
 
-	.fb-tabs-story-block__controls {
-		margin-bottom: 10px;
-	}
+    .fb-tabs-story-block__controls {
+        margin-bottom: 10px;
+    }
 
-	.fb-tabs__content {
-		padding: 32px 10px;
-		font-size: 32px;
-		font-weight: 600;
-	}
+    .fb-tabs__content {
+        padding: 32px 10px;
+        font-size: 32px;
+        font-weight: 600;
+    }
 
-	.fb-tabs--right .fb-tabs__content,
-	.fb-tabs--left .fb-tabs__content {
-		padding: 10px 32px;
-	}
+    .fb-tabs--right .fb-tabs__content,
+    .fb-tabs--left .fb-tabs__content {
+        padding: 10px 32px;
+    }
 
-	.fb-tabs-story-block__custom-tabs-label {
-		.fb-icon {
-			vertical-align: middle;
-		}
+    .fb-tabs-story-block__custom-tabs-label {
+        .fb-icon {
+            vertical-align: middle;
+        }
 
-		span {
-			vertical-align: middle;
-			margin-left: 4px;
-		}
-	}
+        span {
+            vertical-align: middle;
+            margin-left: 4px;
+        }
+    }
 }
diff --git a/docs/src/components/tabs/fb-tabs.stories.ts b/docs/src/components/tabs/fb-tabs.stories.ts
index dfb4860d..8a084291 100644
--- a/docs/src/components/tabs/fb-tabs.stories.ts
+++ b/docs/src/components/tabs/fb-tabs.stories.ts
@@ -1,25 +1,25 @@
-import { Meta, StoryObj } from '@storybook/vue3';
+import { Meta, StoryObj } from "@storybook/vue3";
 import {
-	FbTabs,
-	FbTabPane,
-	FbRadioGroup,
-	FbRadioButton,
-	FbIcon,
-	FbButton,
-	TabsPaneContext,
-	TabPaneName,
-	TabNavTypeTypes,
-	TabPositionTypes,
-} from '@fastybird/web-ui-components';
-import { FasCalendar, FasCheck } from '@fastybird/web-ui-icons';
-
-import './fb-tabs.stories.scss';
-import { ref } from 'vue';
+    FbTabs,
+    FbTabPane,
+    FbRadioGroup,
+    FbRadioButton,
+    FbIcon,
+    FbButton,
+    TabsPaneContext,
+    TabPaneName,
+    TabNavTypeTypes,
+    TabPositionTypes,
+} from "@fastybird/web-ui-components";
+import { FasCalendar, FasCheck } from "@fastybird/web-ui-icons";
+
+import "./fb-tabs.stories.scss";
+import { ref } from "vue";
 
 const meta: Meta<typeof FbTabs> = {
-	component: FbTabs,
-	title: 'Components/Navigation/Tabs',
-	excludeStories: /.*Data$/,
+    component: FbTabs,
+    title: "Components/Navigation/Tabs",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -27,10 +27,10 @@ export default meta;
 type Story = StoryObj<typeof FbTabs>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tabs
 		v-model="activeName"
@@ -63,25 +63,25 @@ const handleClick = (tab: TabsPaneContext, event: Event): void => {
 	font-weight: 600;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTabs, FbTabPane },
-		setup: () => {
-			const activeName = ref('first');
-
-			const handleClick = (tab: TabsPaneContext, event: Event): void => {
-				console.log(tab, event);
-			};
-
-			return {
-				activeName,
-				handleClick,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTabs, FbTabPane },
+        setup: () => {
+            const activeName = ref("first");
+
+            const handleClick = (tab: TabsPaneContext, event: Event): void => {
+                console.log(tab, event);
+            };
+
+            return {
+                activeName,
+                handleClick,
+            };
+        },
+        template: `
 <div class="fb-tabs-story-block">
 	<div class="fb-tabs-story-block__item">
 		<fb-tabs v-model="activeName" @tab-click="handleClick">
@@ -92,14 +92,14 @@ const handleClick = (tab: TabsPaneContext, event: Event): void => {
 		</fb-tabs>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const CardStyle: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tabs
 		v-model="activeName"
@@ -133,25 +133,25 @@ const handleClick = (tab: TabsPaneContext, event: Event): void => {
   font-weight: 600;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTabs, FbTabPane },
-		setup: () => {
-			const activeName = ref('first');
-
-			const handleClick = (tab: TabsPaneContext, event: Event): void => {
-				console.log(tab, event);
-			};
-
-			return {
-				activeName,
-				handleClick,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTabs, FbTabPane },
+        setup: () => {
+            const activeName = ref("first");
+
+            const handleClick = (tab: TabsPaneContext, event: Event): void => {
+                console.log(tab, event);
+            };
+
+            return {
+                activeName,
+                handleClick,
+            };
+        },
+        template: `
 <div class="fb-tabs-story-block">
 	<div class="fb-tabs-story-block__item">
 		<fb-tabs
@@ -166,14 +166,14 @@ const handleClick = (tab: TabsPaneContext, event: Event): void => {
 		</fb-tabs>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const BorderCard: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tabs
 		v-model="activeName"
@@ -207,25 +207,25 @@ const handleClick = (tab: TabsPaneContext, event: Event): void => {
   font-weight: 600;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTabs, FbTabPane },
-		setup: () => {
-			const activeName = ref('first');
-
-			const handleClick = (tab: TabsPaneContext, event: Event): void => {
-				console.log(tab, event);
-			};
-
-			return {
-				activeName,
-				handleClick,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTabs, FbTabPane },
+        setup: () => {
+            const activeName = ref("first");
+
+            const handleClick = (tab: TabsPaneContext, event: Event): void => {
+                console.log(tab, event);
+            };
+
+            return {
+                activeName,
+                handleClick,
+            };
+        },
+        template: `
 <div class="fb-tabs-story-block">
 	<div class="fb-tabs-story-block__item">
 		<fb-tabs
@@ -240,14 +240,14 @@ const handleClick = (tab: TabsPaneContext, event: Event): void => {
 		</fb-tabs>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const TabPosition: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-radio-group v-model="tabPosition">
 		<fb-radio-button value="${TabPositionTypes.TOP}">top</fb-radio-button>
@@ -278,20 +278,20 @@ const tabPosition = ref('left');
   font-weight: 600;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTabs, FbTabPane, FbRadioGroup, FbRadioButton },
-		setup: () => {
-			const tabPosition = ref('left');
-
-			return {
-				tabPosition,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTabs, FbTabPane, FbRadioGroup, FbRadioButton },
+        setup: () => {
+            const tabPosition = ref("left");
+
+            return {
+                tabPosition,
+            };
+        },
+        template: `
 <div class="fb-tabs-story-block">
 	<div class="fb-tabs-story-block__controls">
 		<fb-radio-group v-model="tabPosition">
@@ -311,14 +311,14 @@ const tabPosition = ref('left');
 		</fb-tabs>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const CustomTab: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tabs type="${TabNavTypeTypes.BORDER_CARD}" class="demo-tabs">
 		<fb-tab-pane>
@@ -356,18 +356,18 @@ import { FasCalendar } from '@fastybird/web-ui-icons';
 	margin-left: 4px;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTabs, FbTabPane, FbIcon, FasCalendar },
-		setup: () => {
-			return {
-				FasCalendar,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTabs, FbTabPane, FbIcon, FasCalendar },
+        setup: () => {
+            return {
+                FasCalendar,
+            };
+        },
+        template: `
 <div class="fb-tabs-story-block">
 	<div class="fb-tabs-story-block__item">
 		<fb-tabs type="${TabNavTypeTypes.BORDER_CARD}" class="fb-tabs-story-block__custom-tabs-label">
@@ -385,14 +385,14 @@ import { FasCalendar } from '@fastybird/web-ui-icons';
 		</fb-tabs>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const AddCloseTab: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tabs
 		v-model="editableTabsValue"
@@ -478,71 +478,71 @@ const handleTabsEdit = (
 	font-weight: 600;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTabs, FbTabPane },
-		setup: () => {
-			let tabIndex = 2;
-
-			const editableTabsValue = ref('2');
-
-			const editableTabs = ref([
-				{
-					title: 'Tab 1',
-					name: '1',
-					content: 'Tab 1 content',
-				},
-				{
-					title: 'Tab 2',
-					name: '2',
-					content: 'Tab 2 content',
-				},
-			]);
-
-			const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' | 'add'): void => {
-				if (action === 'add') {
-					const newTabName = `${++tabIndex}`;
-
-					editableTabs.value.push({
-						title: 'New Tab',
-						name: newTabName,
-						content: 'New Tab content',
-					});
-
-					editableTabsValue.value = newTabName;
-				} else if (action === 'remove') {
-					const tabs = editableTabs.value;
-
-					let activeName = editableTabsValue.value;
-
-					if (activeName === targetName) {
-						tabs.forEach((tab, index): void => {
-							if (tab.name === targetName) {
-								const nextTab = tabs[index + 1] || tabs[index - 1];
-
-								if (nextTab) {
-									activeName = nextTab.name;
-								}
-							}
-						});
-					}
-
-					editableTabsValue.value = activeName;
-					editableTabs.value = tabs.filter((tab): boolean => tab.name !== targetName);
-				}
-			};
-
-			return {
-				tabIndex,
-				editableTabsValue,
-				editableTabs,
-				handleTabsEdit,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTabs, FbTabPane },
+        setup: () => {
+            let tabIndex = 2;
+
+            const editableTabsValue = ref("2");
+
+            const editableTabs = ref([
+                {
+                    title: "Tab 1",
+                    name: "1",
+                    content: "Tab 1 content",
+                },
+                {
+                    title: "Tab 2",
+                    name: "2",
+                    content: "Tab 2 content",
+                },
+            ]);
+
+            const handleTabsEdit = (targetName: TabPaneName | undefined, action: "remove" | "add"): void => {
+                if (action === "add") {
+                    const newTabName = `${++tabIndex}`;
+
+                    editableTabs.value.push({
+                        title: "New Tab",
+                        name: newTabName,
+                        content: "New Tab content",
+                    });
+
+                    editableTabsValue.value = newTabName;
+                } else if (action === "remove") {
+                    const tabs = editableTabs.value;
+
+                    let activeName = editableTabsValue.value;
+
+                    if (activeName === targetName) {
+                        tabs.forEach((tab, index): void => {
+                            if (tab.name === targetName) {
+                                const nextTab = tabs[index + 1] || tabs[index - 1];
+
+                                if (nextTab) {
+                                    activeName = nextTab.name;
+                                }
+                            }
+                        });
+                    }
+
+                    editableTabsValue.value = activeName;
+                    editableTabs.value = tabs.filter((tab): boolean => tab.name !== targetName);
+                }
+            };
+
+            return {
+                tabIndex,
+                editableTabsValue,
+                editableTabs,
+                handleTabsEdit,
+            };
+        },
+        template: `
 <div class="fb-tabs-story-block">
 	<div class="fb-tabs-story-block__item">
 		<fb-tabs
@@ -562,14 +562,14 @@ const handleTabsEdit = (
 		</fb-tabs>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const CustomAddIcon: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tabs
 		v-model="editableTabsValue"
@@ -657,71 +657,71 @@ const handleTabsEdit = (
 	font-weight: 600;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTabs, FbTabPane, FbIcon, FasCheck },
-		setup: () => {
-			let tabIndex = 2;
-
-			const editableTabsValue = ref('2');
-
-			const editableTabs = ref([
-				{
-					title: 'Tab 1',
-					name: '1',
-					content: 'Tab 1 content',
-				},
-				{
-					title: 'Tab 2',
-					name: '2',
-					content: 'Tab 2 content',
-				},
-			]);
-
-			const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' | 'add'): void => {
-				if (action === 'add') {
-					const newTabName = `${++tabIndex}`;
-
-					editableTabs.value.push({
-						title: 'New Tab',
-						name: newTabName,
-						content: 'New Tab content',
-					});
-
-					editableTabsValue.value = newTabName;
-				} else if (action === 'remove') {
-					const tabs = editableTabs.value;
-
-					let activeName = editableTabsValue.value;
-
-					if (activeName === targetName) {
-						tabs.forEach((tab, index): void => {
-							if (tab.name === targetName) {
-								const nextTab = tabs[index + 1] || tabs[index - 1];
-
-								if (nextTab) {
-									activeName = nextTab.name;
-								}
-							}
-						});
-					}
-
-					editableTabsValue.value = activeName;
-					editableTabs.value = tabs.filter((tab): boolean => tab.name !== targetName);
-				}
-			};
-
-			return {
-				tabIndex,
-				editableTabsValue,
-				editableTabs,
-				handleTabsEdit,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTabs, FbTabPane, FbIcon, FasCheck },
+        setup: () => {
+            let tabIndex = 2;
+
+            const editableTabsValue = ref("2");
+
+            const editableTabs = ref([
+                {
+                    title: "Tab 1",
+                    name: "1",
+                    content: "Tab 1 content",
+                },
+                {
+                    title: "Tab 2",
+                    name: "2",
+                    content: "Tab 2 content",
+                },
+            ]);
+
+            const handleTabsEdit = (targetName: TabPaneName | undefined, action: "remove" | "add"): void => {
+                if (action === "add") {
+                    const newTabName = `${++tabIndex}`;
+
+                    editableTabs.value.push({
+                        title: "New Tab",
+                        name: newTabName,
+                        content: "New Tab content",
+                    });
+
+                    editableTabsValue.value = newTabName;
+                } else if (action === "remove") {
+                    const tabs = editableTabs.value;
+
+                    let activeName = editableTabsValue.value;
+
+                    if (activeName === targetName) {
+                        tabs.forEach((tab, index): void => {
+                            if (tab.name === targetName) {
+                                const nextTab = tabs[index + 1] || tabs[index - 1];
+
+                                if (nextTab) {
+                                    activeName = nextTab.name;
+                                }
+                            }
+                        });
+                    }
+
+                    editableTabsValue.value = activeName;
+                    editableTabs.value = tabs.filter((tab): boolean => tab.name !== targetName);
+                }
+            };
+
+            return {
+                tabIndex,
+                editableTabsValue,
+                editableTabs,
+                handleTabsEdit,
+            };
+        },
+        template: `
 <div class="fb-tabs-story-block">
 	<div class="fb-tabs-story-block__item">
 		<fb-tabs
@@ -745,14 +745,14 @@ const handleTabsEdit = (
 		</fb-tabs>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const CustomAddTrigger: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button size="small" @click="addTab(editableTabsValue)">
 		Add new tab
@@ -835,71 +835,71 @@ const removeTab = (targetName: string) => {
 	font-weight: 600;
 }
 </style>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTabs, FbTabPane, FbButton },
-		setup: () => {
-			let tabIndex = 2;
-
-			const editableTabsValue = ref('2');
-
-			const editableTabs = ref([
-				{
-					title: 'Tab 1',
-					name: '1',
-					content: 'Tab 1 content',
-				},
-				{
-					title: 'Tab 2',
-					name: '2',
-					content: 'Tab 2 content',
-				},
-			]);
-
-			const addTab = (): void => {
-				const newTabName = `${++tabIndex}`;
-
-				editableTabs.value.push({
-					title: 'New Tab',
-					name: newTabName,
-					content: 'New Tab content',
-				});
-				editableTabsValue.value = newTabName;
-			};
-
-			const removeTab = (targetName: string): void => {
-				const tabs = editableTabs.value;
-
-				let activeName = editableTabsValue.value;
-
-				if (activeName === targetName) {
-					tabs.forEach((tab, index): void => {
-						if (tab.name === targetName) {
-							const nextTab = tabs[index + 1] || tabs[index - 1];
-
-							if (nextTab) {
-								activeName = nextTab.name;
-							}
-						}
-					});
-				}
-
-				editableTabsValue.value = activeName;
-				editableTabs.value = tabs.filter((tab): boolean => tab.name !== targetName);
-			};
-
-			return {
-				tabIndex,
-				editableTabsValue,
-				editableTabs,
-				addTab,
-				removeTab,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTabs, FbTabPane, FbButton },
+        setup: () => {
+            let tabIndex = 2;
+
+            const editableTabsValue = ref("2");
+
+            const editableTabs = ref([
+                {
+                    title: "Tab 1",
+                    name: "1",
+                    content: "Tab 1 content",
+                },
+                {
+                    title: "Tab 2",
+                    name: "2",
+                    content: "Tab 2 content",
+                },
+            ]);
+
+            const addTab = (): void => {
+                const newTabName = `${++tabIndex}`;
+
+                editableTabs.value.push({
+                    title: "New Tab",
+                    name: newTabName,
+                    content: "New Tab content",
+                });
+                editableTabsValue.value = newTabName;
+            };
+
+            const removeTab = (targetName: string): void => {
+                const tabs = editableTabs.value;
+
+                let activeName = editableTabsValue.value;
+
+                if (activeName === targetName) {
+                    tabs.forEach((tab, index): void => {
+                        if (tab.name === targetName) {
+                            const nextTab = tabs[index + 1] || tabs[index - 1];
+
+                            if (nextTab) {
+                                activeName = nextTab.name;
+                            }
+                        }
+                    });
+                }
+
+                editableTabsValue.value = activeName;
+                editableTabs.value = tabs.filter((tab): boolean => tab.name !== targetName);
+            };
+
+            return {
+                tabIndex,
+                editableTabsValue,
+                editableTabs,
+                addTab,
+                removeTab,
+            };
+        },
+        template: `
 <div class="fb-tabs-story-block">
 	<div class="fb-tabs-story-block__controls">
 		<fb-button size="small" @click="addTab">
@@ -925,5 +925,5 @@ const removeTab = (targetName: string) => {
 		</fb-tabs>
 	</div>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/tag/fb-tag.mdx b/docs/src/components/tag/fb-tag.mdx
index 12579848..b2a1461d 100644
--- a/docs/src/components/tag/fb-tag.mdx
+++ b/docs/src/components/tag/fb-tag.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as TagStories from './fb-tag.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as TagStories from "./fb-tag.stories";
 
 <Meta of={TagStories} />
 
diff --git a/docs/src/components/tag/fb-tag.stories.scss b/docs/src/components/tag/fb-tag.stories.scss
index 7e2c2c9d..47e43811 100644
--- a/docs/src/components/tag/fb-tag.stories.scss
+++ b/docs/src/components/tag/fb-tag.stories.scss
@@ -1,20 +1,20 @@
 .fb-tag-story-block {
-	.fb-tag-story-block__item {
-		display: flex;
-		gap: 20px;
-		align-items: center;
-		margin-bottom: 20px;
-	}
+    .fb-tag-story-block__item {
+        display: flex;
+        gap: 20px;
+        align-items: center;
+        margin-bottom: 20px;
+    }
 
-	.fb-tag-story-block__item:last-child {
-		margin-bottom: 0;
-	}
+    .fb-tag-story-block__item:last-child {
+        margin-bottom: 0;
+    }
 
-	.fb-input {
-		width: 100px;
-	}
+    .fb-input {
+        width: 100px;
+    }
 
-	.fb-button {
-		width: 100px;
-	}
+    .fb-button {
+        width: 100px;
+    }
 }
diff --git a/docs/src/components/tag/fb-tag.stories.ts b/docs/src/components/tag/fb-tag.stories.ts
index 9581c9d3..121d9810 100644
--- a/docs/src/components/tag/fb-tag.stories.ts
+++ b/docs/src/components/tag/fb-tag.stories.ts
@@ -1,17 +1,17 @@
-import { nextTick, ref } from 'vue';
+import { nextTick, ref } from "vue";
 
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbTag, FbCheckTag, FbButton, FbInput, TagProps } from '@fastybird/web-ui-components';
-import { ComponentSizeTypes, EffectTypes, VariantTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbTag, FbCheckTag, FbButton, FbInput, TagProps } from "@fastybird/web-ui-components";
+import { ComponentSizeTypes, EffectTypes, VariantTypes } from "@fastybird/web-ui-constants";
 
-import './fb-tag.stories.scss';
+import "./fb-tag.stories.scss";
 
-import type { Ref } from 'vue';
+import type { Ref } from "vue";
 
 const meta: Meta<typeof FbTag> = {
-	component: FbTag,
-	title: 'Components/Data/Tag',
-	excludeStories: /.*Data$/,
+    component: FbTag,
+    title: "Components/Data/Tag",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -19,14 +19,14 @@ export default meta;
 type Story = StoryObj<typeof FbTag>;
 
 export const Component: Story = {
-	tags: ['hideInSidebar'],
+    tags: ["hideInSidebar"],
 };
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tag variant="${VariantTypes.PRIMARY}">Tag 1</fb-tag>
 	<fb-tag variant="${VariantTypes.INFO}">Tag 2</fb-tag>
@@ -34,13 +34,13 @@ export const BasicUsage: Story = {
 	<fb-tag variant="${VariantTypes.WARNING}">Tag 4</fb-tag>
 	<fb-tag variant="${VariantTypes.DANGER}">Tag 5</fb-tag>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTag },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTag },
+        template: `
 <div class="fb-tag-story-block">
 	<div class="fb-tag-story-block__item">
 		<fb-tag variant="${VariantTypes.PRIMARY}">Tag 1</fb-tag>
@@ -50,14 +50,14 @@ export const BasicUsage: Story = {
 		<fb-tag variant="${VariantTypes.DANGER}">Tag 5</fb-tag>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Removable: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tag variant="${VariantTypes.PRIMARY}" closable>Tag 1</fb-tag>
 	<fb-tag variant="${VariantTypes.INFO}" closable>Tag 2</fb-tag>
@@ -65,13 +65,13 @@ export const Removable: Story = {
 	<fb-tag variant="${VariantTypes.WARNING}" closable>Tag 4</fb-tag>
 	<fb-tag variant="${VariantTypes.DANGER}" closable>Tag 5</fb-tag>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTag },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTag },
+        template: `
 <div class="fb-tag-story-block">
 	<div class="fb-tag-story-block__item">
 		<fb-tag variant="${VariantTypes.PRIMARY}" closable>Tag 1</fb-tag>
@@ -81,14 +81,14 @@ export const Removable: Story = {
 		<fb-tag variant="${VariantTypes.DANGER}" closable>Tag 5</fb-tag>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Dynamical: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tag
 		v-for="tag in dynamicTags"
@@ -144,58 +144,58 @@ const handleInputConfirm = () => {
 	inputValue.value = '';
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTag, FbButton, FbInput },
-		setup: (): {
-			inputValue: Ref<string>;
-			dynamicTags: Ref<string[]>;
-			inputVisible: Ref<boolean>;
-			InputRef: Ref<InstanceType<typeof FbInput>>;
-			handleClose: () => void;
-			showInput: () => void;
-			handleInputConfirm: () => void;
-		} => {
-			const inputValue = ref('');
-			const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
-			const inputVisible = ref(false);
-			const InputRef = ref<InstanceType<typeof FbInput>>();
-
-			const handleClose = (tag: string): void => {
-				dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
-			};
-
-			const showInput = async (): Promise<void> => {
-				inputVisible.value = true;
-
-				await nextTick();
-
-				InputRef.value!.input!.focus();
-			};
-
-			const handleInputConfirm = (): void => {
-				if (inputValue.value) {
-					dynamicTags.value.push(inputValue.value);
-				}
-
-				inputVisible.value = false;
-				inputValue.value = '';
-			};
-
-			return {
-				inputValue,
-				dynamicTags,
-				inputVisible,
-				InputRef,
-				handleClose,
-				showInput,
-				handleInputConfirm,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTag, FbButton, FbInput },
+        setup: (): {
+            inputValue: Ref<string>;
+            dynamicTags: Ref<string[]>;
+            inputVisible: Ref<boolean>;
+            InputRef: Ref<InstanceType<typeof FbInput>>;
+            handleClose: () => void;
+            showInput: () => void;
+            handleInputConfirm: () => void;
+        } => {
+            const inputValue = ref("");
+            const dynamicTags = ref(["Tag 1", "Tag 2", "Tag 3"]);
+            const inputVisible = ref(false);
+            const InputRef = ref<InstanceType<typeof FbInput>>();
+
+            const handleClose = (tag: string): void => {
+                dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+            };
+
+            const showInput = async (): Promise<void> => {
+                inputVisible.value = true;
+
+                await nextTick();
+
+                InputRef.value!.input!.focus();
+            };
+
+            const handleInputConfirm = (): void => {
+                if (inputValue.value) {
+                    dynamicTags.value.push(inputValue.value);
+                }
+
+                inputVisible.value = false;
+                inputValue.value = "";
+            };
+
+            return {
+                inputValue,
+                dynamicTags,
+                inputVisible,
+                InputRef,
+                handleClose,
+                showInput,
+                handleInputConfirm,
+            };
+        },
+        template: `
 <div class="fb-tag-story-block">
 	<div class="fb-tag-story-block__item">
 		<fb-tag
@@ -222,26 +222,26 @@ const handleInputConfirm = () => {
 		</fb-button>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Sizes: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tag size="${ComponentSizeTypes.LARGE}">Large</fb-tag>
 	<fb-tag>Default</fb-tag>
 	<fb-tag size="${ComponentSizeTypes.SMALL}">Small</fb-tag>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTag },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTag },
+        template: `
 <div class="fb-tag-story-block">
 	<div class="fb-tag-story-block__item">
 		<fb-tag size="${ComponentSizeTypes.LARGE}">Large</fb-tag>
@@ -249,14 +249,14 @@ export const Sizes: Story = {
 		<fb-tag size="${ComponentSizeTypes.SMALL}">Small</fb-tag>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Theme: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<span>Dark</span>
@@ -307,30 +307,30 @@ const items = ref<Array<Item>>([
 	{ variant: VariantTypes.DANGER, label: 'Tag 5' },
 ]);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTag, FbButton, FbInput },
-		setup: (): {
-			items: Ref<Array<{ variant: TagProps['variant']; label: string }>>;
-		} => {
-			type Item = { variant: TagProps['variant']; label: string };
-
-			const items = ref<Array<Item>>([
-				{ variant: VariantTypes.PRIMARY, label: 'Tag 1' },
-				{ variant: VariantTypes.INFO, label: 'Tag 2' },
-				{ variant: VariantTypes.SUCCESS, label: 'Tag 3' },
-				{ variant: VariantTypes.WARNING, label: 'Tag 4' },
-				{ variant: VariantTypes.DANGER, label: 'Tag 5' },
-			]);
-
-			return {
-				items,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTag, FbButton, FbInput },
+        setup: (): {
+            items: Ref<Array<{ variant: TagProps["variant"]; label: string }>>;
+        } => {
+            type Item = { variant: TagProps["variant"]; label: string };
+
+            const items = ref<Array<Item>>([
+                { variant: VariantTypes.PRIMARY, label: "Tag 1" },
+                { variant: VariantTypes.INFO, label: "Tag 2" },
+                { variant: VariantTypes.SUCCESS, label: "Tag 3" },
+                { variant: VariantTypes.WARNING, label: "Tag 4" },
+                { variant: VariantTypes.DANGER, label: "Tag 5" },
+            ]);
+
+            return {
+                items,
+            };
+        },
+        template: `
 <div class="fb-tag-story-block">
 	<div class="fb-tag-story-block__item">
 		<span>Dark</span>
@@ -366,14 +366,14 @@ const items = ref<Array<Item>>([
 		</fb-tag>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Rounded: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<fb-tag
@@ -424,30 +424,30 @@ const items = ref<Array<Item>>([
 	{ variant: VariantTypes.DANGER, label: 'Tag 5' },
 ]);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTag },
-		setup: (): {
-			items: Ref<Array<{ variant: TagProps['variant']; label: string }>>;
-		} => {
-			type Item = { variant: TagProps['variant']; label: string };
-
-			const items = ref<Array<Item>>([
-				{ variant: VariantTypes.PRIMARY, label: 'Tag 1' },
-				{ variant: VariantTypes.INFO, label: 'Tag 2' },
-				{ variant: VariantTypes.SUCCESS, label: 'Tag 3' },
-				{ variant: VariantTypes.WARNING, label: 'Tag 4' },
-				{ variant: VariantTypes.DANGER, label: 'Tag 5' },
-			]);
-
-			return {
-				items,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTag },
+        setup: (): {
+            items: Ref<Array<{ variant: TagProps["variant"]; label: string }>>;
+        } => {
+            type Item = { variant: TagProps["variant"]; label: string };
+
+            const items = ref<Array<Item>>([
+                { variant: VariantTypes.PRIMARY, label: "Tag 1" },
+                { variant: VariantTypes.INFO, label: "Tag 2" },
+                { variant: VariantTypes.SUCCESS, label: "Tag 3" },
+                { variant: VariantTypes.WARNING, label: "Tag 4" },
+                { variant: VariantTypes.DANGER, label: "Tag 5" },
+            ]);
+
+            return {
+                items,
+            };
+        },
+        template: `
 <div class="fb-tag-story-block">
 	<div class="fb-tag-story-block__item">
 		<fb-tag
@@ -483,14 +483,14 @@ const items = ref<Array<Item>>([
 		</fb-tag>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Checkable: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<fb-check-tag checked>Checked</fb-check-tag>
@@ -549,73 +549,73 @@ const onChange5 = (status: boolean): void => {
   checked5.value = status;
 }
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbCheckTag },
-		setup: (): {
-			checked: Ref<boolean>;
-			checked1: Ref<boolean>;
-			checked2: Ref<boolean>;
-			checked3: Ref<boolean>;
-			checked4: Ref<boolean>;
-			checked5: Ref<boolean>;
-			onChange: (status: boolean) => void;
-			onChange1: (status: boolean) => void;
-			onChange2: (status: boolean) => void;
-			onChange3: (status: boolean) => void;
-			onChange4: (status: boolean) => void;
-			onChange5: (status: boolean) => void;
-		} => {
-			const checked = ref(false);
-			const checked1 = ref(true);
-			const checked2 = ref(true);
-			const checked3 = ref(true);
-			const checked4 = ref(true);
-			const checked5 = ref(true);
-
-			const onChange = (status: boolean): void => {
-				checked.value = status;
-			};
-
-			const onChange1 = (status: boolean): void => {
-				checked1.value = status;
-			};
-
-			const onChange2 = (status: boolean): void => {
-				checked2.value = status;
-			};
-
-			const onChange3 = (status: boolean): void => {
-				checked3.value = status;
-			};
-
-			const onChange4 = (status: boolean): void => {
-				checked4.value = status;
-			};
-
-			const onChange5 = (status: boolean): void => {
-				checked5.value = status;
-			};
-
-			return {
-				checked,
-				checked1,
-				checked2,
-				checked3,
-				checked4,
-				checked5,
-				onChange,
-				onChange1,
-				onChange2,
-				onChange3,
-				onChange4,
-				onChange5,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbCheckTag },
+        setup: (): {
+            checked: Ref<boolean>;
+            checked1: Ref<boolean>;
+            checked2: Ref<boolean>;
+            checked3: Ref<boolean>;
+            checked4: Ref<boolean>;
+            checked5: Ref<boolean>;
+            onChange: (status: boolean) => void;
+            onChange1: (status: boolean) => void;
+            onChange2: (status: boolean) => void;
+            onChange3: (status: boolean) => void;
+            onChange4: (status: boolean) => void;
+            onChange5: (status: boolean) => void;
+        } => {
+            const checked = ref(false);
+            const checked1 = ref(true);
+            const checked2 = ref(true);
+            const checked3 = ref(true);
+            const checked4 = ref(true);
+            const checked5 = ref(true);
+
+            const onChange = (status: boolean): void => {
+                checked.value = status;
+            };
+
+            const onChange1 = (status: boolean): void => {
+                checked1.value = status;
+            };
+
+            const onChange2 = (status: boolean): void => {
+                checked2.value = status;
+            };
+
+            const onChange3 = (status: boolean): void => {
+                checked3.value = status;
+            };
+
+            const onChange4 = (status: boolean): void => {
+                checked4.value = status;
+            };
+
+            const onChange5 = (status: boolean): void => {
+                checked5.value = status;
+            };
+
+            return {
+                checked,
+                checked1,
+                checked2,
+                checked3,
+                checked4,
+                checked5,
+                onChange,
+                onChange1,
+                onChange2,
+                onChange3,
+                onChange4,
+                onChange5,
+            };
+        },
+        template: `
 <div class="fb-tag-story-block">
 	<div class="fb-tag-story-block__item">
 		<fb-check-tag checked>Checked</fb-check-tag>
@@ -639,5 +639,5 @@ const onChange5 = (status: boolean): void => {
 		</fb-check-tag>
 	</div>
 </div>`,
-	}),
+    }),
 };
diff --git a/docs/src/components/tooltip/fb-tooltip.mdx b/docs/src/components/tooltip/fb-tooltip.mdx
index eec1c5d8..64677dfe 100644
--- a/docs/src/components/tooltip/fb-tooltip.mdx
+++ b/docs/src/components/tooltip/fb-tooltip.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as TooltipStories from './fb-tooltip.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as TooltipStories from "./fb-tooltip.stories";
 
 <Meta of={TooltipStories} />
 
@@ -38,8 +38,8 @@ Instead of using the `content` property of `fb-tooltip`, provide the content usi
 
 Apart from basic usage, you can customize tooltips with additional propertys:
 
-- Use the `transition` property to customize the show/hide animation. The default value is `fb-fade-in-linear`.
-- Disable tooltips by setting the `disabled` property to `true`.
+-   Use the `transition` property to customize the show/hide animation. The default value is `fb-fade-in-linear`.
+-   Disable tooltips by setting the `disabled` property to `true`.
 
 Tooltip is built on top of **FbPopper**, so you can utilize any property supported by **FbPopper** for further customization.
 
diff --git a/docs/src/components/tooltip/fb-tooltip.stories.scss b/docs/src/components/tooltip/fb-tooltip.stories.scss
index 6add562d..eeb3a25e 100644
--- a/docs/src/components/tooltip/fb-tooltip.stories.scss
+++ b/docs/src/components/tooltip/fb-tooltip.stories.scss
@@ -1,58 +1,58 @@
 .fb-tooltip-story-block {
-	max-width: 600px;
-
-	.fb-tooltip-story-block__layout-row-1 {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.fb-tooltip-story-block__layout-row-2 {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-top: 10px;
-		margin-bottom: 10px;
-	}
-
-	.fb-tooltip-story-block__layout-row-3 {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.fb-tooltip-story-block__layout-row-4 {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-top: 10px;
-		margin-bottom: 10px;
-	}
-
-	.fb-tooltip-story-block__layout-row-5 {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.fb-tooltip-story-block__layout-row-1,
-	.fb-tooltip-story-block__layout-row-2,
-	.fb-tooltip-story-block__layout-row-3,
-	.fb-tooltip-story-block__layout-row-4,
-	.fb-tooltip-story-block__layout-row-5 {
-		.fb-tooltip {
-			width: 110px;
-		}
-	}
+    max-width: 600px;
+
+    .fb-tooltip-story-block__layout-row-1 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .fb-tooltip-story-block__layout-row-2 {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+
+    .fb-tooltip-story-block__layout-row-3 {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .fb-tooltip-story-block__layout-row-4 {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+
+    .fb-tooltip-story-block__layout-row-5 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .fb-tooltip-story-block__layout-row-1,
+    .fb-tooltip-story-block__layout-row-2,
+    .fb-tooltip-story-block__layout-row-3,
+    .fb-tooltip-story-block__layout-row-4,
+    .fb-tooltip-story-block__layout-row-5 {
+        .fb-tooltip {
+            width: 110px;
+        }
+    }
 }
 
 .fb-popper.is-customized-tooltip {
-	/* Set padding to ensure the height is 32px */
-	padding: 6px 12px;
-	background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
+    /* Set padding to ensure the height is 32px */
+    padding: 6px 12px;
+    background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
 }
 
 .fb-popper.is-customized-tooltip .fb-popper__arrow::before {
-	background: linear-gradient(45deg, #b2e68d, #bce689);
-	right: 0;
+    background: linear-gradient(45deg, #b2e68d, #bce689);
+    right: 0;
 }
diff --git a/docs/src/components/tooltip/fb-tooltip.stories.ts b/docs/src/components/tooltip/fb-tooltip.stories.ts
index be237956..33f10d4f 100644
--- a/docs/src/components/tooltip/fb-tooltip.stories.ts
+++ b/docs/src/components/tooltip/fb-tooltip.stories.ts
@@ -1,16 +1,16 @@
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from "vue";
 
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbButton, FbTooltip } from '@fastybird/web-ui-components';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbButton, FbTooltip } from "@fastybird/web-ui-components";
 
-import './fb-tooltip.stories.scss';
+import "./fb-tooltip.stories.scss";
 
-import type { Ref } from 'vue';
+import type { Ref } from "vue";
 
 const meta: Meta<typeof FbTooltip> = {
-	component: FbTooltip,
-	title: 'Components/Feedback/Tooltip',
-	excludeStories: /.*Data$/,
+    component: FbTooltip,
+    title: "Components/Feedback/Tooltip",
+    excludeStories: /.*Data$/,
 };
 
 export default meta;
@@ -18,10 +18,10 @@ export default meta;
 type Story = StoryObj<typeof FbTooltip>;
 
 export const BasicUsage: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<div>
 		<fb-tooltip
@@ -118,13 +118,13 @@ export const BasicUsage: Story = {
 		</fb-tooltip>
 	</div>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTooltip, FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTooltip, FbButton },
+        template: `
 <div class="fb-tooltip-story-block">
 	<div class="fb-tooltip-story-block__layout-row-1">
 		<fb-tooltip
@@ -221,14 +221,14 @@ export const BasicUsage: Story = {
 		</fb-tooltip>
 	</div>
 </div>`,
-	}),
+    }),
 };
 
 export const Theme: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tooltip content="Top center" placement="top">
 		<fb-button>Dark</fb-button>
@@ -242,13 +242,13 @@ export const Theme: Story = {
 		<fb-button>Customized theme</fb-button>
 	</fb-tooltip>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTooltip, FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTooltip, FbButton },
+        template: `
 <fb-tooltip content="Top center" placement="top">
 	<fb-button>Dark</fb-button>
 </fb-tooltip>
@@ -260,39 +260,39 @@ export const Theme: Story = {
 <fb-tooltip content="Bottom center" effect="customized-tooltip">
 	<fb-button>Customized theme</fb-button>
 </fb-tooltip>`,
-	}),
+    }),
 };
 
 export const MoreContent: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tooltip placement="top">
 		<template #content> multiple lines<br />second line </template>
 		<fb-button>Top center</fb-button>
 	</fb-tooltip>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTooltip, FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTooltip, FbButton },
+        template: `
 <fb-tooltip placement="top">
 	<template #content> multiple lines<br />second line </template>
 	<fb-button>Top center</fb-button>
 </fb-tooltip>`,
-	}),
+    }),
 };
 
 export const Advanced: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tooltip
 		:disabled="disabled"
@@ -311,22 +311,22 @@ import { ref } from 'vue';
 
 const disabled = ref(false);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTooltip, FbButton },
-		setup: (): {
-			disabled: Ref<boolean>;
-		} => {
-			const disabled = ref(false);
-
-			return {
-				disabled,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTooltip, FbButton },
+        setup: (): {
+            disabled: Ref<boolean>;
+        } => {
+            const disabled = ref(false);
+
+            return {
+                disabled,
+            };
+        },
+        template: `
 <fb-tooltip
 	:disabled="disabled"
 	content="click to close tooltip function"
@@ -337,14 +337,14 @@ const disabled = ref(false);
 		click to {{ disabled ? 'active' : 'close' }} tooltip function
 	</fb-button>
 </fb-tooltip>`,
-	}),
+    }),
 };
 
 export const HtmlContent: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tooltip
 		content="<span>The content can be <strong>HTML</strong></span>"
@@ -353,27 +353,27 @@ export const HtmlContent: Story = {
 		<fb-button>hover me</fb-button>
 	</fb-tooltip>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTooltip, FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTooltip, FbButton },
+        template: `
 <fb-tooltip
 	content="<span>The content can be <strong>HTML</strong></span>"
 	raw-content
 >
 	<fb-button>hover me</fb-button>
 </fb-tooltip>`,
-	}),
+    }),
 };
 
 export const VirtualTrigger: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tooltip
 		v-model:visible="visible"
@@ -423,61 +423,61 @@ onUnmounted(() => {
 	document.removeEventListener('mousemove', mousemoveHandler);
 });
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTooltip, FbButton },
-		setup: (): {
-			visible: Ref<boolean>;
-			triggerRef: Ref<{ getBoundingClientRect: () => { top: number; left: number; bottom: number; right: number } }>;
-			position: Ref<{
-				top: number;
-				left: number;
-				bottom: number;
-				right: number;
-			}>;
-		} => {
-			const visible = ref(false);
-
-			const triggerRef = ref({
-				getBoundingClientRect() {
-					return position.value;
-				},
-			});
-
-			const position = ref({
-				top: 0,
-				left: 0,
-				bottom: 0,
-				right: 0,
-			});
-
-			const mousemoveHandler = (e): void => {
-				position.value = DOMRect.fromRect({
-					width: 0,
-					height: 0,
-					x: e.clientX,
-					y: e.clientY,
-				});
-			};
-
-			onMounted(() => {
-				document.addEventListener('mousemove', mousemoveHandler);
-			});
-
-			onUnmounted(() => {
-				document.removeEventListener('mousemove', mousemoveHandler);
-			});
-
-			return {
-				visible,
-				triggerRef,
-				position,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTooltip, FbButton },
+        setup: (): {
+            visible: Ref<boolean>;
+            triggerRef: Ref<{ getBoundingClientRect: () => { top: number; left: number; bottom: number; right: number } }>;
+            position: Ref<{
+                top: number;
+                left: number;
+                bottom: number;
+                right: number;
+            }>;
+        } => {
+            const visible = ref(false);
+
+            const triggerRef = ref({
+                getBoundingClientRect() {
+                    return position.value;
+                },
+            });
+
+            const position = ref({
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+            });
+
+            const mousemoveHandler = (e): void => {
+                position.value = DOMRect.fromRect({
+                    width: 0,
+                    height: 0,
+                    x: e.clientX,
+                    y: e.clientY,
+                });
+            };
+
+            onMounted(() => {
+                document.addEventListener("mousemove", mousemoveHandler);
+            });
+
+            onUnmounted(() => {
+                document.removeEventListener("mousemove", mousemoveHandler);
+            });
+
+            return {
+                visible,
+                triggerRef,
+                position,
+            };
+        },
+        template: `
 <fb-tooltip
 	v-model:visible="visible"
 	content="Bottom center"
@@ -489,14 +489,14 @@ onUnmounted(() => {
 />
 
 <fb-button @click="visible = !visible">Trigger me</fb-button>`,
-	}),
+    }),
 };
 
 export const Singleton: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-button
 		v-for="i in 3"
@@ -539,29 +539,29 @@ const tooltipRef = ref();
 
 const visible = ref(false);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTooltip, FbButton },
-		setup: (): {
-			buttonRef: Ref<HTMLElement | undefined>;
-			tooltipRef: Ref<HTMLElement | undefined>;
-			visible: Ref<boolean>;
-		} => {
-			const buttonRef = ref();
-			const tooltipRef = ref();
-
-			const visible = ref(false);
-
-			return {
-				buttonRef,
-				tooltipRef,
-				visible,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTooltip, FbButton },
+        setup: (): {
+            buttonRef: Ref<HTMLElement | undefined>;
+            tooltipRef: Ref<HTMLElement | undefined>;
+            visible: Ref<boolean>;
+        } => {
+            const buttonRef = ref();
+            const tooltipRef = ref();
+
+            const visible = ref(false);
+
+            return {
+                buttonRef,
+                tooltipRef,
+                visible,
+            };
+        },
+        template: `
 <fb-button
 	v-for="i in 3"
 	:key="i"
@@ -593,14 +593,14 @@ const visible = ref(false);
 		<span> Some content </span>
 	</template>
 </fb-tooltip>`,
-	}),
+    }),
 };
 
 export const Controlled: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tooltip :visible="visible">
 		<template #content>
@@ -618,22 +618,22 @@ import { ref } from 'vue';
 
 const visible = ref(false);
 </script>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTooltip, FbButton },
-		setup: (): {
-			visible: Ref<boolean>;
-		} => {
-			const visible = ref(false);
-
-			return {
-				visible,
-			};
-		},
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTooltip, FbButton },
+        setup: (): {
+            visible: Ref<boolean>;
+        } => {
+            const visible = ref(false);
+
+            return {
+                visible,
+            };
+        },
+        template: `
 <fb-tooltip :visible="visible">
 	<template #content>
 		<span>Content</span>
@@ -643,28 +643,28 @@ const visible = ref(false);
 		Hover me
 	</fb-button>
 </fb-tooltip>`,
-	}),
+    }),
 };
 
 export const Animations: Story = {
-	parameters: {
-		docs: {
-			source: {
-				code: `
+    parameters: {
+        docs: {
+            source: {
+                code: `
 <template>
 	<fb-tooltip content="I am an fb-tooltip">
 		<fb-button>Trigger me</fb-button>
 	</fb-tooltip>
 </template>`,
-			},
-		},
-	},
-	tags: ['hideInSidebar'],
-	render: () => ({
-		components: { FbTooltip, FbButton },
-		template: `
+            },
+        },
+    },
+    tags: ["hideInSidebar"],
+    render: () => ({
+        components: { FbTooltip, FbButton },
+        template: `
 <fb-tooltip content="I am an fb-tooltip">
 	<fb-button>Trigger me</fb-button>
 </fb-tooltip>`,
-	}),
+    }),
 };
diff --git a/docs/src/stories/colors.scss b/docs/src/stories/colors.scss
index 68e20bc6..11427e06 100644
--- a/docs/src/stories/colors.scss
+++ b/docs/src/stories/colors.scss
@@ -1,52 +1,52 @@
-@use '@fastybird/web-ui-theme-chalk/src/mixins/function' as *;
+@use "@fastybird/web-ui-theme-chalk/src/mixins/function" as *;
 
 .fb-story-colors {
-	&__container {
-		margin: 3rem;
-		max-width: 100%;
-		font-family: getCssVar('font-family');
-		font-size: getCssVar('font-size-base');
-	}
-
-	&__colors {
-		&-item {
-			height: 100px;
-			width: 250px;
-			display: inline-block;
-			margin: 0 1rem 1rem 0;
-
-			&-desc {
-				padding: 10px;
-				background: white;
-			}
-
-			&-primary {
-				background-color: getCssVar('color-primary');
-			}
-
-			&-success {
-				background-color: getCssVar('color-success');
-			}
-
-			&-info {
-				background-color: getCssVar('color-info');
-			}
-
-			&-warning {
-				background-color: getCssVar('color-warning');
-			}
-
-			&-danger {
-				background-color: getCssVar('color-danger');
-			}
-
-			&-error {
-				background-color: getCssVar('color-error');
-			}
-
-			&-default {
-				background-color: getCssVar('color-default');
-			}
-		}
-	}
+    &__container {
+        margin: 3rem;
+        max-width: 100%;
+        font-family: getCssVar("font-family");
+        font-size: getCssVar("font-size-base");
+    }
+
+    &__colors {
+        &-item {
+            height: 100px;
+            width: 250px;
+            display: inline-block;
+            margin: 0 1rem 1rem 0;
+
+            &-desc {
+                padding: 10px;
+                background: white;
+            }
+
+            &-primary {
+                background-color: getCssVar("color-primary");
+            }
+
+            &-success {
+                background-color: getCssVar("color-success");
+            }
+
+            &-info {
+                background-color: getCssVar("color-info");
+            }
+
+            &-warning {
+                background-color: getCssVar("color-warning");
+            }
+
+            &-danger {
+                background-color: getCssVar("color-danger");
+            }
+
+            &-error {
+                background-color: getCssVar("color-error");
+            }
+
+            &-default {
+                background-color: getCssVar("color-default");
+            }
+        }
+    }
 }
diff --git a/docs/src/stories/colors.stories.ts b/docs/src/stories/colors.stories.ts
index 87818073..901f02e6 100644
--- a/docs/src/stories/colors.stories.ts
+++ b/docs/src/stories/colors.stories.ts
@@ -1,13 +1,13 @@
-import './colors.scss';
-import { Story } from '@storybook/vue3';
+import "./colors.scss";
+import { Story } from "@storybook/vue3";
 
 export default {
-	title: 'About/Colors',
+    title: "About/Colors",
 };
 
 export const Colors: Story = () => {
-	return {
-		template: `
+    return {
+        template: `
       <div class="fb-story-colors__container">
         <div class="fb-story-colors__colors">
           <div class="fb-story-colors__colors-item fb-story-colors__colors-item-primary"><span class="fb-story-colors__colors-item-desc">primary</span></div>
@@ -20,5 +20,5 @@ export const Colors: Story = () => {
         </div>
       </div>
     `,
-	};
+    };
 };
diff --git a/docs/src/stories/intro.mdx b/docs/src/stories/intro.mdx
index 2f72fd11..e12ebedc 100644
--- a/docs/src/stories/intro.mdx
+++ b/docs/src/stories/intro.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from "@storybook/blocks";
 
 <Meta title="About/Intro" />
 
diff --git a/packages/theme-chalk/src/color/index.scss b/packages/theme-chalk/src/color/index.scss
index d042b338..67e708c6 100644
--- a/packages/theme-chalk/src/color/index.scss
+++ b/packages/theme-chalk/src/color/index.scss
@@ -2,7 +2,7 @@
 @use 'sass:string';
 
 @function rgb2hex($color) {
-	@return unquote('#' + #{string.slice(color.ie-hex-str($color), 4)});
+	@return string.unquote('#' + #{string.slice(color.ie-hex-str($color), 4)});
 }
 
 // rgba color above solid color
diff --git a/packages/theme-chalk/src/mixins/_var.scss b/packages/theme-chalk/src/mixins/_var.scss
index 133c9ac3..a0e8457c 100644
--- a/packages/theme-chalk/src/mixins/_var.scss
+++ b/packages/theme-chalk/src/mixins/_var.scss
@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'sass:map';
 
 @use 'config';
@@ -41,7 +42,7 @@
 
 @mixin set-css-color-rgb($type) {
 	$color: map.get($colors, $type, 'base');
-	@include set-css-var-value(('color', $type, 'rgb'), #{red($color), green($color), blue($color)});
+	@include set-css-var-value(('color', $type, 'rgb'), #{color.red($color), color.green($color), color.blue($color)});
 }
 
 // generate css var from existing css var
diff --git a/packages/theme-chalk/src/mixins/function.scss b/packages/theme-chalk/src/mixins/function.scss
index d84de75f..893a2505 100644
--- a/packages/theme-chalk/src/mixins/function.scss
+++ b/packages/theme-chalk/src/mixins/function.scss
@@ -13,7 +13,7 @@
 @function containsModifier($selector) {
 	$selector: selectorToString($selector);
 
-	@if str-index($selector, config.$modifier-separator) {
+	@if string.index($selector, config.$modifier-separator) {
 		@return true;
 	} @else {
 		@return false;
@@ -23,7 +23,7 @@
 @function containWhenFlag($selector) {
 	$selector: selectorToString($selector);
 
-	@if str-index($selector, '.' + config.$state-prefix) {
+	@if string.index($selector, '.' + config.$state-prefix) {
 		@return true;
 	} @else {
 		@return false;
@@ -33,7 +33,7 @@
 @function containPseudoClass($selector) {
 	$selector: selectorToString($selector);
 
-	@if str-index($selector, ':') {
+	@if string.index($selector, ':') {
 		@return true;
 	} @else {
 		@return false;
diff --git a/packages/theme-chalk/src/mixins/mixins.scss b/packages/theme-chalk/src/mixins/mixins.scss
index 2cac9ec3..927d01cc 100644
--- a/packages/theme-chalk/src/mixins/mixins.scss
+++ b/packages/theme-chalk/src/mixins/mixins.scss
@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use 'sass:string';
+
 @use 'function' as *;
 @use '../common/var' as *;
 @use 'config' as *;
@@ -10,8 +13,8 @@
 // Break-points
 @mixin res($key, $map: $breakpoints) {
 	// loop breakpoint Map, return if present
-	@if map-has-key($map, $key) {
-		@media only screen and #{unquote(map-get($map, $key))} {
+	@if map.has-key($map, $key) {
+		@media only screen and #{string.unquote(map.get($map, $key))} {
 			@content;
 		}
 	} @else {