love-ui 1.2.22 → 1.2.23

package/registry/default/blocks/contact5/components/decor-icon.tsx

@@ -2,44 +2,57 @@ import { cn } from "@/lib/utils";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const DecorIconVariants = cva(
-	"pointer-events-none absolute z-1 size-5 shrink-0 stroke-1 stroke-muted-foreground",
-	{
-		variants: {
-			position: {
-				"top-left":
-					"top-0 left-0 -translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
-				"top-right":
-					"top-0 right-0 translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
-				"bottom-right":
-					"right-0 bottom-0 translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
-				"bottom-left":
-					"bottom-0 left-0 -translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
-			},
-		},
-		defaultVariants: {
-			position: "top-left",
-		},
-	}
+    "pointer-events-none absolute z-1 size-4 shrink-0 stroke-1 stroke-muted-foreground transition-transform",
+    {
+        variants: {
+            position: {
+                // We also rotate the SVG inside the variant so the bracket always points inward
+                "top-left":
+                    "top-0 left-0 -translate-x-1/2 -translate-y-1/2",
+                "top-right":
+                    "top-0 right-0 translate-x-1/2 -translate-y-1/2 rotate-90",
+                "bottom-right":
+                    "right-0 bottom-0 translate-x-1/2 translate-y-1/2 rotate-180",
+                "bottom-left":
+                    "bottom-0 left-0 -translate-x-1/2 translate-y-1/2 -rotate-90",
+            },
+        },
+        defaultVariants: {
+            position: "top-left",
+        },
+    }
 );
 
 type DecorIconProps = React.ComponentProps<"svg"> &
-	VariantProps<typeof DecorIconVariants>;
+    VariantProps<typeof DecorIconVariants> & {
+        variant?: "bracket" | "dot" | "diagonal";
+    };
 
