bdsa-react-components 0.1.0

package/README.md

@@ -0,0 +1,370 @@
+# BDSA React Components
+
+A reusable React component library for the Digital Slide Archive project. This library provides a collection of well-tested, accessible, and customizable components that can be used across multiple BDSA React applications.
+
+## Features
+
+- 🎨 **Modern UI Components** - Beautiful, accessible components built with React
+- 📦 **Tree-shakeable** - Import only what you need
+- 🔧 **TypeScript Support** - Full type definitions included
+- ✅ **Well-tested** - Comprehensive test coverage with Vitest
+- 📚 **Storybook Documentation** - Interactive component demos and documentation
+- 🎯 **Flexible** - Customizable through props and CSS
+
+## Installation
+
+### In Your Project
+
+Once published, you can install this library using npm or yarn:
+
+```bash
+npm install bdsa-react-components
+# or
+yarn add bdsa-react-components
+```
+
+### For Development
+
+Clone this repository and install dependencies:
+
+```bash
+git clone <repository-url>
+cd bdsaReactComponents
+npm install
+```
+
+## Usage
+
+### Basic Import
+
+```tsx
+import { Button, Card } from 'bdsa-react-components'
+import 'bdsa-react-components/styles.css'
+
+function App() {
+  return (
+    <Card header="Welcome">
+      <p>Digital Slide Archive</p>
+      <Button variant="primary">Get Started</Button>
+    </Card>
+  )
+}
+```
+
+### Individual Component Import
+
+```tsx
+import { Button } from 'bdsa-react-components'
+import 'bdsa-react-components/styles.css'
+
+function MyComponent() {
+  return (
+    <Button 
+      variant="primary" 
+      size="large"
+      onClick={() => console.log('Clicked!')}
+    >
+      Click Me
+    </Button>
+  )
+}
+```
+
+## Available Components
+
+### Button
+
+A versatile button component with multiple variants and states.
+
+```tsx
+<Button variant="primary" size="medium" loading={false}>
+  Click Me
+</Button>
+```
+
+**Props:**
+- `variant`: 'primary' | 'secondary' | 'danger' | 'success'
+- `size`: 'small' | 'medium' | 'large'
+- `loading`: boolean
+- `fullWidth`: boolean
+- Plus all standard HTML button attributes
+
+### Card
+
+A flexible card component for displaying content in a contained format.
+
+```tsx
+<Card 
+  header="Card Title"
+  footer="Footer text"
+  shadow="medium"
+  hoverable
+>
+  Card content goes here
+</Card>
+```
+
+**Props:**
+- `header`: ReactNode
+- `footer`: ReactNode
+- `shadow`: 'none' | 'small' | 'medium' | 'large'
+- `bordered`: boolean
+- `hoverable`: boolean
+- `padding`: 'none' | 'small' | 'medium' | 'large'
+- Plus all standard HTML div attributes
+
+### SlideViewer
+
+A powerful slide viewer component that integrates OpenSeadragon with Paper.js annotations for viewing Digital Slide Archive images with annotation overlays.
+
+```tsx
+import { SlideViewer } from 'bdsa-react-components'
+import 'bdsa-react-components/styles.css'
+
+function SlideApp() {
+  const imageInfo = {
+    imageId: 'slide-123',
+    width: 40000,
+    height: 30000,
+    tileWidth: 256,
+    levels: 8,
+    baseUrl: 'http://localhost:5000', // Your DSA base URL
+  }
+
+  const annotations = [
+    {
+      id: 'annotation-1',
+      left: 5000,
+      top: 6000,
+      width: 2000,
+      height: 1500,
+      color: '#ff0000',
+      label: 'Region of Interest',
+    },
+  ]
+
+  return (
+    <div style={{ width: '100%', height: '600px' }}>
+      <SlideViewer 
+        imageInfo={imageInfo}
+        annotations={annotations}
+        onAnnotationClick={(annotation) => {
+          console.log('Clicked:', annotation)
+        }}
+      />
+    </div>
+  )
+}
+```
+
+**Props:**
+- `imageInfo`: Object containing image metadata (imageId, width, height, tileWidth, levels, baseUrl)
+- `annotations`: Array of annotation objects or GeoJSON FeatureCollection
+- `onViewerReady`: Callback when OpenSeadragon viewer is ready
+- `onAnnotationClick`: Callback when an annotation is clicked
+- `defaultAnnotationColor`: Default stroke color for annotations (default: '#ff0000')
+- `strokeWidth`: Stroke width for annotations (default: 2)
+- `osdOptions`: Additional OpenSeadragon configuration options
+- `className`: Custom CSS class name
+
+**Annotation Format:**
+
+You can provide annotations in two formats:
+
+1. **Array of annotation objects:**
+```tsx
+[
+  {
+    id: 'ann-1',
+    left: 100,
+    top: 200,
+    width: 150,
+    height: 100,
+    color: '#ff0000',
+    label: 'My annotation',
+  }
+]
+```
+
+2. **GeoJSON FeatureCollection:**
+```tsx
+{
+  type: 'FeatureCollection',
+  features: [
+    {
+      type: 'Feature',
+      id: 'geo-ann-1',
+      properties: {
+        color: '#00ff00',
+        label: 'GeoJSON annotation',
+      },
+      geometry: {
+        type: 'Polygon',
+        coordinates: [
+          [
+            [100, 200],
+            [250, 200],
+            [250, 300],
+            [100, 300],
+            [100, 200],
+          ],
+        ],
+      },
+    },
+  ],
+}
+```
+
+## Development
+
+### Running Storybook
+
+View and interact with all components:
+
+```bash
+npm run storybook
+```
+
+This will open Storybook at `http://localhost:6006` where you can see all components, their variants, and interactive documentation.
+
+### Running Tests
+
+```bash
+# Run tests in watch mode
+npm test
+
+# Run tests with coverage
+npm run test:coverage
+
+# Run tests with UI
+npm run test:ui
+```
+
+### Building the Library
+
+```bash
+npm run build
+```
+
+This creates optimized production builds in the `dist` folder with:
+- ESM format (`index.js`)
+- CommonJS format (`index.cjs`)
+- TypeScript definitions (`index.d.ts`)
+- Bundled CSS (`style.css`)
+
+## Project Structure
+
+```
+bdsaReactComponents/
+├── src/
+│   ├── components/
+│   │   ├── Button/
+│   │   │   ├── Button.tsx        # Component implementation
+│   │   │   ├── Button.css        # Component styles
+│   │   │   ├── Button.test.tsx   # Unit tests
+│   │   │   └── Button.stories.tsx # Storybook stories
+│   │   └── Card/
+│   │       ├── Card.tsx
+│   │       ├── Card.css
+│   │       ├── Card.test.tsx
+│   │       └── Card.stories.tsx
+│   ├── test/
+│   │   └── setup.ts              # Test setup and configuration
+│   └── index.ts                  # Main export file
+├── .storybook/                   # Storybook configuration
+├── dist/                         # Build output (generated)
+├── package.json
+├── tsconfig.json
+├── vite.config.ts
+└── vitest.config.ts
+```
+
+## Adding New Components
+
+Follow this pattern when creating new components:
+
+1. **Create component folder**: `src/components/YourComponent/`
+2. **Create component file**: `YourComponent.tsx` with TypeScript types
+3. **Create styles**: `YourComponent.css`
+4. **Create tests**: `YourComponent.test.tsx`
+5. **Create stories**: `YourComponent.stories.tsx`
+6. **Export component**: Add to `src/index.ts`
+
+### Example Component Template
+
+```tsx
+// YourComponent.tsx
+import React from 'react'
+import './YourComponent.css'
+
+export interface YourComponentProps {
+  /** Component props */
+  variant?: 'primary' | 'secondary'
+  children: React.ReactNode
+}
+
+export const YourComponent = React.forwardRef<HTMLDivElement, YourComponentProps>(
+  ({ variant = 'primary', children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={`bdsa-your-component bdsa-your-component--${variant}`} {...props}>
+        {children}
+      </div>
+    )
+  }
+)
+
+YourComponent.displayName = 'YourComponent'
+```
+
+## Design Principles
+
+- **Consistency**: All components follow similar naming and prop conventions
+- **Accessibility**: Components are built with a11y best practices
+- **Flexibility**: Components accept standard HTML attributes
+- **Ref Forwarding**: All components support ref forwarding
+- **TypeScript**: Full type safety with exported type definitions
+- **Testing**: Every component has comprehensive test coverage
+- **Documentation**: Storybook stories demonstrate all use cases
+
+## Contributing
+
+When contributing to this library:
+
+1. Follow the existing component structure
+2. Write tests for all new components
+3. Create Storybook stories for documentation
+4. Use TypeScript for type safety
+5. Follow naming conventions (prefix classes with `bdsa-`)
+6. Keep components focused and composable
+
+## CSS Naming Convention
+
+Use the BEM-like naming convention with the `bdsa-` prefix:
+
+- Block: `.bdsa-component`
+- Element: `.bdsa-component__element`
+- Modifier: `.bdsa-component--modifier`
+
+Example:
+```css
+.bdsa-button { /* base styles */ }
+.bdsa-button--primary { /* variant */ }
+.bdsa-button__spinner { /* element */ }
+```
+
+## Publishing
+
+To publish this library to npm:
+
+1. Update version in `package.json`
+2. Build the library: `npm run build`
+3. Publish: `npm publish`
+
+## License
+
+Apache-2.0
+
+## Support
+
+For issues, questions, or contributions, please refer to the Digital Slide Archive project documentation.
+

