keynesol-shared 1.0.0

package/README.md

@@ -0,0 +1,118 @@
+# @keynesol/shared
+
+Shared code package for Keynesol Web3 Prediction Platform.
+
+## Installation
+
+```bash
+npm install @keynesol/shared
+```
+
+Or for local development:
+
+```bash
+npm link
+# In your app:
+npm link @keynesol/shared
+```
+
+## Usage
+
+### Components
+
+```typescript
+import { ErrorBoundary, WalletProvider, WalletButton } from '@keynesol/shared';
+
+function App() {
+  return (
+    <ErrorBoundary>
+      <WalletProvider>
+        <WalletButton />
+      </WalletProvider>
+    </ErrorBoundary>
+  );
+}
+```
+
+### Hooks
+
+```typescript
+import { useProgram, useVaults, useTokenBalance } from '@keynesol/shared';
+
+function MyComponent() {
+  const { program } = useProgram();
+  const { vaults, loading } = useVaults();
+  const { sol, usdc } = useTokenBalance();
+  
+  // ...
+}
+```
+
+### Utils
+
+```typescript
+import { 
+  errorHandler, 
+  cacheManager, 
+  tokenUtils, 
+  validation,
+  retryRpcCall 
+} from '@keynesol/shared';
+
+// Error handling
+errorHandler.handleError(error, 'MyComponent');
+
+// Token utilities
+const isSOL = tokenUtils.isNativeSOL(tokenMint);
+const decimals = tokenUtils.getTokenDecimals(tokenMint);
+
+// Validation
+const result = validation.validateStakeAmount(amount, balance);
+
+// RPC retry
+const data = await retryRpcCall(() => connection.getBalance(publicKey));
+```
+
+### Services
+
+```typescript
+import { syncService, reconciliationService } from '@keynesol/shared';
+
+// Initialize sync service
+syncService.initialize(connection, {
+  url: process.env.NEXT_PUBLIC_SUPABASE_URL,
+  anonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+});
+
+// Initialize reconciliation
+reconciliationService.initialize(connection, {
+  url: process.env.NEXT_PUBLIC_SUPABASE_URL,
+  anonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+});
+```
+
+## Configuration
+
+The package uses environment variables for configuration:
+
+- `NEXT_PUBLIC_SOLANA_NETWORK` - Network (devnet, mainnet-beta, testnet)
+- `NEXT_PUBLIC_RPC_ENDPOINT` - Custom RPC endpoint
+- `NEXT_PUBLIC_PROGRAM_ID` - Solana program ID
+- `NEXT_PUBLIC_SUPABASE_URL` - Supabase URL
+- `NEXT_PUBLIC_SUPABASE_ANON_KEY` - Supabase anonymous key
+
+## Building
+
+```bash
+npm run build
+```
+
+## Type Checking
+
+```bash
+npm run type-check
+```
+
+## License
+
+MIT

package/dist/components/Common/ErrorBoundary.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ErrorBoundary Component
+ * Requirements: 11.1 - Global error handling with React error boundaries
+ */
+import { Component, ErrorInfo, ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+interface State {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: ErrorInfo | null;
+}
+export declare class ErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleReset: () => void;
+    render(): ReactNode;
+}
+export {};
+//# sourceMappingURL=ErrorBoundary.d.ts.map

package/dist/components/Common/ErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/Common/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAc,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI/D,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC;CAC7B;AA+CD,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBAC5C,KAAK,EAAE,KAAK;IASxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK;IAQpD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAG,IAAI;IAa3D,WAAW,QAAO,IAAI,CAMpB;IAEF,MAAM,IAAI,SAAS;CA+BpB"}

