Cleanup code and tests

app/components/Checkbox.js

@@ -83,7 +83,8 @@ const Checkbox = memo(
     };
 
     // Generate unique ID for accessibility if not provided
-    const checkboxId = id || `checkbox-${useId()}`;
+    const generatedId = useId();
+    const checkboxId = id || `checkbox-${generatedId}`;
 
     const accessibilityProps = {
       role: "checkbox",

app/components/ContextMenu.js

@@ -28,7 +28,7 @@ const ContextMenu = forwardRef(
         {children}
       </div>
     );
-  }
+  },
 );
 
 ContextMenu.displayName = "ContextMenu";

app/components/ContextMenuItem.js

@@ -14,7 +14,7 @@ const ContextMenuItem = forwardRef(
       size = "medium",
       ...props
     },
-    ref
+    ref,
   ) => {
     const getTextSize = () => {
       switch (size) {
@@ -57,7 +57,7 @@ const ContextMenuItem = forwardRef(
           onClick(e);
         }
       },
-      [disabled, onClick]
+      [disabled, onClick],
     );
 
     const handleKeyDown = useCallback(
@@ -69,7 +69,7 @@ const ContextMenuItem = forwardRef(
           }
         }
       },
-      [disabled, onClick]
+      [disabled, onClick],
     );
 
     return (
@@ -119,7 +119,7 @@ const ContextMenuItem = forwardRef(
         )}
       </div>
     );
-  }
+  },
 );
 
 ContextMenuItem.displayName = "ContextMenuItem";

app/components/ContextMenuSection.js

@@ -22,7 +22,7 @@ const ContextMenuSection = forwardRef(
         {children}
       </div>
     );
-  }
+  },
 );
 
 ContextMenuSection.displayName = "ContextMenuSection";

app/components/Input.js

@@ -22,7 +22,7 @@ const Input = forwardRef(
       className = "",
       ...props
     },
-    ref
+    ref,
   ) => {
     // Generate unique ID for accessibility if not provided
     const generatedId = useId();
@@ -127,7 +127,7 @@ const Input = forwardRef(
           onChange(e);
         }
       },
-      [disabled, onChange]
+      [disabled, onChange],
     );
 
     const handleFocus = useCallback(
@@ -136,7 +136,7 @@ const Input = forwardRef(
           onFocus(e);
         }
       },
-      [disabled, onFocus]
+      [disabled, onFocus],
     );
 
     const handleBlur = useCallback(
@@ -145,7 +145,7 @@ const Input = forwardRef(
           onBlur(e);
         }
       },
-      [disabled, onBlur]
+      [disabled, onBlur],
     );
 
     return (
@@ -177,7 +177,7 @@ const Input = forwardRef(
         </div>
       </div>
     );
-  }
+  },
 );
 
 Input.displayName = "Input";

app/components/RadioButton.js

@@ -71,7 +71,8 @@ const RadioButton = ({
     "focus:outline focus:outline-1 focus:outline-[var(--color-border-default-utility-info)] focus:shadow-[0_0_10px_1px_var(--color-surface-inverse-brand-primary)]";
 
   // Generate unique ID for accessibility if not provided
-  const radioId = id || `radio-${useId()}`;
+  const generatedId = useId();
+  const radioId = id || `radio-${generatedId}`;
 
   const handleToggle = useCallback(
     (e) => {

app/components/RadioGroup.js

@@ -15,7 +15,8 @@ const RadioGroup = ({
   ...props
 }) => {
   // Generate unique ID for accessibility if not provided
-  const groupId = name || `radio-group-${useId()}`;
+  const generatedId = useId();
+  const groupId = name || `radio-group-${generatedId}`;
 
   const handleChange = useCallback(
     (optionValue) => {

app/components/Select.js

@@ -33,7 +33,8 @@ const Select = forwardRef(
     },
     ref
   ) => {
-    const selectId = id || `select-${useId()}`;
+    const generatedId = useId();
+    const selectId = id || `select-${generatedId}`;
     const labelId = `${selectId}-label`;
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState(value || "");

app/components/Switch.js

@@ -21,7 +21,7 @@ const Switch = memo(
           onChange(e);
         }
       },
-      [onChange]
+      [onChange],
     );
 
     const handleKeyDown = useCallback(
@@ -33,7 +33,7 @@ const Switch = memo(
           }
         }
       },
-      [onChange]
+      [onChange],
     );
 
     const handleFocus = useCallback(
@@ -42,7 +42,7 @@ const Switch = memo(
           onFocus(e);
         }
       },
-      [onFocus]
+      [onFocus],
     );
 
     const handleBlur = useCallback(
@@ -51,7 +51,7 @@ const Switch = memo(
           onBlur(e);
         }
       },
-      [onBlur]
+      [onBlur],
     );
 
     // Switch track styles based on checked state
@@ -155,7 +155,7 @@ const Switch = memo(
         {label && <span className={labelClasses}>{label}</span>}
       </div>
     );
-  })
+  }),
 );
 
 Switch.displayName = "Switch";