package/dist/components/AnnotationManager/AnnotationManager.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+
+export interface AnnotationSearchResult {
+    _id: string;
+    _modelType: string;
+    _elementCount?: number;
+    _detailsCount?: number;
+    _version?: number;
+    _accessLevel?: number;
+    itemId?: string;
+    public?: boolean;
+    created?: string;
+    updated?: string;
+    creatorId?: string;
+    updatedId?: string;
+    groups?: (string | null)[];
+    annotation?: {
+        name?: string;
+        description?: string;
+        attributes?: Record<string, unknown>;
+        display?: Record<string, unknown>;
+    };
+    [key: string]: unknown;
+}
+export interface AnnotationManagerProps {
+    /** Image/Item ID to search annotations for */
+    imageId?: string;
+    /** Base URL for DSA API (e.g., http://bdsa.pathology.emory.edu:8080/api/v1) */
+    apiBaseUrl?: string;
+    /** Maximum number of annotations to fetch per request (default: 50) */
+    limit?: number;
+    /** Custom fetch function for API requests. Useful for adding authentication headers. */
+    fetchFn?: (url: string, options?: RequestInit) => Promise<Response>;
+    /** Custom headers to add to all API requests. Merged with fetchFn headers if both are provided. */
+    apiHeaders?: HeadersInit;
+    /** Callback when annotations are loaded */
+    onAnnotationsLoaded?: (annotations: AnnotationSearchResult[]) => void;
+    /** Callback when annotation loading fails */
+    onError?: (error: Error) => void;
+    /** Show debug panel with raw API response (default: false, hidden in production) */
+    showDebugPanel?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * AnnotationManager component for managing annotation loading, visibility, and state.
+ * This component handles the business logic for annotations while keeping SlideViewer
+ * focused on rendering.
+ *
+ * Supports fetching annotations by itemId using the DSA API search endpoint.
+ *
+ * Note: By default, the API may only return public annotations. To access private
+ * annotations, provide authentication via `fetchFn` or `apiHeaders` props.
+ */
+export declare const AnnotationManager: React.ForwardRefExoticComponent<AnnotationManagerProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=AnnotationManager.d.ts.map

package/dist/components/AnnotationManager/AnnotationManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationManager.d.ts","sourceRoot":"","sources":["../../../src/components/AnnotationManager/AnnotationManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAC3D,OAAO,yBAAyB,CAAA;AAEhC,MAAM,WAAW,sBAAsB;IACnC,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;IAC1B,UAAU,CAAC,EAAE;QACT,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;QACpC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KACpC,CAAA;IACD,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACzB;AAED,MAAM,WAAW,sBAAsB;IACnC,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wFAAwF;IACxF,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAA;IACnE,mGAAmG;IACnG,UAAU,CAAC,EAAE,WAAW,CAAA;IACxB,2CAA2C;IAC3C,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,sBAAsB,EAAE,KAAK,IAAI,CAAA;IACrE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,oFAAoF;IACpF,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,+FA4I7B,CAAA"}

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * The variant style of the button
+     */
+    variant?: 'primary' | 'secondary' | 'danger' | 'success';
+    /**
+     * The size of the button
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether the button should take the full width of its container
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the button is in a loading state
+     */
+    loading?: boolean;
+}
+/**
+ * A versatile button component for the BDSA project
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAA;IACxD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,uFA2ClB,CAAA"}

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Optional header content
+     */
+    header?: React.ReactNode;
+    /**
+     * Optional footer content
+     */
+    footer?: React.ReactNode;
+    /**
+     * Whether the card has a shadow
+     */
+    shadow?: 'none' | 'small' | 'medium' | 'large';
+    /**
+     * Whether the card has a border
+     */
+    bordered?: boolean;
+    /**
+     * Whether the card is hoverable (shows hover effect)
+     */
+    hoverable?: boolean;
+    /**
+     * Padding size
+     */
+    padding?: 'none' | 'small' | 'medium' | 'large';
+}
+/**
+ * A flexible card component for the BDSA project
+ */
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,YAAY,CAAA;AAEnB,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACnE;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CAClD;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kFAsChB,CAAA"}