package/dist/components/Common/ErrorBoundary.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ErrorBoundary Component
+ * Requirements: 11.1 - Global error handling with React error boundaries
+ */
+import { Component } from 'react';
+import styled from 'styled-components';
+import { ErrorMessage } from './ErrorMessage';
+const Container = styled.div `
+  padding: var(--spacing-xl, 1.5rem);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+`;
+const ErrorTitle = styled.h2 `
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-error, #dc3545);
+  margin-bottom: var(--spacing-md, 1rem);
+`;
+const ErrorDetails = styled.details `
+  margin-top: var(--spacing-lg, 1.5rem);
+  width: 100%;
+  max-width: 800px;
+`;
+const ErrorSummary = styled.summary `
+  cursor: pointer;
+  color: var(--color-text-secondary, #6b7280);
+  font-size: 0.875rem;
+  margin-bottom: var(--spacing-md, 1rem);
+  
+  &:hover {
+    color: var(--color-text, #1a1a1a);
+  }
+`;
+const ErrorCode = styled.pre `
+  background: var(--color-background, #ffffff);
+  border: 1px solid var(--color-border, #e5e7eb);
+  border-radius: var(--border-radius-md, 0.375rem);
+  padding: var(--spacing-md, 1rem);
+  overflow-x: auto;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary, #6b7280);
+  max-height: 300px;
+  overflow-y: auto;
+`;
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.handleReset = () => {
+            this.setState({
+                hasError: false,
+                error: null,
+                errorInfo: null,
+            });
+        };
+        this.state = {
+            hasError: false,
+            error: null,
+            errorInfo: null,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return {
+            hasError: true,
+            error,
+            errorInfo: null,
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        // Log error to console and monitoring service
+        console.error('ErrorBoundary caught an error:', error, errorInfo);
+        // TODO: Send to error monitoring service (e.g., Sentry)
+        // logErrorToService(error, errorInfo);
+        this.setState({
+            error,
+            errorInfo,
+        });
+    }
+    render() {
+        var _a, _b, _c;
+        if (this.state.hasError) {
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+            const isDevelopment = typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'development';
+            return (_jsxs(Container, { children: [_jsx(ErrorTitle, { children: "Something went wrong" }), _jsx(ErrorMessage, { message: ((_b = this.state.error) === null || _b === void 0 ? void 0 : _b.message) || 'An unexpected error occurred', onRetry: this.handleReset }), isDevelopment && this.state.errorInfo && (_jsxs(ErrorDetails, { children: [_jsx(ErrorSummary, { children: "Error Details (Development Only)" }), _jsxs(ErrorCode, { children: [(_c = this.state.error) === null || _c === void 0 ? void 0 : _c.toString(), this.state.errorInfo.componentStack] })] }))] }));
+        }
+        return this.props.children;
+    }
+}

package/dist/components/Common/ErrorBoundary.jsx

@@ -0,0 +1,103 @@
+/**
+ * ErrorBoundary Component
+ * Requirements: 11.1 - Global error handling with React error boundaries
+ */
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { ErrorMessage } from './ErrorMessage';
+const Container = styled.div `
+  padding: var(--spacing-xl, 1.5rem);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+`;
+const ErrorTitle = styled.h2 `
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-error, #dc3545);
+  margin-bottom: var(--spacing-md, 1rem);
+`;
+const ErrorDetails = styled.details `
+  margin-top: var(--spacing-lg, 1.5rem);
+  width: 100%;
+  max-width: 800px;
+`;
+const ErrorSummary = styled.summary `
+  cursor: pointer;
+  color: var(--color-text-secondary, #6b7280);
+  font-size: 0.875rem;
+  margin-bottom: var(--spacing-md, 1rem);
+  
+  &:hover {
+    color: var(--color-text, #1a1a1a);
+  }
+`;
+const ErrorCode = styled.pre `
+  background: var(--color-background, #ffffff);
+  border: 1px solid var(--color-border, #e5e7eb);
+  border-radius: var(--border-radius-md, 0.375rem);
+  padding: var(--spacing-md, 1rem);
+  overflow-x: auto;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary, #6b7280);
+  max-height: 300px;
+  overflow-y: auto;
+`;
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.handleReset = () => {
+            this.setState({
+                hasError: false,
+                error: null,
+                errorInfo: null,
+            });
+        };
+        this.state = {
+            hasError: false,
+            error: null,
+            errorInfo: null,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return {
+            hasError: true,
+            error,
+            errorInfo: null,
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        // Log error to console and monitoring service
+        console.error('ErrorBoundary caught an error:', error, errorInfo);
+        // TODO: Send to error monitoring service (e.g., Sentry)
+        // logErrorToService(error, errorInfo);
+        this.setState({
+            error,
+            errorInfo,
+        });
+    }
+    render() {
+        var _a, _b, _c;
+        if (this.state.hasError) {
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+            const isDevelopment = typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'development';
+            return (<Container>
+          <ErrorTitle>Something went wrong</ErrorTitle>
+          <ErrorMessage message={((_b = this.state.error) === null || _b === void 0 ? void 0 : _b.message) || 'An unexpected error occurred'} onRetry={this.handleReset}/>
+          
+          {isDevelopment && this.state.errorInfo && (<ErrorDetails>
+              <ErrorSummary>Error Details (Development Only)</ErrorSummary>
+              <ErrorCode>
+                {(_c = this.state.error) === null || _c === void 0 ? void 0 : _c.toString()}
+                {this.state.errorInfo.componentStack}
+              </ErrorCode>
+            </ErrorDetails>)}
+        </Container>);
+        }
+        return this.props.children;
+    }
+}

