Update themed components with refs and css

lib/component/input/checkbox/MoltenCheckbox.tsx

@@ -1,24 +1,30 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-export default function MoltenCheckbox({
+const MoltenCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
 	box = true,
 	...props
-}: CheckboxProps){
+}, ref) => {
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-orange-600 group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-orange-600": !box
+					"group-data-checked:bg-molten group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-molten": !box
 				}
 			)}
 			box={box}
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+MoltenCheckbox.displayName = "MoltenCheckbox";
+
+export default MoltenCheckbox;