keynesol-shared 1.0.0 → 1.0.2

package/dist/components/Common/ErrorBoundary.js

@@ -1,12 +1,50 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorBoundary = void 0;
 /**
  * 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 `
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ErrorMessage_1 = require("./ErrorMessage");
+const Container = styled_components_1.default.div `
   padding: var(--spacing-xl, 1.5rem);
   display: flex;
   flex-direction: column;
@@ -14,18 +52,18 @@ const Container = styled.div `
   justify-content: center;
   min-height: 400px;
 `;
-const ErrorTitle = styled.h2 `
+const ErrorTitle = styled_components_1.default.h2 `
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--color-error, #dc3545);
   margin-bottom: var(--spacing-md, 1rem);
 `;
-const ErrorDetails = styled.details `
+const ErrorDetails = styled_components_1.default.details `
   margin-top: var(--spacing-lg, 1.5rem);
   width: 100%;
   max-width: 800px;
 `;
-const ErrorSummary = styled.summary `
+const ErrorSummary = styled_components_1.default.summary `
   cursor: pointer;
   color: var(--color-text-secondary, #6b7280);
   font-size: 0.875rem;
@@ -35,7 +73,7 @@ const ErrorSummary = styled.summary `
     color: var(--color-text, #1a1a1a);
   }
 `;
-const ErrorCode = styled.pre `
+const ErrorCode = styled_components_1.default.pre `
   background: var(--color-background, #ffffff);
   border: 1px solid var(--color-border, #e5e7eb);
   border-radius: var(--border-radius-md, 0.375rem);
@@ -46,7 +84,7 @@ const ErrorCode = styled.pre `
   max-height: 300px;
   overflow-y: auto;
 `;
-export class ErrorBoundary extends Component {
+class ErrorBoundary extends react_1.Component {
     constructor(props) {
         super(props);
         this.handleReset = () => {
@@ -86,8 +124,16 @@ export class ErrorBoundary extends Component {
                 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 (react_1.default.createElement(Container, null,
+                react_1.default.createElement(ErrorTitle, null, "Something went wrong"),
+                react_1.default.createElement(ErrorMessage_1.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 && (react_1.default.createElement(ErrorDetails, null,
+                    react_1.default.createElement(ErrorSummary, null, "Error Details (Development Only)"),
+                    react_1.default.createElement(ErrorCode, null, (_c = this.state.error) === null || _c === void 0 ? void 0 :
+                        _c.toString(),
+                        this.state.errorInfo.componentStack)))));
         }
         return this.props.children;
     }
 }
+exports.ErrorBoundary = ErrorBoundary;

package/dist/components/Common/ErrorMessage.js

@@ -1,25 +1,35 @@
-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" })] }));
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-const Container = styled.div `
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ErrorMessage = ({ message, onRetry }) => {
+    return (react_1.default.createElement(Container, null,
+        react_1.default.createElement(Icon, null, "\u26A0\uFE0F"),
+        react_1.default.createElement(Message, null, message),
+        onRetry && react_1.default.createElement(RetryButton, { onClick: onRetry }, "Try Again")));
+};
+exports.ErrorMessage = ErrorMessage;
+const Container = styled_components_1.default.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 `
+const Icon = styled_components_1.default.div `
   font-size: 3rem;
   margin-bottom: var(--spacing-md, 1rem);
 `;
-const Message = styled.p `
+const Message = styled_components_1.default.p `
   color: var(--color-error, #dc3545);
   font-size: 1rem;
   margin-bottom: var(--spacing-md, 1rem);
 `;
-const RetryButton = styled.button `
+const RetryButton = styled_components_1.default.button `
   background-color: var(--color-error, #dc3545);
   color: white;
   padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);

package/dist/components/Common/Loading.js

@@ -1,12 +1,54 @@
-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 })] }));
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const Loading = ({ size = 'medium', text }) => {
+    return (react_1.default.createElement(Container, null,
+        react_1.default.createElement(Spinner, { size: size }),
+        text && react_1.default.createElement(LoadingText, null, text)));
 };
-const spin = keyframes `
+exports.Loading = Loading;
+const spin = (0, styled_components_1.keyframes) `
   to { transform: rotate(360deg); }
 `;
-const Container = styled.div `
+const Container = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -14,7 +56,7 @@ const Container = styled.div `
   gap: var(--spacing-md, 1rem);
   padding: var(--spacing-xl, 1.5rem);
 `;
-const Spinner = styled.div `
+const Spinner = styled_components_1.default.div `
   width: ${props => {
     switch (props.size) {
         case 'small': return '24px';
@@ -34,7 +76,7 @@ const Spinner = styled.div `
   border-radius: 50%;
   animation: ${spin} 1s linear infinite;
 `;
-const LoadingText = styled.p `
+const LoadingText = styled_components_1.default.p `
   color: var(--color-text-secondary, #6b7280);
   font-size: 1rem;
   margin: 0;

package/dist/components/Common/LoadingIndicator.js

@@ -1,9 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { keyframes } from 'styled-components';
-const spin = keyframes `
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingIndicator = void 0;
+/**
+ * Loading Indicator Component
+ * Displays loading feedback appropriate to context
+ * Requirements: 5.2, 5.5
+ */
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const spin = (0, styled_components_1.keyframes) `
   to { transform: rotate(360deg); }
 `;
