chore: format all files in monorepo (#3054)

* chore: format all files in the project * fix: removing @types/react from dependencies * fix: adding prettier and eslint config * chore: format files * fix: upgrading turbo version * chore: ignoring warnings and adding todos * fix: updated the type of bubble menu item in the document editor * chore: format files --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-12-10 15:48:10 +05:30 · 2023-12-10 15:48:10 +05:30 · 8d15b9e7de
commit 8d15b9e7de
parent 5eba682128
721 changed files with 3739 additions and 4660 deletions
--- a/packages/ui/src/avatar/avatar-group.tsx
+++ b/packages/ui/src/avatar/avatar-group.tsx
@ -57,22 +57,16 @@ export const AvatarGroup: React.FC<Props> = (props) => {
  return (
    <div className={`flex ${sizeInfo.spacing}`}>
      {avatarsWithUpdatedProps.map((avatar, index) => (
-        <div
-          key={index}
-          className="ring-1 ring-custom-background-100 rounded-full"
-        >
+        <div key={index} className="rounded-full ring-1 ring-custom-background-100">
          {avatar}
        </div>
      ))}
      {maxAvatarsToRender < totalAvatars && (
-        <Tooltip
-          tooltipContent={`${totalAvatars} total`}
-          disabled={!showTooltip}
-        >
+        <Tooltip tooltipContent={`${totalAvatars} total`} disabled={!showTooltip}>
          <div
            className={`${
              !isAValidNumber(size) ? sizeInfo.avatarSize : ""
-            } ring-1 ring-custom-background-100 bg-custom-primary-10 text-custom-primary-100 rounded-full grid place-items-center text-[9px]`}
+            } grid place-items-center rounded-full bg-custom-primary-10 text-[9px] text-custom-primary-100 ring-1 ring-custom-background-100`}
            style={
              isAValidNumber(size)
                ? {
--- a/packages/ui/src/avatar/avatar.tsx
+++ b/packages/ui/src/avatar/avatar.tsx
@ -109,9 +109,7 @@ export const getBorderRadius = (shape: "circle" | "square") => {
 * @param value The value to check
 * @returns Whether the value is a valid number or not
 */
-export const isAValidNumber = (value: any) => {
-  return typeof value === "number" && !isNaN(value);
-};
+export const isAValidNumber = (value: any) => typeof value === "number" && !isNaN(value);

 export const Avatar: React.FC<Props> = (props) => {
  const {
@ -130,14 +128,11 @@ export const Avatar: React.FC<Props> = (props) => {
  const sizeInfo = getSizeInfo(size);

  return (
-    <Tooltip
-      tooltipContent={fallbackText ?? name ?? "?"}
-      disabled={!showTooltip}
-    >
+    <Tooltip tooltipContent={fallbackText ?? name ?? "?"} disabled={!showTooltip}>
      <div
        className={`${
          !isAValidNumber(size) ? sizeInfo.avatarSize : ""
-        } overflow-hidden grid place-items-center ${getBorderRadius(shape)}`}
+        } grid place-items-center overflow-hidden ${getBorderRadius(shape)}`}
        style={
          isAValidNumber(size)
            ? {
@ -148,21 +143,14 @@ export const Avatar: React.FC<Props> = (props) => {
        }
      >
        {src ? (
-          <img
-            src={src}
-            className={`h-full w-full ${getBorderRadius(shape)} ${className}`}
-            alt={name}
-          />
+          <img src={src} className={`h-full w-full ${getBorderRadius(shape)} ${className}`} alt={name} />
        ) : (
          <div
-            className={`${
-              sizeInfo.fontSize
-            } grid place-items-center h-full w-full ${getBorderRadius(
-              shape,
+            className={`${sizeInfo.fontSize} grid h-full w-full place-items-center ${getBorderRadius(
+              shape
            )} ${className}`}
            style={{
-              backgroundColor:
-                fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
+              backgroundColor: fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
              color: fallbackTextColor ?? "#ffffff",
            }}
          >
--- a/packages/ui/src/badge/badge.tsx
+++ b/packages/ui/src/badge/badge.tsx
@ -1,14 +1,8 @@
 import * as React from "react";

-import {
-  getIconStyling,
-  getBadgeStyling,
-  TBadgeVariant,
-  TBadgeSizes,
-} from "./helper";
+import { getIconStyling, getBadgeStyling, TBadgeVariant, TBadgeSizes } from "./helper";

-export interface BadgeProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface BadgeProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: TBadgeVariant;
  size?: TBadgeSizes;
  className?: string;
@ -37,24 +31,10 @@ const Badge = React.forwardRef<HTMLButtonElement, BadgeProps>((props, ref) => {
  const buttonIconStyle = getIconStyling(size);

  return (
-    <button
-      ref={ref}
-      type={type}
-      className={`${buttonStyle} ${className}`}
-      disabled={disabled || loading}
-      {...rest}
-    >
-      {prependIcon && (
-        <div className={buttonIconStyle}>
-          {React.cloneElement(prependIcon, { strokeWidth: 2 })}
-        </div>
-      )}
+    <button ref={ref} type={type} className={`${buttonStyle} ${className}`} disabled={disabled || loading} {...rest}>
+      {prependIcon && <div className={buttonIconStyle}>{React.cloneElement(prependIcon, { strokeWidth: 2 })}</div>}
      {children}
-      {appendIcon && (
-        <div className={buttonIconStyle}>
-          {React.cloneElement(appendIcon, { strokeWidth: 2 })}
-        </div>
-      )}
+      {appendIcon && <div className={buttonIconStyle}>{React.cloneElement(appendIcon, { strokeWidth: 2 })}</div>}
    </button>
  );
 });
--- a/packages/ui/src/badge/helper.tsx
+++ b/packages/ui/src/badge/helper.tsx
@ -121,17 +121,11 @@ export const badgeStyling: IBadgeStyling = {
  },
 };

-export const getBadgeStyling = (
-  variant: TBadgeVariant,
-  size: TBadgeSizes,
-  disabled: boolean = false
-): string => {
+export const getBadgeStyling = (variant: TBadgeVariant, size: TBadgeSizes, disabled: boolean = false): string => {
  let _variant: string = ``;
  const currentVariant = badgeStyling[variant];

-  _variant = `${currentVariant.default} ${
-    disabled ? currentVariant.disabled : currentVariant.hover
-  }`;
+  _variant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover}`;

  let _size: string = ``;
  if (size) _size = badgeSizeStyling[size];
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@ -12,13 +12,10 @@ type BreadcrumbsProps = {
 const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
  <div className="flex items-center space-x-2">
    {React.Children.map(children, (child, index) => (
-      <div key={index} className="flex items-center flex-wrap gap-2.5">
+      <div key={index} className="flex flex-wrap items-center gap-2.5">
        {child}
        {index !== React.Children.count(children) - 1 && (
-          <ChevronRight
-            className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400"
-            aria-hidden="true"
-          />
+          <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
        )}
      </div>
    ))}
@ -41,31 +38,21 @@ const BreadcrumbItem: React.FC<Props> = (props) => {
      ) : (
        <Tooltip tooltipContent={label} position="bottom">
          <li className="flex items-center space-x-2">
-            <div className="flex items-center flex-wrap gap-2.5">
+            <div className="flex flex-wrap items-center gap-2.5">
              {link ? (
                <a
                  className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
                  href={link}
                >
                  {icon && (
-                    <div className="overflow-hidden w-5 h-5 flex justify-center items-center !text-[1rem]">
-                      {icon}
-                    </div>
+                    <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
                  )}
-                  <div className="relative block overflow-hidden truncate line-clamp-1 max-w-[150px]">
-                    {label}
-                  </div>
+                  <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
                </a>
              ) : (
-                <div className="flex items-center gap-1 text-sm font-medium text-custom-text-100 cursor-default">
-                  {icon && (
-                    <div className="overflow-hidden w-5 h-5 flex justify-center items-center">
-                      {icon}
-                    </div>
-                  )}
-                  <div className="relative block overflow-hidden truncate line-clamp-1 max-w-[150px]">
-                    {label}
-                  </div>
+                <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
+                  {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
+                  <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
                </div>
              )}
            </div>
--- a/packages/ui/src/button/button.tsx
+++ b/packages/ui/src/button/button.tsx
@ -1,14 +1,8 @@
 import * as React from "react";

-import {
-  getIconStyling,
-  getButtonStyling,
-  TButtonVariant,
-  TButtonSizes,
-} from "./helper";
+import { getIconStyling, getButtonStyling, TButtonVariant, TButtonSizes } from "./helper";

-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: TButtonVariant;
  size?: TButtonSizes;
  className?: string;
@ -19,47 +13,31 @@ export interface ButtonProps
  children: React.ReactNode;
 }

-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const {
-      variant = "primary",
-      size = "md",
-      className = "",
-      type = "button",
-      loading = false,
-      disabled = false,
-      prependIcon = null,
-      appendIcon = null,
-      children,
-      ...rest
-    } = props;
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const {
+    variant = "primary",
+    size = "md",
+    className = "",
+    type = "button",
+    loading = false,
+    disabled = false,
+    prependIcon = null,
+    appendIcon = null,
+    children,
+    ...rest
+  } = props;

-    const buttonStyle = getButtonStyling(variant, size, disabled || loading);
-    const buttonIconStyle = getIconStyling(size);
+  const buttonStyle = getButtonStyling(variant, size, disabled || loading);
+  const buttonIconStyle = getIconStyling(size);

-    return (
-      <button
-        ref={ref}
-        type={type}
-        className={`${buttonStyle} ${className}`}
-        disabled={disabled || loading}
-        {...rest}
-      >
-        {prependIcon && (
-          <div className={buttonIconStyle}>
-            {React.cloneElement(prependIcon, { strokeWidth: 2 })}
-          </div>
-        )}
-        {children}
-        {appendIcon && (
-          <div className={buttonIconStyle}>
-            {React.cloneElement(appendIcon, { strokeWidth: 2 })}
-          </div>
-        )}
-      </button>
-    );
-  },
-);
+  return (
+    <button ref={ref} type={type} className={`${buttonStyle} ${className}`} disabled={disabled || loading} {...rest}>
+      {prependIcon && <div className={buttonIconStyle}>{React.cloneElement(prependIcon, { strokeWidth: 2 })}</div>}
+      {children}
+      {appendIcon && <div className={buttonIconStyle}>{React.cloneElement(appendIcon, { strokeWidth: 2 })}</div>}
+    </button>
+  );
+});

 Button.displayName = "plane-ui-button";

--- a/packages/ui/src/button/helper.tsx
+++ b/packages/ui/src/button/helper.tsx
@ -99,17 +99,13 @@ export const buttonStyling: IButtonStyling = {
  },
 };

-export const getButtonStyling = (
-  variant: TButtonVariant,
-  size: TButtonSizes,
-  disabled: boolean = false,
-): string => {
+export const getButtonStyling = (variant: TButtonVariant, size: TButtonSizes, disabled: boolean = false): string => {
  let _variant: string = ``;
  const currentVariant = buttonStyling[variant];

-  _variant = `${currentVariant.default} ${
-    disabled ? currentVariant.disabled : currentVariant.hover
-  } ${currentVariant.pressed}`;
+  _variant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover} ${
+    currentVariant.pressed
+  }`;

  let _size: string = ``;
  if (size) _size = buttonSizeStyling[size];
--- a/packages/ui/src/button/toggle-switch.tsx
+++ b/packages/ui/src/button/toggle-switch.tsx
@ -19,7 +19,7 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
      checked={value}
      disabled={disabled}
      onChange={onChange}
-      className={`relative flex-shrink-0 inline-flex ${
+      className={`relative inline-flex flex-shrink-0 ${
        size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
      } flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
        value ? "bg-custom-primary-100" : "bg-gray-700"
@ -28,15 +28,11 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
      <span className="sr-only">{label}</span>
      <span
        aria-hidden="true"
-        className={`self-center inline-block ${
+        className={`inline-block self-center ${
          size === "sm" ? "h-2 w-2" : size === "md" ? "h-3 w-3" : "h-4 w-4"
        } transform rounded-full shadow ring-0 transition duration-200 ease-in-out ${
          value
-            ? (size === "sm"
-                ? "translate-x-3"
-                : size === "md"
-                ? "translate-x-4"
-                : "translate-x-5") + " bg-white"
+            ? (size === "sm" ? "translate-x-3" : size === "md" ? "translate-x-4" : "translate-x-5") + " bg-white"
            : "translate-x-0.5 bg-custom-background-90"
        } ${disabled ? "cursor-not-allowed" : ""}`}
      />
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@ -29,10 +29,8 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
    menuButtonOnClick,
  } = props;

-  const [referenceElement, setReferenceElement] =
-    React.useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] =
-    React.useState<HTMLDivElement | null>(null);
+  const [referenceElement, setReferenceElement] = React.useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);

  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    placement: placement ?? "auto",
@ -61,17 +59,11 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                    type="button"
                    onClick={menuButtonOnClick}
                    disabled={disabled}
-                    className={`relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none ${
-                      disabled
-                        ? "cursor-not-allowed"
-                        : "cursor-pointer hover:bg-custom-background-80"
+                    className={`relative grid place-items-center rounded p-1 text-custom-text-200 outline-none hover:text-custom-text-100 ${
+                      disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
                    } ${buttonClassName}`}
                  >
-                    <MoreHorizontal
-                      className={`h-3.5 w-3.5 ${
-                        verticalEllipsis ? "rotate-90" : ""
-                      }`}
-                    />
+                    <MoreHorizontal className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
                  </button>
                </Menu.Button>
              ) : (
@ -79,15 +71,9 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                  <button
                    ref={setReferenceElement}
                    type="button"
-                    className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-xs whitespace-nowrap duration-300 ${
-                      open
-                        ? "bg-custom-background-90 text-custom-text-100"
-                        : "text-custom-text-200"
-                    } ${
-                      noBorder
-                        ? ""
-                        : "border border-custom-border-300 shadow-sm focus:outline-none"
-                    } ${
+                    className={`flex items-center justify-between gap-1 whitespace-nowrap rounded-md px-2.5 py-1 text-xs duration-300 ${
+                      open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
+                    } ${noBorder ? "" : "border border-custom-border-300 shadow-sm focus:outline-none"} ${
                      disabled
                        ? "cursor-not-allowed text-custom-text-200"
                        : "cursor-pointer hover:bg-custom-background-80"
@ -102,19 +88,17 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
          )}
          <Menu.Items className="fixed z-10">
            <div
-              className={`overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 p-1 text-xs shadow-custom-shadow-rg focus:outline-none bg-custom-background-90 my-1 ${
+              className={`my-1 overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 p-1 text-xs shadow-custom-shadow-rg focus:outline-none ${
                maxHeight === "lg"
                  ? "max-h-60"
                  : maxHeight === "md"
-                  ? "max-h-48"
-                  : maxHeight === "rg"
-                  ? "max-h-36"
-                  : maxHeight === "sm"
-                  ? "max-h-28"
-                  : ""
-              } ${
-                width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
-              } ${optionsClassName}`}
+                    ? "max-h-48"
+                    : maxHeight === "rg"
+                      ? "max-h-36"
+                      : maxHeight === "sm"
+                        ? "max-h-28"
+                        : ""
+              } ${width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width} ${optionsClassName}`}
              ref={setPopperElement}
              style={styles.popper}
              {...attributes.popper}
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@ -32,22 +32,15 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
  } = props;
  const [query, setQuery] = useState("");

-  const [referenceElement, setReferenceElement] =
-    useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
-    null,
-  );
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);

  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    placement: placement ?? "bottom-start",
  });

  const filteredOptions =
-    query === ""
-      ? options
-      : options?.filter((option) =>
-          option.query.toLowerCase().includes(query.toLowerCase()),
-        );
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));

  const comboboxProps: any = {
    value,
@ -58,11 +51,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
  if (multiple) comboboxProps.multiple = true;

  return (
-    <Combobox
-      as="div"
-      className={`relative flex-shrink-0 text-left ${className}`}
-      {...comboboxProps}
-    >
+    <Combobox as="div" className={`relative flex-shrink-0 text-left ${className}`} {...comboboxProps}>
      {({ open }: { open: boolean }) => {
        if (open && onOpen) onOpen();

@ -73,7 +62,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                <button
                  ref={setReferenceElement}
                  type="button"
-                  className={`flex items-center justify-between gap-1 w-full text-xs ${
+                  className={`flex w-full items-center justify-between gap-1 text-xs ${
                    disabled
                      ? "cursor-not-allowed text-custom-text-200"
                      : "cursor-pointer hover:bg-custom-background-80"
@ -87,7 +76,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                <button
                  ref={setReferenceElement}
                  type="button"
-                  className={`flex items-center justify-between gap-1 w-full rounded border-[0.5px] border-custom-border-300 ${
+                  className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 ${
                    input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
                  } ${
                    disabled
@ -96,15 +85,13 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                  } ${buttonClassName}`}
                >
                  {label}
-                  {!noChevron && !disabled && (
-                    <ChevronDown className="h-3 w-3" aria-hidden="true" />
-                  )}
+                  {!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
                </button>
              </Combobox.Button>
            )}
            <Combobox.Options as={React.Fragment}>
              <div
-                className={`z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
+                className={`z-10 my-1 min-w-[10rem] rounded-md border border-custom-border-300 bg-custom-background-90 p-2 text-xs shadow-custom-shadow-rg focus:outline-none ${
                  width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
                } ${optionsClassName}`}
                ref={setPopperElement}
@ -114,7 +101,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
                  <Search className="h-3 w-3 text-custom-text-200" />
                  <Combobox.Input
-                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                    className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    placeholder="Type to search..."
@ -126,12 +113,12 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                    maxHeight === "lg"
                      ? "max-h-60"
                      : maxHeight === "md"
-                      ? "max-h-48"
-                      : maxHeight === "rg"
-                      ? "max-h-36"
-                      : maxHeight === "sm"
-                      ? "max-h-28"
-                      : ""
+                        ? "max-h-48"
+                        : maxHeight === "rg"
+                          ? "max-h-36"
+                          : maxHeight === "sm"
+                            ? "max-h-28"
+                            : ""
                  } overflow-y-scroll`}
                >
                  {filteredOptions ? (
@ -141,15 +128,9 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                          key={option.value}
                          value={option.value}
                          className={({ active, selected }) =>
-                            `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                              active || selected
-                                ? "bg-custom-background-80"
-                                : ""
-                            } ${
-                              selected
-                                ? "text-custom-text-100"
-                                : "text-custom-text-200"
-                            }`
+                            `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
+                              active || selected ? "bg-custom-background-80" : ""
+                            } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                          }
                        >
                          {({ active, selected }) => (
@ -158,23 +139,13 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                              {multiple ? (
                                <div
                                  className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
-                                    active || selected
-                                      ? "opacity-100"
-                                      : "opacity-0"
+                                    active || selected ? "opacity-100" : "opacity-0"
                                  }`}
                                >
-                                  <Check
-                                    className={`h-3 w-3 ${
-                                      selected ? "opacity-100" : "opacity-0"
-                                    }`}
-                                  />
+                                  <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                                </div>
                              ) : (
-                                <Check
-                                  className={`h-3 w-3 ${
-                                    selected ? "opacity-100" : "opacity-0"
-                                  }`}
-                                />
+                                <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                              )}
                            </>
                          )}
@ -182,15 +153,11 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                      ))
                    ) : (
                      <span className="flex items-center gap-2 p-1">
-                        <p className="text-left text-custom-text-200 ">
-                          No matching results
-                        </p>
+                        <p className="text-left text-custom-text-200 ">No matching results</p>
                      </span>
                    )
                  ) : (
-                    <p className="text-center text-custom-text-200">
-                      Loading...
-                    </p>
+                    <p className="text-center text-custom-text-200">Loading...</p>
                  )}
                </div>
                {footerOption}
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@ -27,11 +27,8 @@ const CustomSelect = (props: ICustomSelectProps) => {
    value,
    width = "auto",
  } = props;
