@youngonesworks/ui 1.0.6 → 1.0.8

package/dist/index.js

@@ -44,12 +44,12 @@ const AccordionItem = ({ controlContent, panelContent, style = "light", border =
 	}, [active]);
 	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
 		"data-testid": "accordion-item",
-		className: cn("rounded-md hover:bg-gray-50", {
-			"bg-light-blue hover:bg-light-blue/50": style === "dark",
+		className: cn("rounded-md hover:bg-ultra-light-blue-gray", {
+			"bg-light-blue hover:bg-ultra-light-blue-gray": style === "dark",
 			"rounded-none border-b border-gray-200": border,
 			"bg-ultra-light-blue border border-gray-200 hover:bg-transparent": style === "onboarding",
 			"bg-white": style === "onboarding" && isActive,
-			"hover:bg-ultra-light-blue cursor-not-allowed opacity-50": disabled
+			"hover:bg-ultra-light-blue-gray cursor-not-allowed opacity-50": disabled
 		}, className),
 		children: [/* @__PURE__ */ jsxs(UnstyledButton, {
 			className: cn("relative flex w-full flex-row items-center justify-between gap-2 px-4 py-3", { "flex-row-reverse": chevronPosition === "right" }),
@@ -256,7 +256,7 @@ const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", ic
 		"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
+		"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-ultra-light-blue-gray disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.SMALL
 	});
 	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Tooltip, {
 		size: "sm",
@@ -722,19 +722,20 @@ const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, children
 			"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-purple-light text-black border border-purple": styleVariant === COLOR.PURPLE,
 			"bg-warning-light text-warning": styleVariant === COLOR.WARNING,
 			"bg-gray-50 text-black": styleVariant === COLOR.DARK_GRAY,
 			"bg-black text-white": styleVariant === COLOR.BLACK,
 			"bg-gray-50 text-gray-800": styleVariant === COLOR.GRAY,
 			"bg-secondary-light text-secondary": styleVariant === COLOR.SECONDARY_LIGHT,
 			"bg-secondary text-white": styleVariant === COLOR.SECONDARY,
-			"bg-white text-black": styleVariant === COLOR.WHITE
+			"bg-white text-black": styleVariant === COLOR.WHITE,
+			"bg-turquoise-50 text-black border border-primary": styleVariant === COLOR.PRIMARY
 		}, className),
 		...props,
 		children: /* @__PURE__ */ jsx("span", {
 			"data-testid": "badge-content",
-			className: cn("block h-5 overflow-hidden text-ellipsis whitespace-nowrap text-inherit", { "flex items-center": favorite }),
+			className: cn("block h-[22px] overflow-hidden text-ellipsis whitespace-nowrap text-inherit", { "flex items-center": favorite }),
 			children
 		})
 	});
