@youngonesworks/ui 0.1.42 → 0.1.45

package/dist/index.cjs

@@ -100215,6 +100215,8 @@ const AccordionItem = ({ controlContent, panelContent, style: style$1 = "light",
 //#endregion
 //#region src/components/accordion/AccordionWrapper.tsx
 const AccordionWrapper = ({ children, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	"data-testid": "accordion-wrapper",
+	"data-component": "accordionWrapper",
 	className: cn(className, "flex flex-col gap-2"),
 	children
 });
@@ -103003,13 +103005,14 @@ Alert.displayName = "Alert";
 const AppleAppButtonIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 	viewBox: "0 0 198 66",
 	fill: "none",
-	"data-component": "AppleAppButtonIcon",
+	"data-testid": "AppleAppButtonIcon",
 	xmlns: "http://www.w3.org/2000/svg",
 	...props,
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
 		clipPath: "url(#clip0_890_9231)",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("mask", {
 			id: "mask0_890_9231",
+			"data-testid": "apple-icon-mask",
 			style: { maskType: "luminance" },
 			maskUnits: "userSpaceOnUse",
 			x: 0,
@@ -103024,10 +103027,12 @@ const AppleAppButtonIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs
 			mask: "url(#mask0_890_9231)",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					"data-testid": "apple-icon-path-1",
 					d: "M181.76 0.000213943H15.7354C15.1303 0.000213943 14.5323 0.000213943 13.9288 0.00350538C13.4235 0.00679681 12.9223 0.0163585 12.4122 0.024406C11.304 0.03741 10.1984 0.13463 9.10507 0.31522C8.01324 0.499742 6.95563 0.847618 5.96798 1.34708C4.98154 1.85077 4.08019 2.50527 3.29665 3.28682C2.509 4.06618 1.85244 4.967 1.3522 5.95468C0.850583 6.94038 0.502759 7.99664 0.320743 9.08699C0.136996 10.176 0.0381201 11.2775 0.0250025 12.3817C0.00968747 12.8863 0.00807013 13.3926 0 13.8972V51.9366C0.00807013 52.4476 0.00968747 52.9427 0.0250025 53.4538C0.0381241 54.558 0.137 55.6595 0.320743 56.7484C0.502256 57.8394 0.850101 58.8962 1.3522 59.8823C1.85221 60.8668 2.50888 61.764 3.29665 62.539C4.07723 63.324 4.97915 63.979 5.96798 64.4788C6.95561 64.9796 8.01312 65.3296 9.10507 65.5169C10.1986 65.696 11.3041 65.7933 12.4122 65.808C12.9223 65.8191 13.4235 65.8255 13.9288 65.8255C14.5323 65.8288 15.1303 65.8288 15.7354 65.8288H181.76C182.352 65.8288 182.955 65.8288 183.548 65.8255C184.051 65.8255 184.567 65.8191 185.07 65.808C186.176 65.7941 187.28 65.6969 188.37 65.5169C189.466 65.3282 190.527 64.9784 191.52 64.4788C192.507 63.9787 193.408 63.3237 194.189 62.539C194.975 61.761 195.632 60.8644 196.139 59.8823C196.637 58.8955 196.981 57.8387 197.161 56.7484C197.344 55.6594 197.446 54.5581 197.467 53.4538C197.473 52.9427 197.473 52.4476 197.473 51.9366C197.486 51.3388 197.486 50.7442 197.486 50.1366V15.694C197.486 15.0913 197.486 14.4935 197.473 13.8972C197.473 13.3926 197.473 12.8863 197.467 12.3816C197.446 11.2773 197.344 10.1761 197.161 9.08692C196.981 7.9972 196.637 6.94102 196.139 5.95461C195.12 3.97494 193.504 2.36351 191.52 1.34694C190.527 0.848691 189.466 0.500906 188.37 0.315072C187.28 0.133686 186.176 0.0364325 185.07 0.0241756C184.567 0.0161445 184.051 0.00650058 183.548 0.00329142C182.955 0 182.352 0.000213943 181.76 0.000213943Z",
 					fill: "#A6A6A6"
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					"data-testid": "apple-icon-path-2",
 					d: "M13.9369 64.3888C13.4341 64.3888 12.9434 64.3824 12.4446 64.3711C11.4111 64.3577 10.38 64.268 9.35986 64.1028C8.4086 63.9394 7.48707 63.6355 6.62569 63.201C5.7722 62.7703 4.99375 62.2054 4.32016 61.528C3.63684 60.8586 3.06793 60.0823 2.63598 59.2298C2.19929 58.3717 1.89707 57.4519 1.73986 56.5024C1.57008 55.4824 1.47822 54.4508 1.46507 53.4167C1.45462 53.0697 1.44092 51.914 1.44092 51.914V13.8972C1.44092 13.8972 1.4555 12.7593 1.46515 12.425C1.47774 11.3926 1.56906 10.3627 1.73834 9.3441C1.89585 8.3921 2.1983 7.46967 2.63523 6.60876C3.06558 5.7568 3.63132 4.97988 4.31055 4.30813C4.98901 3.63 5.76994 3.0622 6.62488 2.62544C7.48428 2.19243 8.40406 1.89067 9.3534 1.73027C10.3769 1.56334 11.4116 1.47309 12.4486 1.46028L13.9377 1.44019H183.54L185.047 1.46109C186.074 1.47326 187.1 1.56271 188.114 1.72867C189.074 1.89107 190.002 2.19494 190.872 2.63027C192.584 3.51047 193.978 4.90303 194.857 6.61278C195.287 7.46774 195.585 8.38265 195.74 9.32644C195.912 10.3534 196.008 11.3914 196.027 12.4322C196.032 12.8983 196.032 13.3989 196.032 13.8972C196.045 14.5144 196.045 15.1017 196.045 15.6939V50.1365C196.045 50.7345 196.045 51.3179 196.032 51.9061C196.032 52.4412 196.032 52.9315 196.025 53.4361C196.006 54.4583 195.911 55.4778 195.744 56.4864C195.589 57.4427 195.289 58.3696 194.853 59.2347C194.418 60.078 193.852 60.8477 193.177 61.5151C192.502 62.1962 191.722 62.7644 190.867 63.1979C190.001 63.6356 189.072 63.9407 188.114 64.1028C187.095 64.2688 186.063 64.3587 185.029 64.3711C184.546 64.3824 184.04 64.3888 183.548 64.3888L181.76 64.392L13.9369 64.3888Z",
 					fill: "#1B1C1E"
 				}),
@@ -103127,6 +103132,7 @@ const AppleAppButtonIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs
 		})]
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("clipPath", {
 		id: "clip0_890_9231",
+		"data-testid": "apple-icon-clippath",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
 			width: 197.486,
 			height: 65.8286,
@@ -103141,6 +103147,7 @@ const TextInput = react.default.forwardRef(({ rightSection, leftSection, classNa
 	const [showPassword, setShowPassword] = react.default.useState(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-component": "TextInput",
+		"data-testid": "TextInput",
 		className: clsx_default("relative", wrapperClassName),
 		children: [
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
@@ -103179,10 +103186,12 @@ const TextInput = react.default.forwardRef(({ rightSection, leftSection, classNa
 					password && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "absolute inset-y-0 right-4 flex content-center items-center justify-center align-middle text-sm font-medium text-black",
 						children: showPassword ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconEyeCheck, {
+							"data-testid": "password-visibility-toggle",
 							className: "cursor-pointer text-gray-500",
 							size: 15,
 							onClick: () => setShowPassword(false)
 						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconEyeOff, {
+							"data-testid": "password-visibility-toggle",
 							className: "cursor-pointer text-gray-500",
 							size: 15,
 							onClick: () => setShowPassword(true)
@@ -103231,15 +103240,16 @@ const radiusFormatter = {
 	12: "rounded-3xl",
 	100: "rounded-full"
 };
-const Avatar = ({ src, alt = "", size: size$3 = 50, radius = 100 }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const Avatar = ({ src, alt = "", size: size$3 = 50, radius = 100, "data-testid": dataTestId = "avatar" }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-component": "Avatar",
-	"data-testid": "avatar",
+	"data-testid": dataTestId,
 	children: src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 		src,
 		className: cn("aspect-square appearance-none object-cover", radiusFormatter[radius]),
 		alt,
 		width: size$3,
-		height: size$3
+		height: size$3,
+		"data-testid": "avatar-img"
 	})
 });
 Avatar.displayName = "Avatar";
@@ -103249,6 +103259,7 @@ Avatar.displayName = "Avatar";
 const AvatarIndicator = ({ indicatorCount, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	className: cn("inline-flex h-5 min-w-5 flex-col items-center justify-center gap-2.5 rounded border-2 border-solid border-white bg-blue-950 px-1.5", className),
 	"data-component": "AvatarIndicator",
+	"data-testid": "AvatarIndicator",
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "font-['Gotham'] text-[10px] leading-[10px] font-bold text-white",
 		children: `+${indicatorCount}`
@@ -103257,9 +103268,10 @@ const AvatarIndicator = ({ indicatorCount, className }) => /* @__PURE__ */ (0, r
 
 //#endregion
 //#region src/components/badge/index.tsx
-const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, mobile = false, badgeBorder = false,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, mobile = false, badgeBorder = false, fullWidth = false, leftSection, rightSection, children,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+	"data-testid": "badge",
 	"data-component": "Badge",
-	className: clsx_default("inline-flex h-[1.375rem] max-w-full place-content-center items-center p-[10px] align-middle text-xs leading-[20px] font-medium tracking-wide text-wrap whitespace-normal normal-case", mobile ? "rounded-s" : "rounded-[2rem]", badgeBorder && {
+	className: clsx_default("inline-flex h-[1.375rem] max-w-full place-content-center items-center p-[10px] align-middle text-xs leading-[20px] font-medium tracking-wide text-wrap whitespace-normal normal-case", mobile ? "rounded-s" : "rounded-[2rem]", fullWidth && "w-full", badgeBorder && {
 		"border-accent-blue": styleVariant === COLOR.ACCENT_BLUE,
 		"border-green-light": styleVariant === COLOR.GREEN_LIGHT,
 		"border-red-500": styleVariant === COLOR.RED,
@@ -103282,10 +103294,21 @@ const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, mobile =
 		"bg-white text-black": styleVariant === COLOR.WHITE
 	}, className),
 	...props,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: cn("block h-5 overflow-hidden text-ellipsis whitespace-nowrap", { "flex items-center": favorite }),
-		children: props.children
-	})
+	children: [
+		leftSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-testid": "left-section",
+			children: leftSection
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"data-testid": "badge-content",
+			className: cn("block h-5 overflow-hidden text-ellipsis whitespace-nowrap", { "flex items-center": favorite }),
+			children
+		}),
+		rightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-testid": "right-section",
+			children: rightSection
+		})
+	]
 });
 Badge.displayName = "Badge";
 
@@ -103293,6 +103316,7 @@ Badge.displayName = "Badge";
 //#region src/components/bigBadge/index.tsx
 const BigBadge = ({ styleVariant = COLOR.GREEN, className, children,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-component": "BigBadge",
+	"data-testid": "big-badge",
 	className: cn("grid h-9 max-w-full min-w-[140px] place-content-center rounded-full border border-solid px-6 py-1 text-sm font-medium whitespace-nowrap lowercase", {
 		"border-green text-green bg-white": styleVariant === COLOR.GREEN,
 		"border-accent-blue text-accent-blue bg-white": styleVariant === COLOR.ACCENT_BLUE,
@@ -103301,9 +103325,8 @@ const BigBadge = ({ styleVariant = COLOR.GREEN, className, children,...props })
 		"border-red-500 bg-white text-red-500": styleVariant === COLOR.RED,
 		"group-hover:bg-red-50": styleVariant === COLOR.RED,
 		"border-gray-200 bg-white text-black": styleVariant === COLOR.WHITE,
-		"": styleVariant === COLOR.WHITE,
-		className
-	}),
+		"": styleVariant === COLOR.WHITE
+	}, className),
 	...props,
 	children
 });
@@ -103451,10 +103474,12 @@ Button.displayName = "Button";
 //#endregion
 //#region src/components/checkbox/index.tsx
 const CheckboxComponent = ({ size: size$3 = "md", className, error: error$1, mediumBoldText, label, labelClassName, indeterminate = false, disabled = false,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	"data-testid": "checkbox-wrapper",
 	className: cn("relative grid gap-2", className),
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 		className: cn("flex cursor-pointer items-center gap-3", labelClassName),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-testid": `checkbox-container-${size$3}`,
 			className: cn("relative grid shrink-0 place-content-center", size$3 === "sm" ? "size-4" : "size-5"),
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -103466,6 +103491,7 @@ const CheckboxComponent = ({ size: size$3 = "md", className, error: error$1, med
 					ref
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					"data-testid": "checkbox-checkmark",
 					className: cn("pointer-events-none absolute top-1/2 left-1/2 hidden -translate-x-1/2 -translate-y-1/2 stroke-white outline-hidden peer-checked:block", { "stroke-gray-300": disabled }, size$3 === "sm" ? "size-3" : "size-4"),
 					xmlns: "http://www.w3.org/2000/svg",
 					viewBox: "0 0 24 24",
@@ -103477,6 +103503,7 @@ const CheckboxComponent = ({ size: size$3 = "md", className, error: error$1, med
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" })
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					"data-testid": "checkbox-indeterminate",
 					className: cn("pointer-events-none absolute left-1/2 hidden -translate-x-1/2 -translate-y-1/2 stroke-black outline-hidden", { "stroke-gray-300": disabled }, size$3 === "sm" ? "top-[60%] size-3" : "top-1/2 size-4", { block: indeterminate }),
 					xmlns: "http://www.w3.org/2000/svg",
 					viewBox: "0 0 24 24",
@@ -103494,7 +103521,8 @@ const CheckboxComponent = ({ size: size$3 = "md", className, error: error$1, med
 				})
 			]
 		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: cn("grow text-sm font-normal", { "font-medium": mediumBoldText }),
+			"data-testid": "checkbox-label",
+			className: cn("grow text-sm font-normal", labelClassName, { "font-medium": mediumBoldText }),
 			children: label
 		})]
 	}), error$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
@@ -103578,10 +103606,12 @@ const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, fi
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "grid justify-end gap-3",
+		"data-testid": "filters-component",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex items-center justify-end gap-3",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "text-sm font-medium",
+				"data-testid": "filters-title",
 				children: selectedFiltersText
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterButton, {
 				onClick: () => setShowFilters(!showFilters),
@@ -103592,6 +103622,8 @@ const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, fi
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: content,
+			"data-testid": "filters-items-container",
+			"data-visible": showFilters,
 			className: cn("flex flex-wrap justify-end gap-2 overflow-hidden opacity-0 ease-in-out [transition:max-height_0.4s,opacity_0.3s]", showFilters && "opacity-100"),
 			style: { maxHeight: showFilters ? `${content?.current?.scrollHeight}px` : "0px" },
 			children: filters.map((filter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterItem, {
@@ -103609,18 +103641,22 @@ const GoogleAppButtonIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx
 	viewBox: "0 0 224 66",
 	fill: "none",
 	xmlns: "http://www.w3.org/2000/svg",
+	"data-testid": "googleAppButtonIcon",
 	"data-component": "googleAppButtonIcon",
 	...props,
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+		"data-testid": "google-app-icon-g",
 		clipPath: "url(#clip0_890_9261)",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				"data-testid": "google-app-icon-path",
 				fillRule: "evenodd",
 				clipRule: "evenodd",
 				d: "M215.718 65.8286H8.73944C4.17466 65.8286 0.457031 62.1186 0.457031 57.6V8.22857C0.457031 3.69363 4.17466 0 8.73944 0H215.718C220.278 0 224 3.69363 224 8.22857V57.6C224 62.1186 220.278 65.8286 215.718 65.8286Z",
 				fill: "#1B1C1E"
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				"data-testid": "google-app-icon-path",
 				fillRule: "evenodd",
 				clipRule: "evenodd",
 				d: "M215.718 1.31739C219.545 1.31739 222.679 4.42415 222.679 8.22857V57.6C222.679 61.4045 219.566 64.5112 215.718 64.5112H8.73944C4.91079 64.5112 1.77712 61.4045 1.77712 57.6V8.22857C1.77712 4.42415 4.89022 1.31739 8.73944 1.31739H215.718ZM215.718 0H8.73944C4.17466 0 0.457031 3.71004 0.457031 8.22857V57.6C0.457031 62.1349 4.17466 65.8286 8.73944 65.8286H215.718C220.278 65.8286 224 62.1349 224 57.6V8.22857C224 3.71004 220.278 0 215.718 0Z",
@@ -103682,110 +103718,113 @@ const GoogleAppButtonIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx
 				fill: "white"
 			})
 		]
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("defs", { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
-			id: "paint0_linear_890_9261",
-			x1: 36.405,
-			y1: 14.3285,
-			x2: 3.68775,
-			y2: 23.0638,
-			gradientUnits: "userSpaceOnUse",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#00A0FF" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-					offset: .00657,
-					stopColor: "#00A1FF"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-					offset: .2601,
-					stopColor: "#00BEFF"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-					offset: .5122,
-					stopColor: "#00D2FF"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-					offset: .7604,
-					stopColor: "#00DFFF"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-					offset: 1,
-					stopColor: "#00E3FF"
-				})
-			]
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
-			id: "paint1_linear_890_9261",
-			x1: 56.253,
-			y1: 32.9142,
-			x2: 16.3504,
-			y2: 32.9142,
-			gradientUnits: "userSpaceOnUse",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#FFE000" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-					offset: .4087,
-					stopColor: "#FFBD00"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-					offset: .7754,
-					stopColor: "#FFA500"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-					offset: 1,
-					stopColor: "#FF9C00"
-				})
-			]
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
-			id: "paint2_linear_890_9261",
-			x1: 41.3981,
-			y1: 36.6951,
-			x2: 15.2049,
-			y2: 80.8704,
-			gradientUnits: "userSpaceOnUse",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#FF3A44" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-				offset: 1,
-				stopColor: "#C31162"
-			})]
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
-			id: "paint3_linear_890_9261",
-			x1: 12.4868,
-			y1: .294332,
-			x2: 24.1726,
-			y2: 20.0238,
-			gradientUnits: "userSpaceOnUse",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#32A071" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-					offset: .0685,
-					stopColor: "#2DA771"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-					offset: .4762,
-					stopColor: "#15CF74"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-					offset: .8009,
-					stopColor: "#06E775"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("defs", {
+		"data-testid": "google-app-icon-defs",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+				id: "paint0_linear_890_9261",
+				x1: 36.405,
+				y1: 14.3285,
+				x2: 3.68775,
+				y2: 23.0638,
+				gradientUnits: "userSpaceOnUse",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#00A0FF" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: .00657,
+						stopColor: "#00A1FF"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: .2601,
+						stopColor: "#00BEFF"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: .5122,
+						stopColor: "#00D2FF"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: .7604,
+						stopColor: "#00DFFF"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: 1,
+						stopColor: "#00E3FF"
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+				id: "paint1_linear_890_9261",
+				x1: 56.253,
+				y1: 32.9142,
+				x2: 16.3504,
+				y2: 32.9142,
+				gradientUnits: "userSpaceOnUse",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#FFE000" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: .4087,
+						stopColor: "#FFBD00"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: .7754,
+						stopColor: "#FFA500"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: 1,
+						stopColor: "#FF9C00"
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+				id: "paint2_linear_890_9261",
+				x1: 41.3981,
+				y1: 36.6951,
+				x2: 15.2049,
+				y2: 80.8704,
+				gradientUnits: "userSpaceOnUse",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#FF3A44" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
 					offset: 1,
-					stopColor: "#00F076"
+					stopColor: "#C31162"
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+				id: "paint3_linear_890_9261",
+				x1: 12.4868,
+				y1: .294332,
+				x2: 24.1726,
+				y2: 20.0238,
+				gradientUnits: "userSpaceOnUse",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#32A071" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: .0685,
+						stopColor: "#2DA771"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: .4762,
+						stopColor: "#15CF74"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: .8009,
+						stopColor: "#06E775"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: 1,
+						stopColor: "#00F076"
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("clipPath", {
+				id: "clip0_890_9261",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+					width: 223.543,
+					height: 65.8286,
+					fill: "white",
+					transform: "translate(0.457031)"
 				})
-			]
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("clipPath", {
-			id: "clip0_890_9261",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
-				width: 223.543,
-				height: 65.8286,
-				fill: "white",
-				transform: "translate(0.457031)"
 			})
-		})
-	] })]
+		]
+	})]
 });
 
 //#endregion
