From b6ce624627a09c15352d968934e159bc9a115986 Mon Sep 17 00:00:00 2001
From: Vikas <vikas.awaghade@hotmail.com>
Date: Wed, 31 Jul 2024 17:53:28 +0530
Subject: [PATCH] NFX-132 changed ollion to nonfx

---
 package.json                                  |   2 +-
 .../package.json                              |   2 +-
 packages/flow-code-editor/package.json        |   2 +-
 packages/flow-core-config/package.json        |   2 +-
 packages/flow-core/package.json               |   2 +-
 .../src/components/f-accordion/f-accordion.ts |   8 +-
 .../f-breadcrumb/f-breadcrumb.test.ts         |  54 +-
 .../components/f-breadcrumb/f-breadcrumb.ts   |  22 +-
 .../src/components/f-button/f-button.ts       |  47 +-
 .../components/f-carousel/f-carousel.test.ts  |  12 +-
 .../src/components/f-carousel/f-carousel.ts   |   8 +-
 .../src/components/f-checkbox/f-checkbox.ts   |   4 +-
 .../f-date-time-picker/f-date-time-picker.ts  |  27 +-
 .../f-emoji-picker/f-emoji-picker.ts          |  18 +-
 .../components/f-file-upload/f-file-upload.ts |  62 +-
 .../components/f-form-group/f-form-group.ts   |  42 +-
 .../flow-core/src/components/f-grid/f-grid.ts |   5 +-
 .../components/f-icon-button/f-icon-button.ts |  18 +-
 .../src/components/f-input/f-input.ts         |   4 +-
 .../src/components/f-pictogram/f-pictogram.ts |   4 +-
 .../src/components/f-popover/f-popover.ts     |  22 +-
 .../f-progress-bar/f-progress-bar.ts          |   5 +-
 .../src/components/f-search/f-search.ts       |  12 +-
 .../src/components/f-select/f-select.ts       |  17 +-
 .../src/components/f-suggest/f-suggest.ts     |   8 +-
 .../flow-core/src/components/f-tab/f-tab.ts   |  16 +-
 .../flow-core/src/components/f-tag/f-tag.ts   |  41 +-
 .../src/components/f-text-area/f-text-area.ts |   8 +-
 .../src/components/f-tooltip/f-tooltip.ts     |   4 +-
 packages/flow-dashboard/package.json          |   2 +-
 .../src/components/f-dashboard/f-dashboard.ts |  10 +-
 .../f-timeseries-chart/f-timeseries-chart.ts  |  11 +-
 packages/flow-form-builder/package.json       |   2 +-
 .../f-checkbox-group/f-checkbox-group.ts      |  24 +-
 .../components/f-form-array/f-form-array.ts   |  30 +-
 .../f-form-builder/f-form-builder.test.ts     | 395 ++++++-------
 .../f-form-builder/f-form-builder.ts          |  16 +-
 .../components/f-form-object/f-form-object.ts |  14 +-
 .../components/f-radio-group/f-radio-group.ts |  24 +-
 .../flow-form-builder/src/modules/helpers.ts  |   8 +-
 packages/flow-form-builder/src/types.ts       |  10 +-
 packages/flow-lineage/package.json            |   2 +-
 .../components/f-lineage/draw/draw-links.ts   |  13 +-
 packages/flow-log/package.json                |   2 +-
 packages/flow-md-editor/package.json          |   2 +-
 packages/flow-table/package.json              |   2 +-
 .../f-table-schema/f-table-schema.ts          |  68 +--
 .../src/components/f-table/f-table.test.ts    |  12 +-
 .../src/components/f-tcell/f-tcell.test.ts    |   8 +-
 .../src/components/f-tcell/f-tcell.ts         |  16 +-
 packages/flow-text-editor/package.json        |   2 +-
 stories/flow-core/f-accordion.stories.js      |  42 +-
 stories/flow-core/f-breadcrumb.stories.ts     |  18 +-
 stories/flow-core/f-carousel.stories.js       |  24 +-
 stories/flow-core/f-checkbox.stories.js       |  24 +-
 stories/flow-core/f-color-picker.stories.ts   |  30 +-
 stories/flow-core/f-countdown.stories.ts      |  18 +-
 .../flow-core/f-date-time-picker.stories.js   |  83 +--
 stories/flow-core/f-div.stories.ts            |   4 +-
 .../flow-core/f-document-viewer.stories.ts    |  12 +-
 stories/flow-core/f-emoji-picker.stories.js   |  24 +-
 stories/flow-core/f-file-upload.stories.js    |  50 +-
 stories/flow-core/f-form-group.stories.js     |  82 +--
 stories/flow-core/f-form.stories.js           |  16 +-
 stories/flow-core/f-grid.stories.js           |  26 +-
 stories/flow-core/f-input.stories.ts          |  40 +-
 stories/flow-core/f-popover.stories.ts        |  16 +-
 stories/flow-core/f-progress-bar.stories.ts   |  24 +-
 stories/flow-core/f-radio.stories.js          |  24 +-
 stories/flow-core/f-search.stories.ts         | 443 +++++++-------
 stories/flow-core/f-select.stories.ts         |  36 +-
 stories/flow-core/f-suggest.stories.ts        | 545 +++++++++---------
 stories/flow-core/f-switch.stories.js         |  24 +-
 stories/flow-core/f-tab.stories.js            |  56 +-
 stories/flow-core/f-text-area.stories.js      |  24 +-
 stories/flow-core/f-text.stories.ts           |  12 +-
 stories/flow-core/f-toast.stories.js          |  36 +-
 stories/flow-core/f-tooltip.stories.ts        |   8 +-
 .../f-timeseries-chart.stories.ts             |  16 +-
 .../f-form-builder.stories.js                 |   8 +-
 .../flow-form-builder/validations.stories.ts  |   4 +-
 .../htmlinjection-test.stories.ts             |  12 +-
 .../node-details-template.stories.js          |  56 +-
 stories/flow-log/f-log.stories.ts             |  24 +-
 stories/flow-table/f-table.stories.ts         | 132 ++---
 stories/flow-table/f-tcell.stories.ts         | 120 ++--
 stories/flow-table/f-trow.stories.ts          | 102 ++--
 stories/utils/register-icons.js               |   2 +-
 88 files changed, 1693 insertions(+), 1675 deletions(-)

diff --git a/package.json b/package.json
index 697e22da8..d263ea3ac 100644
--- a/package.json
+++ b/package.json
@@ -100,4 +100,4 @@
     }
   },
   "packageManager": "pnpm@9.6.0+sha512.38dc6fba8dba35b39340b9700112c2fe1e12f10b17134715a4aa98ccf7bb035e76fd981cf0bb384dfa98f8d6af5481c2bef2f4266a24bfa20c34eb7147ce0b5e"
-}
\ No newline at end of file
+}
diff --git a/packages/custom-elements-manifest-to-types/package.json b/packages/custom-elements-manifest-to-types/package.json
index 5084ff387..cc7e9475c 100644
--- a/packages/custom-elements-manifest-to-types/package.json
+++ b/packages/custom-elements-manifest-to-types/package.json
@@ -32,4 +32,4 @@
     "registry": "https://registry.npmjs.org"
   },
   "author": ""
-}
\ No newline at end of file
+}
diff --git a/packages/flow-code-editor/package.json b/packages/flow-code-editor/package.json
index f82396b7a..2e4d7b221 100644
--- a/packages/flow-code-editor/package.json
+++ b/packages/flow-code-editor/package.json
@@ -57,4 +57,4 @@
   "homepage": "https://github.com/ollionorg/flow-table#readme",
   "author": "@nonfx",
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/packages/flow-core-config/package.json b/packages/flow-core-config/package.json
index 481e45cc4..96ac1f6ce 100644
--- a/packages/flow-core-config/package.json
+++ b/packages/flow-core-config/package.json
@@ -31,4 +31,4 @@
   "homepage": "https://github.com/ollionorg/flow-core#readme",
   "author": "@nonfx",
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json
index f929a75f0..cc447f1dd 100644
--- a/packages/flow-core/package.json
+++ b/packages/flow-core/package.json
@@ -76,4 +76,4 @@
   "homepage": "https://github.com/ollionorg/flow-core#readme",
   "author": "@nonfx",
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/packages/flow-core/src/components/f-accordion/f-accordion.ts b/packages/flow-core/src/components/f-accordion/f-accordion.ts
index b08b65338..2d79efa97 100644
--- a/packages/flow-core/src/components/f-accordion/f-accordion.ts
+++ b/packages/flow-core/src/components/f-accordion/f-accordion.ts
@@ -89,10 +89,10 @@ export class FAccordion extends FRoot {
 		return this.icon === "caret"
 			? "i-caret-down"
 			: this.icon === "chevron"
-				? "i-chevron-down"
-				: this.open
-					? "i-minus"
-					: "i-plus";
+			? "i-chevron-down"
+			: this.open
+			? "i-minus"
+			: "i-plus";
 	}
 
 	/**
diff --git a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.test.ts b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.test.ts
index 733d843a0..b66668a60 100644
--- a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.test.ts
+++ b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.test.ts
@@ -18,9 +18,9 @@ describe("f-breadcrumb", () => {
 		const el = await fixture(html`
 			<f-breadcrumb
 				.crumbs=${[
-				{ tabIndex: 0, title: "Label 1" },
-				{ tabIndex: 1, title: "Label 2" }
-			]}
+					{ tabIndex: 0, title: "Label 1" },
+					{ tabIndex: 1, title: "Label 2" }
+				]}
 			></f-breadcrumb>
 		`);
 		expect(el.getAttribute("size")).to.equal("medium");
@@ -31,9 +31,9 @@ describe("f-breadcrumb", () => {
 			<f-breadcrumb
 				size="small"
 				.crumbs=${[
-				{ tabIndex: 0, title: "Label 1" },
-				{ tabIndex: 1, title: "Label 2" }
-			]}
+					{ tabIndex: 0, title: "Label 1" },
+					{ tabIndex: 1, title: "Label 2" }
+				]}
 			></f-breadcrumb>
 		`);
 		const descendant = el.shadowRoot!.querySelector(".f-breadcrumb-text-hover")!;
@@ -44,9 +44,9 @@ describe("f-breadcrumb", () => {
 			<f-breadcrumb
 				size="small"
 				.crumbs=${[
-				{ tabIndex: 0, title: "Label 1" },
-				{ tabIndex: 1, title: "Label 2" }
-			]}
+					{ tabIndex: 0, title: "Label 1" },
+					{ tabIndex: 1, title: "Label 2" }
+				]}
 			></f-breadcrumb>
 		`);
 		const descendant = el.shadowRoot!.querySelectorAll(".f-breadcrumb-content")!;
@@ -56,12 +56,12 @@ describe("f-breadcrumb", () => {
 		const el = await fixture(html`
 			<f-breadcrumb
 				.crumbs=${[
-				{ tabIndex: 0, title: "Label 1" },
-				{ tabIndex: 1, title: "Label 2" },
-				{ tabIndex: 2, title: "Label 3" },
-				{ tabIndex: 3, title: "Label 4" },
-				{ tabIndex: 4, title: "Label 5" }
-			]}
+					{ tabIndex: 0, title: "Label 1" },
+					{ tabIndex: 1, title: "Label 2" },
+					{ tabIndex: 2, title: "Label 3" },
+					{ tabIndex: 3, title: "Label 4" },
+					{ tabIndex: 4, title: "Label 5" }
+				]}
 			></f-breadcrumb>
 		`);
 		const descendant = el.shadowRoot!.querySelectorAll(".popover-crumb-list")!;
@@ -73,12 +73,12 @@ describe("f-breadcrumb", () => {
 			<f-breadcrumb
 				.variant=${"icon"}
 				.crumbs=${[
-				{ tabIndex: 0, title: "Label 1", icon: "i-app" },
-				{ tabIndex: 1, title: "Label 2", icon: "i-app" },
-				{ tabIndex: 2, title: "Label 3", icon: "i-home" },
-				{ tabIndex: 3, title: "Label 4", icon: "i-info-fill" },
-				{ tabIndex: 4, title: "Label 5", icon: "i-app" }
-			]}
+					{ tabIndex: 0, title: "Label 1", icon: "i-app" },
+					{ tabIndex: 1, title: "Label 2", icon: "i-app" },
+					{ tabIndex: 2, title: "Label 3", icon: "i-home" },
+					{ tabIndex: 3, title: "Label 4", icon: "i-info-fill" },
+					{ tabIndex: 4, title: "Label 5", icon: "i-app" }
+				]}
 			></f-breadcrumb>
 		`);
 		const descendant = el.shadowRoot!.querySelector(".f-breadcrumbs")!;
@@ -90,12 +90,12 @@ describe("f-breadcrumb", () => {
 			<f-breadcrumb
 				variant="icon"
 				.crumbs=${[
-				{ tabIndex: 0, title: "Home", icon: "i-app" },
-				{ tabIndex: 1, title: "New Label", icon: "i-app" },
-				{ tabIndex: 2, title: "Pipeline", icon: "i-home" },
-				{ tabIndex: 3, title: "Working", icon: "i-info-fill" },
-				{ tabIndex: 4, title: "Active", icon: "i-app" }
-			]}
+					{ tabIndex: 0, title: "Home", icon: "i-app" },
+					{ tabIndex: 1, title: "New Label", icon: "i-app" },
+					{ tabIndex: 2, title: "Pipeline", icon: "i-home" },
+					{ tabIndex: 3, title: "Working", icon: "i-info-fill" },
+					{ tabIndex: 4, title: "Active", icon: "i-app" }
+				]}
 			></f-breadcrumb>
 		`);
 		const descendants = el.shadowRoot!.querySelector(".f-breadcrumbs")!;
diff --git a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts
index 2233ca2b2..c99d45253 100644
--- a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts
+++ b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts
@@ -231,16 +231,16 @@ export class FBreadcrumb extends FRoot {
 								@mouseleave=${() => this.toggleBreadcrumbPopover("close")}
 							>
 								${this.middlePopoverCrumbs?.map(
-					(crumb, index) =>
-						html` <f-div
+									(crumb, index) =>
+										html` <f-div
 											tabindex="0"
 											role="link"
 											class="popover-crumb-list"
 											role="listitem"
 											padding="medium"
 											.border=${this.middlePopoverCrumbs.length - 1 === index
-								? "none"
-								: "small solid secondary bottom"}
+												? "none"
+												: "small solid secondary bottom"}
 											clickable
 											@click=${(event: MouseEvent) => this.handleDispatchEvent(event, crumb)}
 											><f-text
@@ -251,7 +251,7 @@ export class FBreadcrumb extends FRoot {
 												>${crumb?.title}</f-text
 											></f-div
 										>`
-				)}
+								)}
 							</f-div>
 						</f-popover>
 						<f-icon
@@ -261,15 +261,15 @@ export class FBreadcrumb extends FRoot {
 							class="system-icon-size"
 						></f-icon>
 						${this.endingCrumbs?.map((crumb, index) =>
-					this.crumbLoop(crumb, index, this.endingCrumbs)
-				)}
+							this.crumbLoop(crumb, index, this.endingCrumbs)
+						)}
 				  `}
 		</f-div>`;
 
 		const iconBreadcrumb = html`<f-div class="f-breadcrumbs" overflow="visible">
 			${this.crumbs.map((item, index) =>
-			index !== this.crumbs.length - 1
-				? html`<f-div
+				index !== this.crumbs.length - 1
+					? html`<f-div
 							class="f-breadcrumb"
 							state="secondary"
 							width=${this.crumbSize}
@@ -283,7 +283,7 @@ export class FBreadcrumb extends FRoot {
 					  >
 							<f-icon source=${item.icon} .size=${this.iconSize}></f-icon>
 					  </f-div>`
-				: html`
+					: html`
 							<f-div gap="large" align="middle-center">
 								<div
 									class="f-breadcrumb-primary"
@@ -301,7 +301,7 @@ export class FBreadcrumb extends FRoot {
 								>
 							</f-div>
 					  `
-		)}
+			)}
 		</f-div>`;
 		return this.variant === "text" ? textBreadcrumb : iconBreadcrumb;
 	}
diff --git a/packages/flow-core/src/components/f-button/f-button.ts b/packages/flow-core/src/components/f-button/f-button.ts
index 004c29b8a..debe543d5 100644
--- a/packages/flow-core/src/components/f-button/f-button.ts
+++ b/packages/flow-core/src/components/f-button/f-button.ts
@@ -217,8 +217,9 @@ export class FButton extends FRoot {
 					return `background-color: ${LightenDarkenColor(
 						this.fill,
 						-150
-					)}; border: 1px solid ${LightenDarkenColor(this.fill, -150)}; color: transparent; fill: ${this.fill
-						}`;
+					)}; border: 1px solid ${LightenDarkenColor(this.fill, -150)}; color: transparent; fill: ${
+						this.fill
+					}`;
 				} else if (this.category === "outline") {
 					return `background: transparent; border: 1px solid ${this.fill}; fill: ${this.fill};`;
 				} else {
@@ -332,10 +333,10 @@ export class FButton extends FRoot {
 			return html`<button
 				part="f-button-wrapper"
 				class=${classMap({
-				"f-button": true,
-				"custom-loader": this.fill ? true : false,
-				"custom-hover": this.fill && this.category === "fill" ? true : false
-			})}
+					"f-button": true,
+					"custom-loader": this.fill ? true : false,
+					"custom-hover": this.fill && this.category === "fill" ? true : false
+				})}
 				style=${this.applyStyles()}
 				category=${ifDefined(this.category)}
 				size=${ifDefined(this.size)}
@@ -355,11 +356,11 @@ export class FButton extends FRoot {
 		return html`<span
 				part="f-button-wrapper"
 				class=${classMap({
-			"f-button": true,
-			"custom-loader": this.fill ? true : false,
-			"custom-hover": this.fill && this.category === "fill" ? true : false,
-			"has-options": this.hasActions ? true : false
-		})}
+					"f-button": true,
+					"custom-loader": this.fill ? true : false,
+					"custom-hover": this.fill && this.category === "fill" ? true : false,
+					"has-options": this.hasActions ? true : false
+				})}
 				style=${this.applyStyles()}
 				category=${ifDefined(this.category)}
 				size=${ifDefined(this.size)}
@@ -396,13 +397,13 @@ export class FButton extends FRoot {
 						>
 							<f-div direction="column" stat="secondary" overflow="scroll">
 								${this.actions!.map((a, ai) => {
-					const border = (() => {
-						if (ai === this.actions!.length - 1) {
-							return "none";
-						}
-						return "small solid secondary bottom";
-					})();
-					return html`<f-div
+									const border = (() => {
+										if (ai === this.actions!.length - 1) {
+											return "none";
+										}
+										return "small solid secondary bottom";
+									})();
+									return html`<f-div
 										.border=${border}
 										align="middle-left"
 										gap="auto"
@@ -410,15 +411,15 @@ export class FButton extends FRoot {
 										@click=${() => this.selectAction(a)}
 									>
 										${typeof a === "function"
-							? a()
-							: html`<f-div padding="medium" align="middle-left"
+											? a()
+											: html`<f-div padding="medium" align="middle-left"
 													><f-text>${a}</f-text></f-div
 											  >`}
 										${this.selectedAction === a
-							? html`<f-icon source="i-tick" style="margin-right:12px;"></f-icon>`
-							: nothing}
+											? html`<f-icon source="i-tick" style="margin-right:12px;"></f-icon>`
+											: nothing}
 									</f-div>`;
-				})}
+								})}
 							</f-div>
 						</f-popover>`
 				: nothing} `;
diff --git a/packages/flow-core/src/components/f-carousel/f-carousel.test.ts b/packages/flow-core/src/components/f-carousel/f-carousel.test.ts
index c33650710..d43616ea0 100644
--- a/packages/flow-core/src/components/f-carousel/f-carousel.test.ts
+++ b/packages/flow-core/src/components/f-carousel/f-carousel.test.ts
@@ -21,12 +21,12 @@ describe("f-suggest", () => {
 		const el = await fixture<FCarousel>(html`
 			<f-carousel active-content-id="slide-3">
 				${[1, 2, 3, 4, 5, 6, 7, 8, 9].map(
-			idx =>
-				html`<f-carousel-content content-id=${"slide-" + idx}>
+					idx =>
+						html`<f-carousel-content content-id=${"slide-" + idx}>
 							<f-div> ${unsafeSVG(FCarouselExample)} </f-div>
 							<f-text>${"slide-" + idx}</f-text>
 						</f-carousel-content>`
-		)}
+				)}
 			</f-carousel>
 		`);
 		await el.updateComplete;
@@ -45,12 +45,12 @@ describe("f-suggest", () => {
 		const el = await fixture<FCarousel>(html`
 			<f-carousel active-content-id="slide-3">
 				${[1, 2, 3, 4, 5, 6, 7, 8, 9].map(
-			idx =>
-				html`<f-carousel-content content-id=${"slide-" + idx}>
+					idx =>
+						html`<f-carousel-content content-id=${"slide-" + idx}>
 							<f-div> ${unsafeSVG(FCarouselExample)} </f-div>
 							<f-text>${"slide-" + idx}</f-text>
 						</f-carousel-content>`
-		)}
+				)}
 			</f-carousel>
 		`);
 
diff --git a/packages/flow-core/src/components/f-carousel/f-carousel.ts b/packages/flow-core/src/components/f-carousel/f-carousel.ts
index cc373dd76..3af2da59c 100644
--- a/packages/flow-core/src/components/f-carousel/f-carousel.ts
+++ b/packages/flow-core/src/components/f-carousel/f-carousel.ts
@@ -124,8 +124,8 @@ export class FCarousel extends FRoot {
 						source="i-chevron-left"
 						clickable
 						@keyup=${(e: KeyboardEvent) => {
-				if (e.key === "Enter") this.handleNavigation("prev");
-			}}
+							if (e.key === "Enter") this.handleNavigation("prev");
+						}}
 						@click=${() => this.handleNavigation("prev")}
 					></f-icon
 				></f-div>
@@ -147,8 +147,8 @@ export class FCarousel extends FRoot {
 						tabindex="0"
 						clickable
 						@keyup=${(e: KeyboardEvent) => {
-				if (e.key === "Enter") this.handleNavigation("next");
-			}}
+							if (e.key === "Enter") this.handleNavigation("next");
+						}}
 						@click=${() => this.handleNavigation("next")}
 					></f-icon>
 				</f-div>
diff --git a/packages/flow-core/src/components/f-checkbox/f-checkbox.ts b/packages/flow-core/src/components/f-checkbox/f-checkbox.ts
index b567430d3..215b527e7 100644
--- a/packages/flow-core/src/components/f-checkbox/f-checkbox.ts
+++ b/packages/flow-core/src/components/f-checkbox/f-checkbox.ts
@@ -116,8 +116,8 @@ export class FCheckbox extends FRoot {
 					<label for="f-checkbox" value=${this.value} state=${this.state} size=${this.size}>
 						<span class="f-a11y-hidden-label">${this.value}</span>
 						${this.value === "checked"
-				? html`${unsafeSVG(checkedMark)}`
-				: html`${unsafeSVG(indeterminateMark)}`}
+							? html`${unsafeSVG(checkedMark)}`
+							: html`${unsafeSVG(indeterminateMark)}`}
 					</label>
 					<f-div
 						padding="none"
diff --git a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts
index f03911671..5209a27cf 100644
--- a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts
+++ b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts
@@ -185,12 +185,13 @@ export class FDateTimePicker extends FRoot {
 	 * validation message
 	 */
 	get dateValidationMessage() {
-		return `Please Enter a valid date format: ${this.mode === "date-time"
+		return `Please Enter a valid date format: ${
+			this.mode === "date-time"
 				? "DD/MM/YYYY HH:ii"
 				: this.mode === "date-only"
-					? "DD/MM/YYYY"
-					: "HH:ii"
-			}`;
+				? "DD/MM/YYYY"
+				: "HH:ii"
+		}`;
 	}
 
 	/**
@@ -357,17 +358,17 @@ export class FDateTimePicker extends FRoot {
 				class="f-date-input-picker"
 				data-qa-element-id=${this.getAttribute("data-qa-element-id")}
 				@keydown=${() => {
-				this.flatPickerElement?.close();
-				this.dateTimePickerElement.inputElement.focus();
-			}}
+					this.flatPickerElement?.close();
+					this.dateTimePickerElement.inputElement.focus();
+				}}
 				@keyup=${(e: KeyboardEvent) => {
-				if (e.key === "Enter") this.flatPickerElement?.open();
-			}}
+					if (e.key === "Enter") this.flatPickerElement?.open();
+				}}
 				@blur=${(e: FocusEvent) => {
-				if (this.flatPickerElement?.isOpen) {
-					e.stopPropagation();
-				}
-			}}
+					if (this.flatPickerElement?.isOpen) {
+						e.stopPropagation();
+					}
+				}}
 				@input=${this.handleKeyboardInput}
 				?read-only=${this["is-range"]}
 			>
diff --git a/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts b/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts
index f0af543d5..12e93ba3a 100644
--- a/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts
+++ b/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts
@@ -259,8 +259,8 @@ export class FEmojiPicker extends FRoot {
 		return this.include && this.include.length > 0
 			? this.include
 			: this.excludeCategories.length > 0
-				? this.excludeCategories
-				: this.categories;
+			? this.excludeCategories
+			: this.categories;
 	}
 
 	/**
@@ -430,7 +430,7 @@ export class FEmojiPicker extends FRoot {
 		const clearIcon = this.clear
 			? html`
 					${this.value
-					? html`<f-div align="middle-center" overflow="hidden">
+						? html`<f-div align="middle-center" overflow="hidden">
 								<f-icon
 									source="i-close"
 									data-qa-remove-emoji=${this.getAttribute("data-qa-element-id")}
@@ -439,7 +439,7 @@ export class FEmojiPicker extends FRoot {
 									@click=${this.clearValue}
 								></f-icon
 						  ></f-div>`
-					: ""}
+						: ""}
 			  `
 			: "";
 
@@ -486,12 +486,12 @@ export class FEmojiPicker extends FRoot {
 					tabindex="0"
 					?disabled=${this.disabled}
 					@keyup=${(e: KeyboardEvent) => {
-				if (e.key === "Enter") this.toggleEmojiPicker(true);
-			}}
+						if (e.key === "Enter") this.toggleEmojiPicker(true);
+					}}
 					@click=${(e: MouseEvent) => {
-				e.stopPropagation();
-				this.toggleEmojiPicker(true);
-			}}
+						e.stopPropagation();
+						this.toggleEmojiPicker(true);
+					}}
 				>
 					<f-div
 						class="emoji-value"
diff --git a/packages/flow-core/src/components/f-file-upload/f-file-upload.ts b/packages/flow-core/src/components/f-file-upload/f-file-upload.ts
index f18328f25..61b3c9b92 100644
--- a/packages/flow-core/src/components/f-file-upload/f-file-upload.ts
+++ b/packages/flow-core/src/components/f-file-upload/f-file-upload.ts
@@ -170,18 +170,20 @@ export class FFileUpload extends FRoot {
 	 * error if file format is incorrect
 	 */
 	get fileFormatError() {
-		return ` <f-text variant="para" size="small" weight="regular" state="danger">${this.type === "single"
+		return ` <f-text variant="para" size="small" weight="regular" state="danger">${
+			this.type === "single"
 				? "File format not supported"
 				: "One or more file formats not supported"
-			}</f-text>`;
+		}</f-text>`;
 	}
 
 	/**
 	 * error if file size is more than given size
 	 */
 	get fileSizeError() {
-		return ` <f-text variant="para" size="small" weight="regular" state="danger">${this.type === "single" ? "File Size too large" : "One or more files are too large"
-			}</f-text>`;
+		return ` <f-text variant="para" size="small" weight="regular" state="danger">${
+			this.type === "single" ? "File Size too large" : "One or more files are too large"
+		}</f-text>`;
 	}
 
 	/**
@@ -466,11 +468,11 @@ export class FFileUpload extends FRoot {
 					</f-div>
 					<f-div width="hug-content">
 						${this.maxSize
-				? html` <f-text variant="para" size="small" weight="regular" state="secondary"
+							? html` <f-text variant="para" size="small" weight="regular" state="secondary"
 									>${this.type === "single" ? "Max Size: " : "Max Size/file: "}${this
-						.maxSize}</f-text
+										.maxSize}</f-text
 							  >`
-				: null}
+							: null}
 					</f-div>
 				</f-div>
 				<f-div direction="column" gap="x-small">
@@ -483,16 +485,16 @@ export class FFileUpload extends FRoot {
 						?disabled=${this.disabled}
 						@click=${this.handleClick}
 						@keyup=${(e: KeyboardEvent) => {
-				if (e.key === "Enter") this.handleClick();
-			}}
+							if (e.key === "Enter") this.handleClick();
+						}}
 						@drop=${this.dropFile}
 						@dragover=${(e: DragEvent) => {
-				e.preventDefault();
-			}}
+							e.preventDefault();
+						}}
 					>
 						${this.type === "single"
-				? this.value
-					? html`<f-div width="80%"
+							? this.value
+								? html`<f-div width="80%"
 										><f-text
 											variant="para"
 											size="small"
@@ -502,36 +504,36 @@ export class FFileUpload extends FRoot {
 											>${(this.value as File)?.name}</f-text
 										></f-div
 								  >`
-					: html`<div class="f-file-upload-placeholder" size=${ifDefined(this.size)}>
+								: html`<div class="f-file-upload-placeholder" size=${ifDefined(this.size)}>
 										<f-text variant="para" size="small" weight="regular"
 											>${this.placeholder}</f-text
 										>
 										<f-text variant="para" size="small" weight="regular" state="secondary"
 											>${this.fileType === "all"
-							? `(All formats supported)`
-							: `(${getExtensionsFromMimeType(this.fileType)})`}</f-text
+												? `(All formats supported)`
+												: `(${getExtensionsFromMimeType(this.fileType)})`}</f-text
 										>
 								  </div>`
-				: html`<div class="f-file-upload-placeholder" size=${ifDefined(this.size)}>
+							: html`<div class="f-file-upload-placeholder" size=${ifDefined(this.size)}>
 									<f-text variant="para" size="small" weight="regular">${this.placeholder}</f-text>
 									<f-text variant="para" size="small" weight="regular" state="secondary"
 										>${this.fileType === "all"
-						? `(All formats supported)`
-						: `(${getExtensionsFromMimeType(this.fileType)})`}</f-text
+											? `(All formats supported)`
+											: `(${getExtensionsFromMimeType(this.fileType)})`}</f-text
 									>
 							  </div>`}
 						${this.loading
-				? html`<div class="loader-suffix" state=${ifDefined(this.state)}>
+							? html`<div class="loader-suffix" state=${ifDefined(this.state)}>
 									${unsafeSVG(loader)}
 							  </div>`
-				: this.type === "single" && this.value
-					? html`<f-icon
+							: this.type === "single" && this.value
+							? html`<f-icon
 									source="i-close"
 									size="small"
 									@click=${this.handleRemoveFile}
 									clickable
 							  ></f-icon>`
-					: html`<f-icon source="i-upload" size="medium" clickable></f-icon>`}
+							: html`<f-icon source="i-upload" size="medium" clickable></f-icon>`}
 						<input
 							${ref(this.fileInputRef)}
 							data-qa-id=${ifDefined(this.getAttribute("data-qa-element-id") ?? undefined)}
@@ -543,11 +545,11 @@ export class FFileUpload extends FRoot {
 					</div>
 					<f-div direction="column" id="f-file-upload-error"> </f-div>
 					${(this.value as File[])?.length > 0
-				? html` <f-div direction="column" gap="small">
+						? html` <f-div direction="column" gap="small">
 								${this.type === "multiple"
-						? html`${(this.value as File[]).map(
-							item =>
-								html`<f-div padding="medium" state="tertiary" variant="curved" gap="auto">
+									? html`${(this.value as File[]).map(
+											item =>
+												html`<f-div padding="medium" state="tertiary" variant="curved" gap="auto">
 													<f-div width="80%" id="multiple-file-selection">
 														<f-text
 															variant="para"
@@ -565,10 +567,10 @@ export class FFileUpload extends FRoot {
 														@click=${(e: MouseEvent) => this.handleRemoveRespectiveFile(e, item)}
 													></f-icon>
 												</f-div>`
-						)}`
-						: ""}
+									  )}`
+									: ""}
 						  </f-div>`
-				: ""}
+						: ""}
 				</f-div>
 			</f-div>
 		`;
diff --git a/packages/flow-core/src/components/f-form-group/f-form-group.ts b/packages/flow-core/src/components/f-form-group/f-form-group.ts
index 482f180ba..8d8768343 100644
--- a/packages/flow-core/src/components/f-form-group/f-form-group.ts
+++ b/packages/flow-core/src/components/f-form-group/f-form-group.ts
@@ -112,8 +112,8 @@ export class FFormGroup extends FRoot {
 		 */
 		return html` <f-div direction="column" height="hug-content" width="100%" .gap=${this.gap}>
 			${this.label &&
-				Object.keys(this.label)?.length > 0 &&
-				Object.values(this.label)?.every(item => item !== undefined)
+			Object.keys(this.label)?.length > 0 &&
+			Object.values(this.label)?.every(item => item !== undefined)
 				? html`
 						<f-div
 							direction="row"
