@youngonesworks/ui 1.0.4 → 1.0.6

package/dist/index.cjs

@@ -1,7 +1,6 @@
-'use client';
-
-
-//#region rolldown:runtime
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -22,40 +21,39 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	value: mod,
 	enumerable: true
 }) : target, mod));
-
 //#endregion
-const react = __toESM(require("react"));
-const __tabler_icons_react = __toESM(require("@tabler/icons-react"));
-const clsx = __toESM(require("clsx"));
-const tailwind_merge = __toESM(require("tailwind-merge"));
-const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
-const __floating_ui_react = __toESM(require("@floating-ui/react"));
-const react_day_picker = __toESM(require("react-day-picker"));
-const date_fns = __toESM(require("date-fns"));
-const date_fns_locale = __toESM(require("date-fns/locale"));
-const react_dom = __toESM(require("react-dom"));
-const react_tooltip = __toESM(require("react-tooltip"));
-const phone = __toESM(require("phone"));
-const country_list_with_dial_code_and_flag = __toESM(require("country-list-with-dial-code-and-flag"));
-const __tiptap_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"));
-const __tiptap_extension_underline = __toESM(require("@tiptap/extension-underline"));
-const __tiptap_react = __toESM(require("@tiptap/react"));
-const __tiptap_starter_kit = __toESM(require("@tiptap/starter-kit"));
-
-//#region src/jsx-runtime-shim.ts
-const jsx = react.createElement;
-const jsxs = react.createElement;
-const Fragment$2 = react.Fragment;
-
+let react = require("react");
+react = __toESM(react);
+let _tabler_icons_react = require("@tabler/icons-react");
+let clsx = require("clsx");
+clsx = __toESM(clsx);
+let tailwind_merge = require("tailwind-merge");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _floating_ui_react = require("@floating-ui/react");
+let react_day_picker = require("react-day-picker");
+let date_fns = require("date-fns");
+let date_fns_locale = require("date-fns/locale");
+let react_dom = require("react-dom");
+let react_tooltip = require("react-tooltip");
+let phone = require("phone");
+phone = __toESM(phone);
+let country_list_with_dial_code_and_flag = require("country-list-with-dial-code-and-flag");
+country_list_with_dial_code_and_flag = __toESM(country_list_with_dial_code_and_flag);
+let _tiptap_extension_placeholder = require("@tiptap/extension-placeholder");
+let _tiptap_extension_underline = require("@tiptap/extension-underline");
+let _tiptap_react = require("@tiptap/react");
+let _tiptap_starter_kit = require("@tiptap/starter-kit");
+react.createElement;
+react.createElement;
+react.Fragment;
 //#endregion
 //#region src/utils/cn.ts
 function cn(...inputs) {
 	return (0, tailwind_merge.twMerge)((0, clsx.default)(inputs));
 }
-
 //#endregion
 //#region src/components/unstyledButton/index.tsx
-const UnstyledButton = (0, react.forwardRef)(({ className,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+const UnstyledButton = (0, react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 	type: "button",
 	"data-component": "unstyledButton",
 	className: cn("appearance-none", className),
@@ -63,7 +61,6 @@ const UnstyledButton = (0, react.forwardRef)(({ className,...props }, ref) => /*
 	...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 }) => {
@@ -88,20 +85,20 @@ const AccordionItem = ({ controlContent, panelContent, style = "light", border =
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					onClick: () => setIsActive(!isActive),
 					className: `duration-300${isActive ? "rotate-180" : ""}`,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconChevronDown, {
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconChevronDown, {
 						size: 18,
 						color: style === "dark" ? "white" : "black"
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					onClick: () => setIsActive(!isActive),
-					className: `flex w-full flex-row justify-between ${style === "dark" && "text-white"} leading-8 text-lg`,
+					className: `flex w-full flex-row justify-between ${style === "dark" && "text-white"} leading-8 yo-text-h4`,
 					children: controlContent
 				}),
 				endContent
 			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: `transition-max-height overflow-hidden duration-500 ease-in-out ${isActive ? "max-h-1000" : "max-h-0"} leading-6 text-base`,
+			className: `transition-max-height overflow-hidden duration-500 ease-in-out ${isActive ? "max-h-1000" : "max-h-0"} leading-6 yo-text-body`,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "px-4 py-3",
 				children: panelContent
@@ -109,7 +106,6 @@ const AccordionItem = ({ controlContent, panelContent, style = "light", border =
 		})]
 	}) });
 };
-
 //#endregion
 //#region src/components/accordion/AccordionWrapper.tsx
 const AccordionWrapper = ({ children, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -118,21 +114,16 @@ const AccordionWrapper = ({ children, className }) => /* @__PURE__ */ (0, react_
 	className: cn(className, "flex flex-col gap-2"),
 	children
 });
-
 //#endregion
 //#region src/hooks/useMergeRefs.ts
 function useMergeRefs(...refs) {
 	return (0, react.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 = {
@@ -144,23 +135,23 @@ const sizeClasses = {
 const Tooltip = ({ content, children, passedOpen = false, size = "md", variant = "default" }) => {
 	const [isOpen, setIsOpen] = (0, react.useState)(passedOpen);
 	const arrowRef = (0, react.useRef)(null);
-	const { refs, floatingStyles, context } = (0, __floating_ui_react.useFloating)({
+	const { refs, floatingStyles, context } = (0, _floating_ui_react.useFloating)({
 		open: isOpen,
 		onOpenChange: setIsOpen,
 		placement: "top",
 		middleware: [
-			variant === "default" ? (0, __floating_ui_react.offset)(20) : (0, __floating_ui_react.offset)(25),
-			(0, __floating_ui_react.flip)(),
-			(0, __floating_ui_react.shift)(),
-			(0, __floating_ui_react.arrow)({ element: arrowRef })
+			variant === "default" ? (0, _floating_ui_react.offset)(20) : (0, _floating_ui_react.offset)(25),
+			(0, _floating_ui_react.flip)(),
+			(0, _floating_ui_react.shift)(),
+			(0, _floating_ui_react.arrow)({ element: arrowRef })
 		],
-		whileElementsMounted: __floating_ui_react.autoUpdate
+		whileElementsMounted: _floating_ui_react.autoUpdate
 	});
-	const hover = (0, __floating_ui_react.useHover)(context, { move: false });
-	const focus = (0, __floating_ui_react.useFocus)(context);
-	const dismiss = (0, __floating_ui_react.useDismiss)(context);
-	const role = (0, __floating_ui_react.useRole)(context, { role: "tooltip" });
-	const { getReferenceProps, getFloatingProps } = (0, __floating_ui_react.useInteractions)([
+	const hover = (0, _floating_ui_react.useHover)(context, { move: false });
+	const focus = (0, _floating_ui_react.useFocus)(context);
+	const dismiss = (0, _floating_ui_react.useDismiss)(context);
+	const role = (0, _floating_ui_react.useRole)(context, { role: "tooltip" });
+	const { getReferenceProps, getFloatingProps } = (0, _floating_ui_react.useInteractions)([
 		hover,
 		focus,
 		dismiss,
@@ -184,9 +175,9 @@ const Tooltip = ({ content, children, passedOpen = false, size = "md", variant =
 			className: "w-full rounded bg-gray-800 pt-[3px] text-white",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				"data-testid": "tooltip-content",
-				className: `${sizeClasses[size]} px-2 py-1 text-sm font-normal`,
+				className: `${sizeClasses[size]} px-2 py-1  yo-text-small text-white`,
 				children: content
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingArrow, {
 				ref: arrowRef,
 				context,
 				width: 10,
@@ -197,12 +188,12 @@ const Tooltip = ({ content, children, passedOpen = false, size = "md", variant =
 			})]
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-testid": "tooltip-container",
-			className: "bg-linear-gradient-x pt-[3px]",
+			className: "pt-[3px]",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				"data-testid": "tooltip-content",
-				className: `${sizeClasses[size]} overflow-hidden bg-white p-5 px-2 py-1 text-start text-sm font-normal`,
+				className: `${sizeClasses[size]} overflow-hidden bg-white p-5 px-2 py-1 text-start yo-text-small text-white`,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: content })
-			}), size === "md" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
+			}), size === "md" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingArrow, {
 				ref: arrowRef,
 				context,
 				width: 25,
@@ -211,7 +202,7 @@ const Tooltip = ({ content, children, passedOpen = false, size = "md", variant =
 				fill: "white",
 				className: "drop-shadow-xl",
 				"data-testid": "tooltip-arrow"
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingArrow, {
 				ref: arrowRef,
 				context,
 				width: 10,
@@ -225,65 +216,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 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 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 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 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 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;
 }({});
-let REGION = /* @__PURE__ */ function(REGION$1) {
-	REGION$1["NETHERLANDS"] = "nl";
-	REGION$1["BELGIUM"] = "nl-BE";
-	REGION$1["UNITED_KINGDOM"] = "gb";
-	return REGION$1;
-}({});
-let TOOLTIP_COLOR = /* @__PURE__ */ function(TOOLTIP_COLOR$1) {
-	TOOLTIP_COLOR$1["DEFAULT"] = "default";
-	TOOLTIP_COLOR$1["WHITE"] = "white";
-	return TOOLTIP_COLOR$1;
-}({});
-
 //#endregion
 //#region src/utils/formatIcon.ts
 const globalDefaultFormatAttributes = {};
@@ -298,13 +276,12 @@ function formatIcon(icon, defaultFormatAttributes) {
 		...globalDefaultFormatAttributes,
 		...defaultFormatAttributes,
 		...icon.props,
-		...{ className: (0, clsx.default)(globalDefaultFormatAttributes.className, defaultFormatAttributes.className, icon.props.className) }
+		className: (0, clsx.default)(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 = (0, clsx.default)({
 		"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,
@@ -334,37 +311,34 @@ 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",
-			Icon: __tabler_icons_react.IconCircleCheck
+			Icon: _tabler_icons_react.IconCircleCheck
 		},
 		warning: {
 			bg: "bg-warning-light",
 			iconColor: "text-warning",
-			Icon: __tabler_icons_react.IconAlertTriangle
+			Icon: _tabler_icons_react.IconAlertTriangle
 		},
 		error: {
 			bg: "bg-red-50",
 			iconColor: "text-red-500",
-			Icon: __tabler_icons_react.IconAlertCircle
+			Icon: _tabler_icons_react.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__ */ (0, react_jsx_runtime.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,
@@ -383,17 +357,17 @@ const Alert = ({ show, title, description, type = "warning", button, plain = fal
 						"data-testid": "alert-icon",
 						"aria-hidden": "true"
 					})), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "yo-text-base",
+						className: "yo-text-body",
 						children: title
 					})]
 				}),
 				description && (typeof description === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					id: descriptionId,
-					className: "text-sm text-color-gray-900",
+					className: "yo-text-small text-color-gray-900",
 					children: description
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					id: descriptionId,
-					className: "text-sm text-color-gray-900",
+					className: "yo-text-small text-color-gray-900",
 					children: description
 				})),
 				button && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: button })
@@ -404,7 +378,7 @@ const Alert = ({ show, title, description, type = "warning", button, plain = fal
 			onClick: onClose,
 			"aria-label": "Dismiss alert",
 			"data-testid": "alert-close",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconX, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, {
 				size: 18,
 				"aria-hidden": "true"
 			})
@@ -412,7 +386,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__ */ (0, react_jsx_runtime.jsxs)("svg", {
@@ -553,10 +526,9 @@ const AppleAppButtonIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs
 		})
 	}) })]
 });
-
 //#endregion
 //#region src/icons/IconLoading.tsx
-const IconLoading = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+const IconLoading = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 	"data-component": "button",
 	"data-testid": "loading-svg-button",
 	viewBox: "0 0 256 256",
@@ -640,10 +612,9 @@ const IconLoading = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_ru
 		})
 	]
 });