-const dots = keyframes `
+const dots = (0, styled_components_1.keyframes) `
   0%, 20% {
     content: '.';
   }
@@ -14,7 +58,7 @@ const dots = keyframes `
     content: '...';
   }
 `;
-const Container = styled.div `
+const Container = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -22,7 +66,7 @@ const Container = styled.div `
   gap: var(--spacing-md, 1rem);
   padding: var(--spacing-lg, 1.5rem);
 `;
-const Spinner = styled.div `
+const Spinner = styled_components_1.default.div `
   width: ${props => {
     switch (props.size) {
         case 'small': return '24px';
@@ -42,7 +86,7 @@ const Spinner = styled.div `
   border-radius: 50%;
   animation: ${spin} 1s linear infinite;
 `;
-const ProgressBarContainer = styled.div `
+const ProgressBarContainer = styled_components_1.default.div `
   width: 100%;
   max-width: 300px;
   height: 8px;
@@ -50,14 +94,14 @@ const ProgressBarContainer = styled.div `
   border-radius: var(--border-radius-md, 0.375rem);
   overflow: hidden;
 `;
-const ProgressBar = styled.div `
+const ProgressBar = styled_components_1.default.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 `
+const Dots = styled_components_1.default.div `
   font-size: 1.5rem;
   color: var(--color-primary, #6a8102);
   
@@ -66,30 +110,38 @@ const Dots = styled.div `
     animation: ${dots} 1.5s steps(4, end) infinite;
   }
 `;
-const Message = styled.p `
+const Message = styled_components_1.default.p `
   color: var(--color-text-secondary, #6b7280);
   font-size: 0.875rem;
   margin: 0;
   text-align: center;
 `;
-const ProgressText = styled.span `
+const ProgressText = styled_components_1.default.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 LoadingIndicator = ({ type, size = 'medium', message, progress, }) => {
     const renderIndicator = () => {
         switch (type) {
             case 'spinner':
-                return _jsx(Spinner, { size: size });
+                return react_1.default.createElement(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), "%"] }))] }));
+                return (react_1.default.createElement("div", { style: { width: '100%', maxWidth: '300px' } },
+                    react_1.default.createElement(ProgressBarContainer, null,
+                        react_1.default.createElement(ProgressBar, { progress: progress || 0 })),
+                    progress !== undefined && (react_1.default.createElement(ProgressText, null,
+                        Math.round(progress),
+                        "%"))));
             case 'dots':
-                return _jsx(Dots, {});
+                return react_1.default.createElement(Dots, null);
             default:
                 return null;
         }
     };
-    return (_jsxs(Container, { children: [renderIndicator(), message && _jsx(Message, { children: message })] }));
+    return (react_1.default.createElement(Container, null,
+        renderIndicator(),
+        message && react_1.default.createElement(Message, null, message)));
 };
+exports.LoadingIndicator = LoadingIndicator;

package/dist/components/Common/ProgramStatus.js

