@adea-ai/ui 0.12.0 → 0.13.0

package/src/components/ui/toggle-group.tsx

@@ -1,37 +1,37 @@
-"use client";
+'use client'
 
-import * as React from "react";
-import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
-import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
-import { type VariantProps } from "class-variance-authority";
+import * as React from 'react'
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group'
+import { type VariantProps } from 'class-variance-authority'
 
-import { cn } from "#lib/utils";
-import { toggleVariants } from "#components/ui/toggle";
+import { cn } from '#lib/utils'
+import { toggleVariants } from '#components/ui/toggle'
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants> & {
-    spacing?: number;
-    orientation?: "horizontal" | "vertical";
+    spacing?: number
+    orientation?: 'horizontal' | 'vertical'
   }
 >({
-  size: "default",
-  variant: "default",
+  size: 'default',
+  variant: 'default',
   spacing: 2,
-  orientation: "horizontal",
-});
+  orientation: 'horizontal',
+})
 
 function ToggleGroup({
   className,
   variant,
   size,
   spacing = 2,
-  orientation = "horizontal",
+  orientation = 'horizontal',
   children,
   ...props
 }: ToggleGroupPrimitive.Props &
   VariantProps<typeof toggleVariants> & {
-    spacing?: number;
-    orientation?: "horizontal" | "vertical";
+    spacing?: number
+    orientation?: 'horizontal' | 'vertical'
   }) {
   return (
     <ToggleGroupPrimitive
@@ -40,9 +40,9 @@ function ToggleGroup({
       data-size={size}
       data-spacing={spacing}
       data-orientation={orientation}
-      style={{ "--gap": spacing } as React.CSSProperties}
+      style={{ '--gap': spacing } as React.CSSProperties}
       className={cn(
-        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
+        'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch',
         className
       )}
       {...props}
@@ -51,17 +51,17 @@ function ToggleGroup({
         {children}
       </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive>
-  );
+  )
 }
 
 function ToggleGroupItem({
   className,
   children,
-  variant = "default",
-  size = "default",
+  variant = 'default',
+  size = 'default',
   ...props
 }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext);
+  const context = React.useContext(ToggleGroupContext)
 
   return (
     <TogglePrimitive
@@ -70,7 +70,7 @@ function ToggleGroupItem({
       data-size={context.size || size}
       data-spacing={context.spacing}
       className={cn(
-        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        'shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size,
@@ -81,7 +81,7 @@ function ToggleGroupItem({
     >
       {children}
     </TogglePrimitive>
-  );
+  )
 }
 
-export { ToggleGroup, ToggleGroupItem };
+export { ToggleGroup, ToggleGroupItem }

package/src/components/ui/toggle.tsx

@@ -1,36 +1,36 @@
-"use client";
+'use client'
 
-import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
-import { cva, type VariantProps } from "class-variance-authority";
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "#lib/utils";
+import { cn } from '#lib/utils'
 
 const toggleVariants = cva(
   "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-transparent",
-        outline: "border border-input bg-transparent hover:bg-muted",
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent hover:bg-muted',
       },
       size: {
         default:
-          "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+          'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
         sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        lg: 'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   }
-);
+)
 
 function Toggle({
   className,
-  variant = "default",
-  size = "default",
+  variant = 'default',
+  size = 'default',
   ...props
 }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
   return (
@@ -39,7 +39,7 @@ function Toggle({
       className={cn(toggleVariants({ variant, size, className }))}
       {...props}
     />
-  );
+  )
 }
 
-export { Toggle, toggleVariants };
+export { Toggle, toggleVariants }

package/src/components/ui/tooltip.tsx

@@ -1,34 +1,34 @@
-"use client";
+'use client'
 
-import * as React from "react";
-import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import * as React from 'react'
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
 
-import { cn } from "#lib/utils";
+import { cn } from '#lib/utils'
 
-const TOOLTIP_DELAY = 200;
+const TOOLTIP_DELAY = 200
 
 function TooltipProvider({ delay = TOOLTIP_DELAY, ...props }: TooltipPrimitive.Provider.Props) {
-  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />
 }
 
 function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
-  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
 }
 
 function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
 }
 
 function TooltipContent({
   className,
-  side = "top",
+  side = 'top',
   sideOffset = 4,
   align,
   alignOffset,
   children,
   ...props
 }: TooltipPrimitive.Popup.Props &
-  Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+  Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Positioner
@@ -41,7 +41,7 @@ function TooltipContent({
         <TooltipPrimitive.Popup
           data-slot="tooltip-content"
           className={cn(
-            "max-w-72 rounded-md bg-popover px-2.5 py-1.5 text-sm leading-5 text-popover-foreground shadow-md ring-1 ring-foreground/10",
+            'max-w-72 rounded-md bg-popover px-2.5 py-1.5 text-sm leading-5 text-popover-foreground shadow-md ring-1 ring-foreground/10',
             className
           )}
           {...props}
@@ -50,7 +50,7 @@ function TooltipContent({
         </TooltipPrimitive.Popup>
       </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>
-  );
+  )
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TOOLTIP_DELAY };
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TOOLTIP_DELAY }

package/src/components/version-dialog.tsx

@@ -1,6 +1,6 @@
-"use client";
+'use client'
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   Check,
   Download,
@@ -9,10 +9,10 @@ import {
   LoaderCircle,
   RefreshCw,
   Sparkles,
-} from "lucide-react";
+} from 'lucide-react'
 
-import { formatReleaseDate, plainTextFromMarkdown } from "#lib/version-notes";
-import { Button } from "#components/ui/button";
+import { formatReleaseDate, plainTextFromMarkdown } from '#lib/version-notes'
+import { Button } from '#components/ui/button'
 import {
   Dialog,
   DialogClose,
@@ -22,165 +22,165 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "#components/ui/dialog";
+} from '#components/ui/dialog'
 
 export type SharedDesktopUpdate = Readonly<{
-  available_version: string | null;
-  changelog: string;
-  current_version: string;
-  downloaded_bytes: number;
-  error: string | null;
-  github_url: string;
+  available_version: string | null
+  changelog: string
+  current_version: string
+  downloaded_bytes: number
+  error: string | null
+  github_url: string
   phase:
-    | "idle"
-    | "checking"
-    | "current"
-    | "available"
-    | "downloading"
-    | "installing"
-    | "installed"
-    | "failed";
-  release_date: string | null;
-  release_notes: string | null;
-  restart_required: boolean;
-  total_bytes: number | null;
-}>;
+    | 'idle'
+    | 'checking'
+    | 'current'
+    | 'available'
+    | 'downloading'
+    | 'installing'
+    | 'installed'
+    | 'failed'
+  release_date: string | null
+  release_notes: string | null
+  restart_required: boolean
+  total_bytes: number | null
+}>
 
 export type VersionDialogAdapter = Readonly<{
-  check(): Promise<SharedDesktopUpdate>;
-  getStatus(): Promise<SharedDesktopUpdate>;
-  install(expectedVersion: string): Promise<SharedDesktopUpdate>;
-  isDesktopRuntime(): boolean;
-}>;
+  check(): Promise<SharedDesktopUpdate>
+  getStatus(): Promise<SharedDesktopUpdate>
+  install(expectedVersion: string): Promise<SharedDesktopUpdate>
+  isDesktopRuntime(): boolean
+}>
 
 function errorMessage(caught: unknown, fallback: string): string {
-  if (caught instanceof Error && caught.message) return caught.message;
-  if (typeof caught === "string" && caught) return caught;
-  return fallback;
+  if (caught instanceof Error && caught.message) return caught.message
+  if (typeof caught === 'string' && caught) return caught
+  return fallback
 }
 
 function phaseLabel(update: SharedDesktopUpdate | null, fallbackVersion: string): string {
-  if (!update) return `Adea v${fallbackVersion}`;
-  if (update.phase === "checking") return "Checking for updates…";
-  if (update.phase === "available" && update.available_version) {
-    return `Update v${update.available_version} available`;
+  if (!update) return `Adea v${fallbackVersion}`
+  if (update.phase === 'checking') return 'Checking for updates…'
+  if (update.phase === 'available' && update.available_version) {
+    return `Update v${update.available_version} available`
   }
-  if (update.phase === "downloading" || update.phase === "installing") {
-    return "Installing update…";
+  if (update.phase === 'downloading' || update.phase === 'installing') {
+    return 'Installing update…'
   }
-  if (update.phase === "failed") return `Version ${update.current_version} · Retry`;
-  return `Adea v${update.current_version || fallbackVersion}`;
+  if (update.phase === 'failed') return `Version ${update.current_version} · Retry`
+  return `Adea v${update.current_version || fallbackVersion}`
 }
 
 function isUpdateBusy(update: SharedDesktopUpdate | null): boolean {
   return (
-    update?.phase === "checking" ||
-    update?.phase === "downloading" ||
-    update?.phase === "installing"
-  );
+    update?.phase === 'checking' ||
+    update?.phase === 'downloading' ||
+    update?.phase === 'installing'
+  )
 }
 
 export function VersionDialog({
   adapter,
-  fallbackVersion = "0.1.0",
+  fallbackVersion = '0.1.0',
   onOpenChange,
   open: controlledOpen,
 }: Readonly<{
-  adapter: VersionDialogAdapter;
-  fallbackVersion?: string;
-  onOpenChange?: (open: boolean) => void;
-  open?: boolean;
+  adapter: VersionDialogAdapter
+  fallbackVersion?: string
+  onOpenChange?: (open: boolean) => void
+  open?: boolean
 }>) {
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
-  const open = controlledOpen ?? uncontrolledOpen;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false)
+  const open = controlledOpen ?? uncontrolledOpen
   const setOpen = useCallback(
     (nextOpen: boolean) => {
-      if (controlledOpen === undefined) setUncontrolledOpen(nextOpen);
-      onOpenChange?.(nextOpen);
+      if (controlledOpen === undefined) setUncontrolledOpen(nextOpen)
+      onOpenChange?.(nextOpen)
     },
     [controlledOpen, onOpenChange]
-  );
-  const [desktopRuntime, setDesktopRuntime] = useState(false);
-  const [update, setUpdate] = useState<SharedDesktopUpdate | null>(null);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState("");
+  )
+  const [desktopRuntime, setDesktopRuntime] = useState(false)
+  const [update, setUpdate] = useState<SharedDesktopUpdate | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
 
-  useEffect(() => setDesktopRuntime(adapter.isDesktopRuntime()), [adapter]);
+  useEffect(() => setDesktopRuntime(adapter.isDesktopRuntime()), [adapter])
 
   const loadCurrentStatus = useCallback(async () => {
-    if (!desktopRuntime) return;
+    if (!desktopRuntime) return
     try {
-      setUpdate(await adapter.getStatus());
+      setUpdate(await adapter.getStatus())
     } catch (caught) {
-      setError(errorMessage(caught, "Version status is unavailable"));
+      setError(errorMessage(caught, 'Version status is unavailable'))
     }
-  }, [adapter, desktopRuntime]);
+  }, [adapter, desktopRuntime])
 
   useEffect(() => {
-    if (desktopRuntime) void loadCurrentStatus();
-  }, [desktopRuntime, loadCurrentStatus]);
+    if (desktopRuntime) void loadCurrentStatus()
+  }, [desktopRuntime, loadCurrentStatus])
 
   const checkForUpdates = useCallback(async () => {
     if (!desktopRuntime) {
-      setError("Update checks are available from the desktop app.");
-      return;
+      setError('Update checks are available from the desktop app.')
+      return
     }
-    setBusy(true);
-    setError("");
+    setBusy(true)
+    setError('')
     try {
-      setUpdate(await adapter.check());
+      setUpdate(await adapter.check())
     } catch (caught) {
-      setError(errorMessage(caught, "Could not check for updates"));
-      await loadCurrentStatus();
+      setError(errorMessage(caught, 'Could not check for updates'))
+      await loadCurrentStatus()
     } finally {
-      setBusy(false);
+      setBusy(false)
     }
-  }, [adapter, desktopRuntime, loadCurrentStatus]);
+  }, [adapter, desktopRuntime, loadCurrentStatus])
 
   useEffect(() => {
-    if (!open || !desktopRuntime) return;
-    let active = true;
-    setError("");
-    setBusy(true);
+    if (!open || !desktopRuntime) return
+    let active = true
+    setError('')
+    setBusy(true)
     void (async () => {
       try {
-        const current = await adapter.getStatus();
-        if (!active) return;
-        setUpdate(current);
-        const checked = await adapter.check();
-        if (active) setUpdate(checked);
+        const current = await adapter.getStatus()
+        if (!active) return
+        setUpdate(current)
+        const checked = await adapter.check()
+        if (active) setUpdate(checked)
       } catch (caught) {
-        if (active) setError(errorMessage(caught, "Could not check for updates"));
+        if (active) setError(errorMessage(caught, 'Could not check for updates'))
       } finally {
-        if (active) setBusy(false);
+        if (active) setBusy(false)
       }
-    })();
+    })()
     return () => {
-      active = false;
-    };
-  }, [adapter, desktopRuntime, open]);
+      active = false
+    }
+  }, [adapter, desktopRuntime, open])
 
   const install = async () => {
-    const version = update?.available_version;
-    if (!version) return;
-    setBusy(true);
-    setError("");
+    const version = update?.available_version
+    if (!version) return
+    setBusy(true)
+    setError('')
     try {
-      setUpdate(await adapter.install(version));
+      setUpdate(await adapter.install(version))
     } catch (caught) {
-      setError(errorMessage(caught, "Update installation failed"));
-      await loadCurrentStatus();
+      setError(errorMessage(caught, 'Update installation failed'))
+      await loadCurrentStatus()
     } finally {
-      setBusy(false);
+      setBusy(false)
     }
-  };
+  }
 
   const currentChangelog = useMemo(
-    () => plainTextFromMarkdown(update?.changelog || "Changelog is loading…"),
+    () => plainTextFromMarkdown(update?.changelog || 'Changelog is loading…'),
     [update?.changelog]
-  );
-  const releaseNotes = update?.release_notes ? plainTextFromMarkdown(update.release_notes) : "";
-  const busyFromSnapshot = isUpdateBusy(update);
+  )
+  const releaseNotes = update?.release_notes ? plainTextFromMarkdown(update.release_notes) : ''
+  const busyFromSnapshot = isUpdateBusy(update)
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -197,7 +197,7 @@ export function VersionDialog({
             />
           }
         >
-          {update?.phase === "available" ? (
+          {update?.phase === 'available' ? (
             <Sparkles aria-hidden="true" />
           ) : (
             <FileText aria-hidden="true" />
@@ -232,13 +232,13 @@ export function VersionDialog({
                   v{update?.current_version || fallbackVersion}
                 </p>
                 <p className="text-sm text-muted-foreground">
-                  {update?.phase === "current"
-                    ? "You are running the latest desktop release."
-                    : update?.phase === "available" && update.available_version
+                  {update?.phase === 'current'
+                    ? 'You are running the latest desktop release.'
+                    : update?.phase === 'available' && update.available_version
                       ? `A newer desktop release, v${update.available_version}, is ready.`
                       : desktopRuntime
-                        ? "Check the release channel for the latest signed build."
-                        : "Open this dialog inside the desktop app to check for updates."}
+                        ? 'Check the release channel for the latest signed build.'
+                        : 'Open this dialog inside the desktop app to check for updates.'}
                 </p>
               </div>
               <Button
@@ -258,7 +258,7 @@ export function VersionDialog({
             </div>
           </section>
 
-          {update?.phase === "available" && update.available_version ? (
+          {update?.phase === 'available' && update.available_version ? (
             <section
               className="rounded-xl border border-primary/35 bg-primary/8 p-4"
               aria-label="Available update"
@@ -295,7 +295,7 @@ export function VersionDialog({
             </section>
           ) : null}
 
-          {update?.phase === "current" ? (
+          {update?.phase === 'current' ? (
             <p
               className="flex items-center gap-2 text-sm text-emerald-700 dark:text-emerald-300"
               role="status"
@@ -350,7 +350,7 @@ export function VersionDialog({
               type="button"
               variant="ghost"
               size="sm"
-              onClick={() => window.open(update.github_url, "_blank", "noopener,noreferrer")}
+              onClick={() => window.open(update.github_url, '_blank', 'noopener,noreferrer')}
             >
               <ExternalLink aria-hidden="true" />
               View releases
@@ -362,5 +362,5 @@ export function VersionDialog({
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  );
+  )
 }

package/src/components/workspace-brand.tsx

@@ -1,9 +1,9 @@
 export interface WorkspaceBrandProps {
-  title: string;
-  eyebrow?: string;
+  title: string
+  eyebrow?: string
 }
 
-export function WorkspaceBrand({ title, eyebrow = "AGENT OPERATIONS" }: WorkspaceBrandProps) {
+export function WorkspaceBrand({ title, eyebrow = 'AGENT OPERATIONS' }: WorkspaceBrandProps) {
   return (
     <div className="workspace-brand">
       <div className="workspace-brand__mark" aria-hidden="true">
@@ -14,5 +14,5 @@ export function WorkspaceBrand({ title, eyebrow = "AGENT OPERATIONS" }: Workspac
         <h1>{title}</h1>
       </div>
     </div>
-  );
+  )
 }

package/src/components/workspace-logo.tsx

@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import type { SVGProps } from 'react'
 
 /** The canonical Adea mark used by web, desktop, and dialogs. */
 export function WorkspaceLogo(props: SVGProps<SVGSVGElement>) {
@@ -13,5 +13,5 @@ export function WorkspaceLogo(props: SVGProps<SVGSVGElement>) {
       />
       <path d="m45 35 11 11-4 4-11-11z" fill="#f8fafc" />
     </svg>
-  );
+  )
 }