package/dist/components/FolderBrowser/FolderBrowser.d.ts

@@ -0,0 +1,73 @@
+import { default as React } from 'react';
+
+export interface Collection {
+    _id: string;
+    name: string;
+    description?: string;
+    public?: boolean;
+    created?: string;
+    updated?: string;
+    [key: string]: unknown;
+}
+export interface Folder {
+    _id: string;
+    name: string;
+    description?: string;
+    public?: boolean;
+    created?: string;
+    updated?: string;
+    parentId?: string;
+    parentType?: 'collection' | 'folder';
+    [key: string]: unknown;
+}
+export type Resource = (Collection | Folder) & {
+    type: 'collection' | 'folder';
+};
+export interface FolderBrowserProps {
+    /** Base URL for DSA API (e.g., http://bdsa.pathology.emory.edu:8080/api/v1) */
+    apiBaseUrl?: string;
+    /** Custom fetch function for API requests. Useful for adding authentication headers. */
+    fetchFn?: (url: string, options?: RequestInit) => Promise<Response>;
+    /** Custom headers to add to all API requests. Merged with fetchFn headers if both are provided. */
+    apiHeaders?: HeadersInit;
+    /** Callback when a resource (collection or folder) is selected */
+    onResourceSelect?: (resource: Resource) => void;
+    /** Callback when resource selection changes */
+    onSelectionChange?: (resource: Resource | null) => void;
+    /** Show collections at the root level (default: true, ignored if rootId is provided) */
+    showCollections?: boolean;
+    /** Root directory ID to start from (if provided, only shows this collection/folder and its children) */
+    rootId?: string;
+    /** Type of root directory - 'collection' or 'folder' (required if rootId is provided) */
+    rootType?: 'collection' | 'folder';
+    /** Number of folders to load per page (default: 50, set to 0 to load all) */
+    foldersPerPage?: number;
+    /** Start at a specific collection ID instead of showing all collections (deprecated: use rootId and rootType) */
+    startCollectionId?: string;
+    /** Start at a specific folder ID (requires startCollectionId or parentFolderId) (deprecated: use rootId and rootType) */
+    startFolderId?: string;
+    /** Start at a folder's subfolder (requires parentFolderId) (deprecated: use rootId and rootType) */
+    parentFolderId?: string;
+    className?: string;
+    /** Custom render for collections */
+    renderCollection?: (collection: Collection, isExpanded: boolean, onToggle: () => void) => React.ReactNode;
+    /** Custom render for folders */
+    renderFolder?: (folder: Folder, depth: number, isExpanded: boolean, onToggle: () => void) => React.ReactNode;
+}
+/**
+ * FolderBrowser component for browsing DSA collections and folders.
+ *
+ * This component provides a tree view of collections and folders in the DSA.
+ * It supports:
+ * - Listing collections at the root
+ * - Expanding collections to show folders
+ * - Expanding folders to show subfolders recursively
+ * - Selecting collections and folders
+ *
+ * API Endpoints:
+ * - Collections: GET /api/v1/collection
+ * - Folders in collection: GET /api/v1/folder?parentType=collection&parentId={collectionId}
+ * - Subfolders: GET /api/v1/folder?parentType=folder&parentId={folderId}
+ */
+export declare const FolderBrowser: React.ForwardRefExoticComponent<FolderBrowserProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=FolderBrowser.d.ts.map

