@youngonesworks/ui 1.0.5 → 1.0.6

package/dist/index.cjs

@@ -92,13 +92,13 @@ const AccordionItem = ({ controlContent, panelContent, style = "light", border =
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					onClick: () => setIsActive(!isActive),
-					className: `flex w-full flex-row justify-between ${style === "dark" && "text-white"} leading-8 text-lg`,
+					className: `flex w-full flex-row justify-between ${style === "dark" && "text-white"} leading-8 yo-text-h4`,
 					children: controlContent
 				}),
 				endContent
 			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: `transition-max-height overflow-hidden duration-500 ease-in-out ${isActive ? "max-h-1000" : "max-h-0"} leading-6 text-base`,
+			className: `transition-max-height overflow-hidden duration-500 ease-in-out ${isActive ? "max-h-1000" : "max-h-0"} leading-6 yo-text-body`,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "px-4 py-3",
 				children: panelContent
@@ -175,7 +175,7 @@ const Tooltip = ({ content, children, passedOpen = false, size = "md", variant =
 			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]} px-2 py-1 text-sm font-normal`,
+				className: `${sizeClasses[size]} px-2 py-1  yo-text-small text-white`,
 				children: content
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingArrow, {
 				ref: arrowRef,
@@ -188,10 +188,10 @@ const Tooltip = ({ content, children, passedOpen = false, size = "md", variant =
 			})]
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-testid": "tooltip-container",
-			className: "bg-linear-gradient-x pt-[3px]",
+			className: "pt-[3px]",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				"data-testid": "tooltip-content",
-				className: `${sizeClasses[size]} overflow-hidden bg-white p-5 px-2 py-1 text-start text-sm font-normal`,
+				className: `${sizeClasses[size]} overflow-hidden bg-white p-5 px-2 py-1 text-start yo-text-small text-white`,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: content })
 			}), size === "md" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingArrow, {
 				ref: arrowRef,
@@ -338,7 +338,7 @@ const Alert = ({ show, title, description, type = "warning", button, plain = fal
 		"aria-live": "assertive",
 		"aria-atomic": "true",
 		"aria-describedby": descriptionId,
-		className: cn("flex justify-between items-start rounded-md px-5 py-3", bg, plain && "border-none py-4 text-sm font-medium", className),
+		className: cn("flex justify-between items-start rounded-md px-5 py-3", bg, plain && "border-none py-4 yo-text-small-medium", className),
 		"data-component": "Alert",
 		"data-testid": "alert",
 		...props,
@@ -357,17 +357,17 @@ const Alert = ({ show, title, description, type = "warning", button, plain = fal
 						"data-testid": "alert-icon",
 						"aria-hidden": "true"
 					})), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "yo-text-base",
+						className: "yo-text-body",
 						children: title
 					})]
 				}),
 				description && (typeof description === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					id: descriptionId,
-					className: "text-sm text-color-gray-900",
+					className: "yo-text-small text-color-gray-900",
 					children: description
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					id: descriptionId,
-					className: "text-sm text-color-gray-900",
+					className: "yo-text-small text-color-gray-900",
 					children: description
 				})),
 				button && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: button })
@@ -623,14 +623,14 @@ const TextInput = react.default.forwardRef(({ rightSection, leftSection, classNa
 		children: [
 			typeof label === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 				htmlFor: props.id,
-				className: "mb-2 flex items-center gap-1 text-xs font-medium text-black",
+				className: "mb-2 flex items-center gap-1 yo-text-label",
 				children: label
 			}) : label,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "relative",
 				children: [
 					leftSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: (0, clsx.default)("absolute top-0 left-0 flex h-10 w-12 content-center items-center justify-center align-middle text-sm font-medium text-black"),
+						className: (0, clsx.default)("absolute top-0 left-0 flex h-10 w-12 content-center items-center justify-center align-middle yo-text-small font-medium text-black"),
 						children: leftSection
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -652,17 +652,17 @@ const TextInput = react.default.forwardRef(({ rightSection, leftSection, classNa
 						type: password ? showPassword ? "text" : "password" : "text"
 					}),
 					loadingState ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "absolute inset-y-0 right-0 flex h-10 w-12 content-center items-center justify-center align-middle text-sm font-medium text-black",
+						className: "absolute inset-y-0 right-0 flex h-10 w-12 content-center items-center justify-center align-middle yo-text-small-medium text-black",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconLoading, {
 							className: "h-4 w-4 animate-spin text-gray-500",
 							"aria-label": "Loading"
 						})
 					}) : rightSection && showRightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "absolute inset-y-0 right-0 flex h-10 w-12 content-center items-center justify-center align-middle text-sm font-medium text-black",
+						className: "absolute inset-y-0 right-0 flex h-10 w-12 content-center items-center justify-center align-middle yo-text-small-medium text-black",
 						children: rightSection
 					}),
 					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",
+						className: "absolute inset-y-0 right-4 flex content-center items-center justify-center align-middle yo-text-small-medium text-black",
 						children: showPassword ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconEyeCheck, {
 							"data-testid": "password-visibility-toggle",
 							className: "cursor-pointer text-gray-500",
@@ -678,7 +678,7 @@ const TextInput = react.default.forwardRef(({ rightSection, leftSection, classNa
 				]
 			}),
 			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mt-2 text-xs font-normal text-red-500",
+				className: "mt-2 yo-text-caption text-red-500",
 				children: error
 			})
 		]
@@ -748,7 +748,7 @@ const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, children
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"data-testid": "badge",
 		"data-component": "Badge",
-		className: cn("inline-flex max-w-full place-content-center items-center px-2.5 align-middle text-xs leading-[20px] font-semibold tracking-wide text-wrap whitespace-normal normal-case rounded-sm", {
+		className: cn("inline-flex max-w-full place-content-center items-center px-2.5 align-middle yo-text-label leading-[20px]  tracking-wide text-wrap whitespace-normal normal-case rounded-sm", {
 			"bg-accent-blue-light text-accent-blue": styleVariant === COLOR.ACCENT_BLUE,
 			"bg-green-light text-green": styleVariant === COLOR.GREEN_LIGHT,
 			"bg-red-50 text-red-500": styleVariant === COLOR.RED,
@@ -775,7 +775,7 @@ Badge.displayName = "Badge";
 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", {
+	className: cn("grid h-9 max-w-full min-w-[140px] place-content-center rounded-full border border-solid px-6 py-1 yo-text-small-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,
 		"border-orange text-orange bg-white": styleVariant === COLOR.ORANGE,
@@ -807,7 +807,7 @@ const buttonVariants = {
 	secondary: (0, clsx.default)(defaultButtonStyling, "border-solid border-gray-200 bg-white text-black hover:border-gray-800 hover:bg-gray-50 hover:fill-white disabled:text-gray-800 disabled:hover:border-gray-200 disabled:hover:bg-white"),
 	danger: (0, clsx.default)(defaultButtonStyling, "border-transparent bg-red-500 text-white hover:bg-red-700 disabled:bg-red-100 disabled:hover:bg-red-100"),
 	link: (0, clsx.default)(defaultButtonStyling, "border-transparent bg-transparent text-accent-blue hover:bg-gray-50 disabled:bg-transparent disabled:text-gray-800 disabled:hover:bg-transparent"),
-	outline: (0, clsx.default)(defaultButtonStyling, "border-solid border-gray-200 bg-transparent text-white hover:border-gray-800 hover:bg-[rgba(255,255,255,0.1)] disabled:text-gray-800 disabled:hover:border-gray-200 disabled:hover:bg-white"),
+	outline: (0, clsx.default)(defaultButtonStyling, "border-solid border-gray-200 bg-transparent hover:border-gray-800 hover:bg-[rgba(255,255,255,0.1)] disabled:text-gray-800 disabled:hover:border-gray-200 disabled:hover:bg-white"),
 	search: (0, clsx.default)(defaultButtonStyling, "absolute top-0 right-0 h-full w-[50px] border-0 bg-transparent bg-no-repeat"),
 	icon__primary: (0, clsx.default)(defaultButtonStyling, "flex! items-center justify-center"),
 	icon__danger: (0, clsx.default)(defaultButtonStyling, "flex! items-center justify-center"),
@@ -829,7 +829,7 @@ function Button({ type = "button", variant = "primary", ariaLabel, block = false
 		type,
 		"aria-label": ariaLabel,
 		"data-testid": dataTestId,
-		className: cn(buttonVariants[variant], className, block && "w-full text-sm"),
+		className: cn(buttonVariants[variant], className, block && "w-full yo-text-small"),
 		onClick: handleOnClick,
 		...props,
 		children: [
@@ -891,18 +891,18 @@ const CheckboxComponent = ({ size = "md", className, error, mediumBoldText, labe
 			]
 		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"data-testid": "checkbox-label",
-			className: cn("grow text-sm font-normal", labelClassName, { "font-medium": mediumBoldText }),
+			className: cn("grow yo-text-small", labelClassName, { "font-medium": mediumBoldText }),
 			children: label
 		})]
 	}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
-		className: "text-xs font-normal text-red-500",
+		className: "yo-text-caption text-red-500",
 		children: error
 	})]
 });
 const Checkbox = (0, react.forwardRef)(CheckboxComponent);
 //#endregion
 //#region src/components/popover/index.tsx
-const Popover = (0, react.forwardRef)(({ content, children, hoverEnabled = false, passedOpen = false, placement = "right", style = "card", isMobile = false, className }, ref) => {
+const Popover = (0, react.forwardRef)(({ content, children, hoverEnabled = false, passedOpen = false, placement = "right", style = "card", isMobile = false, className, gradientVariant = "client" }, ref) => {
 	const [isOpen, setIsOpen] = (0, react.useState)(passedOpen);
 	const mobileStyles = { width: `${style === "card" && "100%"}` };
 	const { refs, floatingStyles, context } = (0, _floating_ui_react.useFloating)({
@@ -958,7 +958,7 @@ const Popover = (0, react.forwardRef)(({ content, children, hoverEnabled = false
 			"data-testid": "popover-container",
 			"data-component": "Popover",
 			children: [style === "minimal" && content, style === "card" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "bg-linear-gradient-x pt-[3px]",
+				className: cn("pt-[3px]", gradientVariant === "client" && "bg-gradient-blue-turquoise", gradientVariant === "agency" && "bg-gradient-blue-purple"),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "relative overflow-hidden bg-white p-5",
 					children: [!hoverEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
@@ -1062,17 +1062,17 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 			className,
 			classNames: {
 				month_grid: "mt-3 max-w-[400px] border-t border-gray-100",
-				month_caption: "text-sm font-bold",
+				month_caption: "yo-text-small font-bold",
 				dropdowns: "flex items-center w-[190px] gap-1 left-0 justify-center h-8",
-				caption_label: "text-sm font-medium flex items-center justify-center w-[190px]",
+				caption_label: "yo-text-small-medium flex items-center justify-center w-[190px]",
 				chevron: "w-4 h-4 z-50",
 				nav: "absolute w-[190px] justify-between flex h-8 items-center",
 				nav_button: "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 cursor-pointer",
 				nav_button_previous: "absolute left-1",
 				nav_button_next: "absolute right-1",
-				day: "h-8 w-8 p-0 aria-selected:opacity-100 font-normal text-sm",
+				day: "h-8 w-8 p-0 aria-selected:opacity-100 font-normal yo-text-small",
 				weekdays: "pt-12",
-				weekday: "text-gray-300 text-sm font-normal pt-4 pb-2",
+				weekday: "text-gray-300 yo-text-small pt-4 pb-2",
 				day_today: "bg-accent text-accent-foreground",
 				day_outside: "day-outside text-gray-800  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
 				day_disabled: "text-gray-800",
@@ -1086,7 +1086,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						...buttonProps,
-						className: (0, clsx.default)("m-1 size-8 text-black transition-all duration-100 ease-in-out", "md:hover:bg-gradient-calendar hover:rounded md:hover:text-white", isDateSelected(day) && "bg-gradient-calendar rounded text-sm font-normal text-white", isDateToday(day) && "border-b-primary border border-transparent", "translate-y-0 active:translate-y-0.5"),
+						className: (0, clsx.default)("m-1 size-8 text-black transition-all duration-100 ease-in-out", "md:hover:bg-gradient-calendar hover:rounded md:hover:text-white", isDateSelected(day) && "bg-gradient-calendar rounded yo-text-small text-white", isDateToday(day) && "border-b-primary border border-transparent", "translate-y-0 active:translate-y-0.5"),
 						onClick: () => {
 							goToMonth(day.date);
 							handleDayClick(day.date);
@@ -1135,7 +1135,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 							variant: "secondary",
 							type: "button",
-							className: "absolute top-4 right-4 z-10 h-8 px-3 text-xs font-normal",
+							className: "absolute top-4 right-4 z-10 h-8 px-3 yo-text-small",
 							onClick: () => {
 								goToMonth(today);
 								handleDayClick(today);
@@ -1189,7 +1189,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 			className: cn("relative", className),
 			children: [
 				label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-					className: "mb-2 flex items-center gap-1 text-xs font-medium",
+					className: "mb-2 flex items-center gap-1 yo-text-label",
 					children: label
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
@@ -1205,11 +1205,11 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconCalendar, {}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-sm font-normal text-nowrap text-black",
+							className: "yo-text-small text-nowrap text-black",
 							children: selected ? selected.toLocaleDateString() : placeholder
 						}),
 						selected !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cursor-pointer text-sm font-normal text-gray-800",
+							className: "cursor-pointer yo-text-small text-gray-800",
 							role: "button",
 							"aria-label": "Clear date",
 							tabIndex: 0,
@@ -1229,7 +1229,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 					]
 				}),
 				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
-					className: "text-xs font-normal text-red-500",
+					className: "yo-text-caption text-red-500",
 					children: error
 				})
 			]
@@ -1272,7 +1272,7 @@ const FilterButton = ({ onClick, hasFilters, reset, filtersText, resetText }) =>
 		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconFilter, { stroke: 1 }),
 		children: filtersText
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnstyledButton, {
-		className: "text-sm font-normal disabled:text-gray-500",
+		className: "yo-text-small disabled:text-gray-500",
 		onClick: reset,
 		disabled: !hasFilters,
 		children: resetText
@@ -1281,7 +1281,7 @@ const FilterButton = ({ onClick, hasFilters, reset, filtersText, resetText }) =>
 //#endregion
 //#region src/components/filters/FilterItem.tsx
 const FilterItem = ({ title, isActive = false, onClick }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-	className: cn("has-checked:border-primary has-checked:bg-turquoise-100 flex cursor-pointer items-center gap-3 rounded-full border border-gray-200 px-7 py-1.5 text-sm leading-6 font-normal transition-all duration-300 ease-in-out hover:bg-gray-50"),
+	className: cn("has-checked:border-primary has-checked:bg-turquoise-100 flex cursor-pointer items-center gap-3 rounded-full border border-gray-200 px-7 py-1.5 yo-text-small leading-6 transition-all duration-300 ease-in-out hover:bg-gray-50"),
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		type: "checkbox",
 		className: "hidden",
@@ -1310,7 +1310,7 @@ const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, fi
 		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",
+				className: "yo-text-small-medium",
 				"data-testid": "filters-title",
 				children: selectedFiltersText
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterButton, {
@@ -1638,7 +1638,7 @@ const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "
 				children: content.map((c, index) => {
 					const button = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnstyledButton, {
 						onClick: () => handleItemClick(c.onClick),
-						className: "w-full rounded-md px-4 py-2 text-left text-sm font-normal whitespace-nowrap hover:bg-gray-50",
+						className: "w-full rounded-md px-4 py-2 text-left yo-text-small whitespace-nowrap hover:bg-gray-50",
 						"aria-label": "Options Menu Item",
 						disabled: c.disabled,
 						children: c.title
@@ -1660,7 +1660,7 @@ KebabMenu.displayName = "KebabMenu";
 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),
+	className: cn("flex items-center gap-1 yo-text-label text-black", className),
 	...props,
 	children
 });
@@ -1746,7 +1746,7 @@ const LogoBlack = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg",
 });
 //#endregion
 //#region src/components/modal/index.tsx
-const Modal = ({ title, children, withCloseButton = true, opened, additionalClassNames, closeModalWithConfirmation = false, gradient = true, uncloseAble = false, confirmText = "Are you sure you want to close this modal?", dataTestId, onClose, size }) => {
+const Modal = ({ title, children, withCloseButton = true, opened, additionalClassNames, closeModalWithConfirmation = false, gradient = true, uncloseAble = false, confirmText = "Are you sure you want to close this modal?", dataTestId, onClose, size, gradientVariant = "client" }) => {
 	const ref = (0, react.useRef)(null);
 	const refContainer = (0, react.useRef)(null);
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
@@ -1827,16 +1827,15 @@ const Modal = ({ title, children, withCloseButton = true, opened, additionalClas
 					}),
 					title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "relative w-full pt-14",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-							className: "mt-0 mb-8 text-left text-3xl font-bold",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+							className: "yo-text-h1 mt-0 mb-8 text-left",
 							children: title
 						})
 					}),
 					/* @__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-secondary) 100%)" }
+						className: cn("absolute bottom-0 left-0 mt-8 mb-0 h-2! w-full border-none", gradientVariant === "client" && "bg-gradient-blue-turquoise", gradientVariant === "agency" && "bg-gradient-blue-purple")
 					})
 				]
 			})
@@ -1889,7 +1888,7 @@ const NumberField = ({ name, value = 0, max, min = 0, isDisabled, id, className
 		children: [
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 				htmlFor: id,
-				className: "mb-1 text-sm font-medium text-gray-700",
+				className: "mb-1 yo-text-label",
 				children: label
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1923,7 +1922,7 @@ const NumberField = ({ name, value = 0, max, min = 0, isDisabled, id, className
 				]
 			}),
 			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "mt-1 text-sm font-normal text-red-600",
+				className: "mt-1 yo-text-small text-red-600",
 				children: error
 			})
 		]
@@ -1935,7 +1934,7 @@ const PageUnavailable = ({ notAvailableButton, notAvailableDescription, notAvail
 	className: "mx-auto grid max-w-[900px] justify-items-center gap-8 text-center",
 	children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-			className: "text-3xl font-bold",
+			className: "yo-text-h1",
 			children: notAvailableHeaderText
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: notAvailableDescription }),
@@ -2005,7 +2004,7 @@ const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, cl
 		})]
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 		htmlFor: id,
-		className: ` ${(0, clsx.default)(labelClassName, "mb-0 cursor-pointer pl-3 text-sm font-normal", { "text-gray-400": props.disabled })}`,
+		className: ` ${(0, clsx.default)(labelClassName, "mb-0 cursor-pointer pl-3 yo-text-small font-normal", { "text-gray-400": props.disabled })}`,
 		children: label
 	})]
 });
@@ -2086,23 +2085,23 @@ const Rating = ({ rating, ratings, size = "normal", setReview, className, setRev
 			const roundedRating = Math.round(rating * 2) / 2;
 			const hasHalf = roundedRating % 1 === .5;
 			const effectiveRating = roundedRating;
-			if (index <= Math.floor(effectiveRating)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarFilled, { className: `text-yellow ${sizeClasses[size]}` });
-			if (hasHalf && index === Math.ceil(effectiveRating)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarHalfFilled, { className: `text-yellow ${sizeClasses[size]}` });
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarEmpty, { className: `text-yellow ${sizeClasses[size]}` });
+			if (index <= Math.floor(effectiveRating)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarFilled, { className: `text-navy-blue ${sizeClasses[size]}` });
+			if (hasHalf && index === Math.ceil(effectiveRating)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarHalfFilled, { className: `text-navy-blue ${sizeClasses[size]}` });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarEmpty, { className: `text-navy-blue ${sizeClasses[size]}` });
 		}
 		const displayRating = reviewIsSet ? Number(reviewIsSet) : currentRating;
 		const roundedRating = Math.round(displayRating * 2) / 2;
 		const hasHalf = roundedRating % 1 === .5;
 		const effectiveRating = roundedRating;
-		if (index <= Math.floor(effectiveRating)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarFilled, { className: `text-yellow ${sizeClasses[size]}` });
-		if (hasHalf && index === Math.ceil(effectiveRating)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarHalfFilled, { className: `text-yellow ${sizeClasses[size]}` });
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarEmpty, { className: `text-yellow ${sizeClasses[size]} ` });
+		if (index <= Math.floor(effectiveRating)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarFilled, { className: `text-navy-blue ${sizeClasses[size]}` });
+		if (hasHalf && index === Math.ceil(effectiveRating)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarHalfFilled, { className: `text-navy-blue ${sizeClasses[size]}` });
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarEmpty, { className: `text-navy-blue ${sizeClasses[size]} ` });
 	};
 	const StarSmallIcon = ({ index, className }) => {
 		const roundedRating = Math.round(currentSmallRating * 2) / 2;
-		if (index === roundedRating) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarFilled, { className: cn(className, "text-yellow") });
-		if (index - roundedRating === .5) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarHalfFilled, { className: cn(className, "text-yellow") });
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarEmpty, { className: cn(className, "text-yellow") });
+		if (index === roundedRating) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarFilled, { className: cn(className, "text-navy-blue") });
+		if (index - roundedRating === .5) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarHalfFilled, { className: cn(className, "text-navy-blue") });
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarEmpty, { className: cn(className, "text-navy-blue") });
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: cn("flex flex-col", className),
@@ -2131,7 +2130,7 @@ const Rating = ({ rating, ratings, size = "normal", setReview, className, setRev
 					onClick: () => handleStarClick(value),
 					children: [Array.from({ length: value }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StarSmallIcon, {
 						index: value,
-						className: "text-yellow size-5"
+						className: "text-navy-blue size-5"
 					}, i)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "mt-[5px] flex items-center pl-2 text-[12px] text-gray-800",
 						children: label
@@ -2154,7 +2153,7 @@ const RegionSelector = ({ title, regions, ...props }) => {
 		className: "flex w-full flex-col items-center justify-center gap-11 break-words lg:gap-14",
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-			className: "w-full text-2xl leading-10 font-bold md:text-3xl",
+			className: "w-full yo-text-h2 leading-10 font-bold md:text-3xl",
 			children: title
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 			className: "mx-auto flex w-full max-w-[415px] list-none flex-col items-start justify-start gap-3.5 pl-0 hover:cursor-pointer",
@@ -2447,7 +2446,7 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 				},
 				...getReferenceProps(),
 				disabled,
-				className: cn("flex h-10 w-full items-center justify-between rounded-md border px-3 text-sm transition-colors bg-gray-20", "border-gray-200 hover:border-gray-300 focus:border-gray-300 outline-none", !hideError && errorText && "border-red-500 hover:border-red-500 focus:border-red-500", disabled && "opacity-50 cursor-not-allowed"),
+				className: cn("flex h-10 w-full items-center justify-between rounded-md border px-3 yo-text-small transition-colors bg-gray-20", "border-gray-200 hover:border-gray-300 focus:border-gray-300 outline-none", !hideError && errorText && "border-red-500 hover:border-red-500 focus:border-red-500", disabled && "opacity-50 cursor-not-allowed"),
 				"aria-haspopup": "listbox",
 				"aria-expanded": open,
 				"aria-disabled": disabled,
@@ -2492,7 +2491,7 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 					"aria-labelledby": `${id}-label`,
 					className: cn("z-[99999] mt-2 rounded-md border border-gray-200 bg-white shadow-md", "overflow-hidden animate-in fade-in"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "p-1 text-sm max-h-[250px] overflow-auto",
+						className: "p-1 yo-text-small max-h-[250px] overflow-auto",
 						children: [searchable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "flex items-center gap-2 px-2 py-1 border-b border-gray-100 sticky top-0 bg-white",
 							role: "search",
@@ -2506,7 +2505,7 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 								value: searchTerm,
 								onChange: (e) => setSearchTerm(e.target.value),
 								placeholder: searchPlaceholder,
-								className: "w-full text-sm outline-none bg-transparent placeholder-gray-300",
+								className: "w-full yo-text-small outline-none bg-transparent placeholder-gray-300",
 								"aria-label": "Search options"
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2522,7 +2521,7 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 									role: "option",
 									"aria-selected": isSelected,
 									tabIndex: -1,
-									className: cn("relative flex w-full items-center gap-2 rounded px-3 py-2 text-sm text-black select-none", "hover:bg-gray-50 mx-1 my-[2px]", isSelected && "bg-gray-50", focusedIndex === index && "bg-gray-50 ring-1 ring-primary"),
+									className: cn("relative flex w-full items-center gap-2 rounded px-3 py-2 yo-text-small text-black select-none", "hover:bg-gray-50 mx-1 my-[2px]", isSelected && "bg-gray-50", focusedIndex === index && "bg-gray-50 ring-1 ring-primary"),
 									children: [multiSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: cn("flex h-4 w-4 items-center justify-center rounded-sm border", isSelected ? "border-light-blue bg-light-blue" : "border-gray-400 bg-white"),
 										"aria-hidden": "true",
@@ -2547,7 +2546,7 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 				})
 			}) }),
 			!hideError && errorText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-xs text-red-500",
+				className: "yo-text-caption text-red-500",
 				role: "alert",
 				children: errorText
 			})
@@ -2564,11 +2563,11 @@ const SettingsCard = ({ icon, title, link, ManageText, LinkComponent }) => /* @_
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-4",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: icon }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "text-base font-normal",
+			className: "yo-text-body",
 			children: title
 		})]
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
-		className: "text-xs font-medium text-sky-600 no-underline hover:underline",
+		className: "yo-text-link text-sky-600 no-underline hover:underline",
 		href: link,
 		children: ManageText
 	})]
@@ -2616,10 +2615,10 @@ const NumberedStepper = ({ steps, active, className, stepsCompleted, completedLa
 				className: "flex flex-auto flex-col justify-center",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					"data-testid": `stepper-label-${index}`,
-					className: `content-center text-sm font-medium! whitespace-nowrap md:text-lg md:font-bold ${index <= active ? "text-gray-900" : "text-gray-500"}`,
+					className: `content-center yo-text-small font-medium! whitespace-nowrap md:text-lg md:font-bold ${index <= active ? "text-gray-900" : "text-gray-500"}`,
 					children: step.label
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [completedLabel && active === 1 && index === 0 && stepsCompleted.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "text-green flex items-center text-xs font-medium",
+					className: "text-green flex items-center yo-text-caption",
 					children: [
 						completedLabel,
 						" ",
@@ -2672,7 +2671,7 @@ const Stepper = ({ steps, setStep = () => {}, variant = "default", clickableStep
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "flex flex-wrap items-center justify-center",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: `text-center ${variant === "small" || isMobile ? "text-xs-fields" : "text-sm font-normal"} ${index <= activeStep ? "text-gray-900" : "text-gray-500"}`,
+								className: `text-center ${variant === "small" || isMobile ? "text-xs-fields" : "yo-text-small"} ${index <= activeStep ? "text-gray-900" : "text-gray-500"}`,
 								children: step.label
 							})
 						}),
@@ -2708,7 +2707,7 @@ const Table = ({ children, className, ...props }) => /* @__PURE__ */ (0, react_j
 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)}`,
