From 9ff9e0a6eff4afb6858d0c0143a79032626f9a25 Mon Sep 17 00:00:00 2001
From: Ashley Wright <ashley.wright@mx.com>
Date: Mon, 21 Sep 2026 15:36:15 -0600
Subject: [PATCH 1/2] fix: the border around the example checkbox

---
 src/components/ExampleCheckbox.module.css | 24 ++++++++++++++++++
 src/components/ExampleCheckbox.tsx        | 31 +++++------------------
 2 files changed, 30 insertions(+), 25 deletions(-)
 create mode 100644 src/components/ExampleCheckbox.module.css

diff --git a/src/components/ExampleCheckbox.module.css b/src/components/ExampleCheckbox.module.css
new file mode 100644
index 0000000000..557360a2a7
--- /dev/null
+++ b/src/components/ExampleCheckbox.module.css
@@ -0,0 +1,24 @@
+.container {
+  position: relative;
+}
+
+.checkbox {
+  accent-color: var(--mui-palette-text-primary);
+  margin: var(--spacing-1) var(--spacing-1-point-5) var(--spacing-1) var(--spacing-point-5);
+  width: 15px;
+  height: 15px;
+}
+
+.pseudoFocus {
+  display: inline-block;
+  /* border-box so host page box-sizing resets can't shift the outline off-center */
+  box-sizing: border-box;
+  /* checkbox 15px + 1px gap + 1px border on each side */
+  width: 19px;
+  height: 19px;
+  border: 1px solid;
+  border-radius: 3px;
+  position: absolute;
+  top: 6px;
+  left: 2px;
+}
diff --git a/src/components/ExampleCheckbox.tsx b/src/components/ExampleCheckbox.tsx
index 8bf287841f..e5e181e153 100644
--- a/src/components/ExampleCheckbox.tsx
+++ b/src/components/ExampleCheckbox.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { useTheme } from '@mui/material'
 import { TouchIndicator } from 'src/components/TouchIndicator'
+import styles from 'src/components/ExampleCheckbox.module.css'
 
 export const ExampleCheckbox: React.FC<
   React.HTMLAttributes<HTMLInputElement> & {
@@ -9,26 +9,14 @@ export const ExampleCheckbox: React.FC<
     showTouchIndicator?: boolean
   }
 > = ({ id, showTouchIndicator, pseudoFocusColor }) => {
-  const theme = useTheme()
-  const checkboxSize = '15px'
-
   return (
-    <div aria-hidden="true" style={{ position: 'relative' }}>
+    <div aria-hidden="true" className={styles.container}>
       <input
         aria-hidden={true}
-        className="example-checkbox"
+        className={`example-checkbox ${styles.checkbox}`}
         defaultChecked={true}
         id={'example-' + id}
         name={'example-name-' + id}
-        style={{
-          accentColor: theme.palette.text.primary,
-          marginTop: '8px',
-          marginBottom: '8px',
-          marginRight: '12px',
-          marginLeft: '4px',
-          width: checkboxSize,
-          height: checkboxSize,
-        }}
         tabIndex={-1}
         type="checkbox"
       />
@@ -38,16 +26,9 @@ export const ExampleCheckbox: React.FC<
       {showTouchIndicator && (
         <div
           aria-hidden="true"
-          style={{
-            display: 'inline-block',
-            height: `calc(${checkboxSize} + 2px)`,
-            width: `calc(${checkboxSize} + 2px)`,
-            border: `1px solid ${pseudoFocusColor}`,
-            borderRadius: '3px',
-            position: 'absolute',
-            top: '6px',
-            left: '2px',
-          }}
+          className={styles.pseudoFocus}
+          // Border color is dynamic — it comes from the institution's brand color
+          style={{ borderColor: pseudoFocusColor }}
         />
       )}
     </div>

From 45bf8d129f76564336f4f01e7b803d87ca1ac237 Mon Sep 17 00:00:00 2001
From: Ashley Wright <ashley.wright@mx.com>
Date: Tue, 22 Sep 2026 10:24:35 -0600
Subject: [PATCH 2/2] removed some custom styles

---
 src/components/ExampleCheckbox.module.css | 30 +++++++++++++++--------
 src/components/ExampleCheckbox.tsx        |  9 +++----
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/ExampleCheckbox.module.css b/src/components/ExampleCheckbox.module.css
index 557360a2a7..01ae2c8372 100644
--- a/src/components/ExampleCheckbox.module.css
+++ b/src/components/ExampleCheckbox.module.css
@@ -1,24 +1,34 @@
 .container {
   position: relative;
+  margin: var(--spacing-1) var(--spacing-1-point-5) var(--spacing-1) var(--spacing-point-5);
 }
 
-.checkbox {
-  accent-color: var(--mui-palette-text-primary);
-  margin: var(--spacing-1) var(--spacing-1-point-5) var(--spacing-1) var(--spacing-point-5);
-  width: 15px;
-  height: 15px;
+/* The panel mimics the institution's site, so the checkbox follows the text color
+   instead of the widget's primary color. Removing the padding makes the element box
+   match the icon so the overlays below can center on it. */
+.checkbox:global(.MuiCheckbox-root),
+.checkbox:global(.MuiCheckbox-root.Mui-checked) {
+  color: var(--mui-palette-text-primary);
+  padding: 0;
+}
+
+/* Center the touch indicator over the checkbox */
+.touchIndicator {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .pseudoFocus {
-  display: inline-block;
-  /* border-box so host page box-sizing resets can't shift the outline off-center */
+  /* border-box so host page box-sizing resets can't change the outline size */
   box-sizing: border-box;
-  /* checkbox 15px + 1px gap + 1px border on each side */
+  /* the small checkbox SVG is 20px but its drawn box is only ~15px; 19px leaves a ~1px gap */
   width: 19px;
   height: 19px;
   border: 1px solid;
   border-radius: 3px;
   position: absolute;
-  top: 6px;
-  left: 2px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
diff --git a/src/components/ExampleCheckbox.tsx b/src/components/ExampleCheckbox.tsx
index e5e181e153..ffd94e9f67 100644
--- a/src/components/ExampleCheckbox.tsx
+++ b/src/components/ExampleCheckbox.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Checkbox } from '@mui/material'
 import { TouchIndicator } from 'src/components/TouchIndicator'
 import styles from 'src/components/ExampleCheckbox.module.css'
 
@@ -11,17 +12,15 @@ export const ExampleCheckbox: React.FC<
 > = ({ id, showTouchIndicator, pseudoFocusColor }) => {
   return (
     <div aria-hidden="true" className={styles.container}>
-      <input
-        aria-hidden={true}
+      <Checkbox
         className={`example-checkbox ${styles.checkbox}`}
         defaultChecked={true}
         id={'example-' + id}
         name={'example-name-' + id}
+        size="small"
         tabIndex={-1}
-        type="checkbox"
       />
-      {/* Position the touch indicator to be centered over the checkbox */}
-      {showTouchIndicator && <TouchIndicator style={{ left: '-8px', top: '-4px' }} />}
+      {showTouchIndicator && <TouchIndicator className={styles.touchIndicator} />}
       {/* If we are showing the psuedo touch indicator, also show the pseudo-focus for the checkbox */}
       {showTouchIndicator && (
         <div