@@ -121,8 +121,8 @@ export class FFormGroup extends FRoot {
 							align="middle-left"
 							class="f-form-group-label-wrapper"
 							@click=${() => {
-						if (this.collapse !== "none") this.isCollapsed = !this.isCollapsed;
-					}}
+								if (this.collapse !== "none") this.isCollapsed = !this.isCollapsed;
+							}}
 							.style="${this.applyCursorStyles()}"
 						>
 							<f-div gap="x-small" direction="column" width="fill-container">
@@ -136,21 +136,21 @@ export class FFormGroup extends FRoot {
 											.state=${this.collapse === "text" ? "primary" : "default"}
 										>
 											${this.collapse === "text"
-						? html`<a
+												? html`<a
 														href=""
 														@click=${(e: MouseEvent) => {
-								e.preventDefault();
-								if (this.collapse === "text") {
-									this.isCollapsed = !this.isCollapsed;
-								}
-							}}
+															e.preventDefault();
+															if (this.collapse === "text") {
+																this.isCollapsed = !this.isCollapsed;
+															}
+														}}
 														>${this.label.title}</a
 												  >`
-						: html`${this.label.title}`}
+												: html`${this.label.title}`}
 										</f-text>
 									</f-div>
 									${this.label?.iconTooltip
-						? html` <f-icon
+										? html` <f-icon
 												source="i-question-filled"
 												size="small"
 												state="default"
@@ -158,15 +158,15 @@ export class FFormGroup extends FRoot {
 												.tooltip="${this.label?.iconTooltip}"
 												clickable
 										  ></f-icon>`
-						: nothing}
+										: nothing}
 								</f-div>
 								${this.label?.description
-						? html` <f-div height="hug-content" width="hug-content">
+									? html` <f-div height="hug-content" width="hug-content">
 											<f-text variant="para" size="small" weight="regular">
 												${this.label.description}
 											</f-text>
 									  </f-div>`
-						: nothing}
+									: nothing}
 							</f-div>
 							<f-div
 								direction="row"
@@ -176,22 +176,22 @@ export class FFormGroup extends FRoot {
 								align="middle-center"
 							>
 								${this.canDuplicate
-						? html` <f-icon
+									? html` <f-icon
 											source="i-plus-fill"
 											size="medium"
 											state="default"
 											clickable
 											@click=${this.duplicationClick}
 									  ></f-icon>`
-						: nothing}
+									: nothing}
 								${this.collapse === "accordion"
-						? html` <f-icon
+									? html` <f-icon
 											.source=${!this.isCollapsed ? "i-chevron-up" : "i-chevron-down"}
 											size="small"
 											state="default"
 											clickable
 									  ></f-icon>`
-						: nothing}
+									: nothing}
 							</f-div>
 						</f-div>
 				  `
@@ -202,8 +202,8 @@ export class FFormGroup extends FRoot {
 							<f-div
 								direction=${this.direction === "vertical" ? "column" : "row"}
 								.gap=${this.variant === "compact" && this.direction === "horizontal"
-						? "none"
-						: this.gap}
+									? "none"
+									: this.gap}
 								overflow="scroll"
 							>
 								<slot></slot>
diff --git a/packages/flow-core/src/components/f-grid/f-grid.ts b/packages/flow-core/src/components/f-grid/f-grid.ts
index aa2191b6b..a1ded3233 100644
--- a/packages/flow-core/src/components/f-grid/f-grid.ts
+++ b/packages/flow-core/src/components/f-grid/f-grid.ts
@@ -44,8 +44,9 @@ export class FGrid extends FRoot {
 	 * grid-template-columns to assign cell-width
 	 */
 	get gridTemplateColumns() {
-		return `repeat(auto-fill,minmax(${this.minCellWidth && this.minCellWidth > 0 ? this.minCellWidth : 180
-			}px, ${this.maxCellWidth ? `${this.maxCellWidth}px` : "1fr"}))`;
+		return `repeat(auto-fill,minmax(${
+			this.minCellWidth && this.minCellWidth > 0 ? this.minCellWidth : 180
+		}px, ${this.maxCellWidth ? `${this.maxCellWidth}px` : "1fr"}))`;
 	}
 
 	/**
diff --git a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts
index f4ffb00a0..2e23bbf5b 100644
--- a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts
+++ b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts
@@ -214,16 +214,16 @@ export class FIconButton extends FRoot {
 				this.category === "fill" && this.variant !== "block" && !this.fill ? true : false,
 			"fill-button-surface-light":
 				this.fill &&
-					this.category === "fill" &&
-					this.variant !== "block" &&
-					getTextContrast(this.fill) === "light-text"
+				this.category === "fill" &&
+				this.variant !== "block" &&
+				getTextContrast(this.fill) === "light-text"
 					? true
 					: false,
 			"fill-button-surface-dark":
 				this.fill &&
-					this.category === "fill" &&
-					this.variant !== "block" &&
-					getTextContrast(this.fill) === "dark-text"
+				this.category === "fill" &&
+				this.variant !== "block" &&
+				getTextContrast(this.fill) === "dark-text"
 					? true
 					: false
 		};
@@ -285,9 +285,9 @@ export class FIconButton extends FRoot {
 				.state=${this.state}
 				.size=${this.size}
 				class=${classMap({
-			...iconClasses,
-			"fill-button-surface-input": this.iconInputClass ? true : false
-		})}
+					...iconClasses,
+					"fill-button-surface-input": this.iconInputClass ? true : false
+				})}
 				?clickable=${this.variant === "block"}
 			></f-icon
 			>${counter}
diff --git a/packages/flow-core/src/components/f-input/f-input.ts b/packages/flow-core/src/components/f-input/f-input.ts
index 432f9dc5a..cdb038461 100644
--- a/packages/flow-core/src/components/f-input/f-input.ts
+++ b/packages/flow-core/src/components/f-input/f-input.ts
@@ -111,10 +111,10 @@ export class FInput extends FInputBase {
 						width="hug-content"
 					>
 						${this.maxLength
-				? html` <f-text variant="para" size="small" weight="regular" state="secondary"
+							? html` <f-text variant="para" size="small" weight="regular" state="secondary"
 									>${(this.value + "")?.length ?? 0} / ${this.maxLength}</f-text
 							  >`
-				: null}
+							: null}
 					</f-div>
 				</f-div>
 				<f-div
diff --git a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts
index 325ee76cd..fc42d5314 100644
--- a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts
+++ b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts
@@ -293,7 +293,7 @@ export class FPictogram extends FRoot {
 			>
 				${this.renderedHtml}
 				${this.variant === "squircle"
-				? html`<svg width="0" height="0">
+					? html`<svg width="0" height="0">
 							<defs>
 								<clipPath id="squircle" clipPathUnits="objectBoundingBox">
 									<path
@@ -302,7 +302,7 @@ export class FPictogram extends FRoot {
 								</clipPath>
 							</defs>
 					  </svg>`
-				: null}
+					: null}
 			</div>
 		`;
 	}
diff --git a/packages/flow-core/src/components/f-popover/f-popover.ts b/packages/flow-core/src/components/f-popover/f-popover.ts
index ad7e978ed..4a29901f6 100644
--- a/packages/flow-core/src/components/f-popover/f-popover.ts
+++ b/packages/flow-core/src/components/f-popover/f-popover.ts
@@ -201,16 +201,16 @@ export class FPopover extends FRoot {
 						this.placement === "auto"
 							? autoPlacement({ boundary: document.body })
 							: flip({
-								fallbackPlacements: [
-									this.placement as Placement,
-									"bottom-start",
-									"bottom-end",
-									"top-start",
-									"top-end"
-								],
-								crossAxis: false,
-								boundary: document.body
-							}),
+									fallbackPlacements: [
+										this.placement as Placement,
+										"bottom-start",
+										"bottom-end",
+										"top-start",
+										"top-end"
+									],
+									crossAxis: false,
+									boundary: document.body
+							  }),
 						shift({ padding: isTooltip ? 0 : 16 })
 					]
 				})
@@ -236,7 +236,7 @@ export class FPopover extends FRoot {
 							(pop as LitElement).requestUpdate();
 						});
 					})
-					.catch(_err => { });
+					.catch(_err => {});
 			});
 		}
 	}
diff --git a/packages/flow-core/src/components/f-progress-bar/f-progress-bar.ts b/packages/flow-core/src/components/f-progress-bar/f-progress-bar.ts
index 477d99b58..f1ce9e36d 100644
--- a/packages/flow-core/src/components/f-progress-bar/f-progress-bar.ts
+++ b/packages/flow-core/src/components/f-progress-bar/f-progress-bar.ts
@@ -154,8 +154,9 @@ export class FProgressBar extends FRoot {
 	 * Calculate overall style to apply
 	 */
 	get circleProgressStyle() {
-		return `--f-progress-transform: rotate(${this.valueInAngle}deg);width:${this.circleDiameter
-			};height:${this.circleDiameter};${this.fill ? `--f-circle-progress-fill: ${this.fill};` : ""}`;
+		return `--f-progress-transform: rotate(${this.valueInAngle}deg);width:${
+			this.circleDiameter
+		};height:${this.circleDiameter};${this.fill ? `--f-circle-progress-fill: ${this.fill};` : ""}`;
 	}
 
 	protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
diff --git a/packages/flow-core/src/components/f-search/f-search.ts b/packages/flow-core/src/components/f-search/f-search.ts
index 6ff0581d4..9b19b6b71 100644
--- a/packages/flow-core/src/components/f-search/f-search.ts
+++ b/packages/flow-core/src/components/f-search/f-search.ts
@@ -302,8 +302,8 @@ export class FSearch extends FRoot {
 				? "f-search-border-button"
 				: "f-search-border"
 			: this["search-button"]
-				? "f-search-suggest-button"
-				: "f-search-suggest";
+			? "f-search-suggest-button"
+			: "f-search-suggest";
 	}
 
 	/**
@@ -366,7 +366,7 @@ export class FSearch extends FRoot {
 			</f-div>
 			<f-div direction="row" height="hug-content">
 				${this.scope !== "none" && (this.scope as string[])?.length > 0
-				? html` <f-div width="hug-content" style="min-width:150px">
+					? html` <f-div width="hug-content" style="min-width:150px">
 							<f-select
 								aria-label="Scope of ${this.getAttribute("aria-label")}"
 								class="f-search-border"
@@ -380,7 +380,7 @@ export class FSearch extends FRoot {
 								@input=${this.handleScopeSelection}
 							></f-select
 					  ></f-div>`
-				: ""}
+					: ""}
 				<f-div>
 					<f-suggest
 						class=${this.applyStyling}
@@ -406,7 +406,7 @@ export class FSearch extends FRoot {
 					</f-suggest>
 				</f-div>
 				${this["search-button"]
-				? html` <f-icon-button
+					? html` <f-icon-button
 							class="f-search-border"
 							icon="i-search"
 							.variant=${this.variant}
@@ -414,7 +414,7 @@ export class FSearch extends FRoot {
 							.state=${this.state === "default" ? "primary" : this.state}
 							@click=${this.handleSearchClick}
 					  ></f-icon-button>`
-				: ""}
+					: ""}
 			</f-div>
 			<f-div direction="column" id="helper-text-section"><slot name="help"></slot> </f-div>
 		</f-div>`;
diff --git a/packages/flow-core/src/components/f-select/f-select.ts b/packages/flow-core/src/components/f-select/f-select.ts
index f6c374c93..1f504b686 100644
--- a/packages/flow-core/src/components/f-select/f-select.ts
+++ b/packages/flow-core/src/components/f-select/f-select.ts
@@ -468,8 +468,8 @@ export class FSelect extends FRoot {
 				value: Array.isArray(this.selectedOptions)
 					? []
 					: Object.keys(this.selectedOptions).forEach(group => {
-						(this.selectedOptions as FSelectOptionsGroup)[group] = [];
-					})
+							(this.selectedOptions as FSelectOptionsGroup)[group] = [];
+					  })
 			},
 			bubbles: true,
 			composed: true
@@ -477,8 +477,8 @@ export class FSelect extends FRoot {
 		(this.value as unknown) = Array.isArray(this.selectedOptions)
 			? []
 			: Object.keys(this.selectedOptions).forEach(group => {
-				(this.selectedOptions as FSelectOptionsGroup)[group] = [];
-			});
+					(this.selectedOptions as FSelectOptionsGroup)[group] = [];
+			  });
 		this.clearFilterSearchString();
 		this.dispatchEvent(event);
 		this.requestUpdate();
@@ -515,10 +515,11 @@ export class FSelect extends FRoot {
 	 */
 	applyInputStyle() {
 		return this.searchable
-			? `${this.openDropdown
-				? "width:75%;"
-				: "width:0px; transition: width var(--transition-time-rapid) ease-in 0s;"
-			}`
+			? `${
+					this.openDropdown
+						? "width:75%;"
+						: "width:0px; transition: width var(--transition-time-rapid) ease-in 0s;"
+			  }`
 			: `max-width:0px`;
 	}
 
diff --git a/packages/flow-core/src/components/f-suggest/f-suggest.ts b/packages/flow-core/src/components/f-suggest/f-suggest.ts
index 2f50bad7e..a46fea4fa 100644
--- a/packages/flow-core/src/components/f-suggest/f-suggest.ts
+++ b/packages/flow-core/src/components/f-suggest/f-suggest.ts
@@ -455,8 +455,8 @@ export class FSuggest extends FRoot {
 				.size=${this.size}
 			>
 				${this.isSearchComponent
-				? ""
-				: html` <f-div slot="label"><slot name="label"></slot></f-div>
+					? ""
+					: html` <f-div slot="label"><slot name="label"></slot></f-div>
 							<f-div slot="description"><slot name="description"></slot></f-div>
 							<f-div slot="help"><slot name="help"></slot></f-div>
 							<f-div slot="icon-tooltip"><slot name="icon-tooltip"></slot></f-div
@@ -466,8 +466,8 @@ export class FSuggest extends FRoot {
 				? html` <f-popover .overlay=${false} .placement=${"bottom-start"} class="f-suggest-popover">
 						<f-div direction="column" state="secondary">
 							${this.filteredSuggestions && this.filteredSuggestionsLength > 0
-						? this.getSuggestionHtml(this.filteredSuggestions)
-						: html`<slot name="no-data"></slot>`}
+								? this.getSuggestionHtml(this.filteredSuggestions)
+								: html`<slot name="no-data"></slot>`}
 						</f-div>
 				  </f-popover>`
 				: nothing}
diff --git a/packages/flow-core/src/components/f-tab/f-tab.ts b/packages/flow-core/src/components/f-tab/f-tab.ts
index 666bafb97..f159b1b72 100644
--- a/packages/flow-core/src/components/f-tab/f-tab.ts
+++ b/packages/flow-core/src/components/f-tab/f-tab.ts
@@ -138,21 +138,21 @@ For vertical f-tab, content can align to top, middle, or bottom.
 			this.showScrollIcons && this.isOverflowing
 				? html`<f-div
 						class=${this.direction === "horizontal"
-						? "f-tab-scroll-icons icon-left"
-						: "f-tab-scroll-icons icon-top"}
+							? "f-tab-scroll-icons icon-left"
+							: "f-tab-scroll-icons icon-top"}
 						.width=${this.direction === "horizontal" ? "hug-content" : "100%"}
 						.height=${this.direction === "horizontal" ? "100%" : "hug-content"}
 						align="middle-center"
 				  >
 						${this.direction === "horizontal"
-						? html` <f-icon-button
+							? html` <f-icon-button
 									data-qa-chevron-left
 									icon="i-chevron-left"
 									state="neutral"
 									size="x-small"
 									@click=${(e: MouseEvent) => this.handleScroll(e, "left", -150)}
 							  ></f-icon-button>`
-						: html` <f-icon-button
+							: html` <f-icon-button
 									data-qa-chevron-up
 									icon="i-chevron-up"
 									state="neutral"
@@ -166,21 +166,21 @@ For vertical f-tab, content can align to top, middle, or bottom.
 			this.showScrollIcons && this.isOverflowing
 				? html`<f-div
 						class=${this.direction === "horizontal"
-						? "f-tab-scroll-icons icon-right"
-						: "f-tab-scroll-icons icon-bottom"}
+							? "f-tab-scroll-icons icon-right"
+							: "f-tab-scroll-icons icon-bottom"}
 						.width=${this.direction === "horizontal" ? "hug-content" : "100%"}
 						.height=${this.direction === "horizontal" ? "100%" : "hug-content"}
 						align="middle-center"
 				  >
 						${this.direction === "horizontal"
-						? html` <f-icon-button
+							? html` <f-icon-button
 									data-qa-chevron-right
 									icon="i-chevron-right"
 									state="neutral"
 									size="x-small"
 									@click=${(e: MouseEvent) => this.handleScroll(e, "left", 150)}
 							  ></f-icon-button>`
-						: html` <f-icon-button
+							: html` <f-icon-button
 									data-qa-chevron-down
 									icon="i-chevron-down"
 									state="neutral"
diff --git a/packages/flow-core/src/components/f-tag/f-tag.ts b/packages/flow-core/src/components/f-tag/f-tag.ts
index 562ecb594..e86bdcc1f 100644
--- a/packages/flow-core/src/components/f-tag/f-tag.ts
+++ b/packages/flow-core/src/components/f-tag/f-tag.ts
@@ -174,8 +174,9 @@ export class FTag extends FRoot {
 					return `background-color: ${LightenDarkenColor(
 						this.fill,
 						-150
-					)}; border: 1px solid ${LightenDarkenColor(this.fill, -150)}; color: transparent; fill: ${this.fill
-						}`;
+					)}; border: 1px solid ${LightenDarkenColor(this.fill, -150)}; color: transparent; fill: ${
+						this.fill
+					}`;
 				} else {
 					return `background: ${this.fill}; border: 1px solid ${this.fill}; color: ${this.textColor}`;
 				}
@@ -258,12 +259,12 @@ export class FTag extends FRoot {
 					.source=${this.iconLeft}
 					.state=${this.state}
 					class=${classMap({
-				"left-icon": true,
-				...iconClasses,
-				"f-tag-system-icon": this.tagSystemIcon ? true : false,
-				"system-icon-size": this.size === "small" ? true : false,
-				"f-tag-small-emoji": this.size === "small" ? true : false
-			})}
+						"left-icon": true,
+						...iconClasses,
+						"f-tag-system-icon": this.tagSystemIcon ? true : false,
+						"system-icon-size": this.size === "small" ? true : false,
+						"f-tag-small-emoji": this.size === "small" ? true : false
+					})}
 					.size=${this.iconSize}
 					?clickable=${true}
 			  ></f-icon>`
@@ -277,12 +278,12 @@ export class FTag extends FRoot {
 					.source=${this.iconRight}
 					.state=${this.state}
 					class=${classMap({
-				"right-icon": true,
-				...iconClasses,
-				"f-tag-system-icon": this.tagSystemIcon ? true : false,
-				"system-icon-size": this.size === "small" ? true : false,
-				"f-tag-small-emoji": this.size === "small" ? true : false
-			})}
+						"right-icon": true,
+						...iconClasses,
+						"f-tag-system-icon": this.tagSystemIcon ? true : false,
+						"system-icon-size": this.size === "small" ? true : false,
+						"f-tag-small-emoji": this.size === "small" ? true : false
+					})}
 					.size=${this.iconSize}
 					?clickable=${true}
 			  ></f-icon>`
@@ -319,9 +320,9 @@ export class FTag extends FRoot {
 			return html`<div
 				data-qa-tag
 				class=${classMap({
-				"f-tag": true,
-				"custom-loader": this.fill ? true : false
-			})}
+					"f-tag": true,
+					"custom-loader": this.fill ? true : false
+				})}
 				style=${this.applyStyles()}
 				?label=${this.label ? true : false}
 				size=${ifDefined(this.size)}
@@ -342,9 +343,9 @@ export class FTag extends FRoot {
 			this.category,
 			html`<div
 				class=${classMap({
-				"f-tag": true,
-				"custom-loader": this.fill ? true : false
-			})}
+					"f-tag": true,
+					"custom-loader": this.fill ? true : false
+				})}
 				style=${this.applyStyles()}
 				?label=${this.label ? true : false}
 				size=${ifDefined(this.size)}
diff --git a/packages/flow-core/src/components/f-text-area/f-text-area.ts b/packages/flow-core/src/components/f-text-area/f-text-area.ts
index 44e0e3286..99ce8a339 100644
--- a/packages/flow-core/src/components/f-text-area/f-text-area.ts
+++ b/packages/flow-core/src/components/f-text-area/f-text-area.ts
@@ -215,10 +215,10 @@ export class FTextArea extends FRoot {
 					</f-div>
 					<f-div padding="none" gap="none" width="hug-content">
 						${this.maxLength
-				? html` <f-text variant="para" size="small" weight="regular" state="secondary"
+							? html` <f-text variant="para" size="small" weight="regular" state="secondary"
 									>${this.value?.length ?? 0} / ${this.maxLength}</f-text
 							  >`
-				: null}
+							: null}
 					</f-div>
 				</f-div>
 				<div class="f-text-area-wrapper">
