Fix tests after ts change

app/blog/page.tsx

@@ -1,6 +1,5 @@
 import { getAllBlogPosts } from "../../lib/content";
 import ContentThumbnailTemplate from "../components/ContentThumbnailTemplate";
-import ContentContainer from "../components/ContentContainer";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {

app/components/AskOrganizer.tsx

@@ -27,7 +27,7 @@ declare global {
     gtag?: (
       command: string,
       eventName: string,
-      params?: Record<string, unknown>
+      params?: Record<string, unknown>,
     ) => void;
   }
 }
@@ -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) {
@@ -139,7 +139,7 @@ const AskOrganizer = memo<AskOrganizerProps>(
         </div>
       </section>
     );
-  }
+  },
 );
 
 AskOrganizer.displayName = "AskOrganizer";

app/components/Avatar.tsx

@@ -19,7 +19,7 @@ const Avatar = memo<AvatarProps>(
     const baseStyles = `rounded-[var(--radius-measures-radius-full)] object-cover ${sizeStyles[size]} ${className}`;
 
     return <img src={src} alt={alt} className={baseStyles} {...props} />;
-  }
+  },
 );
 
 Avatar.displayName = "Avatar";

app/components/AvatarContainer.tsx

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

app/components/Button.tsx

@@ -2,12 +2,20 @@ import React, { memo } from "react";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
-  variant?: "default" | "secondary" | "primary" | "outlined" | "dark" | "inverse";
+  variant?:
+    | "default"
+    | "secondary"
+    | "primary"
+    | "outlined"
+    | "dark"
+    | "inverse";
   size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
   className?: string;
   disabled?: boolean;
   type?: "button" | "submit" | "reset";
-  onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  onClick?: (
+    e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
+  ) => void;
   href?: string;
   target?: string;
   rel?: string;

app/components/Checkbox.tsx

@@ -178,7 +178,7 @@ const Checkbox = memo<CheckboxProps>(
         />
       </label>
     );
-  }
+  },
 );
 
 Checkbox.displayName = "Checkbox";

app/components/ContentContainer.tsx

@@ -130,7 +130,7 @@ const ContentContainer = memo<ContentContainerProps>(
         </div>
       </div>
     );
-  }
+  },
 );
 
 ContentContainer.displayName = "ContentContainer";

app/components/ContentLockup.tsx

@@ -203,7 +203,7 @@ const ContentLockup = memo<ContentLockupProps>(
         )}
       </div>
     );
-  }
+  },
 );
 
 ContentLockup.displayName = "ContentLockup";

app/components/ContentThumbnailTemplate.tsx

@@ -22,7 +22,7 @@ const ContentThumbnailTemplate = memo<ContentThumbnailTemplateProps>(
     // Get article-specific background image from frontmatter
     const getBackgroundImage = (
       post: BlogPost,
-      variant: "vertical" | "horizontal"
+      variant: "vertical" | "horizontal",
     ): string => {
       // Check if post has thumbnail images defined in frontmatter
       if (post.frontmatter?.thumbnail) {
@@ -98,7 +98,7 @@ const ContentThumbnailTemplate = memo<ContentThumbnailTemplateProps>(
         </div>
       </Link>
     );
-  }
+  },
 );
 
 ContentThumbnailTemplate.displayName = "ContentThumbnailTemplate";

app/components/ContextMenu.tsx

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

app/components/ContextMenuDivider.tsx

@@ -19,7 +19,7 @@ const ContextMenuDivider = forwardRef<HTMLDivElement, ContextMenuDividerProps>(
     return (
       <div ref={ref} className={dividerClasses} role="separator" {...props} />
     );
-  }
+  },
 );
 
 ContextMenuDivider.displayName = "ContextMenuDivider";

app/components/ContextMenuItem.tsx

@@ -9,7 +9,7 @@ interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
   className?: string;
   onClick?: (
-    e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>
+    e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
   ) => void;
   size?: "small" | "medium" | "large";
 }