+	className: `${cn("table-cell py-2 align-middle yo-text-small 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
 });
 //#endregion
@@ -2724,7 +2723,7 @@ const TableHeader = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)
 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),
+	className: cn("hidden h-10 align-middle yo-text-caption first:pl-10 last:pr-10 xl:table-cell", { "xl:first:pl-5 xl:last:pr-5": smallPadding }, className),
 	...props,
 	children
 });
@@ -2753,7 +2752,7 @@ function TableRow({ children, className, header, ...props }) {
 const Tab = (0, react.forwardRef)(({ tabId, activeTab, tabContent, clickFnc, rightSection }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 	ref,
 	"data-testid": `tab-${tabId}`,
-	className: `${activeTab && "text-light-blue bg-[#F0F0F6]"} bg-ultra-light-blue px-5 py-[10px] text-xs font-normal whitespace-nowrap text-black transition-colors duration-100 hover:border-black hover:bg-[#F0F0F6] data-active:border-black data-active:bg-[#F0F0F6] data-active:font-medium data-active:text-black`,
+	className: `${activeTab && "text-light-blue bg-[#F0F0F6]"} bg-ultra-light-blue px-5 py-[10px] yo-text-caption whitespace-nowrap text-black transition-colors duration-100 hover:border-black hover:bg-[#F0F0F6] data-active:border-black data-active:bg-[#F0F0F6] data-active:font-medium data-active:text-black`,
 	onClick: () => clickFnc(tabId),
 	children: [tabContent, rightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "ml-2 inline-flex",
@@ -2766,7 +2765,7 @@ 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: (0, clsx.default)("bg-secondary h-5 rounded-full text-xs leading-5 font-medium text-white", {
+		className: (0, clsx.default)("bg-secondary h-5 rounded-full yo-text-caption leading-5 text-white", {
 			"w-5 text-center": isCircular,
 			"px-2": !isCircular
 		}),
@@ -2844,18 +2843,18 @@ const Textarea = (0, react.forwardRef)(({ className, label, error, rows = 8, ...
 	className: "relative grid gap-2",
 	children: [
 		label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-			className: "flex items-center gap-1 text-xs font-medium text-black",
+			className: "flex items-center gap-1 yo-text-label",
 			children: label
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 			"data-component": "TextArea",
 			rows,
 			ref,
-			className: cn("disabled:bg-grey-100 bg-ultra-light-gray w-full rounded border border-gray-200 p-3 text-sm font-normal text-black placeholder:text-gray-800 focus:ring-0 focus:outline-hidden disabled:cursor-not-allowed disabled:border-gray-300", { "border-red-500 text-red-500 selection:bg-red-200 focus:border-red-500 focus:ring-red-500 focus:placeholder:text-red-500 active:border-red-500 active:ring-red-500": !!error }, className),
+			className: cn("disabled:bg-grey-100 bg-ultra-light-gray w-full rounded border border-gray-200 p-3 yo-text-small text-black placeholder:text-gray-800 focus:ring-0 focus:outline-hidden disabled:cursor-not-allowed disabled:border-gray-300", { "border-red-500 text-red-500 selection:bg-red-200 focus:border-red-500 focus:ring-red-500 focus:placeholder:text-red-500 active:border-red-500 active:ring-red-500": !!error }, className),
 			...props
 		}),
 		error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
-			className: "text-xs font-normal text-red-500",
+			className: "yo-text-caption text-red-500",
 			children: error
 		})
 	]
@@ -2898,7 +2897,7 @@ const TimeInput = (0, react.forwardRef)(({ label, error, withSeconds, className
 		"data-component": "timeInput",
 		children: [
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-				className: "mb-2 block text-xs font-medium",
+				className: "mb-2 block yo-text-label",
 				htmlFor: props.id,
 				children: label
 			}),
@@ -2908,10 +2907,10 @@ const TimeInput = (0, react.forwardRef)(({ label, error, withSeconds, className
 				type: "time",
 				step: withSeconds ? "1" : "60",
 				onChange: handleTimeChange,
-				className: `bg-ultra-light-gray focus:border-primary flex h-10 min-h-[36px] w-full items-center rounded-[5px] border border-solid border-gray-200 px-3 text-sm font-normal focus:outline-hidden ${error ? "border-red-500" : ""} ${className}`
+				className: `bg-ultra-light-gray focus:border-primary flex h-10 min-h-[36px] w-full items-center rounded-[5px] border border-solid border-gray-200 px-3 yo-text-small focus:outline-hidden ${error ? "border-red-500" : ""} ${className}`
 			}),
 			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "pt-2 text-xs font-normal text-red-500",
+				className: "pt-2 yo-text-caption text-red-500",
 				children: error
 			})
 		]
@@ -2949,7 +2948,7 @@ const TruncatedText = ({ text, limit = 20 }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-2",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "text-sm font-normal",
+			className: "yo-text-small",
 			children: truncatedText
 		}), text.length > limit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
 			content: text,
@@ -2978,7 +2977,7 @@ const UnorderedList = ({ children, className, actionItem, ...props }) => /* @__P
 const UnorderedListItem = ({ children, actionItem, className, header = false, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 	...props,
 	"data-component": "unorderedListItem",
-	className: cn("grid min-h-[74px] list-none items-center border-b border-solid border-b-gray-200 py-5 text-sm font-normal last:border-none md:flex md:py-4 md:pr-10 md:pl-10", header ? "md:items-end" : "hover:bg-ultra-light-blue-gray", { "grid-cols-2": actionItem }, className),
+	className: cn("grid min-h-[74px] list-none items-center border-b border-solid border-b-gray-200 py-5 yo-text-small last:border-none md:flex md:py-4 md:pr-10 md:pl-10", header ? "md:items-end" : "hover:bg-ultra-light-blue-gray", { "grid-cols-2": actionItem }, className),
 	children: [children, actionItem && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "flex justify-end gap-2 md:absolute md:right-8 md:items-center",
 		children: actionItem
@@ -3117,7 +3116,7 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex items-center gap-1",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-xs font-medium",
+					className: "yo-text-label",
 					children: selectedCountry?.dial_code
 				})
 			})
@@ -3155,10 +3154,10 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
 						role: "option",
 						"aria-selected": selectedCountry?.code === country.code,
 						onClick: () => handleSelect(country),
-						className: cn("flex w-full items-center gap-3 rounded px-3 py-2 text-sm hover:bg-gray-50", selectedCountry?.code === country.code && "bg-gray-50", highlightedIndex === index && "bg-gray-50 border border-gray-100"),
+						className: cn("flex w-full items-center gap-3 rounded px-3 py-2 yo-text-small hover:bg-gray-50", selectedCountry?.code === country.code && "bg-gray-50", highlightedIndex === index && "bg-gray-50 border border-gray-100"),
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-base",
+								className: "yo-text-body",
 								children: country.flag
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -3166,12 +3165,12 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
 								children: country.name
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-xs font-medium text-gray-600",
+								className: "yo-text-label text-gray-600",
 								children: country.dial_code
 							})
 						]
 					}, country.code + country.name + country.dial_code)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "px-3 py-2 text-sm text-gray-500 text-center",
+						className: "px-3 py-2 yo-text-small text-gray-500 text-center",
 						children: "No countries found"
 					})
 				})]
@@ -3360,7 +3359,7 @@ const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classN
 					role: "menuitem",
 					tabIndex: -1,
 					onClick: () => handleItemClick(c.onClick),
-					className: cn("w-full rounded-md px-4 py-2 text-left text-sm font-normal whitespace-nowrap transition-colors", "focus:ring-primary hover:bg-gray-50 focus:bg-gray-50 focus:ring focus:outline-none focus:ring-inset", c.disabled && "cursor-not-allowed opacity-50", focusedIndex === index && "bg-gray-50"),
+					className: cn("w-full rounded-md px-4 py-2 text-left yo-text-small whitespace-nowrap transition-colors", "focus:ring-primary hover:bg-gray-50 focus:bg-gray-50 focus:ring focus:outline-none focus:ring-inset", c.disabled && "cursor-not-allowed opacity-50", focusedIndex === index && "bg-gray-50"),
 					"aria-label": c.title,
 					disabled: c.disabled,
 					children: c.title
@@ -3405,7 +3404,7 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 			_tiptap_extension_underline.Underline,
 			_tiptap_extension_placeholder.Placeholder.configure({ placeholder })
 		],
-		editorProps: { attributes: { class: "min-h-[190px] md:min-h-[150px] bg-ultra-light-gray text-sm font-normal p-4 prose prose-sm sm:prose-base lg:prose-lg xl:prose-2xl focus:outline-hidden" } },
+		editorProps: { attributes: { class: "min-h-[190px] md:min-h-[150px] bg-ultra-light-gray yo-text-small p-4 prose prose-sm sm:prose-base lg:prose-lg xl:prose-2xl focus:outline-hidden" } },
 		content,
 		immediatelyRender: false,
 		editable: !readOnly,
@@ -3442,28 +3441,28 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 						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`,
+						className: `${editor.isActive("bold") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center rounded-l-md border-gray-400 yo-text-small 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`,
+						className: `${editor.isActive("italic") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center border-gray-400 yo-text-small 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`,
+						className: `${editor.isActive("underline") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center border-gray-400 yo-text-small 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",
+						className: "flex size-[26px] items-center justify-center rounded-r-md border-gray-400 bg-white yo-text-small hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClearFormattingIcon, {})
 					})
 				]
@@ -3473,13 +3472,13 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 					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`,
+					className: `${editor.isActive("bulletList") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center rounded-l-md border-gray-400 yo-text-small 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`,
+					className: `${editor.isActive("orderedList") ? "bg-primary/20 text-primary" : "bg-white"} flex size-[26px] items-center justify-center rounded-r-md border-gray-400 yo-text-small hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListNumbersIcon, {})
 				})]
 			})]
@@ -3491,7 +3490,7 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 			className: cn("overflow-hidden rounded-[inherit]")
 		})]
 	}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "mt-1 text-xs font-normal text-red-600",
+		className: "mt-1 yo-text-small text-red-600",
 		children: error
 	})] });
 });