create-bluecopa-react-app 1.0.41 → 1.0.42

package/templates/latest/README.md

@@ -2,7 +2,6 @@
 
 A modern, production-ready template for building full-stack React applications using React Router v7 and shadcn/ui components.
 
-
 ## Features
 
 - 🚀 **React Router v7** - Latest React Router with server-side rendering
@@ -59,11 +58,13 @@ Your application will be available at `http://localhost:8080`.
 This template includes a comprehensive set of shadcn/ui components:
 
 ### Layout Components
+
 - **Sidebar** - Collapsible navigation sidebar with mobile support
 - **Sheet** - Slide-out panels for mobile navigation
 - **Drawer** - Bottom drawer for mobile interactions
 
 ### Form Components
+
 - **Button** - Multiple variants and sizes
 - **Input** - Text input with validation states
 - **Select** - Dropdown selection with search
@@ -71,6 +72,7 @@ This template includes a comprehensive set of shadcn/ui components:
 - **Label** - Accessible form labels
 
 ### Data Display
+
 - **Table** - Sortable, filterable data tables with TanStack Table
 - **Card** - Content containers with header, content, and footer
 - **Badge** - Status indicators and labels
@@ -78,16 +80,19 @@ This template includes a comprehensive set of shadcn/ui components:
 - **Skeleton** - Loading placeholders
 
 ### Navigation
+
 - **Tabs** - Tabbed content organization
 - **Breadcrumb** - Navigation breadcrumbs
 - **Dropdown Menu** - Context menus and actions
 - **Tooltip** - Hover information
 
 ### Feedback
+
 - **Sonner** - Toast notifications
 - **Separator** - Visual content dividers
 
 ### Charts
+
 - **Interactive Charts** - Recharts integration with hover states
 - **Area Charts** - Time series data visualization
 
@@ -105,9 +110,11 @@ VITE_BLUECOPA_API_TOKEN=your_base64_encoded_token_here
 ```
 
 **Note:** `VITE_BLUECOPA_API_TOKEN` should be a base64-encoded JSON string containing an `accessToken` field, for example:
+
 ```json
