luna-components-library 1.1.38 → 1.1.40

package/dist/luna-components-library.js

@@ -111,15 +111,7 @@ var commonStyles = {
 		padding: "1rem",
 		display: "flex",
 		alignItems: "center",
-		justifyContent: "space-between",
-		backgroundColor: colors.bgHeader,
-		border: "none",
-		cursor: "pointer",
-		textAlign: "left",
-		fontSize: fontSizes.sm,
-		fontWeight: fontWeights.semibold,
-		color: colors.text,
-		outline: "none"
+		justifyContent: "space-between"
 	},
 	chevron: {
 		fontSize: fontSizes.xs,
@@ -200,15 +192,11 @@ var commonStyles = {
 	},
 	buttonBase: {
 		display: "inline-flex",
-		alignItems: "center",
-		justifyContent: "center",
 		fontWeight: fontWeights.medium,
 		borderRadius: radii.md,
-		transition: transitions.fast,
-		cursor: "pointer",
-		outline: "none",
-		border: "1px solid transparent"
+		hover: { backgroundColor: colors.bgHover }
 	},
+	anchorBase: {},
 	inputWrapper: {
 		position: "relative",
 		display: "inline-block",
@@ -296,7 +284,8 @@ var dataTableStyles = (styles) => ({
 	},
 	searchContainer: {
 		padding: "1rem",
-		borderBottom: `1px solid ${colors.border}`
+		borderBottom: `1px solid ${colors.border}`,
+		...styles?.searchContainer
 	},
 	table: {
 		width: "100%",
@@ -324,12 +313,25 @@ var dataTableStyles = (styles) => ({
 	},
 	tr: (clickable) => ({
 		transition: transitions.bg,
-		cursor: clickable ? "pointer" : "default"
+		cursor: clickable ? "pointer" : "default",
+		...styles?.tr
 	}),
-	pagination: { ...commonStyles.pagination },
-	icon: { ...commonStyles.icon },
-	filterMenu: { ...commonStyles.filterMenu },
-	filterOption: (active) => ({ ...commonStyles.filterOption(active) })
+	pagination: {
+		...commonStyles.pagination,
+		...styles?.pagination
+	},
+	icon: {
+		...commonStyles.icon,
+		...styles?.icon
+	},
+	filterMenu: {
+		...commonStyles.filterMenu,
+		...styles?.filterMenu
+	},
+	filterOption: (active) => ({
+		...commonStyles.filterOption(active),
+		...styles?.filterOption
+	})
 });
 var dropDownStyles = (styles, disabled, isOpen, hoverIndex, value) => ({
 	container: {
@@ -374,7 +376,8 @@ var dropDownStyles = (styles, disabled, isOpen, hoverIndex, value) => ({
 	arrow: {
 		...commonStyles.chevron,
 		marginLeft: "0.5rem",
-		transform: isOpen ? "rotate(180deg)" : "rotate(0deg)"
+		transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+		...styles?.arrow
 	}
 });
 var variantStyles = {
@@ -423,27 +426,15 @@ var variantStyles = {
 		textDecoration: "underline"
 	}
 };
-var variantClasses = {
-	primary: "bg-blue-600 text-white hover:bg-blue-700",
-	secondary: "bg-gray-600 text-white hover:bg-gray-700",
-	outline: "border border-gray-300 text-gray-700 hover:bg-gray-50",
-	success: "bg-green-600 text-white hover:bg-green-700",
-	danger: "bg-red-600 text-white hover:bg-red-700",
-	warning: "bg-yellow-500 text-white hover:bg-yellow-600",
-	info: "bg-cyan-600 text-white hover:bg-cyan-700",
-	dark: "bg-gray-900 text-white hover:bg-gray-800",
-	light: "bg-gray-100 text-gray-900 hover:bg-gray-200",
-	link: "text-blue-600 hover:text-blue-800 hover:underline"
-};
 var inputStyles = (styles, extraStyle, inputSize, readOnly, disabled) => ({
 	container: {
 		...commonStyles.inputWrapper,
-		...styles?.container,
+		styles,
 		...extraStyle
 	},
 	label: {
 		...commonStyles.inputLabel,
-		...styles?.label
+		styles
 	},
 	input: {
 		...commonStyles.inputField,
@@ -452,7 +443,7 @@ var inputStyles = (styles, extraStyle, inputSize, readOnly, disabled) => ({
 		backgroundColor: readOnly ? colors.borderLight : colors.white,
 		cursor: disabled ? "not-allowed" : readOnly ? "default" : "text",
 		opacity: disabled ? .5 : 1,
-		...styles?.input
+		styles
 	},
 	variants: {
 		none: {},
@@ -483,14 +474,14 @@ var multiSelectStyles = (styles, disabled, isOpen) => ({
 	container: {
 		position: "relative",
 		width: "100%",
-		...styles?.container
+		styles
 	},
 	trigger: {
 		...commonStyles.trigger,
 		minHeight: "2.5rem",
 		cursor: disabled ? "not-allowed" : "pointer",
 		opacity: disabled ? .6 : 1,
-		...styles?.trigger
+		styles
 	},
 	chevron: {
 		...commonStyles.chevron,
@@ -499,7 +490,7 @@ var multiSelectStyles = (styles, disabled, isOpen) => ({
 	panel: {
 		...commonStyles.panel,
 		display: isOpen ? "block" : "none",
-		...styles?.panel
+		styles
 	},
 	header: {
 		...commonStyles.header,
@@ -507,7 +498,7 @@ var multiSelectStyles = (styles, disabled, isOpen) => ({
 		borderBottom: `1px solid ${colors.borderLight}`,
 		flexDirection: "column",
 		gap: "0.5rem",
-		...styles?.header
+		styles
 	},
 	selectAllWrapper: {
 		display: "flex",
@@ -520,12 +511,12 @@ var multiSelectStyles = (styles, disabled, isOpen) => ({
 	list: { ...commonStyles.list },
 	item: (isSelected, isDisabled) => ({
 		...commonStyles.item(isSelected, isDisabled),
-		...styles?.item
+		styles
 	}),
 	checkbox: { ...commonStyles.checkbox },
 	chip: {
 		...commonStyles.chip,
-		...styles?.chip
+		styles
 	},
 	chipIcon: {
 		cursor: "pointer",
@@ -580,13 +571,15 @@ var popconfirmStyles = (styles, show, position) => ({
 		display: "flex",
 		alignItems: "flex-start",
 		gap: "0.5rem",
-		marginBottom: "0.5rem"
+		marginBottom: "0.5rem",
+		...styles?.titleWrapper
 	},
 	icon: {
 		color: "#eab308",
 		fontSize: "1rem",
 		fontWeight: "bold",
-		marginTop: "1px"
+		marginTop: "1px",
+		...styles?.icon
 	},
 	title: {
 		fontSize: fontSizes.sm,
@@ -604,7 +597,8 @@ var popconfirmStyles = (styles, show, position) => ({
 	actions: {
 		display: "flex",
 		justifyContent: "flex-end",
-		gap: "0.5rem"
+		gap: "0.5rem",
+		...styles?.actions
 	}
 });
 var preloaderStyles = (zIndex, backgroundColor, size, borderWidth, styles) => ({
@@ -722,7 +716,8 @@ var qrCodeStyles = (styles, bordered, cleanBgColor, size, isLoading) => ({
 		backgroundColor: colors.bgSkeleton,
 		borderRadius: radii.sm,
 		display: isLoading ? "block" : "none",
-		animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+		animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+		...styles?.skeleton
 	}
 });
 var spinnerAnimationStyles = `
@@ -861,7 +856,8 @@ var toastStyles = (styles, severity, position, isExiting, visible) => {
 			color: config.text,
 			fontSize: fontSizes.sm,
 			fontWeight: fontWeights.bold,
-			flexShrink: 0
+			flexShrink: 0,
+			...styles?.iconWrapper
 		},
 		content: {
 			flex: 1,
@@ -895,7 +891,8 @@ var toastStyles = (styles, severity, position, isExiting, visible) => {
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
-			flexShrink: 0
+			flexShrink: 0,
+			...styles?.closeButton
 		}
 	};
 };
@@ -1013,34 +1010,27 @@ var modalSizeClasses = {
 var modalOverlayClasses = (show, animation, className) => `fixed inset-0 z-60 flex items-center justify-center ${show ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"} ${animation ? "transition-opacity duration-300" : ""} ${className}`.trim();
 var modalDialogClasses = (size, centered, dialogClassName) => `relative w-full ${modalSizeClasses[size]} mx-auto ${centered ? "flex items-center justify-center min-h-screen" : "mt-8"} ${dialogClassName}`.trim();
 var anchorBaseStyles = (variant, isHovered, size) => ({
-	...commonStyles.buttonBase,
-	gap: "0",
-	cursor: "pointer",
+	...commonStyles.anchorBase,
 	textDecoration: variant === "none" ? isHovered ? "underline" : "none" : "none",
-	border: variant === "none" ? "none" : "1px solid transparent",
 	...variant !== "none" ? sizeStyles[size] : {},
-	display: variant === "none" ? "inline" : "inline-flex",
 	borderRadius: variant === "none" ? "0" : radii.md
 });
 var accordionStyles = (isActive, styles) => ({
 	container: {
 		...commonStyles.container,
 		overflow: "hidden",
-		marginBottom: "0.5rem",
-		...styles?.container
+		marginBottom: "0.5rem"
 	},
 	header: {
 		...commonStyles.header,
-		transition: transitions.bgSlow,
-		...styles?.header
+		transition: transitions.bgSlow
 	},
 	content: {
 		maxHeight: isActive ? "1000px" : "0",
 		opacity: isActive ? 1 : 0,
 		overflow: "hidden",
 		transition: transitions.normal,
-		borderTop: isActive ? `1px solid ${colors.border}` : "none",
-		...styles?.content
+		borderTop: isActive ? `1px solid ${colors.border}` : "none"
 	},
 	innerContent: {
 		padding: "1rem",
@@ -1049,27 +1039,48 @@ var accordionStyles = (isActive, styles) => ({
 	},
 	arrow: {
 		...commonStyles.chevron,
-		transform: isActive ? "rotate(180deg)" : "rotate(0deg)",
-		...styles?.arrow
+		transform: isActive ? "rotate(180deg)" : "rotate(0deg)"
 	}
 });
-var anchorVariantStyles = (isHovered) => ({
+var standardVariantStyles = (isHovered) => ({
 	none: { color: colors.primary },
 	primary: {
 		backgroundColor: isHovered ? "#1d4ed8" : "#2563eb",
-		color: "#ffffff",
-		border: "1px solid transparent"
+		color: isHovered ? "black" : "white"
 	},
 	secondary: {
-		backgroundColor: isHovered ? "#374151" : "#4b5563",
-		color: "#ffffff",
-		border: "1px solid transparent"
+		backgroundColor: isHovered ? "#6d737c" : "#4b5563",
+		color: isHovered ? "black" : "white"
 	},
 	outline: {
-		backgroundColor: isHovered ? "#f9fafb" : "transparent",
-		color: "#374151",
-		border: `1px solid ${colors.borderInput}`
-	}
+		backgroundColor: isHovered ? "lightgray" : "white",
+		color: isHovered ? "white" : "black"
+	},
+	danger: {
+		backgroundColor: isHovered ? "#b91c1c" : "#dc2626",
+		color: isHovered ? "black" : "white"
+	},
+	success: {
+		backgroundColor: isHovered ? "#15803d" : "#16a34a",
+		color: isHovered ? "black" : "white"
+	},
+	warning: {
+		backgroundColor: isHovered ? "#d97706" : "#f59e0b",
+		color: isHovered ? "black" : "white"
+	},
+	info: {
+		backgroundColor: isHovered ? "#0891b2" : "#0ea5e9",
+		color: isHovered ? "black" : "white"
+	},
+	dark: {
+		backgroundColor: isHovered ? "#1f2937" : "#111827",
+		color: isHovered ? "black" : "white"
+	},
+	light: {
+		backgroundColor: isHovered ? "#f3f4f6" : "#f9fafb",
+		color: isHovered ? "black" : "white"
+	},
+	link: { color: isHovered ? colors.primary : colors.text }
 });
 //#endregion
 //#region node_modules/react/cjs/react-jsx-runtime.production.js
@@ -1111,27 +1122,39 @@ var import_jsx_runtime = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
 	module.exports = require_react_jsx_runtime_production();
 })))();
 var Button = ({ children, variant = "primary", size = "sm", onClick, disabled = false, classNames = {}, styles = {}, className = "", style: extraStyle = {}, ...props }) => {
-	const finalButtonStyle = {
+	const [isHovered, setIsHovered] = useState(false);
+	const finalClassNames = {
+		container: "",
+		button: "",
+		variant: "",
+		size: "",
+		...classNames
+	};
+	const baseButtonStyle = {
 		...commonStyles.buttonBase,
 		cursor: disabled ? "not-allowed" : "pointer",
 		opacity: disabled ? .5 : 1,
-		...sizeStyles[size],
-		...styles.button,
-		...variantStyles[variant],
+		...sizeStyles[size]
+	};
+	const uiStyles = { variants: standardVariantStyles(isHovered) };
+	const finalButtonStyle = {
+		...baseButtonStyle,
+		...uiStyles.variants[variant],
 		...extraStyle
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
 		className: [
-			classNames.container || "",
-			variantClasses[variant],
+			finalClassNames.container,
 			sizeClasses[size],
-			classNames.button || "",
+			finalClassNames.button,
 			"luna-button",
 			className
 		].filter(Boolean).join(" ").trim(),
 		onClick,
 		disabled,
 		style: finalButtonStyle,
+		onMouseEnter: () => setIsHovered(true),
+		onMouseLeave: () => setIsHovered(false),
 		...props,
 		children
 	});
@@ -1162,7 +1185,7 @@ var Anchor = ({ children, variant = "none", size = "md", href = "https://andreyc
 	const combinedClassName = `luna-anchor ${className}`.trim();
 	const uiStyles = {
 		base: anchorBaseStyles(variant, isHovered, size),
-		variants: anchorVariantStyles(isHovered)
+		variants: standardVariantStyles(isHovered)
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
 		href,
@@ -1197,6 +1220,7 @@ var Accordion = ({ title, children, defaultActive = false, active: externalActiv
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
 			type: "button",
 			style: uiStyles.header,
+			className: "accordion-button",
 			onClick: handleToggle,
 			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 				style: uiStyles.arrow,
@@ -1204,6 +1228,7 @@ var Accordion = ({ title, children, defaultActive = false, active: externalActiv
 			})]
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 			style: uiStyles.content,
+			className: "accordion-content",
 			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 				style: uiStyles.innerContent,
 				children
@@ -1331,13 +1356,13 @@ var Spinner = ({ className = "", size = "md", type = "circle", color = "#2563eb"
 };
 //#endregion
 //#region src/components/DropDown.tsx
-var DropDown = ({ options, value, onChange, placeholder = "Select an option", toggle, classNames = {}, styles = {}, disabled = false, className }) => {
+var DropDown = ({ options, value, onChange, placeholder = "Select an option", toggle, className, styles, disabled = false }) => {
 	const finalClassNames = {
 		container: "luna-dropdown",
 		trigger: "luna-dropdown-trigger",
 		panel: "luna-dropdown-panel",
 		option: "luna-dropdown-option",
-		...classNames
+		className
 	};
 	const [isOpen, setIsOpen] = useState(false);
 	const [hoverIndex, setHoverIndex] = useState(null);
@@ -1694,13 +1719,13 @@ var Modal = ({ show, onHide, size = "md", centered = false, backdrop = true, bac
 };
 //#endregion
 //#region src/components/Input.tsx
-var Input = ({ children, variant = "none", type = "text", inputSize = "md", placeholder, value: controlledValue, onChange, onFocus, onBlur, disabled = false, required = false, readOnly = false, id, name, mask, maskChar = "_", useCurrency = false, currency = "USD", locale = "en-US", minFractionDigits = 0, maxFractionDigits = 2, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, classNames = {}, styles = {}, className: extraClassName = "", style: extraStyle = {}, ...props }) => {
+var Input = ({ children, variant = "none", type = "text", inputSize = "md", placeholder, value: controlledValue, onChange, onFocus, onBlur, disabled = false, required = false, readOnly = false, id, name, mask, maskChar = "_", useCurrency = false, currency = "USD", locale = "en-US", minFractionDigits = 0, maxFractionDigits = 2, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, classNames, styles, className: extraClassName = "", style: extraStyle = {}, ...props }) => {
 	const inputId = id || name;
 	const finalClassNames = {
 		container: "luna-input",
 		input: "luna-input-field",
 		label: "luna-input-label",
-		...classNames
+		classNames
 	};
 	const [internalValue, setInternalValue] = useState(controlledValue || "");
 	useEffect(() => {
@@ -1806,7 +1831,7 @@ var Input = ({ children, variant = "none", type = "text", inputSize = "md", plac
 };
 //#endregion
 //#region src/components/DataTable.tsx
-var DataTable = ({ columns, data, pagination = false, pageSize = 10, selectable = false, onSelectionChange, onRowClick, onRowDoubleClick, searchable = false, texts = {}, classNames = {}, styles = {}, className }) => {
+var DataTable = ({ columns, data, pagination = false, pageSize = 10, selectable = false, onSelectionChange, onRowClick, onRowDoubleClick, searchable = false, texts = {}, classNames, styles, className }) => {
 	const finalClassNames = {
 		container: "luna-datatable",
 		table: "luna-datatable-table",
@@ -1817,7 +1842,7 @@ var DataTable = ({ columns, data, pagination = false, pageSize = 10, selectable
 		td: "luna-datatable-td",
 		pagination: "luna-datatable-pagination",
 		searchContainer: "luna-datatable-search",
-		...classNames
+		classNames
 	};
 	const [currentPage, setCurrentPage] = useState(1);
 	const [sortConfig, setSortConfig] = useState(null);
@@ -1979,7 +2004,6 @@ var DataTable = ({ columns, data, pagination = false, pageSize = 10, selectable
 						})
 					}, col.key))] })
 				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", {
-					style: styles.tbody,
 					className: finalClassNames.tbody,
 					children: paginatedData.length > 0 ? paginatedData.map((row, idx) => {
 						const rowId = row.id || row._id || JSON.stringify(row);
@@ -2073,7 +2097,7 @@ var DataTable = ({ columns, data, pagination = false, pageSize = 10, selectable
 };
 //#endregion
 //#region src/components/Toast.tsx
-var Toast = ({ visible, severity = "info", summary, detail, life, onClose, position = "top-right", classNames = {}, styles = {}, className }) => {
+var Toast = ({ visible, severity = "info", summary, detail, life, onClose, position = "top-right", classNames, styles, className }) => {
 	const finalClassNames = {
 		container: "luna-toast",
 		content: "luna-toast-content",
@@ -2081,7 +2105,7 @@ var Toast = ({ visible, severity = "info", summary, detail, life, onClose, posit
 		summary: "luna-toast-summary",
 		detail: "luna-toast-detail",
 		closeButton: "luna-toast-close",
-		...classNames
+		classNames
 	};
 	const [isExiting, setIsExiting] = useState(false);
 	useEffect(() => {
@@ -2104,19 +2128,19 @@ var Toast = ({ visible, severity = "info", summary, detail, life, onClose, posit
 	const uiStyles = toastStyles(styles, severity, position, isExiting, visible);
 	const config = toastSeverityConfig[severity || "info"];
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: `${finalClassNames.container} ${className || ""}`.trim(),
+		className: `${finalClassNames?.container} ${className || ""}`.trim(),
 		style: uiStyles.container,
 		children: [
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: finalClassNames.icon,
+				className: finalClassNames?.icon,
 				style: uiStyles.iconWrapper,
 				children: config.icon
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: finalClassNames.content,
+				className: finalClassNames?.content,
 				style: uiStyles.content,
 				children: [summary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-					className: finalClassNames.summary,
+					className: finalClassNames?.summary,
 					style: uiStyles.summary,
 					children: summary
 				}), detail && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
@@ -2138,7 +2162,7 @@ var Toast = ({ visible, severity = "info", summary, detail, life, onClose, posit
 };
 //#endregion
 //#region src/components/MultiSelect.tsx
-var MultiSelect = ({ options, value = [], onChange, id, placeholder = "Select Items", display = "comma", filter = true, filterPlaceholder = "Search...", selectAll = true, maxSelectedLabels = 3, classNames = {}, styles = {}, disabled = false, className }) => {
+var MultiSelect = ({ options, value = [], onChange, id, placeholder = "Select Items", display = "comma", filter = true, filterPlaceholder = "Search...", selectAll = true, maxSelectedLabels = 3, classNames, styles, disabled = false }) => {
 	const finalClassNames = {
 		container: "luna-multiselect",
 		trigger: "luna-multiselect-trigger",
@@ -2146,7 +2170,7 @@ var MultiSelect = ({ options, value = [], onChange, id, placeholder = "Select It
 		header: "luna-multiselect-header",
 		item: "luna-multiselect-item",
 		chip: "luna-multiselect-chip",
-		...classNames
+		classNames
 	};
 	const [isOpen, setIsOpen] = useState(false);
 	const [filterText, setFilterText] = useState("");
@@ -2202,7 +2226,7 @@ var MultiSelect = ({ options, value = [], onChange, id, placeholder = "Select It
 	const uiStyles = multiSelectStyles(styles, disabled, isOpen);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		ref: containerRef,
-		className: `${finalClassNames.container} ${className || ""}`.trim(),
+		className: `${finalClassNames.container} ${classNames || ""}`.trim(),
 		style: uiStyles.container,
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: finalClassNames.trigger,
@@ -2240,7 +2264,7 @@ var MultiSelect = ({ options, value = [], onChange, id, placeholder = "Select It
 					placeholder: filterPlaceholder,
 					value: filterText,
 					onChange: setFilterText,
-					classNames: { container: "w-full" }
+					className: "w-full"
 				})]
 			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 				style: uiStyles.list,
@@ -2275,7 +2299,7 @@ var MultiSelect = ({ options, value = [], onChange, id, placeholder = "Select It
 };
 //#endregion
 //#region src/components/Popconfirm.tsx
-var Popconfirm = ({ title, description, onConfirm, onCancel, okText = "Yes", cancelText = "No", position = "top", children, classNames = {}, styles = {}, disabled = false, className = "" }) => {
+var Popconfirm = ({ title, description, onConfirm, onCancel, okText = "Yes", cancelText = "No", position = "top", children, classNames, styles, disabled = false, className = "" }) => {
 	const finalClassNames = {
 		container: "luna-popconfirm",
 		popover: "luna-popconfirm-popover",
@@ -2284,7 +2308,7 @@ var Popconfirm = ({ title, description, onConfirm, onCancel, okText = "Yes", can
 		actions: "luna-popconfirm-actions",
 		okButton: "luna-popconfirm-ok",
 		cancelButton: "luna-popconfirm-cancel",
-		...classNames
+		classNames
 	};
 	const [show, setShow] = useState(false);
 	const containerRef = useRef(null);
@@ -2358,11 +2382,11 @@ var Popconfirm = ({ title, description, onConfirm, onCancel, okText = "Yes", can
 };
 //#endregion
 //#region src/components/QRCode.tsx
-var QRCode = ({ value, size = 160, color = "000000", bgColor = "ffffff", bordered = true, classNames = {}, styles = {}, errorCorrectionLevel = "M", className }) => {
+var QRCode = ({ value, size = 160, color = "000000", bgColor = "ffffff", bordered = true, classNames, styles, errorCorrectionLevel = "M", className }) => {
 	const finalClassNames = {
 		container: "luna-qrcode",
 		image: "luna-qrcode-image",
-		...classNames
+		classNames
 	};
 	const [isLoading, setIsLoading] = useState(true);
 	const cleanColor = color.startsWith("#") ? color.slice(1) : color;