Update radio button component

app/components/RadioButton/RadioButton.view.tsx

@@ -3,6 +3,7 @@ import type { RadioButtonViewProps } from "./RadioButton.types";
 export function RadioButtonView({
   radioId,
   checked,
+  mode,
   disabled,
   label,
   name,
@@ -10,15 +11,10 @@ export function RadioButtonView({
   ariaLabel,
   className,
   combinedBoxStyles,
-  defaultOutlineClass,
-  conditionalHoverOutlineClass,
-  conditionalFocusClass,
-  backgroundWhenChecked,
   dotColor,
   labelColor,
   onToggle,
   onKeyDown,
-  ...props
 }: RadioButtonViewProps) {
   return (
     <label
@@ -30,25 +26,25 @@ export function RadioButtonView({
     >
       <span
         onKeyDown={onKeyDown}
-        className={`${combinedBoxStyles} ${defaultOutlineClass} ${conditionalHoverOutlineClass} ${conditionalFocusClass} p-[var(--measures-spacing-004)]`}
-        style={{
-          backgroundColor: backgroundWhenChecked,
-        }}
-        tabIndex={0}
+        className={`group ${combinedBoxStyles} ${disabled ? "" : "cursor-pointer"}`}
+        tabIndex={disabled ? -1 : 0}
         role="radio"
         aria-checked={checked}
         {...(disabled && { "aria-disabled": true })}
         {...(ariaLabel && { "aria-label": ariaLabel })}
         {...(label && !ariaLabel && { "aria-labelledby": `${radioId}-label` })}
         id={radioId}
-        {...props}
       >
-        {/* Radio dot */}
+        {/* Radio dot - 16px size per Figma */}
+        {/* Selected hover state: darker dot color (#333000) per Figma */}
         <div
-          className="w-[16px] h-[16px] rounded-full transition-all duration-200"
-          style={{
-            backgroundColor: dotColor,
-          }}
+          className={`w-[16px] h-[16px] rounded-full transition-all duration-200 ${
+            checked && mode === "standard"
+              ? "bg-[var(--color-content-default-brand-primary,#fefcc9)] group-hover:!bg-[#333000]"
+              : checked && mode === "inverse"
+              ? "bg-[var(--color-content-default-primary,#000000)]"
+              : "bg-transparent"
+          }`}
         />
       </span>
       {label && (