@@ -26,7 +26,7 @@ const ContextMenuItem = forwardRef<HTMLDivElement, ContextMenuItemProps>(
       size = "medium",
       ...props
     },
-    ref
+    ref,
   ) => {
     const getTextSize = (): string => {
       switch (size) {
@@ -69,7 +69,7 @@ const ContextMenuItem = forwardRef<HTMLDivElement, ContextMenuItemProps>(
           onClick(e);
         }
       },
-      [disabled, onClick]
+      [disabled, onClick],
     );
 
     const handleKeyDown = useCallback(
@@ -81,7 +81,7 @@ const ContextMenuItem = forwardRef<HTMLDivElement, ContextMenuItemProps>(
           }
         }
       },
-      [disabled, onClick]
+      [disabled, onClick],
     );
 
     return (
@@ -131,7 +131,7 @@ const ContextMenuItem = forwardRef<HTMLDivElement, ContextMenuItemProps>(
         )}
       </div>
     );
-  }
+  },
 );
 
 ContextMenuItem.displayName = "ContextMenuItem";

app/components/ContextMenuSection.tsx

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

app/components/FeatureGrid.tsx

@@ -48,7 +48,7 @@ const FeatureGrid = memo<FeatureGridProps>(
           href: "#conflict-resolution",
         },
       ],
-      []
+      [],
     );
     return (
       <section
@@ -92,7 +92,7 @@ const FeatureGrid = memo<FeatureGridProps>(
         </div>
       </section>
     );
-  }
+  },
 );
 
 FeatureGrid.displayName = "FeatureGrid";

app/components/Footer.tsx

@@ -1,4 +1,5 @@
 import React, { memo } from "react";
+import Link from "next/link";
 import Logo from "./Logo";
 import Separator from "./Separator";
 import { getAssetPath, ASSETS } from "../../lib/assetUtils";
@@ -103,27 +104,54 @@ const Footer = memo(() => {
 
             {/* Links Section */}
             <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)] order-1 sm:order-2">
-              <a
+              <Link
+                href="#"
+                className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+              >
+                Use cases
+              </Link>
+              <Link
                 href="/learn"
                 className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
               >
                 Learn
-              </a>
-              <a
-                href="/blog"
+              </Link>
+              <Link
+                href="#"
                 className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
               >
-                Blog
-              </a>
+                About
+              </Link>
             </div>
           </div>
 
           <Separator />
 
+          {/* Legal Links */}
+          <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)] sm:flex-row sm:gap-[var(--spacing-measures-spacing-024,24px)]">
+            <Link
+              href="#"
+              className="text-[var(--color-content-default-secondary)] font-inter text-sm leading-5 font-normal tracking-[0%] lg:text-base lg:leading-6 hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+            >
+              Privacy Policy
+            </Link>
+            <Link
+              href="#"
+              className="text-[var(--color-content-default-secondary)] font-inter text-sm leading-5 font-normal tracking-[0%] lg:text-base lg:leading-6 hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+            >
+              Terms of Service
+            </Link>
+            <Link
+              href="#"
+              className="text-[var(--color-content-default-secondary)] font-inter text-sm leading-5 font-normal tracking-[0%] lg:text-base lg:leading-6 hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+            >
+              Cookies Settings
+            </Link>
+          </div>
+
           {/* Copyright */}
           <div className="text-[var(--color-content-default-secondary)] font-inter text-sm leading-5 font-normal tracking-[0%] lg:text-base lg:leading-6">
-            © {new Date().getFullYear()} Media Economies Design Lab. All rights
-            reserved.
+            © All right reserved
           </div>
         </div>
       </footer>

app/components/Header.tsx