-  const [referenceElement, setReferenceElement] =
-    useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
-    null,
-  );
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);

  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    placement: placement ?? "bottom-start",
@ -52,9 +49,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
              ref={setReferenceElement}
              type="button"
              className={`flex items-center justify-between gap-1 text-xs ${
-                disabled
-                  ? "cursor-not-allowed text-custom-text-200"
-                  : "cursor-pointer hover:bg-custom-background-80"
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
              } ${customButtonClassName}`}
            >
              {customButton}
@ -65,37 +60,31 @@ const CustomSelect = (props: ICustomSelectProps) => {
            <button
              ref={setReferenceElement}
              type="button"
-              className={`flex items-center justify-between gap-1 w-full rounded border-[0.5px] border-custom-border-300 ${
+              className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 ${
                input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
              } ${
-                disabled
-                  ? "cursor-not-allowed text-custom-text-200"
-                  : "cursor-pointer hover:bg-custom-background-80"
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
              } ${buttonClassName}`}
            >
              {label}
-              {!noChevron && !disabled && (
-                <ChevronDown className="h-3 w-3" aria-hidden="true" />
-              )}
+              {!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
            </button>
          </Listbox.Button>
        )}
      </>
      <Listbox.Options>
        <div
-          className={`z-10 border border-custom-border-300 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
+          className={`z-10 my-1 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none ${
            maxHeight === "lg"
              ? "max-h-60"
              : maxHeight === "md"
-              ? "max-h-48"
-              : maxHeight === "rg"
-              ? "max-h-36"
-              : maxHeight === "sm"
-              ? "max-h-28"
-              : ""
-          } ${
-            width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
-          } ${optionsClassName}`}
+                ? "max-h-48"
+                : maxHeight === "rg"
+                  ? "max-h-36"
+                  : maxHeight === "sm"
+                    ? "max-h-28"
+                    : ""
+          } ${width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width} ${optionsClassName}`}
          ref={setPopperElement}
          style={styles.popper}
          {...attributes.popper}
