@youngonesworks/ui 1.0.4 → 1.0.6

package/dist/index.js

@@ -1,6 +1,4 @@
-'use client';
-
-
+"use client";
 import * as React$1 from "react";
 import React, { Fragment, cloneElement, createRef, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { IconAlertCircle, IconAlertTriangle, IconArrowNarrowLeft, IconBold, IconCalendar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCircleCheck, IconClearFormatting, IconDotsVertical, IconEyeCheck, IconEyeOff, IconFilter, IconHeart, IconHeartFilled, IconItalic, IconList, IconListNumbers, IconMessageDots, IconSearch, IconSelector, IconUnderline, IconX } from "@tabler/icons-react";
@@ -14,26 +12,22 @@ import { enGB, fr, nl, nlBE } from "date-fns/locale";
 import { createPortal } from "react-dom";
 import { Tooltip as Tooltip$1 } from "react-tooltip";
 import phone from "phone";
-import CountryList from "country-list-with-dial-code-and-flag";
+import CountryListImport from "country-list-with-dial-code-and-flag";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { Underline } from "@tiptap/extension-underline";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { StarterKit } from "@tiptap/starter-kit";
-
-//#region src/jsx-runtime-shim.ts
-const jsx$1 = React$1.createElement;
-const jsxs$1 = React$1.createElement;
-const Fragment$2 = React$1.Fragment;
-
+React$1.createElement;
+React$1.createElement;
+React$1.Fragment;
 //#endregion
 //#region src/utils/cn.ts
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
-
 //#endregion
 //#region src/components/unstyledButton/index.tsx
-const UnstyledButton = forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("button", {
+const UnstyledButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("button", {
 	type: "button",
 	"data-component": "unstyledButton",
 	className: cn("appearance-none", className),
@@ -41,7 +35,6 @@ const UnstyledButton = forwardRef(({ className,...props }, ref) => /* @__PURE__
 	...props
 }));
 UnstyledButton.displayName = "UnstyledButton";
-
 //#endregion
 //#region src/components/accordion/AccordionItem.tsx
 const AccordionItem = ({ controlContent, panelContent, style = "light", border = false, chevronPosition = "left", disabled = false, active = false, endContent, className }) => {
@@ -73,13 +66,13 @@ const AccordionItem = ({ controlContent, panelContent, style = "light", border =
 				}),
 				/* @__PURE__ */ 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__ */ 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__ */ jsx("div", {
 				className: "px-4 py-3",
 				children: panelContent
@@ -87,7 +80,6 @@ const AccordionItem = ({ controlContent, panelContent, style = "light", border =
 		})]
 	}) });
 };
-
 //#endregion
 //#region src/components/accordion/AccordionWrapper.tsx
 const AccordionWrapper = ({ children, className }) => /* @__PURE__ */ jsx("div", {
@@ -96,21 +88,16 @@ const AccordionWrapper = ({ children, className }) => /* @__PURE__ */ jsx("div",
 	className: cn(className, "flex flex-col gap-2"),
 	children
 });
-
 //#endregion
 //#region src/hooks/useMergeRefs.ts
 function useMergeRefs(...refs) {
 	return useCallback((value) => {
 		refs.forEach((ref) => {
-			if (typeof ref === "function") {
-				ref(value);
-			} else if (ref) {
-				ref.current = value;
-			}
+			if (typeof ref === "function") ref(value);
+			else if (ref) ref.current = value;
 		});
 	}, [refs]);
 }
-
 //#endregion
 //#region src/components/tooltip/index.tsx
 const sizeClasses = {
@@ -134,15 +121,11 @@ const Tooltip = ({ content, children, passedOpen = false, size = "md", variant =
 		],
 		whileElementsMounted: autoUpdate
 	});
-	const hover = useHover(context, { move: false });
-	const focus = useFocus(context);
-	const dismiss = useDismiss(context);
-	const role = useRole(context, { role: "tooltip" });
 	const { getReferenceProps, getFloatingProps } = useInteractions([
-		hover,
-		focus,
-		dismiss,
-		role
+		useHover(context, { move: false }),
+		useFocus(context),
+		useDismiss(context),
+		useRole(context, { role: "tooltip" })
 	]);
 	const childRef = children.ref;
 	const mergedRef = useMergeRefs(refs.setReference, childRef);
@@ -162,7 +145,7 @@ const Tooltip = ({ content, children, passedOpen = false, size = "md", variant =
 			className: "w-full rounded bg-gray-800 pt-[3px] text-white",
 			children: [/* @__PURE__ */ 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__ */ jsx(FloatingArrow, {
 				ref: arrowRef,
@@ -175,10 +158,10 @@ const Tooltip = ({ content, children, passedOpen = false, size = "md", variant =
 			})]
 		}) : /* @__PURE__ */ jsxs("div", {
 			"data-testid": "tooltip-container",
-			className: "bg-linear-gradient-x pt-[3px]",
+			className: "pt-[3px]",
 			children: [/* @__PURE__ */ 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__ */ jsx("p", { children: content })
 			}), size === "md" ? /* @__PURE__ */ jsx(FloatingArrow, {
 				ref: arrowRef,
@@ -203,65 +186,52 @@ const Tooltip = ({ content, children, passedOpen = false, size = "md", variant =
 	})] });
 };
 Tooltip.displayName = "Tooltip";
-
 //#endregion
 //#region src/utils/enums.ts
-let ACTION_ICON_STYLE_VARIANT = /* @__PURE__ */ function(ACTION_ICON_STYLE_VARIANT$1) {
-	ACTION_ICON_STYLE_VARIANT$1["DEFAULT"] = "default";
-	ACTION_ICON_STYLE_VARIANT$1["TRANSPARENT"] = "transparent";
-	ACTION_ICON_STYLE_VARIANT$1["SMALL"] = "small";
-	ACTION_ICON_STYLE_VARIANT$1["ROUND"] = "round";
-	return ACTION_ICON_STYLE_VARIANT$1;
-}({});
-let THEME_ICON_STYLE_VARIANT = /* @__PURE__ */ function(THEME_ICON_STYLE_VARIANT$1) {
-	THEME_ICON_STYLE_VARIANT$1["SECONDARY_WITH_BACKGROUND"] = "secondary-with-background";
-	return THEME_ICON_STYLE_VARIANT$1;
-}({});
-let COLOR = /* @__PURE__ */ function(COLOR$1) {
-	COLOR$1["PRIMARY"] = "primary";
-	COLOR$1["BLACK"] = "black";
-	COLOR$1["NAVY_BLUE"] = "navy-blue";
-	COLOR$1["LIGHT_BLUE"] = "light-blue";
-	COLOR$1["LIGHT_BLUE_DISABLED"] = "light-blue-disabled";
-	COLOR$1["GREEN"] = "green";
-	COLOR$1["GREEN_LIGHT"] = "green-light";
-	COLOR$1["SECONDARY"] = "secondary";
-	COLOR$1["SECONDARY_LIGHT"] = "secondary-light";
-	COLOR$1["ORANGE"] = "orange";
-	COLOR$1["ORANGE_LIGHT"] = "orange-light";
-	COLOR$1["ACCENT_BLUE"] = "accent-blue";
-	COLOR$1["ACCENT_BLUE_LIGHT"] = "accent-blue-light";
-	COLOR$1["YELLOW"] = "yellow";
-	COLOR$1["CHECK"] = "check";
-	COLOR$1["WARNING"] = "warning";
-	COLOR$1["ERROR"] = "error";
-	COLOR$1["SUCCESS"] = "success";
-	COLOR$1["WARNING_LIGHT"] = "warning-light";
-	COLOR$1["ULTRA_LIGHT_BLUE"] = "ultra-light-blue";
-	COLOR$1["ULTRA_LIGHT_GRAY"] = "ultra-light-gray";
-	COLOR$1["ULTRA_LIGHT_BLUE_GRAY"] = "ultra-light-blue-gray";
-	COLOR$1["TURQUOISE"] = "turquoise";
-	COLOR$1["RED"] = "red";
-	COLOR$1["DARK_GRAY"] = "dark-gray";
-	COLOR$1["GRAY"] = "gray";
-	COLOR$1["WHITE"] = "white";
-	COLOR$1["PURPLE"] = "purple";
-	COLOR$1["PURPLE_LIGHT"] = "purple-light";
-	COLOR$1["NAVY_BLUE_SHADES"] = "navy-blue-shades";
-	return COLOR$1;
+let ACTION_ICON_STYLE_VARIANT = /* @__PURE__ */ function(ACTION_ICON_STYLE_VARIANT) {
+	ACTION_ICON_STYLE_VARIANT["DEFAULT"] = "default";
+	ACTION_ICON_STYLE_VARIANT["TRANSPARENT"] = "transparent";
+	ACTION_ICON_STYLE_VARIANT["SMALL"] = "small";
+	ACTION_ICON_STYLE_VARIANT["ROUND"] = "round";
+	return ACTION_ICON_STYLE_VARIANT;
 }({});
-let REGION = /* @__PURE__ */ function(REGION$1) {
-	REGION$1["NETHERLANDS"] = "nl";
-	REGION$1["BELGIUM"] = "nl-BE";
-	REGION$1["UNITED_KINGDOM"] = "gb";
-	return REGION$1;
+let THEME_ICON_STYLE_VARIANT = /* @__PURE__ */ function(THEME_ICON_STYLE_VARIANT) {
+	THEME_ICON_STYLE_VARIANT["SECONDARY_WITH_BACKGROUND"] = "secondary-with-background";
+	return THEME_ICON_STYLE_VARIANT;
 }({});
-let TOOLTIP_COLOR = /* @__PURE__ */ function(TOOLTIP_COLOR$1) {
-	TOOLTIP_COLOR$1["DEFAULT"] = "default";
-	TOOLTIP_COLOR$1["WHITE"] = "white";
-	return TOOLTIP_COLOR$1;
+let COLOR = /* @__PURE__ */ function(COLOR) {
+	COLOR["PRIMARY"] = "primary";
+	COLOR["BLACK"] = "black";
+	COLOR["NAVY_BLUE"] = "navy-blue";
+	COLOR["LIGHT_BLUE"] = "light-blue";
+	COLOR["LIGHT_BLUE_DISABLED"] = "light-blue-disabled";
+	COLOR["GREEN"] = "green";
+	COLOR["GREEN_LIGHT"] = "green-light";
+	COLOR["SECONDARY"] = "secondary";
+	COLOR["SECONDARY_LIGHT"] = "secondary-light";
+	COLOR["ORANGE"] = "orange";
+	COLOR["ORANGE_LIGHT"] = "orange-light";
+	COLOR["ACCENT_BLUE"] = "accent-blue";
+	COLOR["ACCENT_BLUE_LIGHT"] = "accent-blue-light";
+	COLOR["YELLOW"] = "yellow";
+	COLOR["CHECK"] = "check";
+	COLOR["WARNING"] = "warning";
+	COLOR["ERROR"] = "error";
+	COLOR["SUCCESS"] = "success";
+	COLOR["WARNING_LIGHT"] = "warning-light";
+	COLOR["ULTRA_LIGHT_BLUE"] = "ultra-light-blue";
+	COLOR["ULTRA_LIGHT_GRAY"] = "ultra-light-gray";
+	COLOR["ULTRA_LIGHT_BLUE_GRAY"] = "ultra-light-blue-gray";
+	COLOR["TURQUOISE"] = "turquoise";
+	COLOR["RED"] = "red";
+	COLOR["DARK_GRAY"] = "dark-gray";
+	COLOR["GRAY"] = "gray";
+	COLOR["WHITE"] = "white";
+	COLOR["PURPLE"] = "purple";
+	COLOR["PURPLE_LIGHT"] = "purple-light";
+	COLOR["NAVY_BLUE_SHADES"] = "navy-blue-shades";
+	return COLOR;
 }({});
-
 //#endregion
 //#region src/utils/formatIcon.ts
 const globalDefaultFormatAttributes = {};
@@ -276,13 +246,12 @@ function formatIcon(icon, defaultFormatAttributes) {
 		...globalDefaultFormatAttributes,
 		...defaultFormatAttributes,
 		...icon.props,
-		...{ className: clsx(globalDefaultFormatAttributes.className, defaultFormatAttributes.className, icon.props.className) }
+		className: clsx(globalDefaultFormatAttributes.className, defaultFormatAttributes.className, icon.props.className)
 	});
 }
-
 //#endregion
 //#region src/components/actionIcon/index.tsx
-const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className,...props }) => {
+const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className, ...props }) => {
 	const variantClassNames = clsx({
 		"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.DEFAULT,
 		"active:translate-y-[1px] border-none content-center flex items-center justify-center rounded-[4px] border text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.TRANSPARENT,
@@ -312,12 +281,11 @@ const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", ic
 	}) });
 };
 ActionIcon.displayName = "ActionIcon";