package/dist/components/FolderBrowser/FolderBrowser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderBrowser.d.ts","sourceRoot":"","sources":["../../../src/components/FolderBrowser/FolderBrowser.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAC/D,OAAO,qBAAqB,CAAA;AAE5B,MAAM,WAAW,UAAU;IACvB,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACzB;AAED,MAAM,WAAW,MAAM;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAA;IACpC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACzB;AAED,MAAM,MAAM,QAAQ,GAAG,CAAC,UAAU,GAAG,MAAM,CAAC,GAAG;IAAE,IAAI,EAAE,YAAY,GAAG,QAAQ,CAAA;CAAE,CAAA;AAEhF,MAAM,WAAW,kBAAkB;IAC/B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wFAAwF;IACxF,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAA;IACnE,mGAAmG;IACnG,UAAU,CAAC,EAAE,WAAW,CAAA;IACxB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC/C,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAA;IACvD,wFAAwF;IACxF,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,wGAAwG;IACxG,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yFAAyF;IACzF,QAAQ,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAA;IAClC,6EAA6E;IAC7E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iHAAiH;IACjH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,yHAAyH;IACzH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oGAAoG;IACpG,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAA;IACzG,gCAAgC;IAChC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAA;CAC/G;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,2FAoezB,CAAA"}