@youngonesworks/ui 0.1.79 → 0.1.81

package/dist/index.js

@@ -4,33 +4,33 @@
 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", {
@@ -94,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) => {
@@ -1735,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
@@ -2935,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 : undefined,
-			className: cn(buttonVariants$1["secondary"], defaultStyling, classNames?.button),
+			className: cn(buttonVariants["secondary"], defaultStyling, classNames?.button),
 			disabled,
 			onClick: handleToggle,
 			children: [title && /* @__PURE__ */ jsx("span", {
@@ -2956,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;
 					},
@@ -2973,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, {