torch-glare 1.0.1 → 1.0.3

package/lib/components/ SearchField.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, ReactNode } from "react";
+import { Props, InputField } from "./InputField";
+
+interface SearchProps extends Props {
+    Searchplaceholder?: ReactNode
+    secondaryPlaceholder?: ReactNode
+}
+// Use InputField types in the SearchInput component
+export const SearchField = forwardRef<HTMLInputElement, SearchProps>(
+    ({ Searchplaceholder, secondaryPlaceholder, ...props }, forwardedRef) => {
+        return (
+            <div className="mb-[10px] w-full h-fit justify-center items-center rounded-[12px] p-[3px] bg-[rgba(106,112,144,0.60)] shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)] backdrop-blur-[21px]">
+                <InputField
+                    {...props}
+                    ref={forwardedRef}
+                    type="text"
+                    variant="SystemStyle"
+                    size="M"
+                    className="h-[54px] rounded-[9px] p-[15px] border-border-system-global-primary bg-[rgba(0,0,0,0.60)]"
+                    icon={
+                        <SearchInputPlaceholder value={props.value} secondaryPlaceholder={secondaryPlaceholder} Searchplaceholder={Searchplaceholder} />
+                    }
+                />
+            </div>
+        );
+    }
+);
+
+SearchField.displayName = " SearchField"; // Set displayName for debugging
+
+
+function SearchInputPlaceholder({ Searchplaceholder, secondaryPlaceholder, value }: { Searchplaceholder?: ReactNode, secondaryPlaceholder?: ReactNode, value: any }) {
+    return (
+        <div className="flex gap-[10px] justify-center items-center ">
+            <i className="ri-search-2-line text-[24px] text-[#E5E5E5]"></i>
+
+            {
+                value == "" ? (
+                    <div className="flex gap-[5px] justify-center items-center ">
+                        <p className="text-content-system-global-primary  typography-headers-medium-regular leading-none opacity-[0.8]">{Searchplaceholder}</p>
+                        <p className="text-content-system-global-primary  typography-body-medium-medium leading-none opacity-30 mix-blend-luminosity mt-[2px]">{secondaryPlaceholder}</p>
+                    </div>
+                ) : null
+            }
+
+        </div>
+    )
+}

package/lib/components/Badge.tsx