-
 //#endregion
 //#region src/components/textInput/index.tsx
-const TextInput = react.default.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.default.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.default.useState(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-component": "TextInput",
@@ -652,14 +623,14 @@ const TextInput = react.default.forwardRef(({ rightSection, leftSection, classNa
 		children: [
 			typeof label === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 				htmlFor: props.id,
-				className: "mb-2 flex items-center gap-1 text-xs font-medium text-black",
+				className: "mb-2 flex items-center gap-1 yo-text-label",
 				children: label
 			}) : label,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "relative",
 				children: [
 					leftSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: (0, clsx.default)("absolute top-0 left-0 flex h-10 w-12 content-center items-center justify-center align-middle text-sm font-medium text-black"),
+						className: (0, clsx.default)("absolute top-0 left-0 flex h-10 w-12 content-center items-center justify-center align-middle yo-text-small font-medium text-black"),
 						children: leftSection
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -673,31 +644,31 @@ const TextInput = react.default.forwardRef(({ rightSection, leftSection, classNa
 						step,
 						maxLength,
 						className: (0, clsx.default)(`${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__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "absolute inset-y-0 right-0 flex h-10 w-12 content-center items-center justify-center align-middle text-sm font-medium text-black",
+						className: "absolute inset-y-0 right-0 flex h-10 w-12 content-center items-center justify-center align-middle yo-text-small-medium text-black",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconLoading, {
 							className: "h-4 w-4 animate-spin text-gray-500",
 							"aria-label": "Loading"
 						})
 					}) : rightSection && showRightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "absolute inset-y-0 right-0 flex h-10 w-12 content-center items-center justify-center align-middle text-sm font-medium text-black",
+						className: "absolute inset-y-0 right-0 flex h-10 w-12 content-center items-center justify-center align-middle yo-text-small-medium text-black",
 						children: rightSection
 					}),
 					password && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "absolute inset-y-0 right-4 flex content-center items-center justify-center align-middle text-sm font-medium text-black",
-						children: showPassword ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconEyeCheck, {
+						className: "absolute inset-y-0 right-4 flex content-center items-center justify-center align-middle yo-text-small-medium text-black",
+						children: showPassword ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconEyeCheck, {
 							"data-testid": "password-visibility-toggle",
 							className: "cursor-pointer text-gray-500",
 							size: 15,
 							onClick: () => setShowPassword(false)
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconEyeOff, {
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconEyeOff, {
 							"data-testid": "password-visibility-toggle",
 							className: "cursor-pointer text-gray-500",
 							size: 15,
@@ -707,13 +678,12 @@ const TextInput = react.default.forwardRef(({ rightSection, leftSection, classNa
 				]
 			}),
 			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mt-2 text-xs font-normal text-red-500",
+				className: "mt-2 yo-text-caption text-red-500",
 				children: error
 			})
 		]
 	});
 });
-
 //#endregion
 //#region src/components/autoCompleteInput/index.tsx
 const AutoCompleteInput = ({ label, onChange, onFocus, inputValue, showSuggestions, handleOnKeyDown, children, error, rightSection, inputRef }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -734,7 +704,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 = {
@@ -760,10 +729,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__ */ (0, react_jsx_runtime.jsx)("div", {
+const AvatarIndicator = ({ indicatorCount, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.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",
@@ -773,15 +741,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__ */ (0, react_jsx_runtime.jsx)("span", {
 		"data-testid": "badge",
 		"data-component": "Badge",
-		className: cn("inline-flex max-w-full place-content-center items-center px-2.5 align-middle text-xs leading-[20px] font-semibold tracking-wide text-wrap whitespace-normal normal-case rounded-sm", {
+		className: cn("inline-flex max-w-full place-content-center items-center px-2.5 align-middle yo-text-label leading-[20px]  tracking-wide text-wrap whitespace-normal normal-case rounded-sm", {
 			"bg-accent-blue-light text-accent-blue": styleVariant === COLOR.ACCENT_BLUE,
 			"bg-green-light text-green": styleVariant === COLOR.GREEN_LIGHT,
 			"bg-red-50 text-red-500": styleVariant === COLOR.RED,
@@ -803,13 +770,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__ */ (0, react_jsx_runtime.jsx)("div", {
+const BigBadge = ({ styleVariant = COLOR.GREEN, className, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-component": "BigBadge",
 	"data-testid": "big-badge",
-	className: cn("grid h-9 max-w-full min-w-[140px] place-content-center rounded-full border border-solid px-6 py-1 text-sm font-medium whitespace-nowrap lowercase", {
+	className: cn("grid h-9 max-w-full min-w-[140px] place-content-center rounded-full border border-solid px-6 py-1 yo-text-small-medium whitespace-nowrap lowercase", {
 		"border-green text-green bg-white": styleVariant === COLOR.GREEN,
 		"border-accent-blue text-accent-blue bg-white": styleVariant === COLOR.ACCENT_BLUE,
 		"border-orange text-orange bg-white": styleVariant === COLOR.ORANGE,
@@ -822,19 +788,17 @@ const BigBadge = ({ styleVariant = COLOR.GREEN, className, children,...props })
 	...props,
 	children
 });
-
 //#endregion
 //#region src/components/breadCrumb/index.tsx
 const BreadCrumb = ({ children, LinkText }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkText, {
 	"data-component": "BreadCrumb",
 	classNames: "flex items-center",
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconArrowNarrowLeft, { size: 20 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconArrowNarrowLeft, { size: 20 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "flex items-center gap-5",
 		children
 	})] })
 });
 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";
@@ -843,16 +807,15 @@ const buttonVariants = {
 	secondary: (0, clsx.default)(defaultButtonStyling, "border-solid border-gray-200 bg-white text-black hover:border-gray-800 hover:bg-gray-50 hover:fill-white disabled:text-gray-800 disabled:hover:border-gray-200 disabled:hover:bg-white"),
 	danger: (0, clsx.default)(defaultButtonStyling, "border-transparent bg-red-500 text-white hover:bg-red-700 disabled:bg-red-100 disabled:hover:bg-red-100"),
 	link: (0, clsx.default)(defaultButtonStyling, "border-transparent bg-transparent text-accent-blue hover:bg-gray-50 disabled:bg-transparent disabled:text-gray-800 disabled:hover:bg-transparent"),
-	outline: (0, clsx.default)(defaultButtonStyling, "border-solid border-gray-200 bg-transparent text-white hover:border-gray-800 hover:bg-[rgba(255,255,255,0.1)] disabled:text-gray-800 disabled:hover:border-gray-200 disabled:hover:bg-white"),
+	outline: (0, clsx.default)(defaultButtonStyling, "border-solid border-gray-200 bg-transparent hover:border-gray-800 hover:bg-[rgba(255,255,255,0.1)] disabled:text-gray-800 disabled:hover:border-gray-200 disabled:hover:bg-white"),
 	search: (0, clsx.default)(defaultButtonStyling, "absolute top-0 right-0 h-full w-[50px] border-0 bg-transparent bg-no-repeat"),
 	icon__primary: (0, clsx.default)(defaultButtonStyling, "flex! items-center justify-center"),
 	icon__danger: (0, clsx.default)(defaultButtonStyling, "flex! items-center justify-center"),
 	action: (0, clsx.default)(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__ */ (0, react_jsx_runtime.jsx)(IconLoading, { className: "animate-spin-slow mr-2 stroke-current" });
 	const icon = isLoading ? loadingIcon : iconFromProps;
 	const formattedIcon = icon ? formatIcon(icon, { className: (0, clsx.default)({
@@ -866,7 +829,7 @@ function Button({ type = "button", variant = "primary", ariaLabel, block = false
 		type,
 		"aria-label": ariaLabel,
 		"data-testid": dataTestId,
-		className: cn(buttonVariants[variant], className, block && "w-full text-sm"),
+		className: cn(buttonVariants[variant], className, block && "w-full yo-text-small"),
 		onClick: handleOnClick,
 		...props,
 		children: [
@@ -877,10 +840,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__ */ (0, react_jsx_runtime.jsxs)("div", {
+const CheckboxComponent = ({ size = "md", className, error, mediumBoldText, label, labelClassName, indeterminate = false, disabled = false, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	"data-testid": "checkbox-wrapper",
 	className: cn("relative grid gap-2", className),
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
@@ -929,51 +891,48 @@ const CheckboxComponent = ({ size = "md", className, error, mediumBoldText, labe
 			]
 		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"data-testid": "checkbox-label",
-			className: cn("grow text-sm font-normal", labelClassName, { "font-medium": mediumBoldText }),
+			className: cn("grow yo-text-small", labelClassName, { "font-medium": mediumBoldText }),
 			children: label
 		})]
 	}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
-		className: "text-xs font-normal text-red-500",
+		className: "yo-text-caption text-red-500",
 		children: error
 	})]
 });
 const Checkbox = (0, react.forwardRef)(CheckboxComponent);
-
 //#endregion
 //#region src/components/popover/index.tsx
-const Popover = (0, react.forwardRef)(({ content, children, hoverEnabled = false, passedOpen = false, placement = "right", style = "card", isMobile = false, className }, ref) => {
+const Popover = (0, react.forwardRef)(({ content, children, hoverEnabled = false, passedOpen = false, placement = "right", style = "card", isMobile = false, className, gradientVariant = "client" }, ref) => {
 	const [isOpen, setIsOpen] = (0, react.useState)(passedOpen);
 	const mobileStyles = { width: `${style === "card" && "100%"}` };
-	const { refs, floatingStyles, context } = (0, __floating_ui_react.useFloating)({
+	const { refs, floatingStyles, context } = (0, _floating_ui_react.useFloating)({
 		open: isOpen,
 		onOpenChange: setIsOpen,
 		placement: !isMobile ? placement : "bottom-start",
 		middleware: [
-			!isMobile && (0, __floating_ui_react.flip)(),
-			!isMobile && (0, __floating_ui_react.shift)(),
-			(0, __floating_ui_react.offset)(() => ({
+			!isMobile && (0, _floating_ui_react.flip)(),
+			!isMobile && (0, _floating_ui_react.shift)(),
+			(0, _floating_ui_react.offset)(() => ({
 				mainAxis: 15,
 				crossAxis: !isMobile ? 0 : 78
 			}))
 		],
-		whileElementsMounted: __floating_ui_react.autoUpdate
+		whileElementsMounted: _floating_ui_react.autoUpdate
 	});
-	const click = (0, __floating_ui_react.useClick)(context, {
+	const click = (0, _floating_ui_react.useClick)(context, {
 		event: "click",
 		keyboardHandlers: true
 	});
-	const focus = (0, __floating_ui_react.useFocus)(context);
-	const hover = (0, __floating_ui_react.useHover)(context, { enabled: hoverEnabled });
-	const dismiss = (0, __floating_ui_react.useDismiss)(context);
-	const role = (0, __floating_ui_react.useRole)(context, { role: "tooltip" });
+	const focus = (0, _floating_ui_react.useFocus)(context);
+	const hover = (0, _floating_ui_react.useHover)(context, { enabled: hoverEnabled });
 	const interactions = [
 		click,
 		focus,
-		dismiss,
-		role,
+		(0, _floating_ui_react.useDismiss)(context),
+		(0, _floating_ui_react.useRole)(context, { role: "tooltip" }),
 		hover
 	];
-	const { getReferenceProps, getFloatingProps } = (0, __floating_ui_react.useInteractions)(interactions);
+	const { getReferenceProps, getFloatingProps } = (0, _floating_ui_react.useInteractions)(interactions);
 	(0, react.useImperativeHandle)(ref, () => ({
 		closePopover: () => setIsOpen(false),
 		openPopover: () => setIsOpen(true),
@@ -999,13 +958,13 @@ const Popover = (0, react.forwardRef)(({ content, children, hoverEnabled = false
 			"data-testid": "popover-container",
 			"data-component": "Popover",
 			children: [style === "minimal" && content, style === "card" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "bg-linear-gradient-x pt-[3px]",
+				className: cn("pt-[3px]", gradientVariant === "client" && "bg-gradient-blue-turquoise", gradientVariant === "agency" && "bg-gradient-blue-purple"),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "relative overflow-hidden bg-white p-5",
 					children: [!hoverEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
 						onClick: () => setIsOpen(false),
 						title: "",
-						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconX, {}),
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, {}),
 						styleVariant: "small",
 						className: "absolute top-5 right-5"
 					}), content]
@@ -1014,12 +973,11 @@ const Popover = (0, react.forwardRef)(({ content, children, hoverEnabled = false
 		})]
 	});
 });
-
 //#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] = (0, react.useState)(value);
-	const today = new Date();
+	const today = /* @__PURE__ */ new Date();
 	const [newMonth, setNewMonth] = (0, react.useState)(selected || today);
 	const [dropdownOpened, setDropdownOpened] = (0, react.useState)({
 		month: false,
@@ -1098,23 +1056,23 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 			fixedWeeks: true,
 			endMonth: (0, date_fns.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",
@@ -1123,12 +1081,12 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 			},
 			components: {
 				DayButton: (props) => {
-					const { day,...buttonProps } = props;
+					const { day, ...buttonProps } = props;
 					const { goToMonth } = (0, react_day_picker.useDayPicker)();
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						...buttonProps,
-						className: (0, clsx.default)("m-1 size-8 text-black transition-all duration-100 ease-in-out", "md:hover:bg-gradient-calendar hover:rounded md:hover:text-white", isDateSelected(day) && "bg-gradient-calendar rounded text-sm font-normal text-white", isDateToday(day) && "border-b-primary border border-transparent", "translate-y-0 active:translate-y-0.5"),
+						className: (0, clsx.default)("m-1 size-8 text-black transition-all duration-100 ease-in-out", "md:hover:bg-gradient-calendar hover:rounded md:hover:text-white", isDateSelected(day) && "bg-gradient-calendar rounded yo-text-small text-white", isDateToday(day) && "border-b-primary border border-transparent", "translate-y-0 active:translate-y-0.5"),
 						onClick: () => {
 							goToMonth(day.date);
 							handleDayClick(day.date);
@@ -1138,7 +1096,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 				Dropdown: (props) => {
 					const { goToMonth, months } = (0, react_day_picker.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();
@@ -1164,8 +1122,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__ */ (0, react_jsx_runtime.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
@@ -1178,16 +1135,16 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 							variant: "secondary",
 							type: "button",
-							className: "absolute top-4 right-4 z-10 h-8 px-3 text-xs font-normal",
+							className: "absolute top-4 right-4 z-10 h-8 px-3 yo-text-small",
 							onClick: () => {
-								goToMonth(today$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();
@@ -1206,7 +1163,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__ */ (0, react_jsx_runtime.jsx)("div", {
 										onClick: () => {
-											const newDate = months?.[0].date || new Date();
+											const newDate = months?.[0].date || /* @__PURE__ */ new Date();
 											newDate.setFullYear(year);
 											goToMonth(newDate);
 											setDropdownOpened({
@@ -1232,7 +1189,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 			className: cn("relative", className),
 			children: [
 				label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-					className: "mb-2 flex items-center gap-1 text-xs font-medium",
+					className: "mb-2 flex items-center gap-1 yo-text-label",
 					children: label
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
@@ -1246,52 +1203,50 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 					),
 					onClick: () => setNewMonth(today),
 					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconCalendar, {}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconCalendar, {}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-sm font-normal text-nowrap text-black",
+							className: "yo-text-small text-nowrap text-black",
 							children: selected ? selected.toLocaleDateString() : placeholder
 						}),
-						selected !== undefined && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cursor-pointer text-sm font-normal text-gray-800",
+						selected !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconX, { size: 15 })
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, { size: 15 })
 						}) })
 					]
 				}),
 				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
-					className: "text-xs font-normal text-red-500",
+					className: "yo-text-caption text-red-500",
 					children: error
 				})
 			]
 		})
 	});
 };
-
 //#endregion
 //#region src/components/divider/index.tsx
-const Divider = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const Divider = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-component": "divider",
 	className: (0, clsx.default)("block h-px w-full bg-gray-200", className),
 	...props
 });
-
 //#endregion
 //#region src/components/favouriteButton/index.tsx
 const FavouriteButton = (0, react.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__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
 		onClick,
 		"data-component": "favouriteButton",
@@ -1300,12 +1255,11 @@ const FavouriteButton = (0, react.forwardRef)((props, ref) => {
 		className: `${favourite ? iconColorSelected : iconColor} ${className}`.trim(),
 		iconSize,
 		ref,
-		icon: favourite ? iconFilled ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconHeartFilled, {}) : iconOutline ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconHeart, {}),
+		icon: favourite ? iconFilled ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconHeartFilled, {}) : iconOutline ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconHeart, {}),
 		...rest,
 		children
 	});
 });
-
 //#endregion
 //#region src/components/filters/FilterButton.tsx
 const FilterButton = ({ onClick, hasFilters, reset, filtersText, resetText }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1315,20 +1269,19 @@ const FilterButton = ({ onClick, hasFilters, reset, filtersText, resetText }) =>
 		onClick,
 		variant: "secondary",
 		className: "font-normal md:font-normal",
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconFilter, { stroke: 1 }),
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconFilter, { stroke: 1 }),
 		children: filtersText
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnstyledButton, {
-		className: "text-sm font-normal disabled:text-gray-500",
+		className: "yo-text-small disabled:text-gray-500",
 		onClick: reset,
 		disabled: !hasFilters,
 		children: resetText
 	})]
 });
-
 //#endregion
 //#region src/components/filters/FilterItem.tsx
 const FilterItem = ({ title, isActive = false, onClick }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-	className: cn("has-checked:border-primary has-checked:bg-turquoise-100 flex cursor-pointer items-center gap-3 rounded-full border border-gray-200 px-7 py-1.5 text-sm leading-6 font-normal transition-all duration-300 ease-in-out hover:bg-gray-50"),
+	className: cn("has-checked:border-primary has-checked:bg-turquoise-100 flex cursor-pointer items-center gap-3 rounded-full border border-gray-200 px-7 py-1.5 yo-text-small leading-6 transition-all duration-300 ease-in-out hover:bg-gray-50"),
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		type: "checkbox",
 		className: "hidden",
@@ -1336,7 +1289,6 @@ const FilterItem = ({ title, isActive = false, onClick }) => /* @__PURE__ */ (0,
 		checked: isActive
 	}), title]
 });
-
 //#endregion
 //#region src/components/filters/index.tsx
 const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, filtersText, resetText }) => {
@@ -1358,7 +1310,7 @@ const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, fi
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex items-center justify-end gap-3",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-sm font-medium",
+				className: "yo-text-small-medium",
 				"data-testid": "filters-title",
 				children: selectedFiltersText
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterButton, {
@@ -1382,7 +1334,6 @@ const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, fi
 		})]
 	});
 };
-
 //#endregion
 //#region src/components/googleAppButtonIcon/index.tsx
 const GoogleAppButtonIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
@@ -1574,7 +1525,6 @@ const GoogleAppButtonIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx
 		]
 	})]
 });
-
 //#endregion
 //#region src/components/hamburgerMenuButton/index.tsx
 const HamburgerMenuButton = (0, react.forwardRef)(({ menuState, setMenuState }, ref) => {
@@ -1603,7 +1553,6 @@ const HamburgerMenuButton = (0, react.forwardRef)(({ menuState, setMenuState },
 	});
 });
 HamburgerMenuButton.displayName = "HamburgerMenuButton";
-
 //#endregion
 //#region src/components/hr/index.tsx
 const HR = ({ className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
@@ -1611,10 +1560,9 @@ const HR = ({ className }) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+const Island = ({ children, className, noShadow = false, noPadding = false, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-testid": "island",
 	"data-component": "island",
 	className: cn("relative bg-white px-5 py-5 md:px-10 md:py-9", {
@@ -1626,7 +1574,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" }) => {
@@ -1662,7 +1609,7 @@ const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "
 		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "yo-text-small hidden md:block",
 			children: title
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconDotsVertical, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconDotsVertical, {
 			size: 20,
 			stroke: 1,
 			fill: "black"
@@ -1689,9 +1636,9 @@ const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "
 			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(UnstyledButton, {
+					const button = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnstyledButton, {
 						onClick: () => handleItemClick(c.onClick),
-						className: "w-full rounded-md px-4 py-2 text-left text-sm font-normal whitespace-nowrap hover:bg-gray-50",
+						className: "w-full rounded-md px-4 py-2 text-left yo-text-small whitespace-nowrap hover:bg-gray-50",
 						"aria-label": "Options Menu Item",
 						disabled: c.disabled,
 						children: c.title
@@ -1700,25 +1647,23 @@ const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "
 						passedOpen: false,
 						size: "sm",
 						content: c.tooltip,
-						children: button$1
-					}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: button$1 }, index);
+						children: button
+					}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: button }, index);
 				})
 			})
 		})]
 	}) });
 };
 KebabMenu.displayName = "KebabMenu";
-
 //#endregion
 //#region src/components/label/index.tsx
-const Label = ({ children, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+const Label = ({ children, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 	"data-component": "label",
 	"data-testid": "label",
-	className: cn("flex items-center gap-1 text-xs font-medium text-black", className),
+	className: cn("flex items-center gap-1 yo-text-label text-black", className),
 	...props,
 	children
 });
-
 //#endregion
 //#region src/components/loader/index.tsx
 const Loader = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1730,7 +1675,6 @@ const Loader = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	})
 });
 Loader.displayName = "Loader";
-
 //#endregion
 //#region src/components/logo/index.tsx
 const LogoBlack = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
@@ -1800,10 +1744,9 @@ const LogoBlack = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg",
 		})
 	}) })]
 });
-
 //#endregion
 //#region src/components/modal/index.tsx
-const Modal = ({ title, children, withCloseButton = true, opened, additionalClassNames, closeModalWithConfirmation = false, gradient = true, uncloseAble = false, confirmText = "Are you sure you want to close this modal?", dataTestId, onClose, size }) => {
+const Modal = ({ title, children, withCloseButton = true, opened, additionalClassNames, closeModalWithConfirmation = false, gradient = true, uncloseAble = false, confirmText = "Are you sure you want to close this modal?", dataTestId, onClose, size, gradientVariant = "client" }) => {
 	const ref = (0, react.useRef)(null);
 	const refContainer = (0, react.useRef)(null);
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
@@ -1878,22 +1821,21 @@ const Modal = ({ title, children, withCloseButton = true, opened, additionalClas
 							"aria-label": "close modal",
 							className: "absolute top-0 right-0",
 							"data-testid": "close-modal",
-							icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconX, {}),
+							icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, {}),
 							title: "Close modal"
 						})
 					}),
 					title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "relative w-full pt-14",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-							className: "mt-0 mb-8 text-left text-3xl font-bold",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+							className: "yo-text-h1 mt-0 mb-8 text-left",
 							children: title
 						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children }),
 					gradient && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
 						"data-testid": "modal-gradient",
-						className: "absolute bottom-0 left-0 mt-8 mb-0 h-2! w-full border-none",
-						style: { backgroundImage: "linear-gradient(90deg, var(--color-light-blue) 0%, var(--color-primary) 50.52%, var(--color-secondary) 100%)" }
+						className: cn("absolute bottom-0 left-0 mt-8 mb-0 h-2! w-full border-none", gradientVariant === "client" && "bg-gradient-blue-turquoise", gradientVariant === "agency" && "bg-gradient-blue-purple")
 					})
 				]
 			})
@@ -1901,7 +1843,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__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1911,7 +1852,7 @@ const NavButtons = ({ onNext, onPrev }) => /* @__PURE__ */ (0, react_jsx_runtime
 			"data-testid": "chevron-left",
 			className: `flex ${onPrev ? "cursor-pointer hover:bg-gray-50" : "cursor-not-allowed"} h-full items-center px-2`,
 			onClick: onPrev,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconChevronLeft, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconChevronLeft, {
 				size: 20,
 				className: onPrev ? "text-gray-500" : "text-gray-200"
 			})
@@ -1921,14 +1862,13 @@ const NavButtons = ({ onNext, onPrev }) => /* @__PURE__ */ (0, react_jsx_runtime
 			"data-testid": "chevron-right",
 			className: `flex ${onNext ? "cursor-pointer hover:bg-gray-50" : "cursor-not-allowed"} h-full items-center px-2 hover:bg-gray-50`,
 			onClick: onNext,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconChevronRight, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconChevronRight, {
 				size: 20,
 				className: onNext ? "text-gray-500" : "text-gray-200"
 			})
 		})
 	]
 });
-
 //#endregion
 //#region src/components/numberField/index.tsx
 const NumberField = ({ name, value = 0, max, min = 0, isDisabled, id, className = "", label, error, onChange }) => {
@@ -1948,7 +1888,7 @@ const NumberField = ({ name, value = 0, max, min = 0, isDisabled, id, className
 		children: [
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 				htmlFor: id,
-				className: "mb-1 text-sm font-medium text-gray-700",
+				className: "mb-1 yo-text-label",
 				children: label
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1982,27 +1922,25 @@ const NumberField = ({ name, value = 0, max, min = 0, isDisabled, id, className
 				]
 			}),
 			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "mt-1 text-sm font-normal text-red-600",
+				className: "mt-1 yo-text-small text-red-600",
 				children: error
 			})
 		]
 	});
 };
-
 //#endregion
 //#region src/components/pageUnavailable/index.tsx
 const PageUnavailable = ({ notAvailableButton, notAvailableDescription, notAvailableHeaderText }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Island, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	className: "mx-auto grid max-w-[900px] justify-items-center gap-8 text-center",
 	children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-			className: "text-3xl font-bold",
+			className: "yo-text-h1",
 			children: notAvailableHeaderText
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: notAvailableDescription }),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: notAvailableButton })
 	]
 }) });
-
 //#endregion
 //#region src/components/passwordInput/index.tsx
 const PasswordInput = react.default.forwardRef((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInput, {
@@ -2013,7 +1951,6 @@ const PasswordInput = react.default.forwardRef((props, ref) => /* @__PURE__ */ (
 	ref
 }));
 PasswordInput.displayName = "PasswordInput";
-
 //#endregion
 //#region src/components/progressBar/index.tsx
 const ProgressBar = ({ value, maxValue = 100, className }) => {
@@ -2037,10 +1974,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__ */ (0, react_jsx_runtime.jsxs)("div", {
+const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, className, containerClassName, labelClassName, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	"data-testid": "radio-button-container",
 	className: `${containerClassName || "radio-button-container"} relative flex items-start`,
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2050,7 +1986,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: `${(0, clsx.default)(className, "ease checked:border-navyBlue checked:bg-navy-blue relative m-0 flex size-5 cursor-pointer appearance-none items-center justify-center rounded-full border border-gray-400 bg-white transition-colors duration-100 focus:ring-0 focus:outline-hidden focus-visible:ring-0", { "cursor-not-allowed opacity-50": props.disabled })}`,
@@ -2068,12 +2004,11 @@ const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, cl
 		})]
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 		htmlFor: id,
-		className: ` ${(0, clsx.default)(labelClassName, "mb-0 cursor-pointer pl-3 text-sm font-normal", { "text-gray-400": props.disabled })}`,
+		className: ` ${(0, clsx.default)(labelClassName, "mb-0 cursor-pointer pl-3 yo-text-small font-normal", { "text-gray-400": props.disabled })}`,
 		children: label
 	})]
 });
 RadioButton.displayName = "RadioButton";
-
 //#endregion
 //#region src/icons/IconStarEmpty.tsx
 const IconStarEmpty = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
@@ -2090,7 +2025,6 @@ const IconStarEmpty = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg
 		fill: "#E0E0E0"
 	})
 });
-
 //#endregion
 //#region src/icons/IconStarFilled.tsx
 const IconStarFilled = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
@@ -2107,7 +2041,6 @@ const IconStarFilled = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("sv
 		fill: "currentColor"
 	})
 });
-
 //#endregion
 //#region src/icons/IconStarHalfFilled.tsx
 const IconStarHalfFilled = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
@@ -2127,7 +2060,6 @@ const IconStarHalfFilled = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs
 		fill: "currentColor"
 	})]
 });
-
 //#endregion
 //#region src/components/rating/index.tsx
 const Rating = ({ rating, ratings, size = "normal", setReview, className, setReviewError, error }) => {
@@ -2136,7 +2068,7 @@ const Rating = ({ rating, ratings, size = "normal", setReview, className, setRev
 	const [reviewIsSet, setReviewIsSet] = (0, react.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]"
@@ -2150,29 +2082,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__ */ (0, react_jsx_runtime.jsx)(IconStarFilled, { className: `text-yellow ${sizeClasses$1[size]}` });
-			if (hasHalf$1 && index === Math.ceil(effectiveRating$1)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarHalfFilled, { className: `text-yellow ${sizeClasses$1[size]}` });
-			return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(IconStarFilled, { className: `text-navy-blue ${sizeClasses[size]}` });
+			if (hasHalf && index === Math.ceil(effectiveRating)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarHalfFilled, { className: `text-navy-blue ${sizeClasses[size]}` });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarEmpty, { className: `text-navy-blue ${sizeClasses[size]}` });
 		}
 		const displayRating = reviewIsSet ? Number(reviewIsSet) : currentRating;
 		const roundedRating = Math.round(displayRating * 2) / 2;
 		const hasHalf = roundedRating % 1 === .5;
 		const effectiveRating = roundedRating;
-		const fullStars = Math.floor(effectiveRating);
-		if (index <= fullStars) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarFilled, { className: `text-yellow ${sizeClasses$1[size]}` });
-		if (hasHalf && index === Math.ceil(effectiveRating)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarHalfFilled, { className: `text-yellow ${sizeClasses$1[size]}` });
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarEmpty, { className: `text-yellow ${sizeClasses$1[size]} ` });
+		if (index <= Math.floor(effectiveRating)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarFilled, { className: `text-navy-blue ${sizeClasses[size]}` });
+		if (hasHalf && index === Math.ceil(effectiveRating)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarHalfFilled, { className: `text-navy-blue ${sizeClasses[size]}` });
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarEmpty, { className: `text-navy-blue ${sizeClasses[size]} ` });
 	};
-	const StarSmallIcon = ({ index, className: className$1 }) => {
-		const displayRating = currentSmallRating;
-		const roundedRating = Math.round(displayRating * 2) / 2;
-		if (index === roundedRating) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarFilled, { className: cn(className$1, "text-yellow") });
-		if (index - roundedRating === .5) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarHalfFilled, { className: cn(className$1, "text-yellow") });
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarEmpty, { className: cn(className$1, "text-yellow") });
+	const StarSmallIcon = ({ index, className }) => {
+		const roundedRating = Math.round(currentSmallRating * 2) / 2;
+		if (index === roundedRating) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarFilled, { className: cn(className, "text-navy-blue") });
+		if (index - roundedRating === .5) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarHalfFilled, { className: cn(className, "text-navy-blue") });
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarEmpty, { className: cn(className, "text-navy-blue") });
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: cn("flex flex-col", className),
@@ -2201,7 +2130,7 @@ const Rating = ({ rating, ratings, size = "normal", setReview, className, setRev
 					onClick: () => handleStarClick(value),
 					children: [Array.from({ length: value }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StarSmallIcon, {
 						index: value,
-						className: "text-yellow size-5"
+						className: "text-navy-blue size-5"
 					}, i)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "mt-[5px] flex items-center pl-2 text-[12px] text-gray-800",
 						children: label
@@ -2215,17 +2144,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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("h1", {
-			className: "w-full text-2xl leading-10 font-bold md:text-3xl",
+			className: "w-full yo-text-h2 leading-10 font-bold md:text-3xl",
 			children: title
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 			className: "mx-auto flex w-full max-w-[415px] list-none flex-col items-start justify-start gap-3.5 pl-0 hover:cursor-pointer",
@@ -2235,7 +2163,6 @@ const RegionSelector = ({ title, regions,...props }) => {
 	});
 };
 RegionSelector.displayName = "RegionSelector";
-
 //#endregion
 //#region src/components/reviews/index.tsx
 const ReviewsLine = ({ maxValue, amount, countStarsText }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2297,7 +2224,6 @@ const Reviews = ({ totalRatings, ratings, averageRating, aggregatedRating, count
 		})
 	})]
 });
-
 //#endregion
 //#region src/components/scrollToTop/index.tsx
 const ScrollToTop = ({ scrollToTopTitle }) => {
@@ -2331,16 +2257,15 @@ const ScrollToTop = ({ scrollToTopTitle }) => {
 		onClick: scrollToTop,
 		"data-tooltip-id": scrollToTopTitle,
 		"data-tooltip-content": scrollToTopTitle,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconChevronUp, {})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconChevronUp, {})
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_tooltip.Tooltip, {
 		id: scrollToTopTitle,
 		className: "z-[99]"
 	})] });
 };
-
 //#endregion
 //#region src/components/searchInput/index.tsx
-const SearchInput = ({ placeholder, value, onChange, className, rightSection,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInput, {
+const SearchInput = ({ placeholder, value, onChange, className, rightSection, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInput, {
 	placeholder,
 	className: className || "w-full lg:w-auto lg:min-w-[23.75rem]",
 	rightSection: rightSection || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {}),
@@ -2348,7 +2273,6 @@ const SearchInput = ({ placeholder, value, onChange, className, rightSection,...
 	onChange,
 	...props
 });
-
 //#endregion
 //#region src/hooks/useDebouncedValue.ts
 function useDebouncedValue(value, delay = 200) {
@@ -2359,10 +2283,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 = (0, react.useRef)(null);
 	const buttonRef = (0, react.useRef)(null);
 	const optionRefs = (0, react.useRef)([]);
@@ -2372,29 +2295,27 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
 	const [focusedIndex, setFocusedIndex] = (0, react.useState)(-1);
 	const debouncedSearch = useDebouncedValue(searchTerm);
-	const isControlled = value !== undefined;
+	const isControlled = value !== void 0;
 	const currentValue = isControlled ? value : internalValue;
 	const selectedLabels = (0, react.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 } = (0, __floating_ui_react.useFloating)({
+	const { refs, floatingStyles, context } = (0, _floating_ui_react.useFloating)({
 		open,
 		onOpenChange: setOpen,
 		middleware: [
-			(0, __floating_ui_react.offset)(4),
-			(0, __floating_ui_react.flip)(),
-			(0, __floating_ui_react.shift)()
+			(0, _floating_ui_react.offset)(4),
+			(0, _floating_ui_react.flip)(),
+			(0, _floating_ui_react.shift)()
 		],
-		whileElementsMounted: __floating_ui_react.autoUpdate,
+		whileElementsMounted: _floating_ui_react.autoUpdate,
 		placement: "bottom-start"
 	});
-	const click = (0, __floating_ui_react.useClick)(context);
-	const dismiss = (0, __floating_ui_react.useDismiss)(context);
-	const role = (0, __floating_ui_react.useRole)(context, { role: "combobox" });
-	const { getReferenceProps, getFloatingProps } = (0, __floating_ui_react.useInteractions)([
+	const click = (0, _floating_ui_react.useClick)(context);
+	const dismiss = (0, _floating_ui_react.useDismiss)(context);
+	const role = (0, _floating_ui_react.useRole)(context, { role: "combobox" });
+	const { getReferenceProps, getFloatingProps } = (0, _floating_ui_react.useInteractions)([
 		click,
 		dismiss,
 		role
@@ -2420,8 +2341,8 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 	const handleClear = (0, react.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;
@@ -2525,7 +2446,7 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 				},
 				...getReferenceProps(),
 				disabled,
-				className: cn("flex h-10 w-full items-center justify-between rounded-md border px-3 text-sm transition-colors bg-gray-20", "border-gray-200 hover:border-gray-300 focus:border-gray-300 outline-none", !hideError && errorText && "border-red-500 hover:border-red-500 focus:border-red-500", disabled && "opacity-50 cursor-not-allowed"),
+				className: cn("flex h-10 w-full items-center justify-between rounded-md border px-3 yo-text-small transition-colors bg-gray-20", "border-gray-200 hover:border-gray-300 focus:border-gray-300 outline-none", !hideError && errorText && "border-red-500 hover:border-red-500 focus:border-red-500", disabled && "opacity-50 cursor-not-allowed"),
 				"aria-haspopup": "listbox",
 				"aria-expanded": open,
 				"aria-disabled": disabled,
@@ -2541,7 +2462,7 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 						className: "truncate",
 						children: selectedLabels
 					})
-				}), isClearable && !showPlaceholder ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconX, {
+				}), isClearable && !showPlaceholder ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, {
 					size: 16,
 					color: "black",
 					className: "cursor-pointer",
@@ -2549,13 +2470,13 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 					onPointerDown: handleClear,
 					role: "button",
 					"aria-label": "Clear selection"
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconSelector, {
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconSelector, {
 					size: 16,
 					color: "black",
 					"aria-hidden": "true"
 				})]
 			}),
-			open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingFocusManager, {
+			open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingFocusManager, {
 				context,
 				modal: false,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2570,11 +2491,11 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 					"aria-labelledby": `${id}-label`,
 					className: cn("z-[99999] mt-2 rounded-md border border-gray-200 bg-white shadow-md", "overflow-hidden animate-in fade-in"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "p-1 text-sm max-h-[250px] overflow-auto",
+						className: "p-1 yo-text-small max-h-[250px] overflow-auto",
 						children: [searchable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "flex items-center gap-2 px-2 py-1 border-b border-gray-100 sticky top-0 bg-white",
 							role: "search",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconSearch, {
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconSearch, {
 								size: 14,
 								className: "text-gray-400",
 								"aria-hidden": "true"
@@ -2584,7 +2505,7 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 								value: searchTerm,
 								onChange: (e) => setSearchTerm(e.target.value),
 								placeholder: searchPlaceholder,
-								className: "w-full text-sm outline-none bg-transparent placeholder-gray-300",
+								className: "w-full yo-text-small outline-none bg-transparent placeholder-gray-300",
 								"aria-label": "Search options"
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2592,17 +2513,19 @@ 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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: cn("flex h-4 w-4 items-center justify-center rounded-sm border", isSelected ? "border-light-blue bg-light-blue" : "border-gray-400 bg-white"),
 										"aria-hidden": "true",
-										children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconCheck, {
+										children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconCheck, {
 											size: 12,
 											color: "white",
 											stroke: 2,
@@ -2623,7 +2546,7 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 				})
 			}) }),
 			!hideError && errorText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-xs text-red-500",
+				className: "yo-text-caption text-red-500",
 				role: "alert",
 				children: errorText
 			})
@@ -2631,7 +2554,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__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2641,16 +2563,15 @@ const SettingsCard = ({ icon, title, link, ManageText, LinkComponent }) => /* @_
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-4",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: icon }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "text-base font-normal",
+			className: "yo-text-body",
 			children: title
 		})]
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
-		className: "text-xs font-medium text-sky-600 no-underline hover:underline",
+		className: "yo-text-link text-sky-600 no-underline hover:underline",
 		href: link,
 		children: ManageText
 	})]
 });
-
 //#endregion
 //#region src/components/skeleton/index.tsx
 const Skeleton = ({ className, "data-testid": dataTestId }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -2658,7 +2579,6 @@ const Skeleton = ({ className, "data-testid": dataTestId }) => /* @__PURE__ */ (
 	"data-testid": dataTestId || "skeleton",
 	className: cn("inline-block rounded-md", "animate-pulse bg-gray-100/50", className)
 });
-
 //#endregion
 //#region src/components/skillPill/index.tsx
 const SkillPill = ({ name, number }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2673,7 +2593,6 @@ const SkillPill = ({ name, number }) => /* @__PURE__ */ (0, react_jsx_runtime.js
 		children: number
 	})]
 });
-
 //#endregion
 //#region src/components/stepper/NumberedStepper.tsx
 const NumberedStepper = ({ steps, active, className, stepsCompleted, completedLabel, onStepClick }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2696,14 +2615,14 @@ const NumberedStepper = ({ steps, active, className, stepsCompleted, completedLa
 				className: "flex flex-auto flex-col justify-center",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					"data-testid": `stepper-label-${index}`,
-					className: `content-center text-sm font-medium! whitespace-nowrap md:text-lg md:font-bold ${index <= active ? "text-gray-900" : "text-gray-500"}`,
+					className: `content-center yo-text-small font-medium! whitespace-nowrap md:text-lg md:font-bold ${index <= active ? "text-gray-900" : "text-gray-500"}`,
 					children: step.label
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [completedLabel && active === 1 && index === 0 && stepsCompleted.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "text-green flex items-center text-xs font-medium",
+					className: "text-green flex items-center yo-text-caption",
 					children: [
 						completedLabel,
 						" ",
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconCheck, {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconCheck, {
 							className: "align-middle",
 							size: 12
 						})
@@ -2713,7 +2632,6 @@ const NumberedStepper = ({ steps, active, className, stepsCompleted, completedLa
 		})
 	}), index < steps.length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2744,7 +2662,7 @@ const Stepper = ({ steps, setStep = () => {}, variant = "default", clickableStep
 							}),
 							children: [(index < activeStep || isCompleted) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "flex items-center justify-center text-white",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconCheck, { size: variant === "small" || isMobile ? 7 : 12 })
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconCheck, { size: variant === "small" || isMobile ? 7 : 12 })
 							}), index === activeStep && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								"data-testid": "active-step-indicator",
 								className: `${variant === "small" || isMobile ? "size-1" : "size-2"} bg-light-blue rounded-full`
@@ -2753,7 +2671,7 @@ const Stepper = ({ steps, setStep = () => {}, variant = "default", clickableStep
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "flex flex-wrap items-center justify-center",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: `text-center ${variant === "small" || isMobile ? "text-xs-fields" : "text-sm font-normal"} ${index <= activeStep ? "text-gray-900" : "text-gray-500"}`,
+								className: `text-center ${variant === "small" || isMobile ? "text-xs-fields" : "yo-text-small"} ${index <= activeStep ? "text-gray-900" : "text-gray-500"}`,
 								children: step.label
 							})
 						}),
@@ -2764,7 +2682,6 @@ const Stepper = ({ steps, setStep = () => {}, variant = "default", clickableStep
 		}, index);
 	})
 });
-
 //#endregion
 //#region src/components/stickyMobileButton/index.tsx
 const StickyMobileButtonWrapper = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2776,26 +2693,23 @@ const StickyMobileButtonWrapper = ({ children }) => /* @__PURE__ */ (0, react_js
 		children
 	})
 });
-
 //#endregion
 //#region src/components/table/index.tsx
-const Table = ({ children, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const Table = ({ children, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-testid": "table",
 	"data-component": "table",
 	className: cn("table w-full table-fixed border-collapse overflow-auto", className),
 	...props,
 	children
 });
-
 //#endregion
 //#region src/components/table/tableCell/index.tsx
 const TableCell = ({ children, smallPadding, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-testid": "tableCell",
 	"data-component": "tableCell",
-	className: `${cn("table-cell py-2 align-middle text-sm font-normal first:pl-2 last:pr-2 md:py-0 md:xl:first:pl-10 md:xl:last:pr-10", { "md:xl:first:pl-5 md:xl:last:pr-5": smallPadding }, className)}`,
+	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__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2804,30 +2718,27 @@ const TableHeader = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)
 	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__ */ (0, react_jsx_runtime.jsx)("div", {
+const TableHeaderItem = ({ children, smallPadding, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-testid": "tableHeaderItem",
 	"data-component": "tableHeaderItem",
-	className: cn("hidden h-10 align-middle text-xs font-medium first:pl-10 last:pr-10 xl:table-cell", { "xl:first:pl-5 xl:last:pr-5": smallPadding }, className),
+	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__ */ (0, react_jsx_runtime.jsx)("div", {
+const TableHeaderRow = ({ children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-testid": "tableHeaderRow",
 	"data-component": "tableHeaderRow",
 	className: "table-row xl:border-0 xl:border-b xl:border-solid xl:border-gray-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__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-testid": "tableRow",
 		"data-component": "tableRow",
@@ -2836,27 +2747,25 @@ function TableRow({ children, className, header,...props }) {
 		children
 	});
 }
-
 //#endregion
 //#region src/components/tabs/Tab.tsx
 const Tab = (0, react.forwardRef)(({ tabId, activeTab, tabContent, clickFnc, rightSection }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 	ref,
 	"data-testid": `tab-${tabId}`,
-	className: `${activeTab && "text-light-blue bg-[#F0F0F6]"} bg-ultra-light-blue px-5 py-[10px] text-xs font-normal whitespace-nowrap text-black transition-colors duration-100 hover:border-black hover:bg-[#F0F0F6] data-active:border-black data-active:bg-[#F0F0F6] data-active:font-medium data-active:text-black`,
+	className: `${activeTab && "text-light-blue bg-[#F0F0F6]"} bg-ultra-light-blue px-5 py-[10px] yo-text-caption whitespace-nowrap text-black transition-colors duration-100 hover:border-black hover:bg-[#F0F0F6] data-active:border-black data-active:bg-[#F0F0F6] data-active:font-medium data-active:text-black`,
 	onClick: () => clickFnc(tabId),
 	children: [tabContent, rightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "ml-2 inline-flex",
 		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__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-testid": "tabs-badge",
-		className: (0, clsx.default)("bg-secondary h-5 rounded-full text-xs leading-5 font-medium text-white", {
+		className: (0, clsx.default)("bg-secondary h-5 rounded-full yo-text-caption leading-5 text-white", {
 			"w-5 text-center": isCircular,
 			"px-2": !isCircular
 		}),
@@ -2864,7 +2773,6 @@ const TabsBadge = ({ children }) => {
 	});
 };
 TabsBadge.displayName = "TabsBadge";
-
 //#endregion
 //#region src/components/tabs/TabsWrapper.tsx
 const TabsWrapper = ({ setActiveTab, activeTab, tabs }) => {
@@ -2922,40 +2830,38 @@ const TabContent = (0, react.forwardRef)(({ tab, setActiveTab, activeTab }, ref)
 	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 = (0, react.forwardRef)(({ className, label, error, rows = 8,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+const Textarea = (0, react.forwardRef)(({ className, label, error, rows = 8, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	className: "relative grid gap-2",
 	children: [
 		label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-			className: "flex items-center gap-1 text-xs font-medium text-black",
+			className: "flex items-center gap-1 yo-text-label",
 			children: label
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 			"data-component": "TextArea",
 			rows,
 			ref,
-			className: cn("disabled:bg-grey-100 bg-ultra-light-gray w-full rounded border border-gray-200 p-3 text-sm font-normal text-black placeholder:text-gray-800 focus:ring-0 focus:outline-hidden disabled:cursor-not-allowed disabled:border-gray-300", { "border-red-500 text-red-500 selection:bg-red-200 focus:border-red-500 focus:ring-red-500 focus:placeholder:text-red-500 active:border-red-500 active:ring-red-500": !!error }, className),
+			className: cn("disabled:bg-grey-100 bg-ultra-light-gray w-full rounded border border-gray-200 p-3 yo-text-small text-black placeholder:text-gray-800 focus:ring-0 focus:outline-hidden disabled:cursor-not-allowed disabled:border-gray-300", { "border-red-500 text-red-500 selection:bg-red-200 focus:border-red-500 focus:ring-red-500 focus:placeholder:text-red-500 active:border-red-500 active:ring-red-500": !!error }, className),
 			...props
 		}),
 		error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
-			className: "text-xs font-normal text-red-500",
+			className: "yo-text-caption text-red-500",
 			children: error
 		})
 	]
 }));
-
 //#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,
@@ -2980,10 +2886,9 @@ function ThemeIcon({ styleVariant = "black", className, icon, adjustedSize, titl
 		})
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_tooltip.Tooltip, { id: title })] });
 }
-
 //#endregion
 //#region src/components/timeInput/index.tsx
-const TimeInput = (0, react.forwardRef)(({ label, error, withSeconds, className = "",...props }, ref) => {
+const TimeInput = (0, react.forwardRef)(({ label, error, withSeconds, className = "", ...props }, ref) => {
 	const handleTimeChange = (e) => {
 		if (props.onChange) props.onChange(e);
 	};
@@ -2992,7 +2897,7 @@ const TimeInput = (0, react.forwardRef)(({ label, error, withSeconds, className
 		"data-component": "timeInput",
 		children: [
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-				className: "mb-2 block text-xs font-medium",
+				className: "mb-2 block yo-text-label",
 				htmlFor: props.id,
 				children: label
 			}),
@@ -3002,16 +2907,15 @@ const TimeInput = (0, react.forwardRef)(({ label, error, withSeconds, className
 				type: "time",
 				step: withSeconds ? "1" : "60",
 				onChange: handleTimeChange,
-				className: `bg-ultra-light-gray focus:border-primary flex h-10 min-h-[36px] w-full items-center rounded-[5px] border border-solid border-gray-200 px-3 text-sm font-normal focus:outline-hidden ${error ? "border-red-500" : ""} ${className}`
+				className: `bg-ultra-light-gray focus:border-primary flex h-10 min-h-[36px] w-full items-center rounded-[5px] border border-solid border-gray-200 px-3 yo-text-small focus:outline-hidden ${error ? "border-red-500" : ""} ${className}`
 			}),
 			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "pt-2 text-xs font-normal text-red-500",
+				className: "pt-2 yo-text-caption text-red-500",
 				children: error
 			})
 		]
 	});
 });
-
 //#endregion
 //#region src/components/toggle/index.tsx
 const Toggle = ({ onClick, value, disabled = false }) => {
@@ -3033,7 +2937,6 @@ const Toggle = ({ onClick, value, disabled = false }) => {
 		})
 	});
 };
-
 //#endregion
 //#region src/components/truncatedText/index.tsx
 const TruncatedText = ({ text, limit = 20 }) => {
@@ -3045,22 +2948,21 @@ const TruncatedText = ({ text, limit = 20 }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-2",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "text-sm font-normal",
+			className: "yo-text-small",
 			children: truncatedText
 		}), text.length > limit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
 			content: text,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "text-secondary",
 				"data-testid": "truncated-text-icon",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconMessageDots, { stroke: 1 })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconMessageDots, { stroke: 1 })
 			})
 		})]
 	});
 };
