@youngonesworks/ui 0.1.78 → 0.1.81

package/dist/index.js

@@ -1,30 +1,37 @@
 'use client';
 
 
+import * as React$1 from "react";
 import React, { Fragment, cloneElement, createRef, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { IconAlertCircle, IconArrowNarrowLeft, IconBold, IconCalendar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCircleCheck, IconClearFormatting, IconEyeCheck, IconEyeOff, IconFilter, IconHeart, IconHeartFilled, IconItalic, IconList, IconListNumbers, IconMessageDots, IconSelector, IconUnderline, IconX } from "@tabler/icons-react";
-import { cn } from "@utils/cn";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip as Tooltip$1 } from "react-tooltip";
-import { ACTION_ICON_STYLE_VARIANT, COLOR, THEME_ICON_STYLE_VARIANT } from "@utils/enums";
-import formatIcon from "@utils/formatIcon";
-import clsx from "clsx";
 import { DayPicker, useDayPicker } from "react-day-picker";
 import { addMonths, format, setMonth } from "date-fns";
 import { enGB, fr, nl, nlBE } from "date-fns/locale";
 import { FloatingArrow, arrow, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
 import { createPortal } from "react-dom";
 import PhoneInput from "react-phone-input-2";
-import { Label as Label$1 } from "@components/label";
 import ReactSelect, { components } from "react-select";
-import { buttonVariants as buttonVariants$1 } from "@components/button/buttonVariants";
-import { UnstyledButton as UnstyledButton$1 } from "@components/unstyledButton";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { Underline } from "@tiptap/extension-underline";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { StarterKit } from "@tiptap/starter-kit";
-import { isSSR } from "@utils/ssr";
 
+//#region src/jsx-runtime-shim.ts
+const jsx$1 = React$1.createElement;
+const jsxs$1 = React$1.createElement;
+const Fragment$2 = React$1.Fragment;
+
+//#endregion
+//#region src/utils/cn.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
 //#region src/components/unstyledButton/index.tsx
 const UnstyledButton = forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("button", {
 	type: "button",
@@ -87,6 +94,80 @@ const AccordionWrapper = ({ children, className }) => /* @__PURE__ */ jsx("div",
 	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.isValidElement(icon)) return icon;
+	return cloneElement(icon, {
+		...globalDefaultFormatAttributes,
+		...defaultFormatAttributes,
+		...icon.props,
+		...{ className: clsx(globalDefaultFormatAttributes.className, defaultFormatAttributes.className, icon.props.className) }
+	});
+}
+
 //#endregion
 //#region src/components/actionIcon/index.tsx
 const ActionIcon = forwardRef(({ title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className,...props }, ref) => {
@@ -430,9 +511,9 @@ const TextInput = React.forwardRef(({ rightSection, leftSection, className, erro
 						step,
 						maxLength,
 						className: clsx(`${loadingState ? "cursor-not-allowed" : ""}`, `${disabled ? "text-gray-500" : "text-gray-900"} selection:bg-turquoise-200 focus:border-turquoise-500 focus:ring-turquoise-500 active:border-turquoise-500 active:ring-turquoise-500 h-10 w-full rounded-[4px] border border-gray-200 bg-gray-50 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 || void 0,
-						"data-lpignore": enablePasswordManagerAutofill ? void 0 : "true",
-						"data-1p-ignore": enablePasswordManagerAutofill ? void 0 : "true",
+						"aria-busy": loadingState || undefined,
+						"data-lpignore": enablePasswordManagerAutofill ? undefined : "true",
+						"data-1p-ignore": enablePasswordManagerAutofill ? undefined : "true",
 						ref,
 						...props,
 						type: password ? showPassword ? "text" : "password" : "text"
@@ -790,7 +871,7 @@ const Popover = forwardRef(({ content, children, hoverEnabled = false, passedOpe
 //#region src/components/datePickerInput/index.tsx
 const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil, className, error, onChange, placeholder, label, disabled, minimalDropdownYears = 4 }) => {
 	const [selected, setSelected] = useState(value);
-	const today = /* @__PURE__ */ new Date();
+	const today = new Date();
 	const [newMonth, setNewMonth] = useState(selected || today);
 	const [dropdownOpened, setDropdownOpened] = useState({
 		month: false,
@@ -871,7 +952,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 			captionLayout: "dropdown",
 			onMonthChange: (newMonth$1) => setNewMonth(newMonth$1),
 			showOutsideDays: true,
-			disabled: disabledFrom ? { before: disabledFrom } : disabledUntil ? { after: disabledUntil } : void 0,
+			disabled: disabledFrom ? { before: disabledFrom } : disabledUntil ? { after: disabledUntil } : undefined,
 			className,
 			classNames: {
 				month_grid: "mt-3 max-w-[400px] border-t border-gray-100",
@@ -909,7 +990,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 				Dropdown: (props) => {
 					const { goToMonth, months } = useDayPicker();
 					const { className: dropdownClassName } = props;
-					const today$1 = /* @__PURE__ */ new Date();
+					const today$1 = 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();
@@ -957,8 +1038,8 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 							children: todayText
 						})] });
 					} else if (dropdownClassName === "rdp-years_dropdown") {
-						const earliestYear = (/* @__PURE__ */ new Date()).getFullYear() - minimalDropdownYears;
-						const latestYear = (/* @__PURE__ */ new Date()).getFullYear() + 1;
+						const earliestYear = new Date().getFullYear() - minimalDropdownYears;
+						const latestYear = 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();
@@ -977,7 +1058,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 									className: "shadow-dropdown absolute z-70 rounded-md border border-gray-50 bg-white max-h-64 overflow-y-auto",
 									children: years.map((year) => /* @__PURE__ */ jsx("div", {
 										onClick: () => {
-											const newDate = months?.[0].date || /* @__PURE__ */ new Date();
+											const newDate = months?.[0].date || new Date();
 											newDate.setFullYear(year);
 											goToMonth(newDate);
 											setDropdownOpened({
@@ -1022,11 +1103,11 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
 							className: "text-sm font-normal text-nowrap text-black",
 							children: selected ? selected.toLocaleDateString() : placeholder
 						}),
-						selected !== void 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", {
+						selected !== undefined && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", {
 							className: "cursor-pointer text-sm font-normal text-gray-800",
 							onClick: () => {
-								setSelected(void 0);
-								onChange?.(void 0);
+								setSelected(undefined);
+								onChange?.(undefined);
 							},
 							children: /* @__PURE__ */ jsx(IconX, { size: 15 })
 						}) })
@@ -1693,6 +1774,10 @@ const PasswordInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(TextI
 }));
 PasswordInput.displayName = "PasswordInput";
 
+//#endregion
+//#region node_modules/react-phone-input-2/lib/style.css
+var style_default = {};
+
 //#endregion
 //#region src/components/phoneNumberInput/index.tsx
 const PhoneNumberInput = ({ setValue, setPhoneNumberExt, phoneNumberExt, isValid = true, phoneNumberError, phoneNumberExtensionError, phoneNumberField, phoneNumberExtField, className, label, disabled }) => {
@@ -1708,11 +1793,13 @@ const PhoneNumberInput = ({ setValue, setPhoneNumberExt, phoneNumberExt, isValid
 			shouldDirty: true,
 			shouldValidate: true
 		});
-		if (setPhoneNumberExt) setPhoneNumberExt({
-			number: numberWithoutDialCode,
-			ext: dialCode,
-			countryCode: country.countryCode || ""
-		});
+		if (setPhoneNumberExt) {
+			setPhoneNumberExt({
+				number: numberWithoutDialCode,
+				ext: dialCode,
+				countryCode: country.countryCode || ""
+			});
+		}
 	}, [
 		setValue,
 		phoneNumberField,
@@ -1722,7 +1809,7 @@ const PhoneNumberInput = ({ setValue, setPhoneNumberExt, phoneNumberExt, isValid
 	return /* @__PURE__ */ jsxs("div", {
 		className: `${className}`,
 		children: [
-			typeof label === "string" ? /* @__PURE__ */ jsx(Label$1, {
+			typeof label === "string" ? /* @__PURE__ */ jsx(Label, {
 				htmlFor: "phoneNumber",
 				className: "mb-2",
 				children: label
@@ -1793,7 +1880,7 @@ const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, cl
 			id,
 			name,
 			value,
-			onChange: props.disabled ? void 0 : onChange,
+			onChange: props.disabled ? undefined : onChange,
 			checked,
 			"data-testid": dataTestId,
 			className: `${clsx(className, "ease checked:border-navyBlue checked:bg-navy-blue relative m-0 flex size-5 cursor-pointer appearance-none items-center justify-center rounded-full border border-gray-400 bg-white transition-colors duration-100 focus:ring-0 focus:outline-hidden focus-visible:ring-0", { "cursor-not-allowed opacity-50": props.disabled })}`,
@@ -2561,7 +2648,7 @@ const TabContent = forwardRef(({ tab, setActiveTab, activeTab }, ref) => /* @__P
 	setActiveTab,
 	activeTab: activeTab === tab.value,
 	tabContent: tab.name,
-	rightSection: tab?.rightSection || void 0,
+	rightSection: tab?.rightSection || undefined,
 	clickFnc: () => {
 		tab.clickFnc(tab.value);
 		setActiveTab(tab.value);
@@ -2827,23 +2914,26 @@ 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) => {
@@ -2919,14 +3009,14 @@ const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classN
 		ref: menuRef,
 		"data-context-menu-id": metaTitle,
 		"data-context-menu-content": metaTitle,
-		children: [/* @__PURE__ */ jsxs(UnstyledButton$1, {
+		children: [/* @__PURE__ */ jsxs(UnstyledButton, {
 			ref: buttonRef,
 			id: buttonId,
 			"aria-label": "Toggle profile menu",
 			"aria-expanded": isOpen,
 			"aria-haspopup": "menu",
-			"aria-controls": isOpen ? menuId : void 0,
-			className: cn(buttonVariants$1["secondary"], defaultStyling, classNames?.button),
+			"aria-controls": isOpen ? menuId : undefined,
+			className: cn(buttonVariants["secondary"], defaultStyling, classNames?.button),
 			disabled,
 			onClick: handleToggle,
 			children: [title && /* @__PURE__ */ jsx("span", {
@@ -2940,7 +3030,7 @@ const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classN
 			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__ */ jsx(UnstyledButton$1, {
+				(c, index) => /* @__PURE__ */ jsx(UnstyledButton, {
 					ref: (el) => {
 						menuItemRefs.current[index] = el;
 					},
@@ -2957,6 +3047,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__ */ jsx(IconBold, {