@youngonesworks/ui 0.1.79 → 0.1.81

package/dist/index.cjs

@@ -26,39 +26,39 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 //#endregion
 const react = __toESM(require("react"));
 const __tabler_icons_react = __toESM(require("@tabler/icons-react"));
-const __utils_cn = __toESM(require("@utils/cn"));
+const clsx = __toESM(require("clsx"));
+const tailwind_merge = __toESM(require("tailwind-merge"));
 const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
 const react_tooltip = __toESM(require("react-tooltip"));
-const __utils_enums = __toESM(require("@utils/enums"));
-const __utils_formatIcon = __toESM(require("@utils/formatIcon"));
-const clsx = __toESM(require("clsx"));
 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 __floating_ui_react = __toESM(require("@floating-ui/react"));
 const react_dom = __toESM(require("react-dom"));
 const react_phone_input_2 = __toESM(require("react-phone-input-2"));
-const __components_label = __toESM(require("@components/label"));
 const react_select = __toESM(require("react-select"));
-const __components_button_buttonVariants = __toESM(require("@components/button/buttonVariants"));
-const __components_unstyledButton = __toESM(require("@components/unstyledButton"));
 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"));
-const __utils_ssr = __toESM(require("@utils/ssr"));
 
 //#region src/jsx-runtime-shim.ts
 const jsx = react.createElement;
 const jsxs = react.createElement;
 const Fragment$1 = 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", {
 	type: "button",
 	"data-component": "unstyledButton",
-	className: (0, __utils_cn.cn)("appearance-none", className),
+	className: cn("appearance-none", className),
 	ref,
 	...props
 }));
