@flamingo-stack/openframe-frontend-core 0.0.518-1660.4292.1 → 0.0.518-1663.4312.1

package/src/components/steps.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../utils/cn"
+
+interface StepsProps extends React.HTMLAttributes<HTMLDivElement> {
+  currentStep: number
+}
+
+const StepsComponent = React.forwardRef<HTMLDivElement, StepsProps>(
+  ({ currentStep, className, children, ...props }, ref) => {
+    // Count the number of step children
+    const steps = React.Children.toArray(children).filter((child) => React.isValidElement(child))
+
+    return (
+      <div ref={ref} className={cn("space-y-4", className)} {...props}>
+        {React.Children.map(children, (child, index) => {
+          if (!React.isValidElement(child) || child.type !== Step) {
+            return child
+          }
+
+          // Clone the child with additional props
+          return React.cloneElement(child as React.ReactElement<any>, {
+            stepNumber: index + 1,
+            isActive: currentStep === index + 1,
+            isCompleted: currentStep > index + 1,
+            isLast: index === steps.length - 1,
+          })
+        })}
+      </div>
+    )
+  },
+)
+StepsComponent.displayName = "Steps"
+
+interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string
+  description?: string
+  stepNumber?: number
+  isActive?: boolean
+  isCompleted?: boolean
+  isLast?: boolean
+}
+
+const Step = React.forwardRef<HTMLDivElement, StepProps>(
+  ({ title, description, stepNumber, isActive, isCompleted, isLast, className, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("relative flex gap-4", !isLast && "pb-8", className)} {...props}>
+        {/* Line connecting steps */}
+        {!isLast && <div className="absolute left-[15px] top-[30px] bottom-0 w-[1px] bg-border" />}
+
+        {/* Step indicator */}
+        <div className="relative z-10 flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-full border bg-background">
+          {isCompleted ? (
+            <svg
+              className="h-4 w-4 text-primary"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+          ) : (
+            <span className={cn("text-h6", isActive ? "text-primary" : "text-muted-foreground")}>
+              {stepNumber}
+            </span>
+          )}
+        </div>
+
+        {/* Step content */}
+        <div className="flex flex-col gap-0.5">
+          <h3
+            className={cn(
+              "text-h6",
+              isActive ? "text-foreground" : "text-muted-foreground",
+              isCompleted && "text-primary",
+            )}
+          >
+            {title}
+          </h3>
+          {description && (
+            <p className={cn("text-h6", isActive ? "text-muted-foreground" : "text-muted-foreground/60")}>
+              {description}
+            </p>
+          )}
+        </div>
+      </div>
+    )
+  },
+)
+Step.displayName = "Step"
+
+export { Step }
+export { StepsComponent as Steps }