@@ -75,7 +75,7 @@ const Header = memo(() => {
 
   const renderAvatarGroup = (
     containerSize: "small" | "medium" | "large" | "xlarge",
-    avatarSize: "small" | "medium" | "large" | "xlarge"
+    avatarSize: "small" | "medium" | "large" | "xlarge",
   ) => {
     return (
       <AvatarContainer size={containerSize}>
@@ -102,7 +102,7 @@ const Header = memo(() => {
   const renderCreateRuleButton = (
     buttonSize: string,
     containerSize: "small" | "medium" | "large" | "xlarge",
-    avatarSize: "small" | "medium" | "large" | "xlarge"
+    avatarSize: "small" | "medium" | "large" | "xlarge",
   ) => {
     return (
       <Button
@@ -129,7 +129,7 @@ const Header = memo(() => {
       | "headerXl"
       | "footer"
       | "footerLg",
-    showText: boolean
+    showText: boolean,
   ) => {
     return <Logo size={size} showText={showText} />;
   };

app/components/HeaderTab.tsx

@@ -39,7 +39,7 @@ const HeaderTab = memo<HeaderTabProps>(
         />
       </div>
     );
-  }
+  },
 );
 
 HeaderTab.displayName = "HeaderTab";

app/components/HeroBanner.tsx

@@ -54,7 +54,7 @@ const HeroBanner = memo<HeroBannerProps>(
         </div>
       </section>
     );
-  }
+  },
 );
 
 HeroBanner.displayName = "HeroBanner";

app/components/HomeHeader.tsx

@@ -83,10 +83,10 @@ const HomeHeader = memo(() => {
             ? size === "home" || size === "homeMd"
               ? "homeMd"
               : size === "large"
-              ? "large"
-              : size === "homeXlarge"
-              ? "homeXlarge"
-              : "xsmallUseCases"
+                ? "large"
+                : size === "homeXlarge"
+                  ? "homeXlarge"
+                  : "xsmallUseCases"
             : size
         }
         variant={
@@ -109,7 +109,7 @@ const HomeHeader = memo(() => {
 
   const renderAvatarGroup = (
     containerSize: "small" | "medium" | "large" | "xlarge",
-    avatarSize: "small" | "medium" | "large" | "xlarge"
+    avatarSize: "small" | "medium" | "large" | "xlarge",
   ) => {
     return (
       <AvatarContainer size={containerSize}>
@@ -141,7 +141,7 @@ const HomeHeader = memo(() => {
   const renderCreateRuleButton = (
     buttonSize: string,
     containerSize: "small" | "medium" | "large" | "xlarge",
-    avatarSize: "small" | "medium" | "large" | "xlarge"
+    avatarSize: "small" | "medium" | "large" | "xlarge",
   ) => {
     return (
       <Button
@@ -169,7 +169,7 @@ const HomeHeader = memo(() => {
       | "headerXl"
       | "footer"
       | "footerLg",
-    showText: boolean
+    showText: boolean,
   ) => {
     return <Logo size={size} showText={showText} />;
   };

app/components/ImagePlaceholder.tsx

@@ -41,7 +41,7 @@ const ImagePlaceholder = memo<ImagePlaceholderProps>(
         {text}
       </div>
     );
-  }
+  },
 );
 
 ImagePlaceholder.displayName = "ImagePlaceholder";

app/components/Input.tsx

@@ -2,11 +2,10 @@
 
 import React, { memo, useCallback, forwardRef, useId } from "react";
 
-interface InputProps
-  extends Omit<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    "size" | "onChange" | "onFocus" | "onBlur"
-  > {
+interface InputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size" | "onChange" | "onFocus" | "onBlur"
+> {
   size?: "small" | "medium" | "large";
   labelVariant?: "default" | "horizontal";
   state?: "default" | "active" | "hover" | "focus";
@@ -41,7 +40,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       className = "",
       ...props
     },
-    ref
+    ref,
   ) => {
     // Generate unique ID for accessibility if not provided
     const generatedId = useId();
@@ -157,7 +156,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           onChange(e);
         }
       },
-      [disabled, onChange]
+      [disabled, onChange],
     );
 
     const handleFocus = useCallback(
@@ -166,7 +165,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           onFocus(e);
         }
       },
-      [disabled, onFocus]
+      [disabled, onFocus],
     );
 
     const handleBlur = useCallback(
@@ -175,7 +174,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           onBlur(e);
         }
       },
-      [disabled, onBlur]
+      [disabled, onBlur],
     );
 
     return (
@@ -207,7 +206,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         </div>
       </div>
     );
-  }
+  },
 );
 
 Input.displayName = "Input";

app/components/MenuBar.tsx

@@ -31,7 +31,7 @@ const MenuBar = memo<MenuBarProps>(
         {children}
       </nav>
     );
-  }
+  },
 );
 
 MenuBar.displayName = "MenuBar";

