torch-glare 2.4.0 → 2.4.1

package/apps/lib/components/Toggle.tsx

@@ -1,127 +1,125 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "../utils/cn"
+import { cn } from "../utils/cn";
 
 const Toggle = React.forwardRef<
-    React.ElementRef<typeof TogglePrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
-    <TogglePrimitive.Root
-        ref={ref}
-        className={cn(toggleVariants({ variant, size, className }))}
-        {...props}
-    />
-))
-
-Toggle.displayName = TogglePrimitive.Root.displayName
-
-export { Toggle, toggleVariants }
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
 
+Toggle.displayName = TogglePrimitive.Root.displayName;
 
+export { Toggle, toggleVariants };
 
 const toggleVariants = cva(
-    [
-        "flex items-center whitespace-nowrap justify-center  transition-[background,color] duration-200 ease-in-out border border-transparent outline-none leading-none [&-i]:!leading-none",
-        "disabled:cursor-not-allowed disabled:pointer-events-none disabled:bg-background-presentation-action-disabled disabled:text-content-presentation-state-disabled disabled:border-transparent",
-        "",
-    ], {
+  [
+    "flex items-center whitespace-nowrap justify-center  transition-[background,color] duration-200 ease-in-out border border-transparent outline-none leading-none [&-i]:!leading-none",
+    "disabled:cursor-not-allowed disabled:pointer-events-none disabled:bg-background-presentation-action-disabled disabled:text-content-presentation-state-disabled disabled:border-transparent",
+    "",
+  ],
+  {
     variants: {
-        variant: {
-            // fucus styles for medium screens and above
-            PrimeStyle: [
-                "bg-background-presentation-action-secondary",
-                "text-content-presentation-action-light-primary",
-                "hover:bg-background-presentation-action-hover",
-                "hover:text-content-presentation-global-primary-inverse",
-                "focus:lg:focus:md:border lg:focus:md:border-border-presentation-state-focus", // Focus style only for medium screens and above
-                "active:bg-background-presentation-action-hover active:text-content-presentation-global-primary-inverse",
-                "data-[state=on]:bg-background-presentation-action-hover data-[state=on]:text-content-presentation-global-primary-inverse",
-            ],
-            BlueSecStyle: [
-                "bg-background-presentation-action-secondary",
-                "text-content-presentation-action-light-primary",
-                "hover:bg-background-presentation-state-information-primary",
-                "hover:text-content-presentation-global-primary-inverse",
-                "focus:lg:border focus:lg:border-border-presentation-state-focus",
-                "active:bg-background-presentation-state-information-primary active:text-content-presentation-global-primary-inverse",
-                "data-[state=on]:bg-background-presentation-state-information-primary data-[state=on]:text-content-presentation-global-primary-inverse",
-            ],
-            YelSecStyle: [
-                "bg-background-presentation-action-secondary",
-                "text-content-presentation-action-light-primary",
-                "hover:bg-background-presentation-state-warning-primary",
-                "hover:text-content-presentation-action-light-primary",
-                "focus:lg:border focus:lg:border-border-presentation-state-focus",
-                "active:bg-background-presentation-state-warning-primary active:text-content-presentation-action-light-primary",
-                "data-[state=on]:bg-background-presentation-state-warning-primary data-[state=on]:text-content-presentation-action-light-primary",
-            ],
-            RedSecStyle: [
-                "bg-background-presentation-action-secondary",
-                "text-content-presentation-action-light-primary",
-                "hover:bg-background-presentation-state-negative-primary",
-                "hover:text-content-presentation-global-primary-inverse",
-                "focus:lg:border focus:lg:border-border-presentation-state-focus",
-                "active:bg-background-presentation-state-negative-primary active:text-content-presentation-global-primary-inverse",
-                "data-[state=on]:bg-background-presentation-state-negative-primary data-[state=on]:text-content-presentation-global-primary-inverse",
-            ],
-            BorderStyle: [
-                "text-content-presentation-action-light-primary",
-                "border border-border-presentation-action-disabled",
-                "bg-background-presentation-action-borderstyle",
-                "hover:bg-background-presentation-action-hover",
-                "hover:text-content-presentation-global-primary-inverse",
-                "focus:lg:border focus:lg:border-border-presentation-state-focus",
-                "focus:lg:text-content-presentation-action-light-primary",
-                "focus:hover:lg:text-content-presentation-global-primary-inverse",
-                "active:bg-background-presentation-action-hover active:text-content-presentation-global-primary-inverse",
-                "data-[state=on]:bg-background-presentation-action-hover data-[state=on]:text-content-presentation-global-primary-inverse",
-            ],
-            PrimeContStyle: [
-                "text-content-presentation-action-light-primary",
-                "border-transparent bg-transparent",
-                "hover:bg-background-presentation-action-contstyle-hover",
-                "hover:text-content-presentation-action-light-primary",
-                "focus:lg:border focus:lg:border-border-presentation-state-focus",
-                "focus:lg:bg-background-presentation-action-borderstyle",
-                "active:bg-background-presentation-action-contstyle-hover active:text-content-presentation-action-light-primary",
-                "data-[state=on]:bg-background-presentation-action-contstyle-hover data-[state=on]:text-content-presentation-action-light-primary",
-            ],
-            BlueContStyle: [
-                "text-content-presentation-action-light-primary",
-                "border-transparent bg-transparent",
-                "hover:bg-background-presentation-action-contstyle-hover",
-                "hover:text-content-presentation-action-information-hover",
-                "focus:lg:border focus:lg:border-border-presentation-state-focus",
-                "focus:lg:bg-background-presentation-action-borderstyle",
-                "active:bg-background-presentation-action-contstyle-hover active:text-content-presentation-action-information-hover",
-                "data-[state=on]:bg-background-presentation-action-contstyle-hover data-[state=on]:text-content-presentation-action-information-hover",
-            ],
-            RedContStyle: [
-                "text-content-presentation-action-light-primary",
-                "border-transparent bg-transparent",
-                "hover:bg-background-presentation-action-contstyle-hover",
-                "hover:text-content-presentation-action-negative-hover",
-                "focus:lg:border focus:lg:border-border-presentation-state-focus",
-                "focus:lg:bg-background-presentation-action-borderstyle",
-                "active:bg-background-presentation-action-contstyle-hover active:text-content-presentation-action-negative-hover",
-                "data-[state=on]:bg-background-presentation-action-contstyle-hover data-[state=on]:text-content-presentation-action-negative-hover",
-            ],
-        },
-        size: {
-            S: "h-[22px] w-[22px]  typography-body-small-medium rounded-[4px] [&_i]:text-[12px]",
-            M: "h-[28px] w-[28px]  typography-body-large-medium rounded-[4px] [&_i]:text-[18px]",
-            L: "h-[34px] w-[34px]  typography-body-large-medium rounded-[6px] [&_i]:text-[20px]",
-            XL: "h-[40px] w-[40px]  typography-headers-medium-medium rounded-[6px] [&_i]:text-[22px]",
-        },
+      variant: {
+        // fucus styles for medium screens and above
+        PrimeStyle: [
+          "bg-background-presentation-action-secondary",
+          "text-content-presentation-action-light-primary",
+          "hover:bg-background-presentation-action-hover",
+          "hover:text-content-presentation-global-primary-inverse",
+          "focus:lg:focus:md:border lg:focus:md:border-border-presentation-state-focus", // Focus style only for medium screens and above
+          "active:bg-background-presentation-action-hover active:text-content-presentation-global-primary-inverse",
+          "data-[state=on]:bg-background-presentation-action-hover data-[state=on]:text-content-presentation-global-primary-inverse",
+        ],
+        BlueSecStyle: [
+          "bg-background-presentation-action-secondary",
+          "text-content-presentation-action-light-primary",
+          "hover:bg-background-presentation-state-information-primary",
+          "hover:text-content-presentation-global-primary-inverse",
+          "focus:lg:border focus:lg:border-border-presentation-state-focus",
+          "active:bg-background-presentation-state-information-primary active:text-content-presentation-global-primary-inverse",
+          "data-[state=on]:bg-background-presentation-state-information-primary data-[state=on]:text-content-presentation-global-primary-inverse",
+        ],
+        YelSecStyle: [
+          "bg-background-presentation-action-secondary",
+          "text-content-presentation-action-light-primary",
+          "hover:bg-background-presentation-state-warning-primary",
+          "hover:text-content-presentation-action-light-primary",
+          "focus:lg:border focus:lg:border-border-presentation-state-focus",
+          "active:bg-background-presentation-state-warning-primary active:text-content-presentation-action-light-primary",
+          "data-[state=on]:bg-background-presentation-state-warning-primary data-[state=on]:text-content-presentation-action-light-primary",
+        ],
+        RedSecStyle: [
+          "bg-background-presentation-action-secondary",
+          "text-content-presentation-action-light-primary",
+          "hover:bg-background-presentation-state-negative-primary",
+          "hover:text-content-presentation-global-primary-inverse",
+          "focus:lg:border focus:lg:border-border-presentation-state-focus",
+          "active:bg-background-presentation-state-negative-primary active:text-content-presentation-global-primary-inverse",
+          "data-[state=on]:bg-background-presentation-state-negative-primary data-[state=on]:text-content-presentation-global-primary-inverse",
+        ],
+        BorderStyle: [
+          "text-content-presentation-action-light-primary",
+          "border border-border-presentation-action-disabled",
+          "bg-background-presentation-action-borderstyle",
+          "hover:bg-background-presentation-action-hover",
+          "hover:text-content-presentation-global-primary-inverse",
+          "focus:lg:border focus:lg:border-border-presentation-state-focus",
+          "focus:lg:text-content-presentation-action-light-primary",
+          "focus:hover:lg:text-content-presentation-global-primary-inverse",
+          "active:bg-background-presentation-action-hover active:text-content-presentation-global-primary-inverse",
+          "data-[state=on]:bg-background-presentation-action-hover data-[state=on]:text-content-presentation-global-primary-inverse",
+        ],
+        PrimeContStyle: [
+          "text-content-presentation-action-light-primary",
+          "border-transparent bg-transparent",
+          "hover:bg-background-presentation-action-contstyle-hover",
+          "hover:text-content-presentation-action-light-primary",
+          "focus:lg:border focus:lg:border-border-presentation-state-focus",
+          "focus:lg:bg-background-presentation-action-borderstyle",
+          "active:bg-background-presentation-action-contstyle-hover active:text-content-presentation-action-light-primary",
+          "data-[state=on]:bg-background-presentation-action-contstyle-hover data-[state=on]:text-content-presentation-action-light-primary",
+        ],
+        BlueContStyle: [
+          "text-content-presentation-action-light-primary",
+          "border-transparent bg-transparent",
+          "hover:bg-background-presentation-action-contstyle-hover",
+          "hover:text-content-presentation-action-information-hover",
+          "focus:lg:border focus:lg:border-border-presentation-state-focus",
+          "focus:lg:bg-background-presentation-action-borderstyle",
+          "active:bg-background-presentation-action-contstyle-hover active:text-content-presentation-action-information-hover",
+          "data-[state=on]:bg-background-presentation-action-contstyle-hover data-[state=on]:text-content-presentation-action-information-hover",
+        ],
+        RedContStyle: [
+          "text-content-presentation-action-light-primary",
+          "border-transparent bg-transparent",
+          "hover:bg-background-presentation-action-contstyle-hover",
+          "hover:text-content-presentation-action-negative-hover",
+          "focus:lg:border focus:lg:border-border-presentation-state-focus",
+          "focus:lg:bg-background-presentation-action-borderstyle",
+          "active:bg-background-presentation-action-contstyle-hover active:text-content-presentation-action-negative-hover",
+          "data-[state=on]:bg-background-presentation-action-contstyle-hover data-[state=on]:text-content-presentation-action-negative-hover",
+        ],
+      },
+      size: {
+        S: "h-[22px] w-[22px]  typography-body-small-medium rounded-[4px] [&_i]:text-[12px]",
+        M: "h-[28px] w-[28px]  typography-body-large-medium rounded-[4px] [&_i]:text-[18px]",
+        L: "h-[34px] w-[34px]  typography-body-large-medium rounded-[6px] [&_i]:text-[20px]",
+        XL: "h-[40px] w-[40px]  typography-headers-medium-medium rounded-[6px] [&_i]:text-[22px]",
+      },
     },
     defaultVariants: {
-        size: "M",
-        variant: "PrimeStyle",
-    }
-}
+      size: "M",
+      variant: "PrimeStyle",
+    },
+  },
 );