-{"accessToken": "your_access_token_here"}
+{ "accessToken": "your_access_token_here" }
 ```
+
 encoded as base64.
 
 If the API errors out or is not configured, the application will show "Set Environment" as the user name with email "setenv@email.com" as a fallback.
@@ -124,6 +131,7 @@ This template includes a comprehensive example of using Bluecopa statement hooks
 - **useCreateStatementRun** - Creating new statement runs with mutations
 
 The example includes two pre-configured statement IDs:
+
 - Example 1: `MDYK9CU8NR1S41AFAOEX` (uses default view)
 - Example 2: `MGIZ7GD08NQJ71SK8RA7` with View ID `MGJ1ZF0JN53B0V0YH10Z`
 
@@ -193,6 +201,7 @@ npx shadcn-ui@latest add toast
 ## Styling
 
 This template comes with [Tailwind CSS v4](https://tailwindcss.com/) configured with:
+
 - CSS variables for theming
 - Dark mode support with next-themes
 - shadcn/ui design system

package/templates/latest/app/app.css

@@ -1,26 +1,82 @@
-@import "tailwindcss";
-@import "tw-animate-css";
+/*
+ * MFE CSS Strategy:
+ * - NO global preflight — we skip Tailwind's base reset to avoid leaking into the host app
+ * - Scoped reset under .mfe-root — only affects the MFE subtree
+ * - copa: prefix on all utilities — prevents class name collisions
+ * - Custom utilities scoped under .mfe-root — prevents naming collisions
+ */
 
-@custom-variant dark (&:is(.dark *));
+/* Import Tailwind WITHOUT preflight — preflight resets *, html, body globally which leaks into the host */
+/* @import "tailwindcss/preflight" — INTENTIONALLY SKIPPED (global resets leak into host app) */
+@import "tailwindcss/theme" prefix(copa);
+@import "tailwindcss/utilities" prefix(copa);
+@import "tw-animate-css";
 
+/* ===== BUILD-TIME THEME (resolved at compile) ===== */
 @theme {
-  --font-sans: "Satoshi", ui-sans-serif, system-ui, sans-serif;
-}
+  /* Breakpoints (required — Tailwind v4 prefix does not auto-include defaults) */
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
 
-html,
-body {
-  @apply bg-white dark:bg-gray-950;
+  /* Font family */
+  --font-sans: "Satoshi", sans-serif;
+  --font-mono: "Satoshi", sans-serif;
 
-  @media (prefers-color-scheme: dark) {
-    color-scheme: dark;
-  }
+  /* Fluid type scale (from Dream Light _typography.css — exact values) */
+  --text-xs: 0.702rem;
+  --text-xs--line-height: 1.053rem;
+  --text-sm: 0.835rem;
+  --text-sm--line-height: 1.258rem;
+  --text-md: 1.004rem;
+  --text-md--line-height: 1.513rem;
+  --text-lg: 1.21rem;
+  --text-lg--line-height: 1.815rem;
+  --text-xl: 1.452rem;
+  --text-xl--line-height: 2.190rem;
+  --text-2xl: 1.742rem;
+  --text-2xl--line-height: 2.626rem;
+  --text-3xl: 2.093rem;
+  --text-3xl--line-height: 3.146rem;
+  --text-4xl: 2.505rem;
+  --text-4xl--line-height: 3.763rem;
+  --text-5xl: 3.013rem;
+  --text-5xl--line-height: 4.513rem;
+
+  /* Heading scale */
+  --text-h1: 3rem;
+  --text-h1--line-height: 4.5rem;
+  --text-h2: 2.25rem;
+  --text-h2--line-height: 3.375rem;
+  --text-h3: 1.875rem;
+  --text-h3--line-height: 2.8125rem;
+  --text-h4: 1.5rem;
+  --text-h4--line-height: 2.25rem;
+  --text-h5: 1.25rem;
+  --text-h5--line-height: 1.875rem;
+  --text-h6: 1rem;
+  --text-h6--line-height: 1.5rem;
+  --text-body: 0.875rem;
+  --text-body--line-height: 1.2rem;
+  --text-caption: 0.75rem;
+  --text-caption--line-height: 0.95rem;
+
+  /* Radius (from Dream Light _spacing.css) */
+  --card-radius: 1.25rem;
+  --rounded-input: 12px;
 }
 
+/* ===== RUNTIME THEME (CSS vars bound at runtime) ===== */
 @theme inline {
+  /* Radius (computed from --radius in .mfe-root) */
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+
+  /* Colors */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -39,11 +95,8 @@ body {
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
+
+  /* Sidebar */
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -54,80 +107,234 @@ body {
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
-:root {
-  --radius: 0.65rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.623 0.214 259.815);
-  --primary-foreground: oklch(0.97 0.014 254.604);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
+/* ===== MFE-SCOPED VARIABLES (light theme-modern from Dream Light _colors.css) ===== */
+.mfe-root {
+  /* Radius (Dream Light _spacing.css) */
+  --radius: 1rem;
+
+  /* Colors (exact values from Dream Light _colors.css) */
+  --background: oklch(0.975 0.005 280);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(0.995 0.003 280 / 0.85);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(0.995 0.003 280);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: #3548ff;
+  --primary-foreground: oklch(100% 0 0);
+  --primary-lighter: #ebf4ff;
+  --secondary: oklch(0.97 0.003 280);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0.003 280);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0.003 280);
+  --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.623 0.214 259.815);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.623 0.214 259.815);
-  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.623 0.214 259.815);
-}
+  --border: oklch(0.92 0.005 280);
+  --input: oklch(0.92 0.005 280);
+  --ring: oklch(0.25 0.08 9);
+
+  /* Sidebar (Dream Light — white panel, subtle border) */
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.96 0.003 280);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.92 0.004 280);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* Semantic status colors */
+  --status-success: oklch(0.72 0.19 142);
+  --status-success-bg: oklch(0.95 0.05 142);
+  --status-success-border: oklch(0.80 0.12 142);
+  --status-warning: oklch(0.80 0.18 85);
+  --status-warning-bg: oklch(0.96 0.06 85);
+  --status-warning-border: oklch(0.85 0.12 85);
+  --status-error: oklch(0.63 0.24 25);
+  --status-error-bg: oklch(0.95 0.04 25);
+  --status-error-border: oklch(0.75 0.15 25);
+  --status-info: oklch(0.62 0.19 250);
+  --status-info-bg: oklch(0.95 0.04 250);
+  --status-info-border: oklch(0.75 0.12 250);
 
-.dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.546 0.245 262.881);
-  --primary-foreground: oklch(0.379 0.146 265.522);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.488 0.243 264.376);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.546 0.245 262.881);
-  --sidebar-primary-foreground: oklch(0.379 0.146 265.522);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.488 0.243 264.376);
+  /* Spacing (theme-modern preset) */
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+
+  /* Chart colors (Dream Light palette) */
+  --chart-1: oklch(0.55 0.15 255);
+  --chart-2: oklch(0.62 0.12 175);
+  --chart-3: oklch(0.70 0.13 80);
+  --chart-4: oklch(0.55 0.14 295);
+  --chart-5: oklch(0.62 0.12 15);
+
+  /* Motion tokens */
+  --duration-fast: 100ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
+/* ===== SCOPED BASE RESET ===== */
+/* Tailwind preflight is scoped to .mfe-root so it only resets MFE elements, not the host app */
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
+  .mfe-root {
+    @apply copa:bg-background copa:text-foreground;
+    font-family: var(--font-sans, "Satoshi", sans-serif);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .mfe-root *,
+  .mfe-root *::before,
+  .mfe-root *::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    @apply copa:border-border copa:outline-ring/50;
+  }
+
+  .mfe-root button,
+  .mfe-root a,
+  .mfe-root [role="menuitem"],
+  .mfe-root [role="option"],
+  .mfe-root [data-slot="sidebar-menu-button"],
+  .mfe-root [data-slot="dropdown-menu-trigger"],
+  .mfe-root [data-slot="dropdown-menu-item"] {
+    cursor: pointer;
   }
-  body {
-    @apply bg-background text-foreground;
+
+  .mfe-root img,
+  .mfe-root svg,
+  .mfe-root video {
+    display: block;
+    max-width: 100%;
+  }
+
+  .mfe-root h1, .mfe-root h2, .mfe-root h3,
+  .mfe-root h4, .mfe-root h5, .mfe-root h6 {
+    font-size: inherit;
+    font-weight: inherit;
   }
+
+  .mfe-root ol,
+  .mfe-root ul,
+  .mfe-root menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .mfe-root p,
+  .mfe-root h1, .mfe-root h2, .mfe-root h3,
+  .mfe-root h4, .mfe-root h5, .mfe-root h6,
+  .mfe-root blockquote,
+  .mfe-root dl, .mfe-root dd,
+  .mfe-root figure,
+  .mfe-root fieldset,
+  .mfe-root legend,
+  .mfe-root pre {
+    margin: 0;
+  }
+
+  .mfe-root hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  .mfe-root a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  .mfe-root button,
+  .mfe-root input,
+  .mfe-root optgroup,
+  .mfe-root select,
+  .mfe-root textarea {
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+  }
+
+  .mfe-root table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    text-indent: 0;
+    border-color: inherit;
+  }
+}
+
+/* ===== SCOPED TYPOGRAPHY UTILITIES ===== */
+.mfe-root .text-page-title {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 600;
+}
+.mfe-root .text-section-title {
+  font-size: 0.9375rem;
+  line-height: 1.375rem;
+  font-weight: 600;
+}
+.mfe-root .text-label {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+.mfe-root .text-value {
+  font-size: 1.75rem;
+  line-height: 2.25rem;
+  font-weight: 700;
+}
+.mfe-root .text-nav-section {
+  font-size: 0.6875rem;
+  line-height: 1rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* ===== SCOPED SHADOW UTILITIES ===== */
+.mfe-root .shadow-soft-xs { box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03); }
+.mfe-root .shadow-soft-sm { box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04); }
+.mfe-root .shadow-soft { box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05); }
+.mfe-root .shadow-soft-md { box-shadow: 0 6px 30px rgba(0, 0, 0, 0.06); }
+.mfe-root .shadow-soft-lg { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.07); }
+.mfe-root .shadow-card {
+  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.02), 0 8px 16px rgba(0,0,0,0.01);
+}
+.mfe-root .shadow-card-hover {
+  box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.04), 0 16px 32px rgba(0,0,0,0.02);
+}
+
+/* ===== ANIMATION KEYFRAMES (keyframes are global but unique names prevent collisions) ===== */
+@keyframes copa-fade-in-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes copa-fade-in-down {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes copa-scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes copa-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
 }

package/templates/latest/app/app.tsx

@@ -1,51 +1,60 @@
-import { Suspense, useEffect, useState } from 'react'
+import "./app.css";
+import { useState, useEffect } from "react";
 import { reactQuery, ReactQueryDevtools, copaSetConfig } from "@bluecopa/react";
-import { Toaster } from "sonner";
-import RouteConfig from './routes';
-
-import './app.css'
+import { Toaster } from "~/components/ui/sonner";
+import { AppProvider } from "~/contexts/app-context";
+import { ChartProvider } from "~/components/charts";
+import { LoadingScreen } from "~/components/loading-screen";
+import RouteConfig from "./routes";
+import type { MfeProps } from "~/types";
+import { DEFAULT_API_BASE_URL, DEFAULT_WORKSPACE_ID, QUERY_DEFAULTS } from "~/constants";
+import { initAgGridLicense } from "~/utils/ag-grid-license";
 
 const { QueryClient, QueryClientProvider } = reactQuery;
 
-export default function App(props: any) {
-  const [queryClient] = useState(() => new QueryClient({
-    defaultOptions: {
-      queries: {
-        staleTime: 60 * 1000, // 1 minute
-        refetchOnWindowFocus: false,
-      },
-    },
-  }));
+export default function App(props: MfeProps) {
+  const [isConfigured, setIsConfigured] = useState(false);
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: { staleTime: QUERY_DEFAULTS.STALE_TIME, retry: QUERY_DEFAULTS.RETRY },
+        },
+      }),
+  );
 
   useEffect(() => {
-    // Configure Bluecopa API
-    let copaUser = {} as any;
-    try {
-      const copaToken = import.meta.env.VITE_BLUECOPA_API_TOKEN
-        ? atob(import.meta.env.VITE_BLUECOPA_API_TOKEN)
-        : '{}';
-      copaUser = JSON.parse(copaToken);
-    } catch (error) {
-      console.warn('Failed to parse VITE_BLUECOPA_API_TOKEN:', error);
-    }
-
-    console.log("Copa User", import.meta.env.VITE_BLUECOPA_API_URL);
-
+    initAgGridLicense();
     copaSetConfig({
-      apiBaseUrl: props.apiBaseUrl || import.meta.env.VITE_BLUECOPA_API_URL || 'https://develop.bluecopa.com',
-      workspaceId: props.workspaceId || import.meta.env.VITE_BLUECOPA_WORKSPACE_ID || '',
-      accessToken: props.accessToken || copaUser?.accessToken || import.meta.env.VITE_BLUECOPA_API_TOKEN || '',
-      userId: props.userId || copaUser.userId || ''
-    } as any);
-  }, []);
+      apiBaseUrl:
+        props.apiBaseUrl ||
+        import.meta.env.VITE_BLUECOPA_API_URL ||
+        DEFAULT_API_BASE_URL,
+      accessToken: props.accessToken || "",
+      workspaceId:
+        props.workspaceId ||
+        import.meta.env.VITE_BLUECOPA_WORKSPACE_ID ||
+        DEFAULT_WORKSPACE_ID,
+      userId: props.userId || "",
+    });
+    setIsConfigured(true);
+  }, [props.apiBaseUrl, props.accessToken, props.workspaceId, props.userId]);
+
+  if (!isConfigured) {
+    return <LoadingScreen message="Initializing..." />;
+  }
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Suspense fallback={<div className="p-4 text-sm text-muted-foreground">Loading…</div>}>
-        <RouteConfig />
-        <ReactQueryDevtools initialIsOpen={false} />
-        <Toaster />
-      </Suspense>
+      <div className="mfe-root copa:min-h-svh copa:animate-in copa:fade-in copa:duration-300">
+        <ChartProvider>
+          <AppProvider>
+            <RouteConfig />
+            <Toaster />
+          </AppProvider>
+        </ChartProvider>
+        {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
+      </div>
     </QueryClientProvider>
-  )
+  );
 }

package/templates/latest/app/components/bluecopa-logo.tsx

@@ -0,0 +1,20 @@
+export function BluecopaLogo(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1820 1774.9"
+      {...props}
+    >
+      <circle fill="#fff" cx="1054.53" cy="779.52" r="386.21" />
+      <path
+        fill="#8ac2ff"
+        d="M5.91,1004.47L0,1768.96l764.5,5.91c422.08,3.27,767.15-336.52,770.42-758.58,3.26-422.06-336.51-767.14-758.59-770.41C350.68,242.59,9.18,582.4,5.91,1004.47Z"
+      />
+      <path
+        fill="#3548ff"
+        d="M1820,764.52V0h-764.52C633.38,0,290.95,342.44,290.95,764.52s342.43,764.52,764.52,764.52,764.52-342.44,764.52-764.52Z"
+      />
+      <circle fill="#fff" cx="1055.48" cy="780.55" r="382.26" />
+    </svg>
+  );
+}