@@ -240,14 +240,14 @@ export class FTextArea extends FRoot {
 						.value=${this.maskValue ? this.getDots() : this.value ?? ""}
 					></textarea>
 					${this.clear && this.value
-				? html` <f-icon
+						? html` <f-icon
 								class="f-text-area-clear-icon"
 								source="i-close"
 								clickable
 								size="x-small"
 								@click=${this.clearValue}
 						  ></f-icon>`
-				: null}
+						: null}
 				</div>
 				<slot name="help"></slot>
 			</f-div>
diff --git a/packages/flow-core/src/components/f-tooltip/f-tooltip.ts b/packages/flow-core/src/components/f-tooltip/f-tooltip.ts
index bcc033fd3..778582905 100644
--- a/packages/flow-core/src/components/f-tooltip/f-tooltip.ts
+++ b/packages/flow-core/src/components/f-tooltip/f-tooltip.ts
@@ -80,7 +80,7 @@ export class FTooltip extends LitElement {
 				<f-div gap="small" state="custom, black">
 					<f-div overflow="scroll" padding="small medium"> <slot></slot> </f-div>
 					${this.closable
-					? html` <f-div width="hug-content" padding="small"
+						? html` <f-div width="hug-content" padding="small"
 								><f-icon
 									source="i-close"
 									size="x-small"
@@ -88,7 +88,7 @@ export class FTooltip extends LitElement {
 									@click=${() => (this.open = false)}
 								></f-icon
 						  ></f-div>`
-					: ""}
+						: ""}
 				</f-div>
 			</f-popover>`;
 		}
diff --git a/packages/flow-dashboard/package.json b/packages/flow-dashboard/package.json
index 35afba31a..0cd1f32ce 100644
--- a/packages/flow-dashboard/package.json
+++ b/packages/flow-dashboard/package.json
@@ -64,4 +64,4 @@
   "homepage": "https://github.com/ollionorg/flow-core/packages/flow-dashboard#readme",
   "author": "@nonfx",
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/packages/flow-dashboard/src/components/f-dashboard/f-dashboard.ts b/packages/flow-dashboard/src/components/f-dashboard/f-dashboard.ts
index d6a690f48..24a321943 100644
--- a/packages/flow-dashboard/src/components/f-dashboard/f-dashboard.ts
+++ b/packages/flow-dashboard/src/components/f-dashboard/f-dashboard.ts
@@ -51,9 +51,9 @@ export class FDashboard extends FRoot {
 		return html`
 			<div class="grid-stack" ${ref(this.gridStackElement)}>
 				${this.config.widgets.map(wgt => {
-			return keyed(
-				wgt.id,
-				html`<div
+					return keyed(
+						wgt.id,
+						html`<div
 							id="${wgt.id}"
 							class="grid-stack-item"
 							gs-w="${wgt.placement.w}"
@@ -63,8 +63,8 @@ export class FDashboard extends FRoot {
 								${getWidgetHeader(wgt)}${renderWidget(wgt)}${getWidgetFooter(wgt)}
 							</div>
 						</div>`
-			);
-		})}
+					);
+				})}
 			</div>
 		`;
 	}
diff --git a/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart.ts b/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart.ts
index 19a4bc0f4..b1b3626a7 100644
--- a/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart.ts
+++ b/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart.ts
@@ -193,7 +193,7 @@ export class FTimeseriesChart extends FRoot {
 				align="middle-center"
 			>
 				${this.config.data.map(series => {
-				return html`<f-div
+					return html`<f-div
 						.id=${"legend-" + series.seriesName}
 						class="timeseries-legend"
 						width="hug-content"
@@ -212,7 +212,7 @@ export class FTimeseriesChart extends FRoot {
 						></f-div
 						><f-text state="secondary">${series.seriesName}</f-text></f-div
 					>`;
-			})}
+				})}
 			</f-div>`;
 		}
 
@@ -550,8 +550,9 @@ export class FTimeseriesChart extends FRoot {
 					this.chartTooltip.value.style.removeProperty("top");
 					this.chartTooltip.value.style.setProperty(
 						"bottom",
-						`${document.body.offsetHeight -
-						((coOrdinates?.top ?? 0) + this.chartTooltip.value.offsetHeight)
+						`${
+							document.body.offsetHeight -
+							((coOrdinates?.top ?? 0) + this.chartTooltip.value.offsetHeight)
 						}px`
 					);
 				} else {
@@ -565,7 +566,7 @@ export class FTimeseriesChart extends FRoot {
 				if (
 					coOrdinates &&
 					coOrdinates.left >
-					document.body.offsetWidth - Math.max(this.chartTooltip.value.offsetWidth, 320)
+						document.body.offsetWidth - Math.max(this.chartTooltip.value.offsetWidth, 320)
 				) {
 					this.chartTooltip.value.style.removeProperty("left");
 					this.chartTooltip.value.style.setProperty(
diff --git a/packages/flow-form-builder/package.json b/packages/flow-form-builder/package.json
index 3f459e0dc..17db0641b 100644
--- a/packages/flow-form-builder/package.json
+++ b/packages/flow-form-builder/package.json
@@ -61,4 +61,4 @@
   "homepage": "https://github.com/ollionorg/flow-core#readme",
   "author": "@nonfx",
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts b/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts
index 75d91ab2c..c2ce23817 100644
--- a/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts
+++ b/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts
@@ -127,7 +127,7 @@ export class FCheckboxGroup extends FRoot {
 					state=${this.state}
 				>
 					${this.options?.map(
-			item => html`
+						item => html`
 							<f-checkbox
 								data-qa-element-id=${item.qaId ?? item.id}
 								.value=${this.isChecked(item)}
@@ -137,8 +137,8 @@ export class FCheckboxGroup extends FRoot {
 							>
 								<f-div slot="label" padding="none" gap="none">
 									${typeof item.title === "object"
-					? item.title
-					: html`<f-text
+										? item.title
+										: html`<f-text
 												weight="regular"
 												data-qa-label-for=${item.title ?? item.id}
 												size="small"
@@ -146,16 +146,16 @@ export class FCheckboxGroup extends FRoot {
 										  >`}
 								</f-div>
 								${item?.description
-					? html` <f-div
+									? html` <f-div
 											slot="description"
 											data-qa-description-for=${item.title ?? item.id}
 											padding="none"
 											gap="none"
 											>${item?.description}</f-div
 									  >`
-					: ""}
+									: ""}
 								${item?.iconTooltip
-					? html`
+									? html`
 											<f-icon
 												data-qa-info-icon-for=${item.title ?? item.id}
 												slot="icon-tooltip"
@@ -166,20 +166,20 @@ export class FCheckboxGroup extends FRoot {
 												clickable
 											></f-icon>
 									  `
-					: ""}
+									: ""}
 								${item?.subTitle
-					? html`
+									? html`
 											<f-text size="small" slot="subtitle" align="right" state="secondary"
 												>${item?.subTitle}</f-text
 											>
 									  `
-					: ""}
+									: ""}
 							</f-checkbox>
 						`
-		)}
+					)}
 				</div>
 				${this?.helperText
-				? html`<f-text
+					? html`<f-text
 							variant="para"
 							data-qa-help-for=${this.getAttribute("data-qa-element-id")}
 							size="small"
@@ -187,7 +187,7 @@ export class FCheckboxGroup extends FRoot {
 							.state=${this.state}
 							>${this?.helperText}</f-text
 					  >`
-				: html`<slot name="help"></slot>`}
+					: html`<slot name="help"></slot>`}
 			</f-div>
 		`;
 	}
diff --git a/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts b/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts
index 9ef578d9c..847141f1a 100644
--- a/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts
+++ b/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts
@@ -114,11 +114,11 @@ export class FFormArray extends FRoot {
 			fieldTemplates.push(
 				html` <f-div gap="small" align="top-left" overflow="scroll"
 					>${fieldRenderer[this.config.field.type](
-					``,
-					this.config.field,
-					fieldRef,
-					this.getFieldValue(i)
-				)}
+						``,
+						this.config.field,
+						fieldRef,
+						this.getFieldValue(i)
+					)}
 					${i === 0 && this.isRequired
 						? html` <f-icon-button
 								data-qa-plus
@@ -137,8 +137,8 @@ export class FFormArray extends FRoot {
 								size="x-small"
 								state="neutral"
 								@click=${() => {
-								this.removeField(i);
-							}}
+									this.removeField(i);
+								}}
 						  />`}
 				</f-div>`
 			);
@@ -167,7 +167,7 @@ export class FFormArray extends FRoot {
 							</f-div>
 							<!--info icon-->
 							${this.config.label?.iconTooltip
-						? html` <f-icon
+								? html` <f-icon
 										source="i-question-filled"
 										size="small"
 										state="subtle"
@@ -175,9 +175,9 @@ export class FFormArray extends FRoot {
 										.tooltip="${this.config.label?.iconTooltip}"
 										clickable
 								  ></f-icon>`
-						: ""}
+								: ""}
 							${!this.isRequired
-						? html`<f-icon-button
+								? html`<f-icon-button
 										data-qa-plus
 										data-qa-plus-for=${ifDefined(this.getAttribute("name") || undefined)}
 										icon="i-plus"
@@ -185,14 +185,14 @@ export class FFormArray extends FRoot {
 										state="neutral"
 										@click=${this.addField}
 								  />`
-						: ``}
+								: ``}
 						</f-div>
 						<!--field description-->
 						${this.config.label?.description
-						? html` <f-text variant="para" state="secondary" size="small" weight="regular"
+							? html` <f-text variant="para" state="secondary" size="small" weight="regular"
 									>${this.config.label?.description}</f-text
 							  >`
-						: ""}
+							: ""}
 				  </f-div>`
 				: ``}
 			${fieldTemplates.length > 0
@@ -200,7 +200,7 @@ export class FFormArray extends FRoot {
 				: ``}
 			<slot name="help">
 				${this.config.helperText
-				? html`<f-text
+					? html`<f-text
 							variant="para"
 							data-qa-help-for=${ifDefined(this.config.qaId || this.config.id)}
 							size="small"
@@ -208,7 +208,7 @@ export class FFormArray extends FRoot {
 							.state=${this.config.state}
 							>${this.config?.helperText}</f-text
 					  >`
-				: nothing}
+					: nothing}
 			</slot>
 		</f-div>`;
 	}
diff --git a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.test.ts b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.test.ts
index fd40da9bd..462e3e9f1 100644
--- a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.test.ts
+++ b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.test.ts
@@ -10,44 +10,46 @@ import { FormBuilderField } from "../../types";
 
 function getSampleFormBuilder() {
 	return fixture<FFormBuilder>(
-		html` <f-form-builder .field=${{
-			type: "object",
-			direction: "horizontal",
-			isCollapsible: false,
-			isCollapsed: true,
-			label: {
-				title: "Object field form",
-				description: "showing object field"
-			},
-			fields: {
-				firstname: {
-					type: "text",
-					validationRules: [
-						{
-							name: "required"
-						}
-					]
+		html` <f-form-builder .field=${
+			{
+				type: "object",
+				direction: "horizontal",
+				isCollapsible: false,
+				isCollapsed: true,
+				label: {
+					title: "Object field form",
+					description: "showing object field"
 				},
-				lastname: {
-					type: "text"
+				fields: {
+					firstname: {
+						type: "text",
+						validationRules: [
+							{
+								name: "required"
+							}
+						]
+					},
+					lastname: {
+						type: "text"
+					}
 				}
-			}
-		} as FormBuilderField
-			} .values=${{
-				firstname: "Tony",
-				lastname: "Stark"
-			}}></f-checkbox> `
+			} as FormBuilderField
+		} .values=${{
+			firstname: "Tony",
+			lastname: "Stark"
+		}}></f-checkbox> `
 	);
 }
 function getSampleArrayFieldFormBuilder() {
 	return fixture<FFormBuilder>(
-		html` <f-form-builder .field=${{
-			type: "array",
-			field: {
-				type: "text"
-			}
-		} as FormBuilderField
-			} .values=${["username1", "username2"]}></f-checkbox> `
+		html` <f-form-builder .field=${
+			{
+				type: "array",
+				field: {
+					type: "text"
+				}
+			} as FormBuilderField
+		} .values=${["username1", "username2"]}></f-checkbox> `
 	);
 }
 describe("f-form-builder", () => {
@@ -171,187 +173,188 @@ describe("f-form-builder", () => {
 	});
 	it("should test snapshot of all fields", async function () {
 		const el = await fixture<FFormBuilder>(
-			html` <f-form-builder .field=${{
-				type: "object",
-				direction: "vertical",
-				fieldSeparator: true,
-				label: {
-					title: "Object level label",
-					description: "following fields are used for demo purpose only"
-				},
-				fields: {
-					selectBox: {
-						label: {
-							title: "Select multiple option to test"
-						},
-						selection: "multiple",
-						options: ["option 1", "option 2", "option 3"],
-						type: "select",
-						placeholder: "This is a placeholder",
-						iconLeft: "i-app",
-						disabled: false,
-						clear: true,
-						validationRules: [
-							{
-								name: "required"
-							}
-						]
-					},
-					textField: {
-						qaId: "testFieldQA",
-						type: "text",
-						helperText: "This field is a required field",
-						suffix: "recommended",
-						suffixWhen: (value: string) => {
-							return value === "vikas";
-						},
-						validationRules: [
-							{
-								name: "required"
-							}
-						]
+			html` <f-form-builder .field=${
+				{
+					type: "object",
+					direction: "vertical",
+					fieldSeparator: true,
+					label: {
+						title: "Object level label",
+						description: "following fields are used for demo purpose only"
 					},
-					eventTestField: {
-						qaId: "eventTestField",
-						type: "text",
-						helperText: "This field is a required field",
-						validationRules: [
-							{
-								name: "required"
-							}
-						],
-						showWhen: values => {
-							return (values as Record<string, string>)?.textField === "vikas";
-						},
-						onClick: (event: PointerEvent) => {
-							console.log("onClick callback triggered", event);
-						},
-						onInput: (event: Event) => {
-							console.log("onInput callback triggered", event);
-						},
-						onFocus: (event: FocusEvent) => {
-							console.log("onFocus callback triggered", event);
-						},
-						onKeyPress: (event: KeyboardEvent) => {
-							console.log("onKeyPress callback triggered", event);
-						},
-						onKeyDown: (event: KeyboardEvent) => {
-							console.log("onKeyDown callback triggered", event);
+					fields: {
+						selectBox: {
+							label: {
+								title: "Select multiple option to test"
+							},
+							selection: "multiple",
+							options: ["option 1", "option 2", "option 3"],
+							type: "select",
+							placeholder: "This is a placeholder",
+							iconLeft: "i-app",
+							disabled: false,
+							clear: true,
+							validationRules: [
+								{
+									name: "required"
+								}
+							]
 						},
-						onKeyUp: (event: KeyboardEvent) => {
-							console.log("onKeyUp callback triggered", event);
+						textField: {
+							qaId: "testFieldQA",
+							type: "text",
+							helperText: "This field is a required field",
+							suffix: "recommended",
+							suffixWhen: (value: string) => {
+								return value === "vikas";
+							},
+							validationRules: [
+								{
+									name: "required"
+								}
+							]
 						},
-						onMouseOver: (event: MouseEvent) => {
-							console.log("onMouseOver callback triggered", event);
-						}
-					},
-
-					switchButton: {
-						type: "switchButton",
-						validationRules: [
-							{
-								name: "required"
+						eventTestField: {
+							qaId: "eventTestField",
+							type: "text",
+							helperText: "This field is a required field",
+							validationRules: [
+								{
+									name: "required"
+								}
+							],
+							showWhen: values => {
+								return (values as Record<string, string>)?.textField === "vikas";
+							},
+							onClick: (event: PointerEvent) => {
+								console.log("onClick callback triggered", event);
+							},
+							onInput: (event: Event) => {
+								console.log("onInput callback triggered", event);
+							},
+							onFocus: (event: FocusEvent) => {
+								console.log("onFocus callback triggered", event);
+							},
+							onKeyPress: (event: KeyboardEvent) => {
+								console.log("onKeyPress callback triggered", event);
+							},
+							onKeyDown: (event: KeyboardEvent) => {
+								console.log("onKeyDown callback triggered", event);
+							},
+							onKeyUp: (event: KeyboardEvent) => {
+								console.log("onKeyUp callback triggered", event);
+							},
+							onMouseOver: (event: MouseEvent) => {
+								console.log("onMouseOver callback triggered", event);
 							}
-						]
-					},
-					radio: {
-						type: "radio",
-						label: {
-							title: "Radios"
 						},
-						// helperText: "This field is required",
-						options: [
-							{ id: "or", title: "Orange", iconTooltip: "hello" },
-							{
-								id: "banannaId",
-								iconTooltip: "hello",
-								description: "Check if you like Banana"
-							}
-						],
-						validationRules: [
-							{
-								name: "required"
-							}
-						]
-					},
 
-					checkboxField: {
-						type: "checkbox",
-						direction: "horizontal",
-						label: {
-							title: "Check/Uncheck options",
-							description: "this my checkbox"
+						switchButton: {
+							type: "switchButton",
+							validationRules: [
+								{
+									name: "required"
+								}
+							]
 						},
-						// helperText: "This field is required",
-						options: [
-							{
-								id: "or",
-								title: "Orange",
-								iconTooltip: "hello",
-								description: "Orange has Vitamin C"
+						radio: {
+							type: "radio",
+							label: {
+								title: "Radios"
 							},
-							{
-								id: "banannaId",
-								iconTooltip: "hello",
-								description: "Banana is cheap but rich in fiber"
-							}
-						],
-						validationRules: [
-							{
-								name: "required"
-							}
-						]
-					},
-					textAreaField: {
-						type: "textarea",
-						placeholder: "This is a placeholder",
-						maxLength: 100,
-						disabled: false,
-						readonly: false,
-						clear: true,
-						validationRules: [
-							{
-								name: "required"
-							}
-						]
-					},
-					nestedObject: {
-						type: "object",
-						fields: {
-							username: {
-								type: "text",
-								validationRules: [{ name: "required" }]
+							// helperText: "This field is required",
+							options: [
+								{ id: "or", title: "Orange", iconTooltip: "hello" },
+								{
+									id: "banannaId",
+									iconTooltip: "hello",
+									description: "Check if you like Banana"
+								}
+							],
+							validationRules: [
+								{
+									name: "required"
+								}
+							]
+						},
+
+						checkboxField: {
+							type: "checkbox",
+							direction: "horizontal",
+							label: {
+								title: "Check/Uncheck options",
+								description: "this my checkbox"
 							},
-							email: {
-								type: "text",
-								validationRules: [{ name: "required" }, { name: "email" }]
-							}
-						}
-					},
-					nestedArray: {
-						type: "array",
-						label: {
-							title: "This is array"
+							// helperText: "This field is required",
+							options: [
+								{
+									id: "or",
+									title: "Orange",
+									iconTooltip: "hello",
+									description: "Orange has Vitamin C"
+								},
+								{
+									id: "banannaId",
+									iconTooltip: "hello",
+									description: "Banana is cheap but rich in fiber"
+								}
+							],
+							validationRules: [
+								{
+									name: "required"
+								}
+							]
 						},
-						field: {
-							type: "text",
+						textAreaField: {
+							type: "textarea",
+							placeholder: "This is a placeholder",
+							maxLength: 100,
+							disabled: false,
+							readonly: false,
+							clear: true,
 							validationRules: [
 								{
 									name: "required"
 								}
 							]
+						},
+						nestedObject: {
+							type: "object",
+							fields: {
+								username: {
+									type: "text",
+									validationRules: [{ name: "required" }]
+								},
+								email: {
+									type: "text",
+									validationRules: [{ name: "required" }, { name: "email" }]
+								}
+							}
+						},
+						nestedArray: {
+							type: "array",
+							label: {
+								title: "This is array"
+							},
+							field: {
+								type: "text",
+								validationRules: [
+									{
+										name: "required"
+									}
+								]
+							}
+						},
+						getButton: {
+							type: "button",
+							label: "get",
+							iconLeft: "i-arrow-rotate"
 						}
-					},
-					getButton: {
-						type: "button",
-						label: "get",
-						iconLeft: "i-arrow-rotate"
 					}
-				}
-			} as FormBuilderField
-				} .values=${{
-					textField: "vikas"
-				}}></f-checkbox> `
+				} as FormBuilderField
+			} .values=${{
+				textField: "vikas"
+			}}></f-checkbox> `
 		);
 
 		await el.updateComplete;
diff --git a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts
index 64348bdd0..def4da39a 100644
--- a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts
+++ b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts
@@ -135,7 +135,7 @@ export class FFormBuilder extends FRoot {
 				@keyup=${this.handleKeyUp}
 			>
 				${this.label
-				? html`<f-div gap="x-small" direction="column" width="fill-container">
+					? html`<f-div gap="x-small" direction="column" width="fill-container">
 							<f-div gap="small" direction="row">
 								<f-div height="hug-content" width="hug-content">
 									<f-text variant="heading" size="medium" weight="medium" state="default">
@@ -143,27 +143,27 @@ export class FFormBuilder extends FRoot {
 									</f-text>
 								</f-div>
 								${this.label?.iconTooltip
-						? html` <f-icon
+									? html` <f-icon
 											source="i-question-filled"
 											size="small"
 											state="subtle"
 											.tooltip="${this.label?.iconTooltip}"
 											clickable
 									  ></f-icon>`
-						: ""}
+									: ""}
 							</f-div>
 							${this.label?.description
-						? html` <f-div height="hug-content" width="hug-content">
+								? html` <f-div height="hug-content" width="hug-content">
 										<f-text variant="para" size="small" weight="regular">
 											${this.label.description}
 										</f-text>
 								  </f-div>`
-						: ""}
+								: ""}
 					  </f-div>`
-				: ``}
+					: ``}
 				${this.field
-				? fieldRenderer[this.field.type](this.name, this.field, this.fieldRef, this.values)
-				: nothing}
+					? fieldRenderer[this.field.type](this.name, this.field, this.fieldRef, this.values)
+					: nothing}
 				<slot @click=${this.checkSubmit}></slot>
 			</f-form>
 		`;
diff --git a/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts b/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts
index 9d9d46110..516c70eb8 100644
--- a/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts
+++ b/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts
@@ -116,11 +116,11 @@ export class FFormObject extends FRoot {
 			this.fieldRefs[fieldname] = fieldRef;
 			fieldTemplates.push(html`
 				${fieldRenderer[fieldConfig.type](
-				fieldname,
-				fieldConfig,
-				fieldRef,
-				this.getFieldValue(fieldname)
-			)}
+					fieldname,
+					fieldConfig,
+					fieldRef,
+					this.getFieldValue(fieldname)
+				)}
 				${this.config.fieldSeparator && idx < fieldArray.length - 1
 					? html`<f-divider id="${fieldname}-divider"></f-divider>`
 					: ""}
@@ -141,7 +141,7 @@ export class FFormObject extends FRoot {
 
 			<slot name="help">
 				${this.config.helperText
-				? html`<f-text
+					? html`<f-text
 							variant="para"
 							size="small"
 							weight="regular"
@@ -149,7 +149,7 @@ export class FFormObject extends FRoot {
 							.state=${this.config.state ?? "secondary"}
 							>${this.config?.helperText}</f-text
 					  >`
-				: nothing}
+					: nothing}
 			</slot>
 		</f-div>`;
 	}
diff --git a/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts b/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts
index 161abaa34..0252e0fa7 100644
--- a/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts
+++ b/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts
@@ -117,7 +117,7 @@ export class FRadioGroup extends FRoot {
 				</f-div>
 				<div class="f-radio-group" gap=${this.gap} direction=${this.direction}>
 					${this.options?.map(
-			item => html`
+						item => html`
 							<f-radio
 								data-qa-element-id=${item.qaId ?? item.id}
 								.value=${this.isChecked(item)}
@@ -127,8 +127,8 @@ export class FRadioGroup extends FRoot {
 							>
 								<f-div slot="label" padding="none" gap="none">
 									${typeof item.title === "object"
-					? item.title
-					: html`<f-text
+										? item.title
+										: html`<f-text
 												weight="regular"
 												data-qa-label-for=${item.title ?? item.id}
 												size="small"
@@ -136,16 +136,16 @@ export class FRadioGroup extends FRoot {
 										  >`}
 								</f-div>
 								${item.description
-					? html` <f-div
+									? html` <f-div
 											slot="description"
 											data-qa-description-for=${item.title ?? item.id}
 											padding="none"
 											gap="none"
 											>${item.description}</f-div
 									  >`
-					: ""}
+									: ""}
 								${item.iconTooltip
-					? html`
+									? html`
 											<f-icon
 												data-qa-info-icon-for=${item.title ?? item.id}
 												slot="icon-tooltip"
@@ -156,20 +156,20 @@ export class FRadioGroup extends FRoot {
 												clickable
 											></f-icon>
 									  `
-					: ""}
+									: ""}
 								${item?.subTitle
-					? html`
+									? html`
 											<f-text size="small" slot="subtitle" align="right" state="secondary"
 												>${item?.subTitle}</f-text
 											>
 									  `
-					: ""}
+									: ""}
 							</f-radio>
 						`
-		)}
+					)}
 				</div>
 				${this?.helperText
-				? html`<f-text
+					? html`<f-text
 							variant="para"
 							size="small"
 							weight="regular"
@@ -177,7 +177,7 @@ export class FRadioGroup extends FRoot {
 							.state=${this.state}
 							>${this?.helperText}</f-text
 					  >`
-				: html`<slot name="help"></slot>`}
+					: html`<slot name="help"></slot>`}
 			</f-div>
 		`;
 	}
diff --git a/packages/flow-form-builder/src/modules/helpers.ts b/packages/flow-form-builder/src/modules/helpers.ts
index 98a4d5ec3..19f02c8c0 100644
--- a/packages/flow-form-builder/src/modules/helpers.ts
+++ b/packages/flow-form-builder/src/modules/helpers.ts
@@ -124,14 +124,14 @@ export function getSlots(
 				>${field.label.title}</f-div
 		  >`
 		: name
-			? html`<f-div
+		? html`<f-div
 				slot="label"
 				padding="none"
 				gap="none"
 				data-qa-label-for=${ifDefined(field.qaId || field.id)}
 				>${name}</f-div
 		  >`
-			: nothing;
+		: nothing;
 
 	const description = field.label?.description
 		? html` <f-div slot="description" padding="none" gap="none">${field.label.description}</f-div>`
@@ -156,10 +156,10 @@ export function getSlots(
 	}
 	return html` ${label}${subTitle}
 	${field.helperText
-			? html`<f-div slot="help" data-qa-help-for=${ifDefined(field.qaId || field.id)}
+		? html`<f-div slot="help" data-qa-help-for=${ifDefined(field.qaId || field.id)}
 				>${field.helperText}
 		  </f-div>`
-			: nothing}`;
+		: nothing}`;
 }
 
 export function getLabelLeftLayout(
diff --git a/packages/flow-form-builder/src/types.ts b/packages/flow-form-builder/src/types.ts
index 639fc3f4e..bf5139f24 100644
--- a/packages/flow-form-builder/src/types.ts
+++ b/packages/flow-form-builder/src/types.ts
@@ -405,11 +405,11 @@ export type FormBuilderValues =
 
 export type ValidationResults = (
 	| {
-		result: boolean;
-		message: string | null;
-		name: string;
-		rule: FormBuilderGenericValidationRule["name"];
-	}
+			result: boolean;
+			message: string | null;
+			name: string;
+			rule: FormBuilderGenericValidationRule["name"];
+	  }
 	| ValidationResults
 )[];
 
diff --git a/packages/flow-lineage/package.json b/packages/flow-lineage/package.json
index 703f3c59d..a8d7b25f6 100644
--- a/packages/flow-lineage/package.json
+++ b/packages/flow-lineage/package.json
@@ -61,4 +61,4 @@
   "homepage": "https://github.com/ollionorg/flow-core#readme",
   "author": "@nonfx",
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/packages/flow-lineage/src/components/f-lineage/draw/draw-links.ts b/packages/flow-lineage/src/components/f-lineage/draw/draw-links.ts
index e534a23aa..862f5d0e0 100644
--- a/packages/flow-lineage/src/components/f-lineage/draw/draw-links.ts
+++ b/packages/flow-lineage/src/components/f-lineage/draw/draw-links.ts
@@ -60,9 +60,11 @@ export default function drawLinks({
 				d.source.level - d.target.level > 1 || d.target.level - d.source.level > 1;
 
 			const isBackwardLink = d.target.level <= d.source.level;
-			return `link lineage-element ${d.source.isChildren || d.target.isChildren || isDashedLink(d) ? "child-link" : ""
-				} ${isDistantLink ? "distant-link" : ""} ${isBackwardLink ? "backward-link" : "forward-link"
-				}`;
+			return `link lineage-element ${
+				d.source.isChildren || d.target.isChildren || isDashedLink(d) ? "child-link" : ""
+			} ${isDistantLink ? "distant-link" : ""} ${
+				isBackwardLink ? "backward-link" : "forward-link"
+			}`;
 		})
 		.attr("d", d => {
 			return drawElbow({
@@ -230,8 +232,9 @@ export default function drawLinks({
 	links
 		.append("text")
 		.attr("class", d => {
-			return `link-arrow lineage-element ${d.source.isChildren || d.target.isChildren ? "child-link" : ""
-				}`;
+			return `link-arrow lineage-element ${
+				d.source.isChildren || d.target.isChildren ? "child-link" : ""
+			}`;
 		})
 		.attr("id", function (d) {
 			return `${d.id}~arrow`;
diff --git a/packages/flow-log/package.json b/packages/flow-log/package.json
index 6950369ba..807a1a178 100644
--- a/packages/flow-log/package.json
+++ b/packages/flow-log/package.json
@@ -62,4 +62,4 @@
   "homepage": "https://github.com/ollionorg/flow-table#readme",
   "author": "@nonfx",
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/packages/flow-md-editor/package.json b/packages/flow-md-editor/package.json
index 5e6a74ad5..d9200fcaa 100644
--- a/packages/flow-md-editor/package.json
+++ b/packages/flow-md-editor/package.json
@@ -59,4 +59,4 @@
   "homepage": "https://github.com/ollionorg/flow-core",
   "author": "@nonfx",
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/packages/flow-table/package.json b/packages/flow-table/package.json
index 927ec2971..af0857c09 100644
--- a/packages/flow-table/package.json
+++ b/packages/flow-table/package.json
@@ -59,4 +59,4 @@
   "homepage": "https://github.com/ollionorg/flow-table#readme",
   "author": "@nonfx",
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts
index 0cfdd7d00..f022ef2c9 100644
--- a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts
+++ b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts
@@ -216,18 +216,18 @@ export class FTableSchema extends FRoot {
 		return this.data?.header
 			? html`<f-trow slot="header" part="header">
 					${Object.entries(this.data.header).map((columnHeader, idx) => {
-				let width = undefined;
-				let selected = false;
-				let sticky = undefined;
-				if (typeof columnHeader[1] === "object") {
-					if (columnHeader[1].width) {
-						width = columnHeader[1].width;
-					}
-					selected = columnHeader[1].selected ?? false;
-					sticky = columnHeader[1].sticky;
-				}
+						let width = undefined;
+						let selected = false;
+						let sticky = undefined;
+						if (typeof columnHeader[1] === "object") {
+							if (columnHeader[1].width) {
+								width = columnHeader[1].width;
+							}
+							selected = columnHeader[1].selected ?? false;
+							sticky = columnHeader[1].sticky;
+						}
 
-				return html`<f-tcell
+						return html`<f-tcell
 							part="cell"
 							role="columnheader"
 							.selected=${selected}
@@ -240,14 +240,14 @@ export class FTableSchema extends FRoot {
 							?sticky-top=${this.stickyHeader}
 							@selected-column=${this.handleColumnSelection}
 							@update-row-selection=${(event: CustomEvent<boolean>) =>
-						this.handleHeaderInput(event, columnHeader[1])}
+								this.handleHeaderInput(event, columnHeader[1])}
 						>
 							<f-div .align=${columnHeader[1].align} gap="small" height="100%" width="fit-content">
 								${this.getHeaderCellTemplate(columnHeader[1])}
 								${columnHeader[1].disableSort ? nothing : this.getSortIcon(columnHeader[0])}</f-div
 							></f-tcell
 						>`;
-			})}
+					})}
 			  </f-trow>`
 			: nothing;
 	}
@@ -279,27 +279,27 @@ export class FTableSchema extends FRoot {
 				>
 					${getDetailsSlot()}
 					${Object.entries(this.data.header).map((columnHeader, cdx) => {
-					let width = undefined;
-					let selected = false;
-					let sticky = undefined;
-					let actions = undefined;
-					if (typeof columnHeader[1] === "object") {
-						if (columnHeader[1].width) {
-							width = columnHeader[1].width;
+						let width = undefined;
+						let selected = false;
+						let sticky = undefined;
+						let actions = undefined;
+						if (typeof columnHeader[1] === "object") {
+							if (columnHeader[1].width) {
+								width = columnHeader[1].width;
+							}
+							selected = columnHeader[1].selected ?? false;
+							sticky = columnHeader[1].sticky;
 						}
-						selected = columnHeader[1].selected ?? false;
-						sticky = columnHeader[1].sticky;
-					}
-					const cell = row.data[columnHeader[0]];
+						const cell = row.data[columnHeader[0]];
 
-					actions = cell.actions;
+						actions = cell.actions;
 
-					let highlightTerm = columnHeader[0] === this.searchScope ? this.searchTerm : null;
-					if (this.searchScope === "all") {
-						highlightTerm = this.searchTerm;
-					}
+						let highlightTerm = columnHeader[0] === this.searchScope ? this.searchTerm : null;
+						if (this.searchScope === "all") {
+							highlightTerm = this.searchTerm;
+						}
 
-					return html`<f-tcell
+						return html`<f-tcell
 							part="cell"
 							.selected=${selected}
 							aria-colindex="${cdx + 1}"
@@ -310,7 +310,7 @@ export class FTableSchema extends FRoot {
 							?sticky-left=${sticky}
 							>${this.getCellTemplate(row.data[columnHeader[0]], highlightTerm)}
 						</f-tcell>`;
-				})}
+					})}
 				</f-trow>`;
 			}
 		);
@@ -450,7 +450,7 @@ export class FTableSchema extends FRoot {
 		return html`
 			<slot name="search">
 				${this.showSearchBar
-				? html`<f-div
+					? html`<f-div
 							padding="medium none"
 							style="position: sticky;left: 0px;z-index:3;"
 							.width=${this.offsetWidth ? `${this.offsetWidth}px` : `100%`}
@@ -464,7 +464,7 @@ export class FTableSchema extends FRoot {
 								@input=${this.search}
 							></f-search>
 					  </f-div>`
-				: nothing}
+					: nothing}
 			</slot>
 			<div class="f-table-schema-wrapper">
 				<f-table
@@ -507,7 +507,7 @@ export class FTableSchema extends FRoot {
 			// offset difference added , instead of exact equal
 			if (
 				this.fTableWrapper.scrollHeight -
-				(this.fTableWrapper.scrollTop + this.fTableWrapper.offsetHeight) <
+					(this.fTableWrapper.scrollTop + this.fTableWrapper.offsetHeight) <
 				24
 			) {
 				if (this.filteredRows.length !== this.searchedRows.length) {
diff --git a/packages/flow-table/src/components/f-table/f-table.test.ts b/packages/flow-table/src/components/f-table/f-table.test.ts
index 67f383cb7..16d1181e0 100644
--- a/packages/flow-table/src/components/f-table/f-table.test.ts
+++ b/packages/flow-table/src/components/f-table/f-table.test.ts
@@ -19,18 +19,18 @@ describe("f-table", () => {
 			html`<f-table .selectable=${"multiple"}>
 				<f-trow slot="header">
 					${[1, 2, 3, 4, 5].map(cellNumber => {
-				return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-			})}
+						return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+					})}
 				</f-trow>
 				${[1, 2].map(_rowNumber => {
-				return html`<f-trow selected>
+					return html`<f-trow selected>
 						${[1, 2, 3, 4, 5].map(cellNumber => {
-					return html`<f-tcell class=${cellNumber === 1 ? "test-checkbox" : ""}>
+							return html`<f-tcell class=${cellNumber === 1 ? "test-checkbox" : ""}>
 								<f-text> Column ${cellNumber} </f-text>
 							</f-tcell>`;
-				})}
+						})}
 					</f-trow>`;
-			})}
+				})}
 			</f-table>`
 		);
 		await el.updateComplete;
diff --git a/packages/flow-table/src/components/f-tcell/f-tcell.test.ts b/packages/flow-table/src/components/f-tcell/f-tcell.test.ts
index 6725f24f8..ca84147b3 100644
--- a/packages/flow-table/src/components/f-tcell/f-tcell.test.ts
+++ b/packages/flow-table/src/components/f-tcell/f-tcell.test.ts
@@ -21,10 +21,10 @@ describe("f-tcell", () => {
 					<f-tcell
 						id="cell-to-test"
 						.actions=${[
-					{ icon: "i-copy", onClick: () => console.log("i-launch clicked") },
-					{ icon: "i-git-branch", onClick: () => console.log("i-launch clicked") },
-					{ icon: "i-launch", onClick: () => console.log("i-launch clicked") }
-				]}
+							{ icon: "i-copy", onClick: () => console.log("i-launch clicked") },
+							{ icon: "i-git-branch", onClick: () => console.log("i-launch clicked") },
+							{ icon: "i-launch", onClick: () => console.log("i-launch clicked") }
+						]}
 					>
 						<f-text> Column </f-text>
 					</f-tcell> </f-trow
diff --git a/packages/flow-table/src/components/f-tcell/f-tcell.ts b/packages/flow-table/src/components/f-tcell/f-tcell.ts
index 76b351374..261d42acb 100644
--- a/packages/flow-table/src/components/f-tcell/f-tcell.ts
+++ b/packages/flow-table/src/components/f-tcell/f-tcell.ts
@@ -128,22 +128,22 @@ export class FTcell extends FRoot {
 		return html`<div class="f-tcell-wrapper">
 			<f-div .align=${this.align} height="100%" class="f-tcell-content">
 				${this.selectable === "multiple"
-				? html`<f-checkbox
+					? html`<f-checkbox
 							?disabled=${this.isDisabled}
 							@click=${(event: PointerEvent) => event.stopPropagation()}
 							@input=${this.handleSelection}
 					  ></f-checkbox>`
-				: nothing}
+					: nothing}
 				${this.selectable === "single"
-				? html`<f-radio
+					? html`<f-radio
 							?disabled=${this.isDisabled}
 							@input=${this.handleSelection}
 							@click=${(event: PointerEvent) => event.stopPropagation()}
 							class="cell-radio"
 					  ></f-radio>`
-				: nothing}
+					: nothing}
 				${this.expandIcon && this.expandIconPosition === "left"
-				? html`
+					? html`
 							<f-icon-button
 								size="medium"
 								category="packed"
@@ -153,7 +153,7 @@ export class FTcell extends FRoot {
 								icon="i-chevron-down"
 							></f-icon-button>
 					  `
-				: nothing}
+					: nothing}
 				<f-div .align=${this.align}><slot></slot></f-div>
 			</f-div>
 			<f-div
@@ -165,7 +165,7 @@ export class FTcell extends FRoot {
 			>
 				${this.renderActions()}
 				${this.expandIcon && this.expandIconPosition === "right"
-				? html`
+					? html`
 							<f-icon-button
 								size="medium"
 								category="packed"
@@ -175,7 +175,7 @@ export class FTcell extends FRoot {
 								icon="i-chevron-down"
 							></f-icon-button>
 					  `
-				: nothing}
+					: nothing}
 			</f-div>
 		</div>`;
 	}
diff --git a/packages/flow-text-editor/package.json b/packages/flow-text-editor/package.json
index 4061dd577..338fc4298 100644
--- a/packages/flow-text-editor/package.json
+++ b/packages/flow-text-editor/package.json
@@ -58,4 +58,4 @@
   "homepage": "https://github.com/ollionorg/flow-core",
   "author": "@nonfx",
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/stories/flow-core/f-accordion.stories.js b/stories/flow-core/f-accordion.stories.js
index b7555cbeb..dcc19abfa 100644
--- a/stories/flow-core/f-accordion.stories.js
+++ b/stories/flow-core/f-accordion.stories.js
@@ -81,7 +81,7 @@ export const Playground = {
 				<f-div><f-text variant="para" size="small" weight="bold">Requester details</f-text></f-div>
 				<f-div slot="body" direction="column">
 					${Object.entries(metaData).map(
-			([name, value]) => html`
+						([name, value]) => html`
 							<f-div direction="row" padding="small none" height="hug-content">
 								<f-div width="33%"
 									><f-text variant="para" size="small" weight="regular" state="secondary"
@@ -89,7 +89,7 @@ export const Playground = {
 									></f-div
 								>
 								${value.type === "label-text"
-					? html` <f-div align="middle-left" gap="x-small">
+									? html` <f-div align="middle-left" gap="x-small">
 											<f-pictogram
 												variant="circle"
 												size="small"
@@ -100,26 +100,26 @@ export const Playground = {
 												>${value.value}</f-text
 											></f-div
 									  >`
-					: value.type === "text"
-						? html` <f-div
+									: value.type === "text"
+									? html` <f-div
 											><f-text variant="para" size="small" weight="regular"
 												>${value.value}</f-text
 											></f-div
 									  >`
-						: html` <f-div direction="column" gap="small" align="middle-center">
+									: html` <f-div direction="column" gap="small" align="middle-center">
 											${value.value.map(
-							item =>
-								html` <f-div gap="x-small">
+												item =>
+													html` <f-div gap="x-small">
 														<f-icon .source=${item.icon} size="small" clickable></f-icon>
 														<f-text ?inline=${true} variant="para" size="small" weight="medium"
 															>${item.name}</f-text
 														>
 													</f-div>`
-						)}
+											)}
 									  </f-div>`}
 							</f-div>
 						`
-		)}
+					)}
 				</f-div>
 			</f-accordion>
 		</f-div>`;
@@ -182,8 +182,8 @@ export const Icon = {
 
 		return html`<f-div direction="column"
 			>${icons.map(
-			item =>
-				html`<f-accordion .open=${true} .icon=${item}>
+				item =>
+					html`<f-accordion .open=${true} .icon=${item}>
 							<f-div
 								><f-text variant="para" size="small" weight="bold">Requester details</f-text></f-div
 							>
@@ -198,7 +198,7 @@ export const Icon = {
 							</f-div>
 						</f-accordion>
 						<f-divider></f-divider> `
-		)}</f-div
+			)}</f-div
 		>`;
 	},
 
@@ -211,8 +211,8 @@ export const IconSize = {
 
 		return html`<f-div
 			>${icons.map(
-			item =>
-				html`<f-div direction="column" padding="x-large"
+				item =>
+					html`<f-div direction="column" padding="x-large"
 						><f-accordion .open=${true} icon-size=${item}>
 							<f-div
 								><f-text variant="para" size="small" weight="bold">Requester details</f-text></f-div
@@ -225,7 +225,7 @@ export const IconSize = {
 							</f-div>
 						</f-accordion></f-div
 					>`
-		)}</f-div
+			)}</f-div
 		>`;
 	},
 
@@ -238,8 +238,8 @@ export const IconPlacement = {
 
 		return html`<f-div
 			>${icons.map(
-			item =>
-				html`<f-div direction="column" padding="x-large"
+				item =>
+					html`<f-div direction="column" padding="x-large"
 						><f-accordion .open=${true} icon-placement=${item}>
 							<f-div
 								><f-text variant="para" size="small" weight="bold">Requester details</f-text></f-div
@@ -252,7 +252,7 @@ export const IconPlacement = {
 							</f-div>
 						</f-accordion></f-div
 					>`
-		)}</f-div
+			)}</f-div
 		>`;
 	},
 
@@ -287,8 +287,8 @@ export const Flags = {
 
 		return html`<f-div
 			>${icons.map(
-			item =>
-				html`<f-div direction="column" padding="x-large"
+				item =>
+					html`<f-div direction="column" padding="x-large"
 						><f-accordion .open=${item}>
 							<f-div
 								><f-text variant="para" size="small" weight="bold"
@@ -303,7 +303,7 @@ export const Flags = {
 							</f-div>
 						</f-accordion></f-div
 					>`
-		)}</f-div
+			)}</f-div
 		>`;
 	},
 
diff --git a/stories/flow-core/f-breadcrumb.stories.ts b/stories/flow-core/f-breadcrumb.stories.ts
index cd39758a0..2321603e0 100644
--- a/stories/flow-core/f-breadcrumb.stories.ts
+++ b/stories/flow-core/f-breadcrumb.stories.ts
@@ -122,12 +122,12 @@ export const Size = {
 
 		return html`<f-div padding="small" gap="x-large">
 			${data.map(
-			item =>
-				html` <f-div direction="column" gap="large"
+				item =>
+					html` <f-div direction="column" gap="large"
 						><f-text>size=${item}</f-text
 						><f-breadcrumb .crumbs=${crumbs} .size=${item}></f-breadcrumb
 					></f-div>`
-		)}
+			)}
 		</f-div>`;
 	},
 
@@ -181,12 +181,12 @@ export const Crumbs = {
 
 		return html`<f-div padding="small" gap="x-large">
 			${data.map(
-			item =>
-				html` <f-div direction="column" gap="large"
+				item =>
+					html` <f-div direction="column" gap="large"
 						><f-text>${item.length > 4 ? "Crumbs length > 4" : "Crumbs length < 4"}</f-text
 						><f-breadcrumb .crumbs=${item}></f-breadcrumb
 					></f-div>`
-		)}
+			)}
 		</f-div>`;
 	},
 
@@ -249,12 +249,12 @@ export const Variant = {
 
 		return html`<f-div padding="small" gap="x-large">
 			${data.map(
-			(item, index) =>
-				html` <f-div direction="column" gap="large"
+				(item, index) =>
+					html` <f-div direction="column" gap="large"
 						><f-text>${index === 0 ? "variant='text'" : "variant='icon'"}</f-text
 						><f-breadcrumb .crumbs=${item} .variant=${index === 0 ? "text" : "icon"}></f-breadcrumb
 					></f-div>`
-		)}
+			)}
 		</f-div>`;
 	},
 
diff --git a/stories/flow-core/f-carousel.stories.js b/stories/flow-core/f-carousel.stories.js
index fbc3a4b28..e5892fbb3 100644
--- a/stories/flow-core/f-carousel.stories.js
+++ b/stories/flow-core/f-carousel.stories.js
@@ -31,8 +31,8 @@ export const Playground = {
 				@prev=${handlePrev}
 			>
 				${["primary", "secondary", "tertiary", "warning", "danger"].map(
-			(state, idx) =>
-				html`<f-carousel-content content-id=${"slide-" + (idx + 1)}>
+					(state, idx) =>
+						html`<f-carousel-content content-id=${"slide-" + (idx + 1)}>
 							<f-div
 								height="300px"
 								width="100%"
@@ -47,7 +47,7 @@ export const Playground = {
 								>
 							</f-div>
 						</f-carousel-content>`
-		)}
+				)}
 			</f-carousel>
 		</f-div>`;
 	},
@@ -87,8 +87,8 @@ export const ActiveContentId = {
 		return html`<f-div width="100%" padding="large">
 			<f-carousel active-content-id="slide-3">
 				${["primary", "secondary", "tertiary", "warning", "danger"].map(
-			(state, idx) =>
-				html`<f-carousel-content content-id=${"slide-" + (idx + 1)}>
+					(state, idx) =>
+						html`<f-carousel-content content-id=${"slide-" + (idx + 1)}>
 							<f-div
 								height="300px"
 								width="100%"
@@ -104,7 +104,7 @@ export const ActiveContentId = {
 								<f-text size="small">active-content-id set to ${"slide-" + (idx + 1)}</f-text>
 							</f-div>
 						</f-carousel-content>`
-		)}
+				)}
 			</f-carousel>
 		</f-div>`;
 	},
@@ -117,8 +117,8 @@ export const AutoPlay = {
 		return html`<f-div width="100%" padding="large">
 			<f-carousel auto-play>
 				${["primary", "secondary", "tertiary", "warning", "danger"].map(
-			(state, idx) =>
-				html`<f-carousel-content content-id=${"slide-" + (idx + 1)}>
+					(state, idx) =>
+						html`<f-carousel-content content-id=${"slide-" + (idx + 1)}>
 							<f-div
 								height="300px"
 								width="100%"
@@ -134,7 +134,7 @@ export const AutoPlay = {
 								<f-text size="small">auto-play set to true</f-text>
 							</f-div>
 						</f-carousel-content>`
-		)}
+				)}
 			</f-carousel>
 		</f-div>`;
 	},
@@ -147,8 +147,8 @@ export const AutoPlayInterval = {
 		return html`<f-div width="100%" padding="large">
 			<f-carousel auto-play auto-play-interval="7000">
 				${["primary", "secondary", "tertiary", "warning", "danger"].map(
-			(state, idx) =>
-				html`<f-carousel-content content-id=${"slide-" + (idx + 1)}>
+					(state, idx) =>
+						html`<f-carousel-content content-id=${"slide-" + (idx + 1)}>
 							<f-div
 								height="300px"
 								width="100%"
@@ -165,7 +165,7 @@ export const AutoPlayInterval = {
 								<f-text size="small">auto-play-interval is 7000ms</f-text>
 							</f-div>
 						</f-carousel-content>`
-		)}
+				)}
 			</f-carousel>
 		</f-div>`;
 	},
diff --git a/stories/flow-core/f-checkbox.stories.js b/stories/flow-core/f-checkbox.stories.js
index 40cf343c6..0dc12d465 100644
--- a/stories/flow-core/f-checkbox.stories.js
+++ b/stories/flow-core/f-checkbox.stories.js
@@ -100,7 +100,7 @@ export const Value = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${values.map(
-			item => html`<f-div>
+					item => html`<f-div>
            <f-checkbox
               size="medium"
               .value=${item}
@@ -115,7 +115,7 @@ export const Value = {
             </f-checkbox></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -135,7 +135,7 @@ export const Size = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${sizes.map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-checkbox
               .size=${item}
               .value=${value}
@@ -150,7 +150,7 @@ export const Size = {
             </f-checkbox></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -173,11 +173,11 @@ export const State = {
 		return html`
 			<f-div direction="column" gap="medium">
 				${states.map(
-			item =>
-				html` <f-div align="middle-center" padding="large" gap="medium">
+					item =>
+						html` <f-div align="middle-center" padding="large" gap="medium">
 							${item.map(
-					state =>
-						html`<f-div
+								state =>
+									html`<f-div
 										><f-checkbox
 											size="medium"
 											.value=${value}
@@ -196,9 +196,9 @@ export const State = {
 											</f-div>
 										</f-checkbox></f-div
 									>`
-				)}
+							)}
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -217,7 +217,7 @@ export const Flags = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${[0].map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-checkbox
               size="medium"
               .value=${value}
@@ -233,7 +233,7 @@ export const Flags = {
             </f-checkbox></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-core/f-color-picker.stories.ts b/stories/flow-core/f-color-picker.stories.ts
index 3c123af11..745c9121a 100644
--- a/stories/flow-core/f-color-picker.stories.ts
+++ b/stories/flow-core/f-color-picker.stories.ts
@@ -73,8 +73,8 @@ export const Variant = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${variants.map(
-			item =>
-				html` <f-color-picker .variant=${item} size="medium">
+					item =>
+						html` <f-color-picker .variant=${item} size="medium">
 							<f-div slot="label" padding="none" gap="none">Label (variant="${item}")</f-div>
 							<f-text slot="help" variant="para" size="small"
 								>This is a Subtext (Helper Text)</f-text
@@ -84,7 +84,7 @@ export const Variant = {
 							>
 							<f-icon slot="icon-tooltip" source="i-question-filled" tooltip="some info"></f-icon>
 						</f-color-picker>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -99,14 +99,14 @@ export const Size = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${sizes.map(
-			item =>
-				html` <f-color-picker size=${item}>
+					item =>
+						html` <f-color-picker size=${item}>
 							<f-div slot="label" padding="none" gap="none">Label (size="${item}")</f-div>
 							<f-text slot="help" variant="para" size="small"
 								>This is a Subtext (Helper Text)</f-text
 							>
 						</f-color-picker>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -124,19 +124,19 @@ export const State = {
 		return html`
 			<f-div direction="column" gap="medium">
 				${states.map(
-			item =>
-				html` <f-div padding="large" gap="medium">
+					item =>
+						html` <f-div padding="large" gap="medium">
 							${item.map(
-					state =>
-						html`<f-color-picker size="medium" state=${state}>
+								state =>
+									html`<f-color-picker size="medium" state=${state}>
 										<f-div slot="label" padding="none" gap="none">Label (state="${state}")</f-div>
 										<f-text slot="help" variant="para" size="small"
 											>This is a Subtext (Helper Text)</f-text
 										>
 									</f-color-picker>`
-				)}
+							)}
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -154,14 +154,14 @@ export const Flags = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${[0, 1].map(
-			item =>
-				html` <f-color-picker size="medium" ?disabled=${item === 0} ?read-only=${item === 1}>
+					item =>
+						html` <f-color-picker size="medium" ?disabled=${item === 0} ?read-only=${item === 1}>
 							<f-div slot="label" padding="none" gap="none">${flagNames[item]}</f-div>
 							<f-text slot="help" variant="para" size="small"
 								>This is a Subtext (Helper Text)</f-text
 							>
 						</f-color-picker>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-core/f-countdown.stories.ts b/stories/flow-core/f-countdown.stories.ts
index e495e0b0a..11fef8104 100644
--- a/stories/flow-core/f-countdown.stories.ts
+++ b/stories/flow-core/f-countdown.stories.ts
@@ -107,8 +107,8 @@ export const Size = {
 		return html`
 			<f-div gap="large">
 				${sizes.map(
-			item =>
-				html` <f-div direction="column" gap="medium" align="middle-center">
+					item =>
+						html` <f-div direction="column" gap="medium" align="middle-center">
 							<f-text inline>size="${item}"</f-text>
 							<f-countdown
 								label-placement="top"
@@ -117,7 +117,7 @@ export const Size = {
 								.size=${item}
 							></f-countdown>
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -131,8 +131,8 @@ export const State = {
 		return html`
 			<f-div gap="large">
 				${states.map(
-			item =>
-				html` <f-div direction="column" gap="medium" align="middle-center">
+					item =>
+						html` <f-div direction="column" gap="medium" align="middle-center">
 							<f-text inline>state="${item}"</f-text>
 							<f-countdown
 								label-placement="top"
@@ -141,7 +141,7 @@ export const State = {
 								.state=${item}
 							></f-countdown>
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -155,8 +155,8 @@ export const Label = {
 		return html`
 			<f-div gap="large">
 				${states.map(
-			item =>
-				html` <f-div direction="column" gap="medium" align="middle-center">
+					item =>
+						html` <f-div direction="column" gap="medium" align="middle-center">
 							<f-text inline>label-placement="${item}"</f-text>
 							<f-countdown
 								label-placement="top"
@@ -166,7 +166,7 @@ export const Label = {
 								label-placement=${item}
 							></f-countdown>
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-core/f-date-time-picker.stories.js b/stories/flow-core/f-date-time-picker.stories.js
index 49b3454d1..63b316890 100644
--- a/stories/flow-core/f-date-time-picker.stories.js
+++ b/stories/flow-core/f-date-time-picker.stories.js
@@ -167,7 +167,7 @@ export const Variant = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${variants.map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-date-time-picker
             value=${value}
             @input=${handleValue}
@@ -179,7 +179,7 @@ export const Variant = {
           </f-date-time-picker></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -199,7 +199,7 @@ export const Category = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${categories.map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-date-time-picker
             value=${value}
             @input=${handleValue}
@@ -212,7 +212,7 @@ export const Category = {
           </f-date-time-picker></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -232,11 +232,11 @@ export const Mode = {
 		return html`
 			<f-div direction="column" gap="medium">
 				${types.map(
-			item =>
-				html` <f-div align="middle-center" padding="large" gap="medium">
+					item =>
+						html` <f-div align="middle-center" padding="large" gap="medium">
 							${item.map(
-					type =>
-						html`<f-div
+								type =>
+									html`<f-div
 										><f-date-time-picker
 											value=${value}
 											@input=${handleValue}
@@ -249,9 +249,9 @@ export const Mode = {
 											>
 										</f-date-time-picker></f-div
 									>`
-				)}
+							)}
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -322,7 +322,7 @@ export const Size = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${sizes.map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-date-time-picker
             value=${value}
             @input=${handleValue}
@@ -333,7 +333,7 @@ export const Size = {
           </f-date-time-picker></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -356,11 +356,11 @@ export const State = {
 		return html`
 			<f-div direction="column" gap="medium">
 				${states.map(
-			item =>
-				html` <f-div align="middle-center" padding="large" gap="medium">
+					item =>
+						html` <f-div align="middle-center" padding="large" gap="medium">
 							${item.map(
-					state =>
-						html`<f-div
+								state =>
+									html`<f-div
 										><f-date-time-picker
 											value=${value}
 											@input=${handleValue}
@@ -373,9 +373,9 @@ export const State = {
 											>
 										</f-date-time-picker></f-div
 									>`
-				)}
+							)}
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -471,11 +471,11 @@ export const DisableDate = {
 						@input=${handleValue}
 						size="medium"
 						.disable-date=${[
-				{
-					from: new Date(),
-					to: new Date().fp_incr(8)
-				}
-			]}
+							{
+								from: new Date(),
+								to: new Date().fp_incr(8)
+							}
+						]}
 					>
 						<f-div slot="label" padding="none" gap="none">Label (Disable dates range)</f-div>
 						<f-div slot="description" padding="none" gap="none"
@@ -490,10 +490,10 @@ export const DisableDate = {
 						@input=${handleValue}
 						size="medium"
 						.disable-date=${[
-				function (date) {
-					return date.getDay() === 0 || date.getDay() === 6;
-				}
-			]}
+							function (date) {
+								return date.getDay() === 0 || date.getDay() === 6;
+							}
+						]}
 					>
 						<f-div slot="label" padding="none" gap="none"
 							>Label (Disable dates from function)</f-div
@@ -528,10 +528,10 @@ export const Flags = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="large" direction="column">
 				${array.map(
-			row =>
-				html`<f-div gap="medium"
+					row =>
+						html`<f-div gap="medium"
 							>${row.map(item => {
-					return html`<f-div>
+								return html`<f-div>
           <f-date-time-picker
             value=${value}
             @input=${handleValue}
@@ -543,25 +543,26 @@ export const Flags = {
       ?week-number=${item === 4}
       ?inline=${item === 5}
           >
-            <f-div slot="label" padding="none" gap="none">${item === 0
-							? "Loader"
-							: item === 1
+            <f-div slot="label" padding="none" gap="none">${
+							item === 0
+								? "Loader"
+								: item === 1
 								? "Disabled"
 								: item === 2
-									? "Clear Icon on Type"
-									: item === 3
-										? "Range Calendar"
-										: item === 4
-											? "Week Numbers Display"
-											: "Inline"
+								? "Clear Icon on Type"
+								: item === 3
+								? "Range Calendar"
+								: item === 4
+								? "Week Numbers Display"
+								: "Inline"
 						}</f-div>
             <f-text slot="help" variant="para" size="small">This is a Subtext (Helper Text)</f-text>
           </f-date-time-picker></f-div
         ></f-div
       >`;
-				})}</f-div
+							})}</f-div
 						>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-core/f-div.stories.ts b/stories/flow-core/f-div.stories.ts
index e69529633..642be6134 100644
--- a/stories/flow-core/f-div.stories.ts
+++ b/stories/flow-core/f-div.stories.ts
@@ -68,10 +68,10 @@ export const Playground = {
 								>Dynamic state f-div -> ${args.state} state
 							</f-text>
 							${args.state === "inherit"
-				? html` <f-text variant="para" size="large" weight="regular" state="inherit"
+								? html` <f-text variant="para" size="large" weight="regular" state="inherit"
 										>Inherited "success" state from its parent f-div
 								  </f-text>`
-				: null}
+								: null}
 							<f-div
 								padding="large"
 								height="hug-content"
diff --git a/stories/flow-core/f-document-viewer.stories.ts b/stories/flow-core/f-document-viewer.stories.ts
index b9ccfba15..5531a4d5c 100644
--- a/stories/flow-core/f-document-viewer.stories.ts
+++ b/stories/flow-core/f-document-viewer.stories.ts
@@ -127,8 +127,8 @@ export const JumpLinks = {
 					><f-button
 						label=${`jump-links=${jumpLinks}`}
 						@click=${() => {
-				setJumpLinks(!jumpLinks);
-			}}
+							setJumpLinks(!jumpLinks);
+						}}
 					></f-button
 				></f-div>
 				<f-div>
@@ -154,8 +154,8 @@ export const CollapsibleJumpLinks = {
 					><f-button
 						label=${`collpasible-jump-links=${collapsibleJumpLinks}`}
 						@click=${() => {
-				setCollapsibleJumpLinks(!collapsibleJumpLinks);
-			}}
+							setCollapsibleJumpLinks(!collapsibleJumpLinks);
+						}}
 					></f-button
 				></f-div>
 				<f-div>
@@ -180,8 +180,8 @@ export const LevelSelector = {
 					><f-button
 						label=${`level-selector=${levelSelector}`}
 						@click=${() => {
-				setLevelSelector(!levelSelector);
-			}}
+							setLevelSelector(!levelSelector);
+						}}
 					></f-button
 				></f-div>
 				<f-div>
diff --git a/stories/flow-core/f-emoji-picker.stories.js b/stories/flow-core/f-emoji-picker.stories.js
index 50667c6db..e9cd58082 100644
--- a/stories/flow-core/f-emoji-picker.stories.js
+++ b/stories/flow-core/f-emoji-picker.stories.js
@@ -166,7 +166,7 @@ export const Variant = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${variants.map(
-			item => html`<f-div width="hug-content">
+					item => html`<f-div width="hug-content">
       <f-emoji-picker
       value=${value}
             @input=${handleValue}
@@ -178,7 +178,7 @@ export const Variant = {
       </f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -198,7 +198,7 @@ export const Category = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${categories.map(
-			item => html`<f-div width="hug-content">
+					item => html`<f-div width="hug-content">
           <f-emoji-picker
             value=${value}
             @input=${handleValue}
@@ -211,7 +211,7 @@ export const Category = {
           </f-emoji-picker></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -277,7 +277,7 @@ export const Size = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${sizes.map(
-			item => html`<f-div width="hug-content">
+					item => html`<f-div width="hug-content">
           <f-emoji-picker
             value=${value}
             @input=${handleValue}
@@ -288,7 +288,7 @@ export const Size = {
           </f-emoji-picker></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -311,11 +311,11 @@ export const State = {
 		return html`
 			<f-div direction="column" gap="medium">
 				${states.map(
-			item =>
-				html` <f-div align="middle-center" padding="large" gap="medium">
+					item =>
+						html` <f-div align="middle-center" padding="large" gap="medium">
 							${item.map(
-					state =>
-						html`<f-div width="hug-content"
+								state =>
+									html`<f-div width="hug-content"
 										><f-emoji-picker
 											value=${value}
 											@input=${handleValue}
@@ -326,9 +326,9 @@ export const State = {
 											<f-text slot="help" variant="para" size="small">Help!</f-text>
 										</f-emoji-picker></f-div
 									>`
-				)}
+							)}
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-core/f-file-upload.stories.js b/stories/flow-core/f-file-upload.stories.js
index 54e46dfad..d1b2b5213 100644
--- a/stories/flow-core/f-file-upload.stories.js
+++ b/stories/flow-core/f-file-upload.stories.js
@@ -24,8 +24,8 @@ export const Playground = {
 					updateArgs({
 						value: e.detail.value
 							? {
-								name: e.detail.value.name
-							}
+									name: e.detail.value.name
+							  }
 							: e.detail.value
 					});
 				} else {
@@ -136,8 +136,8 @@ export const Type = {
 		return html`
 			<f-div width="100%" align="top-left" padding="large" gap="medium">
 				${types.map(
-			item =>
-				html`<f-div>
+					item =>
+						html`<f-div>
 							<f-file-upload
 								.type=${item}
 								.value=${item === "single" ? value : multipleValue}
@@ -148,7 +148,7 @@ export const Type = {
 								<f-text slot="help" variant="para" size="small">This is a Subtext</f-text>
 							</f-file-upload></f-div
 						>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -178,8 +178,8 @@ export const Value = {
 		return html`
 			<f-div width="100%" align="top-left" padding="large" gap="medium">
 				${types.map(
-			item =>
-				html`<f-div>
+					item =>
+						html`<f-div>
 							<f-file-upload
 								.type=${item}
 								.value=${item === "single" ? value : multipleValue}
@@ -189,13 +189,13 @@ export const Value = {
 								<f-div slot="label" padding="none" gap="none"
 									>${item} File Selection -
 									${item === "single"
-						? "value as a file object"
-						: "value as an array of file objects"}</f-div
+										? "value as a file object"
+										: "value as an array of file objects"}</f-div
 								>
 								<f-text slot="help" variant="para" size="small">This is a Subtext</f-text>
 							</f-file-upload></f-div
 						>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -225,8 +225,8 @@ export const Placeholder = {
 		return html`
 			<f-div width="100%" align="top-left" padding="large" gap="medium">
 				${types.map(
-			item =>
-				html`<f-div>
+					item =>
+						html`<f-div>
 							<f-file-upload
 								.type=${item}
 								.value=${item === "single" ? value : multipleValue}
@@ -239,7 +239,7 @@ export const Placeholder = {
 								<f-text slot="help" variant="para" size="small">This is a Subtext</f-text>
 							</f-file-upload></f-div
 						>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -266,8 +266,8 @@ export const FileType = {
 		return html`
 			<f-div width="100%" align="top-left" padding="large" gap="medium">
 				${fileTypes.map(
-			item =>
-				html`<f-div>
+					item =>
+						html`<f-div>
 							<f-file-upload
 								type="single"
 								.value=${value}
@@ -281,7 +281,7 @@ export const FileType = {
 								<f-text slot="help" variant="para" size="small">This is a Subtext</f-text>
 							</f-file-upload></f-div
 						>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -308,8 +308,8 @@ export const Size = {
 		return html`
 			<f-div width="100%" align="top-left" padding="large" gap="medium">
 				${sizes.map(
-			item =>
-				html`<f-div>
+					item =>
+						html`<f-div>
 							<f-file-upload
 								type="single"
 								.value=${value}
@@ -321,7 +321,7 @@ export const Size = {
 								<f-text slot="help" variant="para" size="small">This is a Subtext</f-text>
 							</f-file-upload></f-div
 						>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -344,11 +344,11 @@ export const State = {
 		return html`
 			<f-div direction="column" gap="medium">
 				${states.map(
-			item =>
-				html` <f-div align="middle-center" padding="large" gap="medium">
+					item =>
+						html` <f-div align="middle-center" padding="large" gap="medium">
 							${item.map(
-					state =>
-						html`<f-div>
+								state =>
+									html`<f-div>
 										<f-file-upload
 											type="single"
 											.value=${value}
@@ -360,9 +360,9 @@ export const State = {
 											<f-text slot="help" variant="para" size="small">This is a Subtext</f-text>
 										</f-file-upload></f-div
 									>`
-				)}
+							)}
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-core/f-form-group.stories.js b/stories/flow-core/f-form-group.stories.js
index ecf021e9e..9a3504672 100644
--- a/stories/flow-core/f-form-group.stories.js
+++ b/stories/flow-core/f-form-group.stories.js
@@ -19,9 +19,9 @@ export const Playground = {
 				data-qa-id="testQaId"
 				variant=${args.variant}
 				.label=${{
-			title: "Test for Variant 1",
-			description: "This is a description"
-		}}
+					title: "Test for Variant 1",
+					description: "This is a description"
+				}}
 				direction="horizontal"
 				.gap=${args.gap}
 				.collapse=${args.collapse}
@@ -36,9 +36,9 @@ export const Playground = {
 			<f-form-group
 				variant=${args.variant}
 				.label=${{
-			title: "Test for Variant 2",
-			description: "This is a description"
-		}}
+					title: "Test for Variant 2",
+					description: "This is a description"
+				}}
 				direction="horizontal"
 				.gap=${args.gap}
 				?can-duplicate=${args["can-duplicate"]}
@@ -56,9 +56,9 @@ export const Playground = {
 			<f-divider></f-divider>
 			<f-form-group
 				.label=${{
-			title: "Test for direction (f-input)",
-			description: "This is a description"
-		}}
+					title: "Test for direction (f-input)",
+					description: "This is a description"
+				}}
 				direction=${args.direction}
 				.gap=${args.gap}
 				.collapse=${args.collapse}
@@ -71,9 +71,9 @@ export const Playground = {
 			<f-divider></f-divider>
 			<f-form-group
 				.label=${{
-			title: "Test for direction (f-checkbox)",
-			description: "This is a description"
-		}}
+					title: "Test for direction (f-checkbox)",
+					description: "This is a description"
+				}}
 				direction=${args.direction}
 				.gap=${args.gap}
 				.collapse=${args.collapse}
@@ -92,9 +92,9 @@ export const Playground = {
 			<f-divider></f-divider>
 			<f-form-group
 				.label=${{
-			title: "Test for direction (f-radio)",
-			description: "This is a description"
-		}}
+					title: "Test for direction (f-radio)",
+					description: "This is a description"
+				}}
 				direction=${args.direction}
 				.gap=${args.gap}
 				.collapse=${args.collapse}
@@ -163,9 +163,9 @@ export const Variant = {
 			<f-form-group
 				variant="normal"
 				.label=${{
-				title: "Test for Variant-Normal",
-				description: "This is a description"
-			}}
+					title: "Test for Variant-Normal",
+					description: "This is a description"
+				}}
 				direction="horizontal"
 				gap="small"
 			>
@@ -176,9 +176,9 @@ export const Variant = {
 			<f-form-group
 				variant="compact"
 				.label=${{
-				title: "Test for Variant-Normal",
-				description: "This is a description"
-			}}
+					title: "Test for Variant-Normal",
+					description: "This is a description"
+				}}
 				direction="horizontal"
 				gap="small"
 			>
@@ -194,9 +194,9 @@ export const Direction = {
       <f-form-group
         variant="normal"
         .label=${{
-			title: "Horizontally aligned",
-			description: "This is a description"
-		}}
+					title: "Horizontally aligned",
+					description: "This is a description"
+				}}
         direction="horizontal"
         gap="large"
       >
@@ -214,9 +214,9 @@ export const Direction = {
       <f-form-group
         variant="compact"
         .label=${{
-			title: "Verically aligned",
-			description: "This is a description"
-		}}
+					title: "Verically aligned",
+					description: "This is a description"
+				}}
         direction="vertical"
         gap="large"
       >
@@ -241,12 +241,12 @@ export const Gap = {
 		return html`
 			<f-form>
 				${gaps.map(
-			gap => html`
+					gap => html`
 						<f-form-group
 							variant="normal"
 							.label=${{
-					title: `gap=${gap}`
-				}}
+								title: `gap=${gap}`
+							}}
 							.gap=${gap}
 						>
 							<f-input placeholder="This is an input field"></f-input>
@@ -254,7 +254,7 @@ export const Gap = {
 						</f-form-group>
 						<f-divider></f-divider>
 					`
-		)}
+				)}
 			</f-form>
 		`;
 	},
@@ -269,12 +269,12 @@ export const Collapse = {
 		return html`
 			<f-form>
 				${collapses.map(
-			item => html`
+					item => html`
 						<f-form-group
 							variant="normal"
 							.label=${{
-					title: `collapse=${item}`
-				}}
+								title: `collapse=${item}`
+							}}
 							.collapse=${item}
 						>
 							<f-input placeholder="This is an input field"></f-input>
@@ -282,7 +282,7 @@ export const Collapse = {
 						</f-form-group>
 						<f-divider></f-divider>
 					`
-		)}
+				)}
 			</f-form>
 		`;
 	},
@@ -296,9 +296,9 @@ export const Flags = {
 			<f-form-group
 				variant="normal"
 				.label=${{
-				title: "Group Title (can-duplicate)",
-				description: "This is a description"
-			}}
+					title: "Group Title (can-duplicate)",
+					description: "This is a description"
+				}}
 				?can-duplicate=${true}
 			>
 				<f-input placeholder="This is an input field">
@@ -311,9 +311,9 @@ export const Flags = {
 			<f-form-group
 				variant="normal"
 				.label=${{
-				title: "Group Title (is-collapsed)",
-				description: "This is a description"
-			}}
+					title: "Group Title (is-collapsed)",
+					description: "This is a description"
+				}}
 				?is-collapsed=${false}
 				collapse="accordion"
 			>
diff --git a/stories/flow-core/f-form.stories.js b/stories/flow-core/f-form.stories.js
index d2bb226dd..f6a3d4e4c 100644
--- a/stories/flow-core/f-form.stories.js
+++ b/stories/flow-core/f-form.stories.js
@@ -38,9 +38,9 @@ export const Playground = {
 				direction="vertical"
 				collapse="accordion"
 				.label=${{
-				title: "Group Label",
-				description: "This is a description"
-			}}
+					title: "Group Label",
+					description: "This is a description"
+				}}
 			>
 				<f-select
 					placeholder="Select Option"
@@ -59,8 +59,8 @@ export const Playground = {
 			<f-form-group
 				direction="vertical"
 				.label=${{
-				title: "Checkbox Label"
-			}}
+					title: "Checkbox Label"
+				}}
 			>
 				<f-checkbox>
 					<f-div slot="label" padding="none" gap="none">Apple</f-div>
@@ -111,8 +111,8 @@ export const Gap = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${gaps.map(
-			item =>
-				html`<f-form gap=${item}>
+					item =>
+						html`<f-form gap=${item}>
 							<f-input value=${value} placeholder="Write here" @input=${handleValue}>
 								<f-div slot="label" padding="none" gap="none">Label (gap="${item}")</f-div>
 								<f-text slot="help" variant="para" size="small"
@@ -126,7 +126,7 @@ export const Gap = {
 								>
 							</f-input>
 						</f-form>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-core/f-grid.stories.js b/stories/flow-core/f-grid.stories.js
index 607c24cfc..fb6d53907 100644
--- a/stories/flow-core/f-grid.stories.js
+++ b/stories/flow-core/f-grid.stories.js
@@ -92,7 +92,7 @@ export const Playground = {
 				.gap=${args.gap}
 			>
 				${data.map(
-			item => html`
+					item => html`
 						<f-div
 							.id=${item.id}
 							state="secondary"
@@ -112,7 +112,7 @@ export const Playground = {
 							</f-div>
 						</f-div>
 					`
-		)}
+				)}
 			</f-grid>
 		</f-div>`;
 	},
@@ -228,7 +228,7 @@ export const MinCellWidth = {
 			</f-div>
 			<f-grid min-cell-width=${150}>
 				${data.map(
-			item => html`
+					item => html`
 						<f-div
 							.id=${item.id}
 							state="secondary"
@@ -248,7 +248,7 @@ export const MinCellWidth = {
 							</f-div>
 						</f-div>
 					`
-		)}
+				)}
 			</f-grid>
 		</f-div>`;
 	},
@@ -333,7 +333,7 @@ export const MaxCellWidth = {
 			</f-div>
 			<f-grid max-cell-width=${350}>
 				${data.map(
-			item => html`
+					item => html`
 						<f-div
 							.id=${item.id}
 							state="secondary"
@@ -353,7 +353,7 @@ export const MaxCellWidth = {
 							</f-div>
 						</f-div>
 					`
-		)}
+				)}
 			</f-grid>
 		</f-div>`;
 	},
@@ -438,7 +438,7 @@ export const CellHeight = {
 			</f-div>
 			<f-grid cell-height="180">
 				${data.map(
-			item => html`
+					item => html`
 						<f-div
 							.id=${item.id}
 							state="secondary"
@@ -458,7 +458,7 @@ export const CellHeight = {
 							</f-div>
 						</f-div>
 					`
-		)}
+				)}
 			</f-grid>
 		</f-div>`;
 	},
@@ -543,17 +543,17 @@ export const Gap = {
 		return html` <f-div width="100%" direction="column" padding="small">
 			<f-div padding="small" gap="small">
 				${gaps.map(
-			item =>
-				html` <f-button
+					item =>
+						html` <f-button
 							.label=${item}
 							@click=${() => setCurrentGap(item)}
 							.disabled=${currentGap === item}
 						></f-button>`
-		)}
+				)}
 			</f-div>
 			<f-grid .gap=${currentGap}>
 				${data.map(
-			item => html`
+					item => html`
 						<f-div
 							.id=${item.id}
 							state="secondary"
@@ -573,7 +573,7 @@ export const Gap = {
 							</f-div>
 						</f-div>
 					`
-		)}
+				)}
 			</f-grid>
 		</f-div>`;
 	},
diff --git a/stories/flow-core/f-input.stories.ts b/stories/flow-core/f-input.stories.ts
index 86d0c1e0e..fc396f2dd 100644
--- a/stories/flow-core/f-input.stories.ts
+++ b/stories/flow-core/f-input.stories.ts
@@ -163,7 +163,7 @@ export const Variant = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${variants.map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-input
             value=${value}
             placeholder="Write here"
@@ -178,7 +178,7 @@ export const Variant = {
           </f-input></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -198,7 +198,7 @@ export const Category = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${categories.map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-input
             value=${value}
             placeholder="Write here"
@@ -212,7 +212,7 @@ export const Category = {
           </f-input></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -235,11 +235,11 @@ export const Type = {
 		return html`
 			<f-div direction="column" gap="medium">
 				${types.map(
-			item =>
-				html` <f-div align="middle-center" padding="large" gap="medium">
+					item =>
+						html` <f-div align="middle-center" padding="large" gap="medium">
 							${item.map(
-					type =>
-						html`<f-div
+								type =>
+									html`<f-div
 										><f-input
 											value=${value}
 											placeholder="Write here"
@@ -253,9 +253,9 @@ export const Type = {
 											>
 										</f-input></f-div
 									>`
-				)}
+							)}
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -326,7 +326,7 @@ export const Size = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${sizes.map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-input
             value=${value}
             placeholder="Write here"
@@ -338,7 +338,7 @@ export const Size = {
           </f-input></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -361,11 +361,11 @@ export const State = {
 		return html`
 			<f-div direction="column" gap="medium">
 				${states.map(
-			item =>
-				html` <f-div align="middle-center" padding="large" gap="medium">
+					item =>
+						html` <f-div align="middle-center" padding="large" gap="medium">
 							${item.map(
-					state =>
-						html`<f-div
+								state =>
+									html`<f-div
 										><f-input
 											value=${value}
 											placeholder="Write here"
@@ -379,9 +379,9 @@ export const State = {
 											>
 										</f-input></f-div
 									>`
-				)}
+							)}
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -569,7 +569,7 @@ export const Flags = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${[0, 1, 2, 3].map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-input
             value=${value}
             placeholder="Write here"
@@ -585,7 +585,7 @@ export const Flags = {
           </f-input></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-core/f-popover.stories.ts b/stories/flow-core/f-popover.stories.ts
index 98af2e996..be9589c9a 100644
--- a/stories/flow-core/f-popover.stories.ts
+++ b/stories/flow-core/f-popover.stories.ts
@@ -290,10 +290,10 @@ export const Placement = {
 		return html`
 			<f-div height="hug-content" gap="large" direction="column">
 				${dummyPlacementArray.map((item, index) => {
-			return html`
+					return html`
 						<f-div height="hug-content" gap="auto" direction="row">
 							${item.map((main, main_index) => {
-				return html` <f-popover
+								return html` <f-popover
 										?open=${main.open}
 										?overlay=${true}
 										placement=${main.placement}
@@ -314,10 +314,10 @@ export const Placement = {
 										@click=${() => handlePopover(main_index, index)}
 									>
 									</f-button>`;
-			})}
+							})}
 						</f-div>
 					`;
-		})}
+				})}
 			</f-div>
 		`;
 	},
@@ -388,7 +388,7 @@ export const Size = {
 
 		return html` <f-div height="hug-content" direction="column" gap="large">
 			${dummySizeArray.map((item, index) => {
-			return html`
+				return html`
 					<f-popover
 						?open=${item.open}
 						.overlay=${false}
@@ -429,7 +429,7 @@ export const Size = {
 						<f-text size="large">${item.title}</f-text>
 					</f-div>
 				`;
-		})}
+			})}
 		</f-div>`;
 	},
 
@@ -520,7 +520,7 @@ export const State = {
 
 		return html` <f-div height="hug-content" direction="column" gap="large">
 			${dummySizeArray.map((item, index) => {
-			return html`
+				return html`
 					<f-popover
 						?open=${item.open}
 						.overlay=${true}
@@ -555,7 +555,7 @@ export const State = {
 						<f-text size="large">${item.title}</f-text>
 					</f-div>
 				`;
-		})}
+			})}
 		</f-div>`;
 	},
 
diff --git a/stories/flow-core/f-progress-bar.stories.ts b/stories/flow-core/f-progress-bar.stories.ts
index f4ac5e428..4cb5ee1e0 100644
--- a/stories/flow-core/f-progress-bar.stories.ts
+++ b/stories/flow-core/f-progress-bar.stories.ts
@@ -112,14 +112,14 @@ export const Variant = {
 
 		return html`<f-div direction="row" gap="medium"
 			>${variants.map(
-			item =>
-				html`<f-div direction="row" padding="x-large" gap="medium"
+				item =>
+					html`<f-div direction="row" padding="x-large" gap="medium"
 						><f-progress-bar value="30%" .variant=${item}></f-progress-bar>
 						<f-div width="hug-content"
 							><f-text variant="para" size="small">variant="${item}"</f-text></f-div
 						>
 					</f-div>`
-		)}</f-div
+			)}</f-div
 		>`;
 	},
 
@@ -135,8 +135,8 @@ export const Size = {
 				html`<f-div direction="column" gap="medium">
 					<f-div padding="medium"><f-text>variant="${variant}"</f-text></f-div>
 					${sizes.map(
-					item =>
-						html`<f-div direction="row" align="middle-left" padding="x-large" gap="medium"
+						item =>
+							html`<f-div direction="row" align="middle-left" padding="x-large" gap="medium"
 								><f-progress-bar
 									value="30%"
 									.size=${item}
@@ -147,7 +147,7 @@ export const Size = {
 									><f-text variant="para" size="small">size="${item}"</f-text></f-div
 								>
 							</f-div>`
-				)}
+					)}
 					<f-divider></f-divider>
 				</f-div>`
 		)}`;
@@ -162,12 +162,12 @@ export const State = {
 
 		return html`<f-div direction="column" gap="medium"
 			>${states.map(
-			item =>
-				html`<f-div direction="row" padding="x-large" gap="medium"
+				item =>
+					html`<f-div direction="row" padding="x-large" gap="medium"
 						><f-progress-bar value="30%" .state=${item} variant="curved"></f-progress-bar>
 						<f-div width="20%"><f-text variant="para" size="small">state="${item}"</f-text></f-div>
 					</f-div>`
-		)}</f-div
+			)}</f-div
 		>`;
 	},
 
@@ -180,8 +180,8 @@ export const Width = {
 
 		return html`<f-div direction="column" gap="medium"
 			>${widths.map(
-			item =>
-				html`<f-div direction="row" padding="x-large" gap="medium"
+				item =>
+					html`<f-div direction="row" padding="x-large" gap="medium"
 						><f-progress-bar
 							value="30%"
 							.width=${item}
@@ -190,7 +190,7 @@ export const Width = {
 						></f-progress-bar>
 						<f-div width="20%"><f-text variant="para" size="small">width="${item}"</f-text></f-div>
 					</f-div>`
-		)}</f-div
+			)}</f-div
 		>`;
 	},
 
diff --git a/stories/flow-core/f-radio.stories.js b/stories/flow-core/f-radio.stories.js
index 8f840996f..d2e1c7e57 100644
--- a/stories/flow-core/f-radio.stories.js
+++ b/stories/flow-core/f-radio.stories.js
@@ -100,7 +100,7 @@ export const Value = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${values.map(
-			item => html`<f-div>
+					item => html`<f-div>
            <f-radio
               size="medium"
               .value=${item}
@@ -115,7 +115,7 @@ export const Value = {
             </f-radio></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -135,7 +135,7 @@ export const Size = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${sizes.map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-radio
               .size=${item}
               .value=${value}
@@ -150,7 +150,7 @@ export const Size = {
             </f-radio></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -173,11 +173,11 @@ export const State = {
 		return html`
 			<f-div direction="column" gap="medium">
 				${states.map(
-			item =>
-				html` <f-div align="middle-center" padding="large" gap="medium">
+					item =>
+						html` <f-div align="middle-center" padding="large" gap="medium">
 							${item.map(
-					state =>
-						html`<f-div
+								state =>
+									html`<f-div
 										><f-radio size="medium" .value=${value} .state=${state} @input=${handleValue}>
 											<f-div slot="label" padding="none">
 												<f-text variant="para" size="small"
@@ -198,9 +198,9 @@ export const State = {
 											</f-div>
 										</f-radio></f-div
 									>`
-				)}
+							)}
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -219,7 +219,7 @@ export const Flags = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${[0].map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-radio
               size="medium"
               .value=${value}
@@ -235,7 +235,7 @@ export const Flags = {
             </f-radio></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-core/f-search.stories.ts b/stories/flow-core/f-search.stories.ts
index d224805d2..2cbe1c442 100644
--- a/stories/flow-core/f-search.stories.ts
+++ b/stories/flow-core/f-search.stories.ts
@@ -157,7 +157,7 @@ export const Variant = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${variants.map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-search
             value=${value}
             placeholder="Search"
@@ -165,33 +165,33 @@ export const Variant = {
             .variant=${item}
             size="medium"
       .result=${[
-					"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis porta dignissim. Etiam a aliquam elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam hendrerit quis lorem cursus consectetur. Donec sem ipsum, scelerisque at nulla vel, rutrum efficitur tortor. Praesent eu tincidunt mauris. Nam eu aliquam turpis. Curabitur placerat maximus tempor. Donec non ante in nunc eleifend elementum eu quis lorem",
-					"Suggestion 2",
-					"Suggestion 3",
-					"Suggestion 4",
-					"Suggestion 5",
-					"Suggestion 6",
-					"Suggestion 7",
-					"Suggestion 8",
-					"Suggestion 9",
-					"Suggestion 10",
-					"Suggestion 11",
-					"Suggestion 12",
-					"Suggestion 13",
-					"Suggestion 14",
-					"Suggestion 15",
-					"Suggestion 16",
-					"Suggestion 17",
-					"Suggestion 18",
-					"<f-text state='success'>Using markup</f-text>"
-				]}
+				"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis porta dignissim. Etiam a aliquam elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam hendrerit quis lorem cursus consectetur. Donec sem ipsum, scelerisque at nulla vel, rutrum efficitur tortor. Praesent eu tincidunt mauris. Nam eu aliquam turpis. Curabitur placerat maximus tempor. Donec non ante in nunc eleifend elementum eu quis lorem",
+				"Suggestion 2",
+				"Suggestion 3",
+				"Suggestion 4",
+				"Suggestion 5",
+				"Suggestion 6",
+				"Suggestion 7",
+				"Suggestion 8",
+				"Suggestion 9",
+				"Suggestion 10",
+				"Suggestion 11",
+				"Suggestion 12",
+				"Suggestion 13",
+				"Suggestion 14",
+				"Suggestion 15",
+				"Suggestion 16",
+				"Suggestion 17",
+				"Suggestion 18",
+				"<f-text state='success'>Using markup</f-text>"
+			]}
           >
              <f-div slot="label" padding="none" gap="none">Label (variant="${item}")</f-div>
             <f-text slot="help" variant="para" size="small">This is a Subtext (Helper Text)</f-text>
           </f-search></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -211,7 +211,7 @@ export const Category = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${categories.map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-search
             value=${value}
             placeholder="Search"
@@ -220,32 +220,32 @@ export const Category = {
             size="medium"
             .variant=${item === "transparent" ? "block" : "curved"}
       .result=${[
-					"Suggestion 2",
-					"Suggestion 3",
-					"Suggestion 4",
-					"Suggestion 5",
-					"Suggestion 6",
-					"Suggestion 7",
-					"Suggestion 8",
-					"Suggestion 9",
-					"Suggestion 10",
-					"Suggestion 11",
-					"Suggestion 12",
-					"Suggestion 13",
-					"Suggestion 14",
-					"Suggestion 15",
-					"Suggestion 16",
-					"Suggestion 17",
-					"Suggestion 18",
-					"<f-text state='success'>Using markup</f-text>"
-				]}
+				"Suggestion 2",
+				"Suggestion 3",
+				"Suggestion 4",
+				"Suggestion 5",
+				"Suggestion 6",
+				"Suggestion 7",
+				"Suggestion 8",
+				"Suggestion 9",
+				"Suggestion 10",
+				"Suggestion 11",
+				"Suggestion 12",
+				"Suggestion 13",
+				"Suggestion 14",
+				"Suggestion 15",
+				"Suggestion 16",
+				"Suggestion 17",
+				"Suggestion 18",
+				"<f-text state='success'>Using markup</f-text>"
+			]}
           >
             <f-div slot="label" padding="none" gap="none">Label (category="${item}")</f-div>
             <f-text slot="help" variant="para" size="small">This is a Subtext (Helper Text)</f-text>
           </f-search></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -269,24 +269,24 @@ export const Value = {
 						@input=${handleValue}
 						size="medium"
 						.result=${[
-				"Suggestion 2",
-				"Suggestion 3",
-				"Suggestion 4",
-				"Suggestion 5",
-				"Suggestion 6",
-				"Suggestion 7",
-				"Suggestion 8",
-				"Suggestion 9",
-				"Suggestion 10",
-				"Suggestion 11",
-				"Suggestion 12",
-				"Suggestion 13",
-				"Suggestion 14",
-				"Suggestion 15",
-				"Suggestion 16",
-				"Suggestion 17",
-				"Suggestion 18"
-			]}
+							"Suggestion 2",
+							"Suggestion 3",
+							"Suggestion 4",
+							"Suggestion 5",
+							"Suggestion 6",
+							"Suggestion 7",
+							"Suggestion 8",
+							"Suggestion 9",
+							"Suggestion 10",
+							"Suggestion 11",
+							"Suggestion 12",
+							"Suggestion 13",
+							"Suggestion 14",
+							"Suggestion 15",
+							"Suggestion 16",
+							"Suggestion 17",
+							"Suggestion 18"
+						]}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
 						<f-text slot="help" variant="para" size="small">This is a Subtext (Helper Text)</f-text>
@@ -316,24 +316,24 @@ export const Placeholder = {
 						placeholder="Search Here"
 						size="medium"
 						.result=${[
-				"Suggestion 2",
-				"Suggestion 3",
-				"Suggestion 4",
-				"Suggestion 5",
-				"Suggestion 6",
-				"Suggestion 7",
-				"Suggestion 8",
-				"Suggestion 9",
-				"Suggestion 10",
-				"Suggestion 11",
-				"Suggestion 12",
-				"Suggestion 13",
-				"Suggestion 14",
-				"Suggestion 15",
-				"Suggestion 16",
-				"Suggestion 17",
-				"Suggestion 18"
-			]}
+							"Suggestion 2",
+							"Suggestion 3",
+							"Suggestion 4",
+							"Suggestion 5",
+							"Suggestion 6",
+							"Suggestion 7",
+							"Suggestion 8",
+							"Suggestion 9",
+							"Suggestion 10",
+							"Suggestion 11",
+							"Suggestion 12",
+							"Suggestion 13",
+							"Suggestion 14",
+							"Suggestion 15",
+							"Suggestion 16",
+							"Suggestion 17",
+							"Suggestion 18"
+						]}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
 						<f-text slot="help" variant="para" size="small">This is a Subtext (Helper Text)</f-text>
@@ -358,37 +358,37 @@ export const Size = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${sizes.map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-search
             value=${value}
             @input=${handleValue}
             size=${item}
       .result=${[
-					"Suggestion 2",
-					"Suggestion 3",
-					"Suggestion 4",
-					"Suggestion 5",
-					"Suggestion 6",
-					"Suggestion 7",
-					"Suggestion 8",
-					"Suggestion 9",
-					"Suggestion 10",
-					"Suggestion 11",
-					"Suggestion 12",
-					"Suggestion 13",
-					"Suggestion 14",
-					"Suggestion 15",
-					"Suggestion 16",
-					"Suggestion 17",
-					"Suggestion 18"
-				]}
+				"Suggestion 2",
+				"Suggestion 3",
+				"Suggestion 4",
+				"Suggestion 5",
+				"Suggestion 6",
+				"Suggestion 7",
+				"Suggestion 8",
+				"Suggestion 9",
+				"Suggestion 10",
+				"Suggestion 11",
+				"Suggestion 12",
+				"Suggestion 13",
+				"Suggestion 14",
+				"Suggestion 15",
+				"Suggestion 16",
+				"Suggestion 17",
+				"Suggestion 18"
+			]}
           >
             <f-div slot="label" padding="none" gap="none">Label (size="${item}")</f-div>
             <f-text slot="help" variant="para" size="small">This is a Subtext (Helper Text)</f-text>
           </f-search></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -411,35 +411,35 @@ export const State = {
 		return html`
 			<f-div direction="column" gap="medium">
 				${states.map(
-			item =>
-				html` <f-div align="middle-center" padding="large" gap="medium">
+					item =>
+						html` <f-div align="middle-center" padding="large" gap="medium">
 							${item.map(
-					state =>
-						html`<f-div
+								state =>
+									html`<f-div
 										><f-search
 											value=${value}
 											@input=${handleValue}
 											size="medium"
 											state=${state}
 											.result=${[
-								"Suggestion 2",
-								"Suggestion 3",
-								"Suggestion 4",
-								"Suggestion 5",
-								"Suggestion 6",
-								"Suggestion 7",
-								"Suggestion 8",
-								"Suggestion 9",
-								"Suggestion 10",
-								"Suggestion 11",
-								"Suggestion 12",
-								"Suggestion 13",
-								"Suggestion 14",
-								"Suggestion 15",
-								"Suggestion 16",
-								"Suggestion 17",
-								"Suggestion 18"
-							]}
+												"Suggestion 2",
+												"Suggestion 3",
+												"Suggestion 4",
+												"Suggestion 5",
+												"Suggestion 6",
+												"Suggestion 7",
+												"Suggestion 8",
+												"Suggestion 9",
+												"Suggestion 10",
+												"Suggestion 11",
+												"Suggestion 12",
+												"Suggestion 13",
+												"Suggestion 14",
+												"Suggestion 15",
+												"Suggestion 16",
+												"Suggestion 17",
+												"Suggestion 18"
+											]}
 										>
 											<f-div slot="label" padding="none" gap="none">Label (state="${state}")</f-div>
 											<f-text slot="help" variant="para" size="small"
@@ -447,9 +447,9 @@ export const State = {
 											>
 										</f-search></f-div
 									>`
-				)}
+							)}
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -532,24 +532,24 @@ export const Result = {
 						@input=${handleValue}
 						size="medium"
 						.result=${[
-				"Suggestion 2",
-				"Suggestion 3",
-				"Suggestion 4",
-				"Suggestion 5",
-				"Suggestion 6",
-				"Suggestion 7",
-				"Suggestion 8",
-				"Suggestion 9",
-				"Suggestion 10",
-				"Suggestion 11",
-				"Suggestion 12",
-				"Suggestion 13",
-				"Suggestion 14",
-				"Suggestion 15",
-				"Suggestion 16",
-				"Suggestion 17",
-				"Suggestion 18"
-			]}
+							"Suggestion 2",
+							"Suggestion 3",
+							"Suggestion 4",
+							"Suggestion 5",
+							"Suggestion 6",
+							"Suggestion 7",
+							"Suggestion 8",
+							"Suggestion 9",
+							"Suggestion 10",
+							"Suggestion 11",
+							"Suggestion 12",
+							"Suggestion 13",
+							"Suggestion 14",
+							"Suggestion 15",
+							"Suggestion 16",
+							"Suggestion 17",
+							"Suggestion 18"
+						]}
 						.resultMaxHeight=${"150px"}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
@@ -569,10 +569,10 @@ export const Result = {
 						@input=${handleValue}
 						size="medium"
 						.result=${{
-				Category1: ["option 1", "option2"],
-				Category2: ["option3", "option 4"],
-				Category3: ["option5", "option6"]
-			}}
+							Category1: ["option 1", "option2"],
+							Category2: ["option3", "option 4"],
+							Category3: ["option5", "option6"]
+						}}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
 						<f-div slot="description" padding="none" gap="none"
@@ -622,24 +622,24 @@ export const Scope = {
 						@input=${handleValue}
 						size="medium"
 						.result=${[
-				"Suggestion 2",
-				"Suggestion 3",
-				"Suggestion 4",
-				"Suggestion 5",
-				"Suggestion 6",
-				"Suggestion 7",
-				"Suggestion 8",
-				"Suggestion 9",
-				"Suggestion 10",
-				"Suggestion 11",
-				"Suggestion 12",
-				"Suggestion 13",
-				"Suggestion 14",
-				"Suggestion 15",
-				"Suggestion 16",
-				"Suggestion 17",
-				"Suggestion 18"
-			]}
+							"Suggestion 2",
+							"Suggestion 3",
+							"Suggestion 4",
+							"Suggestion 5",
+							"Suggestion 6",
+							"Suggestion 7",
+							"Suggestion 8",
+							"Suggestion 9",
+							"Suggestion 10",
+							"Suggestion 11",
+							"Suggestion 12",
+							"Suggestion 13",
+							"Suggestion 14",
+							"Suggestion 15",
+							"Suggestion 16",
+							"Suggestion 17",
+							"Suggestion 18"
+						]}
 						.scope=${["scope 1", "scope 2", "scope 3"]}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
@@ -671,24 +671,24 @@ export const selectedScope = {
 						@input=${handleValue}
 						size="medium"
 						.result=${[
-				"Suggestion 2",
-				"Suggestion 3",
-				"Suggestion 4",
-				"Suggestion 5",
-				"Suggestion 6",
-				"Suggestion 7",
-				"Suggestion 8",
-				"Suggestion 9",
-				"Suggestion 10",
-				"Suggestion 11",
-				"Suggestion 12",
-				"Suggestion 13",
-				"Suggestion 14",
-				"Suggestion 15",
-				"Suggestion 16",
-				"Suggestion 17",
-				"Suggestion 18"
-			]}
+							"Suggestion 2",
+							"Suggestion 3",
+							"Suggestion 4",
+							"Suggestion 5",
+							"Suggestion 6",
+							"Suggestion 7",
+							"Suggestion 8",
+							"Suggestion 9",
+							"Suggestion 10",
+							"Suggestion 11",
+							"Suggestion 12",
+							"Suggestion 13",
+							"Suggestion 14",
+							"Suggestion 15",
+							"Suggestion 16",
+							"Suggestion 17",
+							"Suggestion 18"
+						]}
 						.scope=${["scope 1", "scope 2", "scope 3"]}
 						.selectedScope=${"scope 2"}
 					>
@@ -723,24 +723,24 @@ export const resultMaxHeight = {
 						@input=${handleValue}
 						size="medium"
 						.result=${[
-				"Suggestion 2",
-				"Suggestion 3",
-				"Suggestion 4",
-				"Suggestion 5",
-				"Suggestion 6",
-				"Suggestion 7",
-				"Suggestion 8",
-				"Suggestion 9",
-				"Suggestion 10",
-				"Suggestion 11",
-				"Suggestion 12",
-				"Suggestion 13",
-				"Suggestion 14",
-				"Suggestion 15",
-				"Suggestion 16",
-				"Suggestion 17",
-				"Suggestion 18"
-			]}
+							"Suggestion 2",
+							"Suggestion 3",
+							"Suggestion 4",
+							"Suggestion 5",
+							"Suggestion 6",
+							"Suggestion 7",
+							"Suggestion 8",
+							"Suggestion 9",
+							"Suggestion 10",
+							"Suggestion 11",
+							"Suggestion 12",
+							"Suggestion 13",
+							"Suggestion 14",
+							"Suggestion 15",
+							"Suggestion 16",
+							"Suggestion 17",
+							"Suggestion 18"
+						]}
 						.resultMaxHeight=${"150px"}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
@@ -783,24 +783,24 @@ export const resultWhen = {
 						@input=${handleValue}
 						size="medium"
 						.result=${[
-				"Suggestion 2",
-				"Suggestion 3",
-				"Suggestion 4",
-				"Suggestion 5",
-				"Suggestion 6",
-				"Suggestion 7",
-				"Suggestion 8",
-				"Suggestion 9",
-				"Suggestion 10",
-				"Suggestion 11",
-				"Suggestion 12",
-				"Suggestion 13",
-				"Suggestion 14",
-				"Suggestion 15",
-				"Suggestion 16",
-				"Suggestion 17",
-				"Suggestion 18"
-			]}
+							"Suggestion 2",
+							"Suggestion 3",
+							"Suggestion 4",
+							"Suggestion 5",
+							"Suggestion 6",
+							"Suggestion 7",
+							"Suggestion 8",
+							"Suggestion 9",
+							"Suggestion 10",
+							"Suggestion 11",
+							"Suggestion 12",
+							"Suggestion 13",
+							"Suggestion 14",
+							"Suggestion 15",
+							"Suggestion 16",
+							"Suggestion 17",
+							"Suggestion 18"
+						]}
 						.resultWhen=${resWhen}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
@@ -844,7 +844,7 @@ export const Flags = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${[0, 1, 2, 3].map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-search
             value=${value}
             placeholder="Write here"
@@ -855,13 +855,14 @@ export const Flags = {
             ?clear=${item === 2 ? true : false}
       ?loading=${item === 3 ? true : false}
           >
-            <f-div slot="label" padding="none" gap="none">${item === 0 ? "search-button" : item === 1 ? "Disabled" : "Clear Icon on Type"
-				}</f-div>
+            <f-div slot="label" padding="none" gap="none">${
+							item === 0 ? "search-button" : item === 1 ? "Disabled" : "Clear Icon on Type"
+						}</f-div>
             <f-text slot="help" variant="para" size="small">This is a Subtext (Helper Text)</f-text>
           </f-search></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-core/f-select.stories.ts b/stories/flow-core/f-select.stories.ts
index 9d249eb62..0c67c4e35 100644
--- a/stories/flow-core/f-select.stories.ts
+++ b/stories/flow-core/f-select.stories.ts
@@ -244,8 +244,8 @@ export const Type = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${types.map(
-			item =>
-				html`<f-div>
+					item =>
+						html`<f-div>
 							<f-select
 								placeholder="Select Option"
 								.type=${item}
@@ -259,7 +259,7 @@ export const Type = {
 								<f-div slot="help" padding="none" gap="none">This is a helper text</f-div>
 							</f-select></f-div
 						>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -279,8 +279,8 @@ export const Variant = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${variants.map(
-			item =>
-				html`<f-div>
+					item =>
+						html`<f-div>
 							<f-select
 								placeholder="Select Option"
 								@input=${handleValue}
@@ -294,7 +294,7 @@ export const Variant = {
 								<f-div slot="help" padding="none" gap="none">This is a helper text</f-div>
 							</f-select></f-div
 						>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -314,8 +314,8 @@ export const Category = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${categories.map(
-			item =>
-				html`<f-div>
+					item =>
+						html`<f-div>
 							<f-select
 								placeholder="Select Option"
 								@input=${handleValue}
@@ -329,7 +329,7 @@ export const Category = {
 								<f-div slot="help" padding="none" gap="none">This is a helper text</f-div>
 							</f-select></f-div
 						>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -776,8 +776,8 @@ export const Size = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${sizes.map(
-			item =>
-				html`<f-div>
+					item =>
+						html`<f-div>
 							<f-select
 								placeholder="Select Option"
 								@input=${handleValue}
@@ -791,7 +791,7 @@ export const Size = {
 								<f-div slot="help" padding="none" gap="none">This is a helper text</f-div>
 							</f-select></f-div
 						>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -815,11 +815,11 @@ export const State = {
 		return html`
 			<f-div direction="column" gap="medium">
 				${states.map(
-			item =>
-				html` <f-div align="middle-center" padding="large" gap="medium">
+					item =>
+						html` <f-div align="middle-center" padding="large" gap="medium">
 							${item.map(
-					state =>
-						html`<f-div
+								state =>
+									html`<f-div
 										><f-select
 											placeholder="Select Option"
 											@input=${handleValue}
@@ -833,9 +833,9 @@ export const State = {
 											<f-div slot="help" padding="none" gap="none">This is a helper text</f-div>
 										</f-select></f-div
 									>`
-				)}
+							)}
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-core/f-suggest.stories.ts b/stories/flow-core/f-suggest.stories.ts
index 046fd65d7..80145b04e 100644
--- a/stories/flow-core/f-suggest.stories.ts
+++ b/stories/flow-core/f-suggest.stories.ts
@@ -190,7 +190,7 @@ export const Variant = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${variants.map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-suggest
             value=${value}
             placeholder="Write here"
@@ -198,25 +198,25 @@ export const Variant = {
             .variant=${item}
             size="medium"
       .suggestions=${[
-					"Suggestion 1",
-					"Suggestion 2",
-					"Suggestion 3",
-					"Suggestion 4",
-					"Suggestion 5",
-					"Suggestion 6",
-					"Suggestion 7",
-					"Suggestion 8",
-					"Suggestion 9",
-					"Suggestion 10",
-					"Suggestion 11",
-					"Suggestion 12",
-					"Suggestion 13",
-					"Suggestion 14",
-					"Suggestion 15",
-					"Suggestion 16",
-					"Suggestion 17",
-					"Suggestion 18"
-				]}
+				"Suggestion 1",
+				"Suggestion 2",
+				"Suggestion 3",
+				"Suggestion 4",
+				"Suggestion 5",
+				"Suggestion 6",
+				"Suggestion 7",
+				"Suggestion 8",
+				"Suggestion 9",
+				"Suggestion 10",
+				"Suggestion 11",
+				"Suggestion 12",
+				"Suggestion 13",
+				"Suggestion 14",
+				"Suggestion 15",
+				"Suggestion 16",
+				"Suggestion 17",
+				"Suggestion 18"
+			]}
           >
              <f-div slot="label" padding="none" gap="none">Label (variant="${item}")</f-div>
             <f-text slot="help" variant="para" size="small">This is a Subtext (Helper Text)</f-text>
@@ -224,7 +224,7 @@ export const Variant = {
           </f-suggest></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -244,7 +244,7 @@ export const Category = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${categories.map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-suggest
             value=${value}
             placeholder="Write here"
@@ -253,32 +253,32 @@ export const Category = {
             size="medium"
             .variant=${item === "transparent" ? "block" : "curved"}
       .suggestions=${[
-					"Suggestion 1",
-					"Suggestion 2",
-					"Suggestion 3",
-					"Suggestion 4",
-					"Suggestion 5",
-					"Suggestion 6",
-					"Suggestion 7",
-					"Suggestion 8",
-					"Suggestion 9",
-					"Suggestion 10",
-					"Suggestion 11",
-					"Suggestion 12",
-					"Suggestion 13",
-					"Suggestion 14",
-					"Suggestion 15",
-					"Suggestion 16",
-					"Suggestion 17",
-					"Suggestion 18"
-				]}
+				"Suggestion 1",
+				"Suggestion 2",
+				"Suggestion 3",
+				"Suggestion 4",
+				"Suggestion 5",
+				"Suggestion 6",
+				"Suggestion 7",
+				"Suggestion 8",
+				"Suggestion 9",
+				"Suggestion 10",
+				"Suggestion 11",
+				"Suggestion 12",
+				"Suggestion 13",
+				"Suggestion 14",
+				"Suggestion 15",
+				"Suggestion 16",
+				"Suggestion 17",
+				"Suggestion 18"
+			]}
           >
             <f-div slot="label" padding="none" gap="none">Label (category="${item}")</f-div>
             <f-text slot="help" variant="para" size="small">This is a Subtext (Helper Text)</f-text>
           </f-suggest></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -302,25 +302,25 @@ export const Value = {
 						@input=${handleValue}
 						size="medium"
 						.suggestions=${[
-				"Suggestion 1",
-				"Suggestion 2",
-				"Suggestion 3",
-				"Suggestion 4",
-				"Suggestion 5",
-				"Suggestion 6",
-				"Suggestion 7",
-				"Suggestion 8",
-				"Suggestion 9",
-				"Suggestion 10",
-				"Suggestion 11",
-				"Suggestion 12",
-				"Suggestion 13",
-				"Suggestion 14",
-				"Suggestion 15",
-				"Suggestion 16",
-				"Suggestion 17",
-				"Suggestion 18"
-			]}
+							"Suggestion 1",
+							"Suggestion 2",
+							"Suggestion 3",
+							"Suggestion 4",
+							"Suggestion 5",
+							"Suggestion 6",
+							"Suggestion 7",
+							"Suggestion 8",
+							"Suggestion 9",
+							"Suggestion 10",
+							"Suggestion 11",
+							"Suggestion 12",
+							"Suggestion 13",
+							"Suggestion 14",
+							"Suggestion 15",
+							"Suggestion 16",
+							"Suggestion 17",
+							"Suggestion 18"
+						]}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
 						<f-text slot="help" variant="para" size="small">This is a Subtext (Helper Text)</f-text>
@@ -350,25 +350,25 @@ export const Placeholder = {
 						@input=${handleValue}
 						size="medium"
 						.suggestions=${[
-				"Suggestion 1",
-				"Suggestion 2",
-				"Suggestion 3",
-				"Suggestion 4",
-				"Suggestion 5",
-				"Suggestion 6",
-				"Suggestion 7",
-				"Suggestion 8",
-				"Suggestion 9",
-				"Suggestion 10",
-				"Suggestion 11",
-				"Suggestion 12",
-				"Suggestion 13",
-				"Suggestion 14",
-				"Suggestion 15",
-				"Suggestion 16",
-				"Suggestion 17",
-				"Suggestion 18"
-			]}
+							"Suggestion 1",
+							"Suggestion 2",
+							"Suggestion 3",
+							"Suggestion 4",
+							"Suggestion 5",
+							"Suggestion 6",
+							"Suggestion 7",
+							"Suggestion 8",
+							"Suggestion 9",
+							"Suggestion 10",
+							"Suggestion 11",
+							"Suggestion 12",
+							"Suggestion 13",
+							"Suggestion 14",
+							"Suggestion 15",
+							"Suggestion 16",
+							"Suggestion 17",
+							"Suggestion 18"
+						]}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
 						<f-text slot="help" variant="para" size="small">This is a Subtext (Helper Text)</f-text>
@@ -393,39 +393,39 @@ export const Size = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${sizes.map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-suggest
             value=${value}
             placeholder="Write here"
             @input=${handleValue}
             size=${item}
       .suggestions=${[
-					"Suggestion 1",
-					"Suggestion 2",
-					"Suggestion 3",
-					"Suggestion 4",
-					"Suggestion 5",
-					"Suggestion 6",
-					"Suggestion 7",
-					"Suggestion 8",
-					"Suggestion 9",
-					"Suggestion 10",
-					"Suggestion 11",
-					"Suggestion 12",
-					"Suggestion 13",
-					"Suggestion 14",
-					"Suggestion 15",
-					"Suggestion 16",
-					"Suggestion 17",
-					"Suggestion 18"
-				]}
+				"Suggestion 1",
+				"Suggestion 2",
+				"Suggestion 3",
+				"Suggestion 4",
+				"Suggestion 5",
+				"Suggestion 6",
+				"Suggestion 7",
+				"Suggestion 8",
+				"Suggestion 9",
+				"Suggestion 10",
+				"Suggestion 11",
+				"Suggestion 12",
+				"Suggestion 13",
+				"Suggestion 14",
+				"Suggestion 15",
+				"Suggestion 16",
+				"Suggestion 17",
+				"Suggestion 18"
+			]}
           >
             <f-div slot="label" padding="none" gap="none">Label (size="${item}")</f-div>
             <f-text slot="help" variant="para" size="small">This is a Subtext (Helper Text)</f-text>
           </f-suggest></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -448,11 +448,11 @@ export const State = {
 		return html`
 			<f-div direction="column" gap="medium">
 				${states.map(
-			item =>
-				html` <f-div align="middle-center" padding="large" gap="medium">
+					item =>
+						html` <f-div align="middle-center" padding="large" gap="medium">
 							${item.map(
-					state =>
-						html`<f-div
+								state =>
+									html`<f-div
 										><f-suggest
 											value=${value}
 											placeholder="Write here"
@@ -460,25 +460,25 @@ export const State = {
 											size="medium"
 											state=${state}
 											.suggestions=${[
-								"Suggestion 1",
-								"Suggestion 2",
-								"Suggestion 3",
-								"Suggestion 4",
-								"Suggestion 5",
-								"Suggestion 6",
-								"Suggestion 7",
-								"Suggestion 8",
-								"Suggestion 9",
-								"Suggestion 10",
-								"Suggestion 11",
-								"Suggestion 12",
-								"Suggestion 13",
-								"Suggestion 14",
-								"Suggestion 15",
-								"Suggestion 16",
-								"Suggestion 17",
-								"Suggestion 18"
-							]}
+												"Suggestion 1",
+												"Suggestion 2",
+												"Suggestion 3",
+												"Suggestion 4",
+												"Suggestion 5",
+												"Suggestion 6",
+												"Suggestion 7",
+												"Suggestion 8",
+												"Suggestion 9",
+												"Suggestion 10",
+												"Suggestion 11",
+												"Suggestion 12",
+												"Suggestion 13",
+												"Suggestion 14",
+												"Suggestion 15",
+												"Suggestion 16",
+												"Suggestion 17",
+												"Suggestion 18"
+											]}
 										>
 											<f-div slot="label" padding="none" gap="none">Label (state="${state}")</f-div>
 											<f-text slot="help" variant="para" size="small"
@@ -486,9 +486,9 @@ export const State = {
 											>
 										</f-suggest></f-div
 									>`
-				)}
+							)}
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -544,24 +544,24 @@ export const Suggestions = {
 						@input=${handleValue}
 						size="medium"
 						.suggestions=${[
-				"Suggestion 2",
-				"Suggestion 3",
-				"Suggestion 4",
-				"Suggestion 5",
-				"Suggestion 6",
-				"Suggestion 7",
-				"Suggestion 8",
-				"Suggestion 9",
-				"Suggestion 10",
-				"Suggestion 11",
-				"Suggestion 12",
-				"Suggestion 13",
-				"Suggestion 14",
-				"Suggestion 15",
-				"Suggestion 16",
-				"Suggestion 17",
-				"Suggestion 18"
-			]}
+							"Suggestion 2",
+							"Suggestion 3",
+							"Suggestion 4",
+							"Suggestion 5",
+							"Suggestion 6",
+							"Suggestion 7",
+							"Suggestion 8",
+							"Suggestion 9",
+							"Suggestion 10",
+							"Suggestion 11",
+							"Suggestion 12",
+							"Suggestion 13",
+							"Suggestion 14",
+							"Suggestion 15",
+							"Suggestion 16",
+							"Suggestion 17",
+							"Suggestion 18"
+						]}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
 						<f-div slot="description" padding="none" gap="none"
@@ -577,10 +577,10 @@ export const Suggestions = {
 						@input=${handleValue}
 						size="medium"
 						.suggestions=${{
-				Category1: ["option 1", "option2"],
-				Category2: ["option3", "option 4"],
-				Category3: ["option5", "option6"]
-			}}
+							Category1: ["option 1", "option2"],
+							Category2: ["option3", "option 4"],
+							Category3: ["option5", "option6"]
+						}}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
 						<f-div slot="description" padding="none" gap="none"
@@ -629,25 +629,25 @@ export const IconLeft = {
 						size="medium"
 						icon-left="i-app"
 						.suggestions=${[
-				"Suggestion 1",
-				"Suggestion 2",
-				"Suggestion 3",
-				"Suggestion 4",
-				"Suggestion 5",
-				"Suggestion 6",
-				"Suggestion 7",
-				"Suggestion 8",
-				"Suggestion 9",
-				"Suggestion 10",
-				"Suggestion 11",
-				"Suggestion 12",
-				"Suggestion 13",
-				"Suggestion 14",
-				"Suggestion 15",
-				"Suggestion 16",
-				"Suggestion 17",
-				"Suggestion 18"
-			]}
+							"Suggestion 1",
+							"Suggestion 2",
+							"Suggestion 3",
+							"Suggestion 4",
+							"Suggestion 5",
+							"Suggestion 6",
+							"Suggestion 7",
+							"Suggestion 8",
+							"Suggestion 9",
+							"Suggestion 10",
+							"Suggestion 11",
+							"Suggestion 12",
+							"Suggestion 13",
+							"Suggestion 14",
+							"Suggestion 15",
+							"Suggestion 16",
+							"Suggestion 17",
+							"Suggestion 18"
+						]}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
 						<f-div slot="description" padding="none" gap="none"
@@ -682,25 +682,25 @@ export const IconRight = {
 						icon-left="i-app"
 						icon-right="i-delete"
 						.suggestions=${[
-				"Suggestion 1",
-				"Suggestion 2",
-				"Suggestion 3",
-				"Suggestion 4",
-				"Suggestion 5",
-				"Suggestion 6",
-				"Suggestion 7",
-				"Suggestion 8",
-				"Suggestion 9",
-				"Suggestion 10",
-				"Suggestion 11",
-				"Suggestion 12",
-				"Suggestion 13",
-				"Suggestion 14",
-				"Suggestion 15",
-				"Suggestion 16",
-				"Suggestion 17",
-				"Suggestion 18"
-			]}
+							"Suggestion 1",
+							"Suggestion 2",
+							"Suggestion 3",
+							"Suggestion 4",
+							"Suggestion 5",
+							"Suggestion 6",
+							"Suggestion 7",
+							"Suggestion 8",
+							"Suggestion 9",
+							"Suggestion 10",
+							"Suggestion 11",
+							"Suggestion 12",
+							"Suggestion 13",
+							"Suggestion 14",
+							"Suggestion 15",
+							"Suggestion 16",
+							"Suggestion 17",
+							"Suggestion 18"
+						]}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
 						<f-div slot="description" padding="none" gap="none"
@@ -736,25 +736,25 @@ export const Prefix = {
 						icon-right="i-delete"
 						prefix="+91"
 						.suggestions=${[
-				"Suggestion 1",
-				"Suggestion 2",
-				"Suggestion 3",
-				"Suggestion 4",
-				"Suggestion 5",
-				"Suggestion 6",
-				"Suggestion 7",
-				"Suggestion 8",
-				"Suggestion 9",
-				"Suggestion 10",
-				"Suggestion 11",
-				"Suggestion 12",
-				"Suggestion 13",
-				"Suggestion 14",
-				"Suggestion 15",
-				"Suggestion 16",
-				"Suggestion 17",
-				"Suggestion 18"
-			]}
+							"Suggestion 1",
+							"Suggestion 2",
+							"Suggestion 3",
+							"Suggestion 4",
+							"Suggestion 5",
+							"Suggestion 6",
+							"Suggestion 7",
+							"Suggestion 8",
+							"Suggestion 9",
+							"Suggestion 10",
+							"Suggestion 11",
+							"Suggestion 12",
+							"Suggestion 13",
+							"Suggestion 14",
+							"Suggestion 15",
+							"Suggestion 16",
+							"Suggestion 17",
+							"Suggestion 18"
+						]}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
 						<f-div slot="description" padding="none" gap="none">This is a demo for prefix</f-div>
@@ -789,25 +789,25 @@ export const Suffix = {
 						prefix="+91"
 						suffix="Delete"
 						.suggestions=${[
-				"Suggestion 1",
-				"Suggestion 2",
-				"Suggestion 3",
-				"Suggestion 4",
-				"Suggestion 5",
-				"Suggestion 6",
-				"Suggestion 7",
-				"Suggestion 8",
-				"Suggestion 9",
-				"Suggestion 10",
-				"Suggestion 11",
-				"Suggestion 12",
-				"Suggestion 13",
-				"Suggestion 14",
-				"Suggestion 15",
-				"Suggestion 16",
-				"Suggestion 17",
-				"Suggestion 18"
-			]}
+							"Suggestion 1",
+							"Suggestion 2",
+							"Suggestion 3",
+							"Suggestion 4",
+							"Suggestion 5",
+							"Suggestion 6",
+							"Suggestion 7",
+							"Suggestion 8",
+							"Suggestion 9",
+							"Suggestion 10",
+							"Suggestion 11",
+							"Suggestion 12",
+							"Suggestion 13",
+							"Suggestion 14",
+							"Suggestion 15",
+							"Suggestion 16",
+							"Suggestion 17",
+							"Suggestion 18"
+						]}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
 						<f-div slot="description" padding="none" gap="none">This is a demo for suffix</f-div>
@@ -843,25 +843,25 @@ export const MaxLength = {
 						suffix="Delete"
 						max-length="10"
 						.suggestions=${[
-				"Suggestion 1",
-				"Suggestion 2",
-				"Suggestion 3",
-				"Suggestion 4",
-				"Suggestion 5",
-				"Suggestion 6",
-				"Suggestion 7",
-				"Suggestion 8",
-				"Suggestion 9",
-				"Suggestion 10",
-				"Suggestion 11",
-				"Suggestion 12",
-				"Suggestion 13",
-				"Suggestion 14",
-				"Suggestion 15",
-				"Suggestion 16",
-				"Suggestion 17",
-				"Suggestion 18"
-			]}
+							"Suggestion 1",
+							"Suggestion 2",
+							"Suggestion 3",
+							"Suggestion 4",
+							"Suggestion 5",
+							"Suggestion 6",
+							"Suggestion 7",
+							"Suggestion 8",
+							"Suggestion 9",
+							"Suggestion 10",
+							"Suggestion 11",
+							"Suggestion 12",
+							"Suggestion 13",
+							"Suggestion 14",
+							"Suggestion 15",
+							"Suggestion 16",
+							"Suggestion 17",
+							"Suggestion 18"
+						]}
 					>
 						<f-div slot="label" padding="none" gap="none">Label</f-div>
 						<f-text slot="help" variant="para" size="small">This is a Subtext (Helper Text)</f-text>
@@ -885,7 +885,7 @@ export const Flags = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${[0, 1, 2, 3].map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-suggest
             value=${value}
             placeholder="Write here"
@@ -896,39 +896,40 @@ export const Flags = {
             ?clear=${item === 2 ? true : false}
             ?read-only=${item === 3 ? true : false}
       .suggestions=${[
-					"Suggestion 1",
-					"Suggestion 2",
-					"Suggestion 3",
-					"Suggestion 4",
-					"Suggestion 5",
-					"Suggestion 6",
-					"Suggestion 7",
-					"Suggestion 8",
-					"Suggestion 9",
-					"Suggestion 10",
-					"Suggestion 11",
-					"Suggestion 12",
-					"Suggestion 13",
-					"Suggestion 14",
-					"Suggestion 15",
-					"Suggestion 16",
-					"Suggestion 17",
-					"Suggestion 18"
-				]}
+				"Suggestion 1",
+				"Suggestion 2",
+				"Suggestion 3",
+				"Suggestion 4",
+				"Suggestion 5",
+				"Suggestion 6",
+				"Suggestion 7",
+				"Suggestion 8",
+				"Suggestion 9",
+				"Suggestion 10",
+				"Suggestion 11",
+				"Suggestion 12",
+				"Suggestion 13",
+				"Suggestion 14",
+				"Suggestion 15",
+				"Suggestion 16",
+				"Suggestion 17",
+				"Suggestion 18"
+			]}
           >
-            <f-div slot="label" padding="none" gap="none">${item === 0
-					? "Loader"
-					: item === 1
-						? "Disabled"
-						: item === 2
-							? "Clear Icon on Type"
-							: "Readonly"
-				}</f-div>
+            <f-div slot="label" padding="none" gap="none">${
+							item === 0
+								? "Loader"
+								: item === 1
+								? "Disabled"
+								: item === 2
+								? "Clear Icon on Type"
+								: "Readonly"
+						}</f-div>
             <f-text slot="help" variant="para" size="small">This is a Subtext (Helper Text)</f-text>
           </f-suggest></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-core/f-switch.stories.js b/stories/flow-core/f-switch.stories.js
index 34eb5a36f..0d997adb3 100644
--- a/stories/flow-core/f-switch.stories.js
+++ b/stories/flow-core/f-switch.stories.js
@@ -89,7 +89,7 @@ export const Value = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${values.map(
-			item => html`<f-div padding="medium">
+					item => html`<f-div padding="medium">
            <f-switch
               size="medium"
               .value=${item}
@@ -104,7 +104,7 @@ export const Value = {
             </f-switch></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -124,7 +124,7 @@ export const Size = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${sizes.map(
-			item => html`<f-div padding="small">
+					item => html`<f-div padding="small">
          <f-switch
               .size=${item}
               .value=${value}
@@ -139,7 +139,7 @@ export const Size = {
             </f-switch></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -162,11 +162,11 @@ export const State = {
 		return html`
 			<f-div direction="column" gap="medium">
 				${states.map(
-			item =>
-				html` <f-div align="middle-center" padding="large" gap="medium">
+					item =>
+						html` <f-div align="middle-center" padding="large" gap="medium">
 							${item.map(
-					state =>
-						html`<f-div padding="small"
+								state =>
+									html`<f-div padding="small"
 										><f-switch size="medium" .value=${value} .state=${state} @input=${handleValue}>
 											<f-div padding="none" align="middle-center" slot="label">
 												<f-text variant="para" size="small">Switch (state="${state}")</f-text>
@@ -176,9 +176,9 @@ export const State = {
 											</f-div>
 										</f-switch></f-div
 									>`
-				)}
+							)}
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -197,7 +197,7 @@ export const Flags = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${[0].map(
-			item => html`<f-div>
+					item => html`<f-div>
          <f-switch
               size="medium"
               .value=${value}
@@ -213,7 +213,7 @@ export const Flags = {
             </f-switch></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-core/f-tab.stories.js b/stories/flow-core/f-tab.stories.js
index 6de9f9add..954d2d54c 100644
--- a/stories/flow-core/f-tab.stories.js
+++ b/stories/flow-core/f-tab.stories.js
@@ -35,14 +35,14 @@ export const Playground = {
 					node-width=${args["node-width"]}
 				>
 					${array.map(
-			item =>
-				html` <f-tab-node
+						item =>
+							html` <f-tab-node
 								?active=${selected === item ? true : false}
 								content-id=${`tab-${item}`}
 								@click=${() => handleChange(item)}
 								@keyup=${e => {
-						if (e.key === "Enter") handleChange(item);
-					}}
+									if (e.key === "Enter") handleChange(item);
+								}}
 								><f-div width="100%" height="100%" align="middle-center" direction="column"
 									><f-div align="middle-center" height="hug-content" width="hug-content"
 										>Tab ${item}</f-div
@@ -51,10 +51,10 @@ export const Playground = {
 									></f-div
 								></f-tab-node
 							>`
-		)}</f-tab
+					)}</f-tab
 				>
 				${array.map(
-			item => html`
+					item => html`
 						<f-tab-content
 							id=${`tab-${item}`}
 							.transition=${args["tab-content-transition"]}
@@ -80,7 +80,7 @@ export const Playground = {
 							></f-tab-content
 						>
 					`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -147,12 +147,12 @@ export const Variant = {
 
 		return html`<f-div direction="column">
 			${variants.map(
-			variant =>
-				html` <f-div direction="column" height="fill-container" overflow="visible">
+				variant =>
+					html` <f-div direction="column" height="fill-container" overflow="visible">
 						<f-tab .variant=${variant} node-width="fill">
 							${array.map(
-					item =>
-						html` <f-tab-node
+								item =>
+									html` <f-tab-node
 										?active=${selected === item ? true : false}
 										content-id=${`tab-${variant}-${item}`}
 										@click=${() => handleChange(item)}
@@ -164,10 +164,10 @@ export const Variant = {
 											></f-div
 										></f-tab-node
 									>`
-				)}</f-tab
+							)}</f-tab
 						>
 						${array.map(
-					item => html`
+							item => html`
 								<f-tab-content id=${`tab-${variant}-${item}`}
 									><f-div direction="column" width="100%" padding="large"
 										><f-div
@@ -190,9 +190,9 @@ export const Variant = {
 									></f-tab-content
 								>
 							`
-				)}
+						)}
 					</f-div>`
-		)}</f-div
+			)}</f-div
 		> `;
 	},
 
@@ -237,8 +237,8 @@ export const Direction = {
 			>
 				<f-tab .direction=${selectedDirection} node-width="fill">
 					${array.map(
-			item =>
-				html` <f-tab-node
+						item =>
+							html` <f-tab-node
 								?active=${selected === item ? true : false}
 								content-id=${`tab-${selectedDirection}-${item}`}
 								@click=${() => handleChange(item)}
@@ -250,10 +250,10 @@ export const Direction = {
 									></f-div
 								></f-tab-node
 							>`
-		)}</f-tab
+					)}</f-tab
 				>
 				${array.map(
-			item => html`
+					item => html`
                     <f-tab-content id=${`tab-${selectedDirection}-${item}`}
                       ><f-div direction="column" width="100%" padding="large"
                         ><f-div
@@ -277,7 +277,7 @@ export const Direction = {
                       ></f-tab-content
                     >
             </f-div>`
-		)}</f-div
+				)}</f-div
 			>
 		`;
 	},
@@ -323,8 +323,8 @@ export const NodeWidth = {
 			<f-div direction="column" height="fill-container" overflow="visible">
 				<f-tab node-width=${selectedWidth}>
 					${array.map(
-			item =>
-				html` <f-tab-node
+						item =>
+							html` <f-tab-node
 								?active=${selected === item ? true : false}
 								content-id=${`tab-${selectedWidth}-${item}`}
 								@click=${() => handleChange(item)}
@@ -336,10 +336,10 @@ export const NodeWidth = {
 									></f-div
 								></f-tab-node
 							>`
-		)}</f-tab
+					)}</f-tab
 				>
 				${array.map(
-			item => html`
+					item => html`
                     <f-tab-content id=${`tab-${selectedWidth}-${item}`}
                       ><f-div direction="column" width="100%" padding="large"
                         ><f-div
@@ -363,7 +363,7 @@ export const NodeWidth = {
                       ></f-tab-content
                     >
             </f-div>`
-		)}</f-div
+				)}</f-div
 			>
 		`;
 	},
@@ -443,8 +443,8 @@ export const Alignment = {
 			>
 				<f-tab .alignment=${selectedAlignment} .direction=${selectedDirection}>
 					${array.map(
-					item =>
-						html` <f-tab-node
+						item =>
+							html` <f-tab-node
 								?active=${selected === item ? true : false}
 								content-id=${`tab-${selectedAlignment}-${item}`}
 								@click=${() => handleChange(item)}
@@ -456,7 +456,7 @@ export const Alignment = {
 									></f-div
 								></f-tab-node
 							>`
-				)}</f-tab
+					)}</f-tab
 				>
 				${array.map(
 					item => html`
diff --git a/stories/flow-core/f-text-area.stories.js b/stories/flow-core/f-text-area.stories.js
index 0caf17045..270ba67aa 100644
--- a/stories/flow-core/f-text-area.stories.js
+++ b/stories/flow-core/f-text-area.stories.js
@@ -147,7 +147,7 @@ export const Category = {
 		return html`
 			<f-div width="100%" align="middle-center" padding="large" gap="medium">
 				${categories.map(
-			item => html`<f-div>
+					item => html`<f-div>
            <f-text-area
               category=${item}
               placeholder="This is a textarea"
@@ -160,7 +160,7 @@ export const Category = {
             </f-text-area></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -236,7 +236,7 @@ export const Size = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${sizes.map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-text-area
               placeholder="This is a textarea"
               size=${item}
@@ -248,7 +248,7 @@ export const Size = {
             </f-text-area></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -271,11 +271,11 @@ export const State = {
 		return html`
 			<f-div direction="column" gap="medium">
 				${states.map(
-			item =>
-				html` <f-div align="middle-center" padding="large" gap="medium">
+					item =>
+						html` <f-div align="middle-center" padding="large" gap="medium">
 							${item.map(
-					state =>
-						html`<f-div>
+								state =>
+									html`<f-div>
 										<f-text-area
 											placeholder="This is a textarea"
 											size="medium"
@@ -289,9 +289,9 @@ export const State = {
 											<f-text slot="help" variant="para" size="small">This is subtext</f-text>
 										</f-text-area></f-div
 									>`
-				)}
+							)}
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -368,7 +368,7 @@ export const Flags = {
 		return html`
 			<f-div width="100%" align="top-center" padding="large" gap="medium">
 				${["Resizable", "Disabled", "Clear Icon on Type", "Readonly", "Mask Value"].map(
-			item => html`<f-div>
+					item => html`<f-div>
           <f-text-area
             value=${value}
             placeholder="Write here"
@@ -386,7 +386,7 @@ export const Flags = {
           </f-text-area></f-div
         ></f-div
       >`
-		)}
+				)}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-core/f-text.stories.ts b/stories/flow-core/f-text.stories.ts
index 47959ae09..de6b784b0 100644
--- a/stories/flow-core/f-text.stories.ts
+++ b/stories/flow-core/f-text.stories.ts
@@ -250,7 +250,7 @@ export const Weight = {
 			<f-text variant="para" size="large" weight="medium">weight of variant="heading"</f-text>
 			<f-divider></f-divider>
 			${["regular", "medium", "bold"].map(weight => {
-			return html` <f-div gap="medium" padding="medium" align="middle-center">
+				return html` <f-div gap="medium" padding="medium" align="middle-center">
 					<f-div height="hug-content" padding="none" align="middle-center">
 						<f-text variant="heading" size="x-large" .weight=${weight}>x-large ${weight}</f-text>
 					</f-div>
@@ -267,12 +267,12 @@ export const Weight = {
 						<f-text variant="heading" size="x-small" .weight=${weight}>x-small ${weight}</f-text>
 					</f-div>
 				</f-div>`;
-		})}
+			})}
 
 			<f-text variant="para" size="large" weight="medium">weight of variant="para"</f-text>
 			<f-divider></f-divider>
 			${["regular", "medium", "bold"].map(weight => {
-			return html` <f-div gap="medium" padding="medium" align="middle-center">
+				return html` <f-div gap="medium" padding="medium" align="middle-center">
 					<f-div height="hug-content" padding="none" align="middle-center">
 						<f-text variant="para" size="x-large" .weight=${weight}>x-large ${weight}</f-text>
 					</f-div>
@@ -289,11 +289,11 @@ export const Weight = {
 						<f-text variant="para" size="x-small" .weight=${weight}>x-small</f-text>
 					</f-div>
 				</f-div>`;
-		})}
+			})}
 			<f-text variant="para" size="large" weight="medium">weight of variant="code"</f-text>
 			<f-divider></f-divider>
 			${["regular", "medium", "bold"].map(weight => {
-			return html`<f-div gap="medium" padding="medium" align="middle-center">
+				return html`<f-div gap="medium" padding="medium" align="middle-center">
 					<f-div height="hug-content" padding="none" align="middle-center">
 						<f-text variant="code" size="x-large" .weight=${weight}>x-large ${weight}</f-text>
 					</f-div>
@@ -310,7 +310,7 @@ export const Weight = {
 						<f-text variant="code" size="x-small" .weight=${weight}>x-small</f-text>
 					</f-div>
 				</f-div>`;
-		})}
+			})}
 		</f-div>`,
 
 	name: "weight"
diff --git a/stories/flow-core/f-toast.stories.js b/stories/flow-core/f-toast.stories.js
index 44a48fac8..60b668482 100644
--- a/stories/flow-core/f-toast.stories.js
+++ b/stories/flow-core/f-toast.stories.js
@@ -41,8 +41,8 @@ export const Playground = {
 					<f-button label="add toast" icon-right="i-plus" @click=${() => add()}></f-button>
 				</f-div>
 				${toastList?.length > 0
-				? toastList?.map((item, index) => {
-					return html`<f-toast
+					? toastList?.map((item, index) => {
+							return html`<f-toast
 								.state=${args.state}
 								.duration=${args.duration}
 								.type=${args.type}
@@ -64,7 +64,7 @@ export const Playground = {
 										>
 									</f-div>
 									${item % 2 === 0
-							? html` <f-div direction="row" gap="medium">
+										? html` <f-div direction="row" gap="medium">
 												<f-button
 													label="button 1"
 													state="neutral"
@@ -78,11 +78,11 @@ export const Playground = {
 													variant="round"
 												></f-button>
 										  </f-div>`
-							: ""}
+										: ""}
 								</f-div>
 							</f-toast>`;
-				})
-				: ""}
+					  })
+					: ""}
 			</f-div>
 		`;
 	},
@@ -145,8 +145,8 @@ export const Type = {
 					<f-button label="add toast" icon-right="i-plus" @click=${() => add()}></f-button>
 				</f-div>
 				${values.map(
-			item =>
-				html`<f-div>
+					item =>
+						html`<f-div>
 							<f-toast .type=${item} .close-button=${true}
 								><f-div direction="column" gap="medium">
 									<f-div direction="column" gap="x-small">
@@ -163,7 +163,7 @@ export const Type = {
 								</f-div></f-toast
 							>
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -198,8 +198,8 @@ export const Duration = {
 					></f-button>
 				</f-div>
 				${values.map(
-			item =>
-				html`<f-div>
+					item =>
+						html`<f-div>
 							<f-toast .type=${item} .close-button=${true} .duration=${2000}
 								><f-div direction="column" gap="medium">
 									<f-div direction="column" gap="x-small">
@@ -216,7 +216,7 @@ export const Duration = {
 								</f-div></f-toast
 							>
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -251,8 +251,8 @@ export const State = {
 					></f-button>
 				</f-div>
 				${values.map(
-			item =>
-				html`<f-div>
+					item =>
+						html`<f-div>
 							<f-toast .type=${item} .close-button=${true} .duration=${5000} .state=${item}
 								><f-div direction="column" gap="medium">
 									<f-div direction="column" gap="x-small">
@@ -269,7 +269,7 @@ export const State = {
 								</f-div></f-toast
 							>
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
@@ -304,8 +304,8 @@ export const Flags = {
 					></f-button>
 				</f-div>
 				${values.map(
-			item =>
-				html`<f-div>
+					item =>
+						html`<f-div>
 							<f-toast .close-button=${item} .duration=${5000} state="primary" type="persists"
 								><f-div direction="column" gap="medium">
 									<f-div direction="column" gap="x-small">
@@ -322,7 +322,7 @@ export const Flags = {
 								</f-div></f-toast
 							>
 						</f-div>`
-		)}
+				)}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-core/f-tooltip.stories.ts b/stories/flow-core/f-tooltip.stories.ts
index 3f599e3b2..44d547f04 100644
--- a/stories/flow-core/f-tooltip.stories.ts
+++ b/stories/flow-core/f-tooltip.stories.ts
@@ -215,10 +215,10 @@ export const Placement = {
 		return html`
 			<f-div height="hug-content" gap="large" direction="column">
 				${dummyPlacementArray.map(item => {
-			return html`
+					return html`
 						<f-div height="hug-content" gap="auto" direction="row">
 							${item.map(main => {
-				return html`
+								return html`
 									<f-tooltip placement=${main.placement} id=${main.placement}>
 										<f-text variant="para" size="small" id="tooltip-text">
 											This is a tooltip
@@ -226,10 +226,10 @@ export const Placement = {
 									>
 									<f-button tooltip=${`#${main.placement}`} label=${main.title}> </f-button>
 								`;
-			})}
+							})}
 						</f-div>
 					`;
-		})}
+				})}
 			</f-div>
 		`;
 	},
diff --git a/stories/flow-dashboard/f-timeseries-chart.stories.ts b/stories/flow-dashboard/f-timeseries-chart.stories.ts
index ab09a35f3..bb3d281b6 100644
--- a/stories/flow-dashboard/f-timeseries-chart.stories.ts
+++ b/stories/flow-dashboard/f-timeseries-chart.stories.ts
@@ -99,7 +99,7 @@ export const AllOptions = {
 					const icons = ["i-area", "i-bar", "i-line"];
 					return html`<f-div height="hug-content" gap="medium" align="middle-center">
 						${chartData.map((series, idx) => {
-						return html`<f-div
+							return html`<f-div
 								.id=${"legend-" + series.seriesName}
 								class="timeseries-legend"
 								width="hug-content"
@@ -119,7 +119,7 @@ export const AllOptions = {
 								></f-icon-button>
 								<f-text>${series.seriesName}</f-text></f-div
 							>`;
-					})}
+						})}
 					</f-div>`;
 				}
 			},
@@ -132,10 +132,10 @@ export const AllOptions = {
 					gap="small"
 				>
 					${tooltipPoints.map(point => {
-					return html`<f-text weight="medium" .state=${"custom," + point.color}
+						return html`<f-text weight="medium" .state=${"custom," + point.color}
 							>${point.seriesName} : ${point?.value}</f-text
 						>`;
-				})}
+					})}
 					<f-divider state="subtle"></f-divider>
 					<f-div align="middle-right" gap="x-small">
 						<f-text inline variant="code" size="small">
@@ -214,7 +214,7 @@ export const CustomLegendTemplate = {
 					const icons = ["i-user", "i-home", "i-computer"];
 					return html`<f-div height="hug-content" align="middle-center">
 						${chartData.map((series, idx) => {
-						return html`<f-div
+							return html`<f-div
 								.id=${"legend-" + series.seriesName}
 								class="timeseries-legend"
 								width="hug-content"
@@ -235,7 +235,7 @@ export const CustomLegendTemplate = {
 								></f-icon-button>
 								<f-text .state=${"custom," + series.color}>${series.seriesName}</f-text></f-div
 							>`;
-					})}
+						})}
 					</f-div>`;
 				}
 			}
@@ -292,10 +292,10 @@ export const CustomTooltip = {
 					gap="small"
 				>
 					${tooltipPoints.map(point => {
-					return html`<f-text weight="medium" .state=${"custom," + point.color}
+						return html`<f-text weight="medium" .state=${"custom," + point.color}
 							>${point.seriesName} : ${point?.value}</f-text
 						>`;
-				})}
+					})}
 					<f-divider state="subtle"></f-divider>
 					<f-div align="middle-right" gap="x-small">
 						<f-text inline variant="code" size="small">
diff --git a/stories/flow-form-builder/f-form-builder.stories.js b/stories/flow-form-builder/f-form-builder.stories.js
index ac31c7f36..cc41e1c81 100644
--- a/stories/flow-form-builder/f-form-builder.stories.js
+++ b/stories/flow-form-builder/f-form-builder.stories.js
@@ -62,10 +62,10 @@ export const Playground = {
 					.size=${args.size}
 					.gap=${args.gap}
 					.label=${{
-				title: "Form label",
-				description: "Description about form",
-				iconTooltip: "Form more info"
-			}}
+						title: "Form label",
+						description: "Description about form",
+						iconTooltip: "Form more info"
+					}}
 					@submit=${handleSubmit}
 					@input=${handleInput}
 					@keydown=${handleKeydown}
diff --git a/stories/flow-form-builder/validations.stories.ts b/stories/flow-form-builder/validations.stories.ts
index 260a7a6ab..dc5ec23ff 100644
--- a/stories/flow-form-builder/validations.stories.ts
+++ b/stories/flow-form-builder/validations.stories.ts
@@ -200,8 +200,8 @@ export const Playground = {
 				.size=${args.size}
 				.gap=${args.gap}
 				.label=${{
-				title: "Main form label"
-			}}
+					title: "Main form label"
+				}}
 				@submit=${handleSubmit}
 				@input=${handleInput}
 				@keydown=${handleKeydown}
diff --git a/stories/flow-lineage/htmlinjection-test.stories.ts b/stories/flow-lineage/htmlinjection-test.stories.ts
index 2e8e55ea3..ceaef405e 100644
--- a/stories/flow-lineage/htmlinjection-test.stories.ts
+++ b/stories/flow-lineage/htmlinjection-test.stories.ts
@@ -328,13 +328,13 @@ export const Playground = {
 					.padding=${28}
 					.gap=${100}
 					.node-size=${{
-				width: 200,
-				height: 52
-			}}
+						width: 200,
+						height: 52
+					}}
 					.children-node-size=${{
-				width: 200,
-				height: 32
-			}}
+						width: 200,
+						height: 32
+					}}
 					.max-children=${8}
 					.node-template=${nodeTemplate}
 					.children-node-template=${childNodeTemplate}
diff --git a/stories/flow-lineage/node-details-template.stories.js b/stories/flow-lineage/node-details-template.stories.js
index 1fd3b38a8..345dc19cc 100644
--- a/stories/flow-lineage/node-details-template.stories.js
+++ b/stories/flow-lineage/node-details-template.stories.js
@@ -243,10 +243,10 @@ export const NodeDetails = {
 						<!--End : node-details header section  -->
 						<!--Start : node-details tab-bar section  -->
 						${array?.length > 0
-				? html` <f-tab data-f-id="Tab bar - regular">
+							? html` <f-tab data-f-id="Tab bar - regular">
 									${array.map(
-					item =>
-						html` <f-tab-node
+										item =>
+											html` <f-tab-node
 												?active=${selected === item ? true : false}
 												content-id=${`tab-${item}`}
 												@click=${() => handleChangeTab(item)}
@@ -254,20 +254,20 @@ export const NodeDetails = {
 													<f-text>${item}</f-text>
 												</f-div></f-tab-node
 											>`
-				)}</f-tab
+									)}</f-tab
 							  >`
-				: ""}
+							: ""}
 						<!--End : node-details tab-bar section  -->
 						<!--Start : node-details content section  -->
 						<f-div data-f-id="content-section" direction="column" overflow="scroll">
 							${tabData &&
-			Object.entries(tabData).map(
-				([name, config], idx) =>
-					html` <f-tab-content id=${`tab-${name}`}>
+							Object.entries(tabData).map(
+								([name, config], idx) =>
+									html` <f-tab-content id=${`tab-${name}`}>
 										${name === "Table Details"
-							? html` <f-div padding="medium" direction="column">
+											? html` <f-div padding="medium" direction="column">
 													${Object.entries(config).map(
-								([configName, configValue], idx) => html`
+														([configName, configValue], idx) => html`
 															<f-div width="fill-container" direction="row" padding="medium none">
 																<f-div width="30%"
 																	><f-text variant="para" size="small" weight="bold"
@@ -276,54 +276,54 @@ export const NodeDetails = {
 																>
 																<f-div width="fill-container">
 																	${configValue?.type === "text"
-										? html` <f-text variant="para" size="small" weight="regular"
+																		? html` <f-text variant="para" size="small" weight="regular"
 																				>${configValue?.value}</f-text
 																		  >`
-										: configValue?.type === "tag"
-											? html`<f-tag size="small" label=${configValue?.value} state="primary" icon-left=${configValue?.iconLeft}></f-tab>`
-											: html`<f-text variant="para" size="small" weight="regular"
+																		: configValue?.type === "tag"
+																		? html`<f-tag size="small" label=${configValue?.value} state="primary" icon-left=${configValue?.iconLeft}></f-tab>`
+																		: html`<f-text variant="para" size="small" weight="regular"
 																				><a>${configValue?.value} +8 more</a></f-text
 																		  >`}</f-div
 																>
 															</f-div>
 														`
-							)}</f-div
+													)}</f-div
 											  >`
-							: html`
+											: html`
 													<f-div padding="medium" direction="column">
 														${Object.entries(config).map(
-								([configName, configValue], idx) =>
-									html` <f-div
+															([configName, configValue], idx) =>
+																html` <f-div
 																	width="fill-container"
 																	direction="row"
 																	padding="medium none"
 																>
 																	${configName !== "codeSnippet"
-											? html` <f-div width="30%"
+																		? html` <f-div width="30%"
 																				><f-text variant="para" size="small" weight="bold"
 																					>${configName}</f-text
 																				></f-div
 																		  >`
-											: ""}
+																		: ""}
 																	<f-div width="fill-container">
 																		${configValue?.type === "text"
-											? html` <f-text variant="para" size="small" weight="regular"
+																			? html` <f-text variant="para" size="small" weight="regular"
 																					>${configValue?.value}</f-text
 																			  >`
-											: configValue?.type === "tag"
-												? html`<f-tag size="small" label=${configValue?.value} state="primary" icon-left=${configValue?.iconLeft}></f-tab>`
-												: configValue?.type === "code"
-													? html`${configValue.value}`
-													: html`<f-text variant="para" size="small" weight="regular"
+																			: configValue?.type === "tag"
+																			? html`<f-tag size="small" label=${configValue?.value} state="primary" icon-left=${configValue?.iconLeft}></f-tab>`
+																			: configValue?.type === "code"
+																			? html`${configValue.value}`
+																			: html`<f-text variant="para" size="small" weight="regular"
 																					><a>${configValue?.value} +8 more</a></f-text
 																			  >`}</f-div
 																	>
 																</f-div>`
-							)}
+														)}
 													</f-div>
 											  `}
 									</f-tab-content>`
-			)}
+							)}
 						</f-div>
 						<!--End : node-details content section  -->
 					</f-div>
diff --git a/stories/flow-log/f-log.stories.ts b/stories/flow-log/f-log.stories.ts
index 026012b3e..7630b59f7 100644
--- a/stories/flow-log/f-log.stories.ts
+++ b/stories/flow-log/f-log.stories.ts
@@ -43,17 +43,17 @@ export const Playground = {
 			>
 				<f-div width="220px" direction="column">
 					${[
-				{ icon: "i-download", text: "Download" },
-				{
-					icon: "i-indent",
-					text: "Indent"
-				},
-				{
-					icon: "i-expand-3",
-					text: "Expand"
-				}
-			].map(op => {
-				return html`<f-div
+						{ icon: "i-download", text: "Download" },
+						{
+							icon: "i-indent",
+							text: "Indent"
+						},
+						{
+							icon: "i-expand-3",
+							text: "Expand"
+						}
+					].map(op => {
+						return html`<f-div
 							state="secondary"
 							padding="medium"
 							gap="medium"
@@ -63,7 +63,7 @@ export const Playground = {
 							<f-icon size="small" .source=${op.icon}></f-icon>
 							<f-text variant="para" size="medium" weight="regular">${op.text}</f-text>
 						</f-div>`;
-			})}
+					})}
 				</f-div>
 			</f-popover>
 			<f-div>
diff --git a/stories/flow-table/f-table.stories.ts b/stories/flow-table/f-table.stories.ts
index c34749472..07af69c82 100644
--- a/stories/flow-table/f-table.stories.ts
+++ b/stories/flow-table/f-table.stories.ts
@@ -36,21 +36,21 @@ export const Playground = {
 				>
 					<f-trow slot="header">
 						${[1, 2, 3, 4, 5].map(cellNumber => {
-			return html`<f-tcell @click=${testOverrideClick}> Header ${cellNumber} </f-tcell>`;
-		})}
+							return html`<f-tcell @click=${testOverrideClick}> Header ${cellNumber} </f-tcell>`;
+						})}
 					</f-trow>
 					${[1, 2, 3, 4, 5].map(_rowNumber => {
-			return html`<f-trow>
+						return html`<f-trow>
 							<f-div padding="large" slot="details">
 								<f-text variant="heading" size="x-large">This is details slot</f-text>
 							</f-div>
 							${[1, 2, 3, 4, 5].map(cellNumber => {
-				return html`<f-tcell>
+								return html`<f-tcell>
 									<f-text> Column ${cellNumber} </f-text>
 								</f-tcell>`;
-			})}
+							})}
 						</f-trow>`;
-		})}
+					})}
 				</f-table>
 			</f-div>
 		`;
@@ -111,25 +111,25 @@ export const Variant = {
 	render: () =>
 		html`<f-div direction="column" state="subtle" padding="small" gap="large"
 			>${["stripped", "outlined", "underlined", "bordered"].map(
-			variant =>
-				html`<f-text>variant="${variant}"</f-text
+				variant =>
+					html`<f-text>variant="${variant}"</f-text
 						><f-table .variant=${variant}>
 							<f-trow slot="header">
 								${[1, 2, 3, 4, 5].map(cellNumber => {
-					return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-				})}
+									return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+								})}
 							</f-trow>
 							${[1, 2, 3, 4, 5].map(() => {
-					return html`<f-trow>
+								return html`<f-trow>
 									${[1, 2, 3, 4, 5].map(cellNumber => {
-						return html`<f-tcell>
+										return html`<f-tcell>
 											<f-text> Column ${cellNumber} </f-text>
 										</f-tcell>`;
-					})}
+									})}
 								</f-trow>`;
-				})} </f-table
+							})} </f-table
 						><f-divider></f-divider>`
-		)}</f-div
+			)}</f-div
 		>`,
 
 	name: "variant"
@@ -139,25 +139,25 @@ export const Size = {
 	render: () =>
 		html`<f-div direction="column" state="subtle" padding="small" gap="large"
 			>${["small", "medium"].map(
-			size =>
-				html`<f-text>size="${size}"</f-text
+				size =>
+					html`<f-text>size="${size}"</f-text
 						><f-table .size=${size}>
 							<f-trow slot="header">
 								${[1, 2, 3, 4, 5].map(cellNumber => {
-					return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-				})}
+									return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+								})}
 							</f-trow>
 							${[1, 2, 3, 4, 5].map(() => {
-					return html`<f-trow>
+								return html`<f-trow>
 									${[1, 2, 3, 4, 5].map(cellNumber => {
-						return html`<f-tcell>
+										return html`<f-tcell>
 											<f-text> Column ${cellNumber} </f-text>
 										</f-tcell>`;
-					})}
+									})}
 								</f-trow>`;
-				})} </f-table
+							})} </f-table
 						><f-divider></f-divider>`
