Update themed components with refs and css

lib/component/progress/WarningProgress.tsx

@@ -1,13 +1,21 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
+import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-export default function WarningProgress(props: ThemedProgressProps){
+const WarningProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+	...props
+}, ref ) => {
 	return (
 		<Progress
-			backgroundColor="var(--color-gray-300)"
-			progressColor="var(--color-yellow-500)"
+			backgroundColor="var(--color-neutral)"
+			progressColor="var(--color-warning)"
+			ref={ref}
 			{...props}
 		/>
 	);
-}
+});
+
+WarningProgress.displayName = "WarningProgress";
+
+export default WarningProgress;