fix: the border around the example checkbox

src/components/ExampleCheckbox.module.css

@@ -0,0 +1,34 @@
+.container {
+  position: relative;
+  margin: var(--spacing-1) var(--spacing-1-point-5) var(--spacing-1) var(--spacing-point-5);
+}
+
+/* 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 {
+  /* border-box so host page box-sizing resets can't change the outline size */
+  box-sizing: border-box;
+  /* 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: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

src/components/ExampleCheckbox.tsx

@@ -1,53 +1,33 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { useTheme } from '@mui/material'
+import { Checkbox } 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> & {
     pseudoFocusColor: string
     showTouchIndicator?: boolean
   }
 > = ({ id, showTouchIndicator, pseudoFocusColor }) => {
-  const theme = useTheme()
-  const checkboxSize = '15px'
-
   return (
-    <div aria-hidden="true" style={{ position: 'relative' }}>
-      <input
-        aria-hidden={true}
-        className="example-checkbox"
+    <div aria-hidden="true" className={styles.container}>
+      <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,
-        }}
+        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
           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>