Update themed components with refs and css

lib/component/input/switch/SuccessDangerSwitch.tsx

@@ -1,32 +1,38 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function SuccessDangerSwitch({
+const SuccessDangerSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
 				className,
 				{
-					"bg-red-600 data-checked:bg-green-600": !disabled,
-					"bg-red-400/80 data-checked:bg-green-400/80": disabled
+					"bg-danger data-checked:bg-success": !disabled,
+					"bg-danger-light/80 data-checked:bg-success-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-200": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+SuccessDangerSwitch.displayName = "SuccessDangerSwitch";
+
+export default SuccessDangerSwitch;