-		)}</f-div
+			)}</f-div
 		>`,
 
 	name: "size"
@@ -167,25 +167,25 @@ export const Selectable = {
 	render: () =>
 		html`<f-div direction="column" state="subtle" padding="small" gap="large"
 			>${["single", "multiple", "none"].map(
-			selectable =>
-				html`<f-text>selectable="${selectable}"</f-text
+				selectable =>
+					html`<f-text>selectable="${selectable}"</f-text
 						><f-table .selectable=${selectable}>
 							<f-trow slot="header">
 								${[1, 2, 3, 4, 5].map(cellNumber => {
-					return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-				})}
+									return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+								})}
 							</f-trow>
 							${[1, 2, 3, 4, 5].map(() => {
-					return html`<f-trow>
+								return html`<f-trow>
 									${[1, 2, 3, 4, 5].map(cellNumber => {
-						return html`<f-tcell>
+										return html`<f-tcell>
 											<f-text> Column ${cellNumber} </f-text>
 										</f-tcell>`;
-					})}
+									})}
 								</f-trow>`;
-				})} </f-table
+							})} </f-table
 						><f-divider></f-divider>`
-		)}</f-div
+			)}</f-div
 		>`,
 
 	name: "selectable"
@@ -195,25 +195,25 @@ export const HighlightSelected = {
 	render: () =>
 		html`<f-div direction="column" state="subtle" padding="small" gap="large"
 			>${[true, false].map(
-			highlightSelected =>
-				html`<f-text>${highlightSelected ? "highlight-selected" : ""}</f-text
+				highlightSelected =>
+					html`<f-text>${highlightSelected ? "highlight-selected" : ""}</f-text
 						><f-table .highlightSelected=${highlightSelected} selectable="multiple">
 							<f-trow slot="header">
 								${[1, 2, 3, 4, 5].map(cellNumber => {
-					return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-				})}
+									return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+								})}
 							</f-trow>
 							${[1, 2, 3, 4, 5].map(rowNumber => {
-					return html`<f-trow .selected=${rowNumber === 3}>
+								return html`<f-trow .selected=${rowNumber === 3}>
 									${[1, 2, 3, 4, 5].map(cellNumber => {
-						return html`<f-tcell>
+										return html`<f-tcell>
 											<f-text> Column ${cellNumber} </f-text>
 										</f-tcell>`;
-					})}
+									})}
 								</f-trow>`;
-				})} </f-table
+							})} </f-table
 						><f-divider></f-divider>`
