Update local testing script and resolve errors

app/components/AskOrganizer/AskOrganizer.container.tsx

@@ -78,9 +78,7 @@ const AskOrganizerContainer = memo<AskOrganizerProps>(
           buttonHref,
         },
         onContactClick as
-          | ((
-              _data: Record<string, unknown>,
-            ) => void)
+          | ((_data: Record<string, unknown>) => void)
           | undefined,
       );
 
@@ -111,4 +109,3 @@ const AskOrganizerContainer = memo<AskOrganizerProps>(
 AskOrganizerContainer.displayName = "AskOrganizer";
 
 export default AskOrganizerContainer;
-

app/components/AskOrganizer/AskOrganizer.types.ts

@@ -37,7 +37,6 @@ export interface AskOrganizerViewProps {
   variant: AskOrganizerVariant;
   labelledBy?: string;
   onContactClick: (
-    event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
+    _event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
   ) => void;
 }
-

app/components/AskOrganizer/AskOrganizer.view.tsx

@@ -53,4 +53,3 @@ function AskOrganizerView({
 }
 
 export default AskOrganizerView;
-

app/components/AskOrganizer/index.tsx

@@ -1,3 +1,2 @@
 export { default } from "./AskOrganizer.container";
 export * from "./AskOrganizer.types";
-

app/components/Checkbox/Checkbox.types.ts

@@ -34,6 +34,6 @@ export interface CheckboxViewProps {
   checkGlyphColor: string;
   labelColor: string;
   accessibilityProps: React.HTMLAttributes<HTMLSpanElement>;
-  onToggle: (e: React.MouseEvent | React.KeyboardEvent) => void;
-  onKeyDown: (e: React.KeyboardEvent<HTMLSpanElement>) => void;
+  onToggle: (_e: React.MouseEvent | React.KeyboardEvent) => void;
+  onKeyDown: (_e: React.KeyboardEvent<HTMLSpanElement>) => void;
 }

app/components/ContentContainer/ContentContainer.view.tsx

@@ -38,9 +38,7 @@ function ContentContainerView({
           <h3 className={titleClasses}>{post.frontmatter.title}</h3>
 
           {/* Description */}
-          <p className={descriptionClasses}>
-            {post.frontmatter.description}
-          </p>
+          <p className={descriptionClasses}>{post.frontmatter.description}</p>
         </div>
       </div>
 

app/components/ContentLockup/ContentLockup.view.tsx

@@ -63,9 +63,7 @@ function ContentLockupView({
             </div>
 
             {/* Subtitle */}
-            {subtitle ? (
-              <h2 className={styles.subtitle}>{subtitle}</h2>
-            ) : null}
+            {subtitle ? <h2 className={styles.subtitle}>{subtitle}</h2> : null}
           </div>
 
           {/* Description */}
@@ -94,11 +92,7 @@ function ContentLockupView({
           </div>
           {/* Large button for md and lg breakpoints */}
           <div className="hidden md:block xl:hidden">
-            <Button
-              variant="primary"
-              size="large"
-              className={buttonClassName}
-            >
+            <Button variant="primary" size="large" className={buttonClassName}>
               {ctaText}
             </Button>
           </div>

app/components/ContextMenuItem/ContextMenuItem.types.ts

@@ -1,5 +1,4 @@
-export interface ContextMenuItemProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   selected?: boolean;
   hasSubmenu?: boolean;
@@ -18,6 +17,6 @@ export interface ContextMenuItemViewProps {
   disabled: boolean;
   className: string;
   itemClasses: string;
-  handleClick: (e: React.MouseEvent<HTMLDivElement>) => void;
-  handleKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+  handleClick: (_e: React.MouseEvent<HTMLDivElement>) => void;
+  handleKeyDown: (_e: React.KeyboardEvent<HTMLDivElement>) => void;
 }

app/components/FeatureGrid/FeatureGrid.container.tsx

@@ -61,4 +61,3 @@ const FeatureGridContainer = memo<FeatureGridProps>(
 FeatureGridContainer.displayName = "FeatureGrid";
 
 export default FeatureGridContainer;
-

app/components/FeatureGrid/FeatureGrid.types.ts

@@ -17,4 +17,3 @@ export interface FeatureGridViewProps extends FeatureGridProps {
   features: Feature[];
   labelledBy?: string;
 }
-

app/components/FeatureGrid/FeatureGrid.view.tsx

@@ -50,4 +50,3 @@ function FeatureGridView({
 }
 
 export default FeatureGridView;
-

app/components/FeatureGrid/index.tsx

@@ -1,3 +1,2 @@
 export { default } from "./FeatureGrid.container";
 export * from "./FeatureGrid.types";
-

app/components/Header/Header.types.ts

@@ -31,15 +31,15 @@ export interface HeaderViewProps {
       | "footerLg";
     showText: boolean;
   }>;
-  renderNavigationItems: (size: NavSize) => React.ReactNode;
-  renderLoginButton: (size: NavSize) => React.ReactNode;
+  renderNavigationItems: (_size: NavSize) => React.ReactNode;
+  renderLoginButton: (_size: NavSize) => React.ReactNode;
   renderCreateRuleButton: (
-    buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
-    containerSize: "small" | "medium" | "large" | "xlarge",
-    avatarSize: "small" | "medium" | "large" | "xlarge",
+    _buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
+    _containerSize: "small" | "medium" | "large" | "xlarge",
+    _avatarSize: "small" | "medium" | "large" | "xlarge",
   ) => React.ReactNode;
   renderLogo: (
-    size:
+    _size:
       | "default"
       | "homeHeaderXsmall"
       | "homeHeaderSm"
@@ -52,7 +52,7 @@ export interface HeaderViewProps {
       | "headerXl"
       | "footer"
       | "footerLg",
-    showText: boolean,
+    _showText: boolean,
   ) => React.ReactNode;
 }
 

app/components/HomeHeader/HomeHeader.types.ts

@@ -35,15 +35,15 @@ export interface HomeHeaderViewProps {
       | "footerLg";
     showText: boolean;
   }>;
-  renderNavigationItems: (size: NavSize) => React.ReactNode;
-  renderLoginButton: (size: NavSize) => React.ReactNode;
+  renderNavigationItems: (_size: NavSize) => React.ReactNode;
+  renderLoginButton: (_size: NavSize) => React.ReactNode;
   renderCreateRuleButton: (
-    buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
-    containerSize: "small" | "medium" | "large" | "xlarge",
-    avatarSize: "small" | "medium" | "large" | "xlarge",
+    _buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
+    _containerSize: "small" | "medium" | "large" | "xlarge",
+    _avatarSize: "small" | "medium" | "large" | "xlarge",
   ) => React.ReactNode;
   renderLogo: (
-    size:
+    _size:
       | "default"
       | "homeHeaderXsmall"
       | "homeHeaderSm"
@@ -56,6 +56,6 @@ export interface HomeHeaderViewProps {
       | "headerXl"
       | "footer"
       | "footerLg",
-    showText: boolean,
+    _showText: boolean,
   ) => React.ReactNode;
 }

app/components/Input/Input.types.ts

@@ -1,5 +1,7 @@
-export interface InputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "onFocus" | "onBlur"> {
+export interface InputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size" | "onChange" | "onFocus" | "onBlur"
+> {
   size?: "small" | "medium" | "large";
   labelVariant?: "default" | "horizontal";
   state?: "default" | "active" | "hover" | "focus";
@@ -32,7 +34,7 @@ export interface InputViewProps {
   labelClasses: string;
   inputClasses: string;
   borderRadius: string;
-  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
-  handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+  handleChange: (_e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleFocus: (_e: React.FocusEvent<HTMLInputElement>) => void;
+  handleBlur: (_e: React.FocusEvent<HTMLInputElement>) => void;
 }

app/components/MenuBarItem/MenuBarItem.types.ts

@@ -1,5 +1,4 @@
-export interface MenuBarItemProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface MenuBarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   href?: string;
   children?: React.ReactNode;
   variant?: "default" | "home";

app/components/NavigationItem/NavigationItem.types.ts

@@ -1,5 +1,7 @@
-export interface NavigationItemProps
-  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "isActive"> {
+export interface NavigationItemProps extends Omit<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  "isActive"
+> {
   href?: string;
   children?: React.ReactNode;
   variant?: "default";

app/components/NumberedCards/NumberedCards.container.tsx

@@ -33,4 +33,3 @@ const NumberedCardsContainer = memo<NumberedCardsProps>(
 NumberedCardsContainer.displayName = "NumberedCards";
 
 export default NumberedCardsContainer;
-

app/components/NumberedCards/NumberedCards.types.ts

@@ -13,4 +13,3 @@ export interface NumberedCardsProps {
 export interface NumberedCardsViewProps extends NumberedCardsProps {
   schemaJson: string;
 }
-

app/components/NumberedCards/NumberedCards.view.tsx

@@ -63,4 +63,3 @@ function NumberedCardsView({
 }
 
 export default NumberedCardsView;
-

app/components/NumberedCards/index.tsx

@@ -1,3 +1,2 @@
 export { default } from "./NumberedCards.container";
 export * from "./NumberedCards.types";
-

app/components/QuoteBlock/QuoteBlock.types.ts

@@ -41,5 +41,5 @@ export interface QuoteBlockViewProps {
   imageLoading: boolean;
   currentAvatarSrc: string;
   onImageLoad: () => void;
-  onImageError: (error: unknown) => void;
+  onImageError: (_error: unknown) => void;
 }

app/components/RadioButton/RadioButton.types.ts

@@ -30,6 +30,6 @@ export interface RadioButtonViewProps {
   backgroundWhenChecked: string;
   dotColor: string;
   labelColor: string;
-  onToggle: (e: React.MouseEvent | React.KeyboardEvent) => void;
-  onKeyDown: (e: React.KeyboardEvent<HTMLSpanElement>) => void;
+  onToggle: (_e: React.MouseEvent | React.KeyboardEvent) => void;
+  onKeyDown: (_e: React.KeyboardEvent<HTMLSpanElement>) => void;
 }

app/components/RadioGroup/RadioGroup.types.ts

@@ -25,5 +25,5 @@ export interface RadioGroupViewProps {
   options: RadioOption[];
   className: string;
   ariaLabel?: string;
-  onOptionChange: (optionValue: string) => void;
+  onOptionChange: (_optionValue: string) => void;
 }

app/components/RelatedArticles/RelatedArticles.types.ts

@@ -11,6 +11,6 @@ export interface RelatedArticlesViewProps {
   slugOrder: string[];
   isMobile: boolean;
   transformStyle: React.CSSProperties;
-  getProgressStyle: (index: number) => React.CSSProperties;
-  onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  getProgressStyle: (_index: number) => React.CSSProperties;
+  onMouseDown?: (_e: React.MouseEvent<HTMLDivElement>) => void;
 }

app/components/RuleCard/RuleCard.types.ts

@@ -14,5 +14,5 @@ export interface RuleCardViewProps {
   backgroundColor: string;
   className: string;
   onClick: () => void;
-  onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+  onKeyDown: (_event: React.KeyboardEvent<HTMLDivElement>) => void;
 }

app/components/RuleStack/RuleStack.container.tsx

@@ -36,7 +36,12 @@ const RuleStackContainer = memo<RuleStackProps>(({ className = "" }) => {
     logger.debug(`${templateName} template clicked`);
   };
 
-  return <RuleStackView className={className} onTemplateClick={handleTemplateClick} />;
+  return (
+    <RuleStackView
+      className={className}
+      onTemplateClick={handleTemplateClick}
+    />
+  );
 });
 
 RuleStackContainer.displayName = "RuleStack";

app/components/RuleStack/RuleStack.types.ts

@@ -4,5 +4,5 @@ export interface RuleStackProps {
 
 export interface RuleStackViewProps {
   className: string;
-  onTemplateClick: (templateName: string) => void;
+  onTemplateClick: (_templateName: string) => void;
 }

app/components/Select/Select.container.tsx

@@ -47,9 +47,10 @@ const SelectContainer = forwardRef<HTMLButtonElement, SelectProps>(
 
     // Sync internal state with external value prop
     useEffect(() => {
-      if (value !== undefined) {
+      if (value !== undefined && value !== selectedValue) {
         setSelectedValue(value);
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
 
     useImperativeHandle(
@@ -276,7 +277,6 @@ const SelectContainer = forwardRef<HTMLButtonElement, SelectProps>(
         labelVariant={labelVariant}
         className={className}
         options={options}
-        children={children}
         selectId={selectId}
         labelId={labelId}
         isOpen={isOpen}

app/components/Select/Select.view.tsx

@@ -26,8 +26,8 @@ export interface SelectViewProps {
   chevronClasses: string;
   // Callbacks
   onButtonClick: () => void;
-  onButtonKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
-  onOptionClick: (value: string, text: string) => void;
+  onButtonKeyDown: (_e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onOptionClick: (_value: string, _text: string) => void;
   // Refs
   selectRef: React.RefObject<HTMLButtonElement>;
   menuRef: React.RefObject<HTMLDivElement>;
@@ -38,11 +38,11 @@ export interface SelectViewProps {
 
 export function SelectView({
   label,
-  placeholder,
+  placeholder: _placeholder,
   size,
   disabled,
-  error,
-  labelVariant,
+  error: _error,
+  labelVariant: _labelVariant,
   options,
   children,
   selectId,
@@ -118,9 +118,7 @@ export function SelectView({
                       key={option.value}
                       selected={option.value === selectedValue}
                       size={size}
-                      onClick={() =>
-                        onOptionClick(option.value, option.label)
-                      }
+                      onClick={() => onOptionClick(option.value, option.label)}
                     >
                       {option.label}
                     </SelectOption>

app/components/SelectOption/SelectOption.types.ts

@@ -15,6 +15,6 @@ export interface SelectOptionViewProps {
   disabled: boolean;
   className: string;
   itemClasses: string;
-  handleClick: (e: React.MouseEvent<HTMLDivElement>) => void;
-  handleKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+  handleClick: (_e: React.MouseEvent<HTMLDivElement>) => void;
+  handleKeyDown: (_e: React.KeyboardEvent<HTMLDivElement>) => void;
 }

app/components/SelectOption/SelectOption.view.tsx

@@ -1,7 +1,10 @@
 import { forwardRef } from "react";
 import type { SelectOptionViewProps } from "./SelectOption.types";
 
-export const SelectOptionView = forwardRef<HTMLDivElement, SelectOptionViewProps>(
+export const SelectOptionView = forwardRef<
+  HTMLDivElement,
+  SelectOptionViewProps
+>(
   (
     {
       children,

app/components/Switch/Switch.types.ts

@@ -1,5 +1,7 @@
-export interface SwitchProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+export interface SwitchProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onChange"
+> {
   checked?: boolean;
   onChange?: (
     _e:
@@ -23,8 +25,8 @@ export interface SwitchViewProps {
   trackClasses: string;
   thumbClasses: string;
   labelClasses: string;
-  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
-  onFocus: (e: React.FocusEvent<HTMLButtonElement>) => void;
-  onBlur: (e: React.FocusEvent<HTMLButtonElement>) => void;
+  onClick: (_e: React.MouseEvent<HTMLButtonElement>) => void;
+  onKeyDown: (_e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onFocus: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+  onBlur: (_e: React.FocusEvent<HTMLButtonElement>) => void;
 }

app/components/TextArea/TextArea.types.ts

@@ -1,5 +1,7 @@
-export interface TextAreaProps
-  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "onChange" | "onFocus" | "onBlur"> {
+export interface TextAreaProps extends Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "size" | "onChange" | "onFocus" | "onBlur"
+> {
   size?: "small" | "medium" | "large";
   labelVariant?: "default" | "horizontal";
   state?: "default" | "active" | "hover" | "focus";
@@ -33,7 +35,7 @@ export interface TextAreaViewProps {
   labelClasses: string;
   textareaClasses: string;
   borderRadius: string;
-  handleChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  handleFocus: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
-  handleBlur: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+  handleChange: (_e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleFocus: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
+  handleBlur: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
 }

app/components/TextArea/TextArea.view.tsx

@@ -11,7 +11,7 @@ export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
       value,
       name,
       disabled,
-      className,
+      className: _className,
       rows,
       containerClasses,
       labelClasses,

app/components/Toggle/Toggle.types.ts

@@ -1,5 +1,7 @@
-export interface ToggleProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+export interface ToggleProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onChange"
+> {
   label?: string;
   checked?: boolean;
   onChange?: (
@@ -34,11 +36,11 @@ export interface ToggleViewProps {
   labelClasses: string;
   toggleClasses: string;
   onClick: (
-    e:
+    _e:
       | React.MouseEvent<HTMLButtonElement>
       | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
-  onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
-  onFocus: (e: React.FocusEvent<HTMLButtonElement>) => void;
-  onBlur: (e: React.FocusEvent<HTMLButtonElement>) => void;
+  onKeyDown: (_e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onFocus: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+  onBlur: (_e: React.FocusEvent<HTMLButtonElement>) => void;
 }

app/components/ToggleGroup/ToggleGroup.container.tsx

@@ -119,7 +119,6 @@ const ToggleGroupContainer = memo(
     return (
       <ToggleGroupView
         groupId={groupId}
-        children={children}
         className={className}
         position={position}
         state={state}
@@ -131,7 +130,9 @@ const ToggleGroupContainer = memo(
         onFocus={handleFocus}
         onBlur={handleBlur}
         {...rest}
-      />
+      >
+        {children}
+      </ToggleGroupView>
     );
   }),
 );

app/components/ToggleGroup/ToggleGroup.types.ts

@@ -1,5 +1,7 @@
-export interface ToggleGroupProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+export interface ToggleGroupProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onChange"
+> {
   children?: React.ReactNode;
   className?: string;
   position?: "left" | "middle" | "right";
@@ -24,8 +26,8 @@ export interface ToggleGroupViewProps {
   showText: boolean;
   ariaLabel?: string;
   toggleClasses: string;
-  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
-  onFocus: (e: React.FocusEvent<HTMLButtonElement>) => void;
-  onBlur: (e: React.FocusEvent<HTMLButtonElement>) => void;
+  onClick: (_e: React.MouseEvent<HTMLButtonElement>) => void;
+  onKeyDown: (_e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onFocus: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+  onBlur: (_e: React.FocusEvent<HTMLButtonElement>) => void;
 }

app/components/ToggleGroup/ToggleGroup.view.tsx

@@ -3,9 +3,9 @@ import type { ToggleGroupViewProps } from "./ToggleGroup.types";
 export function ToggleGroupView({
   groupId,
   children,
-  className,
-  position,
-  state,
+  className: _className,
+  position: _position,
+  state: _state,
   showText,
   ariaLabel,
   toggleClasses,

app/components/WebVitalsDashboard/WebVitalsDashboard.container.tsx

@@ -96,11 +96,14 @@ const WebVitalsDashboardContainer = memo(() => {
   }, []);
 
   return (
-    <WebVitalsDashboardView vitals={vitals} metrics={metrics} loading={loading} />
+    <WebVitalsDashboardView
+      vitals={vitals}
+      metrics={metrics}
+      loading={loading}
+    />
   );
 });
 
 WebVitalsDashboardContainer.displayName = "WebVitalsDashboard";
 
 export default WebVitalsDashboardContainer;
-

app/components/WebVitalsDashboard/WebVitalsDashboard.types.ts

@@ -31,4 +31,3 @@ export interface WebVitalsDashboardViewProps {
   metrics: Metrics;
   loading: boolean;
 }
-

app/components/WebVitalsDashboard/WebVitalsDashboard.view.tsx

@@ -111,9 +111,7 @@ function WebVitalsDashboardView({
                     <span className="text-yellow-600">
                       Needs Improvement: {data.needsImprovementCount}
                     </span>
-                    <span className="text-red-600">
-                      Poor: {data.poorCount}
-                    </span>
+                    <span className="text-red-600">Poor: {data.poorCount}</span>
                   </div>
                 </div>
               </div>
@@ -155,4 +153,3 @@ function WebVitalsDashboardView({
 }
 
 export default WebVitalsDashboardView;
-

app/components/WebVitalsDashboard/index.tsx

@@ -1,3 +1,2 @@
 export { default } from "./WebVitalsDashboard.container";
 export * from "./WebVitalsDashboard.types";
-

app/hooks/useMediaQuery.ts

@@ -33,27 +33,30 @@ export function useMediaQuery(
   query: string | keyof typeof BREAKPOINTS,
   direction: "min" | "max" = "min",
 ): boolean {
-  const [matches, setMatches] = useState(false);
+  // Convert breakpoint key to media query string
+  let mediaQuery: string;
+  if (query in BREAKPOINTS) {
+    const breakpoint = BREAKPOINTS[query as keyof typeof BREAKPOINTS];
+    mediaQuery = `(${direction}-width: ${breakpoint}px)`;
+  } else {
+    mediaQuery = query;
+  }
+
+  // Initialize state with current match if available (SSR safety)
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+    return window.matchMedia(mediaQuery).matches;
+  });
 
   useEffect(() => {
-    // Convert breakpoint key to media query string
-    let mediaQuery: string;
-    if (query in BREAKPOINTS) {
-      const breakpoint = BREAKPOINTS[query as keyof typeof BREAKPOINTS];
-      mediaQuery = `(${direction}-width: ${breakpoint}px)`;
-    } else {
-      mediaQuery = query;
-    }
-
     // Check if window is available (SSR safety)
     if (typeof window === "undefined") {
       return;
     }
 
     const media = window.matchMedia(mediaQuery);
-    // Initialize matches synchronously - this is safe for media queries
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    setMatches(media.matches);
 
     // Create listener for changes
     const listener = (event: MediaQueryListEvent) => {