package/src/components/sun-icon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface SunIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const SunIcon: React.FC<SunIconProps> = ({ 
+  className = "", 
+  width = 24, 
+  height = 24 
+}) => {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M15.8755 11.9995C15.8752 9.85963 14.1395 8.125 11.9995 8.125C9.8598 8.12526 8.12526 9.8598 8.125 11.9995C8.125 14.1395 9.85963 15.8752 11.9995 15.8755C14.1396 15.8755 15.8755 14.1396 15.8755 11.9995ZM18.1255 11.9995C18.1255 15.3823 15.3823 18.1255 11.9995 18.1255C8.61699 18.1252 5.875 15.3821 5.875 11.9995C5.87526 8.61715 8.61715 5.87526 11.9995 5.875C15.3821 5.875 18.1252 8.61699 18.1255 11.9995Z" fill="currentColor"/>
+      <path d="M10.8755 21.9995V20.4995C10.8758 19.8784 11.3793 19.3745 12.0005 19.3745C12.6214 19.3748 13.1252 19.8786 13.1255 20.4995V21.9995C13.1255 22.6207 12.6216 23.1242 12.0005 23.1245C11.3792 23.1245 10.8755 22.6208 10.8755 21.9995ZM5.19482 17.2153C5.63418 16.7761 6.34636 16.776 6.78564 17.2153C7.22444 17.6547 7.22467 18.367 6.78564 18.8062L5.7251 19.8667L5.63867 19.9443C5.19681 20.3043 4.54455 20.2784 4.13281 19.8667C3.69387 19.4275 3.69402 18.7152 4.13281 18.2759L5.19482 17.2153ZM17.2153 17.2153C17.6271 16.8036 18.2779 16.7777 18.7197 17.1377L18.8062 17.2153L19.8667 18.2759L19.9443 18.3608C20.3046 18.8027 20.2785 19.4549 19.8667 19.8667C19.4549 20.2785 18.8027 20.3046 18.3608 19.9443L18.2759 19.8667L17.2153 18.8062L17.1377 18.7197C16.7777 18.2779 16.8036 17.6271 17.2153 17.2153ZM3.5 10.8755L3.61572 10.8813C4.18265 10.9393 4.625 11.4183 4.625 12.0005C4.62475 12.5825 4.18254 13.0617 3.61572 13.1196L3.5 13.1255H2C1.37884 13.1255 0.875264 12.6216 0.875 12.0005C0.875 11.3792 1.37868 10.8755 2 10.8755H3.5ZM21.9995 10.8755C22.6208 10.8755 23.1245 11.3792 23.1245 12.0005C23.1242 12.6216 22.6207 13.1255 21.9995 13.1255H20.4995C19.8786 13.1252 19.3748 12.6214 19.3745 12.0005C19.3745 11.3793 19.8784 10.8758 20.4995 10.8755H21.9995ZM4.13281 4.13281C4.5447 3.72092 5.1968 3.69622 5.63867 4.05664L5.7251 4.13281L6.78564 5.19482L6.86182 5.27979C7.22229 5.72166 7.19756 6.37373 6.78564 6.78564C6.37373 7.19756 5.72166 7.22229 5.27979 6.86182L5.19482 6.78564L4.13281 5.7251L4.05664 5.63867C3.69622 5.1968 3.72092 4.5447 4.13281 4.13281ZM18.3608 4.05664C18.8026 3.69605 19.4547 3.72107 19.8667 4.13281C20.306 4.57215 20.306 5.28576 19.8667 5.7251L18.8062 6.78564C18.367 7.22467 17.6547 7.22444 17.2153 6.78564C16.776 6.34636 16.7761 5.63418 17.2153 5.19482L18.2759 4.13281L18.3608 4.05664ZM10.8755 3.5V2C10.8755 1.37868 11.3792 0.875 12.0005 0.875C12.6216 0.875264 13.1255 1.37884 13.1255 2V3.5C13.1255 4.12116 12.6216 4.62474 12.0005 4.625C11.3792 4.625 10.8755 4.12132 10.8755 3.5Z" fill="currentColor"/>
+    </svg>
+  );
+}; 

package/src/components/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "../utils/cn"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

package/src/components/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "../utils/cn"
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-ods-border bg-ods-card px-3 py-2 text-h4 placeholder:text-ods-text-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:bg-ods-bg",
+        "touch-manipulation", // Prevent double-tap zoom
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/src/components/ui/pagination-stub.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import { cn } from "../../utils/cn"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+}

package/src/components/ui/responsive-icons-block-stub.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export interface ResponsiveIconsBlockProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function ResponsiveIconsBlock({ children, className }: ResponsiveIconsBlockProps) {
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+}