app/components/MenuBarItem.tsx

@@ -1,7 +1,6 @@
 import React, { memo } from "react";
 
-interface MenuBarItemProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+interface MenuBarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   href?: string;
   children?: React.ReactNode;
   variant?: "default" | "home";
@@ -180,7 +179,7 @@ const MenuBarItem = memo<MenuBarItemProps>(
         {children}
       </a>
     );
-  }
+  },
 );
 
 MenuBarItem.displayName = "MenuBarItem";

app/components/MiniCard.tsx

@@ -129,7 +129,7 @@ const MiniCard = memo<MiniCardProps>(
         {cardContent}
       </div>
     );
-  }
+  },
 );
 
 MiniCard.displayName = "MiniCard";

app/components/NavigationItem.tsx

@@ -1,7 +1,6 @@
 import React, { memo } from "react";
 
-interface NavigationItemProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+interface NavigationItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   href?: string;
   children?: React.ReactNode;
   variant?: "default";
@@ -64,7 +63,7 @@ const NavigationItem = memo<NavigationItemProps>(
         {children}
       </a>
     );
-  }
+  },
 );
 
 NavigationItem.displayName = "NavigationItem";

app/components/NumberedCard.tsx

@@ -27,7 +27,7 @@ const NumberedCard = memo<NumberedCardProps>(
         </div>
       </div>
     );
-  }
+  },
 );
 
 NumberedCard.displayName = "NumberedCard";

app/components/NumberedCards.tsx

@@ -32,7 +32,7 @@ const NumberedCards = memo<NumberedCardsProps>(({ title, subtitle, cards }) => {
         text: card.text,
       })),
     }),
-    [title, subtitle, cards]
+    [title, subtitle, cards],
   );
 
   return (

app/components/QuoteBlock.tsx

@@ -111,7 +111,7 @@ const QuoteBlock = memo<QuoteBlockProps>(
     const handleImageError = (error: unknown) => {
       console.warn(
         `QuoteBlock: Failed to load avatar image for ${author}:`,
-        error
+        error,
       );
       setImageError(true);
       setImageLoading(false);
@@ -275,7 +275,7 @@ const QuoteBlock = memo<QuoteBlockProps>(
         </div>
       </section>
     );
-  }
+  },
 );
 
 QuoteBlock.displayName = "QuoteBlock";

app/components/RadioButton.tsx

@@ -94,7 +94,7 @@ const RadioButton = ({
         onChange({ checked: true, value });
       }
     },
-    [disabled, onChange, checked, value]
+    [disabled, onChange, checked, value],
   );
 
   return (

app/components/RadioGroup.tsx

@@ -42,7 +42,7 @@ const RadioGroup = ({
         onChange({ value: optionValue });
       }
     },
-    [disabled, onChange]
+    [disabled, onChange],
   );
 
   return (

app/components/RelatedArticles.tsx

@@ -15,7 +15,7 @@ const RelatedArticles = memo<RelatedArticlesProps>(
     // Memoize filtered posts to prevent unnecessary re-computations
     const filteredPosts = useMemo(
       () => relatedPosts.filter((post) => post.slug !== currentPostSlug),
-      [relatedPosts, currentPostSlug]
+      [relatedPosts, currentPostSlug],
     );
 
     const [currentIndex, setCurrentIndex] = useState(0);
@@ -43,7 +43,7 @@ const RelatedArticles = memo<RelatedArticlesProps>(
         document.addEventListener("mousemove", handleMouseMove);
         document.addEventListener("mouseup", handleMouseUp);
       },
-      []
+      [],
     );
 
     // Memoize transform style to prevent unnecessary recalculations
@@ -54,7 +54,7 @@ const RelatedArticles = memo<RelatedArticlesProps>(
           : "none",
         scrollBehavior: !isMobile ? "smooth" : "auto",
       }),