-		)}</f-div
+			)}</f-div
 		>`,
 
 	name: "highlight-selected"
@@ -223,25 +223,25 @@ export const HighlightHover = {
 	render: () =>
 		html`<f-div direction="column" state="subtle" padding="small" gap="large"
 			>${[true, false].map(
-			highlightHover =>
-				html`<f-text>${highlightHover ? "highlight-hover" : ""}</f-text
+				highlightHover =>
+					html`<f-text>${highlightHover ? "highlight-hover" : ""}</f-text
 						><f-table .highlightHover=${highlightHover}>
 							<f-trow slot="header">
 								${[1, 2, 3, 4, 5].map(cellNumber => {
-					return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-				})}
+									return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+								})}
 							</f-trow>
 							${[1, 2, 3, 4, 5].map(() => {
-					return html`<f-trow>
+								return html`<f-trow>
 									${[1, 2, 3, 4, 5].map(cellNumber => {
-						return html`<f-tcell>
+										return html`<f-tcell>
 											<f-text> Column ${cellNumber} </f-text>
 										</f-tcell>`;
-					})}
+									})}
 								</f-trow>`;
-				})} </f-table
+							})} </f-table
 						><f-divider></f-divider>`
-		)}</f-div
+			)}</f-div
 		>`,
 
 	name: "highlight-hover"