@@ -103800,9 +103839,18 @@ const HamburgerMenuButton = (0, react.forwardRef)(({ menuState, setMenuState },
 		"aria-label": "Mobile Menu button",
 		ref,
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn(defaultClasses, "top-0 left-0 w-6", { "translation top-1/2 translate-y-[-50%] rotate-45 transform duration-150 ease-in": menuState }) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn(defaultClasses, "top-1/2 right-0 w-4 translate-y-[-50%]", { "translation opacity-0 ease-in": menuState }) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn(defaultClasses, "bottom-0 left-0 w-6", { "translation top-1/2 translate-y-[-50%] -rotate-45 transform duration-150 ease-in": menuState }) })
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-testid": "hamburger-line-top",
+				className: cn(defaultClasses, "top-0 left-0 w-6", { "translation top-1/2 translate-y-[-50%] rotate-45 transform duration-150 ease-in": menuState })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-testid": "hamburger-line-middle",
+				className: cn(defaultClasses, "top-1/2 right-0 w-4 translate-y-[-50%]", { "translation opacity-0 ease-in": menuState })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-testid": "hamburger-line-bottom",
+				className: cn(defaultClasses, "bottom-0 left-0 w-6", { "translation top-1/2 translate-y-[-50%] -rotate-45 transform duration-150 ease-in": menuState })
+			})
 		]
 	});
 });
