Fix tcs type errors

app/components/AskOrganizer.tsx

@@ -45,7 +45,7 @@ const AskOrganizer = memo<AskOrganizerProps>(
   }) => {
     // Analytics tracking for contact button clicks
     const handleContactClick = (
-      event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
+      _event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
     ) => {
       // Track contact button interaction
       if (onContactClick) {

app/components/Button.tsx

@@ -89,47 +89,37 @@ const Button = memo<ButtonProps>(
         : hoverOutlineStyles[size];
 
     const baseStyles = `inline-flex items-center justify-start box-border ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-500 ease-in-out cursor-pointer ${variantStyles[variant]} ${outlineStyles}`;
-
-    let finalVariant = variant;
-    if (disabled) {
-      finalVariant = "default";
-    }
-
     const combinedStyles = `${baseStyles} ${className}`;
 
-    const accessibilityProps = {
+    const sharedA11y = {
       ...(ariaLabel && { "aria-label": ariaLabel }),
-      ...(disabled && { "aria-disabled": "true" }),
-      ...(target && { target }),
-      ...(rel && { rel }),
+      ...(disabled && { "aria-disabled": true }),
       tabIndex: disabled ? -1 : 0,
-      ...props,
     };
 
     if (href && !disabled) {
-      return (
-        <a
-          href={href}
-          className={combinedStyles}
-          onClick={onClick}
-          {...accessibilityProps}
-        >
-          {children}
-        </a>
-      );
+      const anchorProps: React.AnchorHTMLAttributes<HTMLAnchorElement> = {
+        href,
+        className: combinedStyles,
+        onClick,
+        ...sharedA11y,
+        ...(target && { target }),
+        ...(rel && { rel }),
+      };
+
+      return <a {...anchorProps}>{children}</a>;
     }
 
-    return (
-      <button
-        type={type}
-        className={combinedStyles}
-        disabled={disabled}
-        onClick={onClick}
-        {...accessibilityProps}
-      >
-        {children}
-      </button>
-    );
+    const buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {
+      type,
+      className: combinedStyles,
+      disabled,
+      onClick,
+      ...sharedA11y,
+      ...props,
+    };
+
+    return <button {...buttonProps}>{children}</button>;
   },
 );
 

app/components/Checkbox.tsx

@@ -43,15 +43,9 @@ const Checkbox = memo<CheckboxProps>(
     const isInverse = mode === "inverse";
 
     // Base tokens (rough placeholders leveraging existing CSS variables)
-    const colorSurface = isInverse
-      ? "var(--color-surface-inverse-primary)"
-      : "var(--color-surface-default-primary)";
     const colorContent = isInverse
       ? "var(--color-content-inverse-primary)"
       : "var(--color-content-default-primary)";
-    const colorBrand = isInverse
-      ? "var(--color-content-inverse-brand-primary)"
-      : "var(--color-content-default-brand-primary)";
 
     // Visual container depending on state
     const baseBox = `flex items-center justify-center shrink-0 w-[var(--measures-sizing-024)] h-[var(--measures-sizing-024)] rounded-[var(--measures-radius-medium)] transition-all duration-200 ease-in-out`;
@@ -106,8 +100,8 @@ const Checkbox = memo<CheckboxProps>(
 
     const accessibilityProps = {
       role: "checkbox" as const,
-      "aria-checked": checked ? "true" : "false",
-      ...(disabled && { "aria-disabled": "true", tabIndex: -1 }),
+      "aria-checked": checked,
+      ...(disabled && { "aria-disabled": true, tabIndex: -1 }),
       ...(!disabled && { tabIndex: 0 }),
       ...(ariaLabel && { "aria-label": ariaLabel }),
       ...(label && !ariaLabel && { "aria-labelledby": `${checkboxId}-label` }),

app/components/ContentLockup.tsx

@@ -34,7 +34,6 @@ const ContentLockup = memo<ContentLockupProps>(
     subtitle,
     description,
     ctaText,
-    ctaHref,
     buttonClassName = "",
     variant = "hero",
     linkText,

app/components/ContentThumbnailTemplate.tsx

@@ -18,7 +18,7 @@ interface ContentThumbnailTemplateProps {
 }
 
 const ContentThumbnailTemplate = memo<ContentThumbnailTemplateProps>(
-  ({ post, className = "", variant = "vertical", slugOrder }) => {
+  ({ post, className = "", variant = "vertical" }) => {
     // Get article-specific background image from frontmatter
     const getBackgroundImage = (
       post: BlogPost,

app/components/Header.tsx

@@ -59,7 +59,19 @@ const Header = memo(() => {
     },
   };
 
-  const renderNavigationItems = (size: string) => {
+  type NavSize =
+    | "default"
+    | "xsmall"
+    | "xsmallUseCases"
+    | "home"
+    | "homeMd"
+    | "homeUseCases"
+    | "large"
+    | "largeUseCases"
+    | "homeXlarge"
+    | "xlarge";
+
+  const renderNavigationItems = (size: NavSize) => {
     return navigationItems.map((item, index) => (
       <MenuBarItem
         key={index}
@@ -91,7 +103,7 @@ const Header = memo(() => {
     );
   };
 
-  const renderLoginButton = (size: string) => {
+  const renderLoginButton = (size: NavSize) => {
     return (
       <MenuBarItem href="#" size={size} ariaLabel="Log in to your account">
         Log in
@@ -100,7 +112,7 @@ const Header = memo(() => {
   };
 
   const renderCreateRuleButton = (
-    buttonSize: string,
+    buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
     containerSize: "small" | "medium" | "large" | "xlarge",
     avatarSize: "small" | "medium" | "large" | "xlarge",
   ) => {

app/components/HomeHeader.tsx

@@ -67,7 +67,19 @@ const HomeHeader = memo(() => {
     },
   ];
 
-  const renderNavigationItems = (size: string) => {
+  type NavSize =
+    | "default"
+    | "xsmall"
+    | "xsmallUseCases"
+    | "home"
+    | "homeMd"
+    | "homeUseCases"
+    | "large"
+    | "largeUseCases"
+    | "homeXlarge"
+    | "xlarge";
+
+  const renderNavigationItems = (size: NavSize) => {
     return navigationItems.map((item, index) => (
       <MenuBarItem
         key={index}
@@ -125,7 +137,7 @@ const HomeHeader = memo(() => {
     );
   };
 
-  const renderLoginButton = (size: string) => {
+  const renderLoginButton = (size: NavSize) => {
     return (
       <MenuBarItem
         href="#"
@@ -139,7 +151,7 @@ const HomeHeader = memo(() => {
   };
 
   const renderCreateRuleButton = (
-    buttonSize: string,
+    buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
     containerSize: "small" | "medium" | "large" | "xlarge",
     avatarSize: "small" | "medium" | "large" | "xlarge",
   ) => {

app/components/MenuBarItem.tsx

@@ -160,7 +160,7 @@ const MenuBarItem = memo<MenuBarItemProps>(
 
     const accessibilityProps = {
       ...(ariaLabel && { "aria-label": ariaLabel }),
-      ...(disabled && { "aria-disabled": "true" }),
+      ...(disabled && { "aria-disabled": true }),
       role: "menuitem" as const,
       tabIndex: disabled ? -1 : 0,
       ...props,

app/components/NumberedCard.tsx

@@ -11,7 +11,7 @@ interface NumberedCardProps {
 }
 
 const NumberedCard = memo<NumberedCardProps>(
-  ({ number, text, iconShape, iconColor }) => {
+  ({ number, text, iconShape: _iconShape, iconColor: _iconColor }) => {
     return (
       <div className="bg-[var(--color-surface-inverse-primary)] rounded-[12px] p-5 shadow-lg flex flex-col gap-4 sm:p-8 sm:gap-8 sm:flex-row sm:items-center lg:p-8 lg:gap-0 lg:flex-row lg:items-stretch lg:relative lg:h-[238px]">
         {/* Section Number - Top right (lg breakpoint) */}

app/components/QuoteBlock.tsx

@@ -141,7 +141,7 @@ const QuoteBlock = memo<QuoteBlockProps>(
           type: "missing_props",
           message: "QuoteBlock requires quote and author props",
           quote: !!quote,
-          author: !!author,
+          author,
         });
       }
       return null; // Don't render if missing required props
@@ -184,7 +184,7 @@ const QuoteBlock = memo<QuoteBlockProps>(
               <div className="relative">
                 {!imageError ? (
                   <Image
-                    src={avatarSrc}
+                    src={currentAvatarSrc}
                     alt={`Portrait of ${author}`}
                     width={64}
                     height={64}

app/components/RadioButton.tsx

@@ -33,15 +33,9 @@ const RadioButton = ({
   const isInverse = mode === "inverse";
 
   // Base tokens (using same design tokens as Checkbox)
-  const colorSurface = isInverse
-    ? "var(--color-surface-inverse-primary)"
-    : "var(--color-surface-default-primary)";
   const colorContent = isInverse
     ? "var(--color-content-inverse-primary)"
     : "var(--color-content-default-primary)";
-  const colorBrand = isInverse
-    ? "var(--color-content-inverse-brand-primary)"
-    : "var(--color-content-default-brand-primary)";
 
   // Visual container depending on state
   const baseBox = `flex items-center justify-center shrink-0 w-[var(--measures-sizing-024)] h-[var(--measures-sizing-024)] rounded-[var(--measures-radius-medium)] transition-all duration-200 ease-in-out`;
@@ -89,7 +83,7 @@ const RadioButton = ({
   const radioId = id || `radio-${generatedId}`;
 
   const handleToggle = useCallback(
-    (e: React.MouseEvent | React.KeyboardEvent) => {
+    (_e: React.MouseEvent | React.KeyboardEvent) => {
       if (!disabled && onChange && !checked) {
         onChange({ checked: true, value });
       }
@@ -118,8 +112,8 @@ const RadioButton = ({
         }}
         tabIndex={0}
         role="radio"
-        aria-checked={checked ? "true" : "false"}
-        {...(disabled && { "aria-disabled": "true" })}
+        aria-checked={checked}
+        {...(disabled && { "aria-disabled": true })}
         {...(ariaLabel && { "aria-label": ariaLabel })}
         {...(label && !ariaLabel && { "aria-labelledby": `${radioId}-label` })}
         id={radioId}

app/components/RelatedArticles.tsx

@@ -52,7 +52,9 @@ const RelatedArticles = memo<RelatedArticlesProps>(
         transform: isMobile
           ? `translateX(calc(50% - 130px - ${currentIndex * 260}px))`
           : "none",
-        scrollBehavior: !isMobile ? "smooth" : "auto",
+        scrollBehavior: (!isMobile
+          ? "smooth"
+          : "auto") as React.CSSProperties["scrollBehavior"],
       }),
       [isMobile, currentIndex],
     );

app/components/Select.tsx

@@ -8,6 +8,7 @@ import React, {
   useEffect,
   useCallback,
   memo,
+  useImperativeHandle,
 } from "react";
 import SelectDropdown from "./SelectDropdown";
 import SelectOption from "./SelectOption";
@@ -61,6 +62,11 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
     const selectRef = useRef<HTMLButtonElement>(null);
     const menuRef = useRef<HTMLDivElement>(null);
 
+    useImperativeHandle(
+      ref,
+      () => selectRef.current as HTMLButtonElement | null,
+    );
+
     // Handle click outside to close menu
     useEffect(() => {
       const handleClickOutside = (event: MouseEvent) => {
@@ -260,11 +266,20 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
 
       // Handle children (option elements)
       const selectedOption = React.Children.toArray(children).find(
-        (child) =>
-          React.isValidElement(child) && child.props.value === selectedValue,
-      ) as
-        | React.ReactElement<{ value: string; children: React.ReactNode }>
-        | undefined;
+        (
+          child,
+        ): child is React.ReactElement<{
+          value: string;
+          children: React.ReactNode;
+        }> => {
+          if (!React.isValidElement(child)) return false;
+          const props = child.props as {
+            value?: string;
+            children?: React.ReactNode;
+          };
+          return props.value === selectedValue;
+        },
+      );
       return selectedOption
         ? String(selectedOption.props.children)
         : placeholder;

app/components/WebVitalsDashboard.tsx

@@ -60,64 +60,63 @@ const WebVitalsDashboard = memo(() => {
 
     // Set up Web Vitals tracking
     if (typeof window !== "undefined") {
-      import("web-vitals").then(
-        ({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-          // Track Largest Contentful Paint
-          getLCP((metric) => {
-            setVitals((prev) => ({
-              ...prev,
-              lcp: {
-                value: Math.round(metric.value),
-                rating: metric.rating,
-              },
-            }));
-          });
+      import("web-vitals").then((webVitals) => {
+        const { getCLS, getFID, getFCP, getLCP, getTTFB } = webVitals as any;
+        // Track Largest Contentful Paint
+        getLCP((metric) => {
+          setVitals((prev) => ({
+            ...prev,
+            lcp: {
+              value: Math.round(metric.value),
+              rating: metric.rating,
+            },
+          }));
+        });
 
-          // Track First Input Delay
-          getFID((metric) => {
-            setVitals((prev) => ({
-              ...prev,
-              fid: {
-                value: Math.round(metric.value),
-                rating: metric.rating,
-              },
-            }));
-          });
+        // Track First Input Delay
+        getFID((metric) => {
+          setVitals((prev) => ({
+            ...prev,
+            fid: {
+              value: Math.round(metric.value),
+              rating: metric.rating,
+            },
+          }));
+        });
 
-          // Track Cumulative Layout Shift
-          getCLS((metric) => {
-            setVitals((prev) => ({
-              ...prev,
-              cls: {
-                value: Math.round(metric.value * 1000) / 1000,
-                rating: metric.rating,
-              },
-            }));
-          });
+        // Track Cumulative Layout Shift
+        getCLS((metric) => {
+          setVitals((prev) => ({
+            ...prev,
+            cls: {
+              value: Math.round(metric.value * 1000) / 1000,
+              rating: metric.rating,
+            },
+          }));
+        });
 
-          // Track First Contentful Paint
-          getFCP((metric) => {
-            setVitals((prev) => ({
-              ...prev,
-              fcp: {
-                value: Math.round(metric.value),
-                rating: metric.rating,
-              },
-            }));
-          });
+        // Track First Contentful Paint
+        getFCP((metric) => {
+          setVitals((prev) => ({
+            ...prev,
+            fcp: {
+              value: Math.round(metric.value),
+              rating: metric.rating,
+            },
+          }));
+        });
 
-          // Track Time to First Byte
-          getTTFB((metric) => {
-            setVitals((prev) => ({
-              ...prev,
-              ttfb: {
-                value: Math.round(metric.value),
-                rating: metric.rating,
-              },
-            }));
-          });
-        },
-      );
+        // Track Time to First Byte
+        getTTFB((metric) => {
+          setVitals((prev) => ({
+            ...prev,
+            ttfb: {
+              value: Math.round(metric.value),
+              rating: metric.rating,
+            },
+          }));
+        });
+      });
     }
   }, []);