@@ -1,16 +1,54 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
-import styled from 'styled-components';
-import { useProgram } from '../../hooks/useProgram';
-import { ErrorMessage } from './ErrorMessage';
-import toast from 'react-hot-toast';
-export const ProgramStatus = () => {
-    const { program, idl, idlError, programId } = useProgram();
-    const [showError, setShowError] = React.useState(false);
-    useEffect(() => {
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgramStatus = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const useProgram_1 = require("../../hooks/useProgram");
+const ErrorMessage_1 = require("./ErrorMessage");
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const ProgramStatus = () => {
+    const { program, idl, idlError, programId } = (0, useProgram_1.useProgram)();
+    const [showError, setShowError] = react_1.default.useState(false);
+    (0, react_1.useEffect)(() => {
         if (idlError) {
             setShowError(true);
-            toast.error(`Failed to load program: ${idlError}`, {
+            react_hot_toast_1.default.error(`Failed to load program: ${idlError}`, {
                 duration: 5000,
             });
         }
@@ -19,8 +57,10 @@ export const ProgramStatus = () => {
     if (!idlError) {
         return null;
     }
-    return (_jsx(Container, { children: _jsx(ErrorMessage, { message: `Failed to load program contract. Please refresh the page. Error: ${idlError}`, onRetry: () => window.location.reload() }) }));
+    return (react_1.default.createElement(Container, null,
+        react_1.default.createElement(ErrorMessage_1.ErrorMessage, { message: `Failed to load program contract. Please refresh the page. Error: ${idlError}`, onRetry: () => window.location.reload() })));
 };
-const Container = styled.div `
+exports.ProgramStatus = ProgramStatus;
+const Container = styled_components_1.default.div `
   margin: var(--spacing-md, 1rem) 0;
 `;

package/dist/components/Common/Skeleton.js

@@ -1,6 +1,49 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { keyframes } from 'styled-components';
-const shimmer = keyframes `
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileSkeleton = exports.StatsSkeleton = exports.VaultCardSkeleton = exports.SkeletonAvatar = exports.SkeletonButton = exports.SkeletonTitle = exports.SkeletonText = exports.SkeletonCard = void 0;
+/**
+ * Skeleton Screen Components
+ * Requirements: 11.3 - Loading states with skeleton screens for better perceived performance
+ */
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const shimmer = (0, styled_components_1.keyframes) `
   0% {
     background-position: -1000px 0;
   }
@@ -8,7 +51,7 @@ const shimmer = keyframes `
     background-position: 1000px 0;
   }
 `;
-const SkeletonBase = styled.div `
+const SkeletonBase = styled_components_1.default.div `
   background: linear-gradient(
     90deg,
     var(--color-surface, #f9fafb) 0%,
@@ -21,11 +64,11 @@ const SkeletonBase = styled.div `
   width: ${props => props.width || '100%'};
   height: ${props => props.height || '20px'};
 `;
-export const SkeletonCard = styled(SkeletonBase) `
+exports.SkeletonCard = (0, styled_components_1.default)(SkeletonBase) `
   height: 200px;
   margin-bottom: var(--spacing-md, 1rem);
 `;
-export const SkeletonText = styled(SkeletonBase) `
+exports.SkeletonText = (0, styled_components_1.default)(SkeletonBase) `
   height: 16px;
   margin-bottom: var(--spacing-xs, 0.25rem);
   
@@ -33,21 +76,32 @@ export const SkeletonText = styled(SkeletonBase) `
     margin-bottom: 0;
   }
 `;
-export const SkeletonTitle = styled(SkeletonBase) `
+exports.SkeletonTitle = (0, styled_components_1.default)(SkeletonBase) `
   height: 24px;
   width: 60%;
   margin-bottom: var(--spacing-md, 1rem);
 `;
-export const SkeletonButton = styled(SkeletonBase) `
+exports.SkeletonButton = (0, styled_components_1.default)(SkeletonBase) `
   height: 40px;
   width: 120px;
   border-radius: var(--border-radius-md, 0.375rem);
 `;
-export const SkeletonAvatar = styled(SkeletonBase) `
+exports.SkeletonAvatar = (0, styled_components_1.default)(SkeletonBase) `
   width: 64px;
   height: 64px;
   border-radius: 50%;
 `;
-export const VaultCardSkeleton = () => (_jsx(SkeletonCard, {}));
-export const StatsSkeleton = () => (_jsxs(_Fragment, { children: [_jsx(SkeletonTitle, {}), _jsx(SkeletonText, { width: "100%" }), _jsx(SkeletonText, { width: "80%" }), _jsx(SkeletonText, { width: "90%" })] }));
-export const ProfileSkeleton = () => (_jsxs(_Fragment, { children: [_jsx(SkeletonAvatar, { width: "80px", height: "80px" }), _jsx(SkeletonTitle, { width: "40%" }), _jsx(SkeletonText, { width: "60%" }), _jsx(SkeletonText, { width: "50%" })] }));
+const VaultCardSkeleton = () => (react_1.default.createElement(exports.SkeletonCard, null));
+exports.VaultCardSkeleton = VaultCardSkeleton;
+const StatsSkeleton = () => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(exports.SkeletonTitle, null),
+    react_1.default.createElement(exports.SkeletonText, { width: "100%" }),
+    react_1.default.createElement(exports.SkeletonText, { width: "80%" }),
+    react_1.default.createElement(exports.SkeletonText, { width: "90%" })));
+exports.StatsSkeleton = StatsSkeleton;
+const ProfileSkeleton = () => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(exports.SkeletonAvatar, { width: "80px", height: "80px" }),
+    react_1.default.createElement(exports.SkeletonTitle, { width: "40%" }),
+    react_1.default.createElement(exports.SkeletonText, { width: "60%" }),
+    react_1.default.createElement(exports.SkeletonText, { width: "50%" })));
+exports.ProfileSkeleton = ProfileSkeleton;