@ -115,9 +104,7 @@ const Option = (props: ICustomSelectItemProps) => {
      className={({ active, selected }) =>
        `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
          active || selected ? "bg-custom-background-80" : ""
-        } ${
-          selected ? "text-custom-text-100" : "text-custom-text-200"
-        } ${className}`
+        } ${selected ? "text-custom-text-100" : "text-custom-text-200"} ${className}`
      }
    >
      {({ selected }) => (
--- a/packages/ui/src/form-fields/input-color-picker.tsx
+++ b/packages/ui/src/form-fields/input-color-picker.tsx
@ -17,13 +17,10 @@ export interface InputColorPickerProps {
 }

 export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
-  const { value, hasError, onChange, name, className, style, placeholder } =
-    props;
+  const { value, hasError, onChange, name, className, style, placeholder } = props;

-  const [referenceElement, setReferenceElement] =
-    React.useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] =
-    React.useState<HTMLDivElement | null>(null);
+  const [referenceElement, setReferenceElement] = React.useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);

  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    placement: "auto",
@ -52,10 +49,7 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
        style={style}
      />

-      <Popover
-        as="div"
-        className="absolute top-1/2 -translate-y-1/2 right-1 z-10"
-      >
+      <Popover as="div" className="absolute right-1 top-1/2 z-10 -translate-y-1/2">
        {({ open }) => {
          if (open) {
          }
--- a/packages/ui/src/form-fields/input.tsx
+++ b/packages/ui/src/form-fields/input.tsx
@ -1,7 +1,6 @@
 import * as React from "react";

-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  mode?: "primary" | "transparent" | "true-transparent";
  inputSize?: "sm" | "md";
  hasError?: boolean;
@ -9,16 +8,7 @@ export interface InputProps
 }

 const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  const {
-    id,
-    type,
-    name,
-    mode = "primary",
-    inputSize = "sm",
-    hasError = false,
-    className = "",
-    ...rest
-  } = props;
+  const { id, type, name, mode = "primary", inputSize = "sm", hasError = false, className = "", ...rest } = props;

  return (
    <input
@ -26,17 +16,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
      ref={ref}
      type={type}
      name={name}
-      className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
+      className={`block rounded-md bg-transparent text-sm placeholder-custom-text-400 focus:outline-none ${
        mode === "primary"
          ? "rounded-md border-[0.5px] border-custom-border-200"
          : mode === "transparent"
-          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
-          : mode === "true-transparent"
-          ? "rounded border-none bg-transparent ring-0"
-          : ""
-      } ${hasError ? "border-red-500" : ""} ${
-        hasError && mode === "primary" ? "bg-red-500/20" : ""
-      } ${
+            ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
+            : mode === "true-transparent"
+              ? "rounded border-none bg-transparent ring-0"
+              : ""
+      } ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-500/20" : ""} ${
        inputSize === "sm" ? "px-3 py-2" : inputSize === "md" ? "p-3" : ""
      } ${className}`}
      {...rest}
--- a/packages/ui/src/form-fields/textarea.tsx
+++ b/packages/ui/src/form-fields/textarea.tsx
@ -1,17 +1,13 @@
 import * as React from "react";

-export interface TextAreaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  mode?: "primary" | "transparent";
  hasError?: boolean;
  className?: string;
 }

 // Updates the height of a <textarea> when the value changes.
-const useAutoSizeTextArea = (
-  textAreaRef: HTMLTextAreaElement | null,
-  value: any,
-) => {
+const useAutoSizeTextArea = (textAreaRef: HTMLTextAreaElement | null, value: any) => {
  React.useEffect(() => {
    if (textAreaRef) {
      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
@ -25,45 +21,43 @@ const useAutoSizeTextArea = (
  }, [textAreaRef, value]);
 };

-const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  (props, ref) => {
-    const {
-      id,
-      name,
-      value = "",
-      rows = 1,
-      cols = 1,
-      mode = "primary",
-      hasError = false,
-      className = "",
-      ...rest
-    } = props;
+const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {
+  const {
+    id,
+    name,
+    value = "",
+    rows = 1,
+    cols = 1,
+    mode = "primary",
+    hasError = false,
+    className = "",
+    ...rest
+  } = props;

-    const textAreaRef = React.useRef<any>(ref);
+  const textAreaRef = React.useRef<any>(ref);

-    ref && useAutoSizeTextArea(textAreaRef?.current, value);
+  useAutoSizeTextArea(textAreaRef?.current, value);

-    return (
-      <textarea
-        id={id}
-        name={name}
-        ref={textAreaRef}
-        value={value}
-        rows={rows}
-        cols={cols}
-        className={`no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${
-          mode === "primary"
-            ? "rounded-md border-[0.5px] border-custom-border-200"
-            : mode === "transparent"
-            ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
+  return (
+    <textarea
+      id={id}
+      name={name}
+      ref={textAreaRef}
+      value={value}
+      rows={rows}
+      cols={cols}
+      className={`no-scrollbar w-full bg-transparent px-3 py-2 placeholder-custom-text-400 outline-none ${
+        mode === "primary"
+          ? "rounded-md border-[0.5px] border-custom-border-200"
+          : mode === "transparent"
+            ? "focus:ring-theme rounded border-none bg-transparent ring-0 transition-all focus:ring-1"
            : ""
-        } ${hasError ? "border-red-500" : ""} ${
-          hasError && mode === "primary" ? "bg-red-100" : ""
-        } ${className}`}
-        {...rest}
-      />
-    );
-  },
-);
+      } ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-100" : ""} ${className}`}
+      {...rest}
+    />
+  );
+});
+
+TextArea.displayName = "TextArea";

 export { TextArea };