-      [isMobile, currentIndex]
+      [isMobile, currentIndex],
     );
 
     // Memoize progress bar style calculation
@@ -64,10 +64,10 @@ const RelatedArticles = memo<RelatedArticlesProps>(
           index === currentIndex
             ? `${progress}%`
             : index < currentIndex
-            ? "100%"
-            : "0%",
+              ? "100%"
+              : "0%",
       }),
-      [currentIndex, progress]
+      [currentIndex, progress],
     );
 
     // Check if we're on mobile (below lg breakpoint)
@@ -165,7 +165,7 @@ const RelatedArticles = memo<RelatedArticlesProps>(
         </div>
       </section>
     );
-  }
+  },
 );
 
 RelatedArticles.displayName = "RelatedArticles";

app/components/RuleCard.tsx

@@ -16,7 +16,7 @@ declare global {
     gtag?: (
       command: string,
       eventName: string,
-      params?: Record<string, unknown>
+      params?: Record<string, unknown>,
     ) => void;
     analytics?: {
       track: (eventName: string, params?: Record<string, unknown>) => void;
@@ -93,7 +93,7 @@ const RuleCard = memo<RuleCardProps>(
         )}
       </div>
     );
-  }
+  },
 );
 
 RuleCard.displayName = "RuleCard";

app/components/RuleStack.tsx

@@ -15,7 +15,7 @@ declare global {
     gtag?: (
       command: string,
       eventName: string,
-      params?: Record<string, unknown>
+      params?: Record<string, unknown>,
     ) => void;
     analytics?: {
       track: (eventName: string, params?: Record<string, unknown>) => void;

app/components/SectionHeader.tsx

@@ -59,7 +59,7 @@ const SectionHeader = memo<SectionHeaderProps>(
         </div>
       </div>
     );
-  }
+  },
 );
 
 SectionHeader.displayName = "SectionHeader";

app/components/Select.tsx

@@ -51,7 +51,7 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
       options,
       ...props
     },
-    ref
+    ref,
   ) => {
     const generatedId = useId();
     const selectId = id || `select-${generatedId}`;
@@ -94,7 +94,7 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
           selectRef.current.focus();
         }
       },
-      [onChange]
+      [onChange],
     );
 
     // Handle select button click
@@ -116,7 +116,7 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
           setIsOpen(false);
         }
       },
-      [disabled, isOpen]
+      [disabled, isOpen],
     );
 
     const getSizeStyles = (): string => {
@@ -253,7 +253,7 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
       // Handle options prop
       if (options && Array.isArray(options)) {
         const selectedOption = options.find(
-          (option) => option.value === selectedValue
+          (option) => option.value === selectedValue,
         );
         return selectedOption ? selectedOption.label : placeholder;
       }
@@ -261,7 +261,7 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
       // Handle children (option elements)
       const selectedOption = React.Children.toArray(children).find(
         (child) =>
-          React.isValidElement(child) && child.props.value === selectedValue
+          React.isValidElement(child) && child.props.value === selectedValue,
       ) as
         | React.ReactElement<{ value: string; children: React.ReactNode }>
         | undefined;
@@ -353,7 +353,7 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
                             onClick={() =>
                               handleOptionSelect(
                                 optionProps.value,
-                                String(optionProps.children)
+                                String(optionProps.children),
                               )
                             }
                           >
@@ -369,7 +369,7 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
         </div>
       </div>
     );