-
 //#endregion
 //#region src/components/alert/index.tsx
-const Alert = ({ show, title, description, type = "warning", button, plain = false, closable = false, className, icon, onClose,...props }) => {
+const Alert = ({ show, title, description, type = "warning", button, plain = false, closable = false, className, icon, onClose, ...props }) => {
 	if (!show || !title) return null;
-	const typeConfig = {
+	const { bg, iconColor, Icon } = {
 		success: {
 			bg: "bg-green-light",
 			iconColor: "text-green",
@@ -333,16 +301,14 @@ const Alert = ({ show, title, description, type = "warning", button, plain = fal
 			iconColor: "text-red-500",
 			Icon: IconAlertCircle
 		}
-	};
-	const config = typeConfig[type];
-	const { bg, iconColor, Icon } = config;
-	const descriptionId = description ? "alert-desc" : undefined;
+	}[type];
+	const descriptionId = description ? "alert-desc" : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		role: "alert",
 		"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,
@@ -361,17 +327,17 @@ const Alert = ({ show, title, description, type = "warning", button, plain = fal
 						"data-testid": "alert-icon",
 						"aria-hidden": "true"
 					})), /* @__PURE__ */ jsx("span", {
-						className: "yo-text-base",
+						className: "yo-text-body",
 						children: title
 					})]
 				}),
 				description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", {
 					id: descriptionId,
-					className: "text-sm text-color-gray-900",
+					className: "yo-text-small text-color-gray-900",
 					children: description
 				}) : /* @__PURE__ */ jsx("div", {
 					id: descriptionId,
-					className: "text-sm text-color-gray-900",
+					className: "yo-text-small text-color-gray-900",
 					children: description
 				})),
 				button && /* @__PURE__ */ jsx("div", { children: button })
@@ -390,7 +356,6 @@ const Alert = ({ show, title, description, type = "warning", button, plain = fal
 	});
 };
 Alert.displayName = "Alert";
-
 //#endregion
 //#region src/components/appleAppButtonIcon/index.tsx
 const AppleAppButtonIcon = (props) => /* @__PURE__ */ jsxs("svg", {
@@ -531,10 +496,9 @@ const AppleAppButtonIcon = (props) => /* @__PURE__ */ jsxs("svg", {
 		})
 	}) })]
 });
-
 //#endregion
 //#region src/icons/IconLoading.tsx