@@ -252,25 +252,25 @@ export const HighlightColumnHover = {
 		html`<f-div direction="column" state="subtle" padding="small" gap="large">
 			<f-text state="warning">Hover on column header to see result</f-text>
 			${[true, false].map(
-			highlightColumnHover =>
-				html`<f-text>${highlightColumnHover ? "highlight-column-hover" : ""}</f-text
+				highlightColumnHover =>
+					html`<f-text>${highlightColumnHover ? "highlight-column-hover" : ""}</f-text
 						><f-table .highlightColumnHover=${highlightColumnHover}>
 							<f-trow slot="header">
 								${[1, 2, 3, 4, 5].map(cellNumber => {
-					return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-				})}
+									return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+								})}
 							</f-trow>
 							${[1, 2, 3, 4, 5].map(() => {
-					return html`<f-trow>
+								return html`<f-trow>
 									${[1, 2, 3, 4, 5].map(cellNumber => {
-						return html`<f-tcell>
+										return html`<f-tcell>
 											<f-text> Column ${cellNumber} </f-text>
 										</f-tcell>`;
-					})}
+									})}
 								</f-trow>`;
-				})} </f-table
+							})} </f-table
 						><f-divider></f-divider>`
-		)}</f-div
+			)}</f-div
 		>`,
 
 	name: "highlight-column-hover"
@@ -299,18 +299,18 @@ export const SelectedRows = {
 				<f-table selectable="multiple" @selected-rows=${selectedRowsHandler}>
 					<f-trow slot="header">
 						${[1, 2, 3, 4, 5].map(cellNumber => {
-			return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-		})}
+							return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+						})}
 					</f-trow>
 					${[1, 2, 3, 4, 5].map(() => {
-			return html`<f-trow>
+						return html`<f-trow>
 							${[1, 2, 3, 4, 5].map(cellNumber => {
-				return html`<f-tcell>
+								return html`<f-tcell>
 									<f-text> Column ${cellNumber} </f-text>
 								</f-tcell>`;