package/src/components/user-icon.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+interface UserIconProps {
+  width?: number | string
+  height?: number | string
+  className?: string
+}
+
+export function UserIcon({ 
+  width = 24, 
+  height = 23, 
+  className = "text-current" 
+}: UserIconProps) {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 24 23" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path 
+        d="M18.0889 11.6454C19.114 10.6203 20.7757 10.6203 21.8008 11.6454L22.3545 12.1991L22.5347 12.3983C23.3197 13.3606 23.3197 14.7494 22.5347 15.7118L22.3545 15.911L21.0186 17.2455C21.0148 17.2494 21.0122 17.2548 21.0083 17.2586C21.0044 17.2626 20.9991 17.2651 20.9952 17.2689L17.6055 20.66C16.9977 21.2678 16.2151 21.6714 15.3672 21.8128L13.5889 22.1087C12.5906 22.2751 11.7248 21.4093 11.8912 20.411L12.1871 18.6327C12.3285 17.7849 12.7321 17.0022 13.3399 16.3944L18.0889 11.6454ZM14.9307 17.9852C14.6544 18.2615 14.4705 18.6178 14.4063 19.0033L14.2876 19.7108L14.9966 19.5936C15.3821 19.5294 15.7384 19.3455 16.0147 19.0692L18.6206 16.4618L17.5367 15.3778L14.9307 17.9852ZM20.21 13.2362C20.0635 13.0898 19.8262 13.0898 19.6797 13.2362L19.1289 13.787L20.2129 14.871L20.7637 14.3202C20.8919 14.192 20.9082 13.9941 20.8121 13.8485L20.7637 13.7899L20.21 13.2362Z" 
+        fill="currentColor"
+      />
+      <path 
+        d="M11.6724 12.875L11.7866 12.8809C12.354 12.9383 12.7974 13.4174 12.7974 14C12.7974 14.5826 12.354 15.0617 11.7866 15.1191L11.6724 15.125H7.14307C5.01417 15.125 3.27616 16.781 3.13818 18.875H9.05762L9.17334 18.8809C9.7406 18.9385 10.1826 19.4175 10.1826 20C10.1826 20.5825 9.7406 21.0615 9.17334 21.1191L9.05762 21.125H2.85693C1.76239 21.1249 0.875113 20.2376 0.875 19.1431C0.875 15.6814 3.68142 12.875 7.14307 12.875H11.6724ZM13.1255 6.24951C13.1252 4.52385 11.7252 3.125 9.99951 3.125C8.27401 3.12526 6.87526 4.52401 6.875 6.24951C6.875 7.97524 8.27385 9.37522 9.99951 9.37549C11.7254 9.37549 13.1255 7.9754 13.1255 6.24951ZM15.3755 6.24951C15.3755 9.21804 12.968 11.6255 9.99951 11.6255C7.03121 11.6252 4.625 9.21788 4.625 6.24951C4.62526 3.28137 7.03137 0.875264 9.99951 0.875C12.9679 0.875 15.3752 3.28121 15.3755 6.24951Z" 
+        fill="currentColor"
+      />
+    </svg>
+  )
+} 

package/src/components/vendor-directory-icon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface VendorDirectoryIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const VendorDirectoryIcon: React.FC<VendorDirectoryIconProps> = ({ 
+  className = "", 
+  width = 20, 
+  height = 20 
+}) => {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 20 20" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M15.7292 9.71675V7.00923L10.1042 10.1342V16.4672C10.4285 16.5317 10.7088 16.7634 10.8159 17.1008C10.9725 17.5942 10.7 18.1208 10.2068 18.2775C9.86857 18.3849 9.5174 18.4387 9.16675 18.4387C8.67029 18.4387 8.17345 18.3314 7.71289 18.1164L7.51758 18.0175L2.51758 15.2844C1.41493 14.6815 0.7293 13.5247 0.729248 12.268V6.89936C0.729279 6.31241 0.881003 5.74845 1.15283 5.25141C1.16621 5.21944 1.18077 5.1872 1.198 5.1562C1.22648 5.10498 1.2584 5.057 1.29443 5.01338C1.59852 4.55024 2.01395 4.15835 2.51758 3.88301L7.51758 1.14985L7.71289 1.05097C8.6998 0.590235 9.85266 0.62327 10.8159 1.14985L15.8159 3.88301L16.0173 4.00264C16.4335 4.2684 16.7797 4.618 17.0427 5.0207C17.0767 5.06262 17.1084 5.10739 17.1355 5.1562C17.1527 5.18721 17.1673 5.21944 17.1807 5.25141C17.4525 5.74845 17.6042 6.31241 17.6042 6.89936V9.71675C17.6042 10.2345 17.1845 10.6542 16.6667 10.6542C16.149 10.6542 15.7292 10.2345 15.7292 9.71675ZM9.91626 2.79536C9.50765 2.57199 9.02403 2.54365 8.59668 2.71113L8.41724 2.79536L3.60767 5.42353L9.16675 8.51069L14.7246 5.42353L9.91626 2.79536ZM2.60425 12.268C2.6043 12.8392 2.91604 13.3649 3.41724 13.6389L8.22925 16.2683V10.1342L2.60425 7.00923V12.268Z" fill="currentColor"/>
+      <path d="M16.9792 15.4162C16.9792 14.5533 16.2797 13.8537 15.4167 13.8537C14.5538 13.8537 13.8542 14.5533 13.8542 15.4162C13.8542 16.2792 14.5538 16.9787 15.4167 16.9787C16.2797 16.9787 16.9792 16.2792 16.9792 15.4162ZM18.8542 15.4162C18.8542 16.0245 18.6932 16.5941 18.416 17.0898L18.9959 17.6696L19.0605 17.7416C19.3607 18.1099 19.339 18.6521 18.9959 18.9953C18.6527 19.3385 18.1104 19.3601 17.7422 19.06L17.6702 18.9953L17.0903 18.4155C16.5947 18.6927 16.025 18.8537 15.4167 18.8537C13.5183 18.8537 11.9792 17.3147 11.9792 15.4162C11.9792 13.5177 13.5183 11.9787 15.4167 11.9787C17.3152 11.9787 18.8542 13.5177 18.8542 15.4162Z" fill="currentColor"/>
+    </svg>
+  );
+}; 