-
 //#endregion
 //#region src/components/unorderedList/index.tsx
-const UnorderedList = ({ children, className, actionItem,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
+const UnorderedList = ({ children, className, actionItem, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
 	className: cn("m-0 last:border-none", className),
 	"data-component": "unorderedList",
 	"data-testid": "unorderedList",
@@ -3070,72 +2972,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__ */ (0, react_jsx_runtime.jsxs)("li", {
+const UnorderedListItem = ({ children, actionItem, className, header = false, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 	...props,
 	"data-component": "unorderedListItem",
-	className: cn("grid min-h-[74px] list-none items-center border-b border-solid border-b-gray-200 py-5 text-sm font-normal last:border-none md:flex md:py-4 md:pr-10 md:pl-10", header ? "md:items-end" : "hover:bg-ultra-light-blue-gray", { "grid-cols-2": actionItem }, className),
+	className: cn("grid min-h-[74px] list-none items-center border-b border-solid border-b-gray-200 py-5 yo-text-small last:border-none md:flex md:py-4 md:pr-10 md:pl-10", header ? "md:items-end" : "hover:bg-ultra-light-blue-gray", { "grid-cols-2": actionItem }, className),
 	children: [children, actionItem && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "flex justify-end gap-2 md:absolute md:right-8 md:items-center",
 		children: actionItem
 	})]
 });
-
 //#endregion
 //#region src/hooks/phone/usePhoneNumber.ts
 function usePhoneNumber() {
-	/**
-	* Validates a phone number and returns parsing results
-	*/
-	const validatePhone = (0, react.useCallback)((phoneNumber, options) => (0, phone.default)(phoneNumber, options), []);
-	/**
-	* Strips the country code from a phone number
-	* Example: +85265698900 -> 65698900
-	*/
-	const stripCountryCode = (0, react.useCallback)((phoneNumber) => {
-		const result = (0, phone.default)(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 = (0, react.useCallback)((phoneNumber) => {
-		const result = (0, phone.default)(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 = (0, react.useCallback)((phoneNumber, options) => {
-		const result = (0, phone.default)(phoneNumber, options);
-		if (!result.isValid) return phoneNumber;
-		return result.phoneNumber;
-	}, []);
 	return {
-		validatePhone,
-		stripCountryCode,
-		getCountryCode,
-		formatToInternational
+		validatePhone: (0, react.useCallback)((phoneNumber, options) => (0, phone.default)(phoneNumber, options), []),
+		stripCountryCode: (0, react.useCallback)((phoneNumber) => {
+			const result = (0, phone.default)(phoneNumber);
+			if (!result.isValid) return phoneNumber;
+			return result.phoneNumber.replace(result.countryCode, "");
+		}, []),
+		getCountryCode: (0, react.useCallback)((phoneNumber) => {
+			const result = (0, phone.default)(phoneNumber);
+			if (!result.isValid) return phoneNumber;
+			return result.countryCode;
+		}, []),
+		formatToInternational: (0, react.useCallback)((phoneNumber, options) => {
+			const result = (0, phone.default)(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 = country_list_with_dial_code_and_flag.default;
+	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 = country_list_with_dial_code_and_flag.default.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 }) => {
@@ -3146,24 +3031,24 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
 	const [filteredCountries, setFilteredCountries] = (0, react.useState)(phoneNumberPrefixes);
 	const [highlightedIndex, setHighlightedIndex] = (0, react.useState)(-1);
 	const optionRefs = (0, react.useRef)([]);
-	const { refs, floatingStyles, context } = (0, __floating_ui_react.useFloating)({
+	const { refs, floatingStyles, context } = (0, _floating_ui_react.useFloating)({
 		open: openDropdown,
 		onOpenChange: (isOpen) => {
 			setOpenDropdown(isOpen);
 			if (isOpen) setHighlightedIndex(-1);
 		},
 		middleware: [
-			(0, __floating_ui_react.offset)(4),
-			(0, __floating_ui_react.flip)(),
-			(0, __floating_ui_react.shift)()
+			(0, _floating_ui_react.offset)(4),
+			(0, _floating_ui_react.flip)(),
+			(0, _floating_ui_react.shift)()
 		],
-		whileElementsMounted: __floating_ui_react.autoUpdate,
+		whileElementsMounted: _floating_ui_react.autoUpdate,
 		placement: "bottom-start"
 	});
-	const click = (0, __floating_ui_react.useClick)(context);
-	const dismiss = (0, __floating_ui_react.useDismiss)(context);
-	const role = (0, __floating_ui_react.useRole)(context, { role: "combobox" });
-	const { getReferenceProps, getFloatingProps } = (0, __floating_ui_react.useInteractions)([
+	const click = (0, _floating_ui_react.useClick)(context);
+	const dismiss = (0, _floating_ui_react.useDismiss)(context);
+	const role = (0, _floating_ui_react.useRole)(context, { role: "combobox" });
+	const { getReferenceProps, getFloatingProps } = (0, _floating_ui_react.useInteractions)([
 		click,
 		dismiss,
 		role
@@ -3174,20 +3059,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]);
 	(0, react.useEffect)(() => {
-		const results = performSearch(searchQuery);
-		setFilteredCountries(results);
+		setFilteredCountries(performSearch(searchQuery));
 		setHighlightedIndex(-1);
 	}, [searchQuery]);
 	(0, react.useEffect)(() => {
 		optionRefs.current = optionRefs.current.slice(0, filteredCountries.length);
 	}, [filteredCountries]);
 	(0, react.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);
@@ -3204,11 +3086,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);
@@ -3235,11 +3116,11 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex items-center gap-1",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-xs font-medium",
+					className: "yo-text-label",
 					children: selectedCountry?.dial_code
 				})
 			})
-		}), openDropdown && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingFocusManager, {
+		}), openDropdown && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingFocusManager, {
 			context,
 			modal: false,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3266,15 +3147,17 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "max-h-[200px] overflow-auto p-1",
 					children: filteredCountries.length > 0 ? filteredCountries.map((country, index) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-base",
+								className: "yo-text-body",
 								children: country.flag
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -3282,12 +3165,12 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
 								children: country.name
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-xs font-medium text-gray-600",
+								className: "yo-text-label text-gray-600",
 								children: country.dial_code
 							})
 						]
 					}, country.code + country.name + country.dial_code)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "px-3 py-2 text-sm text-gray-500 text-center",
+						className: "px-3 py-2 yo-text-small text-gray-500 text-center",
 						children: "No countries found"
 					})
 				})]
@@ -3295,7 +3178,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 = (0, react.useRef)(null);
 	const [phoneNumber, setPhoneNumber] = (0, react.useState)(defaultValue || "");
 	const { validatePhone, stripCountryCode, getCountryCode, formatToInternational } = usePhoneNumber();
@@ -3308,18 +3191,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);
@@ -3345,7 +3225,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 }) => {
@@ -3360,26 +3239,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) => {
@@ -3461,7 +3337,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,
@@ -3483,7 +3359,7 @@ const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classN
 					role: "menuitem",
 					tabIndex: -1,
 					onClick: () => handleItemClick(c.onClick),
-					className: cn("w-full rounded-md px-4 py-2 text-left text-sm font-normal whitespace-nowrap transition-colors", "focus:ring-primary hover:bg-gray-50 focus:bg-gray-50 focus:ring focus:outline-none focus:ring-inset", c.disabled && "cursor-not-allowed opacity-50", focusedIndex === index && "bg-gray-50"),
+					className: cn("w-full rounded-md px-4 py-2 text-left yo-text-small whitespace-nowrap transition-colors", "focus:ring-primary hover:bg-gray-50 focus:bg-gray-50 focus:ring focus:outline-none focus:ring-inset", c.disabled && "cursor-not-allowed opacity-50", focusedIndex === index && "bg-gray-50"),
 					"aria-label": c.title,
 					disabled: c.disabled,
 					children: c.title
@@ -3492,50 +3368,48 @@ 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__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconBold, {
+const BoldIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconBold, {
 	size: 18,
 	stroke: 1.5
 });
-const ItalicIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconItalic, {
+const ItalicIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconItalic, {
 	size: 18,
 	stroke: 1.5
 });
-const UnderlineIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconUnderline, {
+const UnderlineIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconUnderline, {
 	size: 18,
 	stroke: 1.5
 });
-const ClearFormattingIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconClearFormatting, {
+const ClearFormattingIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconClearFormatting, {
 	size: 18,
 	stroke: 1.5
 });
-const ListIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconList, {
+const ListIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconList, {
 	size: 18,
 	stroke: 1.5
 });
-const ListNumbersIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconListNumbers, {
+const ListNumbersIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconListNumbers, {
 	size: 18,
 	stroke: 1.5
 });
 const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placeholder, onChange, readOnly, error }, ref) => {
-	const editor = (0, __tiptap_react.useEditor)({
+	const editor = (0, _tiptap_react.useEditor)({
 		extensions: [
-			__tiptap_starter_kit.StarterKit,
-			__tiptap_extension_underline.Underline,
-			__tiptap_extension_placeholder.Placeholder.configure({ placeholder })
+			_tiptap_starter_kit.StarterKit,
+			_tiptap_extension_underline.Underline,
+			_tiptap_extension_placeholder.Placeholder.configure({ placeholder })
 		],
-		editorProps: { attributes: { class: "min-h-[190px] md:min-h-[150px] bg-ultra-light-gray text-sm font-normal p-4 prose prose-sm sm:prose-base lg:prose-lg xl:prose-2xl focus:outline-hidden" } },
+		editorProps: { attributes: { class: "min-h-[190px] md:min-h-[150px] bg-ultra-light-gray yo-text-small p-4 prose prose-sm sm:prose-base lg:prose-lg xl:prose-2xl focus:outline-hidden" } },
 		content,
 		immediatelyRender: false,
 		editable: !readOnly,
-		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, "");
@@ -3567,28 +3441,28 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 						type: "button",
 						"data-testid": "bold-button",
 						onClick: () => editor.chain().focus().toggleBold().run(),
-						className: `${editor.isActive("bold") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center rounded-l-md border-gray-400 text-xs font-normal hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
+						className: `${editor.isActive("bold") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center rounded-l-md border-gray-400 yo-text-small hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BoldIcon, {})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						"data-testid": "italic-button",
 						onClick: () => editor.chain().focus().toggleItalic().run(),
-						className: `${editor.isActive("italic") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center border-gray-400 text-xs font-normal hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
+						className: `${editor.isActive("italic") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center border-gray-400 yo-text-small hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItalicIcon, {})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						"data-testid": "underline-button",
 						onClick: () => editor.chain().focus().toggleUnderline().run(),
-						className: `${editor.isActive("underline") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center border-gray-400 text-xs font-normal hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
+						className: `${editor.isActive("underline") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center border-gray-400 yo-text-small hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnderlineIcon, {})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						"data-testid": "clear-formatting-button",
 						onClick: () => editor.chain().focus().clearNodes().unsetAllMarks().run(),
-						className: "flex size-[26px] items-center justify-center rounded-r-md border-gray-400 bg-white text-xs font-normal hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden",
+						className: "flex size-[26px] items-center justify-center rounded-r-md border-gray-400 bg-white yo-text-small hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClearFormattingIcon, {})
 					})
 				]
@@ -3598,17 +3472,17 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 					type: "button",
 					"data-testid": "bullet-list-button",
 					onClick: () => editor.chain().focus().toggleBulletList().run(),
-					className: `${editor.isActive("bulletList") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center rounded-l-md border-gray-400 text-xs font-normal hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
+					className: `${editor.isActive("bulletList") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center rounded-l-md border-gray-400 yo-text-small hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListIcon, {})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					"data-testid": "ordered-list-button",
 					onClick: () => editor.chain().focus().toggleOrderedList().run(),
-					className: `${editor.isActive("orderedList") ? "bg-primary/20 text-primary" : "bg-white"} flex size-[26px] items-center justify-center rounded-r-md border-gray-400 text-xs font-normal hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
+					className: `${editor.isActive("orderedList") ? "bg-primary/20 text-primary" : "bg-white"} flex size-[26px] items-center justify-center rounded-r-md border-gray-400 yo-text-small hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListNumbersIcon, {})
 				})]
 			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tiptap_react.EditorContent, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tiptap_react.EditorContent, {
 			editor,
 			"data-component": "wysiwygEditor",
 			"data-testid": id,
@@ -3616,11 +3490,10 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 			className: cn("overflow-hidden rounded-[inherit]")
 		})]
 	}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "mt-1 text-xs font-normal text-red-600",
+		className: "mt-1 yo-text-small text-red-600",
 		children: error
 	})] });
 });
-
 //#endregion
 exports.AccordionItem = AccordionItem;
 exports.AccordionWrapper = AccordionWrapper;
@@ -3689,4 +3562,5 @@ exports.UnorderedListItem = UnorderedListItem;
 exports.UnstyledButton = UnstyledButton;
 exports.WysiwygEditor = WysiwygEditor;
 exports.buttonVariants = buttonVariants;
+
 //# sourceMappingURL=index.cjs.map