-  }
+  },
 );
 
 Select.displayName = "Select";

app/components/SelectDropdown.tsx

@@ -34,7 +34,7 @@ const SelectDropdown = forwardRef<HTMLDivElement, SelectDropdownProps>(
         {children}
       </div>
     );
-  }
+  },
 );
 
 SelectDropdown.displayName = "SelectDropdown";

app/components/SelectOption.tsx

@@ -8,7 +8,7 @@ interface SelectOptionProps {
   disabled?: boolean;
   className?: string;
   onClick?: (
-    e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>
+    e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
   ) => void;
   size?: "small" | "medium" | "large";
 }
@@ -24,7 +24,7 @@ const SelectOption = forwardRef<HTMLDivElement, SelectOptionProps>(
       size = "medium",
       ...props
     },
-    ref
+    ref,
   ) => {
     const getTextSize = (): string => {
       switch (size) {
@@ -67,7 +67,7 @@ const SelectOption = forwardRef<HTMLDivElement, SelectOptionProps>(
           onClick(e);
         }
       },
-      [disabled, onClick]
+      [disabled, onClick],
     );
 
     const handleKeyDown = useCallback(
@@ -79,7 +79,7 @@ const SelectOption = forwardRef<HTMLDivElement, SelectOptionProps>(
           }
         }
       },
-      [disabled, onClick]
+      [disabled, onClick],
     );
 
     return (
@@ -114,7 +114,7 @@ const SelectOption = forwardRef<HTMLDivElement, SelectOptionProps>(
         </div>
       </div>
     );
-  }
+  },
 );
 
 SelectOption.displayName = "SelectOption";

app/components/Switch.tsx

@@ -1,12 +1,14 @@
 import React, { memo, useCallback, useId, forwardRef } from "react";
 
-interface SwitchProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+interface SwitchProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onChange"
+> {
   checked?: boolean;
   onChange?: (
     e:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   onFocus?: (e: React.FocusEvent<HTMLButtonElement>) => void;
   onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
@@ -36,7 +38,7 @@ const Switch = memo(
           onChange(e);
         }
       },
-      [onChange]
+      [onChange],
     );
 
     const handleKeyDown = useCallback(
@@ -48,7 +50,7 @@ const Switch = memo(
           }
         }
       },
-      [onChange]
+      [onChange],
     );
 
     const handleFocus = useCallback(
@@ -57,7 +59,7 @@ const Switch = memo(
           onFocus(e);
         }
       },
-      [onFocus]
+      [onFocus],
     );
 
     const handleBlur = useCallback(
@@ -66,7 +68,7 @@ const Switch = memo(
           onBlur(e);
         }
       },
-      [onBlur]
+      [onBlur],
     );
 
     // Switch track styles based on checked state
@@ -170,7 +172,7 @@ const Switch = memo(
         {label && <span className={labelClasses}>{label}</span>}
       </div>
     );
-  })
+  }),
 );
 
 Switch.displayName = "Switch";

app/components/TextArea.tsx

@@ -2,11 +2,10 @@
 
 import React, { memo, useCallback, forwardRef, useId } from "react";
 
-interface TextAreaProps
-  extends Omit<
-    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    "size" | "onChange" | "onFocus" | "onBlur"
-  > {
+interface TextAreaProps extends Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "size" | "onChange" | "onFocus" | "onBlur"
+> {
   size?: "small" | "medium" | "large";
   labelVariant?: "default" | "horizontal";
   state?: "default" | "active" | "hover" | "focus";
@@ -42,7 +41,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       rows,
       ...props
     },
-    ref
+    ref,
   ) => {
     // Generate unique ID for accessibility if not provided
     const generatedId = useId();
@@ -161,7 +160,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           onChange(e);
         }
       },
-      [disabled, onChange]
+      [disabled, onChange],
     );
 
     const handleFocus = useCallback(
@@ -170,7 +169,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           onFocus(e);
         }
       },