@@ -776,7 +777,7 @@ const buttonVariants = {
 	primary: clsx(defaultButtonStyling, "border-transparent bg-primary text-black hover:bg-turquoise-700 hover:fill-white disabled:bg-turquoise-100 disabled:text-gray-800 disabled:hover:bg-turquoise-100"),
 	secondary: clsx(defaultButtonStyling, "border-solid border-gray-200 bg-white text-black hover:border-gray-800 hover:bg-gray-50 hover:fill-white disabled:text-gray-800 disabled:hover:border-gray-200 disabled:hover:bg-white"),
 	danger: clsx(defaultButtonStyling, "border-transparent bg-red-500 text-white hover:bg-red-700 disabled:bg-red-100 disabled:hover:bg-red-100"),
-	link: clsx(defaultButtonStyling, "border-transparent bg-transparent text-accent-blue hover:bg-gray-50 disabled:bg-transparent disabled:text-gray-800 disabled:hover:bg-transparent"),
+	link: clsx(defaultButtonStyling, "border-transparent bg-transparent text-accent-blue hover:bg-ultra-light-blue-gray disabled:bg-transparent disabled:text-gray-800 disabled:hover:bg-transparent"),
 	outline: clsx(defaultButtonStyling, "border-solid border-gray-200 bg-transparent hover:border-gray-800 hover:bg-[rgba(255,255,255,0.1)] disabled:text-gray-800 disabled:hover:border-gray-200 disabled:hover:bg-white"),
 	search: clsx(defaultButtonStyling, "absolute top-0 right-0 h-full w-[50px] border-0 bg-transparent bg-no-repeat"),
 	icon__primary: clsx(defaultButtonStyling, "flex! items-center justify-center"),
@@ -1819,7 +1820,7 @@ const NavButtons = ({ onNext, onPrev }) => /* @__PURE__ */ jsxs("div", {
 	children: [
 		/* @__PURE__ */ jsx("div", {
 			"data-testid": "chevron-left",
-			className: `flex ${onPrev ? "cursor-pointer hover:bg-gray-50" : "cursor-not-allowed"} h-full items-center px-2`,
+			className: `flex ${onPrev ? "cursor-pointer hover:bg-ultra-light-blue-gray" : "cursor-not-allowed"} h-full items-center px-2`,
 			onClick: onPrev,
 			children: /* @__PURE__ */ jsx(IconChevronLeft, {
 				size: 20,
@@ -1829,7 +1830,7 @@ const NavButtons = ({ onNext, onPrev }) => /* @__PURE__ */ jsxs("div", {
 		/* @__PURE__ */ jsx("div", { className: "h-6 w-[0.8px] bg-gray-200" }),
 		/* @__PURE__ */ jsx("div", {
 			"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`,
+			className: `flex ${onNext ? "cursor-pointer hover:bg-ultra-light-blue-gray" : "cursor-not-allowed"} h-full items-center px-2 hover:bg-ultra-light-blue-gray`,
 			onClick: onNext,
 			children: /* @__PURE__ */ jsx(IconChevronRight, {
 				size: 20,
@@ -2718,7 +2719,7 @@ function TableRow({ children, className, header, ...props }) {
 const Tab = forwardRef(({ tabId, activeTab, tabContent, clickFnc, rightSection }, ref) => /* @__PURE__ */ jsxs("button", {
 	ref,
 	"data-testid": `tab-${tabId}`,
-	className: `${activeTab && "text-light-blue bg-[#F0F0F6]"} bg-ultra-light-blue px-5 py-[10px] 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`,
+	className: `${activeTab && "text-light-blue bg-accent-blue-grey font-semibold"} bg-ultra-light-blue px-5 py-[10px] yo-text-caption whitespace-nowrap  transition-colors duration-100 hover:border-black hover:bg-accent-blue-grey`,
 	onClick: () => clickFnc(tabId),
 	children: [tabContent, rightSection && /* @__PURE__ */ jsx("span", {
 		className: "ml-2 inline-flex",
@@ -3404,28 +3405,28 @@ const WysiwygEditor = forwardRef(({ id, content, className, placeholder, onChang
 						type: "button",
 						"data-testid": "bold-button",
 						onClick: () => editor.chain().focus().toggleBold().run(),
-						className: `${editor.isActive("bold") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center rounded-l-md border-gray-400 yo-text-small 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-accent-blue-grey focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 						children: /* @__PURE__ */ jsx(BoldIcon, {})
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						"data-testid": "italic-button",
 						onClick: () => editor.chain().focus().toggleItalic().run(),
-						className: `${editor.isActive("italic") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center border-gray-400 yo-text-small 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-accent-blue-grey focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 						children: /* @__PURE__ */ jsx(ItalicIcon, {})
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						"data-testid": "underline-button",
 						onClick: () => editor.chain().focus().toggleUnderline().run(),
-						className: `${editor.isActive("underline") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center border-gray-400 yo-text-small 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-accent-blue-grey focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 						children: /* @__PURE__ */ jsx(UnderlineIcon, {})
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						"data-testid": "clear-formatting-button",
 						onClick: () => editor.chain().focus().clearNodes().unsetAllMarks().run(),
-						className: "flex size-[26px] items-center justify-center rounded-r-md border-gray-400 bg-white yo-text-small 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-accent-blue-grey focus:ring-2 focus:ring-teal-500 focus:outline-hidden",
 						children: /* @__PURE__ */ jsx(ClearFormattingIcon, {})
 					})
 				]
@@ -3435,13 +3436,13 @@ const WysiwygEditor = forwardRef(({ id, content, className, placeholder, onChang
 					type: "button",
 					"data-testid": "bullet-list-button",
 					onClick: () => editor.chain().focus().toggleBulletList().run(),
-					className: `${editor.isActive("bulletList") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center rounded-l-md border-gray-400 yo-text-small 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-accent-blue-grey focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 					children: /* @__PURE__ */ jsx(ListIcon, {})
 				}), /* @__PURE__ */ jsx("button", {
 					type: "button",
 					"data-testid": "ordered-list-button",
 					onClick: () => editor.chain().focus().toggleOrderedList().run(),
-					className: `${editor.isActive("orderedList") ? "bg-primary/20 text-primary" : "bg-white"} flex size-[26px] items-center justify-center rounded-r-md border-gray-400 yo-text-small 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-accent-blue-grey focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 					children: /* @__PURE__ */ jsx(ListNumbersIcon, {})
 				})]
 			})]