package/dist/components/Common/ErrorMessage.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ErrorMessageProps {
+    message: string;
+    onRetry?: () => void;
+}
+export declare const ErrorMessage: React.FC<ErrorMessageProps>;
+export {};
+//# sourceMappingURL=ErrorMessage.d.ts.map

package/dist/components/Common/ErrorMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Common/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAQpD,CAAC"}

package/dist/components/Common/ErrorMessage.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+export const ErrorMessage = ({ message, onRetry }) => {
+    return (_jsxs(Container, { children: [_jsx(Icon, { children: "\u26A0\uFE0F" }), _jsx(Message, { children: message }), onRetry && _jsx(RetryButton, { onClick: onRetry, children: "Try Again" })] }));
+};
+const Container = styled.div `
+  background-color: rgba(239, 68, 68, 0.1);
+  border: 1px solid var(--color-error, #dc3545);
+  border-radius: var(--border-radius-lg, 0.5rem);
+  padding: var(--spacing-xl, 1.5rem);
+  text-align: center;
+`;
+const Icon = styled.div `
+  font-size: 3rem;
+  margin-bottom: var(--spacing-md, 1rem);
+`;
+const Message = styled.p `
+  color: var(--color-error, #dc3545);
+  font-size: 1rem;
+  margin-bottom: var(--spacing-md, 1rem);
+`;
+const RetryButton = styled.button `
+  background-color: var(--color-error, #dc3545);
+  color: white;
+  padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
+  border-radius: var(--border-radius-md, 0.375rem);
+  font-weight: 600;
+  transition: all 0.3s ease;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+  }
+`;

package/dist/components/Common/ErrorMessage.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+export const ErrorMessage = ({ message, onRetry }) => {
+    return (<Container>
+      <Icon>⚠️</Icon>
+      <Message>{message}</Message>
+      {onRetry && <RetryButton onClick={onRetry}>Try Again</RetryButton>}
+    </Container>);
+};
+const Container = styled.div `
+  background-color: rgba(239, 68, 68, 0.1);
+  border: 1px solid var(--color-error, #dc3545);
+  border-radius: var(--border-radius-lg, 0.5rem);
+  padding: var(--spacing-xl, 1.5rem);
+  text-align: center;
+`;
+const Icon = styled.div `
+  font-size: 3rem;
+  margin-bottom: var(--spacing-md, 1rem);
+`;
+const Message = styled.p `
+  color: var(--color-error, #dc3545);
+  font-size: 1rem;
+  margin-bottom: var(--spacing-md, 1rem);
+`;
+const RetryButton = styled.button `
+  background-color: var(--color-error, #dc3545);
+  color: white;
+  padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
+  border-radius: var(--border-radius-md, 0.375rem);
+  font-weight: 600;
+  transition: all 0.3s ease;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+  }
+`;

package/dist/components/Common/Loading.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface LoadingProps {
+    size?: 'small' | 'medium' | 'large';
+    text?: string;
+}
+export declare const Loading: React.FC<LoadingProps>;
+export {};
+//# sourceMappingURL=Loading.d.ts.map

package/dist/components/Common/Loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../src/components/Common/Loading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAO1C,CAAC"}

