SaaS fixes (#6578)

Co-authored-by: Claude Opus 4.8 <[email protected]>
Co-authored-by: James Brunton <[email protected]>
Co-authored-by: Reece Browne <[email protected]>
Co-authored-by: ConnorYoh <[email protected]>
Co-authored-by: Reece <[email protected]>
Co-authored-by: EthanHealy01 <[email protected]>
Co-authored-by: Ludy <[email protected]>

frontend/shared/components/Checkbox.tsx

@@ -7,13 +7,15 @@ export interface CheckboxProps extends Omit<
 > {
   label?: ReactNode;
   description?: ReactNode;
+  /** Optional glyph shown between the box and the label text. */
+  leadingIcon?: ReactNode;
   /** Tri-state checkbox visual (still focusable + submittable, but renders the dash). */
   indeterminate?: boolean;
 }
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   function Checkbox(
-    { label, description, indeterminate, className, id, ...rest },
+    { label, description, leadingIcon, indeterminate, className, id, ...rest },
     ref,
   ) {
     return (
@@ -57,6 +59,11 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           </svg>
           <span className="sui-check__dash" />
         </span>
+        {leadingIcon && (
+          <span className="sui-check__icon" aria-hidden>
+            {leadingIcon}
+          </span>
+        )}
         {(label || description) && (
           <span className="sui-check__text">
             {label && <span className="sui-check__label">{label}</span>}