app/components/TextArea.js

@@ -22,7 +22,7 @@ const TextArea = forwardRef(
       rows,
       ...props
     },
-    ref
+    ref,
   ) => {
     // Generate unique ID for accessibility if not provided
     const generatedId = useId();
@@ -130,7 +130,7 @@ const TextArea = forwardRef(
           onChange(e);
         }
       },
-      [disabled, onChange]
+      [disabled, onChange],
     );
 
     const handleFocus = useCallback(
@@ -139,7 +139,7 @@ const TextArea = forwardRef(
           onFocus(e);
         }
       },
-      [disabled, onFocus]
+      [disabled, onFocus],
     );
 
     const handleBlur = useCallback(
@@ -148,7 +148,7 @@ const TextArea = forwardRef(
           onBlur(e);
         }
       },
-      [disabled, onBlur]
+      [disabled, onBlur],
     );
 
     return (
@@ -182,7 +182,7 @@ const TextArea = forwardRef(
         </div>
       </div>
     );
-  }
+  },
 );
 
 TextArea.displayName = "TextArea";

app/components/Toggle.js

@@ -17,7 +17,7 @@ const Toggle = forwardRef(
       className = "",
       ...props
     },
-    ref
+    ref,
   ) => {
     const toggleId = useId();
     const labelId = useId();
@@ -120,7 +120,7 @@ const Toggle = forwardRef(
           onChange(e);
         }
       },
-      [disabled, onChange]
+      [disabled, onChange],
     );
 
     const handleFocus = useCallback(
@@ -129,7 +129,7 @@ const Toggle = forwardRef(
           onFocus(e);
         }
       },
-      [disabled, onFocus]
+      [disabled, onFocus],
     );
 
     const handleBlur = useCallback(
@@ -138,7 +138,7 @@ const Toggle = forwardRef(
           onBlur(e);
         }
       },
-      [disabled, onBlur]
+      [disabled, onBlur],
     );
 
     const handleKeyDown = useCallback(
@@ -150,7 +150,7 @@ const Toggle = forwardRef(
           }
         }
       },
-      [disabled, onChange]
+      [disabled, onChange],
     );
 
     return (
@@ -186,7 +186,7 @@ const Toggle = forwardRef(
         </div>
       </div>
     );
-  }
+  },
 );
 
 Toggle.displayName = "Toggle";

app/components/ToggleGroup.js

@@ -55,7 +55,7 @@ const ToggleGroup = memo(
           onChange(e);
         }
       },
-      [onChange]
+      [onChange],
     );
 
     const handleFocus = useCallback(
@@ -64,7 +64,7 @@ const ToggleGroup = memo(
           onFocus(e);
         }
       },
-      [onFocus]
+      [onFocus],
     );
 
     const handleBlur = useCallback(
@@ -73,7 +73,7 @@ const ToggleGroup = memo(
           onBlur(e);
         }
       },
-      [onBlur]
+      [onBlur],
     );
 
     const handleKeyDown = useCallback(
@@ -85,7 +85,7 @@ const ToggleGroup = memo(
           }
         }
       },
-      [onChange]
+      [onChange],
     );
 
     const toggleClasses = `
@@ -129,7 +129,7 @@ const ToggleGroup = memo(
         {showText ? children : children || "☰"}
       </button>
     );
-  })
+  }),
 );
 
 ToggleGroup.displayName = "ToggleGroup";

app/tailwind.css

@@ -31,12 +31,15 @@
   --color-*: initial;
 
   /* Font families */
-  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system,
+  --font-sans:
+    var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-display:
+    var(--font-bricolage-grotesque), ui-sans-serif, system-ui, -apple-system,
     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-display: var(--font-bricolage-grotesque), ui-sans-serif, system-ui,
-    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-mono: var(--font-space-grotesk), ui-monospace, SFMono-Regular,
-    "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+  --font-mono:
+    var(--font-space-grotesk), ui-monospace, SFMono-Regular, "SF Mono",
+    Consolas, "Liberation Mono", Menlo, monospace;
 
   /* Dimension */
   --spacing-scale-000: 0px;