package/src/components/vendor-tag.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { OpenSourceIcon, CoinsIcon } from "./icons-stub"
-import { OpenFrameLogo } from "./icons/openframe-logo"
+import { OpenFrameLogo } from "./openframe-logo"
 import { cn } from "../utils/cn"
 import { Boxes, Database, Hand, Plug, ShieldCheck, Sparkles } from "lucide-react"
 

package/src/components/vendors-icon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface VendorsIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const VendorsIcon: React.FC<VendorsIconProps> = ({ 
+  className = "", 
+  width = 24, 
+  height = 24 
+}) => {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M19.8745 17.9995V16C19.8745 14.9645 19.035 14.125 17.9995 14.125H17.1235L11.7959 19.4527C11.3567 19.8918 10.6445 19.8915 10.2051 19.4527C9.76574 19.0133 9.76574 18.3012 10.2051 17.8618L17.2759 10.791C18.0081 10.0588 18.0081 8.87044 17.2759 8.13821L15.8608 6.72464C15.1286 5.99252 13.9417 5.99244 13.2095 6.72464L11.7959 8.13821C11.3566 8.57751 10.6444 8.57744 10.2051 8.13821C9.76574 7.69887 9.76574 6.98673 10.2051 6.54739L11.6187 5.13382C13.2295 3.52294 15.8407 3.52302 17.4517 5.13382L18.8667 6.54739L19.1494 6.86087C20.377 8.36582 20.3813 10.5336 19.1655 12.0449C20.8757 12.5481 22.1245 14.1269 22.1245 16V17.9995C22.1245 20.2777 20.2777 22.1245 17.9995 22.1245H7C6.37868 22.1245 5.875 21.6209 5.875 20.9995C5.87525 20.3784 6.37883 19.8745 7 19.8745H17.9995C19.035 19.8745 19.8745 19.0351 19.8745 17.9995Z" fill="currentColor"/>
+      <path d="M9.87451 6C9.87451 4.96447 9.03505 4.125 7.99951 4.125H6C4.96447 4.125 4.125 4.96447 4.125 6V18C4.125 19.0355 4.96447 19.875 6 19.875H7.99951C9.03505 19.875 9.87451 19.0355 9.87451 18V6ZM8.625 16.9995C8.625 17.8968 7.89773 18.6252 7.00049 18.6255C6.15923 18.6255 5.46668 17.9858 5.3833 17.1665L5.37451 16.9995L5.3833 16.834C5.46645 16.0145 6.15907 15.375 7.00049 15.375L7.16602 15.3838C7.98532 15.4669 8.62475 16.1583 8.625 16.9995ZM12.1245 18C12.1245 20.2782 10.2777 22.125 7.99951 22.125H6C3.72183 22.125 1.875 20.2782 1.875 18V6C1.875 3.72183 3.72183 1.875 6 1.875H7.99951C10.2777 1.875 12.1245 3.72183 12.1245 6V18Z" fill="currentColor"/>
+    </svg>
+  );
+}; 