-export function DecorIcon({ position, className, ...props }: DecorIconProps) {
-	return (
-		<svg
-			aria-hidden="true"
-			className={cn(DecorIconVariants({ position, className }))}
-			fill="none"
-			stroke="currentColor"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-			viewBox="0 0 24 24"
-			xmlns="http://www.w3.org/2000/svg"
-			{...props}
-		>
-			<path d="M5 12h14" />
-			<path d="M12 5v14" />
-		</svg>
-	);
+export function DecorIcon({ position, variant = "bracket", className, ...props }: DecorIconProps) {
+    return (
+        <svg
+            aria-hidden="true"
+            className={cn(DecorIconVariants({ position, className }))}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            {/* OPTION 1: Corner Bracket (Default) */}
+            {variant === "bracket" && (
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4H4v8" />
+            )}
+
+            {/* OPTION 2: Minimalist Dot (Change fill to currentColor in class if using this) */}
+            {variant === "dot" && (
+                <circle cx="12" cy="12" r="3" fill="currentColor" />
+            )}
+
+            {/* OPTION 3: Diagonal Accent Line */}
+            {variant === "diagonal" && (
+                <path strokeLinecap="round" d="M4 20L20 4" />
+            )}
+        </svg>
+    );
 }

package/registry/default/blocks/cta-3/components/cta.tsx

@@ -4,7 +4,7 @@ import { ArrowRight as ArrowRightIcon } from "love-ui/icons";
 
 export function CallToAction() {
 	return (
-		<div className="relative mx-auto flex w-full max-w-3xl flex-col justify-between gap-y-4 border-y px-4 py-8 dark:bg-[radial-gradient(35%_80%_at_25%_0%,--theme(--color-foreground/.08),transparent)]">
+		<div className="relative mx-auto flex w-full max-w-3xl flex-col justify-between gap-y-4 border-y px-4 py-8">
 			<DecorIcon className="size-4" position="top-left" />
 			<DecorIcon className="size-4" position="top-right" />
 			<DecorIcon className="size-4" position="bottom-left" />

package/registry/default/blocks/cta-3/components/decor-icon.tsx

@@ -2,44 +2,57 @@ import { cn } from "@/lib/utils";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const DecorIconVariants = cva(
-	"pointer-events-none absolute z-1 size-5 shrink-0 stroke-1 stroke-muted-foreground",
-	{
-		variants: {
-			position: {
-				"top-left":
-					"top-0 left-0 -translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
-				"top-right":
-					"top-0 right-0 translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
-				"bottom-right":
-					"right-0 bottom-0 translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
-				"bottom-left":
-					"bottom-0 left-0 -translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
-			},
-		},
-		defaultVariants: {
-			position: "top-left",
-		},
-	}
+    "pointer-events-none absolute z-1 size-4 shrink-0 stroke-1 stroke-muted-foreground transition-transform",
+    {
+        variants: {
+            position: {
+                // We also rotate the SVG inside the variant so the bracket always points inward
+                "top-left":
+                    "top-0 left-0 -translate-x-1/2 -translate-y-1/2",
+                "top-right":
+                    "top-0 right-0 translate-x-1/2 -translate-y-1/2 rotate-90",
+                "bottom-right":
+                    "right-0 bottom-0 translate-x-1/2 translate-y-1/2 rotate-180",
+                "bottom-left":
+                    "bottom-0 left-0 -translate-x-1/2 translate-y-1/2 -rotate-90",
+            },
+        },
+        defaultVariants: {
+            position: "top-left",
+        },
+    }
 );
 
 type DecorIconProps = React.ComponentProps<"svg"> &
-	VariantProps<typeof DecorIconVariants>;
+    VariantProps<typeof DecorIconVariants> & {
+        variant?: "bracket" | "dot" | "diagonal";
+    };
 
-export function DecorIcon({ position, className, ...props }: DecorIconProps) {
-	return (
-		<svg
-			aria-hidden="true"
-			className={cn(DecorIconVariants({ position, className }))}
-			fill="none"
-			stroke="currentColor"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-			viewBox="0 0 24 24"
-			xmlns="http://www.w3.org/2000/svg"
-			{...props}
-		>
-			<path d="M5 12h14" />
-			<path d="M12 5v14" />
-		</svg>
-	);
+export function DecorIcon({ position, variant = "bracket", className, ...props }: DecorIconProps) {
+    return (
+        <svg
+            aria-hidden="true"
+            className={cn(DecorIconVariants({ position, className }))}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            {/* OPTION 1: Corner Bracket (Default) */}
+            {variant === "bracket" && (
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4H4v8" />
+            )}
+
+            {/* OPTION 2: Minimalist Dot (Change fill to currentColor in class if using this) */}
+            {variant === "dot" && (
+                <circle cx="12" cy="12" r="3" fill="currentColor" />
+            )}
+
+            {/* OPTION 3: Diagonal Accent Line */}
+            {variant === "diagonal" && (
+                <path strokeLinecap="round" d="M4 20L20 4" />
+            )}
+        </svg>
+    );
 }

package/registry/default/blocks/cta-5/components/cta.tsx

@@ -42,25 +42,19 @@ export function CallToAction() {
 					<img
 						alt="Avatar 01"
 						height={24}
-						src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=72"
+						src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80"
 						width={24}
 					/>
 					<img
 						alt="Avatar 02"
 						height={24}
-						src="https://images.unsplash.com/photo-1485206412256-701ccc5b93ca?q=80&w=72"
+						src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
 						width={24}
 					/>
 					<img
 						alt="Avatar 03"
 						height={24}
-						src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=72"
-						width={24}
-					/>
-					<img
-						alt="Avatar 04"
-						height={24}
-						src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?q=80&w=72"
+						src="https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=96&h=96&dpr=2&q=80"
 						width={24}
 					/>
 				</div>

package/registry/default/blocks/faq-3/components/decor-icon.tsx

@@ -2,44 +2,57 @@ import { cn } from "@/lib/utils";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const DecorIconVariants = cva(
-	"pointer-events-none absolute z-1 size-5 shrink-0 stroke-1 stroke-muted-foreground",
-	{
-		variants: {
-			position: {
-				"top-left":
-					"top-0 left-0 -translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
-				"top-right":
-					"top-0 right-0 translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
-				"bottom-right":
-					"right-0 bottom-0 translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
-				"bottom-left":
-					"bottom-0 left-0 -translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
-			},
-		},
-		defaultVariants: {
-			position: "top-left",
-		},
-	}
+    "pointer-events-none absolute z-1 size-4 shrink-0 stroke-1 stroke-muted-foreground transition-transform",
+    {
+        variants: {
+            position: {
+                // We also rotate the SVG inside the variant so the bracket always points inward
+                "top-left":
+                    "top-0 left-0 -translate-x-1/2 -translate-y-1/2",
+                "top-right":
+                    "top-0 right-0 translate-x-1/2 -translate-y-1/2 rotate-90",
+                "bottom-right":
+                    "right-0 bottom-0 translate-x-1/2 translate-y-1/2 rotate-180",
+                "bottom-left":
+                    "bottom-0 left-0 -translate-x-1/2 translate-y-1/2 -rotate-90",
+            },
+        },
+        defaultVariants: {
+            position: "top-left",
+        },
+    }
 );
 
 type DecorIconProps = React.ComponentProps<"svg"> &
-	VariantProps<typeof DecorIconVariants>;
+    VariantProps<typeof DecorIconVariants> & {
+        variant?: "bracket" | "dot" | "diagonal";
+    };
 
-export function DecorIcon({ position, className, ...props }: DecorIconProps) {
-	return (
-		<svg
-			aria-hidden="true"
-			className={cn(DecorIconVariants({ position, className }))}
-			fill="none"
-			stroke="currentColor"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-			viewBox="0 0 24 24"
-			xmlns="http://www.w3.org/2000/svg"
-			{...props}
-		>
-			<path d="M5 12h14" />
-			<path d="M12 5v14" />
-		</svg>
-	);
+export function DecorIcon({ position, variant = "bracket", className, ...props }: DecorIconProps) {
+    return (
+        <svg
+            aria-hidden="true"
+            className={cn(DecorIconVariants({ position, className }))}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            {/* OPTION 1: Corner Bracket (Default) */}
+            {variant === "bracket" && (
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4H4v8" />
+            )}
+
+            {/* OPTION 2: Minimalist Dot (Change fill to currentColor in class if using this) */}
+            {variant === "dot" && (
+                <circle cx="12" cy="12" r="3" fill="currentColor" />
+            )}
+
+            {/* OPTION 3: Diagonal Accent Line */}
+            {variant === "diagonal" && (
+                <path strokeLinecap="round" d="M4 20L20 4" />
+            )}
+        </svg>
+    );
 }

package/registry/default/blocks/features1/components/feature-section.tsx

@@ -20,7 +20,7 @@ export function FeatureSection() {
 				<div
 					className={cn(
 						"relative flex flex-col items-center justify-center p-2",
-						"after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-linear-to-b after:from-foreground/6 after:via-foreground/25 after:to-foreground/6",
+						"after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-border/50",
 						"[&_svg]:size-6 [&_svg]:text-muted-foreground",
 						{
 							"after:hidden": index === features.length - 1,

package/registry/default/blocks/features2/components/decor-icon.tsx

@@ -2,44 +2,57 @@ import { cn } from "@/lib/utils";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const DecorIconVariants = cva(
-	"pointer-events-none absolute z-1 size-5 shrink-0 stroke-1 stroke-muted-foreground",
-	{
-		variants: {
-			position: {
-				"top-left":
-					"top-0 left-0 -translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
-				"top-right":
-					"top-0 right-0 translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
-				"bottom-right":
-					"right-0 bottom-0 translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
-				"bottom-left":
-					"bottom-0 left-0 -translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
-			},
-		},
-		defaultVariants: {
-			position: "top-left",
-		},
-	}
+    "pointer-events-none absolute z-1 size-4 shrink-0 stroke-1 stroke-muted-foreground transition-transform",
+    {
+        variants: {
+            position: {
+                // We also rotate the SVG inside the variant so the bracket always points inward
+                "top-left":
+                    "top-0 left-0 -translate-x-1/2 -translate-y-1/2",
+                "top-right":
+                    "top-0 right-0 translate-x-1/2 -translate-y-1/2 rotate-90",
+                "bottom-right":
+                    "right-0 bottom-0 translate-x-1/2 translate-y-1/2 rotate-180",
+                "bottom-left":
+                    "bottom-0 left-0 -translate-x-1/2 translate-y-1/2 -rotate-90",
+            },
+        },
+        defaultVariants: {
+            position: "top-left",
+        },
+    }
 );
 
 type DecorIconProps = React.ComponentProps<"svg"> &
-	VariantProps<typeof DecorIconVariants>;
+    VariantProps<typeof DecorIconVariants> & {
+        variant?: "bracket" | "dot" | "diagonal";
+    };
 
-export function DecorIcon({ position, className, ...props }: DecorIconProps) {
-	return (
-		<svg
-			aria-hidden="true"
-			className={cn(DecorIconVariants({ position, className }))}
-			fill="none"
-			stroke="currentColor"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-			viewBox="0 0 24 24"
-			xmlns="http://www.w3.org/2000/svg"
-			{...props}
-		>
-			<path d="M5 12h14" />
-			<path d="M12 5v14" />
-		</svg>
-	);
+export function DecorIcon({ position, variant = "bracket", className, ...props }: DecorIconProps) {
+    return (
+        <svg
+            aria-hidden="true"
+            className={cn(DecorIconVariants({ position, className }))}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            {/* OPTION 1: Corner Bracket (Default) */}
+            {variant === "bracket" && (
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4H4v8" />
+            )}
+
+            {/* OPTION 2: Minimalist Dot (Change fill to currentColor in class if using this) */}
+            {variant === "dot" && (
+                <circle cx="12" cy="12" r="3" fill="currentColor" />
+            )}
+
+            {/* OPTION 3: Diagonal Accent Line */}
+            {variant === "diagonal" && (
+                <path strokeLinecap="round" d="M4 20L20 4" />
+            )}
+        </svg>
+    );
 }

package/registry/default/blocks/features2/components/feature-section.tsx

@@ -43,7 +43,7 @@ export function FeatureSection() {
 				<div className="grid grid-cols-1 md:grid-cols-3">
 					{features.map((feature) => (
 						<div
-							className="group [&_svg]:mask-b-from-0% relative p-8 [&_svg]:size-7 [&_svg]:text-muted-foreground"
+							className="group relative p-8 [&_svg]:size-7 [&_svg]:text-muted-foreground"
 							key={feature.title}
 						>
 							{feature.icon}

package/registry/default/blocks/features4/components/decor-icon.tsx

@@ -2,44 +2,57 @@ import { cn } from "@/lib/utils";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const DecorIconVariants = cva(
-	"pointer-events-none absolute z-1 size-5 shrink-0 stroke-1 stroke-muted-foreground",
-	{
-		variants: {
-			position: {
-				"top-left":
-					"top-0 left-0 -translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
-				"top-right":
-					"top-0 right-0 translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
-				"bottom-right":
-					"right-0 bottom-0 translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
-				"bottom-left":
-					"bottom-0 left-0 -translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
-			},
-		},
-		defaultVariants: {
-			position: "top-left",
-		},
-	}
+    "pointer-events-none absolute z-1 size-4 shrink-0 stroke-1 stroke-muted-foreground transition-transform",
+    {
+        variants: {
+            position: {
+                // We also rotate the SVG inside the variant so the bracket always points inward
+                "top-left":
+                    "top-0 left-0 -translate-x-1/2 -translate-y-1/2",
+                "top-right":
+                    "top-0 right-0 translate-x-1/2 -translate-y-1/2 rotate-90",
+                "bottom-right":
+                    "right-0 bottom-0 translate-x-1/2 translate-y-1/2 rotate-180",
+                "bottom-left":
+                    "bottom-0 left-0 -translate-x-1/2 translate-y-1/2 -rotate-90",
+            },
+        },
+        defaultVariants: {
+            position: "top-left",
+        },
+    }
 );
 
 type DecorIconProps = React.ComponentProps<"svg"> &
-	VariantProps<typeof DecorIconVariants>;
+    VariantProps<typeof DecorIconVariants> & {
+        variant?: "bracket" | "dot" | "diagonal";
+    };
 
-export function DecorIcon({ position, className, ...props }: DecorIconProps) {
-	return (
-		<svg
-			aria-hidden="true"
-			className={cn(DecorIconVariants({ position, className }))}
-			fill="none"
-			stroke="currentColor"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-			viewBox="0 0 24 24"
-			xmlns="http://www.w3.org/2000/svg"
-			{...props}
-		>
-			<path d="M5 12h14" />
-			<path d="M12 5v14" />
-		</svg>
-	);
+export function DecorIcon({ position, variant = "bracket", className, ...props }: DecorIconProps) {
+    return (
+        <svg
+            aria-hidden="true"
+            className={cn(DecorIconVariants({ position, className }))}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            {/* OPTION 1: Corner Bracket (Default) */}
+            {variant === "bracket" && (
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4H4v8" />
+            )}
+
+            {/* OPTION 2: Minimalist Dot (Change fill to currentColor in class if using this) */}
+            {variant === "dot" && (
+                <circle cx="12" cy="12" r="3" fill="currentColor" />
+            )}
+
+            {/* OPTION 3: Diagonal Accent Line */}
+            {variant === "diagonal" && (
+                <path strokeLinecap="round" d="M4 20L20 4" />
+            )}
+        </svg>
+    );
 }

package/registry/default/blocks/features4/components/feature-section.tsx

@@ -47,8 +47,6 @@ function FeatureCard({
 		<div
 			className={cn(
 				"relative flex flex-col justify-between gap-6 bg-background px-6 pt-8 pb-6 shadow-xs",
-				// Gradient inspired by testimonials
-				"dark:bg-[radial-gradient(50%_80%_at_25%_0%,--theme(--color-foreground/.1),transparent)]",
 				className
 			)}
 			{...props}

package/registry/default/blocks/features5/components/feature-section.tsx

@@ -51,7 +51,7 @@ export function FeatureCard({
 			className={cn("relative overflow-hidden bg-background p-6", className)}
 			{...props}
 		>
-			<div className="mask-[radial-gradient(farthest-side_at_top,white,transparent)] pointer-events-none absolute top-0 left-1/2 -mt-2 -ml-20 size-full">
+			<div className=" pointer-events-none absolute top-0 left-1/2 -mt-2 -ml-20 size-full">
 				<GridPattern
 					className="absolute inset-0 size-full stroke-foreground/20"
 					height={40}

package/registry/default/blocks/features6/components/feature-section.tsx

@@ -84,7 +84,7 @@ function SetupVisual() {
 	return (
 		<>
 			<div className="relative mx-auto flex size-32 items-center justify-center rounded-full border-4 border-dashed bg-background shadow-xs outline outline-border outline-offset-4">
-				<div className="absolute inset-0 z-10 scale-120 bg-radial from-foreground/20 via-foreground/5 to-transparent blur-xl" />
+				<div className="absolute inset-0 z-10 scale-120 bg-foreground/5 blur-xl" />
 				<CustomTimerIcon className="size-14 fill-primary/90" />
 			</div>
 
@@ -103,7 +103,7 @@ function UserBasedSecurity() {
 		<>
 			<div className="relative mx-auto flex size-32 items-center justify-center rounded-full border bg-background shadow-xs outline outline-border outline-offset-4">
 				<CustomLockIcon className="size-24" />
-				<div className="absolute inset-0 scale-120 bg-radial from-foreground/15 via-foreground/5 to-transparent blur-xl" />
+				<div className="absolute inset-0 scale-120 bg-foreground/5 blur-xl" />
 			</div>
 
 			<div className="relative mt-8 space-y-1.5 text-center">
@@ -157,7 +157,7 @@ function DashboardVisual() {
 				</div>
 			</div>
 			{/* Dashboard Screen */}
-			<div className="mask-b-from-90% mask-r-from-90% relative aspect-video sm:aspect-auto">
+			<div className=" relative aspect-video sm:aspect-auto">
 				<div className="absolute -right-1 -bottom-1 aspect-video max-h-50 rounded-tl-md border bg-card p-1 sm:max-h-42 md:aspect-square md:max-h-50 lg:aspect-16/12">
 					<div className="aspect-video h-full overflow-hidden rounded-tl-sm border *:pointer-events-none *:size-full *:shrink-0 *:select-none">
 						<img
@@ -269,7 +269,7 @@ function ReportsChartsSvg(props: React.ComponentProps<"svg">) {
 			<path
 				clipRule="evenodd"
 				d="M3 123C3 123 14.3298 94.153 35.1282 88.0957C55.9266 82.0384 65.9333 80.5508 65.9333 80.5508C65.9333 80.5508 80.699 80.5508 92.1777 80.5508C103.656 80.5508 100.887 63.5348 109.06 63.5348C117.233 63.5348 117.217 91.9728 124.78 91.9728C132.343 91.9728 142.264 78.03 153.831 80.5508C165.398 83.0716 186.825 91.9728 193.761 91.9728C200.697 91.9728 206.296 63.5348 214.07 63.5348C221.844 63.5348 238.653 93.7771 244.234 91.9728C249.814 90.1684 258.8 60 266.19 60C272.075 60 284.1 88.057 286.678 88.0957C294.762 88.2171 300.192 72.9284 305.423 72.9284C312.323 72.9284 323.377 65.2437 335.553 63.5348C347.729 61.8259 348.218 82.07 363.639 80.5508C367.875 80.1335 372.949 82.2017 376.437 87.1008C379.446 91.3274 381.054 97.4325 382.521 104.647C383.479 109.364 382.521 123 382.521 123"
-				fill="url(#paint0_linear_0_106)"
+				className="fill-primary/10"
 				fillRule="evenodd"
 			/>
 			<path
@@ -279,23 +279,7 @@ function ReportsChartsSvg(props: React.ComponentProps<"svg">) {
 				strokeWidth="1"
 			/>
 			<defs>
-				<linearGradient
-					gradientUnits="userSpaceOnUse"
-					id="paint0_linear_0_106"
-					x1="3"
-					x2="3"
-					y1="60"
-					y2="123"
-				>
-					<stop className="text-primary/20" stopColor="currentColor" />
-					<stop
-						className="text-background"
-						offset="1"
-						stopColor="currentColor"
-						stopOpacity="0.103775"
-					/>
-				</linearGradient>
-				<clipPath id="clip0_0_106">
+								<clipPath id="clip0_0_106">
 					<rect
 						fill="white"
 						height="30"