@@ -103819,8 +103867,10 @@ HR.displayName = "HR";
 //#endregion
 //#region src/components/island/index.tsx
 const Island = ({ children, className, noShadow = false, noPadding = false,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	"data-testid": "island",
 	"data-component": "island",
-	className: cn("relative bg-white px-5 py-5 shadow-[0_-0.5rem_2rem_rgba(38,41,92,0.04)] md:px-10 md:py-9", {
+	className: cn("relative bg-white px-5 py-5 md:px-10 md:py-9", {
+		"shadow-[0_-0.5rem_2rem_rgba(38,41,92,0.04)]": !noShadow,
 		"drop-shadow-none": noShadow,
 		"md:px-0 md:py-0": noPadding
 	}, className),
@@ -103833,6 +103883,7 @@ Island.displayName = "Island";
 //#region src/components/label/index.tsx
 const Label = ({ children, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 	"data-component": "label",
+	"data-testid": "label",
 	className: cn("flex items-center gap-1 text-xs font-medium text-black", className),
 	...props,
 	children
@@ -103841,8 +103892,12 @@ const Label = ({ children, className,...props }) => /* @__PURE__ */ (0, react_js
 //#endregion
 //#region src/components/loader/index.tsx
 const Loader = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	"data-testid": "loader-container",
 	className: "inline-flex h-full w-auto items-center justify-center",
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "loader" })
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-testid": "loader",
+		className: "loader"
+	})
 });
 Loader.displayName = "Loader";
 
@@ -103852,12 +103907,14 @@ const LogoBlack = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg",
 	viewBox: "0 0 110 68",
 	fill: "none",
 	"data-component": "logo",
+	"data-testid": "logo",
 	xmlns: "http://www.w3.org/2000/svg",
 	...props,
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
 		clipPath: "url(#clip0_2069_36940)",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				"data-testid": "logo-path",
 				d: "M109.937 0C109.936 0.125784 109.934 0.251569 109.934 0.377356C109.934 2.23291 109.934 4.08846 109.934 5.94402C109.934 6.33238 109.962 6.30387 109.579 6.30497C109.305 6.30575 109.031 6.30512 108.757 6.30512C72.6623 6.30512 36.5679 6.30514 0.473486 6.30452C0.315656 6.30452 0.157829 6.29536 0 6.29047C2.53566e-06 4.19365 2.53566e-06 2.09682 2.53566e-06 0C36.6456 0 73.2911 0 109.937 0Z",
 				fill: "#10D1BB"
 			}),