-const IconLoading = ({ className,...props }) => /* @__PURE__ */ jsxs("svg", {
+const IconLoading = ({ className, ...props }) => /* @__PURE__ */ jsxs("svg", {
 	"data-component": "button",
 	"data-testid": "loading-svg-button",
 	viewBox: "0 0 256 256",
@@ -618,10 +582,9 @@ const IconLoading = ({ className,...props }) => /* @__PURE__ */ jsxs("svg", {
 		})
 	]
 });
-
 //#endregion
 //#region src/components/textInput/index.tsx
-const TextInput = React.forwardRef(({ rightSection, leftSection, className, error, autoFocus, label, maxLength, enablePasswordManagerAutofill = false, onBlur, disabled, loadingState, onKeyDown, min = "0", max, autoComplete, showRightSection = true, step, wrapperClassName, password = false,...props }, ref) => {
+const TextInput = React.forwardRef(({ rightSection, leftSection, className, error, autoFocus, label, maxLength, enablePasswordManagerAutofill = false, onBlur, disabled, loadingState, onKeyDown, min = "0", max, autoComplete, showRightSection = true, step, wrapperClassName, password = false, ...props }, ref) => {
 	const [showPassword, setShowPassword] = React.useState(false);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-component": "TextInput",
@@ -630,14 +593,14 @@ const TextInput = React.forwardRef(({ rightSection, leftSection, className, erro
 		children: [
 			typeof label === "string" ? /* @__PURE__ */ 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__ */ jsxs("div", {
 				className: "relative",
 				children: [
 					leftSection && /* @__PURE__ */ jsx("div", {
-						className: clsx("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: clsx("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__ */ jsx("input", {
@@ -651,25 +614,25 @@ const TextInput = React.forwardRef(({ rightSection, leftSection, className, erro
 						step,
 						maxLength,
 						className: clsx(`${loadingState ? "cursor-not-allowed" : ""}`, `${disabled ? "text-gray-500" : "text-gray-900"} selection:bg-turquoise-200 focus:border-turquoise-500 focus:ring-turquoise-500 active:border-turquoise-500 active:ring-turquoise-500 h-10 w-full rounded-[4px] border border-gray-200 bg-ultra-light-gray px-3 text-sm font-normal outline-hidden ${rightSection && "pr-12"} ${leftSection && "pl-12"} ${error && "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"}`, className),
-						"aria-busy": loadingState || undefined,
-						"data-lpignore": enablePasswordManagerAutofill ? undefined : "true",
-						"data-1p-ignore": enablePasswordManagerAutofill ? undefined : "true",
+						"aria-busy": loadingState || void 0,
+						"data-lpignore": enablePasswordManagerAutofill ? void 0 : "true",
+						"data-1p-ignore": enablePasswordManagerAutofill ? void 0 : "true",
 						ref,
 						...props,
 						type: password ? showPassword ? "text" : "password" : "text"
 					}),
 					loadingState ? /* @__PURE__ */ 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__ */ jsx(IconLoading, {
 							className: "h-4 w-4 animate-spin text-gray-500",
 							"aria-label": "Loading"
 						})
 					}) : rightSection && showRightSection && /* @__PURE__ */ 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__ */ 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__ */ jsx(IconEyeCheck, {
 							"data-testid": "password-visibility-toggle",
 							className: "cursor-pointer text-gray-500",
@@ -685,13 +648,12 @@ const TextInput = React.forwardRef(({ rightSection, leftSection, className, erro
 				]
 			}),
 			error && /* @__PURE__ */ jsx("div", {
-				className: "mt-2 text-xs font-normal text-red-500",
+				className: "mt-2 yo-text-caption text-red-500",
 				children: error
 			})
 		]
 	});
 });
-
 //#endregion
 //#region src/components/autoCompleteInput/index.tsx
 const AutoCompleteInput = ({ label, onChange, onFocus, inputValue, showSuggestions, handleOnKeyDown, children, error, rightSection, inputRef }) => /* @__PURE__ */ jsxs("div", {
@@ -712,7 +674,6 @@ const AutoCompleteInput = ({ label, onChange, onFocus, inputValue, showSuggestio
 		"aria-controls": "suggestions-googlemaps-location-list"
 	}), showSuggestions && inputValue && children]
 });
-
 //#endregion
 //#region src/components/avatar/index.tsx
 const radiusFormatter = {
@@ -738,10 +699,9 @@ const Avatar = ({ src, alt = "", size = 50, radius = 100, "data-testid": dataTes
 	})
 });
 Avatar.displayName = "Avatar";
-
 //#endregion
 //#region src/components/avatarIndicator/index.tsx
-const AvatarIndicator = ({ indicatorCount, className,...props }) => /* @__PURE__ */ jsx("div", {
+const AvatarIndicator = ({ indicatorCount, className, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("grid h-5 min-w-5 w-fit flex-col place-content-center items-center justify-center rounded-full bg-white px-0.5", className),
 	"data-component": "AvatarIndicator",
 	"data-testid": "AvatarIndicator",
@@ -751,15 +711,14 @@ const AvatarIndicator = ({ indicatorCount, className,...props }) => /* @__PURE__
 		children: `+${indicatorCount}`
 	})
 });
-
 //#endregion
 //#region src/components/badge/index.tsx
-const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, children,...props }) => {
+const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, children, ...props }) => {
 	if (!children) return null;
 	return /* @__PURE__ */ 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,
@@ -781,13 +740,12 @@ const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, children
 	});
 };
 Badge.displayName = "Badge";
-
 //#endregion
 //#region src/components/bigBadge/index.tsx
-const BigBadge = ({ styleVariant = COLOR.GREEN, className, children,...props }) => /* @__PURE__ */ jsx("div", {
+const BigBadge = ({ styleVariant = COLOR.GREEN, className, children, ...props }) => /* @__PURE__ */ 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,
@@ -800,7 +758,6 @@ const BigBadge = ({ styleVariant = COLOR.GREEN, className, children,...props })
 	...props,
 	children
 });
-
 //#endregion
 //#region src/components/breadCrumb/index.tsx
 const BreadCrumb = ({ children, LinkText }) => /* @__PURE__ */ jsx(LinkText, {
@@ -812,7 +769,6 @@ const BreadCrumb = ({ children, LinkText }) => /* @__PURE__ */ jsx(LinkText, {
 	})] })
 });
 BreadCrumb.displayName = "BreadCrumb";
-
 //#endregion
 //#region src/components/button/buttonVariants.ts
 const defaultButtonStyling = "justify-center group relative flex items-center gap-2 cursor-pointer border rounded py-2 px-5  text-sx md:text-sm md:font-medium font-medium hover:outline-hidden focus:outline-hidden disabled:cursor-not-allowed transition-colors duration-100 ease-in-out";
@@ -821,16 +777,15 @@ const buttonVariants = {
 	secondary: clsx(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: clsx(defaultButtonStyling, "border-transparent bg-red-500 text-white hover:bg-red-700 disabled:bg-red-100 disabled:hover:bg-red-100"),
 	link: clsx(defaultButtonStyling, "border-transparent bg-transparent text-accent-blue hover:bg-gray-50 disabled:bg-transparent disabled:text-gray-800 disabled:hover:bg-transparent"),
-	outline: clsx(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: clsx(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: clsx(defaultButtonStyling, "absolute top-0 right-0 h-full w-[50px] border-0 bg-transparent bg-no-repeat"),
 	icon__primary: clsx(defaultButtonStyling, "flex! items-center justify-center"),
 	icon__danger: clsx(defaultButtonStyling, "flex! items-center justify-center"),
 	action: clsx(defaultButtonStyling, "w-full bg-transparent border border-gray-200 whitespace-nowrap", "lg:w-[36px] lg:h-[36px]", "lg:p-0 lg:gap-0", "lg:hover:bg-transparent lg:hover:border-black", "lg:[&_svg]:-ml-2 lg:[&_svg]:-mr-2")
 };
-
 //#endregion
 //#region src/components/button/index.tsx
-function Button({ type = "button", variant = "primary", ariaLabel, block = false, isLoading = false, icon: iconFromProps = null, iconRight = false, onClick, className, children, dataTestId,...props }) {
+function Button({ type = "button", variant = "primary", ariaLabel, block = false, isLoading = false, icon: iconFromProps = null, iconRight = false, onClick, className, children, dataTestId, ...props }) {
 	const loadingIcon = /* @__PURE__ */ jsx(IconLoading, { className: "animate-spin-slow mr-2 stroke-current" });
 	const icon = isLoading ? loadingIcon : iconFromProps;
 	const formattedIcon = icon ? formatIcon(icon, { className: clsx({
@@ -844,7 +799,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: [
@@ -855,10 +810,9 @@ function Button({ type = "button", variant = "primary", ariaLabel, block = false
 	});
 }
 Button.displayName = "Button";
-
 //#endregion
 //#region src/components/checkbox/index.tsx
-const CheckboxComponent = ({ size = "md", className, error, mediumBoldText, label, labelClassName, indeterminate = false, disabled = false,...props }, ref) => /* @__PURE__ */ jsxs("div", {
+const CheckboxComponent = ({ size = "md", className, error, mediumBoldText, label, labelClassName, indeterminate = false, disabled = false, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	"data-testid": "checkbox-wrapper",
 	className: cn("relative grid gap-2", className),
 	children: [/* @__PURE__ */ jsxs("label", {
@@ -907,19 +861,18 @@ const CheckboxComponent = ({ size = "md", className, error, mediumBoldText, labe
 			]
 		}), label && /* @__PURE__ */ 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__ */ jsx("small", {
-		className: "text-xs font-normal text-red-500",
+		className: "yo-text-caption text-red-500",
 		children: error
 	})]
 });
 const Checkbox = forwardRef(CheckboxComponent);
-
 //#endregion
 //#region src/components/popover/index.tsx
-const Popover = forwardRef(({ content, children, hoverEnabled = false, passedOpen = false, placement = "right", style = "card", isMobile = false, className }, ref) => {
+const Popover = forwardRef(({ content, children, hoverEnabled = false, passedOpen = false, placement = "right", style = "card", isMobile = false, className, gradientVariant = "client" }, ref) => {
 	const [isOpen, setIsOpen] = useState(passedOpen);
 	const mobileStyles = { width: `${style === "card" && "100%"}` };
 	const { refs, floatingStyles, context } = useFloating({
@@ -942,16 +895,13 @@ const Popover = forwardRef(({ content, children, hoverEnabled = false, passedOpe
 	});
 	const focus = useFocus(context);
 	const hover = useHover(context, { enabled: hoverEnabled });
-	const dismiss = useDismiss(context);
-	const role = useRole(context, { role: "tooltip" });
-	const interactions = [
+	const { getReferenceProps, getFloatingProps } = useInteractions([
 		click,
 		focus,
-		dismiss,
-		role,
+		useDismiss(context),
+		useRole(context, { role: "tooltip" }),
 		hover
-	];
-	const { getReferenceProps, getFloatingProps } = useInteractions(interactions);
+	]);
 	useImperativeHandle(ref, () => ({
 		closePopover: () => setIsOpen(false),
 		openPopover: () => setIsOpen(true),
@@ -977,7 +927,7 @@ const Popover = forwardRef(({ content, children, hoverEnabled = false, passedOpe
 			"data-testid": "popover-container",
 			"data-component": "Popover",
 			children: [style === "minimal" && content, style === "card" && /* @__PURE__ */ 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__ */ jsxs("div", {
 					className: "relative overflow-hidden bg-white p-5",
 					children: [!hoverEnabled && /* @__PURE__ */ jsx(ActionIcon, {
@@ -992,12 +942,11 @@ const Popover = forwardRef(({ content, children, hoverEnabled = false, passedOpe
 		})]
 	});
 });
-
 //#endregion
 //#region src/components/datePickerInput/index.tsx
 const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil, className, error, onChange, placeholder, label, disabled, minimalDropdownYears = 4 }) => {
 	const [selected, setSelected] = useState(value);
-	const today = new Date();
+	const today = /* @__PURE__ */ new Date();
 	const [newMonth, setNewMonth] = useState(selected || today);
 	const [dropdownOpened, setDropdownOpened] = useState({
 		month: false,
@@ -1076,23 +1025,23 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 			fixedWeeks: true,
 			endMonth: addMonths(today, 13),
 			captionLayout: "dropdown",
-			onMonthChange: (newMonth$1) => setNewMonth(newMonth$1),
+			onMonthChange: (newMonth) => setNewMonth(newMonth),
 			showOutsideDays: true,
-			disabled: disabledFrom ? { before: disabledFrom } : disabledUntil ? { after: disabledUntil } : undefined,
+			disabled: disabledFrom ? { before: disabledFrom } : disabledUntil ? { after: disabledUntil } : void 0,
 			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",
@@ -1101,12 +1050,12 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 			},
 			components: {
 				DayButton: (props) => {
-					const { day,...buttonProps } = props;
+					const { day, ...buttonProps } = props;
 					const { goToMonth } = useDayPicker();
 					return /* @__PURE__ */ jsx("button", {
 						type: "button",
 						...buttonProps,
-						className: clsx("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: clsx("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);
@@ -1116,7 +1065,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 				Dropdown: (props) => {
 					const { goToMonth, months } = useDayPicker();
 					const { className: dropdownClassName } = props;
-					const today$1 = new Date();
+					const today = /* @__PURE__ */ new Date();
 					/* istanbul ignore next - react-day-picker may not pass this className in our test env */
 					if (dropdownClassName === "rdp-months_dropdown") {
 						const selectedYear = newMonth.getFullYear();
@@ -1142,8 +1091,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 								className: "shadow-dropdown absolute z-70 rounded-md border border-gray-50 bg-white",
 								children: selectItems.map((item) => /* @__PURE__ */ jsx("div", {
 									onClick: () => {
-										const newDate = new Date(selectedYear, parseInt(item.value));
-										goToMonth(newDate);
+										goToMonth(new Date(selectedYear, parseInt(item.value)));
 										setDropdownOpened({
 											month: false,
 											year: false
@@ -1156,16 +1104,16 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 						}), /* @__PURE__ */ 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$1);
-								handleDayClick(today$1);
+								goToMonth(today);
+								handleDayClick(today);
 							},
 							children: todayText
 						})] });
 					} else if (dropdownClassName === "rdp-years_dropdown") {
-						const earliestYear = new Date().getFullYear() - minimalDropdownYears;
-						const latestYear = new Date().getFullYear() + 1;
+						const earliestYear = (/* @__PURE__ */ new Date()).getFullYear() - minimalDropdownYears;
+						const latestYear = (/* @__PURE__ */ new Date()).getFullYear() + 1;
 						/* istanbul ignore else - defensive guard will always be truthy */
 						if (earliestYear && latestYear) {
 							const years = Array.from({ length: latestYear - earliestYear + 1 }, (_, i) => earliestYear + i).reverse();
@@ -1184,7 +1132,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 									className: "shadow-dropdown absolute z-70 rounded-md border border-gray-50 bg-white max-h-64 overflow-y-auto",
 									children: years.map((year) => /* @__PURE__ */ jsx("div", {
 										onClick: () => {
-											const newDate = months?.[0].date || new Date();
+											const newDate = months?.[0].date || /* @__PURE__ */ new Date();
 											newDate.setFullYear(year);
 											goToMonth(newDate);
 											setDropdownOpened({
@@ -1210,7 +1158,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 			className: cn("relative", className),
 			children: [
 				label && /* @__PURE__ */ 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__ */ jsxs(Button, {
@@ -1226,23 +1174,23 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 					children: [
 						/* @__PURE__ */ jsx(IconCalendar, {}),
 						/* @__PURE__ */ 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 !== undefined && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", {
-							className: "cursor-pointer text-sm font-normal text-gray-800",
+						selected !== void 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", {
+							className: "cursor-pointer yo-text-small text-gray-800",
 							role: "button",
 							"aria-label": "Clear date",
 							tabIndex: 0,
 							onClick: () => {
-								setSelected(undefined);
-								onChange?.(undefined);
+								setSelected(void 0);
+								onChange?.(void 0);
 							},
 							onKeyDown: (e) => {
 								if (e.key === "Enter" || e.key === " ") {
 									e.preventDefault();
-									setSelected(undefined);
-									onChange?.(undefined);
+									setSelected(void 0);
+									onChange?.(void 0);
 								}
 							},
 							children: /* @__PURE__ */ jsx(IconX, { size: 15 })
@@ -1250,26 +1198,24 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 					]
 				}),
 				error && /* @__PURE__ */ jsx("small", {
-					className: "text-xs font-normal text-red-500",
+					className: "yo-text-caption text-red-500",
 					children: error
 				})
 			]
 		})
 	});
 };
-
 //#endregion
 //#region src/components/divider/index.tsx
-const Divider = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
+const Divider = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	"data-component": "divider",
 	className: clsx("block h-px w-full bg-gray-200", className),
 	...props
 });
-
 //#endregion
 //#region src/components/favouriteButton/index.tsx
 const FavouriteButton = forwardRef((props, ref) => {
-	const { onClick, favourite, iconFilled, iconOutline, favouriteTitle, iconColorSelected = "text-secondary", iconColor = "text-gray-800", iconSize, className = "", styleVariant = "transparent", children,...rest } = props;
+	const { onClick, favourite, iconFilled, iconOutline, favouriteTitle, iconColorSelected = "text-secondary", iconColor = "text-gray-800", iconSize, className = "", styleVariant = "transparent", children, ...rest } = props;
 	return /* @__PURE__ */ jsx(ActionIcon, {
 		onClick,
 		"data-component": "favouriteButton",
@@ -1283,7 +1229,6 @@ const FavouriteButton = forwardRef((props, ref) => {
 		children
 	});
 });
-
 //#endregion
 //#region src/components/filters/FilterButton.tsx
 const FilterButton = ({ onClick, hasFilters, reset, filtersText, resetText }) => /* @__PURE__ */ jsxs("div", {
@@ -1296,17 +1241,16 @@ const FilterButton = ({ onClick, hasFilters, reset, filtersText, resetText }) =>
 		icon: /* @__PURE__ */ jsx(IconFilter, { stroke: 1 }),
 		children: filtersText
 	}), /* @__PURE__ */ 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
 	})]
 });
-
 //#endregion
 //#region src/components/filters/FilterItem.tsx
 const FilterItem = ({ title, isActive = false, onClick }) => /* @__PURE__ */ 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__ */ jsx("input", {
 		type: "checkbox",
 		className: "hidden",
@@ -1314,7 +1258,6 @@ const FilterItem = ({ title, isActive = false, onClick }) => /* @__PURE__ */ jsx
 		checked: isActive
 	}), title]
 });
-
 //#endregion
 //#region src/components/filters/index.tsx
 const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, filtersText, resetText }) => {
@@ -1336,7 +1279,7 @@ const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, fi
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-end gap-3",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-sm font-medium",
+				className: "yo-text-small-medium",
 				"data-testid": "filters-title",
 				children: selectedFiltersText
 			}), /* @__PURE__ */ jsx(FilterButton, {
@@ -1360,7 +1303,6 @@ const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, fi
 		})]
 	});
 };
-
 //#endregion
 //#region src/components/googleAppButtonIcon/index.tsx
 const GoogleAppButtonIcon = (props) => /* @__PURE__ */ jsxs("svg", {
@@ -1552,7 +1494,6 @@ const GoogleAppButtonIcon = (props) => /* @__PURE__ */ jsxs("svg", {
 		]
 	})]
 });
-
 //#endregion
 //#region src/components/hamburgerMenuButton/index.tsx
 const HamburgerMenuButton = forwardRef(({ menuState, setMenuState }, ref) => {
@@ -1581,7 +1522,6 @@ const HamburgerMenuButton = forwardRef(({ menuState, setMenuState }, ref) => {
 	});
 });
 HamburgerMenuButton.displayName = "HamburgerMenuButton";
-
 //#endregion
 //#region src/components/hr/index.tsx
 const HR = ({ className }) => /* @__PURE__ */ jsx("hr", {
@@ -1589,10 +1529,9 @@ const HR = ({ className }) => /* @__PURE__ */ jsx("hr", {
 	className: `h-px w-full border-none bg-gray-200 ${className}`
 });
 HR.displayName = "HR";
-
 //#endregion
 //#region src/components/island/index.tsx
-const Island = ({ children, className, noShadow = false, noPadding = false,...props }) => /* @__PURE__ */ jsx("div", {
+const Island = ({ children, className, noShadow = false, noPadding = false, ...props }) => /* @__PURE__ */ jsx("div", {
 	"data-testid": "island",
 	"data-component": "island",
 	className: cn("relative bg-white px-5 py-5 md:px-10 md:py-9", {
@@ -1604,7 +1543,6 @@ const Island = ({ children, className, noShadow = false, noPadding = false,...pr
 	children
 });
 Island.displayName = "Island";
-
 //#endregion
 //#region src/components/kebabMenu/index.tsx
 const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "default" }) => {
@@ -1667,9 +1605,9 @@ const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "
 			children: /* @__PURE__ */ jsx("div", {
 				className: "absolute right-0 z-10 mt-2 w-auto min-w-[200px] rounded-md border-[0.0625rem] border-gray-200 bg-white p-1 shadow-md",
 				children: content.map((c, index) => {
-					const button$1 = /* @__PURE__ */ jsx(UnstyledButton, {
+					const button = /* @__PURE__ */ 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
@@ -1678,25 +1616,23 @@ const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "
 						passedOpen: false,
 						size: "sm",
 						content: c.tooltip,
-						children: button$1
-					}, index) : /* @__PURE__ */ jsx(Fragment, { children: button$1 }, index);
+						children: button
+					}, index) : /* @__PURE__ */ jsx(Fragment, { children: button }, index);
 				})
 			})
 		})]
 	}) });
 };
 KebabMenu.displayName = "KebabMenu";
-
 //#endregion
 //#region src/components/label/index.tsx
-const Label = ({ children, className,...props }) => /* @__PURE__ */ jsx("label", {
+const Label = ({ children, className, ...props }) => /* @__PURE__ */ 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
 });
-
 //#endregion
 //#region src/components/loader/index.tsx
 const Loader = () => /* @__PURE__ */ jsx("div", {
@@ -1708,7 +1644,6 @@ const Loader = () => /* @__PURE__ */ jsx("div", {
 	})
 });
 Loader.displayName = "Loader";
-
 //#endregion
 //#region src/components/logo/index.tsx
 const LogoBlack = (props) => /* @__PURE__ */ jsxs("svg", {
@@ -1778,10 +1713,9 @@ const LogoBlack = (props) => /* @__PURE__ */ 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 = useRef(null);
 	const refContainer = useRef(null);
 	const [isOpen, setIsOpen] = useState(false);
@@ -1862,16 +1796,15 @@ const Modal = ({ title, children, withCloseButton = true, opened, additionalClas
 					}),
 					title && /* @__PURE__ */ jsx("div", {
 						className: "relative w-full pt-14",
-						children: /* @__PURE__ */ jsx("h2", {
-							className: "mt-0 mb-8 text-left text-3xl font-bold",
+						children: /* @__PURE__ */ jsx("h1", {
+							className: "yo-text-h1 mt-0 mb-8 text-left",
 							children: title
 						})
 					}),
 					/* @__PURE__ */ jsx("div", { children }),
 					gradient && /* @__PURE__ */ 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")
 					})
 				]
 			})
@@ -1879,7 +1812,6 @@ const Modal = ({ title, children, withCloseButton = true, opened, additionalClas
 	}), document.body);
 };
 Modal.displayName = "Modal";
-
 //#endregion
 //#region src/components/navButtons/index.tsx
 const NavButtons = ({ onNext, onPrev }) => /* @__PURE__ */ jsxs("div", {
@@ -1906,7 +1838,6 @@ const NavButtons = ({ onNext, onPrev }) => /* @__PURE__ */ jsxs("div", {
 		})
 	]
 });
-
 //#endregion
 //#region src/components/numberField/index.tsx
 const NumberField = ({ name, value = 0, max, min = 0, isDisabled, id, className = "", label, error, onChange }) => {
@@ -1926,7 +1857,7 @@ const NumberField = ({ name, value = 0, max, min = 0, isDisabled, id, className
 		children: [
 			label && /* @__PURE__ */ jsx("label", {
 				htmlFor: id,
-				className: "mb-1 text-sm font-medium text-gray-700",
+				className: "mb-1 yo-text-label",
 				children: label
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -1960,27 +1891,25 @@ const NumberField = ({ name, value = 0, max, min = 0, isDisabled, id, className
 				]
 			}),
 			error && /* @__PURE__ */ jsx("p", {
-				className: "mt-1 text-sm font-normal text-red-600",
+				className: "mt-1 yo-text-small text-red-600",
 				children: error
 			})
 		]
 	});
 };
-
 //#endregion
 //#region src/components/pageUnavailable/index.tsx
 const PageUnavailable = ({ notAvailableButton, notAvailableDescription, notAvailableHeaderText }) => /* @__PURE__ */ jsx(Island, { children: /* @__PURE__ */ jsxs("div", {
 	className: "mx-auto grid max-w-[900px] justify-items-center gap-8 text-center",
 	children: [
 		/* @__PURE__ */ jsx("h1", {
-			className: "text-3xl font-bold",
+			className: "yo-text-h1",
 			children: notAvailableHeaderText
 		}),
 		/* @__PURE__ */ jsx("p", { children: notAvailableDescription }),
 		/* @__PURE__ */ jsx("div", { children: notAvailableButton })
 	]
 }) });
-
 //#endregion
 //#region src/components/passwordInput/index.tsx
 const PasswordInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(TextInput, {
@@ -1991,7 +1920,6 @@ const PasswordInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(TextI
 	ref
 }));
 PasswordInput.displayName = "PasswordInput";
-
 //#endregion
 //#region src/components/progressBar/index.tsx
 const ProgressBar = ({ value, maxValue = 100, className }) => {
@@ -2015,10 +1943,9 @@ 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__ */ jsxs("div", {
+const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, className, containerClassName, labelClassName, ...props }) => /* @__PURE__ */ jsxs("div", {
 	"data-testid": "radio-button-container",
 	className: `${containerClassName || "radio-button-container"} relative flex items-start`,
 	children: [/* @__PURE__ */ jsxs("div", {
@@ -2028,7 +1955,7 @@ const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, cl
 			id,
 			name,
 			value,
-			onChange: props.disabled ? undefined : onChange,
+			onChange: props.disabled ? void 0 : onChange,
 			checked,
 			"data-testid": dataTestId,
 			className: `${clsx(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 })}`,
@@ -2046,12 +1973,11 @@ const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, cl
 		})]
 	}), /* @__PURE__ */ jsx("label", {
 		htmlFor: id,
-		className: ` ${clsx(labelClassName, "mb-0 cursor-pointer pl-3 text-sm font-normal", { "text-gray-400": props.disabled })}`,
+		className: ` ${clsx(labelClassName, "mb-0 cursor-pointer pl-3 yo-text-small font-normal", { "text-gray-400": props.disabled })}`,
 		children: label
 	})]
 });
 RadioButton.displayName = "RadioButton";
-
 //#endregion
 //#region src/icons/IconStarEmpty.tsx
 const IconStarEmpty = (props) => /* @__PURE__ */ jsx("svg", {
@@ -2068,7 +1994,6 @@ const IconStarEmpty = (props) => /* @__PURE__ */ jsx("svg", {
 		fill: "#E0E0E0"
 	})
 });
-
 //#endregion
 //#region src/icons/IconStarFilled.tsx
 const IconStarFilled = (props) => /* @__PURE__ */ jsx("svg", {
@@ -2085,7 +2010,6 @@ const IconStarFilled = (props) => /* @__PURE__ */ jsx("svg", {
 		fill: "currentColor"
 	})
 });
-
 //#endregion
 //#region src/icons/IconStarHalfFilled.tsx
 const IconStarHalfFilled = (props) => /* @__PURE__ */ jsxs("svg", {
@@ -2105,7 +2029,6 @@ const IconStarHalfFilled = (props) => /* @__PURE__ */ jsxs("svg", {
 		fill: "currentColor"
 	})]
 });
-
 //#endregion
 //#region src/components/rating/index.tsx
 const Rating = ({ rating, ratings, size = "normal", setReview, className, setReviewError, error }) => {
@@ -2114,7 +2037,7 @@ const Rating = ({ rating, ratings, size = "normal", setReview, className, setRev
 	const [reviewIsSet, setReviewIsSet] = useState(false);
 	const currentRating = hoveredStars || Math.round(rating * 2) / 2;
 	const currentSmallRating = hoveredSmallStars;
-	const sizeClasses$1 = {
+	const sizeClasses = {
 		small: "h-4 w-4",
 		normal: "h-[22px] w-[22px]",
 		large: "h-[32px] w-[32px]"
@@ -2128,29 +2051,26 @@ const Rating = ({ rating, ratings, size = "normal", setReview, className, setRev
 	const handleHover = (value) => setReview && setHoveredStars(value);
 	const StarIcon = ({ index }) => {
 		if (!setReview) {
-			const roundedRating$1 = Math.round(rating * 2) / 2;
-			const hasHalf$1 = roundedRating$1 % 1 === .5;
-			const effectiveRating$1 = roundedRating$1;
-			const fullStars$1 = Math.floor(effectiveRating$1);
-			if (index <= fullStars$1) return /* @__PURE__ */ jsx(IconStarFilled, { className: `text-yellow ${sizeClasses$1[size]}` });
-			if (hasHalf$1 && index === Math.ceil(effectiveRating$1)) return /* @__PURE__ */ jsx(IconStarHalfFilled, { className: `text-yellow ${sizeClasses$1[size]}` });
-			return /* @__PURE__ */ jsx(IconStarEmpty, { className: `text-yellow ${sizeClasses$1[size]}` });
+			const roundedRating = Math.round(rating * 2) / 2;
+			const hasHalf = roundedRating % 1 === .5;
+			const effectiveRating = roundedRating;
+			if (index <= Math.floor(effectiveRating)) return /* @__PURE__ */ jsx(IconStarFilled, { className: `text-navy-blue ${sizeClasses[size]}` });
+			if (hasHalf && index === Math.ceil(effectiveRating)) return /* @__PURE__ */ jsx(IconStarHalfFilled, { className: `text-navy-blue ${sizeClasses[size]}` });
+			return /* @__PURE__ */ 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;
-		const fullStars = Math.floor(effectiveRating);
-		if (index <= fullStars) return /* @__PURE__ */ jsx(IconStarFilled, { className: `text-yellow ${sizeClasses$1[size]}` });
-		if (hasHalf && index === Math.ceil(effectiveRating)) return /* @__PURE__ */ jsx(IconStarHalfFilled, { className: `text-yellow ${sizeClasses$1[size]}` });
-		return /* @__PURE__ */ jsx(IconStarEmpty, { className: `text-yellow ${sizeClasses$1[size]} ` });
+		if (index <= Math.floor(effectiveRating)) return /* @__PURE__ */ jsx(IconStarFilled, { className: `text-navy-blue ${sizeClasses[size]}` });
+		if (hasHalf && index === Math.ceil(effectiveRating)) return /* @__PURE__ */ jsx(IconStarHalfFilled, { className: `text-navy-blue ${sizeClasses[size]}` });
+		return /* @__PURE__ */ jsx(IconStarEmpty, { className: `text-navy-blue ${sizeClasses[size]} ` });
 	};
-	const StarSmallIcon = ({ index, className: className$1 }) => {
-		const displayRating = currentSmallRating;
-		const roundedRating = Math.round(displayRating * 2) / 2;
-		if (index === roundedRating) return /* @__PURE__ */ jsx(IconStarFilled, { className: cn(className$1, "text-yellow") });
-		if (index - roundedRating === .5) return /* @__PURE__ */ jsx(IconStarHalfFilled, { className: cn(className$1, "text-yellow") });
-		return /* @__PURE__ */ jsx(IconStarEmpty, { className: cn(className$1, "text-yellow") });
+	const StarSmallIcon = ({ index, className }) => {
+		const roundedRating = Math.round(currentSmallRating * 2) / 2;
+		if (index === roundedRating) return /* @__PURE__ */ jsx(IconStarFilled, { className: cn(className, "text-navy-blue") });
+		if (index - roundedRating === .5) return /* @__PURE__ */ jsx(IconStarHalfFilled, { className: cn(className, "text-navy-blue") });
+		return /* @__PURE__ */ jsx(IconStarEmpty, { className: cn(className, "text-navy-blue") });
 	};
 	return /* @__PURE__ */ jsxs("span", {
 		className: cn("flex flex-col", className),
@@ -2179,7 +2099,7 @@ const Rating = ({ rating, ratings, size = "normal", setReview, className, setRev
 					onClick: () => handleStarClick(value),
 					children: [Array.from({ length: value }).map((_, i) => /* @__PURE__ */ jsx(StarSmallIcon, {
 						index: value,
-						className: "text-yellow size-5"
+						className: "text-navy-blue size-5"
 					}, i)), /* @__PURE__ */ jsx("span", {
 						className: "mt-[5px] flex items-center pl-2 text-[12px] text-gray-800",
 						children: label
@@ -2193,17 +2113,16 @@ const Rating = ({ rating, ratings, size = "normal", setReview, className, setRev
 		]
 	});
 };
-
 //#endregion
 //#region src/components/regionSelector/index.tsx
-const RegionSelector = ({ title, regions,...props }) => {
+const RegionSelector = ({ title, regions, ...props }) => {
 	if (regions?.length === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-component": "regionSelector",
 		className: "flex w-full flex-col items-center justify-center gap-11 break-words lg:gap-14",
 		...props,
 		children: [/* @__PURE__ */ 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__ */ 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",
@@ -2213,7 +2132,6 @@ const RegionSelector = ({ title, regions,...props }) => {
 	});
 };
 RegionSelector.displayName = "RegionSelector";
-
 //#endregion
 //#region src/components/reviews/index.tsx
 const ReviewsLine = ({ maxValue, amount, countStarsText }) => /* @__PURE__ */ jsxs("div", {
@@ -2275,7 +2193,6 @@ const Reviews = ({ totalRatings, ratings, averageRating, aggregatedRating, count
 		})
 	})]
 });
-
 //#endregion
 //#region src/components/scrollToTop/index.tsx
 const ScrollToTop = ({ scrollToTopTitle }) => {
@@ -2315,10 +2232,9 @@ const ScrollToTop = ({ scrollToTopTitle }) => {
 		className: "z-[99]"
 	})] });
 };
-
 //#endregion
 //#region src/components/searchInput/index.tsx
-const SearchInput = ({ placeholder, value, onChange, className, rightSection,...props }) => /* @__PURE__ */ jsx(TextInput, {
+const SearchInput = ({ placeholder, value, onChange, className, rightSection, ...props }) => /* @__PURE__ */ jsx(TextInput, {
 	placeholder,
 	className: className || "w-full lg:w-auto lg:min-w-[23.75rem]",
 	rightSection: rightSection || /* @__PURE__ */ jsx(Fragment$1, {}),
@@ -2326,7 +2242,6 @@ const SearchInput = ({ placeholder, value, onChange, className, rightSection,...
 	onChange,
 	...props
 });
-
 //#endregion
 //#region src/hooks/useDebouncedValue.ts
 function useDebouncedValue(value, delay = 200) {
@@ -2337,10 +2252,9 @@ function useDebouncedValue(value, delay = 200) {
 	}, [value, delay]);
 	return debouncedValue;
 }
-
 //#endregion
 //#region src/components/select/index.tsx
-function Select({ id, options, placeholder, label, errorText, hideError = false, isClearable = false, disabled = false, multiSelect = false, searchable = false, value, defaultValue, onValueChange, className, searchPlaceholder, noResultsText,...props }) {
+function Select({ id, options, placeholder, label, errorText, hideError = false, isClearable = false, disabled = false, multiSelect = false, searchable = false, value, defaultValue, onValueChange, className, searchPlaceholder, noResultsText, ...props }) {
 	const innerRef = useRef(null);
 	const buttonRef = useRef(null);
 	const optionRefs = useRef([]);
@@ -2350,12 +2264,10 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 	const [searchTerm, setSearchTerm] = useState("");
 	const [focusedIndex, setFocusedIndex] = useState(-1);
 	const debouncedSearch = useDebouncedValue(searchTerm);
-	const isControlled = value !== undefined;
+	const isControlled = value !== void 0;
 	const currentValue = isControlled ? value : internalValue;
 	const selectedLabels = useMemo(() => {
-		if (Array.isArray(currentValue)) {
-			return options.filter((o) => currentValue.includes(o.value)).map((o) => o.label).join(", ");
-		}
+		if (Array.isArray(currentValue)) return options.filter((o) => currentValue.includes(o.value)).map((o) => o.label).join(", ");
 		return options.find((o) => o.value === currentValue)?.label;
 	}, [currentValue, options]);
 	const { refs, floatingStyles, context } = useFloating({
@@ -2369,13 +2281,10 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 		whileElementsMounted: autoUpdate,
 		placement: "bottom-start"
 	});
-	const click = useClick(context);
-	const dismiss = useDismiss(context);
-	const role = useRole(context, { role: "combobox" });
 	const { getReferenceProps, getFloatingProps } = useInteractions([
-		click,
-		dismiss,
-		role
+		useClick(context),
+		useDismiss(context),
+		useRole(context, { role: "combobox" })
 	]);
 	const handleSelect = useCallback((val) => {
 		if (multiSelect) {
@@ -2398,8 +2307,8 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 	const handleClear = useCallback((e) => {
 		e.preventDefault();
 		e.stopPropagation();
-		if (!isControlled) setInternalValue(undefined);
-		onValueChange?.(undefined);
+		if (!isControlled) setInternalValue(void 0);
+		onValueChange?.(void 0);
 		setSearchTerm("");
 	}, [isControlled, onValueChange]);
 	const showPlaceholder = !currentValue || Array.isArray(currentValue) && currentValue.length === 0;
@@ -2503,7 +2412,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,
@@ -2548,7 +2457,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__ */ 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__ */ jsxs("div", {
 							className: "flex items-center gap-2 px-2 py-1 border-b border-gray-100 sticky top-0 bg-white",
 							role: "search",
@@ -2562,7 +2471,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__ */ jsx("div", {
@@ -2570,13 +2479,15 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 							children: filteredOptions.length ? filteredOptions.map((opt, index) => {
 								const isSelected = Array.isArray(currentValue) ? currentValue.includes(opt.value) : currentValue === opt.value;
 								return /* @__PURE__ */ jsxs("button", {
-									ref: (el) => optionRefs.current[index] = el,
+									ref: (el) => {
+										optionRefs.current[index] = el;
+									},
 									type: "button",
 									onClick: () => handleSelect(opt.value),
 									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__ */ 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",
@@ -2601,7 +2512,7 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 				})
 			}) }),
 			!hideError && errorText && /* @__PURE__ */ jsx("span", {
-				className: "text-xs text-red-500",
+				className: "yo-text-caption text-red-500",
 				role: "alert",
 				children: errorText
 			})
@@ -2609,7 +2520,6 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 	});
 }
 Select.displayName = "Select";
-
 //#endregion
 //#region src/components/settingsCard/index.tsx
 const SettingsCard = ({ icon, title, link, ManageText, LinkComponent }) => /* @__PURE__ */ jsxs("div", {
@@ -2619,16 +2529,15 @@ const SettingsCard = ({ icon, title, link, ManageText, LinkComponent }) => /* @_
 	children: [/* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-4",
 		children: [/* @__PURE__ */ jsx("div", { children: icon }), /* @__PURE__ */ jsx("div", {
-			className: "text-base font-normal",
+			className: "yo-text-body",
 			children: title
 		})]
 	}), /* @__PURE__ */ 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
 	})]
 });
-
 //#endregion
 //#region src/components/skeleton/index.tsx
 const Skeleton = ({ className, "data-testid": dataTestId }) => /* @__PURE__ */ jsx("span", {
@@ -2636,7 +2545,6 @@ const Skeleton = ({ className, "data-testid": dataTestId }) => /* @__PURE__ */ j
 	"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__ */ jsxs("div", {
@@ -2651,7 +2559,6 @@ const SkillPill = ({ name, number }) => /* @__PURE__ */ jsxs("div", {
 		children: number
 	})]
 });
-
 //#endregion
 //#region src/components/stepper/NumberedStepper.tsx
 const NumberedStepper = ({ steps, active, className, stepsCompleted, completedLabel, onStepClick }) => /* @__PURE__ */ jsx("div", {
@@ -2674,10 +2581,10 @@ const NumberedStepper = ({ steps, active, className, stepsCompleted, completedLa
 				className: "flex flex-auto flex-col justify-center",
 				children: [/* @__PURE__ */ 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__ */ jsxs("span", { children: [completedLabel && active === 1 && index === 0 && stepsCompleted.length > 0 ? /* @__PURE__ */ jsxs("span", {
-					className: "text-green flex items-center text-xs font-medium",
+					className: "text-green flex items-center yo-text-caption",
 					children: [
 						completedLabel,
 						" ",
@@ -2691,7 +2598,6 @@ const NumberedStepper = ({ steps, active, className, stepsCompleted, completedLa
 		})
 	}), index < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: `my-2 ml-6 flex h-[24px] w-px align-middle md:ml-0 md:h-px md:w-auto md:flex-1 ${active === 1 ? "bg-light-blue" : "bg-[#CCCCCC]"}` })] }, index))
 });
-
 //#endregion
 //#region src/components/stepper/Stepper.tsx
 const Stepper = ({ steps, setStep = () => {}, variant = "default", clickableSteps, completedSteps, activeStep, isMobile, className }) => /* @__PURE__ */ jsx("div", {
@@ -2731,7 +2637,7 @@ const Stepper = ({ steps, setStep = () => {}, variant = "default", clickableStep
 						/* @__PURE__ */ jsx("div", {
 							className: "flex flex-wrap items-center justify-center",
 							children: /* @__PURE__ */ 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
 							})
 						}),
@@ -2742,7 +2648,6 @@ const Stepper = ({ steps, setStep = () => {}, variant = "default", clickableStep
 		}, index);
 	})
 });
-
 //#endregion
 //#region src/components/stickyMobileButton/index.tsx
 const StickyMobileButtonWrapper = ({ children }) => /* @__PURE__ */ jsx("div", {
@@ -2754,26 +2659,23 @@ const StickyMobileButtonWrapper = ({ children }) => /* @__PURE__ */ jsx("div", {
 		children
 	})
 });
-
 //#endregion
 //#region src/components/table/index.tsx
-const Table = ({ children, className,...props }) => /* @__PURE__ */ jsx("div", {
+const Table = ({ children, className, ...props }) => /* @__PURE__ */ 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__ */ 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
 //#region src/components/table/tableHeader/index.tsx
 const TableHeader = ({ children }) => /* @__PURE__ */ jsx("div", {
@@ -2782,30 +2684,27 @@ const TableHeader = ({ children }) => /* @__PURE__ */ jsx("div", {
 	className: "table-header-group border-b border-gray-200",
 	children
 });
-
 //#endregion
 //#region src/components/table/tableHeaderItem/index.tsx
-const TableHeaderItem = ({ children, smallPadding, className,...props }) => /* @__PURE__ */ jsx("div", {
+const TableHeaderItem = ({ children, smallPadding, className, ...props }) => /* @__PURE__ */ 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
 });
-
 //#endregion
 //#region src/components/table/tableHeaderRow/index.tsx
-const TableHeaderRow = ({ children,...props }) => /* @__PURE__ */ jsx("div", {
+const TableHeaderRow = ({ children, ...props }) => /* @__PURE__ */ jsx("div", {
 	"data-testid": "tableHeaderRow",
 	"data-component": "tableHeaderRow",
 	className: "table-row xl:border-0 xl:border-b xl:border-solid xl:border-gray-200",
 	...props,
 	children
 });
-
 //#endregion
 //#region src/components/table/tableRow/index.tsx
-function TableRow({ children, className, header,...props }) {
+function TableRow({ children, className, header, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-testid": "tableRow",
 		"data-component": "tableRow",
@@ -2814,27 +2713,25 @@ function TableRow({ children, className, header,...props }) {
 		children
 	});
 }
-
 //#endregion
 //#region src/components/tabs/Tab.tsx
 const Tab = forwardRef(({ tabId, activeTab, tabContent, clickFnc, rightSection }, ref) => /* @__PURE__ */ 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__ */ jsx("span", {
 		className: "ml-2 inline-flex",
 		children: rightSection
 	})]
 }));
-
 //#endregion
 //#region src/components/tabs/TabsBadge.tsx
 const TabsBadge = ({ children }) => {
 	const isCircular = typeof children === "number" && children <= 9 || typeof children === "string" && children.length === 1 || false;
 	return /* @__PURE__ */ jsx("div", {
 		"data-testid": "tabs-badge",
-		className: clsx("bg-secondary h-5 rounded-full text-xs leading-5 font-medium text-white", {
+		className: clsx("bg-secondary h-5 rounded-full yo-text-caption leading-5 text-white", {
 			"w-5 text-center": isCircular,
 			"px-2": !isCircular
 		}),
@@ -2842,7 +2739,6 @@ const TabsBadge = ({ children }) => {
 	});
 };
 TabsBadge.displayName = "TabsBadge";
-
 //#endregion
 //#region src/components/tabs/TabsWrapper.tsx
 const TabsWrapper = ({ setActiveTab, activeTab, tabs }) => {
@@ -2900,40 +2796,38 @@ const TabContent = forwardRef(({ tab, setActiveTab, activeTab }, ref) => /* @__P
 	setActiveTab,
 	activeTab: activeTab === tab.value,
 	tabContent: tab.name,
-	rightSection: tab?.rightSection || undefined,
+	rightSection: tab?.rightSection || void 0,
 	clickFnc: () => {
 		tab.clickFnc && tab.clickFnc(tab.value);
 		setActiveTab(tab.value);
 	}
 }));
 TabContent.displayName = "TabContent";
-
 //#endregion
 //#region src/components/textArea/index.tsx
-const Textarea = forwardRef(({ className, label, error, rows = 8,...props }, ref) => /* @__PURE__ */ jsxs("div", {
+const Textarea = forwardRef(({ className, label, error, rows = 8, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	className: "relative grid gap-2",
 	children: [
 		label && /* @__PURE__ */ 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__ */ 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__ */ jsx("small", {
-			className: "text-xs font-normal text-red-500",
+			className: "yo-text-caption text-red-500",
 			children: error
 		})
 	]
 }));
-
 //#endregion
 //#region src/components/themeIcon/index.tsx
-function ThemeIcon({ styleVariant = "black", className, icon, adjustedSize, title,...props }) {
+function ThemeIcon({ styleVariant = "black", className, icon, adjustedSize, title, ...props }) {
 	const classNames = cn("bg-transparent h-9 w-9 rounded-[5px] grid place-content-center", {
 		"text-black": styleVariant === COLOR.BLACK,
 		"text-gray-500": styleVariant === COLOR.GRAY,
@@ -2958,10 +2852,9 @@ function ThemeIcon({ styleVariant = "black", className, icon, adjustedSize, titl
 		})
 	}), /* @__PURE__ */ jsx(Tooltip$1, { id: title })] });
 }
-
 //#endregion
 //#region src/components/timeInput/index.tsx
-const TimeInput = forwardRef(({ label, error, withSeconds, className = "",...props }, ref) => {
+const TimeInput = forwardRef(({ label, error, withSeconds, className = "", ...props }, ref) => {
 	const handleTimeChange = (e) => {
 		if (props.onChange) props.onChange(e);
 	};
@@ -2970,7 +2863,7 @@ const TimeInput = forwardRef(({ label, error, withSeconds, className = "",...pro
 		"data-component": "timeInput",
 		children: [
 			label && /* @__PURE__ */ jsx("label", {
-				className: "mb-2 block text-xs font-medium",
+				className: "mb-2 block yo-text-label",
 				htmlFor: props.id,
 				children: label
 			}),
@@ -2980,16 +2873,15 @@ const TimeInput = forwardRef(({ label, error, withSeconds, className = "",...pro
 				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__ */ jsx("p", {
-				className: "pt-2 text-xs font-normal text-red-500",
+				className: "pt-2 yo-text-caption text-red-500",
 				children: error
 			})
 		]
 	});
 });
-
 //#endregion
 //#region src/components/toggle/index.tsx
 const Toggle = ({ onClick, value, disabled = false }) => {
@@ -3011,7 +2903,6 @@ const Toggle = ({ onClick, value, disabled = false }) => {
 		})
 	});
 };
-
 //#endregion
 //#region src/components/truncatedText/index.tsx
 const TruncatedText = ({ text, limit = 20 }) => {
@@ -3023,7 +2914,7 @@ const TruncatedText = ({ text, limit = 20 }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-2",
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "text-sm font-normal",
+			className: "yo-text-small",
 			children: truncatedText
 		}), text.length > limit && /* @__PURE__ */ jsx(Tooltip, {
 			content: text,
@@ -3035,10 +2926,9 @@ const TruncatedText = ({ text, limit = 20 }) => {
 		})]
 	});
 };
-
 //#endregion
 //#region src/components/unorderedList/index.tsx
-const UnorderedList = ({ children, className, actionItem,...props }) => /* @__PURE__ */ jsxs("ul", {
+const UnorderedList = ({ children, className, actionItem, ...props }) => /* @__PURE__ */ jsxs("ul", {
 	className: cn("m-0 last:border-none", className),
 	"data-component": "unorderedList",
 	"data-testid": "unorderedList",
@@ -3048,72 +2938,55 @@ const UnorderedList = ({ children, className, actionItem,...props }) => /* @__PU
 		children: actionItem
 	})]
 });
-
 //#endregion
 //#region src/components/unorderedListItem/index.tsx
-const UnorderedListItem = ({ children, actionItem, className, header = false,...props }) => /* @__PURE__ */ jsxs("li", {
+const UnorderedListItem = ({ children, actionItem, className, header = false, ...props }) => /* @__PURE__ */ 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__ */ jsx("span", {
 		className: "flex justify-end gap-2 md:absolute md:right-8 md:items-center",
 		children: actionItem
 	})]
 });
-
 //#endregion
 //#region src/hooks/phone/usePhoneNumber.ts
 function usePhoneNumber() {
-	/**
-	* Validates a phone number and returns parsing results
-	*/
-	const validatePhone = useCallback((phoneNumber, options) => phone(phoneNumber, options), []);
-	/**
-	* Strips the country code from a phone number
-	* Example: +85265698900 -> 65698900
-	*/
-	const stripCountryCode = useCallback((phoneNumber) => {
-		const result = phone(phoneNumber);
-		if (!result.isValid) return phoneNumber;
-		return result.phoneNumber.replace(result.countryCode, "");
-	}, []);
-	/**
-	* Returns the country code from a phone number
-	* Example: +85265698900 -> +852
-	*/
-	const getCountryCode = useCallback((phoneNumber) => {
-		const result = phone(phoneNumber);
-		if (!result.isValid) return phoneNumber;
-		return result.countryCode;
-	}, []);
-	/**
-	* Formats a phone number to international format with country code
-	* Example: 0648711212 (with country: 'NL') -> +31648711212
-	*/
-	const formatToInternational = useCallback((phoneNumber, options) => {
-		const result = phone(phoneNumber, options);
-		if (!result.isValid) return phoneNumber;
-		return result.phoneNumber;
-	}, []);
 	return {
-		validatePhone,
-		stripCountryCode,
-		getCountryCode,
-		formatToInternational
+		validatePhone: useCallback((phoneNumber, options) => phone(phoneNumber, options), []),
+		stripCountryCode: useCallback((phoneNumber) => {
+			const result = phone(phoneNumber);
+			if (!result.isValid) return phoneNumber;
+			return result.phoneNumber.replace(result.countryCode, "");
+		}, []),
+		getCountryCode: useCallback((phoneNumber) => {
+			const result = phone(phoneNumber);
+			if (!result.isValid) return phoneNumber;
+			return result.countryCode;
+		}, []),
+		formatToInternational: useCallback((phoneNumber, options) => {
+			const result = phone(phoneNumber, options);
+			if (!result.isValid) return phoneNumber;
+			return result.phoneNumber;
+		}, [])
 	};
 }
-
 //#endregion
 //#region src/hooks/phone/usePhoneNumberPrefix.ts
+/** CJS package often exposes `{ Country, default: api }`; Vite/Node ESM may not unwrap `.default`. */
+const countryListApi = (() => {
+	const mod = CountryListImport;
+	if (typeof mod.getAll === "function") return mod;
+	if (mod.default && typeof mod.default.getAll === "function") return mod.default;
+	throw new Error("country-list-with-dial-code-and-flag: expected getAll()");
+})();
 const usePhoneNumberPrefix = (defaultCountry) => {
-	const countryList = CountryList.getAll();
-	return countryList.filter((country) => country.dial_code).sort((a, b) => {
+	return countryListApi.getAll().filter((country) => country.dial_code).sort((a, b) => {
 		if (a?.code === defaultCountry) return -1;
 		if (b?.code === defaultCountry) return 1;
 		return a.name.localeCompare(b.name);
 	});
 };
-
 //#endregion
 //#region src/components/phoneInput/index.tsx
 const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
@@ -3138,13 +3011,10 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
 		whileElementsMounted: autoUpdate,
 		placement: "bottom-start"
 	});
-	const click = useClick(context);
-	const dismiss = useDismiss(context);
-	const role = useRole(context, { role: "combobox" });
 	const { getReferenceProps, getFloatingProps } = useInteractions([
-		click,
-		dismiss,
-		role
+		useClick(context),
+		useDismiss(context),
+		useRole(context, { role: "combobox" })
 	]);
 	const performSearch = useCallback((query) => {
 		if (!query) return phoneNumberPrefixes;
@@ -3152,20 +3022,17 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
 		return phoneNumberPrefixes.filter((country) => country.name.toLowerCase().includes(lowerQuery) || country.dial_code.toLowerCase().includes(lowerQuery) || country.code.toLowerCase().includes(lowerQuery));
 	}, [phoneNumberPrefixes]);
 	useEffect(() => {
-		const results = performSearch(searchQuery);
-		setFilteredCountries(results);
+		setFilteredCountries(performSearch(searchQuery));
 		setHighlightedIndex(-1);
 	}, [searchQuery]);
 	useEffect(() => {
 		optionRefs.current = optionRefs.current.slice(0, filteredCountries.length);
 	}, [filteredCountries]);
 	useEffect(() => {
-		if (highlightedIndex >= 0 && optionRefs.current[highlightedIndex]) {
-			optionRefs.current[highlightedIndex]?.scrollIntoView({
-				behavior: "auto",
-				block: "nearest"
-			});
-		}
+		if (highlightedIndex >= 0 && optionRefs.current[highlightedIndex]) optionRefs.current[highlightedIndex]?.scrollIntoView({
+			behavior: "auto",
+			block: "nearest"
+		});
 	}, [highlightedIndex]);
 	const handleSelect = (country) => {
 		setSelectedCountry(country);
@@ -3182,11 +3049,10 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
 				e.preventDefault();
 				setHighlightedIndex((prev) => prev > 0 ? prev - 1 : filteredCountries.length - 1);
 				break;
-			case "Enter": {
+			case "Enter":
 				e.preventDefault();
 				if (highlightedIndex >= 0) handleSelect(filteredCountries[highlightedIndex]);
 				break;
-			}
 			case "Escape":
 				e.preventDefault();
 				setOpenDropdown(false);
@@ -3213,7 +3079,7 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
 			children: /* @__PURE__ */ jsx("div", {
 				className: "flex items-center gap-1",
 				children: /* @__PURE__ */ jsx("span", {
-					className: "text-xs font-medium",
+					className: "yo-text-label",
 					children: selectedCountry?.dial_code
 				})
 			})
@@ -3244,15 +3110,17 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
 				}), /* @__PURE__ */ jsx("div", {
 					className: "max-h-[200px] overflow-auto p-1",
 					children: filteredCountries.length > 0 ? filteredCountries.map((country, index) => /* @__PURE__ */ jsxs("button", {
-						ref: (el) => optionRefs.current[index] = el,
+						ref: (el) => {
+							optionRefs.current[index] = el;
+						},
 						type: "button",
 						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__ */ jsx("span", {
-								className: "text-base",
+								className: "yo-text-body",
 								children: country.flag
 							}),
 							/* @__PURE__ */ jsx("span", {
@@ -3260,12 +3128,12 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
 								children: country.name
 							}),
 							/* @__PURE__ */ 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__ */ 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"
 					})
 				})]
@@ -3273,7 +3141,7 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
 		}) })]
 	});
 };
-const PhoneInput = ({ placeholder, searchPlaceHolder, defaultCountry = "NL", invalidMessage, defaultValue, onChange, ref,...rest }) => {
+const PhoneInput = ({ placeholder, searchPlaceHolder, defaultCountry = "NL", invalidMessage, defaultValue, onChange, ref, ...rest }) => {
 	const inputRef = useRef(null);
 	const [phoneNumber, setPhoneNumber] = useState(defaultValue || "");
 	const { validatePhone, stripCountryCode, getCountryCode, formatToInternational } = usePhoneNumber();
@@ -3286,18 +3154,15 @@ const PhoneInput = ({ placeholder, searchPlaceHolder, defaultCountry = "NL", inv
 		if (filteredValue.startsWith("+") && filteredValue.length > 1) {
 			const countryCode = getCountryCode(filteredValue);
 			if (countryCode) countrySelectorRef.current?.updateCountry(countryCode);
-			const strippedNumber = stripCountryCode(filteredValue);
-			setPhoneNumber(strippedNumber);
+			setPhoneNumber(stripCountryCode(filteredValue));
 			return;
 		} else setPhoneNumber(filteredValue);
 	};
 	const handleBlur = () => {
 		if (phoneNumber.trim()) {
 			const selectedCountry = countrySelectorRef.current?.getSelectedCountry();
-			const validationResult = validatePhone(phoneNumber, { country: selectedCountry?.code });
-			if (validationResult.isValid) {
-				const formattedNumber = formatToInternational(phoneNumber, { country: selectedCountry?.code });
-				const displayNumber = stripCountryCode(formattedNumber);
+			if (validatePhone(phoneNumber, { country: selectedCountry?.code }).isValid) {
+				const displayNumber = stripCountryCode(formatToInternational(phoneNumber, { country: selectedCountry?.code }));
 				const fullNumber = selectedCountry?.dial_code + displayNumber;
 				setPhoneNumber(displayNumber);
 				onChange(fullNumber);
@@ -3323,7 +3188,6 @@ const PhoneInput = ({ placeholder, searchPlaceHolder, defaultCountry = "NL", inv
 	});
 };
 PhoneInput.displayName = "PhoneInput";
-
 //#endregion
 //#region src/components/profileMenu/index.tsx
 const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classNames }) => {
@@ -3338,26 +3202,23 @@ const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classN
 	const buttonId = `${menuId}-button`;
 	const defaultStyling = "text-black flex items-center gap-1 bg-transparent py-1 px-2.5 h-9 min-w-9 cursor-pointer border-gray-200 focus:bg-gray-50 focus:ring focus:ring-primary focus:outline-none focus:border-0 focus:ring-inset";
 	const handleToggle = () => {
-		if (!disabled) {
-			setIsOpen((prev) => {
-				const newIsOpen = !prev;
-				/* istanbul ignore next - branch depends on async DOM focus */
-				if (newIsOpen) {
-					setTimeout(() => {
-						/* istanbul ignore next - async focus behavior depends on DOM/timing */
-						setFocusedIndex(0);
-						/* istanbul ignore next - async focus behavior depends on DOM/timing */
-						menuItemRefs.current[0]?.focus();
-					}, 0);
-				} else {
-					/* istanbul ignore next - focus reset depends on DOM/timing */
-					setFocusedIndex(-1);
-					/* istanbul ignore next - focus reset depends on DOM/timing */
-					buttonRef.current?.focus();
-				}
-				return newIsOpen;
-			});
-		}
+		if (!disabled) setIsOpen((prev) => {
+			const newIsOpen = !prev;
+			/* istanbul ignore next - branch depends on async DOM focus */
+			if (newIsOpen) setTimeout(() => {
+				/* istanbul ignore next - async focus behavior depends on DOM/timing */
+				setFocusedIndex(0);
+				/* istanbul ignore next - async focus behavior depends on DOM/timing */
+				menuItemRefs.current[0]?.focus();
+			}, 0);
+			else {
+				/* istanbul ignore next - focus reset depends on DOM/timing */
+				setFocusedIndex(-1);
+				/* istanbul ignore next - focus reset depends on DOM/timing */
+				buttonRef.current?.focus();
+			}
+			return newIsOpen;
+		});
 	};
 	/* istanbul ignore next - click handler behavior covered via integration; unit env flaky */
 	const handleItemClick = (onClick) => {
@@ -3439,7 +3300,7 @@ const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classN
 			"aria-label": "Toggle profile menu",
 			"aria-expanded": isOpen,
 			"aria-haspopup": "menu",
-			"aria-controls": isOpen ? menuId : undefined,
+			"aria-controls": isOpen ? menuId : void 0,
 			className: cn(buttonVariants["secondary"], defaultStyling, classNames?.button),
 			disabled,
 			onClick: handleToggle,
@@ -3461,7 +3322,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
@@ -3470,11 +3331,9 @@ const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classN
 		})]
 	}) });
 };
-
 //#endregion
 //#region src/utils/ssr.ts
 const isSSR = () => typeof window === "undefined" || typeof document === "undefined";
-
 //#endregion
 //#region src/components/wysiwygEditor/index.tsx
 const BoldIcon = () => /* @__PURE__ */ jsx(IconBold, {
@@ -3508,12 +3367,12 @@ const WysiwygEditor = forwardRef(({ id, content, className, placeholder, onChang
 			Underline,
 			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,
-		onUpdate({ editor: editor$1 }) {
-			let sanitizedOutput = editor$1.getHTML().replaceAll(/<li><p>(.*?)<\/p><(\/?)(ol|li|ul)>/gi, "<li>$1<$2$3>");
+		onUpdate({ editor }) {
+			let sanitizedOutput = editor.getHTML().replaceAll(/<li><p>(.*?)<\/p><(\/?)(ol|li|ul)>/gi, "<li>$1<$2$3>");
 			sanitizedOutput = sanitizedOutput.replace(/(<p><\/p>\s*)+/gi, "<p></p>");
 			sanitizedOutput = sanitizedOutput.replace(/^(<p><\/p>\s*)+/gi, "");
 			sanitizedOutput = sanitizedOutput.replace(/(<p><\/p>\s*)+$/gi, "");
@@ -3545,28 +3404,28 @@ const WysiwygEditor = forwardRef(({ id, content, className, placeholder, onChang
 						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__ */ jsx(BoldIcon, {})
 					}),
 					/* @__PURE__ */ 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__ */ jsx(ItalicIcon, {})
 					}),
 					/* @__PURE__ */ 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__ */ jsx(UnderlineIcon, {})
 					}),
 					/* @__PURE__ */ 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__ */ jsx(ClearFormattingIcon, {})
 					})
 				]
@@ -3576,13 +3435,13 @@ const WysiwygEditor = forwardRef(({ id, content, className, placeholder, onChang
 					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__ */ jsx(ListIcon, {})
 				}), /* @__PURE__ */ 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__ */ jsx(ListNumbersIcon, {})
 				})]
 			})]
@@ -3594,11 +3453,11 @@ const WysiwygEditor = forwardRef(({ id, content, className, placeholder, onChang
 			className: cn("overflow-hidden rounded-[inherit]")
 		})]
 	}), error && /* @__PURE__ */ jsx("span", {
-		className: "mt-1 text-xs font-normal text-red-600",
+		className: "mt-1 yo-text-small text-red-600",
 		children: error
 	})] });
 });
-
 //#endregion
 export { AccordionItem, AccordionWrapper, ActionIcon, Alert, AppleAppButtonIcon, AutoCompleteInput, Avatar, AvatarIndicator, Badge, BigBadge, BreadCrumb, Button, Checkbox, DatePickerInput, Divider, FavouriteButton, Filters, GoogleAppButtonIcon, HR, HamburgerMenuButton, Island, KebabMenu, Label, Loader, LogoBlack, Modal, NavButtons, NumberField, NumberedStepper, PageUnavailable, PasswordInput, PhoneInput, Popover, ProfileMenu, ProgressBar, RadioButton, Rating, RegionSelector, Reviews, ScrollToTop, SearchInput, Select, SettingsCard, Skeleton, SkillPill, Stepper, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TabsBadge, TabsWrapper, TextInput, Textarea, ThemeIcon, TimeInput, Toggle, Tooltip, TruncatedText, UnorderedList, UnorderedListItem, UnstyledButton, WysiwygEditor, buttonVariants };
+
 //# sourceMappingURL=index.js.map