feat: enhance typography and accessibility in design system

- Added new UI heading utility with specific styles in typography.css.
- Updated typography tests to include new UI heading role and ensure proper size and styling.
- Documented design system audit findings, focusing on accessibility improvements and component consistency.
- Introduced CalendarExamples component to demonstrate calendar functionality with habit tracking.
- Created a shared Field component for consistent labeling and hinting of form controls.
- Implemented comprehensive accessibility tests for calendar and editor components, ensuring proper focus management and keyboard navigation.
- Added structure tests for Field and Card components to verify correct ID generation and heading levels.

styles/typography.css

@@ -5,6 +5,8 @@
   --text-copy--line-height: 1.5;
   --text-caption: 0.875rem;
   --text-caption--line-height: 1.5;
+  --text-ui-heading: 1.125rem;
+  --text-ui-heading--line-height: 1.5;
   --text-lead: 1.25rem;
   --text-lead--line-height: 1.5;
   --text-title: 2rem;
@@ -17,6 +19,12 @@
 
 @utility type-body { @apply text-copy; }
 @utility type-small { @apply text-caption; }
+@utility type-ui-heading {
+  @apply text-ui-heading;
+  font-family: var(--ds-sans);
+  font-weight: 500;
+  letter-spacing: normal;
+}
 @utility type-label {
   @apply text-caption;
   font-weight: 500;