package/src/components/why-it-matters.tsx

@@ -35,7 +35,7 @@ const WhyItMattersItem: React.FC<WhyItMattersItemProps> = ({ number, title, desc
 };
 
 
-export const WhyItMatters = () => {
+const WhyItMatters = () => {
   const items = [
     {
       number: "1.",

package/src/components/x-icon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface XIconProps {
+  width?: number;
+  height?: number;
+  className?: string;
+}
+
+export function XIcon({ width = 16, height = 16, className = '' }: XIconProps) {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 16 16" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path 
+        d="M13.9164 8C13.9164 4.73242 11.2679 2.08318 8.00037 2.08301C4.73268 2.08301 2.08337 4.73232 2.08337 8C2.08355 11.2675 4.73279 13.916 8.00037 13.916C11.2678 13.9158 13.9162 11.2674 13.9164 8ZM15.4164 8C15.4162 12.0959 12.0962 15.4158 8.00037 15.416C3.90436 15.416 0.58355 12.096 0.583374 8C0.583374 3.90389 3.90425 0.583008 8.00037 0.583008C12.0963 0.583184 15.4164 3.904 15.4164 8Z" 
+        fill="#FAFAFA"
+      />
+      <path 
+        d="M9.80343 5.13607C10.0963 4.84334 10.5711 4.84323 10.864 5.13607C11.1567 5.42892 11.1567 5.90376 10.864 6.19661L9.06027 7.99935L10.864 9.80306L10.9148 9.8597C11.1552 10.1543 11.1386 10.589 10.864 10.8636C10.5893 11.1382 10.1547 11.1548 9.86007 10.9144L9.80343 10.8636L7.99972 9.05989L6.19699 10.8636C5.90414 11.1563 5.42929 11.1563 5.13644 10.8636C4.8436 10.5708 4.84371 10.096 5.13644 9.80306L6.93917 7.99935L5.13644 6.19661L5.08468 6.13997C4.84437 5.84539 4.86184 5.41067 5.13644 5.13607C5.41104 4.86146 5.84577 4.844 6.14035 5.08431L6.19699 5.13607L7.99972 6.9388L9.80343 5.13607Z" 
+        fill="#FAFAFA"
+      />
+    </svg>
+  );
+} 

package/src/components/x-logo.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface XLogoProps extends React.SVGProps<SVGSVGElement> {
+  className?: string;
+}
+
+export function XLogo({ className = '', ...props }: XLogoProps) {
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path d="M9.75292 12.6562C10.1923 12.2169 10.9044 12.2169 11.3437 12.6562C11.7831 13.0956 11.7831 13.8077 11.3437 14.2471L3.7954 21.7954C3.35606 22.2348 2.64392 22.2348 2.20458 21.7954C1.76524 21.3561 1.76524 20.6439 2.20458 20.2046L9.75292 12.6562ZM20.2046 2.20459C20.6439 1.76525 21.3561 1.76525 21.7954 2.20459C22.2347 2.64393 22.2347 3.35607 21.7954 3.79541L14.2471 11.3438C13.8077 11.7831 13.0956 11.7831 12.6562 11.3438C12.2169 10.9044 12.2169 10.1923 12.6562 9.75293L20.2046 2.20459Z" fill="#FAFAFA" />
+      <path d="M7.9995 1.875L8.13426 1.88232C8.444 1.91951 8.72702 2.08473 8.9121 2.34082L21.9126 20.3408C22.1599 20.6833 22.1943 21.1365 22.0019 21.5127C21.8096 21.8887 21.4223 22.125 21 22.125H16.0005C15.6393 22.125 15.2994 21.9519 15.0879 21.6592L2.08739 3.65918C1.84004 3.31669 1.8057 2.86346 1.99803 2.4873C2.19042 2.11133 2.57763 1.875 2.99999 1.875H7.9995ZM16.5747 19.875H18.7983L7.42528 4.125H5.20165L16.5747 19.875Z" fill="#FAFAFA" />
+    </svg>
+  );
+}