package/dist/components/Common/Loading.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { keyframes } from 'styled-components';
+export const Loading = ({ size = 'medium', text }) => {
+    return (_jsxs(Container, { children: [_jsx(Spinner, { size: size }), text && _jsx(LoadingText, { children: text })] }));
+};
+const spin = keyframes `
+  to { transform: rotate(360deg); }
+`;
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md, 1rem);
+  padding: var(--spacing-xl, 1.5rem);
+`;
+const Spinner = styled.div `
+  width: ${props => {
+    switch (props.size) {
+        case 'small': return '24px';
+        case 'large': return '64px';
+        default: return '48px';
+    }
+}};
+  height: ${props => {
+    switch (props.size) {
+        case 'small': return '24px';
+        case 'large': return '64px';
+        default: return '48px';
+    }
+}};
+  border: 4px solid var(--color-border, #e5e7eb);
+  border-top-color: var(--color-primary, #6a8102);
+  border-radius: 50%;
+  animation: ${spin} 1s linear infinite;
+`;
+const LoadingText = styled.p `
+  color: var(--color-text-secondary, #6b7280);
+  font-size: 1rem;
+  margin: 0;
+`;

package/dist/components/Common/Loading.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+export const Loading = ({ size = 'medium', text }) => {
+    return (<Container>
+      <Spinner size={size}/>
+      {text && <LoadingText>{text}</LoadingText>}
+    </Container>);
+};
+const spin = keyframes `
+  to { transform: rotate(360deg); }
+`;
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md, 1rem);
+  padding: var(--spacing-xl, 1.5rem);
+`;
+const Spinner = styled.div `
+  width: ${props => {
+    switch (props.size) {
+        case 'small': return '24px';
+        case 'large': return '64px';
+        default: return '48px';
+    }
+}};
+  height: ${props => {
+    switch (props.size) {
+        case 'small': return '24px';
+        case 'large': return '64px';
+        default: return '48px';
+    }
+}};
+  border: 4px solid var(--color-border, #e5e7eb);
+  border-top-color: var(--color-primary, #6a8102);
+  border-radius: 50%;
+  animation: ${spin} 1s linear infinite;
+`;
+const LoadingText = styled.p `
+  color: var(--color-text-secondary, #6b7280);
+  font-size: 1rem;
+  margin: 0;
+`;

package/dist/components/Common/LoadingIndicator.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Loading Indicator Component
+ * Displays loading feedback appropriate to context
+ * Requirements: 5.2, 5.5
+ */
+import React from 'react';
+export type LoadingType = 'spinner' | 'progress' | 'dots';
+export type LoadingSize = 'small' | 'medium' | 'large';
+interface LoadingIndicatorProps {
+    type: LoadingType;
+    size?: LoadingSize;
+    message?: string;
+    progress?: number;
+}
+export declare const LoadingIndicator: React.FC<LoadingIndicatorProps>;
+export {};
+//# sourceMappingURL=LoadingIndicator.d.ts.map

package/dist/components/Common/LoadingIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/Common/LoadingIndicator.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD,UAAU,qBAAqB;IAC7B,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAyFD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAqC5D,CAAC"}

package/dist/components/Common/LoadingIndicator.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { keyframes } from 'styled-components';
+const spin = keyframes `
+  to { transform: rotate(360deg); }
+`;
+const dots = keyframes `
+  0%, 20% {
+    content: '.';
+  }
+  40% {
+    content: '..';
+  }
+  60%, 100% {
+    content: '...';
+  }
+`;
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md, 1rem);
+  padding: var(--spacing-lg, 1.5rem);
+`;
+const Spinner = styled.div `
+  width: ${props => {
+    switch (props.size) {
+        case 'small': return '24px';
+        case 'large': return '64px';
+        default: return '48px';
+    }
+}};
+  height: ${props => {
+    switch (props.size) {
+        case 'small': return '24px';
+        case 'large': return '64px';
+        default: return '48px';
+    }
+}};
+  border: 4px solid var(--color-border, #e5e7eb);
+  border-top-color: var(--color-primary, #6a8102);
+  border-radius: 50%;
+  animation: ${spin} 1s linear infinite;
+`;
+const ProgressBarContainer = styled.div `
+  width: 100%;
+  max-width: 300px;
+  height: 8px;
+  background: var(--color-border, #e5e7eb);
+  border-radius: var(--border-radius-md, 0.375rem);
+  overflow: hidden;
+`;
+const ProgressBar = styled.div `
+  height: 100%;
+  width: ${props => props.progress}%;
+  background: linear-gradient(90deg, var(--color-primary, #6a8102), var(--color-secondary, #ffc107));
+  border-radius: var(--border-radius-md, 0.375rem);
+  transition: width 0.3s ease;
+`;
+const Dots = styled.div `
+  font-size: 1.5rem;
+  color: var(--color-primary, #6a8102);
+  
+  &::after {
+    content: '.';
+    animation: ${dots} 1.5s steps(4, end) infinite;
+  }
+`;
+const Message = styled.p `
+  color: var(--color-text-secondary, #6b7280);
+  font-size: 0.875rem;
+  margin: 0;
+  text-align: center;
+`;
+const ProgressText = styled.span `
+  color: var(--color-text-secondary, #6b7280);
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin-top: var(--spacing-xs, 0.25rem);
+`;
+export const LoadingIndicator = ({ type, size = 'medium', message, progress, }) => {
+    const renderIndicator = () => {
+        switch (type) {
+            case 'spinner':
+                return _jsx(Spinner, { size: size });
+            case 'progress':
+                return (_jsxs("div", { style: { width: '100%', maxWidth: '300px' }, children: [_jsx(ProgressBarContainer, { children: _jsx(ProgressBar, { progress: progress || 0 }) }), progress !== undefined && (_jsxs(ProgressText, { children: [Math.round(progress), "%"] }))] }));
+            case 'dots':
+                return _jsx(Dots, {});
+            default:
+                return null;
+        }
+    };
+    return (_jsxs(Container, { children: [renderIndicator(), message && _jsx(Message, { children: message })] }));
+};