@semiont/react-ui 0.5.5 → 0.5.7

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@semiont/react-ui",
-  "version": "0.5.5",
+  "version": "0.5.7",
+  "engines": {
+    "node": ">=24.0.0"
+  },
   "description": "React components and hooks for Semiont",
   "type": "module",
   "main": "./dist/index.js",
@@ -74,25 +77,26 @@
     "test:split:coverage": "npm run test:coverage"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^16.1.0",
-    "@types/react": "^19",
+    "@types/react": "^19.2.16",
     "@types/react-dom": "^19",
-    "@vitest/coverage-v8": "^4.1.0",
-    "autoprefixer": "^10.4.23",
-    "axe-core": "^4.11.0",
-    "cssnano": "^7.1.2",
+    "@vitest/coverage-v8": "^4.1.8",
+    "autoprefixer": "^10.5.0",
+    "axe-core": "^4.11.4",
+    "cssnano": "^8.0.1",
     "jest-axe": "^10.0.0",
-    "jsdom": "^28.0.0",
+    "jsdom": "^29.1.1",
     "postcss-import": "^16.1.1",
-    "rollup": "^4.60.3",
+    "rollup": "^4.61.0",
     "rollup-plugin-dts": "^6.4.1",
     "tsup": "^8.0.1",
-    "typescript": "^6.0.2"
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.8"
   },
   "publishConfig": {
     "access": "public"
@@ -105,9 +109,9 @@
     "directory": "packages/react-ui"
   },
   "dependencies": {
-    "@semiont/api-client": "*",
+    "@semiont/http-transport": "*",
     "@semiont/core": "*",
     "@semiont/sdk": "*",
-    "react-error-boundary": "^4.1.2"
+    "react-error-boundary": "^6.1.2"
   }
 }

package/src/components/Button/__tests__/Button.test.tsx