@@ -6,7 +6,7 @@ import { Themes } from "../utils/types";
 export const badgeBase = cva(
   [
     "px-[6px]",
-    "[&_p]:text-content-presentation-action-light-primary",
+    "[&_div]:text-content-presentation-action-light-primary",
     "[&_i]:!leading-0",
     "flex",
     "justify-center",
@@ -23,12 +23,12 @@ export const badgeBase = cva(
   {
     variants: {
       size: {
-        XS: "h-[18px] [&_i]:text-[12px] [&_p]:typography-body-small-medium",
-        S: "h-[22px] [&_i]:text-[12px] [&_p]:typography-body-small-medium",
-        M: "h-[26px] [&_i]:text-[16px] [&_p]:typography-body-medium-medium",
+        XS: "h-[18px] [&_i]:text-[12px] [&_div]:typography-body-small-medium",
+        S: "h-[22px] [&_i]:text-[12px] [&_div]:typography-body-small-medium",
+        M: "h-[26px] [&_i]:text-[16px] [&_div]:typography-body-medium-medium",
       },
       variant: {
-        highlight: ["h-[20px] [&_i]:text-[12px] [&_p]:typography-body-small-medium",
+        highlight: ["h-[20px] [&_i]:text-[12px] [&_div]:typography-body-small-medium",
           "bg-background-presentation-badge-gray border-transparent px-[3px]"
         ],
         green: "border-border-presentation-badge-green bg-background-presentation-badge-green [&_i]:text-content-presentation-badge-green",
@@ -93,7 +93,7 @@ export const Badge: React.FC<BadgeProps> = ({
         )}
       </div>
 
-      <p className="px-[3px] whitespace-nowrap">{label}</p>
+      <div className="px-[3px] whitespace-nowrap">{label}</div>
       {isSelected && (
         <button
           onClick={onUnselect}

package/lib/components/Checkbox.tsx

@@ -11,25 +11,43 @@ interface CheckBoxProps
 }
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckBoxProps>(
-  ({ size = "M", ...props }, ref) => {
+  ({ size = "M", children, ...props }, ref) => {
     const [checked, setChecked] = useState(props.checked);
     return (
-      <label htmlFor={props.id} className="flex items-center justify-center gap-1">
-        <input
-          {...props}
-          children={null}
-          id={props.id}
-          onChange={(e) => {
-            props.onChange?.(e);
-            setChecked(e.target.checked);
-          }}
-          type="checkbox"
-          hidden
-          ref={ref}
-        />
-        <CheckboxIcon size={size} checked={checked} disabled={props.disabled} />
-        {props.children}
-      </label>
+      children ?
+        <label htmlFor={props.id} className="flex items-center justify-center gap-1">
+          <input
+            {...props}
+            children={null}
+            id={props.id}
+            onChange={(e) => {
+              props.onChange?.(e);
+              setChecked(e.target.checked);
+            }}
+            type="checkbox"
+            hidden
+            ref={ref}
+          />
+          <CheckboxIcon size={size} checked={checked} disabled={props.disabled} />
+          {children}
+        </label>
+        :
+        <div>
+          <input
+            {...props}
+            children={null}
+            id={props.id}
+            onChange={(e) => {
+              props.onChange?.(e);
+              setChecked(e.target.checked);
+            }}
+            type="checkbox"
+            hidden
+            ref={ref}
+          />
+          <CheckboxIcon size={size} checked={checked} disabled={props.disabled} />
+        </div>
+
     );
   }
 );

package/lib/components/Dialog.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+
+import { cn } from "../utils/cn"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+            "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+        )}
+        {...props}
+    />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                "fixed left-[50%] top-[50%] z-50 flex flex-col items-start w-full translate-x-[-50%] translate-y-[-50%]  shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+                "flex justify-center items-center",
+                className
+            )}
+            {...props}
+        >
+            {children}
+
+        </DialogPrimitive.Content>
+    </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+
+const DialogCloseButton = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Close>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>
+>(({ className, children, ...props }, ref) => (
+    <DialogPrimitive.Close ref={ref} {...props} className={cn("m-0 p-0 h-fit", className)}>
+        {children}
+    </DialogPrimitive.Close>
+))
+const DialogHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col space-y-1.5 text-center sm:text-left",
+            className
+        )}
+        {...props}
+    />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+            className
+        )}
+        {...props}
+    />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+        ref={ref}
+        className={cn(
+            "text-lg font-semibold leading-none tracking-tight",
+            className
+        )}
+        {...props}
+    />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Description
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogTrigger,
+    DialogClose,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+    DialogCloseButton
+}

package/lib/components/ImageAttachment.tsx

@@ -3,6 +3,7 @@ import { Button } from "./Button";
 import { cva } from "class-variance-authority";
 import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogCancel } from "./AlertDialog";
 
 const dropZoneStyles = cva(
   [
@@ -19,42 +20,33 @@ const dropZoneStyles = cva(
   }
 );
 
-interface Props extends InputHTMLAttributes<HTMLInputElement> {
+interface Props extends InputHTMLAttributes<HTMLInputElement | HTMLDivElement> {
   isDropAreaActive?: boolean;
   mainLabel: string;
   secondaryLabel: string;
   theme?: Themes
   expandLabel: ReactNode
-  uploadedImage: any
-  onExpand?: () => void
+  children?: ReactNode
   getRootProps?: () => any
-
 }
 
-export const ImageAttachment = forwardRef<HTMLInputElement, Props>(
+const ImageAttachment = forwardRef<HTMLInputElement, Props>(
   (
     {
       isDropAreaActive,
       mainLabel,
       theme,
       secondaryLabel,
-      expandLabel,
-      uploadedImage,
-      onExpand,
       className,
       getRootProps,
+      children,
       ...props
     }: Props,
     ref
   ) => {
     return (
       <section className="flex items-center justify-center w-full gap-1">
-        <ExpandableImage
-          theme={theme}
-          selectedImg={uploadedImage}
-          expandLabel={expandLabel}
-          onExpand={onExpand}
-        />
+        {children}
         <Button
           {...getRootProps?.()}
           theme={theme}
@@ -79,28 +71,52 @@ export const ImageAttachment = forwardRef<HTMLInputElement, Props>(
 
 ImageAttachment.displayName = "ImageAttachment"
 
-
-
+export {
+  ImageAttachment,
+  ExpandableImage,
+  AttachmentImagePreview
+}
 
 
 interface ExpandableImageProps extends HTMLAttributes<HTMLDivElement> {
-  selectedImg: any
-  onExpand?: () => void
+  previewSrc: any
   expandLabel: ReactNode
+  placeholderLabel?: string
   theme?: Themes
 }
 
-const ExpandableImage = forwardRef<HTMLDivElement, ExpandableImageProps>(({ theme, id, selectedImg, onExpand, expandLabel, className, ...props }, ref) => {
+const ExpandableImage = ({ theme, previewSrc, expandLabel, placeholderLabel = "Upload Image", className, ...props }: ExpandableImageProps) => {
   return (
     <section data-theme={theme} className={cn("flex items-center justify-center w-[65px] h-[65px] rounded-md relative overflow-hidden border-none  group", className)}>
-      {selectedImg ? <SelectedImg imageSrc={selectedImg} /> : <ExpandableBaseComponent label="Upload Image" />}
-      {selectedImg && <ExpandImage onExpand={onExpand} expandLabel={expandLabel} />}
+      {previewSrc ? <SelectedImg src={previewSrc} /> : <PlaceHolder label={placeholderLabel} />}
+
+      {
+        previewSrc && (
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <button
+                className='flex w-full h-full justify-center items-center flex-col absolute z-10 opacity-0 bg-black/50 transition-all duration-250 ease-in-out hover:opacity-100'
+              >
+                <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M15.5 3.5L17.8 5.8L14.91 8.67L16.33 10.09L19.2 7.2L21.5 9.5V3.5H15.5ZM3.5 9.5L5.8 7.2L8.67 10.09L10.09 8.67L7.2 5.8L9.5 3.5H3.5V9.5ZM9.5 21.5L7.2 19.2L10.09 16.33L8.67 14.91L5.8 17.8L3.5 15.5V21.5H9.5ZM21.5 15.5L19.2 17.8L16.33 14.91L14.91 16.33L17.8 19.2L15.5 21.5H21.5V15.5Z" fill="#F9F9F9" />
+                </svg>
+                <p className='text-content-presentation-action-hover typography-labels-small-regular max-w-[50px] break-words m-0'>
+                  {expandLabel}
+                </p>
+              </button>
+            </AlertDialogTrigger>
+            <AlertDialogContent className="w-fit bg-transparent border-none">
+              {props.children}
+            </AlertDialogContent>
+          </AlertDialog>
+        )
+      }
     </section>
   );
-})
+}
 
 
-function ExpandableBaseComponent({ label }: any) {
+function PlaceHolder({ label }: any) {
   return (
     <section className={cn([
       'w-full h-full gap-[2px] flex flex-col justify-center items-center px-1',
@@ -115,21 +131,13 @@ function ExpandableBaseComponent({ label }: any) {
     </section>
   )
 }
-function ExpandImage({ onExpand, expandLabel = "Expand Pic" }: any) {
-  return (
-    <button onClick={onExpand} className='flex w-full h-full justify-center items-center flex-col absolute z-10 opacity-0 bg-black/50 transition-all duration-250 ease-in-out hover:opacity-100' >
-      <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M15.5 3.5L17.8 5.8L14.91 8.67L16.33 10.09L19.2 7.2L21.5 9.5V3.5H15.5ZM3.5 9.5L5.8 7.2L8.67 10.09L10.09 8.67L7.2 5.8L9.5 3.5H3.5V9.5ZM9.5 21.5L7.2 19.2L10.09 16.33L8.67 14.91L5.8 17.8L3.5 15.5V21.5H9.5ZM21.5 15.5L19.2 17.8L16.33 14.91L14.91 16.33L17.8 19.2L15.5 21.5H21.5V15.5Z" fill="#F9F9F9" />
-      </svg>
-      <p className='text-content-presentation-action-hover typography-labels-small-regular max-w-[50px] break-words m-0'>{expandLabel}</p>
-    </button>
-  )
-}
 
-function SelectedImg({ imageSrc }: any) {
+
+
+function SelectedImg({ src }: any) {
   return (
-    <section className='bg-white'>
-      <img src={imageSrc} className='w-full h-full object-cover object-center' />
+    <section className='bg-white rounded-md border  border-border-presentation-global-primary'>
+      <img src={src} className='w-full h-full object-cover object-center' />
     </section>
   )
 }
@@ -138,11 +146,10 @@ function SelectedImg({ imageSrc }: any) {
 interface AttachmentImagePreviewProps extends HTMLAttributes<HTMLDivElement> {
   src: any;
   header?: ReactNode;
-  onHide?: () => void;
   theme?: Themes
 }
 
-export function AttachmentImagePreview({ theme, src, header, onHide, className, ...props }: AttachmentImagePreviewProps) {
+function AttachmentImagePreview({ theme, src, header, className, ...props }: AttachmentImagePreviewProps) {
   return (
     <section
       {...props}
@@ -156,12 +163,14 @@ export function AttachmentImagePreview({ theme, src, header, onHide, className,
         <p className="m-0 text-content-presentation-global-primary typography-display-medium-semibold">
           {header}
         </p>
-        <Button theme={theme} onClick={onHide} size="M" buttonType="icon">
-          <i className="ri-close-line text-[16px]"></i>
-        </Button>
+        <AlertDialogCancel asChild>
+          <Button theme={theme} size="M" buttonType="icon">
+            <i className="ri-close-line text-[16px]"></i>
+          </Button>
+        </AlertDialogCancel>
       </section>
 
-      <img className="w-full object-cover object-center rounded-md" src={src} />
+      <img className="w-full object-cover object-center rounded-md  border shadow-md border-border-presentation-global-primary" src={src} />
 
       <section className="flex items-center justify-end w-full gap-2">
         {props.children}

package/lib/components/LinkButton.tsx

@@ -1,7 +1,8 @@
-import React, { AnchorHTMLAttributes, SVGProps } from "react";
+import React, { AnchorHTMLAttributes, HTMLAttributes, SVGProps } from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
+import { Slot } from "@radix-ui/react-slot";
 
 // Link button base styles
 export const linkButtonStyles = cva(
@@ -28,14 +29,17 @@ export const linkButtonStyles = cva(
   }
 );
 
-interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
+interface Props extends HTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
   size?: "S" | "M"; // this props will change the button style size see on figma design file
   theme?: Themes
+  asChild?: boolean
+  href?: string
 }
 
-export const LinkButton: React.FC<Props> = ({ theme, size = "S", className, ...props }) => {
+export const LinkButton: React.FC<Props> = ({ theme, className, size = "S", asChild, ...props }) => {
+  const Component = asChild ? Slot : props.href ? "a" : "span";
   return (
-    <a
+    <Component
       {...props}
       data-theme={theme}
       className={cn(
@@ -45,7 +49,7 @@ export const LinkButton: React.FC<Props> = ({ theme, size = "S", className, ...p
         className
       )}
     >
-      <p className="px-[3px]">{props.children}</p>
+      <div className="px-[3px]">{props.children}</div>
       <div
         className={cn(
           "rounded-[4px]",
@@ -67,7 +71,7 @@ export const LinkButton: React.FC<Props> = ({ theme, size = "S", className, ...p
           })}
         />
       </div>
-    </a>
+    </Component>
   );
 };
 

package/lib/components/LoginButton.tsx

@@ -54,3 +54,60 @@ export function LoginButton({
     </button>
   );
 }
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils/cn"; // Assuming you have a `cn` utility
+import { ButtonHTMLAttributes } from "react";
+import { LoadingIcon } from "./Button";
+import { Themes } from "../utils/types";
+
+const buttonVariants = cva(
+  "w-full h-[42px] rounded-[8px] typography-body-large-regular flex justify-center items-center transition-all duration-250 ease-in-out border",
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-background-system-body-primary",
+          "text-content-system-global-primary",
+          "border-border-system-global-primary",
+          "hover:border-[#9748FF]",
+        ],
+        noBg: [
+          "bg-transparent",
+          "border-border-system-global-primary",
+          "text-content-system-global-primary",
+          "hover:border-[#9748FF]",
+          "no-underline",
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants> {
+  isLoading?: boolean;
+  theme?: Themes
+}
+
+export function LoginButton({
+  variant = "default",
+  className,
+  isLoading,
+  theme,
+  ...props
+}: ButtonProps) {
+  return (
+    <button data-theme={theme} {...props} className={cn(buttonVariants({ variant, className }))}>
+      {isLoading ? (
+        <LoadingIcon className="w-[20px] h-[20px]" />
+      ) : (
+        props.children
+      )}
+    </button>
+  );
+}

package/lib/components/Radio.tsx

@@ -44,25 +44,33 @@ interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "ch
 export const Radio = forwardRef<HTMLInputElement, Props>(
   ({ size = "M", className, children, theme, radioClassName, ...props }, ref) => {
     return (
-      <label data-theme={theme} htmlFor={props.id} className={cn("flex items-center justify-start gap-1", className)}>
+      children ?
+        <label data-theme={theme} htmlFor={props.id} className={cn("flex items-center justify-start gap-1", className)}>
+          <input
+            {...props}
+            ref={ref}
+            type="radio"
+            className={cn(
+              glareRadioStyles({
+                size,
+              }),
+              radioClassName
+            )}
+          />
+          {children}
+        </label>
+        :
         <input
           {...props}
-          onChange={(e) => {
-            props.onChange?.(e);
-          }}
           ref={ref}
-          id={props.id}
           type="radio"
           className={cn(
             glareRadioStyles({
               size,
-
             }),
             radioClassName
           )}
         />
-        {children}
-      </label>
     );
   }
 );

package/lib/components/RadioCard.tsx

@@ -1,5 +1,4 @@
 import { forwardRef, InputHTMLAttributes, ReactNode } from "react";
-import { cva } from "class-variance-authority";
 import { cn } from "../utils/cn";
 import { Radio } from "./Radio";
 import { Card, CardContent, CardDescription, CardHeader } from "./Card";
@@ -23,6 +22,7 @@ export const RadioCard = forwardRef<HTMLInputElement, Props>(
       <Card
         data-theme={theme}
         htmlFor={id}
+        as="label"
         className={cn(
           "relative border-border-presentation-global-primary group",
           // Disabled state
@@ -31,7 +31,8 @@ export const RadioCard = forwardRef<HTMLInputElement, Props>(
           disabled && "hover:border-border-presentation-global-primary",
           // Checked state
           props.checked && "border-border-presentation-global-primary",
-          props.checked && "hover:border-border-presentation-global-primary"
+          props.checked && "hover:border-border-presentation-global-primary",
+          className
         )}
       >
         <section

package/lib/components/RadioLabel.tsx

@@ -0,0 +1,107 @@
+'use client'
+import { InputHTMLAttributes, forwardRef } from "react";
+import { Label } from "./Label";
+import { cn } from "../utils/cn";
+import { cva } from "class-variance-authority";
+
+interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  label?: string;
+  secondaryLabel?: string;
+  requiredLabel?: string;
+  size?: "S" | "M" | "L";
+  directions?: "vertical" | "horizontal";
+  theme?: "dark" | "light" | "default";
+}
+
+export const RadioLabel = forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      label,
+      theme,
+      secondaryLabel,
+      requiredLabel,
+      size = "M",
+      type = "radio",
+      directions,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <label
+        data-theme={theme}
+        htmlFor={props.id}
+        className={cn("flex items-center gap-1 group", props.className)}
+      >
+        <Radio {...props} checked={props.checked} size={size} ref={ref} />
+        {label && (
+          <Label
+            htmlFor={props.id}
+            label={label}
+            secondaryLabel={secondaryLabel}
+            requiredLabel={requiredLabel}
+            size={size}
+            directions={directions}
+          />
+        )}
+      </label>
+    );
+  }
+);
+
+RadioLabel.displayName = "RadioLabel";
+
+const glareRadioStyles = cva(
+  [
+    "w-[12px]",
+    "h-[12px]",
+    "rounded-full",
+    "border",
+    "border-border-presentation-action-checkbox-primary",
+    "bg-background-presentation-action-borderstyle",
+    "transition-[background,border-color,background-color] duration-200",
+    "hover:bg-blue-sparkle-alpha-15 hover:border-border-presentation-state-focus",
+    "appearance-none",
+    "checked:border-background-presentation-state-information-primary checked:hover:bg-white checked:bg-white",
+    "disabled:bg-background-presentation-action-disabled disabled:border-border-presentation-global-primary",
+    "disabled:cursor-not-allowed",
+  ],
+  {
+    variants: {
+      size: {
+        S: ["w-[12px] checked:border-[5px]", "h-[12px]"],
+        M: ["w-[24px] checked:border-[9px]", "h-[24px]"],
+        L: ["w-[24px] checked:border-[9px]", "h-[24px]"],
+      },
+    },
+    defaultVariants: {
+      size: "M",
+    },
+  }
+);
+
+interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  size?: "S" | "M" | "L";
+}
+
+export const Radio = forwardRef<HTMLInputElement, Props>(
+  ({ size = "M", ...props }, ref) => {
+    return (
+      <input
+        {...props}
+        onChange={(e) => {
+          props.onChange?.(e);
+        }}
+        ref={ref}
+        id={props.id}
+        type="radio"
+        className={cn(
+          glareRadioStyles({
+            size,
+          })
+        )}
+      />
+    );
+  }
+);
+Radio.displayName = "Radio";

package/lib/components/{Switcher.tsx → Switch.tsx}

@@ -1,15 +1,41 @@
-import { ButtonHTMLAttributes } from "react";
+'use client'
 import { cn } from "../utils/cn";
-import { Label } from "./Label";
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+import React from "react";
 
-interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex w-[48px] h-[28px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm 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-background-presentation-switcher-active data-[state=unchecked]:bg-background-presentation-switcher-disabled",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block w-[24px] h-[24px] rounded-full bg-background-presentation-switcher-knob shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
+
+
+
+/* interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   active: boolean;
   activeLabel?: string;
   disabledLabel?: string;
   theme?: "dark" | "light" | "default";
 }
 
-export function Switcher({
+function Switchers({
   active,
   activeLabel,
   disabledLabel,
@@ -53,4 +79,4 @@ export function Switcher({
       )}
     </section>
   );
-}
+} */

package/lib/components/TransparentLabel.tsx

@@ -70,3 +70,76 @@ export const TransparentLabel = ({ size, className, ...props }: Props) => {
         <p {...props} className={cn(TransparentLabelStyles({ size }), className)}></p>
     );
 };
+
+import { cn } from "../utils/cn";
+import { cva, type VariantProps } from "class-variance-authority";
+import { HTMLAttributes } from "react";
+
+export const TransparentLabelStyles = cva(
+    "[mask-image:linear-gradient(to_right,black_0%,black_0%,black_85%,transparent_100%)] rtl:[mask-image:linear-gradient(to_left,black_0%,black_0%,black_85%,transparent_100%)]",
+    {
+        variants: {
+            size: {
+                "display-large-bold": "typography-display-large-bold",
+                "display-large-semibold": "typography-display-large-semibold",
+                "display-large-medium": "typography-display-large-medium",
+                "display-large-regular": "typography-display-large-regular",
+                "display-medium-bold": "typography-display-medium-bold",
+                "display-medium-semibold": "typography-display-medium-semibold",
+                "display-medium-medium": "typography-display-medium-medium",
+                "display-medium-regular": "typography-display-medium-regular",
+                "display-small-bold": "typography-display-small-bold",
+                "display-small-semibold": "typography-display-small-semibold",
+                "display-small-medium": "typography-display-small-medium",
+                "display-small-regular": "typography-display-small-regular",
+                "headers-large-bold": "typography-headers-large-bold",
+                "headers-large-semibold": "typography-headers-large-semibold",
+                "headers-large-medium": "typography-headers-large-medium",
+                "headers-large-regular": "typography-headers-large-regular",
+                "headers-medium-bold": "typography-headers-medium-bold",
+                "headers-medium-semibold": "typography-headers-medium-semibold",
+                "headers-medium-medium": "typography-headers-medium-medium",
+                "headers-medium-regular": "typography-headers-medium-regular",
+                "headers-small-bold": "typography-headers-small-bold",
+                "headers-small-semibold": "typography-headers-small-semibold",
+                "headers-small-medium": "typography-headers-small-medium",
+                "headers-small-regular": "typography-headers-small-regular",
+                "body-large-bold": "typography-body-large-bold",
+                "body-large-semibold": "typography-body-large-semibold",
+                "body-large-medium": "typography-body-large-medium",
+                "body-large-regular": "typography-body-large-regular",
+                "body-medium-bold": "typography-body-medium-bold",
+                "body-medium-semibold": "typography-body-medium-semibold",
+                "body-medium-medium": "typography-body-medium-medium",
+                "body-medium-regular": "typography-body-medium-regular",
+                "body-small-bold": "typography-body-small-bold",
+                "body-small-semibold": "typography-body-small-semibold",
+                "body-small-medium": "typography-body-small-medium",
+                "body-small-regular": "typography-body-small-regular",
+                "labels-large-bold": "typography-labels-large-bold",
+                "labels-large-semibold": "typography-labels-large-semibold",
+                "labels-large-medium": "typography-labels-large-medium",
+                "labels-large-regular": "typography-labels-large-regular",
+                "labels-medium-bold": "typography-labels-medium-bold",
+                "labels-medium-semibold": "typography-labels-medium-semibold",
+                "labels-medium-medium": "typography-labels-medium-medium",
+                "labels-medium-regular": "typography-labels-medium-regular",
+                "labels-small-bold": "typography-labels-small-bold",
+                "labels-small-semibold": "typography-labels-small-semibold",
+                "labels-small-medium": "typography-labels-small-medium",
+                "labels-small-regular": "typography-labels-small-regular",
+            },
+        },
+        defaultVariants: {
+            size: "body-medium-regular",
+        }
+    }
+);
+
+interface Props extends HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof TransparentLabelStyles> { }
+
+export const TransparentLabel = ({ size, className, ...props }: Props) => {
+    return (
+        <p {...props} className={cn(TransparentLabelStyles({ size }), className)}></p>
+    );
+};

package/lib/components/TreeDropDown.tsx

@@ -56,7 +56,7 @@ export const TreeDropDown = ({ childrenContainerClassName, className, variant =
                 <button className={cn("outline-none border-none flex-0 leading-0 transition-transform ease-in-out flex justify-center items-center bg-background-system-body-tertiary h-[28px] w-[28px] rounded-full text-[20px] text-content-system-global-primary", { "rotate-180": isActive })}>
                     <i className={cn("leading-none ri-arrow-down-s-line ")}></i>
                 </button>
-                <p className={cn("text-content-system-global-primary typography-body-medium-medium transition-all ease-in-out duration-100 flex-1")}>{treeLabel}</p>
+                <div className={cn("text-content-system-global-primary typography-body-medium-medium transition-all ease-in-out duration-100 flex-1")}>{treeLabel}</div>
             </div>
             <div className={cn("mt-0 pl-[22px] relative overflow-auto scrollbar-hide transition-all duration-500 ease-in-out", {
                 "max-h-[20000px] mt-1": isActive, "max-h-0": !isActive,

package/lib/layouts/CLayout.tsx

@@ -11,23 +11,27 @@ interface LayoutProps
 }
 function Layout({ ...props }: LayoutProps) {
   return (
-    <section {...props} className="flex h-screen gap-[10px] bg-background-system-body-base lg:p-[16px]">
+    <div {...props} className="flex h-[100dvh] flex-1 lg:gap-[10px] bg-background-system-body-base lg:p-[16px]">
       {props.children}
-    </section>
+    </div>
   );
 }
 
-
-interface BodyProps
+interface ContentProps
   extends HTMLAttributes<HTMLDivElement> {
 }
-function Body({ ...props }: BodyProps) {
+function Body({ ...props }: ContentProps) {
   return (
-    <main {...props} className={cn("flex flex-grow flex-1 overflow-hidden", props.className)}>
-      <div className="flex lg:rounded-xl bg-background-system-body-tertiary shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)] flex-1 flex-grow lg:p-1">
+    <main {...props} className={cn("flex flex-grow flex-1 overflow-y-auto", props.className)}>
+      <div className="flex lg:rounded-[12px] bg-background-system-body-tertiary shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)] flex-1 flex-grow lg:p-1">
         <div
-          className="lg:rounded-lg flex-1 flex-grow overflow-scroll  scrollbar-hide lg:p-[2px] lg:bg-[linear-gradient(130deg,var(--blue-sparkle-600)_0px,rgba(44,45,46,1)_46px)]"
+          className="relative lg:rounded-lg flex-1 flex-grow overflow-scroll  scrollbar-hide lg:p-[2px] lg:bg-[linear-gradient(143deg,var(--blue-sparkle-600)_0px,rgba(44,45,46,1)_55px)]"
         >
+          <div
+            className="absolute top-[2px] w-[170px] rounded-t-[6px] z-10 lg:h-[60px] 
+            left-[2px] ltr:lg:bg-[linear-gradient(132deg,#0D0F4E_0%,#000_50%)]
+            rtl:right-[2px] rtl:left-[unset] rtl:lg:bg-[linear-gradient(-132deg,#0D0F4E_0%,#000_50%)]"
+          ></div>
           {props.children}
         </div>
       </div>
@@ -35,7 +39,6 @@ function Body({ ...props }: BodyProps) {
   );
 }
 
-
 interface SideBarProps
   extends HTMLAttributes<HTMLDivElement> {
   iconButtons?: ReactNode
@@ -97,6 +100,7 @@ function SideBar({ children, footerChildren, headerChild, navigationChildren, ic
 }
 
 
+
 interface ChildProps
   extends HTMLAttributes<HTMLDivElement> {
   theme?: Themes
@@ -111,6 +115,7 @@ const SideBarChildContainer = ({ theme, ...props }: ChildProps) => {
 }
 
 
+
 const SideBarItemStyles = cva([
   "h-[40px] w-full px-[8px] flex gap-[6px] typography-body-small-medium justify-start items-center",
   "text-content-system-global-primary border-l-[2px] rtl:border-r-[2px] border-transparent outline-none",
@@ -186,11 +191,11 @@ interface Props
   active?: boolean
   disabled?: boolean
 }
-const SideBarItem = ({ active, disabled, iconOnly, asChild, as: Tag = "span", theme, variant, ...props }: Props) => {
+const SideBarItem = ({ active, disabled, iconOnly, asChild, as: Tag = "span", theme, className, variant, ...props }: Props) => {
   const Component = asChild ? Slot : Tag;
 
   return (
-    <Component  {...props} data-theme={theme} disabled={disabled} className={cn(SideBarItemStyles({ variant, iconOnly, active, disabled }), props.className)}>
+    <Component  {...props} data-theme={theme} disabled={disabled} className={cn(SideBarItemStyles({ variant, iconOnly, active, disabled }), className)}>
 
     </Component>
   )
@@ -247,13 +252,13 @@ interface SideBarIconButtonProps
   disabled?: boolean
 }
 
-const SideBarIconButton = ({ count, active, asChild, message, as: Tag = "button", theme, variant, ...props }: SideBarIconButtonProps) => {
+const SideBarIconButton = ({ count, active, asChild, message, as: Tag = "button", theme, variant, className, ...props }: SideBarIconButtonProps) => {
   const Component = asChild ? Slot : Tag;
 
   return (
     message ?
       <Tooltip variant={"highlight"} text={message} toolTipSide='left' className='z-[1000]'>
-        <Component {...props} data-theme={theme} className={cn(SideBarIconButtonStyles({ variant, active }))}>
+        <Component {...props} data-theme={theme} className={cn(SideBarIconButtonStyles({ variant, active }), className)}>
           {props.children}
           {count && <Counter className=' absolute top-[2px] right-[2px]' label={count} />}
         </Component>
@@ -301,14 +306,14 @@ const glareFeedbackItemStyle = cva(
 
 
 const SideBarFooterItem: React.FC<SideBarFooterItemProps> = ({ asChild,
-  as: Tag = "button", theme, variant, ...props }) => {
+  as: Tag = "button", theme, variant, className, ...props }) => {
   const Component = asChild ? Slot : Tag;
 
   return (
     <Component
       data-theme={theme}
       {...props}
-      className={cn(glareFeedbackItemStyle({ variant }), props.className)}
+      className={cn(glareFeedbackItemStyle({ variant }), className)}
     >
     </Component>
   );

package/lib/layouts/TreeSubLayout.tsx

@@ -36,10 +36,10 @@ export default function TreeSubLayout({
   return (
     <div
       className={cn(
-        "flex gap-[2px] h-full overflow-hidden transition-all ease-in-out delay-150 lg:bg-none lg:rounded-2 ",
+        "flex  h-full overflow-hidden transition-all ease-in-out delay-150 lg:bg-none lg:rounded-2 ",
       )}
     >
-      <div className="grid grid-rows-[60px_1fr] h-full flex-1 gap-[2px] rounded-2 flex-shrink-0 min-w-[300px]">
+      <div className="grid grid-rows-[auto_1fr] h-full flex-1 lg:gap-[2px] rounded-2 flex-shrink-0 min-w-[300px]">
         <HeaderPage
           title={treeData[pathname]?.pageHeader}
           subTitle={treeData[pathname]?.subTitle}

package/lib/utils/convertImgToURL.ts

@@ -0,0 +1,17 @@
+import { Dispatch, SetStateAction } from "react";
+
+export const convertImageFileToDataUrl = async (
+    file: File | null,
+    setter: Dispatch<SetStateAction<string>>
+) => {
+    if (file && file.type.startsWith("image/")) {
+        const reader = new FileReader();
+        reader.onload = (e: ProgressEvent<FileReader>) => {
+            const result = e.target?.result;
+            if (typeof result === "string") {
+                setter(result);
+            }
+        };
+        reader.readAsDataURL(file);
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "license": "MIT",
   "files": [

package/lib/components/RingLoading.tsx

@@ -1,190 +0,0 @@
-import { HTMLAttributes } from "react";
-import { cva } from "class-variance-authority";
-import { cn } from "../utils/cn";
-
-export const loadingFrame = cva("relative flex justify-center items-center", {
-  variants: {
-    size: {
-      S: "w-[200px] h-[200px]",
-      M: "w-[400px] h-[400px]",
-      L: "w-[500px] h-[500px]",
-    },
-  },
-  defaultVariants: {
-    size: "S",
-  },
-});
-
-export const loadingAnimationTextContainer = cva("", {
-  variants: {
-    size: {
-      S: "w-[150px] h-[150px]",
-      M: "w-[200px] h-[200px]",
-      L: "w-[300px] h-[300px]",
-    },
-  },
-  defaultVariants: {
-    size: "S",
-  },
-});
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  size?: "S" | "M" | "L"; // this is used to change the size style of the component
-  theme?: "light" | "dark" | "default";
-}
-
-export default function RingLoading({ className, theme = "light", size = "M", ...props }: Props) {
-  return (
-    <section data-theme={theme} {...props} className={cn(loadingFrame({ size }), className)}>
-      <DarkRingLoadingIcon
-        data-theme={theme}
-        className="w-full h-full animate-spin bg-transparent object-cover object-center hidden data-[theme=dark]:flex"
-      />
-
-      {/* Light Theme Loader */}
-      <RingLoadingIcon
-        data-theme={theme}
-        className="w-full h-full animate-spin bg-transparent object-cover object-center hidden data-[theme=light]:flex"
-      />
-      <section
-        className={cn(
-          "absolute flex justify-center items-center top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
-        )}
-      >
-        {props.children}
-      </section>
-    </section>
-  );
-}
-
-
-
-
-const DarkRingLoadingIcon = (props: HTMLAttributes<HTMLOrSVGElement>) => (
-  <svg
-    {...props}
-    id="e7Ze8cPfGzd1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    viewBox="0 0 216 216"
-    shapeRendering="geometricPrecision"
-    textRendering="geometricPrecision"
-  >
-    <defs>
-      <filter
-        id="e7Ze8cPfGzd3-filter"
-        x="-150%"
-        width="400%"
-        y="-150%"
-        height="400%"
-      >
-        <feGaussianBlur
-          id="e7Ze8cPfGzd3-filter-blur-0"
-          stdDeviation="4,4"
-          result="result"
-        />
-      </filter>
-      <linearGradient
-        id="e7Ze8cPfGzd4-fill"
-        x1="16"
-        y1="116"
-        x2="126.065"
-        y2="28.6871"
-        spreadMethod="pad"
-        gradientUnits="userSpaceOnUse"
-        gradientTransform="translate(0 0)"
-      >
-        <stop
-          id="e7Ze8cPfGzd4-fill-0"
-          offset="0%"
-          stopColor="rgba(83,23,255,0)"
-        />
-        <stop id="e7Ze8cPfGzd4-fill-1" offset="100%" stopColor="#b900d8" />
-      </linearGradient>
-      <filter
-        id="e7Ze8cPfGzd5-filter"
-        x="-150%"
-        width="400%"
-        y="-150%"
-        height="400%"
-      >
-        <feGaussianBlur
-          id="e7Ze8cPfGzd5-filter-blur-0"
-          stdDeviation="8,8"
-          result="result"
-        />
-      </filter>
-      <linearGradient
-        id="e7Ze8cPfGzd6-fill"
-        x1="16"
-        y1="116"
-        x2="126.065"
-        y2="28.6871"
-        spreadMethod="pad"
-        gradientUnits="userSpaceOnUse"
-        gradientTransform="translate(0 0)"
-      >
-        <stop
-          id="e7Ze8cPfGzd6-fill-0"
-          offset="0%"
-          stopColor="rgba(83,23,255,0)"
-        />
-        <stop id="e7Ze8cPfGzd6-fill-1" offset="100%" stopColor="#b900d8" />
-      </linearGradient>
-      <linearGradient
-        id="e7Ze8cPfGzd7-fill"
-        x1="16"
-        y1="116"
-        x2="126.065"
-        y2="28.6871"
-        spreadMethod="pad"
-        gradientUnits="userSpaceOnUse"
-        gradientTransform="translate(0 0)"
-      >
-        <stop
-          id="e7Ze8cPfGzd7-fill-0"
-          offset="0%"
-          stopColor="rgba(83,23,255,0.3)"
-        />
-        <stop id="e7Ze8cPfGzd7-fill-1" offset="100%" stopColor="#e75cff" />
-      </linearGradient>
-    </defs>
-    <path
-      d="M116,16c55.228,0,100,44.7715,100,100c0,55.228-44.772,100-100,100-55.2285,0-100-44.772-100-100C16,60.7715,60.7715,16,116,16Zm0,195c52.467,0,95-42.533,95-95s-42.533-95-95-95-95,42.5329-95,95c0,52.467,42.5329,95,95,95Z"
-      transform="translate(-8-8)"
-      fillOpacity="0.1"
-    />
-    <g transform="translate(-7.999968-8)" filter="url(#e7Ze8cPfGzd3-filter)">
-      <path
-        d="M116,18.5c0-1.3807-1.119-2.5033-2.5-2.4688-12.28.3071-24.4062,2.8745-35.7684,7.5808-12.1325,5.0255-23.1564,12.3915-32.4423,21.6773-9.2858,9.2859-16.6518,20.3098-21.6773,32.4424C18.9057,89.0939,16.3383,101.22,16.0312,113.5c-.0345,1.381,1.0881,2.5,2.4688,2.5s2.4966-1.12,2.5329-2.5c.3059-11.623,2.7434-23.0994,7.1985-33.8549c4.7742-11.5259,11.7719-21.9987,20.5934-30.8202s19.2943-15.8193,30.8203-20.5935c10.7555-4.4551,22.2319-6.8926,33.8549-7.1985c1.38-.0363,2.5-1.1522,2.5-2.5329Z"
-        fill="url(#e7Ze8cPfGzd4-fill)"
-      />
-    </g>
-    <g transform="translate(-8-8)" filter="url(#e7Ze8cPfGzd5-filter)">
-      <path
-        d="M116,18.5c0-1.3807-1.119-2.5033-2.5-2.4688-12.28.3071-24.4062,2.8745-35.7684,7.5808-12.1325,5.0255-23.1564,12.3915-32.4423,21.6773-9.2858,9.2859-16.6518,20.3098-21.6773,32.4424C18.9057,89.0939,16.3383,101.22,16.0312,113.5c-.0345,1.381,1.0881,2.5,2.4688,2.5s2.4966-1.12,2.5329-2.5c.3059-11.623,2.7434-23.0994,7.1985-33.8549c4.7742-11.5259,11.7719-21.9987,20.5934-30.8202s19.2943-15.8193,30.8203-20.5935c10.7555-4.4551,22.2319-6.8926,33.8549-7.1985c1.38-.0363,2.5-1.1522,2.5-2.5329Z"
-        fill="url(#e7Ze8cPfGzd6-fill)"
-      />
-    </g>
-    <path
-      d="M116,18.5c0-1.3807-1.119-2.5033-2.5-2.4688-12.28.3071-24.4062,2.8745-35.7684,7.5808-12.1325,5.0255-23.1564,12.3915-32.4423,21.6773-9.2858,9.2859-16.6518,20.3098-21.6773,32.4424C18.9057,89.0939,16.3383,101.22,16.0312,113.5c-.0345,1.381,1.0881,2.5,2.4688,2.5s2.4966-1.12,2.5329-2.5c.3059-11.623,2.7434-23.0994,7.1985-33.8549c4.7742-11.5259,11.7719-21.9987,20.5934-30.8202s19.2943-15.8193,30.8203-20.5935c10.7555-4.4551,22.2319-6.8926,33.8549-7.1985c1.38-.0363,2.5-1.1522,2.5-2.5329Z"
-      transform="translate(-8-8)"
-      fill="url(#e7Ze8cPfGzd7-fill)"
-    />
-  </svg>
-);
-
-
-
-const RingLoadingIcon = (props: HTMLAttributes<HTMLOrSVGElement>) => (
-  <svg {...props} width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M200 100C200 155.228 155.228 200 100 200C44.7715 200 0 155.228 0 100C0 44.7715 44.7715 0 100 0C155.228 0 200 44.7715 200 100ZM5 100C5 152.467 47.5329 195 100 195C152.467 195 195 152.467 195 100C195 47.5329 152.467 5 100 5C47.5329 5 5 47.5329 5 100Z" fill="black" fillOpacity="0.1" />
-    <path d="M197.5 100C198.881 100 200.003 98.8805 199.969 97.5002C199.662 85.22 197.094 73.0938 192.388 61.7317C187.362 49.5991 179.997 38.5752 170.711 29.2893C161.425 20.0035 150.401 12.6375 138.268 7.61205C126.906 2.90567 114.78 0.338305 102.5 0.031247C101.119 -0.00326585 100 1.11929 100 2.5C100 3.88071 101.12 4.99656 102.5 5.03289C114.123 5.33884 125.599 7.77635 136.355 12.2314C147.881 17.0056 158.354 24.0033 167.175 32.8249C175.997 41.6464 182.994 52.1191 187.769 63.6451C192.224 74.4006 194.661 85.8767 194.967 97.5002C195.003 98.8805 196.119 100 197.5 100Z" fill="url(#paint0_linear_10856_138364)" />
-    <defs>
-      <linearGradient id="paint0_linear_10856_138364" x1="3.4045" y1="-9.09091" x2="225.705" y2="19.8973" gradientUnits="userSpaceOnUse">
-        <stop stopColor="#D500F9" />
-        <stop offset="1" stopColor="#5317FF" />
-      </linearGradient>
-    </defs>
-  </svg>
-);