-			})}
+							})}
 						</f-trow>`;
-		})}
+					})}
 				</f-table>
 				<f-divider></f-divider>
 			</f-div>
diff --git a/stories/flow-table/f-tcell.stories.ts b/stories/flow-table/f-tcell.stories.ts
index 32ff83a64..86992cdda 100644
--- a/stories/flow-table/f-tcell.stories.ts
+++ b/stories/flow-table/f-tcell.stories.ts
@@ -18,18 +18,18 @@ export const Playground = {
 			<f-table>
 				<f-trow slot="header">
 					${[1, 2, 3].map(cellNumber => {
-			return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-		})}
+						return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+					})}
 				</f-trow>
 				${[1, 2, 3].map(() => {
-			return html`<f-trow>
+					return html`<f-trow>
 						${[1, 2, 3].map(cellNumber => {
-				return html`<f-tcell .actions=${args.actions}>
+							return html`<f-tcell .actions=${args.actions}>
 								<f-text> Column ${cellNumber} </f-text>
 							</f-tcell>`;
-			})}
+						})}
 					</f-trow>`;
-		})}
+				})}
 			</f-table>
 		`;
 	},
@@ -80,35 +80,35 @@ export const Actions = {
 			<f-table>
 				<f-trow slot="header">
 					${[1, 2, 3].map(cellNumber => {
-			return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-		})}
+						return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+					})}
 				</f-trow>
 				${[1, 2, 3].map(() => {
-			return html`<f-trow>
+					return html`<f-trow>
 						${[1, 2, 3].map(cellNumber => {
-				return html`<f-tcell
+							return html`<f-tcell
 								.actions=${cellNumber === 3
-						? [
-							{
-								icon: "i-copy",
-								onClick: () => console.log("i-launch clicked")
-							},
-							{
-								icon: "i-git-branch",
-								onClick: () => console.log("i-launch clicked")
-							},
-							{
-								icon: "i-launch",
-								onClick: () => console.log("i-launch clicked")
-							}
-						]
-						: []}
+									? [
+											{
+												icon: "i-copy",
+												onClick: () => console.log("i-launch clicked")
+											},
+											{
+												icon: "i-git-branch",
+												onClick: () => console.log("i-launch clicked")
+											},
+											{
+												icon: "i-launch",
+												onClick: () => console.log("i-launch clicked")
+											}
+									  ]
+									: []}
 							>
 								<f-text> Column ${cellNumber} </f-text>
 							</f-tcell>`;
-			})}
+						})}
 					</f-trow>`;
-		})}
+				})}
 			</f-table>
 		</f-div>`,
 
@@ -119,27 +119,27 @@ export const Selected = {
 	render: () =>
 		html`<f-div direction="column" state="subtle" padding="small" gap="large"
 			>${[true].map(
-			() =>
-				html`<f-text>2nd column is selected</f-text
+				() =>
+					html`<f-text>2nd column is selected</f-text
 						><f-table>
 							<f-trow slot="header">
 								${[1, 2, 3].map(cellNumber => {
-					return html`<f-tcell .selected=${cellNumber === 2}>
+									return html`<f-tcell .selected=${cellNumber === 2}>
 										Header ${cellNumber}
 									</f-tcell>`;
-				})}
+								})}
 							</f-trow>
 							${[1, 2, 3].map(() => {
-					return html`<f-trow>
+								return html`<f-trow>
 									${[1, 2, 3].map(cellNumber => {
-						return html`<f-tcell .selected=${cellNumber === 2}>
+										return html`<f-tcell .selected=${cellNumber === 2}>
 											<f-text> Column ${cellNumber} </f-text>
 										</f-tcell>`;
-					})}
+									})}
 								</f-trow>`;
-				})}
+							})}
 						</f-table>`