--- a/packages/ui/src/icons/admin-profile-icon.tsx
+++ b/packages/ui/src/icons/admin-profile-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const AdminProfileIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const AdminProfileIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
@ -14,11 +11,7 @@ export const AdminProfileIcon: React.FC<ISvgIcons> = ({
    xmlns="http://www.w3.org/2000/svg"
    {...rest}
  >
-    <path
-      d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
+    <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" strokeLinecap="round" strokeLinejoin="round" />
    <path
      d="M8 19V18C8 16.9391 8.42143 15.9217 9.17157 15.1716C9.92172 14.4214 10.9391 14 12 14C13.0609 14 14.0783 14.4214 14.8284 15.1716C15.5786 15.9217 16 16.9391 16 18V19"
      strokeLinecap="round"
--- a/packages/ui/src/icons/archive-icon.tsx
+++ b/packages/ui/src/icons/archive-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const ArchiveIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const ArchiveIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
--- a/packages/ui/src/icons/blocked-icon.tsx
+++ b/packages/ui/src/icons/blocked-icon.tsx
@ -2,12 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const BlockedIcon: React.FC<ISvgIcons> = ({
-  height = "24",
-  width = "24",
-  className = "",
-  ...rest
-}) => (
+export const BlockedIcon: React.FC<ISvgIcons> = ({ height = "24", width = "24", className = "", ...rest }) => (
  <svg
    height={height}
    width={width}
--- a/packages/ui/src/icons/blocker-icon.tsx
+++ b/packages/ui/src/icons/blocker-icon.tsx
@ -2,12 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const BlockerIcon: React.FC<ISvgIcons> = ({
-  height = "24",
-  width = "24",
-  className = "",
-  ...rest
-}) => (
+export const BlockerIcon: React.FC<ISvgIcons> = ({ height = "24", width = "24", className = "", ...rest }) => (
  <svg
    height={height}
    width={width}
--- a/packages/ui/src/icons/calendar-after-icon.tsx
+++ b/packages/ui/src/icons/calendar-after-icon.tsx
@ -2,17 +2,8 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const CalendarAfterIcon: React.FC<ISvgIcons> = ({
-  className = "fill-current",
-  ...rest
-}) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} `}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
+export const CalendarAfterIcon: React.FC<ISvgIcons> = ({ className = "fill-current", ...rest }) => (
+  <svg viewBox="0 0 24 24" className={`${className} `} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
    <g clipPath="url(#clip0_3309_70901)">
      <path
        d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
@ -21,12 +12,7 @@ export const CalendarAfterIcon: React.FC<ISvgIcons> = ({
    </g>
    <defs>
      <clipPath id="clip0_3309_70901">
-        <rect
-          width="18"
-          height="18"
-          fill="white"
-          transform="translate(0 0.5)"
-        />
+        <rect width="18" height="18" fill="white" transform="translate(0 0.5)" />
      </clipPath>
    </defs>
  </svg>
--- a/packages/ui/src/icons/calendar-before-icon.tsx
+++ b/packages/ui/src/icons/calendar-before-icon.tsx
@ -2,17 +2,8 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const CalendarBeforeIcon: React.FC<ISvgIcons> = ({
-  className = "fill-current",
-  ...rest
-}) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} `}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
+export const CalendarBeforeIcon: React.FC<ISvgIcons> = ({ className = "fill-current", ...rest }) => (
+  <svg viewBox="0 0 24 24" className={`${className} `} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
    <g clipPath="url(#clip0_3309_70907)">
      <path
        d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
--- a/packages/ui/src/icons/center-panel-icon.tsx
+++ b/packages/ui/src/icons/center-panel-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const CenterPanelIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const CenterPanelIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
--- a/packages/ui/src/icons/copy-icon.tsx
+++ b/packages/ui/src/icons/copy-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const CopyIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const CopyIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
--- a/packages/ui/src/icons/create-icon.tsx
+++ b/packages/ui/src/icons/create-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const CreateIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const CreateIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
--- a/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx
+++ b/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx
@ -2,24 +2,9 @@ import * as React from "react";

 import { ISvgIcons } from "../type";

-export const CircleDotFullIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
-  <svg
-    viewBox="0 0 16 16"
-    className={`${className} stroke-1`}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <circle
-      cx="8.33333"
-      cy="8.33333"
-      r="5.33333"
-      stroke="currentColor"
-      stroke-linecap="round"
-    />
+export const CircleDotFullIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
+  <svg viewBox="0 0 16 16" className={`${className} stroke-1`} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+    <circle cx="8.33333" cy="8.33333" r="5.33333" stroke="currentColor" stroke-linecap="round" />
    <circle cx="8.33333" cy="8.33333" r="4.33333" fill="currentColor" />
  </svg>
 );
--- a/packages/ui/src/icons/cycle/contrast-icon.tsx
+++ b/packages/ui/src/icons/cycle/contrast-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "../type";

-export const ContrastIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const ContrastIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
--- a/packages/ui/src/icons/cycle/double-circle-icon.tsx
+++ b/packages/ui/src/icons/cycle/double-circle-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "../type";

-export const DoubleCircleIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const DoubleCircleIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
--- a/packages/ui/src/icons/dice-icon.tsx
+++ b/packages/ui/src/icons/dice-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const DiceIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const DiceIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
--- a/packages/ui/src/icons/discord-icon.tsx
+++ b/packages/ui/src/icons/discord-icon.tsx
@ -2,12 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const DiscordIcon: React.FC<ISvgIcons> = ({
-  width = "24",
-  height = "24",
-  className,
-  color,
-}) => (
+export const DiscordIcon: React.FC<ISvgIcons> = ({ width = "24", height = "24", className, color }) => (
  <svg
    width={width}
    height={height}
--- a/packages/ui/src/icons/external-link-icon.tsx
+++ b/packages/ui/src/icons/external-link-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const ExternalLinkIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const ExternalLinkIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-[1.5]`}
--- a/packages/ui/src/icons/full-screen-panel-icon.tsx
+++ b/packages/ui/src/icons/full-screen-panel-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const FullScreenPanelIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const FullScreenPanelIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
--- a/packages/ui/src/icons/github-icon.tsx
+++ b/packages/ui/src/icons/github-icon.tsx
@ -2,12 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const GithubIcon: React.FC<ISvgIcons> = ({
-  width = "24",
-  height = "24",
-  className,
-  color,
-}) => (
+export const GithubIcon: React.FC<ISvgIcons> = ({ width = "24", height = "24", className, color }) => (
  <svg
    width={width}
    height={height}
--- a/packages/ui/src/icons/layer-stack.tsx
+++ b/packages/ui/src/icons/layer-stack.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const LayerStackIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const LayerStackIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
--- a/packages/ui/src/icons/layers-icon.tsx
+++ b/packages/ui/src/icons/layers-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const LayersIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const LayersIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
@ -33,12 +30,7 @@ export const LayersIcon: React.FC<ISvgIcons> = ({
    </g>
    <defs>
      <clipPath id="clip0_7258_81938">
-        <rect
-          width="24"
-          height="24"
-          fill="white"
-          transform="translate(24) rotate(90)"
-        />
+        <rect width="24" height="24" fill="white" transform="translate(24) rotate(90)" />
      </clipPath>
    </defs>
  </svg>
--- a/packages/ui/src/icons/module/cancelled.tsx
+++ b/packages/ui/src/icons/module/cancelled.tsx
@ -2,11 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "../type";

-export const ModuleCancelledIcon: React.FC<ISvgIcons> = ({
-  width = "20",
-  height = "20",
-  className,
-}) => (
+export const ModuleCancelledIcon: React.FC<ISvgIcons> = ({ width = "20", height = "20", className }) => (
  <svg
    width={width}
    height={height}
--- a/packages/ui/src/icons/module/completed.tsx
+++ b/packages/ui/src/icons/module/completed.tsx
@ -2,11 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "../type";

-export const ModuleCompletedIcon: React.FC<ISvgIcons> = ({
-  width = "20",
-  height = "20",
-  className,
-}) => (
+export const ModuleCompletedIcon: React.FC<ISvgIcons> = ({ width = "20", height = "20", className }) => (
  <svg
    width={width}
    height={height}
--- a/packages/ui/src/icons/module/module-status-icon.tsx
+++ b/packages/ui/src/icons/module/module-status-icon.tsx
@ -7,13 +7,7 @@ import { ModuleInProgressIcon } from "./in-progress";
 import { ModulePausedIcon } from "./paused";
 import { ModulePlannedIcon } from "./planned";

-export type TModuleStatus =
-  | "backlog"
-  | "planned"
-  | "in-progress"
-  | "paused"
-  | "completed"
-  | "cancelled";
+export type TModuleStatus = "backlog" | "planned" | "in-progress" | "paused" | "completed" | "cancelled";

 type Props = {
  status: TModuleStatus;
@ -22,46 +16,12 @@ type Props = {
  width?: string;
 };

-export const ModuleStatusIcon: React.FC<Props> = ({
-  status,
-  className,
-  height = "12px",
-  width = "12px",
-}) => {
-  if (status === "backlog")
-    return (
-      <ModuleBacklogIcon className={className} height={height} width={width} />
-    );
-  else if (status === "cancelled")
-    return (
-      <ModuleCancelledIcon
-        className={className}
-        height={height}
-        width={width}
-      />
-    );
-  else if (status === "completed")
-    return (
-      <ModuleCompletedIcon
-        className={className}
-        height={height}
-        width={width}
-      />
-    );
+export const ModuleStatusIcon: React.FC<Props> = ({ status, className, height = "12px", width = "12px" }) => {
+  if (status === "backlog") return <ModuleBacklogIcon className={className} height={height} width={width} />;
+  else if (status === "cancelled") return <ModuleCancelledIcon className={className} height={height} width={width} />;
+  else if (status === "completed") return <ModuleCompletedIcon className={className} height={height} width={width} />;
  else if (status === "in-progress")
-    return (
-      <ModuleInProgressIcon
-        className={className}
-        height={height}
-        width={width}
-      />
-    );
-  else if (status === "paused")
-    return (
-      <ModulePausedIcon className={className} height={height} width={width} />
-    );
-  else
-    return (
-      <ModulePlannedIcon className={className} height={height} width={width} />
-    );
+    return <ModuleInProgressIcon className={className} height={height} width={width} />;
+  else if (status === "paused") return <ModulePausedIcon className={className} height={height} width={width} />;
+  else return <ModulePlannedIcon className={className} height={height} width={width} />;
 };
--- a/packages/ui/src/icons/module/paused.tsx
+++ b/packages/ui/src/icons/module/paused.tsx
@ -2,11 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "../type";

-export const ModulePausedIcon: React.FC<ISvgIcons> = ({
-  width = "20",
-  height = "20",
-  className,
-}) => (
+export const ModulePausedIcon: React.FC<ISvgIcons> = ({ width = "20", height = "20", className }) => (
  <svg
    width={width}
    height={height}
--- a/packages/ui/src/icons/module/planned.tsx
+++ b/packages/ui/src/icons/module/planned.tsx
@ -2,11 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "../type";

-export const ModulePlannedIcon: React.FC<ISvgIcons> = ({
-  width = "20",
-  height = "20",
-  className,
-}) => (
+export const ModulePlannedIcon: React.FC<ISvgIcons> = ({ width = "20", height = "20", className }) => (
  <svg
    width={width}
    height={height}
--- a/packages/ui/src/icons/photo-filter-icon.tsx
+++ b/packages/ui/src/icons/photo-filter-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const PhotoFilterIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const PhotoFilterIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
--- a/packages/ui/src/icons/priority-icon.tsx
+++ b/packages/ui/src/icons/priority-icon.tsx
@ -1,22 +1,12 @@
 import * as React from "react";

 // icons
-import {
-  AlertCircle,
-  Ban,
-  SignalHigh,
-  SignalLow,
-  SignalMedium,
-} from "lucide-react";
+import { AlertCircle, Ban, SignalHigh, SignalLow, SignalMedium } from "lucide-react";

 // types
 import { IPriorityIcon } from "./type";

-export const PriorityIcon: React.FC<IPriorityIcon> = ({
-  priority,
-  className = "",
-  transparentBg = false
-}) => {
+export const PriorityIcon: React.FC<IPriorityIcon> = ({ priority, className = "", transparentBg = false }) => {
  if (!className || className === "") className = "h-4 w-4";

  // Convert to lowercase for string comparison
@ -25,31 +15,30 @@ export const PriorityIcon: React.FC<IPriorityIcon> = ({
  //get priority icon
  const getPriorityIcon = (): React.ReactNode => {
    switch (lowercasePriority) {
-      case 'urgent':
-        return <AlertCircle className={`text-red-500 ${ transparentBg ? '' : 'p-0.5' } ${className}`} />;
-      case 'high':
-        return <SignalHigh className={`text-orange-500 ${ transparentBg ? '' : 'pl-1' } ${className}`} />;
-      case 'medium':
-        return <SignalMedium className={`text-yellow-500 ${ transparentBg ? '' : 'ml-1.5' } ${className}`} />;
-      case 'low':
-        return <SignalLow className={`text-green-500 ${ transparentBg ? '' : 'ml-2' } ${className}`} />;
+      case "urgent":
+        return <AlertCircle className={`text-red-500 ${transparentBg ? "" : "p-0.5"} ${className}`} />;
+      case "high":
+        return <SignalHigh className={`text-orange-500 ${transparentBg ? "" : "pl-1"} ${className}`} />;
+      case "medium":
+        return <SignalMedium className={`text-yellow-500 ${transparentBg ? "" : "ml-1.5"} ${className}`} />;
+      case "low":
+        return <SignalLow className={`text-green-500 ${transparentBg ? "" : "ml-2"} ${className}`} />;
      default:
-        return <Ban className={`text-custom-text-200 ${ transparentBg ? '' : 'p-0.5' } ${className}`} />;
+        return <Ban className={`text-custom-text-200 ${transparentBg ? "" : "p-0.5"} ${className}`} />;
    }
  };

  return (
    <>
-      { transparentBg ? (
+      {transparentBg ? (
        getPriorityIcon()
      ) : (
-        <div className={`grid h-5 w-5 place-items-center rounded border items-center ${
-          lowercasePriority === "urgent"
-            ? "border-red-500/20 bg-red-500/20"
-            : "border-custom-border-200"
+        <div
+          className={`grid h-5 w-5 place-items-center items-center rounded border ${
+            lowercasePriority === "urgent" ? "border-red-500/20 bg-red-500/20" : "border-custom-border-200"
          }`}
        >
-          { getPriorityIcon() }
+          {getPriorityIcon()}
        </div>
      )}
    </>
--- a/packages/ui/src/icons/related-icon.tsx
+++ b/packages/ui/src/icons/related-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const RelatedIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const RelatedIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
@ -19,11 +16,7 @@ export const RelatedIcon: React.FC<ISvgIcons> = ({
      strokeLinecap="round"
      strokeLinejoin="round"
    />
-    <path
-      d="M12.125 19.25L9 16.125L12.125 13"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
+    <path d="M12.125 19.25L9 16.125L12.125 13" strokeLinecap="round" strokeLinejoin="round" />
    <path
      d="M20 22V18.1818C20 17.6032 19.7366 17.0482 19.2678 16.639C18.7989 16.2299 18.163 16 17.5 16H10"
      strokeLinecap="round"
--- a/packages/ui/src/icons/running-icon.tsx
+++ b/packages/ui/src/icons/running-icon.tsx
@ -2,17 +2,8 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const RunningIcon: React.FC<ISvgIcons> = ({
-  className = "fill-current",
-  ...rest
-}) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} `}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
+export const RunningIcon: React.FC<ISvgIcons> = ({ className = "fill-current", ...rest }) => (
+  <svg viewBox="0 0 24 24" className={`${className} `} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
    <path d="M4.05 12L3.2625 11.2125L10.9125 3.5625H8.25V5.0625H7.125V2.4375H11.3063C11.4813 2.4375 11.65 2.46875 11.8125 2.53125C11.975 2.59375 12.1188 2.6875 12.2438 2.8125L14.4938 5.04375C14.8563 5.40625 15.275 5.68125 15.75 5.86875C16.225 6.05625 16.725 6.1625 17.25 6.1875V7.3125C16.6 7.2875 15.975 7.16563 15.375 6.94688C14.775 6.72813 14.25 6.3875 13.8 5.925L12.9375 5.0625L10.8 7.2L12.4125 8.8125L7.8375 11.4563L7.275 10.4813L10.575 8.56875L9.0375 7.03125L4.05 12ZM2.25 6.75V5.625H6V6.75H2.25ZM0.75 4.3125V3.1875H4.5V4.3125H0.75ZM14.8125 2.8125C14.45 2.8125 14.1406 2.68438 13.8844 2.42813C13.6281 2.17188 13.5 1.8625 13.5 1.5C13.5 1.1375 13.6281 0.828125 13.8844 0.571875C14.1406 0.315625 14.45 0.1875 14.8125 0.1875C15.175 0.1875 15.4844 0.315625 15.7406 0.571875C15.9969 0.828125 16.125 1.1375 16.125 1.5C16.125 1.8625 15.9969 2.17188 15.7406 2.42813C15.4844 2.68438 15.175 2.8125 14.8125 2.8125ZM2.25 1.875V0.75H6V1.875H2.25Z" />
  </svg>
 );
--- a/packages/ui/src/icons/side-panel-icon.tsx
+++ b/packages/ui/src/icons/side-panel-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const SidePanelIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const SidePanelIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
--- a/packages/ui/src/icons/state/helper.tsx
+++ b/packages/ui/src/icons/state/helper.tsx
@ -6,12 +6,7 @@ export interface IStateGroupIcon {
  width?: string;
 }

-export type TStateGroups =
-  | "backlog"
-  | "unstarted"
-  | "started"
-  | "completed"
-  | "cancelled";
+export type TStateGroups = "backlog" | "unstarted" | "started" | "completed" | "cancelled";

 export const STATE_GROUP_COLORS: {
  [key in TStateGroups]: string;
--- a/packages/ui/src/icons/subscribe-icon.tsx
+++ b/packages/ui/src/icons/subscribe-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const SubscribeIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const SubscribeIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
--- a/packages/ui/src/icons/transfer-icon.tsx
+++ b/packages/ui/src/icons/transfer-icon.tsx
@ -2,17 +2,8 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const TransferIcon: React.FC<ISvgIcons> = ({
-  className = "fill-current",
-  ...rest
-}) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} `}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
+export const TransferIcon: React.FC<ISvgIcons> = ({ className = "fill-current", ...rest }) => (
+  <svg viewBox="0 0 24 24" className={`${className} `} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
    <path d="M6.16683 14.6667C4.54183 14.6667 3.16336 14.1007 2.03141 12.9688C0.899468 11.8368 0.333496 10.4583 0.333496 8.83333C0.333496 7.125 0.941135 5.73264 2.15641 4.65625C3.37169 3.57986 4.72933 3.09028 6.22933 3.1875L4.87516 1.83333C4.75016 1.70833 4.68766 1.55903 4.68766 1.38542C4.68766 1.21181 4.75016 1.0625 4.87516 0.9375C5.00016 0.8125 5.14947 0.75 5.32308 0.75C5.49669 0.75 5.646 0.8125 5.771 0.9375L8.22933 3.39583C8.29877 3.46528 8.34739 3.53472 8.37516 3.60417C8.40294 3.67361 8.41683 3.75 8.41683 3.83333C8.41683 3.91667 8.40294 3.99306 8.37516 4.0625C8.34739 4.13194 8.29877 4.20139 8.22933 4.27083L5.771 6.72917C5.646 6.85417 5.50016 6.91319 5.3335 6.90625C5.16683 6.89931 5.021 6.83333 4.896 6.70833C4.771 6.58333 4.7085 6.43403 4.7085 6.26042C4.7085 6.08681 4.771 5.9375 4.896 5.8125L6.29183 4.41667C4.97239 4.38889 3.8578 4.79167 2.94808 5.625C2.03836 6.45833 1.5835 7.52778 1.5835 8.83333C1.5835 10.0972 2.03141 11.1771 2.92725 12.0729C3.82308 12.9688 4.90294 13.4167 6.16683 13.4167H8.04183C8.22239 13.4167 8.37169 13.4757 8.48975 13.5938C8.6078 13.7118 8.66683 13.8611 8.66683 14.0417C8.66683 14.2222 8.6078 14.3715 8.48975 14.4896C8.37169 14.6076 8.22239 14.6667 8.04183 14.6667H6.16683ZM11.5835 14.6667C11.2363 14.6667 10.9411 14.5451 10.6981 14.3021C10.455 14.059 10.3335 13.7639 10.3335 13.4167V10.0833C10.3335 9.73611 10.455 9.44097 10.6981 9.19792C10.9411 8.95486 11.2363 8.83333 11.5835 8.83333H16.5835C16.9307 8.83333 17.2259 8.95486 17.4689 9.19792C17.712 9.44097 17.8335 9.73611 17.8335 10.0833V13.4167C17.8335 13.7639 17.712 14.059 17.4689 14.3021C17.2259 14.5451 16.9307 14.6667 16.5835 14.6667H11.5835ZM11.5835 13.4167H16.5835V10.0833H11.5835V13.4167ZM11.5835 7.16667C11.2363 7.16667 10.9411 7.04514 10.6981 6.80208C10.455 6.55903 10.3335 6.26389 10.3335 5.91667V2.58333C10.3335 2.23611 10.455 1.94097 10.6981 1.69792C10.9411 1.45486 11.2363 1.33333 11.5835 1.33333H16.5835C16.9307 1.33333 17.2259 1.45486 17.4689 1.69792C17.712 1.94097 17.8335 2.23611 17.8335 2.58333V5.91667C17.8335 6.26389 17.712 6.55903 17.4689 6.80208C17.2259 7.04514 16.9307 7.16667 16.5835 7.16667H11.5835Z" />
  </svg>
 );
--- a/packages/ui/src/icons/user-group-icon.tsx
+++ b/packages/ui/src/icons/user-group-icon.tsx
@ -2,10 +2,7 @@ import * as React from "react";

 import { ISvgIcons } from "./type";

-export const UserGroupIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
+export const UserGroupIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    className={`${className} stroke-2`}
--- a/packages/ui/src/loader.tsx
+++ b/packages/ui/src/loader.tsx
@ -17,10 +17,7 @@ type ItemProps = {
 };

 const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto" }) => (
-  <div
-    className="rounded-md bg-custom-background-80"
-    style={{ height: height, width: width }}
-  />
+  <div className="rounded-md bg-custom-background-80" style={{ height: height, width: width }} />
 );

 Loader.Item = Item;
--- a/packages/ui/src/progress/circular-progress-indicator.tsx
+++ b/packages/ui/src/progress/circular-progress-indicator.tsx
@ -1,4 +1,4 @@
-import React, { Children } from "react";
+import React from "react";

 interface ICircularProgressIndicator {
  size: number;
@ -8,9 +8,7 @@ interface ICircularProgressIndicator {
  children?: React.ReactNode;
 }

-export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (
-  props,
-) => {
+export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (props) => {
  const { size = 40, percentage = 25, strokeWidth = 6, children } = props;

  const sqSize = size;
@ -41,17 +39,8 @@ export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (
          >
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
-            <feComposite
-              in2="SourceAlpha"
-              operator="in"
-              result="effect1_backgroundBlur_377_19141"
-            />
-            <feBlend
-              mode="normal"
-              in="SourceGraphic"
-              in2="effect1_backgroundBlur_377_19141"
-              result="shape"
-            />
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_377_19141" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_377_19141" result="shape" />
            <feColorMatrix
              in="SourceAlpha"
              type="matrix"
@ -61,19 +50,12 @@ export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (
            <feOffset dx="1" dy="1" />
            <feGaussianBlur stdDeviation="2" />
            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-            <feColorMatrix
-              type="matrix"
-              values="0 0 0 0 0.63125 0 0 0 0 0.6625 0 0 0 0 0.75 0 0 0 0.35 0"
-            />
-            <feBlend
-              mode="normal"
-              in2="shape"
-              result="effect2_innerShadow_377_19141"
-            />
+            <feColorMatrix type="matrix" values="0 0 0 0 0.63125 0 0 0 0 0.6625 0 0 0 0 0.75 0 0 0 0.35 0" />
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_377_19141" />
          </filter>
        </defs>
        <circle
-          className="stroke-custom-primary-100 fill-none "
+          className="fill-none stroke-custom-primary-100 "
          cx={size / 2}
          cy={size / 2}
          r={radius}
--- a/packages/ui/src/progress/linear-progress-indicator.tsx
+++ b/packages/ui/src/progress/linear-progress-indicator.tsx
@ -6,11 +6,9 @@ type Props = {
  noTooltip?: boolean;
 };

-export const LinearProgressIndicator: React.FC<Props> = ({
-  data,
-  noTooltip = false,
-}) => {
+export const LinearProgressIndicator: React.FC<Props> = ({ data, noTooltip = false }) => {
  const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  let progress = 0;

  const bars = data.map((item: any) => {
@ -23,10 +21,7 @@ export const LinearProgressIndicator: React.FC<Props> = ({
    if (noTooltip) return <div style={style} />;
    else
      return (
-        <Tooltip
-          key={item.id}
-          tooltipContent={`${item.name} ${Math.round(item.value)}%`}
-        >
+        <Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}%`}>
          <div style={style} />
        </Tooltip>
      );
--- a/packages/ui/src/progress/progress-bar.tsx
+++ b/packages/ui/src/progress/progress-bar.tsx
@ -39,14 +39,11 @@ export const ProgressBar: React.FC<Props> = ({
    const DIRECTION = -1;
    // Rotation Calc
    const primaryRotationAngle = (maxValue - 1) * (360 / maxValue);
-    const rotationAngle =
-      -1 * DIRECTION * primaryRotationAngle +
-      i * DIRECTION * primaryRotationAngle;
+    const rotationAngle = -1 * DIRECTION * primaryRotationAngle + i * DIRECTION * primaryRotationAngle;
    const rotationTransformation = `rotate(${rotationAngle}, ${radius}, ${radius})`;
    const pieValue = calculatePieValue(maxValue);
    const dValue = generatePie(pieValue);
-    const fillColor =
-      value > 0 && i <= value ? activeStrokeColor : inactiveStrokeColor;
+    const fillColor = value > 0 && i <= value ? activeStrokeColor : inactiveStrokeColor;

    return (
      <path
@ -60,18 +57,12 @@ export const ProgressBar: React.FC<Props> = ({
  };

  // combining the Pies
-  const renderOuterCircle = () =>
-    [...Array(maxValue + 1)].map((e, i) => renderPie(i));
+  const renderOuterCircle = () => [...Array(maxValue + 1)].map((e, i) => renderPie(i));

  return (
    <svg width={radius * 2} height={radius * 2}>
      {renderOuterCircle()}
-      <circle
-        r={radius - strokeWidth}
-        cx={radius}
-        cy={radius}
-        className="progress-bar"
-      />
+      <circle r={radius - strokeWidth} cx={radius} cy={radius} className="progress-bar" />
    </svg>
  );
 };
--- a/packages/ui/src/progress/radial-progress.tsx
+++ b/packages/ui/src/progress/radial-progress.tsx
@ -18,7 +18,7 @@ export const RadialProgressBar: FC<IRadialProgressBar> = (props) => {

  return (
    <div className="relative h-4 w-4">
-      <svg className="absolute top-0 left-0" viewBox="0 0 100 100">
+      <svg className="absolute left-0 top-0" viewBox="0 0 100 100">
        <circle
          className={"stroke-current opacity-10"}
          cx="50"
--- a/packages/ui/src/spinners/circular-spinner.tsx
+++ b/packages/ui/src/spinners/circular-spinner.tsx
@ -6,12 +6,7 @@ export interface ISpinner extends React.SVGAttributes<SVGElement> {
  className?: string | undefined;
 }

-export const Spinner: React.FC<ISpinner> = ({
-  height = "32px",
-  width = "32px",
-  className = "",
-  ...rest
-}) => (
+export const Spinner: React.FC<ISpinner> = ({ height = "32px", width = "32px", className = "" }) => (
  <div role="status">
    <svg
      aria-hidden="true"
--- a/packages/ui/src/tooltip/tooltip.tsx
+++ b/packages/ui/src/tooltip/tooltip.tsx
@ -47,16 +47,15 @@ export const Tooltip: React.FC<ITooltipProps> = ({
    hoverCloseDelay={closeDelay}
    content={
      <div
-        className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md bg-custom-background-100 text-custom-text-200 break-words overflow-hidden ${className}`}
+        className={`relative z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-md ${className}`}
      >
-        {tooltipHeading && (
-          <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>
-        )}
+        {tooltipHeading && <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>}
        {tooltipContent}
      </div>
    }
    position={position}
    renderTarget={({
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      isOpen: isTooltipOpen,
      ref: eleReference,
      ...tooltipProps