package/apps/lib/components/ToggleButton.tsx

@@ -107,7 +107,7 @@ const toggleButtonStyles = cva(
         className: "w-[40px] px-0",
       },
     ],
-  }
+  },
 );
 
 // ============================================================================

package/apps/lib/components/Tooltip.tsx

@@ -2,15 +2,14 @@ import { cva, VariantProps } from "class-variance-authority";
 import { ReactNode } from "react";
 import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import React from "react";
 
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const TooltipProvider = TooltipPrimitive.Provider
+const ToolTipRoot = TooltipPrimitive.Root;
 
-const ToolTipRoot = TooltipPrimitive.Root
-
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -22,15 +21,15 @@ const TooltipContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
-        className
+        className,
       )}
       {...props}
     />
   </TooltipPrimitive.Portal>
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-const TooltipArrow = TooltipPrimitive.Arrow
+const TooltipArrow = TooltipPrimitive.Arrow;
 export type ToolTipSide = "top" | "right" | "bottom" | "left";
 
 export enum ContentAlign {
@@ -43,7 +42,7 @@ const tooltipStyles = cva("typography-body-medium-regular rounded-[4px] p-1", {
   variants: {
     variant: {
       primary: "bg-background-system-body-tertiary text-content-system-global-primary",
-      highlight: "bg-gradient-to-r from-wavy-navy-900 to-wavy-navy-800 text-white"
+      highlight: "bg-gradient-to-r from-wavy-navy-900 to-wavy-navy-800 text-white",
     },
   },
   defaultVariants: {
@@ -52,8 +51,7 @@ const tooltipStyles = cva("typography-body-medium-regular rounded-[4px] p-1", {
 });
 
 interface TooltipProps
-  extends React.HTMLAttributes<HTMLSpanElement>,
-  VariantProps<typeof tooltipStyles> {
+  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof tooltipStyles> {
   onOpenChange?: (open: boolean) => void;
   open?: boolean;
   toolTipSide?: ToolTipSide;
@@ -63,7 +61,7 @@ interface TooltipProps
   delay?: number;
   disabled?: boolean;
   text: ReactNode;
-  theme?: Themes
+  theme?: Themes;
 }
 
 const Tooltip: React.FC<TooltipProps> = ({
@@ -83,7 +81,11 @@ const Tooltip: React.FC<TooltipProps> = ({
 }) => {
   return (
     <TooltipProvider>
-      <ToolTipRoot delayDuration={delay} {...(typeof open !== "undefined" && { open })} {...(onOpenChange && { onOpenChange })}>
+      <ToolTipRoot
+        delayDuration={delay}
+        {...(typeof open !== "undefined" && { open })}
+        {...(onOpenChange && { onOpenChange })}
+      >
         <TooltipTrigger aria-label="Open tooltip" asChild>
           {children}
         </TooltipTrigger>
@@ -98,14 +100,17 @@ const Tooltip: React.FC<TooltipProps> = ({
           {...props}
         >
           {text}
-          {tip && <TooltipArrow className={cn("fill-background-system-body-tertiary", {
-            "fill-wavy-navy-900": variant === "highlight"
-          })} />}
+          {tip && (
+            <TooltipArrow
+              className={cn("fill-background-system-body-tertiary", {
+                "fill-wavy-navy-900": variant === "highlight",
+              })}
+            />
+          )}
         </TooltipContent>
       </ToolTipRoot>
     </TooltipProvider>
   );
 };
 
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipArrow, ToolTipRoot }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipArrow, ToolTipRoot };

package/apps/lib/components/TransparentLabel.tsx

@@ -3,70 +3,69 @@ 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",
-        }
-    }
+  "[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> { }
+interface Props
+  extends HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof TransparentLabelStyles> {}
 
 export const TransparentLabel = ({ size, className, ...props }: Props) => {
-    return (
-        <p {...props} className={cn(TransparentLabelStyles({ size }), className)}></p>
-    );
+  return <p {...props} className={cn(TransparentLabelStyles({ size }), className)}></p>;
 };