@@ -157,7 +157,6 @@ describe('Button Component', () => {
       const icon = <span data-testid="left-icon">←</span>;
       render(<Button leftIcon={icon}>Button</Button>);
 
-      const button = screen.getByRole('button');
       const leftIcon = screen.getByTestId('left-icon');
       const iconWrapper = leftIcon.parentElement;
 
@@ -169,7 +168,6 @@ describe('Button Component', () => {
       const icon = <span data-testid="right-icon">→</span>;
       render(<Button rightIcon={icon}>Button</Button>);
 
-      const button = screen.getByRole('button');
       const rightIcon = screen.getByTestId('right-icon');
       const iconWrapper = rightIcon.parentElement;
 

package/src/components/CodeMirrorRenderer.tsx

@@ -81,6 +81,8 @@ function buildAnnotationDecorations(
       attributes: {
         'data-annotation-id': meta.annotationId,
         'data-annotation-type': meta.annotationType,
+        ...(meta.strategy ? { 'data-anchor-strategy': meta.strategy } : {}),
+        ...(meta.confidence ? { 'data-anchor-confidence': meta.confidence } : {}),
         title: meta.tooltip,
       },
     });

package/src/components/ErrorBoundary.tsx

@@ -11,7 +11,6 @@ interface Props {
 interface State {
   hasError: boolean;
   error: Error | null;
-  errorInfo: ErrorInfo | null;
 }
 
 /**
@@ -24,7 +23,6 @@ export class ErrorBoundary extends Component<Props, State> {
     this.state = {
       hasError: false,
       error: null,
-      errorInfo: null,
     };
   }
 
@@ -33,7 +31,6 @@ export class ErrorBoundary extends Component<Props, State> {
     return {
       hasError: true,
       error,
-      errorInfo: null,
     };
   }
 
@@ -48,11 +45,6 @@ export class ErrorBoundary extends Component<Props, State> {
       this.props.onError(error, errorInfo);
     }
 
-    // Update state with error info
-    this.setState({
-      errorInfo,
-    });
-
     // In production, you might want to log to an error reporting service
     // Example: logErrorToService(error, errorInfo);
   }
@@ -61,7 +53,6 @@ export class ErrorBoundary extends Component<Props, State> {
     this.setState({
       hasError: false,
       error: null,
-      errorInfo: null,
     });
   };
 

package/src/components/ProtectedErrorBoundary.css

@@ -0,0 +1,119 @@
+/* ============================================
+   ProtectedErrorBoundary Component Styles
+   ============================================ */
+
+.semiont-protected-error-boundary-container {
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--semiont-spacing-md);
+}
+
+.semiont-protected-error-boundary-card {
+  max-width: 28rem;
+  width: 100%;
+  background-color: var(--semiont-color-white);
+  border-radius: var(--semiont-radius-lg);
+  box-shadow: var(--semiont-shadow-lg);
+  padding: var(--semiont-spacing-lg);
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-card {
+  background-color: var(--semiont-color-gray-800);
+}
+
+.semiont-protected-error-boundary-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: var(--semiont-spacing-md);
+}
+
+.semiont-protected-error-boundary-icon-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--semiont-radius-full);
+  background-color: var(--semiont-color-red-100);
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-icon-wrapper {
+  background-color: rgba(127, 29, 29, 0.3);
+}
+
+.semiont-protected-error-boundary-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--semiont-color-red-600);
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-icon {
+  color: var(--semiont-color-red-400);
+}
+
+.semiont-protected-error-boundary-title {
+  font-size: var(--semiont-text-xl);
+  font-weight: var(--semiont-font-semibold);
+  color: var(--semiont-color-gray-900);
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-title {
+  color: var(--semiont-color-white);
+}
+
+.semiont-protected-error-boundary-message {
+  color: var(--semiont-color-gray-600);
+  margin-bottom: var(--semiont-spacing-lg);
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-message {
+  color: var(--semiont-color-gray-300);
+}
+
+.semiont-protected-error-boundary-details {
+  margin-bottom: var(--semiont-spacing-md);
+}
+
+.semiont-protected-error-boundary-summary {
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-color-gray-500);
+  cursor: pointer;
+}
+
+.semiont-protected-error-boundary-summary:hover {
+  color: var(--semiont-color-gray-700);
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-summary {
+  color: var(--semiont-color-gray-500);
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-summary:hover {
+  color: var(--semiont-color-gray-300);
+}
+
+.semiont-protected-error-boundary-stack {
+  margin-top: var(--semiont-spacing-sm);
+  font-size: var(--semiont-text-xs);
+  background-color: var(--semiont-color-gray-100);
+  padding: var(--semiont-spacing-sm);
+  border-radius: var(--semiont-radius-sm);
+  overflow: auto;
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-stack {
+  background-color: var(--semiont-color-gray-900);
+}
+
+.semiont-protected-error-boundary-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.semiont-protected-error-boundary-actions .semiont-button {
+  flex: 1 1 0;
+}

package/src/components/ProtectedErrorBoundary.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ErrorBoundary, type FallbackProps } from 'react-error-boundary';
+import './ProtectedErrorBoundary.css';
 
 interface ProtectedErrorBoundaryProps {
   children: React.ReactNode;
@@ -45,46 +46,54 @@ export function ProtectedErrorBoundary({
 }
 
 function ProtectedErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+  // react-error-boundary v6 types `error` as `unknown` — a thrown value can be
+  // anything, so narrow before reading Error fields.
+  const message = error instanceof Error ? error.message : String(error);
+  const stack = error instanceof Error ? error.stack : undefined;
   return (
-    <div className="min-h-[400px] flex items-center justify-center p-4">
-      <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
-        <div className="flex items-center gap-3 mb-4">
-          <div className="flex-shrink-0 w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center">
-            <svg className="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <div className="semiont-protected-error-boundary-container">
+      <div className="semiont-protected-error-boundary-card">
+        <div className="semiont-protected-error-boundary-header">
+          <div className="semiont-protected-error-boundary-icon-wrapper">
+            <svg className="semiont-protected-error-boundary-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
             </svg>
           </div>
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+          <h2 className="semiont-protected-error-boundary-title">
             Something went wrong
           </h2>
         </div>
 
-        <p className="text-gray-600 dark:text-gray-300 mb-6">
+        <p className="semiont-protected-error-boundary-message">
           An unexpected error occurred. Try again, or refresh the page.
         </p>
 
         {process.env.NODE_ENV === 'development' && (
-          <details className="mb-4">
-            <summary className="text-sm text-gray-500 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300">
+          <details className="semiont-protected-error-boundary-details">
+            <summary className="semiont-protected-error-boundary-summary">
               Error details (development only)
             </summary>
-            <pre className="mt-2 text-xs bg-gray-100 dark:bg-gray-900 p-2 rounded-sm overflow-auto">
-              {error.message}
-              {error.stack}
+            <pre className="semiont-protected-error-boundary-stack">
+              {message}
+              {stack}
             </pre>
           </details>
         )}
 
-        <div className="flex gap-3">
+        <div className="semiont-protected-error-boundary-actions">
           <button
             onClick={resetErrorBoundary}
-            className="flex-1 px-4 py-2 text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+            className="semiont-button"
+            data-variant="secondary"
+            data-size="md"
           >
             Try Again
           </button>
           <button
             onClick={() => window.location.reload()}
-            className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+            className="semiont-button"
+            data-variant="primary"
+            data-size="md"
           >
             Refresh Page
           </button>

package/src/components/__tests__/AnnotateReferencesProgressWidget.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../test-utils';

package/src/components/__tests__/ErrorBoundary.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import React from 'react';
+import type { ReactNode } from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { ErrorBoundary, AsyncErrorBoundary } from '../ErrorBoundary';
@@ -146,7 +146,7 @@ describe('ErrorBoundary Component', () => {
     });
 
     it('should not render default fallback when custom fallback is provided', () => {
-      const customFallback = (error: Error) => <div>Custom Fallback</div>;
+      const customFallback = () => <div>Custom Fallback</div>;
 
       render(
         <ErrorBoundary fallback={customFallback}>
@@ -223,7 +223,7 @@ describe('ErrorBoundary Component', () => {
 
     it('should call custom reset handler in custom fallback', () => {
       const resetHandler = vi.fn();
-      const customFallback = (error: Error, reset: () => void) => (
+      const customFallback = (_error: Error, reset: () => void) => (
         <div>
           <button onClick={() => { resetHandler(); reset(); }}>Reset</button>
         </div>
@@ -242,9 +242,9 @@ describe('ErrorBoundary Component', () => {
     });
 
     it('should clear error state when reset is called', () => {
-      let resetFn: (() => void) | null = null;
+      const resetRef: { current: (() => void) | null } = { current: null };
       const customFallback = (error: Error, reset: () => void) => {
-        resetFn = reset;
+        resetRef.current = reset;
         return <div>Error: {error.message}</div>;
       };
 
@@ -255,11 +255,11 @@ describe('ErrorBoundary Component', () => {
       );
 
       expect(screen.getByText('Error: Initial error')).toBeInTheDocument();
-      expect(resetFn).not.toBeNull();
+      expect(resetRef.current).not.toBeNull();
 
       // Call reset
-      if (resetFn) {
-        resetFn();
+      if (resetRef.current) {
+        resetRef.current();
       }
 
       // Rerender with non-throwing component after reset
@@ -286,8 +286,11 @@ describe('ErrorBoundary Component', () => {
 
     it('should navigate to home when Go Home button clicked', () => {
       const originalLocation = window.location;
-      delete (window as any).location;
-      window.location = { href: '' } as any;
+      Object.defineProperty(window, 'location', {
+        value: { href: '' },
+        writable: true,
+        configurable: true,
+      });
 
       render(
         <ErrorBoundary>
@@ -300,7 +303,11 @@ describe('ErrorBoundary Component', () => {
 
       expect(window.location.href).toBe('/');
 
-      window.location = originalLocation;
+      Object.defineProperty(window, 'location', {
+        value: originalLocation,
+        writable: true,
+        configurable: true,
+      });
     });
   });
 
@@ -336,7 +343,7 @@ describe('ErrorBoundary Component', () => {
 
   describe('Edge Cases', () => {
     it('should handle error with no message', () => {
-      function ThrowEmptyError() {
+      function ThrowEmptyError(): ReactNode {
         throw new Error();
       }
 
@@ -433,7 +440,7 @@ describe('AsyncErrorBoundary Component', () => {
     });
 
     it('should handle error with no message', () => {
-      function ThrowEmptyError() {
+      function ThrowEmptyError(): ReactNode {
         throw new Error();
       }
 

package/src/components/__tests__/LiveRegion.hooks.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import React from 'react';
 import { renderHook, act } from '@testing-library/react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import {
   LiveRegionProvider,

package/src/components/__tests__/ProtectedErrorBoundary.test.tsx

@@ -186,7 +186,8 @@ describe('ProtectedErrorBoundary', () => {
         // Multiple console.error calls happen (React's own logs, plus ours).
         // Look for the boundary's prefix specifically.
         const ourCall = consoleErrorSpy.mock.calls.find(
-          call => typeof call[0] === 'string' && call[0].includes('ProtectedErrorBoundary caught:')
+          (call: Parameters<typeof console.error>) =>
+            typeof call[0] === 'string' && call[0].includes('ProtectedErrorBoundary caught:')
         );
         expect(ourCall).toBeDefined();
       } finally {

package/src/components/__tests__/ResizeHandle.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { ResizeHandle } from '../ResizeHandle';

package/src/components/__tests__/SessionExpiryBanner.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../test-utils';

package/src/components/__tests__/StatusDisplay.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import { BehaviorSubject } from 'rxjs';
 import '@testing-library/jest-dom';

package/src/components/__tests__/Toast.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, waitFor, act } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ToastProvider, useToast, ToastContainer, type ToastMessage } from '../Toast';
+import { render, screen } from '@testing-library/react';
+import { ToastProvider, useToast } from '../Toast';
 
 describe('Toast System', () => {
   beforeEach(() => {

package/src/components/__tests__/Toolbar.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../test-utils';

package/src/components/annotation/annotations.css

@@ -36,6 +36,20 @@
   position: relative;
 }
 
+/* Low-confidence anchor affordance.
+ *
+ * Annotations whose anchor was resolved by something other than a clean
+ * fast-path or unique-occurrence match (i.e. `confidence !== 'high'`)
+ * get a dotted underline so operators can see at a glance which
+ * highlights were rescued by score-resolved tiebreaking, fuzzy matching,
+ * or a position-fallback. The hover tooltip (added by
+ * `getAnnotationDecorationMeta`) names the strategy. */
+.annotation-low-confidence {
+  text-decoration: underline dotted var(--semiont-color-warning-500, #d97706);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+}
+
 /* Print styles */
 @media print {
   .annotation-highlight,

package/src/components/annotation-popups/__tests__/JsonLdView.test.tsx

@@ -1,11 +1,9 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
-import type { components } from '@semiont/core';
 
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Mock CodeMirror modules
 vi.mock('@codemirror/view', () => {
@@ -57,10 +55,10 @@ import { JsonLdView } from '../JsonLdView';
 
 const createMockAnnotation = (overrides?: Partial<Annotation>): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id: 'anno-1',
+  id: 'anno-1' as AnnotationId,
   type: 'Annotation',
   motivation: 'highlighting',
-  creator: { name: 'user@example.com' },
+  creator: { '@type': 'Person', name: 'user@example.com' },
   created: '2024-01-01T10:00:00Z',
   target: {
     source: 'resource-1',

package/src/components/annotation-popups/__tests__/SharedPopupElements.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../test-utils';

package/src/components/branding/__tests__/SemiontBranding.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { SemiontBranding } from '../SemiontBranding';
@@ -305,7 +304,7 @@ describe('SemiontBranding Component', () => {
 
   describe('Edge Cases', () => {
     it('should handle missing translation gracefully', () => {
-      const emptyTranslate = vi.fn((key: string) => '');
+      const emptyTranslate = vi.fn(() => '');
 
       render(<SemiontBranding t={emptyTranslate} />);
 

package/src/components/layout/__tests__/LeftSidebar.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { LeftSidebar } from '../LeftSidebar';
@@ -159,7 +158,7 @@ describe('LeftSidebar Component', () => {
     });
 
     it('should save collapsed state to localStorage', () => {
-      const mockChildren = vi.fn((isCollapsed, toggleCollapsed) => (
+      const mockChildren = vi.fn((_isCollapsed, toggleCollapsed) => (
         <button onClick={toggleCollapsed} data-testid="toggle-btn">Toggle</button>
       ));
 
@@ -183,7 +182,7 @@ describe('LeftSidebar Component', () => {
     });
 
     it('should not collapse when collapsible is false', () => {
-      const mockChildren = vi.fn((isCollapsed, toggleCollapsed) => (
+      const mockChildren = vi.fn((_isCollapsed, toggleCollapsed) => (
         <button onClick={toggleCollapsed} data-testid="toggle-btn">Toggle</button>
       ));
 
@@ -208,7 +207,7 @@ describe('LeftSidebar Component', () => {
     });
 
     it('should use default storage key', () => {
-      const mockChildren = vi.fn((isCollapsed, toggleCollapsed) => (
+      const mockChildren = vi.fn((_isCollapsed, toggleCollapsed) => (
         <button onClick={toggleCollapsed} data-testid="toggle-btn">Toggle</button>
       ));
 
@@ -233,7 +232,7 @@ describe('LeftSidebar Component', () => {
 
   describe('Navigation Menu Helper', () => {
     it('should provide navigationMenu helper to function children', () => {
-      const mockChildren = vi.fn((isCollapsed, toggleCollapsed, navigationMenu) => {
+      const mockChildren = vi.fn((_isCollapsed, _toggleCollapsed, navigationMenu) => {
         // Test that navigationMenu helper returns NavigationMenu component
         const menuElement = navigationMenu(() => {});
         return <div data-testid="children-content">{menuElement}</div>;
@@ -259,7 +258,7 @@ describe('LeftSidebar Component', () => {
 
     it('should pass onClose callback to NavigationMenu', () => {
       const mockOnClose = vi.fn();
-      const mockChildren = vi.fn((isCollapsed, toggleCollapsed, navigationMenu) => {
+      const mockChildren = vi.fn((_isCollapsed, _toggleCollapsed, navigationMenu) => {
         const menuElement = navigationMenu(mockOnClose);
         return <div>{menuElement}</div>;
       });

package/src/components/layout/__tests__/PageLayout.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { PageLayout } from '../PageLayout';
@@ -247,7 +246,6 @@ describe('PageLayout Component', () => {
       );
 
       // Real Footer renders copyright with dynamic year
-      const currentYear = new Date().getFullYear();
       expect(screen.getByText(`translated.copyright`)).toBeInTheDocument();
     });
   });
@@ -270,7 +268,7 @@ describe('PageLayout Component', () => {
     });
 
     it('should render with CookiePreferences component', () => {
-      const MockCookiePreferences = ({ isOpen, onClose }: any) => (
+      const MockCookiePreferences = ({  }: any) => (
         <div data-testid="cookie-prefs">Cookie Preferences</div>
       );