-		)}</f-div
+			)}</f-div
 		>`,
 
 	name: "selected"
@@ -162,22 +162,22 @@ export const Align = {
 			><f-table variant="bordered">
 				<f-trow slot="header">
 					${alignValues.map(align => {
-			return html`<f-tcell width="300px" .align=${align}> ${align} </f-tcell>`;
-		})}
+						return html`<f-tcell width="300px" .align=${align}> ${align} </f-tcell>`;
+					})}
 					<f-tcell> Cell with height </f-tcell>
 				</f-trow>
 				${[1, 2, 3].map(() => {
-			return html`<f-trow>
+					return html`<f-trow>
 						${alignValues.map(align => {
-				return html`<f-tcell .align=${align}>
+							return html`<f-tcell .align=${align}>
 								<f-text inline> align="${align}" </f-text>
 							</f-tcell>`;
-			})}
+						})}
 						<f-tcell>
 							<f-div height="200px"></f-div>
 						</f-tcell>
 					</f-trow>`;
-		})}
+				})}
 			</f-table></f-div
 		>`;
 	},
@@ -197,30 +197,30 @@ export const HighlightColumn = {
 
 		return html`<f-div direction="column" state="subtle" padding="small" gap="large"
 				>${[true].map(
-			() =>
-				html`<f-text>Hover on header cell, it will trigger 'highlight-column' event </f-text>
+					() =>
+						html`<f-text>Hover on header cell, it will trigger 'highlight-column' event </f-text>
 							<f-table>
 								<f-trow slot="header">
 									${[1, 2, 3].map(cellNumber => {
-					return html`<f-tcell
+										return html`<f-tcell
 											@highlight-column=${highlightColumnHandler}
 											.selected=${cellNumber === 2}
 										>
 											Hover to Highlight ${cellNumber}
 										</f-tcell>`;
-				})}
+									})}
 								</f-trow>
 								${[1, 2, 3].map(() => {
-					return html`<f-trow>
+									return html`<f-trow>
 										${[1, 2, 3].map(cellNumber => {
-						return html`<f-tcell .selected=${cellNumber === 2}>
+											return html`<f-tcell .selected=${cellNumber === 2}>
 												<f-text> Column ${cellNumber} </f-text>
 											</f-tcell>`;
-					})}
+										})}
 									</f-trow>`;
-				})}
+								})}
 							</f-table> `
-		)}
+				)}
 			</f-div>
 			<br />
 			<f-divider></f-divider>
@@ -244,30 +244,30 @@ export const SelectedColumn = {
 
 		return html`<f-div direction="column" state="subtle" padding="small" gap="large"
 				>${[true].map(
-			() =>
-				html`<f-text>Click on header cell, it will trigger 'selected-column' event </f-text>
+					() =>
+						html`<f-text>Click on header cell, it will trigger 'selected-column' event </f-text>
 							<f-table>
 								<f-trow slot="header">
 									${[1, 2, 3].map(cellNumber => {
-					return html`<f-tcell
+										return html`<f-tcell
 											@selected-column=${selectedColumnHandler}
 											.selected=${cellNumber === 2}
 										>
 											Click to select ${cellNumber}
 										</f-tcell>`;
-				})}
+									})}
 								</f-trow>
 								${[1, 2, 3].map(() => {
-					return html`<f-trow>
+									return html`<f-trow>
 										${[1, 2, 3].map(cellNumber => {
-						return html`<f-tcell .selected=${cellNumber === 2}>
+											return html`<f-tcell .selected=${cellNumber === 2}>
 												<f-text> Column ${cellNumber} </f-text>
 											</f-tcell>`;
-					})}
+										})}
 									</f-trow>`;
-				})}
+								})}
 							</f-table> `
-		)}
+				)}
 			</f-div>
 			<br />
 			<f-divider></f-divider>
diff --git a/stories/flow-table/f-trow.stories.ts b/stories/flow-table/f-trow.stories.ts
index ef43dbb14..96c81f000 100644
--- a/stories/flow-table/f-trow.stories.ts
+++ b/stories/flow-table/f-trow.stories.ts
@@ -25,11 +25,11 @@ export const Playground = {
 			<f-table selectable="multiple" @selected-rows=${handleSelectedRows}>
 				<f-trow slot="header">
 					${[1, 2, 3, 4, 5].map(cellNumber => {
-			return html`<f-tcell @click=${testOverrideClick}> Header ${cellNumber} </f-tcell>`;
-		})}
+						return html`<f-tcell @click=${testOverrideClick}> Header ${cellNumber} </f-tcell>`;
+					})}
 				</f-trow>
 				${[1, 2, 3, 4, 5].map(() => {
-			return html`<f-trow
+					return html`<f-trow
 						.disableSelection=${args["disable-selection"]}
 						.state=${args.state}
 						.open=${args.open}
@@ -39,12 +39,12 @@ export const Playground = {
 							<f-text variant="heading" size="x-large">This is details slot</f-text>
 						</f-div>
 						${[1, 2, 3, 4, 5].map(cellNumber => {
-				return html`<f-tcell>
+							return html`<f-tcell>
 								<f-text> Column ${cellNumber} </f-text>
 							</f-tcell>`;
-			})}
+						})}
 					</f-trow>`;
-		})}
+				})}
 			</f-table>
 		`;
 	},
@@ -93,25 +93,25 @@ export const State = {
 	render: () =>
 		html`<f-div direction="column" state="subtle" padding="small" gap="large"
 			>${["primary", "neutral", "success", "warning", "danger", "inherit", "default"].map(
-			state =>
-				html`<f-text>state="${state}"</f-text
+				state =>
+					html`<f-text>state="${state}"</f-text
 						><f-table>
 							<f-trow slot="header">
 								${[1, 2, 3, 4, 5].map(cellNumber => {
-					return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-				})}
+									return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+								})}
 							</f-trow>
 							${[1, 2, 3, 4, 5].map(() => {
-					return html`<f-trow .state=${state}>
+								return html`<f-trow .state=${state}>
 									${[1, 2, 3, 4, 5].map(cellNumber => {
-						return html`<f-tcell>
+										return html`<f-tcell>
 											<f-text> Column ${cellNumber} </f-text>
 										</f-tcell>`;
-					})}
+									})}
 								</f-trow>`;
-				})} </f-table
+							})} </f-table
 						><f-divider></f-divider>`
-		)}</f-div
+			)}</f-div
 		>`,
 
 	name: "state"
@@ -121,28 +121,28 @@ export const Open = {
 	render: () =>
 		html`<f-div direction="column" state="subtle" padding="small" gap="large"
 			>${[true, false].map(
-			open =>
-				html`<f-text>${open ? "open" : "--"}</f-text
+				open =>
+					html`<f-text>${open ? "open" : "--"}</f-text
 						><f-table>
 							<f-trow slot="header">
 								${[1, 2, 3, 4, 5].map(cellNumber => {
-					return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-				})}
+									return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+								})}
 							</f-trow>
 							${[1, 2, 3, 4, 5].map(() => {
-					return html`<f-trow .open=${open}>
+								return html`<f-trow .open=${open}>
 									<f-div padding="large" slot="details">
 										<f-text variant="heading" size="x-large">This is details slot</f-text>
 									</f-div>
 									${[1, 2, 3, 4, 5].map(cellNumber => {
-						return html`<f-tcell>
+										return html`<f-tcell>
 											<f-text> Column ${cellNumber} </f-text>
 										</f-tcell>`;
-					})}
+									})}
 								</f-trow>`;
-				})} </f-table
+							})} </f-table
 						><f-divider></f-divider>`
-		)}</f-div
+			)}</f-div
 		>`,
 
 	name: "open"
@@ -152,28 +152,28 @@ export const Selected = {
 	render: () =>
 		html`<f-div direction="column" state="subtle" padding="small" gap="large"
 			>${[true, false].map(
-			selected =>
-				html`<f-text>${selected ? "selected" : "--"}</f-text
+				selected =>
+					html`<f-text>${selected ? "selected" : "--"}</f-text
 						><f-table selectable="multiple">
 							<f-trow slot="header">
 								${[1, 2, 3, 4, 5].map(cellNumber => {
-					return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-				})}
+									return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+								})}
 							</f-trow>
 							${[1, 2, 3, 4, 5].map(() => {
-					return html`<f-trow .selected=${selected}>
+								return html`<f-trow .selected=${selected}>
 									<f-div padding="large" slot="details">
 										<f-text variant="heading" size="x-large">This is details slot</f-text>
 									</f-div>
 									${[1, 2, 3, 4, 5].map(cellNumber => {
-						return html`<f-tcell>
+										return html`<f-tcell>
 											<f-text> Column ${cellNumber} </f-text>
 										</f-tcell>`;
-					})}
+									})}
 								</f-trow>`;
-				})} </f-table
+							})} </f-table
 						><f-divider></f-divider>`
-		)}</f-div
+			)}</f-div
 		>`,
 
 	name: "selected"
@@ -184,21 +184,21 @@ export const ExpandIconPosition = {
 			><f-table>
 				<f-trow slot="header">
 					${[1, 2].map(cellNumber => {
-			return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-		})}
+						return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+					})}
 				</f-trow>
 				${["left", "right"].map(iconPos => {
-			return html`<f-trow expand-icon-position="${iconPos}">
+					return html`<f-trow expand-icon-position="${iconPos}">
 						<f-div padding="large" slot="details">
 							<f-text variant="heading" size="x-large">This is details slot</f-text>
 						</f-div>
 						${[1, 2].map(() => {
-				return html`<f-tcell>
+							return html`<f-tcell>
 								<f-text> ${iconPos} icon position </f-text>
 							</f-tcell>`;
-			})}
+						})}
 					</f-trow>`;
-		})}
+				})}
 			</f-table></f-div
 		>`,
 
@@ -220,21 +220,21 @@ export const SelectedRow = {
 				<f-table selectable="multiple">
 					<f-trow slot="header">
 						${[1, 2, 3, 4, 5].map(cellNumber => {
-			return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-		})}
+							return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+						})}
 					</f-trow>
 					${[1, 2, 3, 4, 5].map(() => {
-			return html`<f-trow @selected-row=${selectedRowHandler}>
+						return html`<f-trow @selected-row=${selectedRowHandler}>
 							<f-div padding="large" slot="details">
 								<f-text variant="heading" size="x-large">This is details slot</f-text>
 							</f-div>
 							${[1, 2, 3, 4, 5].map(cellNumber => {
-				return html`<f-tcell>
+								return html`<f-tcell>
 									<f-text> Column ${cellNumber} </f-text>
 								</f-tcell>`;
-			})}
+							})}
 						</f-trow>`;
-		})}
+					})}
 				</f-table>
 				<f-divider></f-divider>
 			</f-div>
@@ -263,21 +263,21 @@ export const ToggleRow = {
 				<f-table selectable="multiple">
 					<f-trow slot="header">
 						${[1, 2, 3, 4, 5].map(cellNumber => {
-			return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
-		})}
+							return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
+						})}
 					</f-trow>
 					${[1, 2, 3, 4, 5].map(() => {
-			return html`<f-trow @toggle-row=${toggleRowHandler}>
+						return html`<f-trow @toggle-row=${toggleRowHandler}>
 							<f-div padding="large" slot="details">
 								<f-text variant="heading" size="x-large">This is details slot</f-text>
 							</f-div>
 							${[1, 2, 3, 4, 5].map(cellNumber => {
-				return html`<f-tcell>
+								return html`<f-tcell>
 									<f-text> Column ${cellNumber} </f-text>
 								</f-tcell>`;
-			})}
+							})}
 						</f-trow>`;
-		})}
+					})}
 				</f-table>
 				<f-divider></f-divider>
 			</f-div>
diff --git a/stories/utils/register-icons.js b/stories/utils/register-icons.js
index f1f71fd0f..c4c825bc3 100644
--- a/stories/utils/register-icons.js
+++ b/stories/utils/register-icons.js
@@ -14,4 +14,4 @@ ConfigUtil.setConfig({
 	}
 });
 
-export { };
+export {};