@atom-learning/components 6.14.4 → 6.15.0

package/dist/index.cjs.js

@@ -31,10 +31,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 //#endregion
 let _radix_ui_react_accordion = require("@radix-ui/react-accordion");
-let clsx = require("clsx");
-clsx = __toESM(clsx);
 let react = require("react");
 react = __toESM(react);
+let clsx = require("clsx");
+clsx = __toESM(clsx);
 let tailwind_merge = require("tailwind-merge");
 let tailwind_variants = require("tailwind-variants");
 let _atom_learning_icons = require("@atom-learning/icons");
@@ -105,6 +105,7 @@ var twMerge = (0, tailwind_merge.extendTailwindMerge)({ extend: {
 		"capsize-after": ["capsize"]
 	}
 } });
+var cn = (...inputs) => twMerge((0, clsx.default)(inputs));
 var Theme = ({ children, theme }) => /* @__PURE__ */ react.default.createElement("div", {
 	className: "contents",
 	style: theme
@@ -190,11 +191,11 @@ function styled(el, styles, options) {
 			const element = el;
 			const existingClass = element.props.className;
 			const incomingClass = filteredProps.className;
-			const finalClassName = (0, clsx.default)(existingClass, incomingClass, mergedClassName).trim();
+			const finalClassName = cn(existingClass, incomingClass, mergedClassName).trim();
 			const cloneProps = {
 				...filteredProps,
 				as: props.as || element.props.as,
-				className: twMerge(finalClassName)
+				className: finalClassName
 			};
 			if (ref) cloneProps.ref = ref;
 			return react.default.cloneElement(element, cloneProps);
@@ -400,7 +401,7 @@ var AccordionTrigger = ({ children, colorScheme = {}, asChild, arrowPosition = "
 var Accordion = react.default.forwardRef(({ type = "single", className, children, ...remainingProps }, ref) => /* @__PURE__ */ react.default.createElement(_radix_ui_react_accordion.Root, {
 	ref,
 	type,
-	className: (0, clsx.default)("w-full", className),
+	className: cn("w-full", className),
 	...remainingProps
 }, children));
 Accordion.Item = AccordionItem;
@@ -700,7 +701,7 @@ var Dot = styled("div", {
 	} }
 });
 var Loader = ({ className, message = "Loading", size = "md", ...props }) => /* @__PURE__ */ react.createElement("div", {
-	className: (0, clsx.default)("flex", "justify-center", className),
+	className: cn("flex", "justify-center", className),
 	role: "alert",
 	...props
 }, /* @__PURE__ */ react.createElement("span", { className: "sr-only" }, message), /* @__PURE__ */ react.createElement(Dot, { size }), /* @__PURE__ */ react.createElement(Dot, { size }), /* @__PURE__ */ react.createElement(Dot, { size }));
@@ -1267,7 +1268,7 @@ var AvatarRoot = ({ children, size = "lg", name, emphasis = "white", disabled =
 		style: { "--bg-color": backgroundColor },
 		disabled,
 		onClick: disabled ? void 0 : onClick,
-		className: (0, clsx.default)(disabled ? "cursor-auto" : "cursor-pointer"),
+		className: cn(disabled ? "cursor-auto" : "cursor-pointer"),
 		emphasis
 	}, children) : /* @__PURE__ */ react.createElement(StyledDiv, {
 		size,
@@ -1720,7 +1721,7 @@ var BannerRegularActions = ({ children, className, ...props }) => {
 	}, [size]);
 	(0, invariant.default)(react.Children.count(children) <= MAX_ALLOWED_CHILDREN, `A maximum of ${MAX_ALLOWED_CHILDREN} ${BannerRegularButton.displayName} component(s) are permitted as children of ${BannerRegularActions.displayName}`);
 	return /* @__PURE__ */ react.createElement("div", {
-		className: (0, clsx.default)("flex", gap, direction, className),
+		className: cn("flex", gap, direction, className),
 		...props
 	}, react.Children.map(children, (child, index) => {
 		if (child == null) return child;
@@ -1953,7 +1954,7 @@ var BannerSlimButton = ({ className, ...props }) => {
 		fullWidth,
 		theme: emphasis === "bold" ? "neutral" : "primary",
 		...props,
-		className: (0, clsx.default)("ml-auto", className)
+		className: cn("ml-auto", className)
 	});
 };
 BannerSlimButton.displayName = "BannerSlimButton";
@@ -1995,7 +1996,7 @@ var BannerSlimContainer = (props) => {
 	return /* @__PURE__ */ react.createElement(StyledBannerSlimContainer, {
 		...props,
 		sizeWorkaround: size,
-		className: (0, clsx.default)(direction, align, "gap-4", wrap, props.className)
+		className: cn(direction, align, "gap-4", wrap, props.className)
 	});
 };
 BannerSlimContainer.displayName = "BannerSlimContainer";
@@ -2171,7 +2172,7 @@ var CarouselSlide = ({ children, ...remainingProps }) => /* @__PURE__ */ react.c
 //#region src/components/carousel/CarouselSlider.tsx
 var CarouselSlider = ({ children, className, overflow, ...rest }) => /* @__PURE__ */ react.createElement(pure_react_carousel.Slider, {
 	...rest,
-	className: (0, clsx.default)(String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\_]]:float-left **:[[class*=slide\_]]:pb-0! **:[[class*=sliderTray\_]]:transition-transform **:[[class*=sliderTray\_]]:duration-500 **:[[class*=sliderTray\_]]:ease-[cubic-bezier(.645,.045,.355,1)]`, overflow && "overflow-visible", className)
+	className: cn(String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\_]]:float-left **:[[class*=slide\_]]:pb-0! **:[[class*=sliderTray\_]]:transition-transform **:[[class*=sliderTray\_]]:duration-500 **:[[class*=sliderTray\_]]:ease-[cubic-bezier(.645,.045,.355,1)]`, overflow && "overflow-visible", className)
 }, children);
 //#endregion
 //#region src/components/carousel/Carousel.tsx
@@ -2411,7 +2412,7 @@ var TreeListItem = react.forwardRef(({ className, ...props }, ref) => /* @__PURE
 	...props,
 	ref,
 	role: "treeitem",
-	className: (0, clsx.default)("flex items-center gap-2 not-first:mt-0.5", className)
+	className: cn("flex items-center gap-2 not-first:mt-0.5", className)
 }));
 //#endregion
 //#region src/components/tree/TreeCollapsible.tsx
@@ -2452,7 +2453,7 @@ var TreeCollapsibleContent = react.default.forwardRef(({ children, className, ..
 		}
 	};
 	return /* @__PURE__ */ react.default.createElement(_radix_ui_react_collapsible.Content, {
-		className: (0, clsx.default)("data-[state=closed]:hidden", className),
+		className: cn("data-[state=closed]:hidden", className),
 		onKeyDown: handleOnKeydown,
 		...rest,
 		asChild: true
@@ -2466,14 +2467,14 @@ var TreeCollapsibleContent = react.default.forwardRef(({ children, className, ..
 var TreeIcon = ({ className, ...props }) => /* @__PURE__ */ react.createElement(Icon, {
 	size: "md",
 	...props,
-	className: (0, clsx.default)("my-1 shrink-0 self-start", className)
+	className: cn("my-1 shrink-0 self-start", className)
 });
 //#endregion
 //#region src/components/tree/TreeText.tsx
 var TreeText = (props) => /* @__PURE__ */ react.default.createElement(Text, {
 	as: "span",
 	...props,
-	className: (0, clsx.default)("py-0.5", "whitespace-nowrap", "overflow-x-hidden", "text-ellipsis", props.className),
+	className: cn("py-0.5", "whitespace-nowrap", "overflow-x-hidden", "text-ellipsis", props.className),
 	size: "md"
 });
 //#endregion
@@ -2511,7 +2512,7 @@ var TreeCollapsibleTrigger = ({ children, label, className, ...rest }) => {
 	const { setTriggerRef, triggerRef } = react.default.useContext(TreeCollapsibleContext);
 	return /* @__PURE__ */ react.default.createElement(TreeItemContent, {
 		...rest,
-		className: (0, clsx.default)("cursor-pointer", className),
+		className: cn("cursor-pointer", className),
 		onClick: (event) => {
 			rest.onClick?.(event);
 			triggerRef?.current?.click();
@@ -2795,7 +2796,7 @@ RadioButton.displayName = "RadioButton";
 //#region src/components/field-wrapper/FieldDescription.tsx
 var Description$1 = ({ children, className }) => /* @__PURE__ */ react.createElement(Text, {
 	size: "sm",
-	className: (0, clsx.default)("text-grey-700", "max-w-[80ch]", className)
+	className: cn("text-grey-700", "max-w-[80ch]", className)
 }, children);
 //#endregion
 //#region src/components/field-wrapper/InlineFieldWrapper.tsx
@@ -2804,7 +2805,7 @@ var InlineFieldWrapper = ({ align = "start", children, className, description, d
 	direction,
 	required,
 	type: "inline"
-}, react.Children.map(children, (child) => /* @__PURE__ */ react.createElement("div", { className: (0, clsx.default)(direction === "reverse" && "ml-3", direction === "row" && "mr-3", (child?.type === Checkbox || child?.type === RadioButton) && child?.props?.size !== "lg" && "translate-y-1") }, child)), label), error && /* @__PURE__ */ react.createElement(InlineMessage, { className: "mt-2" }, error), description && /* @__PURE__ */ react.createElement(Description$1, { className: (0, clsx.default)("mt-2", direction === "reverse" && "mr-7", direction === "row" && "ml-7") }, description));
+}, react.Children.map(children, (child) => /* @__PURE__ */ react.createElement("div", { className: cn(direction === "reverse" && "ml-3", direction === "row" && "mr-3", (child?.type === Checkbox || child?.type === RadioButton) && child?.props?.size !== "lg" && "translate-y-1") }, child)), label), error && /* @__PURE__ */ react.createElement(InlineMessage, { className: "mt-2" }, error), description && /* @__PURE__ */ react.createElement(Description$1, { className: cn("mt-2", direction === "reverse" && "mr-7", direction === "row" && "ml-7") }, description));
 InlineFieldWrapper.displayName = "InlineFieldWrapper";
 //#endregion
 //#region src/components/form/useFieldError.ts
@@ -3308,7 +3309,7 @@ var Link = react.forwardRef(({ as, disabled, href, ...rest }, ref) => /* @__PURE
 Link.displayName = "Link";
 //#endregion
 //#region src/components/field-wrapper/FieldWrapper.tsx
-var FieldWrapper = ({ children, error, fieldId, label, prompt, description, required, hideLabel, appearance, ...rest }) => /* @__PURE__ */ react.createElement("div", rest, /* @__PURE__ */ react.createElement("div", { className: (0, clsx.default)("mb-3", "flex", "items-center", "justify-between", hideLabel && "sr-only") }, /* @__PURE__ */ react.createElement(Label, {
+var FieldWrapper = ({ children, error, fieldId, label, prompt, description, required, hideLabel, appearance, ...rest }) => /* @__PURE__ */ react.createElement("div", rest, /* @__PURE__ */ react.createElement("div", { className: cn("mb-3", "flex", "items-center", "justify-between", hideLabel && "sr-only") }, /* @__PURE__ */ react.createElement(Label, {
 	htmlFor: fieldId,
 	required,
 	appearance
@@ -3453,7 +3454,7 @@ var PasswordInput = react.forwardRef(({ className, hidePasswordText = "Hide pass
 	const [isPasswordVisible, setIsPasswordVisible] = (0, react.useState)(false);
 	const togglePasswordVisibility = () => setIsPasswordVisible((currentState) => !currentState);
 	const iconSize = react.useMemo(() => getFieldIconSize(size), [size]);
-	return /* @__PURE__ */ react.createElement("div", { className: (0, clsx.default)("relative", className) }, /* @__PURE__ */ react.createElement(Input, {
+	return /* @__PURE__ */ react.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ react.createElement(Input, {
 		...restProps,
 		size,
 		type: isPasswordVisible ? "text" : "password",
@@ -3466,7 +3467,7 @@ var PasswordInput = react.forwardRef(({ className, hidePasswordText = "Hide pass
 		onClick: togglePasswordVisibility,
 		onMouseDown: (e) => e.preventDefault(),
 		size: iconSize,
-		className: (0, clsx.default)(size === "lg" ? "bottom-1" : "bottom-0", "absolute", "right-0")
+		className: cn(size === "lg" ? "bottom-1" : "bottom-0", "absolute", "right-0")
 	}, /* @__PURE__ */ react.createElement(Icon, { is: isPasswordVisible ? _atom_learning_icons.Eye : _atom_learning_icons.EyeCrossed })));
 });
 PasswordInput.displayName = "PasswordInput";
@@ -3488,7 +3489,7 @@ var PasswordField = ({ className, hideLabel, label = "Password", name, prompt =
 		prompt,
 		required: Boolean(validation?.required),
 		appearance: formAppearance,
-		className: (0, clsx.default)(className, "relative")
+		className: cn(className, "relative")
 	}, /* @__PURE__ */ react.createElement(PasswordInput, {
 		autoComplete: "current-password",
 		name,
@@ -3687,7 +3688,7 @@ var TableStickyColumnsContainer = ({ children, numberOfStickyColumns = 0, classN
 		role: "scrollbar",
 		ref: wrapperRef,
 		style: columnsStyle,
-		className: (0, clsx.default)("overflow-auto", "max-w-full", "relative", "overscroll-x-contain", "[&_td,&_th]:bg-inherit", className, numberOfStickyColumns >= 1 && [
+		className: cn("overflow-auto", "max-w-full", "relative", "overscroll-x-contain", "[&_td,&_th]:bg-inherit", className, numberOfStickyColumns >= 1 && [
 			"[&_td:nth-of-type(1),&_th:nth-of-type(1)]:sticky",
 			"[&_td:nth-of-type(1),&_th:nth-of-type(1)]:left-(--sticky-offset-left-1)",
 			"[&_td:nth-of-type(1),&_th:nth-of-type(1)]:min-w-(--sticky-column-width-1)",
@@ -3761,7 +3762,7 @@ var TableComponent = react.forwardRef(({ size = "md", corners = "round", numberO
 	});
 	if (numberOfStickyColumns) return /* @__PURE__ */ react.createElement(TableStickyColumnsContainer, {
 		key: scrollContainerkey,
-		className: (0, clsx.default)(scrollContainerCls),
+		className: cn(scrollContainerCls),
 		numberOfStickyColumns
 	}, tableComponent);
 	return tableComponent;
@@ -4063,7 +4064,7 @@ var DataTableRow = ({ row, rowAction }) => {
 	}, getCanSomeRowsExpand() && /* @__PURE__ */ react.createElement(Table.Cell, {
 		"data-testid": `expand-icon-${row.id}`,
 		onClick: toggleExpandHandler,
-		className: (0, clsx.default)("w-10", row.getCanExpand() ? "cursor-pointer" : "cursor-auto")
+		className: cn("w-10", row.getCanExpand() ? "cursor-pointer" : "cursor-auto")
 	}, row.getCanExpand() && /* @__PURE__ */ react.createElement(Icon, { is: row.getIsExpanded() ? _atom_learning_icons.ChevronDown : _atom_learning_icons.ChevronRight })), enableRowSelection && /* @__PURE__ */ react.createElement(Table.Cell, { className: "w-10" }, /* @__PURE__ */ react.createElement(DataTableRowSelectionCheckbox, {
 		row,
 		checked: getCheckedState(),
@@ -4435,7 +4436,7 @@ var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", them
 		if (activeIcon === INPUT_ICON.SEARCH) return /* @__PURE__ */ react.createElement(StyledIcon$1, {
 			is: _atom_learning_icons.Search,
 			size,
-			className: (0, clsx.default)(size == "sm" ? "size-4" : "size-5", "top-1/2", "-translate-y-1/2")
+			className: cn(size == "sm" ? "size-4" : "size-5", "top-1/2", "-translate-y-1/2")
 		});
 		return /* @__PURE__ */ react.createElement(ActionIcon, {
 			label: clearText,
@@ -4449,7 +4450,7 @@ var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", them
 		size,
 		appearance,
 		theme,
-		className: (0, clsx.default)("relative", "w-auto", className)
+		className: cn("relative", "w-auto", className)
 	}, /* @__PURE__ */ react.createElement(InputText, {
 		ref: setInputElRef,
 		size,
@@ -4457,7 +4458,7 @@ var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", them
 		...remainingProps,
 		value: innerValue,
 		onChange: handleOnChange,
-		className: (0, clsx.default)(size === "sm" ? "pr-8" : "pr-10", "[&::-webkit-search-decoration]:appearance-none", "[&::-webkit-search-cancel-button]:appearance-none", "[&::-webkit-search-results-button]:appearance-none")
+		className: cn(size === "sm" ? "pr-8" : "pr-10", "[&::-webkit-search-decoration]:appearance-none", "[&::-webkit-search-cancel-button]:appearance-none", "[&::-webkit-search-results-button]:appearance-none")
 	}), getIcon());
 });
 SearchInput.displayName = "SearchInput";
@@ -4475,7 +4476,7 @@ var DataTableGlobalFilter = ({ onChange, label, hideLabel = false, ...props }) =
 	});
 	return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(Label, {
 		htmlFor: label,
-		className: (0, clsx.default)("mb-3", hideLabel && "sr-only")
+		className: cn("mb-3", hideLabel && "sr-only")
 	}, label), /* @__PURE__ */ react.createElement(SearchInput, {
 		...props,
 		defaultValue: globalFilter,
@@ -4538,7 +4539,7 @@ var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items"
 		...hoverProps,
 		className,
 		...props
-	}, /* @__PURE__ */ react.createElement("div", { className: (0, clsx.default)("flex", "gap-1", "items-center", header.colSpan > 1 ? "justify-center" : "justify-start") }, (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()), sortDirection && isSortableTable && /* @__PURE__ */ react.createElement("div", { className: (0, clsx.default)("flex", "items-center", "relative", "size-6", "ml-2", isHovered ? "bg-primary-200" : "bg-primary-100", "rounded-sm") }, /* @__PURE__ */ react.createElement(SortIcon, { direction: sortDirection })), includeTotal && /* @__PURE__ */ react.createElement(StyledCount, {
+	}, /* @__PURE__ */ react.createElement("div", { className: cn("flex", "gap-1", "items-center", header.colSpan > 1 ? "justify-center" : "justify-start") }, (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()), sortDirection && isSortableTable && /* @__PURE__ */ react.createElement("div", { className: cn("flex", "items-center", "relative", "size-6", "ml-2", isHovered ? "bg-primary-200" : "bg-primary-100", "rounded-sm") }, /* @__PURE__ */ react.createElement(SortIcon, { direction: sortDirection })), includeTotal && /* @__PURE__ */ react.createElement(StyledCount, {
 		size: "sm",
 		weight: "normal"
 	}, "(", totalRows, " ", totalSuffix, ")")));
@@ -4612,12 +4613,12 @@ var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stick
 			"--header-offset": `${headerOffset}px`
 		},
 		...props,
-		className: (0, clsx.default)("relative", "z-3", "[&_tr:not(:last-child)>th]:border-b-none", "[&_tr:not(:first-child)>th]:rounded-none!", className)
+		className: cn("relative", "z-3", "[&_tr:not(:last-child)>th]:border-b-none", "[&_tr:not(:first-child)>th]:rounded-none!", className)
 	}, getHeaderGroups().map((headerGroup) => {
 		return /* @__PURE__ */ react.createElement(Table.Row, {
 			key: headerGroup.id,
 			ref: tableHeaderRowRef,
-			className: isSticky && headerOffset !== 0 ? (0, clsx.default)("translate-y-(--header-offset)", headerHide ? "delay-0ms opacity-0 transition-none" : "delay-150ms opacity-100 transition-opacity duration-100", "[&_th]:last:before:absolute", "[&_th]:last:before:bottom-0", "[&_th]:last:before:pointer-events-none", "[&_th]:last:before:right-0", "[&_th]:last:before:shadow-sm", "[&_th]:last:before:top-0", "[&_th]:last:before:w-full") : void 0
+			className: isSticky && headerOffset !== 0 ? cn("translate-y-(--header-offset)", headerHide ? "delay-0ms opacity-0 transition-none" : "delay-150ms opacity-100 transition-opacity duration-100", "[&_th]:last:before:absolute", "[&_th]:last:before:bottom-0", "[&_th]:last:before:pointer-events-none", "[&_th]:last:before:right-0", "[&_th]:last:before:shadow-sm", "[&_th]:last:before:top-0", "[&_th]:last:before:w-full") : void 0
 		}, getCanSomeRowsExpand() && /* @__PURE__ */ react.createElement(Table.HeaderCell, { className: "w-10" }), enableRowSelection && /* @__PURE__ */ react.createElement(Table.HeaderCell, { className: "w-10" }, /* @__PURE__ */ react.createElement(DataTableSelectAllRowsCheckbox, null)), headerGroup.headers.map((header, index) => /* @__PURE__ */ react.createElement(DataTableHeaderCell, {
 			header,
 			key: header.id,
@@ -4730,7 +4731,7 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 		numberOfStickyColumns: scrollOptions.numberOfStickyColumns,
 		scrollContainerCls: scrollOptions.scrollContainerCls,
 		scrollContainerkey: buildScrollContainerKey(),
-		className: (0, clsx.default)(className, isPending && [
+		className: cn(className, isPending && [
 			"opacity-50",
 			"pointer-events-none",
 			"transition-opacity",
@@ -4750,7 +4751,7 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 		striped,
 		rowAction
 	}));
-	return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(DataTableLoading, null), withContainer ? /* @__PURE__ */ react.createElement(TableContainer, { className: (0, clsx.default)(scrollOptions.numberOfStickyColumns === 0 && "overflow-x-auto") }, tableComponent) : tableComponent);
+	return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(DataTableLoading, null), withContainer ? /* @__PURE__ */ react.createElement(TableContainer, { className: cn(scrollOptions.numberOfStickyColumns === 0 && "overflow-x-auto") }, tableComponent) : tableComponent);
 };
 //#endregion
 //#region src/components/sortable/Handle.tsx
@@ -4811,7 +4812,7 @@ var SortableItem = ({ id, asChild = false, className, style, isDragHandle = fals
 		...isDragHandle && !disabled ? listeners : {},
 		...isDragHandle && !disabled ? attributes : {},
 		...rest,
-		className: (0, clsx.default)("translate-x-[calc(var(--translate-x)*1px)]", "translate-y-[calc(var(--translate-y)*1px)]", "scale-(--scale)", isDragging && "z-5", "disabled:**:pointer-events-none", "disabled:cursor-not-allowed", "disabled:opacity-30", isDragHandle && (isDragging ? "cursor-grabbing" : "cursor-grab"), className)
+		className: cn("translate-x-[calc(var(--translate-x)*1px)]", "translate-y-[calc(var(--translate-y)*1px)]", "scale-(--scale)", isDragging && "z-5", "disabled:**:pointer-events-none", "disabled:cursor-not-allowed", "disabled:opacity-30", isDragHandle && (isDragging ? "cursor-grabbing" : "cursor-grab"), className)
 	});
 };
 SortableItem.displayName = "SortableItem";
@@ -4913,7 +4914,7 @@ var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, the
 		sortableIds: rowIds
 	}, /* @__PURE__ */ react.createElement(DataTableLoading, null), /* @__PURE__ */ react.createElement(Table, {
 		...props,
-		className: (0, clsx.default)(className, isPending && [
+		className: cn(className, isPending && [
 			"opacity-50",
 			"pointer-events-none",
 			"transition-opacity,duration-250,linear,delay-150"
@@ -5372,7 +5373,7 @@ var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, vi
 		asChild: true
 	}, /* @__PURE__ */ react.createElement("div", {
 		...rest,
-		className: (0, clsx.default)("flex", "gap-1", className)
+		className: cn("flex", "gap-1", className)
 	}, children || /* @__PURE__ */ react.createElement(PaginationItems, null))));
 };
 var Pagination = Object.assign(PaginationComponent, { Popover: PaginationPopover });
@@ -5555,7 +5556,7 @@ var Calendar = ({ className, refDateSelected, refDateToday, firstDayOfWeek = 0,
 		...remainingProps
 	});
 	if (!calendars.length) return null;
-	return /* @__PURE__ */ react.createElement("div", { className: (0, clsx.default)("relative", "w-fit", "-mt-1", className) }, /* @__PURE__ */ react.createElement("div", { className: "absolute top-0 -right-1 flex" }, /* @__PURE__ */ react.createElement(ActionIcon, {
+	return /* @__PURE__ */ react.createElement("div", { className: cn("relative", "w-fit", "-mt-1", className) }, /* @__PURE__ */ react.createElement("div", { className: "absolute top-0 -right-1 flex" }, /* @__PURE__ */ react.createElement(ActionIcon, {
 		label: labels[showYears ? "previousYear" : "previous"],
 		theme: "neutral",
 		size: "md",
@@ -5871,7 +5872,7 @@ var DialogFooter = styled("footer", { base: [
 var DialogHeading = ({ className, ...rest }) => /* @__PURE__ */ react.createElement(Heading, {
 	size: "sm",
 	...rest,
-	className: (0, clsx.default)("border-b", "border-b-grey-200", "pb-8", "pt-0", "px-8", "mb-8", "-mx-8", "box-content", className)
+	className: cn("border-b", "border-b-grey-200", "pb-8", "pt-0", "px-8", "mb-8", "-mx-8", "box-content", className)
 });
 //#endregion
 //#region src/components/dialog/DialogNavigationBar.tsx
@@ -6264,7 +6265,7 @@ var Grid = ({ className, style, gap = "2", minItemSize, maxItemSize = "1fr", ...
 		...maxItemSize && { "--max-item-size": maxItemSize }
 	},
 	gap,
-	className: (0, clsx.default)(minItemSize && ["grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]"], className)
+	className: cn(minItemSize && ["grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]"], className)
 });
 Grid.displayName = "Grid";
 //#endregion
@@ -6441,7 +6442,7 @@ var MarkdownLink = ({ node, handleNode }) => /* @__PURE__ */ react.createElement
 //#region src/components/markdown-content/components/MarkdownList.tsx
 var MarkdownList = ({ node, handleNode, className }) => /* @__PURE__ */ react.createElement(List, {
 	ordered: node.ordered || void 0,
-	className: (0, clsx.default)("[&_p]:inline", "[&_p]:before:hidden", "[&_p]:after:hidden", className)
+	className: cn("[&_p]:inline", "[&_p]:before:hidden", "[&_p]:after:hidden", className)
 }, node.children?.map(handleNode));
 //#endregion
 //#region src/components/markdown-content/components/MarkdownListItem.tsx
@@ -6458,7 +6459,7 @@ var MarkdownStrong = ({ node, handleNode }) => /* @__PURE__ */ react.createEleme
 var MarkdownText = ({ node }) => node.value;
 //#endregion
 //#region src/components/markdown-content/components/MarkdownThematicBreak.tsx
-var MarkdownThematicBreak = ({ className }) => /* @__PURE__ */ react.createElement(Divider, { className: (0, clsx.default)("w-full", className) });
+var MarkdownThematicBreak = ({ className }) => /* @__PURE__ */ react.createElement(Divider, { className: cn("w-full", className) });
 //#endregion
 //#region src/components/markdown-content/MarkdownContent.tsx
 var StyledMarkdownContent = styled("div", { base: [
@@ -6618,7 +6619,7 @@ var NavigationMenuDropdownTrigger = react.default.forwardRef(({ children, active
 }, children, /* @__PURE__ */ react.default.createElement(Icon, {
 	is: _atom_learning_icons.ChevronDown,
 	size: "sm",
-	className: (0, clsx.default)("ml-1", "in-data-[state=open]:-rotate-180", "motion-safe:duration-200", "motion-safe:ease-in", "motion-safe:transition-transform")
+	className: cn("ml-1", "in-data-[state=open]:-rotate-180", "motion-safe:duration-200", "motion-safe:ease-in", "motion-safe:transition-transform")
 })));
 NavigationMenuDropdownTrigger.displayName = "NavigationMenuDropdownTrigger";
 //#endregion
@@ -6751,13 +6752,13 @@ var NavigationMenuComponent = ({ children, className, ...props }) => {
 		return trigger;
 	};
 	return /* @__PURE__ */ react.default.createElement(NavigationMenuContext.Provider, { value: { onNodeUpdate } }, /* @__PURE__ */ react.default.createElement(StyledMenu, {
-		className: (0, clsx.default)(className),
+		className: cn(className),
 		style: colorSchemes$2["light"],
 		onValueChange: setActiveItem,
 		...props
 	}, /* @__PURE__ */ react.default.createElement(StyledList$1, { ref: listRef }, children), /* @__PURE__ */ react.default.createElement(ViewportPosition, null, /* @__PURE__ */ react.default.createElement(StyledViewport, {
 		style: { "--navigation-menu-viewport-offset": `${offset || 0}px` },
-		className: (0, clsx.default)([
+		className: cn([
 			"data-[state=open]:animate-fade-in",
 			"data-[state=closed]:animate-fade-out",
 			"translate-x-(--navigation-menu-viewport-offset)"
@@ -6784,7 +6785,7 @@ var colorSchemes$1 = { light: {
 //#endregion
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalItem.tsx
 var NavigationMenuVerticalItem = (props) => /* @__PURE__ */ react.default.createElement(_radix_ui_react_navigation_menu.Item, {
-	className: (0, clsx.default)("[ul_li_&]:[--navigation-menu-vertical-item-pl:--spacing(8)]", "[ul_li_&_&]:[--navigation-menu-vertical-item-pl:--spacing(12)]", "[ul_li_&_&_&]:[--navigation-menu-vertical-item-pl:--spacing(16)]"),
+	className: cn("[ul_li_&]:[--navigation-menu-vertical-item-pl:--spacing(8)]", "[ul_li_&_&]:[--navigation-menu-vertical-item-pl:--spacing(12)]", "[ul_li_&_&_&]:[--navigation-menu-vertical-item-pl:--spacing(16)]"),
 	...props
 });
 //#endregion
@@ -6901,7 +6902,7 @@ var NavigationMenuVerticalText = (props) => {
 //#endregion
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.tsx
 var NavigationMenuVerticalItemContent = ({ children, className, ...rest }) => /* @__PURE__ */ react.createElement("div", {
-	className: (0, clsx.default)("flex", "gap-2", "items-center", className),
+	className: cn("flex", "gap-2", "items-center", className),
 	...rest
 }, react.Children.map(children, (child) => {
 	if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ react.createElement(NavigationMenuVerticalText, null, child);
@@ -7182,7 +7183,7 @@ var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, mi
 		theme,
 		state: externalState || (hasError ? "error" : void 0),
 		"aria-invalid": externalAriaInvalid || hasError || void 0,
-		className: (0, clsx.default)("rounded-none", "w-16", "[&_>_input]:text-center", "disabled:opacity-30", "disabled:pointer-events-none", emphasis === "bold" && [
+		className: cn("rounded-none", "w-16", "[&_>_input]:text-center", "disabled:opacity-30", "disabled:pointer-events-none", emphasis === "bold" && [
 			"rounded-1",
 			"[&_>_input[aria-invalid=true]]:text-danger",
 			"focus-within:[&_>_input]:text-grey-1000"
@@ -7208,7 +7209,7 @@ var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, mi
 	}, /* @__PURE__ */ react.createElement(NumberInputStepper, {
 		onClick: decrement,
 		icon: _atom_learning_icons.Minus,
-		className: (0, clsx.default)(emphasis !== "bold" && "border-r-none rounded-r-none"),
+		className: cn(emphasis !== "bold" && "border-r-none rounded-r-none"),
 		size: iconSize,
 		fieldAppearance: appearance,
 		fieldTheme: theme,
@@ -7220,7 +7221,7 @@ var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, mi
 	}), /* @__PURE__ */ react.createElement(Input, inputProps), /* @__PURE__ */ react.createElement(NumberInputStepper, {
 		onClick: increment,
 		icon: _atom_learning_icons.Plus,
-		className: (0, clsx.default)(emphasis !== "bold" && "border-l-none rounded-l-none"),
+		className: cn(emphasis !== "bold" && "border-l-none rounded-l-none"),
 		size: iconSize,
 		fieldAppearance: appearance,
 		fieldTheme: theme,
@@ -7471,7 +7472,7 @@ var RadioCard = ({ children, isFullWidth = false, size = "md", align = "left", .
 }, /* @__PURE__ */ react.createElement(Indicator, null)), /* @__PURE__ */ react.createElement("div", null, children));
 //#endregion
 //#region src/components/radio-card/RadioCardGroup.tsx
-var RadioCardGroup = ({ className, children, size, isFullWidth, align, ...rest }) => /* @__PURE__ */ react.createElement(_radix_ui_react_radio_group.Root, rest, /* @__PURE__ */ react.createElement("div", { className: (0, clsx.default)("flex", "flex-row", "flex-wrap", "gap-3", className) }, react.Children.map(children, (child) => {
+var RadioCardGroup = ({ className, children, size, isFullWidth, align, ...rest }) => /* @__PURE__ */ react.createElement(_radix_ui_react_radio_group.Root, rest, /* @__PURE__ */ react.createElement("div", { className: cn("flex", "flex-row", "flex-wrap", "gap-3", className) }, react.Children.map(children, (child) => {
 	if (react.isValidElement(child) && child?.type === RadioCard) return react.cloneElement(child, {
 		size,
 		isFullWidth,
@@ -7540,7 +7541,7 @@ var useSectionMessageContext = () => {
 var SectionMessageDescription = ({ className, ...rest }) => /* @__PURE__ */ react.default.createElement(Text, {
 	size: "sm",
 	...rest,
-	className: (0, clsx.default)("text-grey-900", className)
+	className: cn("text-grey-900", className)
 });
 //#endregion
 //#region src/components/section-message/SectionMessageDismiss.tsx
@@ -7556,7 +7557,7 @@ var SectionMessageDismiss = ({ label = "Dismiss", className, ...rest }) => {
 		appearance: "simple",
 		theme: "neutral",
 		...rest,
-		className: (0, clsx.default)("m-auto", "absolute", "top-2", "right-2", className)
+		className: cn("m-auto", "absolute", "top-2", "right-2", className)
 	}, /* @__PURE__ */ react.default.createElement(Icon, { is: _atom_learning_icons.Close })));
 };
 //#endregion
@@ -7578,7 +7579,7 @@ var SectionMessageIcon = ({ className, is, ...rest }) => {
 		is: is || themeIcons[theme],
 		size: "sm",
 		...rest,
-		className: (0, clsx.default)("m-auto", "absolute", "left-4", "top-4", "text-current", className)
+		className: cn("m-auto", "absolute", "left-4", "top-4", "text-current", className)
 	});
 };
 //#endregion
@@ -7589,7 +7590,7 @@ var SectionMessageContent = styled("div", { base: [
 	"pt-0.5",
 	"*:not-last:mb-2"
 ] });
-var SectionMessageActions = ({ className, ...rest }) => /* @__PURE__ */ react.default.createElement("div", { className: (0, clsx.default)("max-w-full", "shrink-0", className) }, /* @__PURE__ */ react.default.createElement("div", {
+var SectionMessageActions = ({ className, ...rest }) => /* @__PURE__ */ react.default.createElement("div", { className: cn("max-w-full", "shrink-0", className) }, /* @__PURE__ */ react.default.createElement("div", {
 	className: "flex flex-wrap gap-3",
 	...rest
 }));
@@ -7901,7 +7902,7 @@ var SideBar = ({ theme, className, children, type = "expandable", offset = "0px"
 			"--offset": offset
 		},
 		type,
-		className: (0, clsx.default)("h-[calc(100svh-var(--offset))]", "top-(--offset)", className)
+		className: cn("h-[calc(100svh-var(--offset))]", "top-(--offset)", className)
 	}, /* @__PURE__ */ react.default.createElement(Content$1, {
 		...expandableProps,
 		isExpanded,
@@ -8052,10 +8053,10 @@ var SkeletonLoader = styled("div", { base: [
 SkeletonLoader.displayName = "Skeleton";
 //#endregion
 //#region src/components/skeleton-loader/SkeletonHeading.tsx
-var SkeletonHeading = ({ className }) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: (0, clsx.default)("w-64", "h-6", "rounded-xl", className) });
+var SkeletonHeading = ({ className }) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: cn("w-64", "h-6", "rounded-xl", className) });
 //#endregion
 //#region src/components/skeleton-loader/SkeletonButton.tsx
-var SkeletonButton = ({ className }) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: (0, clsx.default)("w-[10rem]", "h-8", "rounded-sm", className) });
+var SkeletonButton = ({ className }) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: cn("w-[10rem]", "h-8", "rounded-sm", className) });
 //#endregion
 //#region src/components/tile/Tile.tsx
 var StyledTile = styled("div", {
@@ -8093,9 +8094,9 @@ var Tile = react.default.forwardRef(({ children, borderRadius = "lg", colorSchem
 Tile.displayName = "Tile";
 //#endregion
 //#region src/components/skeleton-loader/SkeletonTabs.tsx
-var SkeletonTabs = ({ numberOfTabs, className, tabClassName }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-row", "gap-4", className) }, Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map((key) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+var SkeletonTabs = ({ numberOfTabs, className, tabClassName }) => /* @__PURE__ */ react.default.createElement(Tile, { className: cn("p-6", "flex-row", "gap-4", className) }, Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map((key) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
 	key,
-	className: (0, clsx.default)("w-32", "h-6", "rounded-sm", tabClassName)
+	className: cn("w-32", "h-6", "rounded-sm", tabClassName)
 })));
 //#endregion
 //#region src/components/skeleton-loader/SkeletonDoughnutChart.tsx
@@ -8113,14 +8114,14 @@ var buildConicGradient = () => {
 	});
 	return `conic-gradient(${stops.join(", ")})`;
 };
-var SkeletonDoughnutChart = ({ className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "size-60", className) }, /* @__PURE__ */ react.default.createElement("div", {
+var SkeletonDoughnutChart = ({ className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: cn("p-6", "size-60", className) }, /* @__PURE__ */ react.default.createElement("div", {
 	className: "animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding",
 	style: { "--gradient": buildConicGradient() }
 }, /* @__PURE__ */ react.default.createElement("div", { className: "mt-[20%] ml-[20%] size-[60%] rounded-full bg-white" })));
 //#endregion
 //#region src/components/skeleton-loader/SkeletonTable.tsx
 var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, className }) => {
-	return /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-row", "gap-4", "relative", className) }, /* @__PURE__ */ react.default.createElement(Table, { size: "md" }, /* @__PURE__ */ react.default.createElement(Table.Header, { theme: "white" }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ react.default.createElement(Table.HeaderCell, { key: columnIndex }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+	return /* @__PURE__ */ react.default.createElement(Tile, { className: cn("p-6", "flex-row", "gap-4", "relative", className) }, /* @__PURE__ */ react.default.createElement(Table, { size: "md" }, /* @__PURE__ */ react.default.createElement(Table.Header, { theme: "white" }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ react.default.createElement(Table.HeaderCell, { key: columnIndex }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
 		style: { "--width": columnWidth?.[columnIndex] || "100px" },
 		className: "h-4 w-(--width) rounded-xl"
 	})))), /* @__PURE__ */ react.default.createElement(Table.Body, { striped: false }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowIndex) => /* @__PURE__ */ react.default.createElement(Table.Row, { key: rowIndex }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ react.default.createElement(Table.Cell, {
@@ -8133,7 +8134,7 @@ var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, class
 };
 //#endregion
 //#region src/components/skeleton-loader/SkeletonCard.tsx
-var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("relative", "w-full", "flex-col", "items-center", "gap-6 p-6", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "align-center flex w-full gap-6" }, withChart && /* @__PURE__ */ react.default.createElement(SkeletonDoughnutChart, null), /* @__PURE__ */ react.default.createElement("div", { className: "flex grow flex-col gap-6" }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: cn("relative", "w-full", "flex-col", "items-center", "gap-6 p-6", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "align-center flex w-full gap-6" }, withChart && /* @__PURE__ */ react.default.createElement(SkeletonDoughnutChart, null), /* @__PURE__ */ react.default.createElement("div", { className: "flex grow flex-col gap-6" }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
 	key: rowNumber,
 	className: "bg-grey-200 h-10 w-full min-w-25 rounded-md"
 })))), /* @__PURE__ */ react.default.createElement(SkeletonButton, null));
@@ -8146,7 +8147,7 @@ var ColumnGroup = ({ numberOfColumns, groupIndex }) => /* @__PURE__ */ react.def
 	style: { "--height": `${getBarHeight(groupIndex, i)}px` }
 }))), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-2 w-14 rounded-full" }));
 var LegendItem$1 = () => /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-3 w-3 rounded-full" }), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-3 w-24 rounded-full" }));
-var SkeletonColumnChart = ({ numberOfLabels = 2, numberOfGroups = 7, numberOfColumns = 1, className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-col", "gap-6", "w-full", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-4" }, Array.from({ length: numberOfLabels }, (_, i) => /* @__PURE__ */ react.default.createElement(LegendItem$1, { key: i })))), /* @__PURE__ */ react.default.createElement("div", { className: "flex items-end justify-between gap-2" }, Array.from({ length: numberOfGroups }, (_, i) => /* @__PURE__ */ react.default.createElement(ColumnGroup, {
+var SkeletonColumnChart = ({ numberOfLabels = 2, numberOfGroups = 7, numberOfColumns = 1, className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: cn("p-6", "flex-col", "gap-6", "w-full", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-4" }, Array.from({ length: numberOfLabels }, (_, i) => /* @__PURE__ */ react.default.createElement(LegendItem$1, { key: i })))), /* @__PURE__ */ react.default.createElement("div", { className: "flex items-end justify-between gap-2" }, Array.from({ length: numberOfGroups }, (_, i) => /* @__PURE__ */ react.default.createElement(ColumnGroup, {
 	key: i,
 	numberOfColumns,
 	groupIndex: i
@@ -8155,7 +8156,7 @@ var SkeletonColumnChart = ({ numberOfLabels = 2, numberOfGroups = 7, numberOfCol
 //#region src/components/skeleton-loader/SkeletonBarChart.tsx
 var getBarWidth = (rowIndex) => Math.round(40 + Math.abs(Math.sin(rowIndex + 1)) * 55);
 var LegendItem = () => /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-3 w-3 rounded-full" }), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-3 w-24 rounded-full" }));
-var SkeletonBarChart = ({ numberOfLabels = 3, numberOfRows = 4, numberOfTicks = 4, className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-col", "gap-6", "w-full", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-4" }, Array.from({ length: numberOfLabels }, (_, i) => /* @__PURE__ */ react.default.createElement(LegendItem, { key: i }))), /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-col justify-between gap-4" }, Array.from({ length: numberOfRows }, (_, i) => /* @__PURE__ */ react.default.createElement("div", {
+var SkeletonBarChart = ({ numberOfLabels = 3, numberOfRows = 4, numberOfTicks = 4, className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: cn("p-6", "flex-col", "gap-6", "w-full", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-4" }, Array.from({ length: numberOfLabels }, (_, i) => /* @__PURE__ */ react.default.createElement(LegendItem, { key: i }))), /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-col justify-between gap-4" }, Array.from({ length: numberOfRows }, (_, i) => /* @__PURE__ */ react.default.createElement("div", {
 	key: i,
 	className: "flex items-center gap-5"
 }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-3 w-20 shrink-0 rounded-full" }), /* @__PURE__ */ react.default.createElement("div", { className: "grow" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
@@ -8167,10 +8168,10 @@ var SkeletonBarChart = ({ numberOfLabels = 3, numberOfRows = 4, numberOfTicks =
 })))));
 //#endregion
 //#region src/components/skeleton-loader/SkeletonPanelList.tsx
-var SkeletonPanelList = ({ className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("px-6", "flex-col", "w-full", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "size-10 rounded-full" }), /* @__PURE__ */ react.default.createElement("div", { className: "grow" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-4 w-2/3 rounded-full" })), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-8 w-28 rounded-md" })));
+var SkeletonPanelList = ({ className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: cn("px-6", "flex-col", "w-full", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "size-10 rounded-full" }), /* @__PURE__ */ react.default.createElement("div", { className: "grow" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-4 w-2/3 rounded-full" })), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-8 w-28 rounded-md" })));
 //#endregion
 //#region src/components/skeleton-loader/SkeletonSubjectList.tsx
-var SkeletonSubjectList = ({ className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-2", "flex-row", "flex-wrap", "items-center", "justify-between", "gap-4", "w-full", className) }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-22 max-w-xl grow rounded-xl" }), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "size-10 shrink-0 rounded-md" }));
+var SkeletonSubjectList = ({ className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: cn("p-2", "flex-row", "flex-wrap", "items-center", "justify-between", "gap-4", "w-full", className) }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-22 max-w-xl grow rounded-xl" }), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "size-10 shrink-0 rounded-md" }));
 //#endregion
 //#region src/components/skeleton-loader/index.ts
 var skeleton_loader_exports = /* @__PURE__ */ __exportAll({
@@ -8523,7 +8524,7 @@ var StepperComponent = ({ children, stepCount, allowSkip, onComplete, onStepChan
 		showCompletedIcons
 	}, /* @__PURE__ */ react.createElement("div", {
 		"aria-label": "progress",
-		className: (0, clsx.default)("w-full", className)
+		className: cn("w-full", className)
 	}, children));
 };
 var Stepper = Object.assign(StepperComponent, {
@@ -8942,7 +8943,7 @@ var TileToggleGroupItem = ({ children, ...rest }) => /* @__PURE__ */ react.creat
 var TileToggleGroup = react.forwardRef((props, ref) => /* @__PURE__ */ react.createElement(ToggleGroup$1.Root, {
 	ref,
 	...props,
-	className: (0, clsx.default)(props.className, "flex", "gap-2", props.orientation === "horizontal" && "flex-row", props.orientation === "vertical" && "flex-col", "flex-wrap")
+	className: cn(props.className, "flex", "gap-2", props.orientation === "horizontal" && "flex-row", props.orientation === "vertical" && "flex-col", "flex-wrap")
 }));
 TileToggleGroup.Item = TileToggleGroupItem;
 TileToggleGroup.displayName = "TileToggleGroup";
@@ -8965,7 +8966,7 @@ var ToastCloseButton = ({ onDismiss, label = "Close alert", ...rest }) => {
 			onDismiss?.();
 		},
 		...rest,
-		className: (0, clsx.default)("text-white", "-mr-2", "hover:opacity-80", "hover:text-white", "focus:opacity-80", "focus:text-white")
+		className: cn("text-white", "-mr-2", "hover:opacity-80", "hover:text-white", "focus:opacity-80", "focus:text-white")
 	}, /* @__PURE__ */ react.createElement(Icon, { is: _atom_learning_icons.Close }));
 };
 //#endregion
@@ -9327,7 +9328,7 @@ var ToggleGroup = {
 			orientation,
 			theme,
 			...rest
-		}, /* @__PURE__ */ react.createElement("div", { className: (0, clsx.default)("flex", hasGap && gapClassMap[gap], orientation === "horizontal" ? "flex-row" : "flex-col", wrap ? "flex-wrap" : "flex-nowrap") }, react.Children.toArray(children).map((child) => {
+		}, /* @__PURE__ */ react.createElement("div", { className: cn("flex", hasGap && gapClassMap[gap], orientation === "horizontal" ? "flex-row" : "flex-col", wrap ? "flex-wrap" : "flex-nowrap") }, react.Children.toArray(children).map((child) => {
 			if (react.isValidElement(child)) return react.cloneElement(child, {
 				...child.props,
 				theme
@@ -9380,7 +9381,7 @@ var TopBarBrandLogo = ({ src, alt = "Atom Learning logo", className }) => {
 	return /* @__PURE__ */ react.default.createElement(Image, {
 		src,
 		alt,
-		className: (0, clsx.default)("h-8", "mr-3", "w-auto", className)
+		className: cn("h-8", "mr-3", "w-auto", className)
 	});
 };
 var TopBarBrandName = styled(Text, { base: ["text-grey-800"] });
@@ -9551,7 +9552,7 @@ var SegmentedControlBadge = ({ className, ...props }) => {
 	return /* @__PURE__ */ react.createElement(Badge, {
 		...props,
 		size: badgeSizeMap[size],
-		className: (0, clsx.default)("border-none", className, "font-normal")
+		className: cn("border-none", className, "font-normal")
 	});
 };
 //#endregion
@@ -10004,6 +10005,7 @@ exports.Tooltip = Tooltip;
 exports.TopBar = TopBar;
 exports.Tree = Tree;
 exports.Video = Video;
+exports.cn = cn;
 exports.createTheme = createTheme;
 exports.styled = styled;
 Object.defineProperty(exports, "toast", {