@@ -103904,10 +103961,12 @@ const LogoBlack = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg",
 		]
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("clipPath", {
 		id: "clip0_2069_36940",
+		"data-testid": "logo-clip-path",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
 			width: 110,
 			height: 68,
-			fill: "white"
+			fill: "white",
+			"data-testid": "logo-clip-rect"
 		})
 	}) })]
 });
@@ -104002,6 +104061,7 @@ const Modal = ({ title, children, withCloseButton = true, opened, additionalClas
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children }),
 					gradient && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
+						"data-testid": "modal-gradient",
 						className: "absolute bottom-0 left-0 mt-8 mb-0 h-2! w-full border-none",
 						style: { backgroundImage: "linear-gradient(90deg, var(--color-light-blue) 0%, var(--color-primary) 50.52%, var(--color-pink) 100%)" }
 					})
@@ -104053,6 +104113,7 @@ const NumberField = ({ name, value = 0, max: max$2, min: min$2 = 0, isDisabled,
 		if (value > 0) onChange?.(value - 1);
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-testid": "number-field-container",
 		className: `inline-flex flex-col ${className}`,
 		children: [
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
@@ -104066,6 +104127,7 @@ const NumberField = ({ name, value = 0, max: max$2, min: min$2 = 0, isDisabled,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						onClick: handleDecrement,
+						disabled: isDisabled,
 						className: "absolute left-0 flex h-full w-8 items-center justify-center rounded-l-md border-r-0 bg-gray-50 text-gray-500 hover:bg-gray-100",
 						children: "-"
 					}),
@@ -104083,6 +104145,7 @@ const NumberField = ({ name, value = 0, max: max$2, min: min$2 = 0, isDisabled,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						onClick: handleIncrement,
+						disabled: isDisabled,
 						className: "absolute right-0 flex h-full w-8 items-center justify-center rounded-r-md bg-gray-50 text-gray-500 hover:bg-gray-100",
 						children: "+"
 					})
@@ -109662,6 +109725,7 @@ const Popover = (0, react.forwardRef)(({ content, children, hoverEnabled = false
 				"w-fit rounded border border-gray-200! bg-white p-5": style$1 === "minimal",
 				"card w-[489px] drop-shadow-xl": style$1 === "card"
 			}),
+			"data-testid": "popover-container",
 			"data-component": "Popover",
 			children: [style$1 === "minimal" && content, style$1 === "card" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "bg-linear-gradient-x pt-[3px]",
@@ -109685,11 +109749,19 @@ const Popover = (0, react.forwardRef)(({ content, children, hoverEnabled = false
 const ProgressBar = ({ value, maxValue = 100, className }) => {
 	const [width, setWidth] = (0, react.useState)(0);
 	(0, react.useEffect)(() => {
-		setWidth(value / maxValue * 100);
+		if (value <= 0) setWidth(0);
+		else if (maxValue <= 0) setWidth(0);
+		else if (value >= maxValue) setWidth(100);
+		else setWidth(value / maxValue * 100);
 	}, [value, maxValue]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: cn("h-2 rounded-lg bg-gray-100", className),
+		role: "progressbar",
+		"aria-valuenow": value,
+		"aria-valuemin": 0,
+		"aria-valuemax": maxValue,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-testid": "progress-bar-fill",
 			className: "h-2 rounded-lg bg-[#27295c] transition-all duration-1000 ease-in-out",
 			style: { width: `${width}%` }
 		})
@@ -109699,6 +109771,7 @@ const ProgressBar = ({ value, maxValue = 100, className }) => {
 //#endregion
 //#region src/components/radioButton/index.tsx
 const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, className, containerClassName, labelClassName,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	"data-testid": "radio-button-container",
 	className: `${containerClassName || "radio-button-container"} relative flex items-start`,
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "relative",
@@ -109707,7 +109780,7 @@ const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, cl
 			id,
 			name,
 			value,
-			onChange,
+			onChange: props.disabled ? undefined : onChange,
 			checked,
 			"data-testid": dataTestId,
 			className: `${clsx_default(className, "ease checked:border-navyBlue checked:bg-navy-blue relative m-0 flex size-5 cursor-pointer appearance-none items-center justify-center rounded-full border border-gray-400 bg-white transition-colors duration-100 focus:ring-0 focus:outline-hidden focus-visible:ring-0", { "cursor-not-allowed opacity-50": props.disabled })}`,
@@ -109829,9 +109902,11 @@ const Rating = ({ rating, ratings, size: size$3 = "normal", setReview, className
 		className: cn("flex flex-col", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-testid": "rating-container",
 				"data-component": "rating",
 				className: "flex flex-row gap-[2px]",
 				children: ratings.map((_$1, index$4) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-testid": `star-item-${index$4}`,
 					className: cn("relative", setReview && "cursor-pointer"),
 					onClick: () => handleStarClick(index$4),
 					onMouseEnter: () => handleHover(index$4),
@@ -109840,8 +109915,10 @@ const Rating = ({ rating, ratings, size: size$3 = "normal", setReview, className
 				}, index$4))
 			}),
 			setReview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mt-4 inline-flex flex-col items-start",
+				"data-testid": "small-stars-container",
+				className: "mt-4 flex flex-col gap-2",
 				children: ratings.map(({ value, label }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					"data-testid": `small-star-item-${value}`,
 					className: "flex w-auto cursor-pointer items-center gap-1",
 					onMouseEnter: () => setHoveredSmallStars(value),
 					onMouseLeave: () => setHoveredSmallStars(0),
@@ -115673,6 +115750,7 @@ const Select = (0, react.forwardRef)(({ options: options$1, placeholder, default
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-component": "Select",
+		"data-testid": "select-container",
 		ref,
 		className: clsx_default("m-0 grid gap-2 p-0", width ? width : fullWidth && "w-full", className),
 		children: [
@@ -115682,6 +115760,7 @@ const Select = (0, react.forwardRef)(({ options: options$1, placeholder, default
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StateManagedSelect$1, {
 				"data-component": "select",
+				"data-testid": "select-input",
 				options: options$1,
 				menuPlacement: "auto",
 				isDisabled,
@@ -115730,6 +115809,7 @@ Select.displayName = "Select";
 //#region src/components/settingsCard/index.tsx
 const SettingsCard = ({ icon, title, link, ManageText, LinkComponent }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	"data-component": "SettingsCard",
+	"data-testid": "settings-card",
 	className: "flex items-center justify-between gap-2 bg-white px-8 py-4 shadow-[0_-0.5rem_2rem_rgba(38,41,92,0.04)] md:px-4 lg:px-8",
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-4",
@@ -115746,19 +115826,22 @@ const SettingsCard = ({ icon, title, link, ManageText, LinkComponent }) => /* @_
 
 //#endregion
 //#region src/components/skeleton/index.tsx
-const Skeleton = ({ className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+const Skeleton = ({ className, "data-testid": dataTestId }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 	"data-component": "genericSkeleton",
+	"data-testid": dataTestId || "skeleton",
 	className: cn("inline-block rounded-md", "animate-pulse bg-gray-100/50", className)
 });
 
 //#endregion
 //#region src/components/skillPill/index.tsx
 const SkillPill = ({ name, number }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	"data-testid": "skill-pill-container",
 	className: "flex items-center rounded-full border border-gray-200 p-[3px]",
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "pr-4 pl-3",
 		children: name
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-testid": "skill-pill-number",
 		className: "bg-turquoise-200 grid h-[30px] min-w-[30px] place-content-center rounded-full px-2.5",
 		children: number
 	})]
@@ -115858,8 +115941,10 @@ const Stepper = ({ steps, setStep = () => {}, variant = "default", clickableStep
 //#endregion
 //#region src/components/stickyMobileButton/index.tsx
 const StickyMobileButtonWrapper = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	"data-testid": "sticky-mobile-button-wrapper",
 	className: "fixed inset-x-0 bottom-0 z-40 w-full bg-white p-8 md:hidden",
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-testid": "sticky-mobile-button-grid",
 		className: "grid place-content-center",
 		children
 	})
@@ -115867,15 +115952,18 @@ const StickyMobileButtonWrapper = ({ children }) => /* @__PURE__ */ (0, react_js
 
 //#endregion
 //#region src/components/table/index.tsx
-const Table = ({ children, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const Table = ({ children, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	"data-testid": "table",
 	"data-component": "table",
 	className: cn("table w-full table-fixed border-collapse overflow-auto", className),
+	...props,
 	children
 });
 
 //#endregion
 //#region src/components/table/tableCell/index.tsx
 const TableCell = ({ children, smallPadding, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	"data-testid": "tableCell",
 	"data-component": "tableCell",
 	className: `${cn("table-cell py-2 align-middle text-sm font-normal first:pl-2 last:pr-2 md:py-0 md:xl:first:pl-10 md:xl:last:pr-10", { "md:xl:first:pl-5 md:xl:last:pr-5": smallPadding }, className)}`,
 	children
@@ -115885,20 +115973,25 @@ const TableCell = ({ children, smallPadding, className }) => /* @__PURE__ */ (0,
 //#region src/components/table/tableHeader/index.tsx
 const TableHeader = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-component": "tableHeader",
+	"data-testid": "tableHeader",
 	className: "table-header-group border-b border-gray-200",
 	children
 });
 
 //#endregion
 //#region src/components/table/tableHeaderItem/index.tsx
-const TableHeaderItem = ({ children, smallPadding, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const TableHeaderItem = ({ children, smallPadding, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	"data-testid": "tableHeaderItem",
+	"data-component": "tableHeaderItem",
 	className: cn("hidden h-10 align-middle text-xs font-medium first:pl-10 last:pr-10 xl:table-cell", { "xl:first:pl-5 xl:last:pr-5": smallPadding }, className),
+	...props,
 	children
 });
 
 //#endregion
 //#region src/components/table/tableHeaderRow/index.tsx
 const TableHeaderRow = ({ children,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	"data-testid": "tableHeaderRow",
 	"data-component": "tableHeaderRow",
 	className: "table-row xl:border-0 xl:border-b xl:border-solid xl:border-gray-300",
 	...props,
@@ -115907,10 +116000,11 @@ const TableHeaderRow = ({ children,...props }) => /* @__PURE__ */ (0, react_jsx_
 
 //#endregion
 //#region src/components/table/tableRow/index.tsx
-function TableRow({ children, className,...props }) {
+function TableRow({ children, className, header,...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-testid": "tableRow",
 		"data-component": "tableRow",
-		className: `${cn("table-row border-x-0 border-y-0 border-t border-solid border-gray-200 xl:border-t xl:border-solid xl:border-gray-200", "hover:bg-ultra-light-blue", className)}`,
+		className: `${cn("table-row border-x-0 border-y-0 border-t border-solid border-gray-200 xl:border-t xl:border-solid xl:border-gray-200", "hover:bg-ultra-light-blue", header && "font-medium", className)}`,
 		...props,
 		children
 	});
@@ -115935,9 +116029,9 @@ const TabsBadge = ({ children }) => {
 	const isCircular = typeof children === "number" && children <= 9 || typeof children === "string" && children.length === 1 || false;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-testid": "tabs-badge",
-		className: clsx_default("bg-pink h-5 text-xs leading-5 font-medium text-white", {
-			"rounded-full w-5 text-center": isCircular,
-			"rounded px-2": !isCircular
+		className: clsx_default("bg-pink h-5 rounded-full text-xs leading-5 font-medium text-white", {
+			"w-5 text-center": isCircular,
+			"px-2": !isCircular
 		}),
 		children
 	});
@@ -116047,6 +116141,7 @@ function ThemeIcon({ styleVariant = "black", className, icon, adjustedSize, titl
 		"text-red-500": styleVariant === COLOR.ERROR
 	}, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-testid": "theme-icon",
 		"data-tooltip-id": title,
 		"data-tooltip-content": title,
 		"data-component": "ThemeIcon",
@@ -116095,14 +116190,19 @@ const TimeInput = (0, react.forwardRef)(({ label, error: error$1, withSeconds, c
 const Toggle = ({ onClick, value, disabled = false }) => {
 	const handleToggle = (e$2) => {
 		e$2.stopPropagation();
-		onClick();
+		if (!disabled) onClick();
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		onClick: handleToggle,
 		className: "cursor-pointer",
+		"data-testid": "toggle-wrapper",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-testid": "toggle-background",
 			className: `relative h-6 w-12 rounded-xl ${value ? disabled ? "bg-turquoise-200" : "bg-turquoise-500" : "bg-gray-500"} ${disabled && "cursor-not-allowed"}`,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `absolute block size-[20px] rounded-full bg-white ${value ? "translate-x-[26px] translate-y-[2px]" : "translate-x-[2px] translate-y-[2px]"}` })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-testid": "toggle-circle",
+				className: `absolute block size-[20px] rounded-full bg-white ${value ? "translate-x-[26px] translate-y-[2px]" : "translate-x-[2px] translate-y-[2px]"}`
+			})
 		})
 	});
 };
@@ -116149,10 +116249,13 @@ const Tooltip = ({ content, children, passedOpen = false, size: size$3 = "md", v
 		style: floatingStyles,
 		...getFloatingProps(),
 		className: "z-70 drop-shadow-xl",
+		"data-testid": "tooltip",
 		"data-component": "tooltip",
 		children: variant === "default" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-testid": "tooltip-container",
 			className: "w-full rounded bg-gray-800 pt-[3px] text-white",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-testid": "tooltip-content",
 				className: `${sizeClasses[size$3]} px-2 py-1 text-sm font-normal`,
 				children: content
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingArrow, {
@@ -116161,11 +116264,14 @@ const Tooltip = ({ content, children, passedOpen = false, size: size$3 = "md", v
 				width: 10,
 				height: 6,
 				tipRadius: 1,
+				"data-testid": "tooltip-arrow",
 				className: "fill-gray-800 drop-shadow-xl"
 			})]
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-testid": "tooltip-container",
 			className: "bg-linear-gradient-x pt-[3px]",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-testid": "tooltip-content",
 				className: `${sizeClasses[size$3]} overflow-hidden bg-white p-5 px-2 py-1 text-start text-sm font-normal`,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: content })
 			}), size$3 === "md" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingArrow, {
@@ -116175,7 +116281,8 @@ const Tooltip = ({ content, children, passedOpen = false, size: size$3 = "md", v
 				height: 17,
 				tipRadius: 1,
 				fill: "white",
-				className: "drop-shadow-xl"
+				className: "drop-shadow-xl",
+				"data-testid": "tooltip-arrow"
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingArrow, {
 				ref: arrowRef,
 				context,
@@ -116183,7 +116290,8 @@ const Tooltip = ({ content, children, passedOpen = false, size: size$3 = "md", v
 				height: 6,
 				tipRadius: 1,
 				fill: "white",
-				className: "drop-shadow-xl"
+				className: "drop-shadow-xl",
+				"data-testid": "tooltip-arrow"
 			})]
 		})
 	})] });
@@ -116195,7 +116303,7 @@ Tooltip.displayName = "Tooltip";
 const TruncatedText = ({ text, limit = 20 }) => {
 	const [truncatedText, setTruncatedText] = (0, react.useState)(text);
 	(0, react.useEffect)(() => {
-		if (text.length > limit) setTruncatedText(text.substring(0, limit) + "..");
+		if (text.length > limit) setTruncatedText(text.substring(0, limit) + "...");
 		else setTruncatedText(text);
 	}, [text, limit]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -116207,6 +116315,7 @@ const TruncatedText = ({ text, limit = 20 }) => {
 			content: text,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "text-pink",
+				"data-testid": "truncated-text-icon",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconMessageDots, { stroke: 1 })
 			})
 		})]
@@ -116218,6 +116327,7 @@ const TruncatedText = ({ text, limit = 20 }) => {
 const UnorderedList = ({ children, className, actionItem,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
 	className: cn("m-0 last:border-none", className),
 	"data-component": "unorderedList",
+	"data-testid": "unorderedList",
 	...props,
 	children: [children, actionItem && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "flex items-center",
@@ -140361,6 +140471,7 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 	} }), [editor]);
 	if (typeof window === "undefined" || typeof document === "undefined") return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-testid": `${id}-container`,
 		className: cn("rounded-md border border-gray-200", className, error$1 && "border-red-600"),
 		children: [editor && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-wrap gap-2 border-b border-gray-200 p-2",
@@ -140369,24 +140480,28 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
+						"data-testid": "bold-button",
 						onClick: () => editor.chain().focus().toggleBold().run(),
 						className: `${editor.isActive("bold") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center rounded-l-md border-gray-400 text-xs font-normal hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BoldIcon, {})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
+						"data-testid": "italic-button",
 						onClick: () => editor.chain().focus().toggleItalic().run(),
 						className: `${editor.isActive("italic") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center border-gray-400 text-xs font-normal hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItalicIcon, {})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
+						"data-testid": "underline-button",
 						onClick: () => editor.chain().focus().toggleUnderline().run(),
 						className: `${editor.isActive("underline") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center border-gray-400 text-xs font-normal hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnderlineIcon, {})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
+						"data-testid": "clear-formatting-button",
 						onClick: () => editor.chain().focus().clearNodes().unsetAllMarks().run(),
 						className: "flex size-[26px] items-center justify-center rounded-r-md border-gray-400 bg-white text-xs font-normal hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClearFormattingIcon, {})
@@ -140396,11 +140511,13 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 				className: "flex flex-row divide-x divide-gray-400 rounded-md border border-gray-400",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
+					"data-testid": "bullet-list-button",
 					onClick: () => editor.chain().focus().toggleBulletList().run(),
 					className: `${editor.isActive("bulletList") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center rounded-l-md border-gray-400 text-xs font-normal hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListIcon, {})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
+					"data-testid": "ordered-list-button",
 					onClick: () => editor.chain().focus().toggleOrderedList().run(),
 					className: `${editor.isActive("orderedList") ? "bg-primary/20 text-primary" : "bg-white"} flex size-[26px] items-center justify-center rounded-r-md border-gray-400 text-xs font-normal hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListNumbersIcon, {})