-      [disabled, onFocus]
+      [disabled, onFocus],
     );
 
     const handleBlur = useCallback(
@@ -179,7 +178,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           onBlur(e);
         }
       },
-      [disabled, onBlur]
+      [disabled, onBlur],
     );
 
     return (
@@ -213,7 +212,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         </div>
       </div>
     );
-  }
+  },
 );
 
 TextArea.displayName = "TextArea";

app/components/Toggle.tsx

@@ -1,13 +1,15 @@
 import React, { memo, useCallback, useId, forwardRef } from "react";
 
-interface ToggleProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+interface ToggleProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onChange"
+> {
   label?: string;
   checked?: boolean;
   onChange?: (
     e:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   onFocus?: (e: React.FocusEvent<HTMLButtonElement>) => void;
   onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
@@ -37,7 +39,7 @@ const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
       className = "",
       ...props
     },
-    ref
+    ref,
   ) => {
     const toggleId = useId();
     const labelId = useId();
@@ -141,13 +143,13 @@ const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
       (
         e:
           | React.MouseEvent<HTMLButtonElement>
-          | React.KeyboardEvent<HTMLButtonElement>
+          | React.KeyboardEvent<HTMLButtonElement>,
       ) => {
         if (!disabled && onChange) {
           onChange(e);
         }
       },
-      [disabled, onChange]
+      [disabled, onChange],
     );
 
     const handleFocus = useCallback(
@@ -156,7 +158,7 @@ const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
           onFocus(e);
         }
       },
-      [disabled, onFocus]
+      [disabled, onFocus],
     );
 
     const handleBlur = useCallback(
@@ -165,7 +167,7 @@ const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
           onBlur(e);
         }
       },
-      [disabled, onBlur]
+      [disabled, onBlur],
     );
 
     const handleKeyDown = useCallback(
@@ -177,7 +179,7 @@ const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
           }
         }
       },
-      [disabled, onChange]
+      [disabled, onChange],
     );
 
     return (
@@ -213,7 +215,7 @@ const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
         </div>
       </div>
     );
-  }
+  },
 );
 
 Toggle.displayName = "Toggle";

app/components/ToggleGroup.tsx

@@ -1,7 +1,9 @@
 import React, { memo, useCallback, useId, forwardRef } from "react";
 
-interface ToggleGroupProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+interface ToggleGroupProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onChange"
+> {
   children?: React.ReactNode;
   className?: string;
   position?: "left" | "middle" | "right";
@@ -11,7 +13,7 @@ interface ToggleGroupProps
   onChange?: (
     e:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   onFocus?: (e: React.FocusEvent<HTMLButtonElement>) => void;
   onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
@@ -72,7 +74,7 @@ const ToggleGroup = memo(
           onChange(e);
         }
       },
-      [onChange]
+      [onChange],
     );
 
     const handleFocus = useCallback(
@@ -81,7 +83,7 @@ const ToggleGroup = memo(
           onFocus(e);
         }
       },
-      [onFocus]
+      [onFocus],
     );
 
     const handleBlur = useCallback(
@@ -90,7 +92,7 @@ const ToggleGroup = memo(
           onBlur(e);
         }
       },
-      [onBlur]
+      [onBlur],
     );
 
     const handleKeyDown = useCallback(
@@ -102,7 +104,7 @@ const ToggleGroup = memo(
           }
         }
       },
-      [onChange]
+      [onChange],
     );
 
     const toggleClasses = `
@@ -146,7 +148,7 @@ const ToggleGroup = memo(
         {showText ? children : children || "☰"}
       </button>
     );
-  })
+  }),
 );
 
 ToggleGroup.displayName = "ToggleGroup";

app/components/WebVitalsDashboard.tsx

@@ -116,7 +116,7 @@ const WebVitalsDashboard = memo(() => {
               },
             }));
           });
-        }
+        },
       );
     }
   }, []);