@@ -73,7 +73,7 @@ const AccordionItem = ({ controlContent, panelContent, style = "light", border =
 	}, [active]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-testid": "accordion-item",
-		className: (0, __utils_cn.cn)("rounded-md hover:bg-gray-50", {
+		className: cn("rounded-md hover:bg-gray-50", {
 			"bg-light-blue hover:bg-light-blue/50": style === "dark",
 			"rounded-none border-b border-gray-200": border,
 			"bg-ultra-light-blue border border-gray-200 hover:bg-transparent": style === "onboarding",
@@ -81,7 +81,7 @@ const AccordionItem = ({ controlContent, panelContent, style = "light", border =
 			"hover:bg-ultra-light-blue cursor-not-allowed opacity-50": disabled
 		}, className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(UnstyledButton, {
-			className: (0, __utils_cn.cn)("relative flex w-full flex-row items-center justify-between gap-2 px-4 py-3", { "flex-row-reverse": chevronPosition === "right" }),
+			className: cn("relative flex w-full flex-row items-center justify-between gap-2 px-4 py-3", { "flex-row-reverse": chevronPosition === "right" }),
 			onClick: () => setIsActive(!isActive),
 			disabled,
 			children: [
@@ -112,18 +112,92 @@ const AccordionItem = ({ controlContent, panelContent, style = "light", border =
 const AccordionWrapper = ({ children, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-testid": "accordion-wrapper",
 	"data-component": "accordionWrapper",
-	className: (0, __utils_cn.cn)(className, "flex flex-col gap-2"),
+	className: cn(className, "flex flex-col gap-2"),
 	children
 });
 
+//#endregion
+//#region src/utils/enums.ts
+let ACTION_ICON_STYLE_VARIANT = /* @__PURE__ */ function(ACTION_ICON_STYLE_VARIANT$1) {
+	ACTION_ICON_STYLE_VARIANT$1["DEFAULT"] = "default";
+	ACTION_ICON_STYLE_VARIANT$1["TRANSPARENT"] = "transparent";
+	ACTION_ICON_STYLE_VARIANT$1["SMALL"] = "small";
+	ACTION_ICON_STYLE_VARIANT$1["ROUND"] = "round";
+	return ACTION_ICON_STYLE_VARIANT$1;
+}({});
+let THEME_ICON_STYLE_VARIANT = /* @__PURE__ */ function(THEME_ICON_STYLE_VARIANT$1) {
+	THEME_ICON_STYLE_VARIANT$1["PINK_WITH_BACKGROUND"] = "pink-with-background";
+	return THEME_ICON_STYLE_VARIANT$1;
+}({});
+let COLOR = /* @__PURE__ */ function(COLOR$1) {
+	COLOR$1["PRIMARY"] = "primary";
+	COLOR$1["BLACK"] = "black";
+	COLOR$1["NAVY_BLUE"] = "navy-blue";
+	COLOR$1["LIGHT_BLUE"] = "light-blue";
+	COLOR$1["LIGHT_BLUE_DISABLED"] = "light-blue-disabled";
+	COLOR$1["GREEN"] = "green";
+	COLOR$1["GREEN_LIGHT"] = "green-light";
+	COLOR$1["PINK"] = "pink";
+	COLOR$1["PINK_LIGHT"] = "pink-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["TURQUOISE"] = "turquoise";
+	COLOR$1["RED"] = "red";
+	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 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 = {};
+/**
+* Format icon with default attributes. Icon attributes will
+* always supersede default attributes which in term will supersede
+* global default attributes.
+*/
+function formatIcon(icon, defaultFormatAttributes) {
+	if (!react.default.isValidElement(icon)) return icon;
+	return (0, react.cloneElement)(icon, {
+		...globalDefaultFormatAttributes,
+		...defaultFormatAttributes,
+		...icon.props,
+		...{ className: (0, clsx.default)(globalDefaultFormatAttributes.className, defaultFormatAttributes.className, icon.props.className) }
+	});
+}
+
 //#endregion
 //#region src/components/actionIcon/index.tsx
 const ActionIcon = (0, react.forwardRef)(({ title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className,...props }, ref) => {
 	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 === __utils_enums.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 === __utils_enums.ACTION_ICON_STYLE_VARIANT.TRANSPARENT,
-		"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] child:p-10 w-[37px] h-[37px] text-black rounded-full bg-primary hover:bg-turquoise-700 disabled:turquoise-50 disabled:text-gray-800": styleVariant === __utils_enums.ACTION_ICON_STYLE_VARIANT.ROUND,
-		"w-7 h-7 active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black hover:bg-gray-50 disabled:text-gray-500": styleVariant === __utils_enums.ACTION_ICON_STYLE_VARIANT.SMALL
+		"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,
+		"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] child:p-10 w-[37px] h-[37px] text-black rounded-full bg-primary hover:bg-turquoise-700 disabled:turquoise-50 disabled:text-gray-800": styleVariant === ACTION_ICON_STYLE_VARIANT.ROUND,
+		"w-7 h-7 active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black hover:bg-gray-50 disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.SMALL
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		title,
@@ -131,13 +205,13 @@ const ActionIcon = (0, react.forwardRef)(({ title, disabled = false, styleVarian
 		disabled,
 		"data-testid": testId,
 		"data-component": "ActionIcon",
-		className: (0, __utils_cn.cn)(variantClassNames, { "hover:bg-transparant cursor-not-allowed hover:border-gray-200": disabled }, className),
+		className: cn(variantClassNames, { "hover:bg-transparant cursor-not-allowed hover:border-gray-200": disabled }, className),
 		onClick,
 		ref,
 		"data-tooltip-id": title,
 		"data-tooltip-content": title,
 		...props,
-		children: icon ? (0, __utils_formatIcon.default)(icon, {
+		children: icon ? formatIcon(icon, {
 			stroke: strokeWidth,
 			size: iconSize
 		}) : props.children
@@ -178,10 +252,10 @@ const Alert = ({ show, message, type, plain = false, className }) => {
 	}, [show]);
 	if (!showAlert) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, __utils_cn.cn)(`flex w-full justify-between gap-3 rounded border border-solid p-5 md:items-center md:gap-12 ${plain ? "border-none py-4 text-sm font-medium" : ""}`, {
-			"border-warning bg-warning-light text-warning": type === __utils_enums.COLOR.WARNING,
-			"border-red-500 bg-red-50 text-red-500": type === __utils_enums.COLOR.ERROR,
-			"border-green bg-green-light text-green": type === __utils_enums.COLOR.SUCCESS
+		className: cn(`flex w-full justify-between gap-3 rounded border border-solid p-5 md:items-center md:gap-12 ${plain ? "border-none py-4 text-sm font-medium" : ""}`, {
+			"border-warning bg-warning-light text-warning": type === COLOR.WARNING,
+			"border-red-500 bg-red-50 text-red-500": type === COLOR.ERROR,
+			"border-green bg-green-light text-green": type === COLOR.SUCCESS
 		}, className),
 		"data-component": "Alert",
 		"data-testid": "alert",
@@ -538,7 +612,7 @@ const Avatar = ({ src, alt = "", size = 50, radius = 100, "data-testid": dataTes
 	"data-testid": dataTestId,
 	children: src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 		src,
-		className: (0, __utils_cn.cn)("aspect-square appearance-none object-cover", radiusFormatter[radius]),
+		className: cn("aspect-square appearance-none object-cover", radiusFormatter[radius]),
 		alt,
 		width: size,
 		height: size,
@@ -550,7 +624,7 @@ Avatar.displayName = "Avatar";
 //#endregion
 //#region src/components/avatarIndicator/index.tsx
 const AvatarIndicator = ({ indicatorCount, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: (0, __utils_cn.cn)("inline-flex h-5 min-w-5 flex-col items-center justify-center gap-2.5 rounded border-2 border-solid border-white bg-blue-950 px-1.5", className),
+	className: cn("inline-flex h-5 min-w-5 flex-col items-center justify-center gap-2.5 rounded border-2 border-solid border-white bg-blue-950 px-1.5", className),
 	"data-component": "AvatarIndicator",
 	"data-testid": "AvatarIndicator",
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -561,30 +635,30 @@ const AvatarIndicator = ({ indicatorCount, className }) => /* @__PURE__ */ (0, r
 
 //#endregion
 //#region src/components/badge/index.tsx
-const Badge = ({ styleVariant = __utils_enums.COLOR.ACCENT_BLUE, className, favorite, mobile = false, badgeBorder = false, fullWidth = false, leftSection, rightSection, children,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, mobile = false, badgeBorder = false, fullWidth = false, leftSection, rightSection, children,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 	"data-testid": "badge",
 	"data-component": "Badge",
 	className: (0, clsx.default)("inline-flex h-[1.375rem] max-w-full place-content-center items-center p-[10px] align-middle text-xs leading-[20px] font-medium tracking-wide text-wrap whitespace-normal normal-case", mobile ? "rounded-s" : "rounded-[2rem]", fullWidth && "w-full", badgeBorder && {
-		"border-accent-blue": styleVariant === __utils_enums.COLOR.ACCENT_BLUE,
-		"border-green-light": styleVariant === __utils_enums.COLOR.GREEN_LIGHT,
-		"border-red-500": styleVariant === __utils_enums.COLOR.RED,
-		"border-purple": styleVariant === __utils_enums.COLOR.PURPLE,
-		"border-warning": styleVariant === __utils_enums.COLOR.WARNING,
-		"border-black": styleVariant === __utils_enums.COLOR.BLACK,
-		"border-gray-800": styleVariant === __utils_enums.COLOR.GRAY,
-		"border-pink": styleVariant === __utils_enums.COLOR.PINK_LIGHT || styleVariant === __utils_enums.COLOR.PINK,
-		"border-gray-200 bg-white text-black": styleVariant === __utils_enums.COLOR.WHITE
+		"border-accent-blue": styleVariant === COLOR.ACCENT_BLUE,
+		"border-green-light": styleVariant === COLOR.GREEN_LIGHT,
+		"border-red-500": styleVariant === COLOR.RED,
+		"border-purple": styleVariant === COLOR.PURPLE,
+		"border-warning": styleVariant === COLOR.WARNING,
+		"border-black": styleVariant === COLOR.BLACK,
+		"border-gray-800": styleVariant === COLOR.GRAY,
+		"border-pink": styleVariant === COLOR.PINK_LIGHT || styleVariant === COLOR.PINK,
+		"border-gray-200 bg-white text-black": styleVariant === COLOR.WHITE
 	}, {
-		"bg-accent-blue-light text-accent-blue": styleVariant === __utils_enums.COLOR.ACCENT_BLUE,
-		"bg-green-light text-green": styleVariant === __utils_enums.COLOR.GREEN_LIGHT,
-		"bg-red-50 text-red-500": styleVariant === __utils_enums.COLOR.RED,
-		"bg-purple-light text-purple": styleVariant === __utils_enums.COLOR.PURPLE,
-		"bg-warning-light text-warning": styleVariant === __utils_enums.COLOR.WARNING,
-		"bg-gray-50 text-black": styleVariant === __utils_enums.COLOR.BLACK,
-		"bg-gray-50 text-gray-800": styleVariant === __utils_enums.COLOR.GRAY,
-		"bg-pink-light text-pink": styleVariant === __utils_enums.COLOR.PINK_LIGHT,
-		"bg-pink text-white": styleVariant === __utils_enums.COLOR.PINK,
-		"bg-white text-black": styleVariant === __utils_enums.COLOR.WHITE
+		"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,
+		"bg-purple-light text-purple": styleVariant === COLOR.PURPLE,
+		"bg-warning-light text-warning": styleVariant === COLOR.WARNING,
+		"bg-gray-50 text-black": styleVariant === COLOR.BLACK,
+		"bg-gray-50 text-gray-800": styleVariant === COLOR.GRAY,
+		"bg-pink-light text-pink": styleVariant === COLOR.PINK_LIGHT,
+		"bg-pink text-white": styleVariant === COLOR.PINK,
+		"bg-white text-black": styleVariant === COLOR.WHITE
 	}, className),
 	...props,
 	children: [
@@ -594,7 +668,7 @@ const Badge = ({ styleVariant = __utils_enums.COLOR.ACCENT_BLUE, className, favo
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"data-testid": "badge-content",
-			className: (0, __utils_cn.cn)("block h-5 overflow-hidden text-ellipsis whitespace-nowrap", { "flex items-center": favorite }),
+			className: cn("block h-5 overflow-hidden text-ellipsis whitespace-nowrap", { "flex items-center": favorite }),
 			children
 		}),
 		rightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -607,18 +681,18 @@ Badge.displayName = "Badge";
 
 //#endregion
 //#region src/components/bigBadge/index.tsx
-const BigBadge = ({ styleVariant = __utils_enums.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: (0, __utils_cn.cn)("grid h-9 max-w-full min-w-[140px] place-content-center rounded-full border border-solid px-6 py-1 text-sm font-medium whitespace-nowrap lowercase", {
-		"border-green text-green bg-white": styleVariant === __utils_enums.COLOR.GREEN,
-		"border-accent-blue text-accent-blue bg-white": styleVariant === __utils_enums.COLOR.ACCENT_BLUE,
-		"border-orange text-orange bg-white": styleVariant === __utils_enums.COLOR.ORANGE,
-		"group-hover:bg-green-light": styleVariant === __utils_enums.COLOR.GREEN,
-		"border-red-500 bg-white text-red-500": styleVariant === __utils_enums.COLOR.RED,
-		"group-hover:bg-red-50": styleVariant === __utils_enums.COLOR.RED,
-		"border-gray-200 bg-white text-black": styleVariant === __utils_enums.COLOR.WHITE,
-		"": styleVariant === __utils_enums.COLOR.WHITE
+	className: cn("grid h-9 max-w-full min-w-[140px] place-content-center rounded-full border border-solid px-6 py-1 text-sm font-medium whitespace-nowrap lowercase", {
+		"border-green text-green bg-white": styleVariant === COLOR.GREEN,
+		"border-accent-blue text-accent-blue bg-white": styleVariant === COLOR.ACCENT_BLUE,
+		"border-orange text-orange bg-white": styleVariant === COLOR.ORANGE,
+		"group-hover:bg-green-light": styleVariant === COLOR.GREEN,
+		"border-red-500 bg-white text-red-500": styleVariant === COLOR.RED,
+		"group-hover:bg-red-50": styleVariant === COLOR.RED,
+		"border-gray-200 bg-white text-black": styleVariant === COLOR.WHITE,
+		"": styleVariant === COLOR.WHITE
 	}, className),
 	...props,
 	children
@@ -655,7 +729,7 @@ const buttonVariants = {
 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 ? (0, __utils_formatIcon.default)(icon, { className: (0, clsx.default)({
+	const formattedIcon = icon ? formatIcon(icon, { className: (0, clsx.default)({
 		"-mr-2": iconRight,
 		"-ml-2": !iconRight
 	}, icon === loadingIcon ? "text-current" : "size-[1.125rem]") }) : null;
@@ -666,7 +740,7 @@ function Button({ type = "button", variant = "primary", ariaLabel, block = false
 		type,
 		"aria-label": ariaLabel,
 		"data-testid": dataTestId,
-		className: (0, __utils_cn.cn)(buttonVariants[variant], className, block && "w-full text-sm"),
+		className: cn(buttonVariants[variant], className, block && "w-full text-sm"),
 		onClick: handleOnClick,
 		...props,
 		children: [
@@ -682,12 +756,12 @@ Button.displayName = "Button";
 //#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", {
 	"data-testid": "checkbox-wrapper",
-	className: (0, __utils_cn.cn)("relative grid gap-2", className),
+	className: cn("relative grid gap-2", className),
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-		className: (0, __utils_cn.cn)("flex cursor-pointer items-center gap-3", labelClassName),
+		className: cn("flex cursor-pointer items-center gap-3", labelClassName),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-testid": `checkbox-container-${size}`,
-			className: (0, __utils_cn.cn)("relative grid shrink-0 place-content-center", size === "sm" ? "size-4" : "size-5"),
+			className: cn("relative grid shrink-0 place-content-center", size === "sm" ? "size-4" : "size-5"),
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					className: "checked:border-light-blue checked:bg-light-blue [&:not([disabled])]:checked:border-light-blue [&:not([disabled])]:checked:bg-light-blue peer absolute inset-0 shrink-0 appearance-none rounded-xs border border-gray-800 bg-white focus:outline-hidden disabled:border-gray-300 disabled:bg-gray-100 disabled:[&[checked]]:border-gray-100",
@@ -699,7 +773,7 @@ const CheckboxComponent = ({ size = "md", className, error, mediumBoldText, labe
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 					"data-testid": "checkbox-checkmark",
-					className: (0, __utils_cn.cn)("pointer-events-none absolute top-1/2 left-1/2 hidden -translate-x-1/2 -translate-y-1/2 stroke-white outline-hidden peer-checked:block", { "stroke-gray-300": disabled }, size === "sm" ? "size-3" : "size-4"),
+					className: cn("pointer-events-none absolute top-1/2 left-1/2 hidden -translate-x-1/2 -translate-y-1/2 stroke-white outline-hidden peer-checked:block", { "stroke-gray-300": disabled }, size === "sm" ? "size-3" : "size-4"),
 					xmlns: "http://www.w3.org/2000/svg",
 					viewBox: "0 0 24 24",
 					fill: "none",
@@ -711,7 +785,7 @@ const CheckboxComponent = ({ size = "md", className, error, mediumBoldText, labe
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 					"data-testid": "checkbox-indeterminate",
-					className: (0, __utils_cn.cn)("pointer-events-none absolute left-1/2 hidden -translate-x-1/2 -translate-y-1/2 stroke-black outline-hidden", { "stroke-gray-300": disabled }, size === "sm" ? "top-[60%] size-3" : "top-1/2 size-4", { block: indeterminate }),
+					className: cn("pointer-events-none absolute left-1/2 hidden -translate-x-1/2 -translate-y-1/2 stroke-black outline-hidden", { "stroke-gray-300": disabled }, size === "sm" ? "top-[60%] size-3" : "top-1/2 size-4", { block: indeterminate }),
 					xmlns: "http://www.w3.org/2000/svg",
 					viewBox: "0 0 24 24",
 					fill: "none",
@@ -729,7 +803,7 @@ const CheckboxComponent = ({ size = "md", className, error, mediumBoldText, labe
 			]
 		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"data-testid": "checkbox-label",
-			className: (0, __utils_cn.cn)("grow text-sm font-normal", labelClassName, { "font-medium": mediumBoldText }),
+			className: cn("grow text-sm font-normal", labelClassName, { "font-medium": mediumBoldText }),
 			children: label
 		})]
 	}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
@@ -780,7 +854,7 @@ const Popover = (0, react.forwardRef)(({ content, children, hoverEnabled = false
 		togglePopover: () => setIsOpen((prev) => !prev)
 	}));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, __utils_cn.cn)("", { "[&>div]:border-navyBlue": isOpen }, className),
+		className: cn("", { "[&>div]:border-navyBlue": isOpen }, className),
 		children: [(0, react.isValidElement)(children) && (0, react.cloneElement)(children, getReferenceProps({
 			ref: refs.setReference,
 			...children.props,
@@ -1029,7 +1103,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 		placement: "bottom-start",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-component": "datePickerInput",
-			className: (0, __utils_cn.cn)("relative", className),
+			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",
@@ -1039,7 +1113,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 					variant: "outline",
 					type: "button",
 					disabled,
-					className: (0, __utils_cn.cn)(
+					className: cn(
 						"flex h-10 w-full items-center justify-start bg-gray-50 px-3 text-black",
 						/* istanbul ignore next - cosmetic class toggle */
 						{ "border-red-500 text-red-500": error }
@@ -1118,7 +1192,7 @@ const FilterButton = ({ onClick, hasFilters, reset, filtersText, resetText }) =>
 //#endregion
 //#region src/components/filters/FilterItem.tsx
 const FilterItem = ({ title, isActive = false, onClick }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-	className: (0, __utils_cn.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 text-sm leading-6 font-normal transition-all duration-300 ease-in-out hover:bg-gray-50"),
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		type: "checkbox",
 		className: "hidden",
@@ -1162,7 +1236,7 @@ const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, fi
 			ref: content,
 			"data-testid": "filters-items-container",
 			"data-visible": showFilters,
-			className: (0, __utils_cn.cn)("flex flex-wrap justify-end gap-2 overflow-hidden opacity-0 ease-in-out [transition:max-height_0.4s,opacity_0.3s]", showFilters && "opacity-100"),
+			className: cn("flex flex-wrap justify-end gap-2 overflow-hidden opacity-0 ease-in-out [transition:max-height_0.4s,opacity_0.3s]", showFilters && "opacity-100"),
 			style: { maxHeight: showFilters ? `${content?.current?.scrollHeight}px` : "0px" },
 			children: filters.map((filter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterItem, {
 				title: filter,
@@ -1368,7 +1442,7 @@ const GoogleAppButtonIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx
 //#endregion
 //#region src/components/hamburgerMenuButton/index.tsx
 const HamburgerMenuButton = (0, react.forwardRef)(({ menuState, setMenuState }, ref) => {
-	const defaultClasses = (0, __utils_cn.cn)("absolute h-[2px] bg-white duration-150");
+	const defaultClasses = cn("absolute h-[2px] bg-white duration-150");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(UnstyledButton, {
 		onClick: setMenuState,
 		className: "relative h-4 w-6",
@@ -1379,15 +1453,15 @@ const HamburgerMenuButton = (0, react.forwardRef)(({ menuState, setMenuState },
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				"data-testid": "hamburger-line-top",
-				className: (0, __utils_cn.cn)(defaultClasses, "top-0 left-0 w-6", { "translation top-1/2 translate-y-[-50%] rotate-45 transform duration-150 ease-in": menuState })
+				className: cn(defaultClasses, "top-0 left-0 w-6", { "translation top-1/2 translate-y-[-50%] rotate-45 transform duration-150 ease-in": menuState })
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				"data-testid": "hamburger-line-middle",
-				className: (0, __utils_cn.cn)(defaultClasses, "top-1/2 right-0 w-4 translate-y-[-50%]", { "translation opacity-0 ease-in": menuState })
+				className: cn(defaultClasses, "top-1/2 right-0 w-4 translate-y-[-50%]", { "translation opacity-0 ease-in": menuState })
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				"data-testid": "hamburger-line-bottom",
-				className: (0, __utils_cn.cn)(defaultClasses, "bottom-0 left-0 w-6", { "translation top-1/2 translate-y-[-50%] -rotate-45 transform duration-150 ease-in": menuState })
+				className: cn(defaultClasses, "bottom-0 left-0 w-6", { "translation top-1/2 translate-y-[-50%] -rotate-45 transform duration-150 ease-in": menuState })
 			})
 		]
 	});
@@ -1407,7 +1481,7 @@ HR.displayName = "HR";
 const Island = ({ children, className, noShadow = false, noPadding = false,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-testid": "island",
 	"data-component": "island",
-	className: (0, __utils_cn.cn)("relative bg-white px-5 py-5 md:px-10 md:py-9", {
+	className: cn("relative bg-white px-5 py-5 md:px-10 md:py-9", {
 		"shadow-[0_-0.5rem_2rem_rgba(38,41,92,0.04)]": !noShadow,
 		"drop-shadow-none": noShadow,
 		"md:px-0 md:py-0": noPadding
@@ -1422,7 +1496,7 @@ Island.displayName = "Island";
 const Label = ({ children, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 	"data-component": "label",
 	"data-testid": "label",
-	className: (0, __utils_cn.cn)("flex items-center gap-1 text-xs font-medium text-black", className),
+	className: cn("flex items-center gap-1 text-xs font-medium text-black", className),
 	...props,
 	children
 });
@@ -1562,7 +1636,7 @@ const Modal = ({ title, children, withCloseButton = true, opened, additionalClas
 	]);
 	if (!isOpen) return null;
 	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, __utils_cn.cn)("fixed top-0 left-0 z-999 grid h-full w-full items-center overflow-y-scroll overscroll-contain px-4 py-10 md:py-20"),
+		className: cn("fixed top-0 left-0 z-999 grid h-full w-full items-center overflow-y-scroll overscroll-contain px-4 py-10 md:py-20"),
 		"data-testid": dataTestId,
 		"data-component": "modal",
 		ref: refContainer,
@@ -1572,7 +1646,7 @@ const Modal = ({ title, children, withCloseButton = true, opened, additionalClas
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "relative flex w-full justify-center",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: (0, __utils_cn.cn)("relative h-full w-full max-w-[1000px] bg-white px-5 py-8 shadow-xl md:px-10 md:py-10", additionalClassNames, size),
+				className: cn("relative h-full w-full max-w-[1000px] bg-white px-5 py-8 shadow-xl md:px-10 md:py-10", additionalClassNames, size),
 				ref,
 				role: "dialog",
 				tabIndex: -1,
@@ -1757,7 +1831,7 @@ const PhoneNumberInput = ({ setValue, setPhoneNumberExt, phoneNumberExt, isValid
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `${className}`,
 		children: [
-			typeof label === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__components_label.Label, {
+			typeof label === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
 				htmlFor: "phoneNumber",
 				className: "mb-2",
 				children: label
@@ -1803,7 +1877,7 @@ const ProgressBar = ({ value, maxValue = 100, className }) => {
 		else setWidth(value / maxValue * 100);
 	}, [value, maxValue]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, __utils_cn.cn)("h-2 rounded-lg bg-gray-100", className),
+		className: cn("h-2 rounded-lg bg-gray-100", className),
 		role: "progressbar",
 		"aria-valuenow": value,
 		"aria-valuemin": 0,
@@ -1948,12 +2022,12 @@ const Rating = ({ rating, ratings, size = "normal", setReview, className, setRev
 	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: (0, __utils_cn.cn)(className$1, "text-yellow") });
-		if (index - roundedRating === .5) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarHalfFilled, { className: (0, __utils_cn.cn)(className$1, "text-yellow") });
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconStarEmpty, { className: (0, __utils_cn.cn)(className$1, "text-yellow") });
+		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") });
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: (0, __utils_cn.cn)("flex flex-col", className),
+		className: cn("flex flex-col", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				"data-testid": "rating-container",
@@ -1961,7 +2035,7 @@ const Rating = ({ rating, ratings, size = "normal", setReview, className, setRev
 				className: "flex flex-row gap-[2px]",
 				children: [...ratings.map(({ value }) => value).sort((a, b) => a - b)].map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					"data-testid": `star-item-${value}`,
-					className: (0, __utils_cn.cn)("relative", setReview && "cursor-pointer"),
+					className: cn("relative", setReview && "cursor-pointer"),
 					onClick: () => handleStarClick(value),
 					onMouseEnter: () => handleHover(value),
 					onMouseLeave: () => handleHover(Number(reviewIsSet)),
@@ -2256,7 +2330,7 @@ const Select = (0, react.forwardRef)(({ options, placeholder, defaultValue, labe
 		className: (0, clsx.default)("m-0 grid gap-2 p-0", width ? width : fullWidth && "w-full", className),
 		children: [
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
-				className: (0, __utils_cn.cn)("leading-4", labelClassNames),
+				className: cn("leading-4", labelClassNames),
 				children: label
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.default, {
@@ -2330,7 +2404,7 @@ const SettingsCard = ({ icon, title, link, ManageText, LinkComponent }) => /* @_
 const Skeleton = ({ className, "data-testid": dataTestId }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 	"data-component": "genericSkeleton",
 	"data-testid": dataTestId || "skeleton",
-	className: (0, __utils_cn.cn)("inline-block rounded-md", "animate-pulse bg-gray-100/50", className)
+	className: cn("inline-block rounded-md", "animate-pulse bg-gray-100/50", className)
 });
 
 //#endregion
@@ -2408,7 +2482,7 @@ const Stepper = ({ steps, setStep = () => {}, variant = "default", clickableStep
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							"data-testid": `stepper-step-circle-${index}`,
 							onClick: () => isClickable && setStep(index),
-							className: (0, __utils_cn.cn)("relative z-10 flex size-8 items-center justify-center rounded-full border border-gray-500 bg-white text-gray-500", {
+							className: cn("relative z-10 flex size-8 items-center justify-center rounded-full border border-gray-500 bg-white text-gray-500", {
 								"size-5": variant === "small" || isMobile,
 								"cursor-pointer": isClickable,
 								"cursor-not-allowed": clickableSteps && !clickableSteps.includes(index),
@@ -2456,7 +2530,7 @@ const StickyMobileButtonWrapper = ({ children }) => /* @__PURE__ */ (0, react_js
 const Table = ({ children, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-testid": "table",
 	"data-component": "table",
-	className: (0, __utils_cn.cn)("table w-full table-fixed border-collapse overflow-auto", className),
+	className: cn("table w-full table-fixed border-collapse overflow-auto", className),
 	...props,
 	children
 });
@@ -2466,7 +2540,7 @@ const Table = ({ children, className,...props }) => /* @__PURE__ */ (0, react_js
 const TableCell = ({ children, smallPadding, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-testid": "tableCell",
 	"data-component": "tableCell",
-	className: `${(0, __utils_cn.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 text-sm font-normal first:pl-2 last:pr-2 md:py-0 md:xl:first:pl-10 md:xl:last:pr-10", { "md:xl:first:pl-5 md:xl:last:pr-5": smallPadding }, className)}`,
 	children
 });
 
@@ -2484,7 +2558,7 @@ const TableHeader = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)
 const TableHeaderItem = ({ children, smallPadding, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-testid": "tableHeaderItem",
 	"data-component": "tableHeaderItem",
-	className: (0, __utils_cn.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 text-xs font-medium first:pl-10 last:pr-10 xl:table-cell", { "xl:first:pl-5 xl:last:pr-5": smallPadding }, className),
 	...props,
 	children
 });
@@ -2505,7 +2579,7 @@ function TableRow({ children, className, header,...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-testid": "tableRow",
 		"data-component": "tableRow",
-		className: `${(0, __utils_cn.cn)("table-row border-x-0 border-y-0 border-t border-solid border-gray-200 xl:border-t xl:border-solid xl:border-gray-200", "hover:bg-ultra-light-blue", header && "font-medium", className)}`,
+		className: `${cn("table-row border-x-0 border-y-0 border-t border-solid border-gray-200 xl:border-t xl:border-solid xl:border-gray-200", "hover:bg-ultra-light-blue", header && "font-medium", className)}`,
 		...props,
 		children
 	});
@@ -2617,7 +2691,7 @@ const Textarea = (0, react.forwardRef)(({ className, label, error, rows = 8,...p
 			"data-component": "TextArea",
 			rows,
 			ref,
-			className: (0, __utils_cn.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 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),
 			...props
 		}),
 		error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
@@ -2630,16 +2704,16 @@ const Textarea = (0, react.forwardRef)(({ className, label, error, rows = 8,...p
 //#endregion
 //#region src/components/themeIcon/index.tsx
 function ThemeIcon({ styleVariant = "black", className, icon, adjustedSize, title,...props }) {
-	const classNames = (0, __utils_cn.cn)("bg-transparent h-9 w-9 rounded-[5px] grid place-content-center", {
-		"text-black": styleVariant === __utils_enums.COLOR.BLACK,
-		"text-gray-500": styleVariant === __utils_enums.COLOR.GRAY,
-		"text-pink": styleVariant === __utils_enums.COLOR.PINK,
-		"bg-gray-50 text-pink": styleVariant === __utils_enums.THEME_ICON_STYLE_VARIANT.PINK_WITH_BACKGROUND,
-		"text-primary": styleVariant === __utils_enums.COLOR.TURQUOISE,
-		"text-accent-blue": styleVariant === __utils_enums.COLOR.ACCENT_BLUE,
-		"text-check": styleVariant === __utils_enums.COLOR.CHECK,
-		"text-warning": styleVariant === __utils_enums.COLOR.WARNING,
-		"text-red-500": styleVariant === __utils_enums.COLOR.ERROR
+	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,
+		"text-pink": styleVariant === COLOR.PINK,
+		"bg-gray-50 text-pink": styleVariant === THEME_ICON_STYLE_VARIANT.PINK_WITH_BACKGROUND,
+		"text-primary": styleVariant === COLOR.TURQUOISE,
+		"text-accent-blue": styleVariant === COLOR.ACCENT_BLUE,
+		"text-check": styleVariant === COLOR.CHECK,
+		"text-warning": styleVariant === COLOR.WARNING,
+		"text-red-500": styleVariant === COLOR.ERROR
 	}, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-testid": "theme-icon",
@@ -2648,7 +2722,7 @@ function ThemeIcon({ styleVariant = "black", className, icon, adjustedSize, titl
 		"data-component": "ThemeIcon",
 		className: classNames,
 		...props,
-		children: (0, __utils_formatIcon.default)(icon, {
+		children: formatIcon(icon, {
 			strokeWidth: "1",
 			size: adjustedSize ? adjustedSize : 20
 		})
@@ -2826,7 +2900,7 @@ const TruncatedText = ({ text, limit = 20 }) => {
 //#endregion
 //#region src/components/unorderedList/index.tsx
 const UnorderedList = ({ children, className, actionItem,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
-	className: (0, __utils_cn.cn)("m-0 last:border-none", className),
+	className: cn("m-0 last:border-none", className),
 	"data-component": "unorderedList",
 	"data-testid": "unorderedList",
 	...props,
@@ -2841,7 +2915,7 @@ const UnorderedList = ({ children, className, actionItem,...props }) => /* @__PU
 const UnorderedListItem = ({ children, actionItem, className, header = false,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 	...props,
 	"data-component": "unorderedListItem",
-	className: (0, __utils_cn.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", { "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 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", { "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
@@ -2951,20 +3025,20 @@ const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classN
 		};
 	}, [handleKeyDown]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, __utils_cn.cn)("relative", classNames?.root),
+		className: cn("relative", classNames?.root),
 		"data-component": "ProfileMenu",
 		"data-testid": "profile-menu",
 		ref: menuRef,
 		"data-context-menu-id": metaTitle,
 		"data-context-menu-content": metaTitle,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__components_unstyledButton.UnstyledButton, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(UnstyledButton, {
 			ref: buttonRef,
 			id: buttonId,
 			"aria-label": "Toggle profile menu",
 			"aria-expanded": isOpen,
 			"aria-haspopup": "menu",
 			"aria-controls": isOpen ? menuId : undefined,
-			className: (0, __utils_cn.cn)(__components_button_buttonVariants.buttonVariants["secondary"], defaultStyling, classNames?.button),
+			className: cn(buttonVariants["secondary"], defaultStyling, classNames?.button),
 			disabled,
 			onClick: handleToggle,
 			children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -2975,17 +3049,17 @@ const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classN
 			id: menuId,
 			role: "menu",
 			"aria-labelledby": buttonId,
-			className: (0, __utils_cn.cn)("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", classNames?.menu),
+			className: cn("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", classNames?.menu),
 			children: content.map(
 				/* istanbul ignore next - render callback not meaningful for unit coverage */
-				(c, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__components_unstyledButton.UnstyledButton, {
+				(c, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnstyledButton, {
 					ref: (el) => {
 						menuItemRefs.current[index] = el;
 					},
 					role: "menuitem",
 					tabIndex: -1,
 					onClick: () => handleItemClick(c.onClick),
-					className: (0, __utils_cn.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 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"),
 					"aria-label": c.title,
 					disabled: c.disabled,
 					children: c.title
@@ -2995,6 +3069,10 @@ 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, {
@@ -3047,10 +3125,10 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 	(0, react.useImperativeHandle)(ref, () => ({ resetContent(newContent) {
 		editor?.commands?.setContent(newContent);
 	} }), [editor]);
-	if ((0, __utils_ssr.isSSR)()) return null;
+	if (isSSR()) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-testid": `${id}-container`,
-		className: (0, __utils_cn.cn)("rounded-md border border-gray-200", className, error && "border-red-600"),
+		className: cn("rounded-md border border-gray-200", className, error && "border-red-600"),
 		children: [editor && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-wrap gap-2 border-b border-gray-200 p-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3106,7 +3184,7 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 			"data-component": "wysiwygEditor",
 			"data-testid": id,
 			id,
-			className: (0, __utils_cn.cn)("overflow-hidden rounded-[inherit]")
+			className: cn("overflow-hidden rounded-[inherit]")
 		})]
 	}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "mt-1 text-xs font-normal text-red-600",