From 7a261f9c2c4ee9fd20d900bbe1299ec7cd593a43 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 11 Aug 2025 16:11:45 +0530
Subject: [PATCH 01/10] chore: allow-custom-ref-passing-to-bignumberfield

---
 src/lib/form/bignumber-field/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/lib/form/bignumber-field/index.tsx b/src/lib/form/bignumber-field/index.tsx
index b6157da..a25f6d4 100644
--- a/src/lib/form/bignumber-field/index.tsx
+++ b/src/lib/form/bignumber-field/index.tsx
@@ -17,6 +17,8 @@ interface BigNumberFieldComponentProps extends BigNumberFieldProps {
   className?: string;
   /** The name of the input element, used when submitting an HTML form.*/
   name?: string;
+  inputRef?: React.Ref<HTMLInputElement>;
+  buttonRef?: React.Ref<HTMLButtonElement>;
 }
 
 /** A number field that handles big numbers.
@@ -31,6 +33,8 @@ function BigNumberField({
   isDisabled,
   isReadOnly,
   name,
+  inputRef,
+  buttonRef,
   ...props
 }: Readonly<BigNumberFieldComponentProps>) {
   // Use our custom hook to get all the props and state
@@ -44,7 +48,6 @@ function BigNumberField({
     errorMessageProps,
     validationResult,
   } = useBigNumberField({ isDisabled, placeholder, isReadOnly, ...props });
-
   return (
     <div className={cn("flex w-[278px] flex-col", className)}>
       {label && (
@@ -64,6 +67,7 @@ function BigNumberField({
           <>
             <Input
               {...inputProps}
+              ref={inputRef}
               aria-errormessage={`BigNumberFieldError-${inputProps.id}`}
               name={name}
               className={cn(
@@ -98,6 +102,7 @@ function BigNumberField({
             >
               <Button
                 {...incrementButtonProps}
+                ref={buttonRef}
                 excludeFromTabOrder
                 className={clsx(
                   "rounded-base hover:bg-klerosUIComponentsStroke size-3.5 cursor-pointer border-none bg-transparent",

From fd6c86d59a393a81c30357f26416470ab39a3205 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 11 Aug 2025 16:23:39 +0530
Subject: [PATCH 02/10] chore: export-timeline-item-interface

---
 src/lib/progress/timeline/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/progress/timeline/index.tsx b/src/lib/progress/timeline/index.tsx
index 8e3be89..e11d47b 100644
--- a/src/lib/progress/timeline/index.tsx
+++ b/src/lib/progress/timeline/index.tsx
@@ -3,13 +3,13 @@ import Bullet, { SideProp, VariantProp } from "./bullet";
 import clsx from "clsx";
 import { cn } from "../../../utils";
 
-interface TimelineItem extends SideProp, VariantProp {
+export interface TimelineItem extends SideProp, VariantProp {
   title: string;
   party: string;
   subtitle: string;
 }
 
-interface TimelineProps {
+export interface TimelineProps {
   items: [TimelineItem, ...TimelineItem[]];
   className?: string;
 }

From 350b14f92027b498c28ee6b86f2dcca0fe006ae1 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 11 Aug 2025 16:24:21 +0530
Subject: [PATCH 03/10] chore: simplify-timeeline-item-type

---
 src/lib/progress/timeline/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/progress/timeline/index.tsx b/src/lib/progress/timeline/index.tsx
index e11d47b..41e491a 100644
--- a/src/lib/progress/timeline/index.tsx
+++ b/src/lib/progress/timeline/index.tsx
@@ -10,7 +10,7 @@ export interface TimelineItem extends SideProp, VariantProp {
 }
 
 export interface TimelineProps {
-  items: [TimelineItem, ...TimelineItem[]];
+  items: TimelineItem[];
   className?: string;
 }
 

From baa61832e99a64bd079dba2bf3e0e26386d6b848 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 11 Aug 2025 16:34:13 +0530
Subject: [PATCH 04/10] chore: hide-custom-icon-when-loading-in-button

---
 src/lib/button/ButtonIcon.tsx | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/lib/button/ButtonIcon.tsx b/src/lib/button/ButtonIcon.tsx
index 9315000..aa54da3 100644
--- a/src/lib/button/ButtonIcon.tsx
+++ b/src/lib/button/ButtonIcon.tsx
@@ -6,20 +6,19 @@ const ButtonIcon: React.FC<
   Pick<ButtonProps, "Icon" | "icon" | "isDisabled" | "isLoading" | "variant">
 > = ({ Icon, icon, isDisabled, isLoading, variant }) => {
   const isSecondary = variant === "secondary";
-  return (
-    icon ??
-    (Icon && (
-      <Icon
-        className={cn(
-          "button-svg",
-          "mr-2 size-4",
-          "fill-klerosUIComponentsWhiteBackground",
-          isLoading && ["invisible"],
-          isSecondary && ["fill-klerosUIComponentsPrimaryBlue"],
-          isDisabled && ["fill-klerosUIComponentsStroke"],
-        )}
-      />
-    ))
-  );
+  return icon
+    ? !isLoading && icon
+    : Icon && (
+        <Icon
+          className={cn(
+            "button-svg",
+            "mr-2 size-4",
+            "fill-klerosUIComponentsWhiteBackground",
+            isLoading && ["invisible"],
+            isSecondary && ["fill-klerosUIComponentsPrimaryBlue"],
+            isDisabled && ["fill-klerosUIComponentsStroke"],
+          )}
+        />
+      );
 };
 export default ButtonIcon;

From 2442f7081735b078910bd5c4683f3c6d0ba3f3d5 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 11 Aug 2025 16:50:44 +0530
Subject: [PATCH 05/10] chore: add-class-names-to-target-popovers

---
 .../dropdown/cascader/dropdown-container.tsx   |  6 +++++-
 src/lib/dropdown/cascader/index.tsx            |  3 +++
 src/lib/dropdown/select/dropdown-container.tsx | 18 ++++++++++++------
 src/lib/dropdown/select/index.tsx              |  6 +++++-
 src/lib/form/datepicker/index.tsx              |  3 +++
 5 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/lib/dropdown/cascader/dropdown-container.tsx b/src/lib/dropdown/cascader/dropdown-container.tsx
index 8c4e8f8..beb0ef4 100644
--- a/src/lib/dropdown/cascader/dropdown-container.tsx
+++ b/src/lib/dropdown/cascader/dropdown-container.tsx
@@ -19,6 +19,7 @@ interface IDropdownContainer
     "disabledKeys" | "defaultSelectedKey" | "items" | "callback"
   > {
   isOpen?: boolean;
+  className?: string;
 }
 
 const DropdownContainer: React.FC<IDropdownContainer> = ({
@@ -27,6 +28,7 @@ const DropdownContainer: React.FC<IDropdownContainer> = ({
   disabledKeys,
   defaultSelectedKey,
   callback,
+  className,
 }) => {
   const gridRef = useRef<HTMLDivElement>(null);
   const [selectedKey, setSelectedKey] = useState<Key | null>(
@@ -78,17 +80,19 @@ const DropdownContainer: React.FC<IDropdownContainer> = ({
 
   return (
     <Popover
-      className={clsx(
+      className={cn(
         "bg-klerosUIComponentsWhiteBackground rounded-base border-klerosUIComponentsStroke box-border border",
         "shadow-default focus-visible:outline-klerosUIComponentsPrimaryBlue overflow-hidden",
         "w-60 origin-top transform transition lg:w-max lg:max-w-6xl",
         isOpen
           ? "entering:animate-scale-in scale-y-100"
           : "exiting:animate-scale-out scale-y-0",
+        className,
       )}
     >
       <Dialog aria-label="dropdown-dialog">
         <Tree
+          id="dropdown-tree"
           ref={gridRef}
           autoFocus="first"
           items={items}
diff --git a/src/lib/dropdown/cascader/index.tsx b/src/lib/dropdown/cascader/index.tsx
index 555cbe8..b442d3e 100644
--- a/src/lib/dropdown/cascader/index.tsx
+++ b/src/lib/dropdown/cascader/index.tsx
@@ -16,6 +16,7 @@ export interface IDropdownCascader extends AriaSelectProps {
   /** Callback function passes the Item object as argument. */
   callback: (item: IItem) => void;
   label?: string;
+  dropdownClassName?: string;
 }
 
 /** A Dropdown Cascader provides users with a way to navigate nested hierarchical information,
@@ -29,6 +30,7 @@ function DropdownCascader({
   disabledKeys,
   selectedKey,
   defaultSelectedKey,
+  dropdownClassName,
   ...props
 }: Readonly<IDropdownCascader>) {
   return (
@@ -56,6 +58,7 @@ function DropdownCascader({
               defaultSelectedKey: selectedKey ?? defaultSelectedKey,
               disabledKeys,
               callback,
+              className: dropdownClassName,
             }}
           />
         </>
diff --git a/src/lib/dropdown/select/dropdown-container.tsx b/src/lib/dropdown/select/dropdown-container.tsx
index a9875e5..91b75b4 100644
--- a/src/lib/dropdown/select/dropdown-container.tsx
+++ b/src/lib/dropdown/select/dropdown-container.tsx
@@ -3,30 +3,36 @@ import React from "react";
 import { Collection, ListBox, Popover } from "react-aria-components";
 import Scrollbar from "../../scrollbar";
 import Item, { IItem } from "./item";
+import { cn } from "../../../utils";
 
-const DropdownContainer: React.FC<{ isOpen?: boolean; items: IItem[] }> = ({
-  isOpen,
-  items,
-}) => {
+const DropdownContainer: React.FC<{
+  isOpen?: boolean;
+  items: IItem[];
+  className?: string;
+}> = ({ isOpen, items, className }) => {
   return (
     <Popover
-      className={clsx(
+      className={cn(
         "bg-klerosUIComponentsWhiteBackground rounded-base border-klerosUIComponentsStroke border",
         "shadow-default focus:outline-klerosUIComponentsPrimaryBlue box-border overflow-hidden outline-none",
         "origin-top transform transition",
         isOpen
           ? "entering:animate-scale-in scale-y-100"
           : "exiting:animate-scale-out scale-y-0",
+        className,
       )}
     >
       <Scrollbar className="max-h-87.5 w-59.5">
         <ListBox
+          id="listbox"
           className={clsx(
             "bg-klerosUIComponentsWhiteBackground box-border w-59.5",
             "cols-[repeat(auto-fill,_minmax(0,_45px))] grid grow py-4",
           )}
         >
-          <Collection items={items}>{(item) => <Item {...item} />}</Collection>
+          <Collection items={items}>
+            {(item) => <Item className="listbox-item" {...item} />}
+          </Collection>
         </ListBox>
       </Scrollbar>
     </Popover>
diff --git a/src/lib/dropdown/select/index.tsx b/src/lib/dropdown/select/index.tsx
index c9d0dce..a0710cf 100644
--- a/src/lib/dropdown/select/index.tsx
+++ b/src/lib/dropdown/select/index.tsx
@@ -21,6 +21,7 @@ interface SelectProps extends AriaSelectProps {
   /** When `simpleButton` is `true`, this scales down the dropdown button size. */
   smallButton?: boolean;
   label?: string;
+  dropdownClassName?: string;
 }
 
 /** A select displays a collapsible list of options and allows a user to select one of them. */
@@ -32,6 +33,7 @@ function DropdownSelect({
   callback,
   placeholder,
   className,
+  dropdownClassName,
   ...props
 }: Readonly<SelectProps>) {
   const handleSelection = useCallback(
@@ -64,7 +66,9 @@ function DropdownSelect({
             <DropdownButton {...{ placeholder }} />
           )}
           <FieldError className="text-klerosUIComponentsError text-sm" />
-          <DropdownContainer {...{ isOpen, items }} />
+          <DropdownContainer
+            {...{ isOpen, items, className: dropdownClassName }}
+          />
         </>
       )}
     </AriaSelect>
diff --git a/src/lib/form/datepicker/index.tsx b/src/lib/form/datepicker/index.tsx
index 7070675..2cfa483 100644
--- a/src/lib/form/datepicker/index.tsx
+++ b/src/lib/form/datepicker/index.tsx
@@ -25,6 +25,7 @@ interface DatePickerProps
   /** Show time selection if true. */
   time?: boolean;
   label?: string;
+  popoverClassName?: string;
 }
 
 /** A date picker allow users to enter or select a date and time value. */
@@ -34,6 +35,7 @@ function DatePicker({
   minValue,
   defaultValue = now(getLocalTimeZone()),
   shouldCloseOnSelect = false,
+  popoverClassName,
   ...props
 }: Readonly<DatePickerProps>) {
   return (
@@ -62,6 +64,7 @@ function DatePicker({
               "bg-klerosUIComponentsWhiteBackground shadow-default rounded-base overflow-y-scroll",
               "border-klerosUIComponentsStroke ease-ease scrollbar border transition",
               time ? "w-82.5 lg:w-112.5" : "w-82.5",
+              popoverClassName,
             )}
           >
             <Dialog className="flex size-full flex-wrap">

From ab6d59b26b8a6dbf054278ad5575f30c84f75eb3 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 11 Aug 2025 17:13:57 +0530
Subject: [PATCH 06/10] fix: date-picker-wrapping-on-small-screen

---
 src/lib/form/datepicker/index.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/lib/form/datepicker/index.tsx b/src/lib/form/datepicker/index.tsx
index 2cfa483..0c02568 100644
--- a/src/lib/form/datepicker/index.tsx
+++ b/src/lib/form/datepicker/index.tsx
@@ -61,15 +61,20 @@ function DatePicker({
 
           <Popover
             className={clsx(
-              "bg-klerosUIComponentsWhiteBackground shadow-default rounded-base overflow-y-scroll",
+              "bg-klerosUIComponentsWhiteBackground shadow-default rounded-base overflow-scroll",
               "border-klerosUIComponentsStroke ease-ease scrollbar border transition",
               time ? "w-82.5 lg:w-112.5" : "w-82.5",
               popoverClassName,
             )}
           >
             <Dialog className="flex size-full flex-wrap">
-              <Calendar />
-              {time && <TimeControl {...{ minValue }} />}
+              <div
+                className={clsx("flex", time ? "w-82.5 lg:w-112.5" : "w-82.5")}
+              >
+                <Calendar />
+                {time && <TimeControl {...{ minValue }} />}
+              </div>
+
               <div
                 className={clsx(
                   "flex h-16 w-full items-center justify-between px-4",

From 669d535e77d05446e3428783557e023975f89173 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 11 Aug 2025 17:32:57 +0530
Subject: [PATCH 07/10] feat:
 allow-custom-validation-and-controlled-behaviour-in-file-uploader

---
 src/lib/form/file-uploader.tsx       | 16 ++++++++++++--
 src/stories/fileuploader.stories.tsx | 32 ++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/lib/form/file-uploader.tsx b/src/lib/form/file-uploader.tsx
index 9dbc7f7..8daa818 100644
--- a/src/lib/form/file-uploader.tsx
+++ b/src/lib/form/file-uploader.tsx
@@ -25,6 +25,10 @@ interface FileUploaderProps {
   /** Whether the drop target is disabled. If true, the drop target will not accept any drops.   */
   isDisabled?: boolean;
   className?: string;
+  /** Provide a custom validation function, returning false invalidates the file */
+  validationFunction?: (file?: File) => boolean;
+  /** Provide File for controlled behaviour */
+  selectedFile?: File;
 }
 
 /** Allows to upload a file by either dropping it on the dropzone or
@@ -37,8 +41,12 @@ function FileUploader({
   acceptedFileTypes,
   fileTriggerProps,
   isDisabled = false,
+  validationFunction,
+  selectedFile,
 }: Readonly<FileUploaderProps>) {
-  const [fileSelected, setFileSelected] = useState<File>();
+  const [fileSelected, setFileSelected] = useState<File | undefined>(
+    selectedFile,
+  );
 
   return (
     <div className={cn("box-border h-fit w-50", className)}>
@@ -71,6 +79,8 @@ function FileUploader({
 
           if (item) {
             const file = await item.getFile();
+            const validated = validationFunction?.(file) ?? true;
+            if (!validated) return;
             setFileSelected(file);
             callback(file);
           }
@@ -82,6 +92,8 @@ function FileUploader({
           onSelect={(e) => {
             if (e) {
               const file = e[0];
+              const validated = validationFunction?.(file) ?? true;
+              if (!validated) return;
               setFileSelected(file);
               callback(file);
             }
@@ -109,7 +121,7 @@ function FileUploader({
         </FileTrigger>
       </DropZone>
       {msg && (
-        <div className="mt-4 flex items-start">
+        <div className="mt-4 flex items-center">
           {variant === "success" && (
             <SuccessIcon className="fill-klerosUIComponentsSuccess mr-2 max-w-4 min-w-4" />
           )}
diff --git a/src/stories/fileuploader.stories.tsx b/src/stories/fileuploader.stories.tsx
index 6d20851..7a0588b 100644
--- a/src/stories/fileuploader.stories.tsx
+++ b/src/stories/fileuploader.stories.tsx
@@ -64,3 +64,35 @@ export const FileUploaderWithAcceptedTypes: Story = {
     variant: "info",
   },
 };
+
+export const FileUploaderWithCustomValidation: Story = {
+  args: {
+    themeUI: "dark",
+    backgroundUI: "light",
+    className: "w-[500px]",
+    callback: () => {},
+    acceptedFileTypes: ["image/png"],
+    msg: "This will not accept any file and invalidate",
+    variant: "info",
+    validationFunction: () => {
+      return false;
+    },
+  },
+};
+
+export const FileUploaderWithControlledBehaviour: Story = {
+  args: {
+    themeUI: "dark",
+    backgroundUI: "light",
+    className: "w-[500px]",
+    callback: () => {},
+    acceptedFileTypes: ["image/png"],
+    msg: "This will show test.txt selected by default",
+    variant: "info",
+    selectedFile: new File(
+      ["hello world"], // file contents
+      "test.txt", // file name
+      { type: "text/plain" }, // MIME type
+    ),
+  },
+};

From ef3a484c9abcfdfaa11d72836290c9b121e3ba3c Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 11 Aug 2025 17:39:36 +0530
Subject: [PATCH 08/10] chore: address-interactive-role-warning-in-tooltip

---
 src/lib/tooltip/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/tooltip/index.tsx b/src/lib/tooltip/index.tsx
index 74d424e..efa1450 100644
--- a/src/lib/tooltip/index.tsx
+++ b/src/lib/tooltip/index.tsx
@@ -44,7 +44,9 @@ function Tooltip({
   return (
     <TooltipTrigger {...{ delay }} {...props}>
       <Focusable>
-        <div {...props.wrapperProps}>{children}</div>
+        <div {...props.wrapperProps} role="button">
+          {children}
+        </div>
       </Focusable>
       <AriaTooltip
         offset={props.tooltipProps?.offset ?? 8}

From d8007324c270b9eb20056e1146207f631befe827 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 11 Aug 2025 18:01:16 +0530
Subject: [PATCH 09/10] chore: add-custom-icon-example-to-dropdown-select

---
 .../dropdown/select/dropdown-container.tsx    |  4 +-
 src/stories/dropdown-select.stories.tsx       | 42 +++++++++++++++++++
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/lib/dropdown/select/dropdown-container.tsx b/src/lib/dropdown/select/dropdown-container.tsx
index 91b75b4..13d4f07 100644
--- a/src/lib/dropdown/select/dropdown-container.tsx
+++ b/src/lib/dropdown/select/dropdown-container.tsx
@@ -30,9 +30,7 @@ const DropdownContainer: React.FC<{
             "cols-[repeat(auto-fill,_minmax(0,_45px))] grid grow py-4",
           )}
         >
-          <Collection items={items}>
-            {(item) => <Item className="listbox-item" {...item} />}
-          </Collection>
+          <Collection items={items}>{(item) => <Item {...item} />}</Collection>
         </ListBox>
       </Scrollbar>
     </Popover>
diff --git a/src/stories/dropdown-select.stories.tsx b/src/stories/dropdown-select.stories.tsx
index 11c01c3..7ddd571 100644
--- a/src/stories/dropdown-select.stories.tsx
+++ b/src/stories/dropdown-select.stories.tsx
@@ -6,6 +6,7 @@ import { IPreviewArgs } from "./utils";
 import SelectComponent from "../lib/dropdown/select";
 import { Form } from "react-aria-components";
 import { Button } from "../lib";
+import Telegram from "../assets/svgs/telegram.svg";
 
 const meta = {
   component: SelectComponent,
@@ -109,3 +110,44 @@ export const RequiredSelect: Story = {
     </Form>
   ),
 };
+
+export const CustomItemIcon: Story = {
+  args: {
+    themeUI: "dark",
+    backgroundUI: "light",
+    items: [
+      {
+        text: "hello 1",
+        itemValue: 1,
+        id: 1,
+        icon: <Telegram className="mr-2 size-4 fill-white" />,
+      },
+      {
+        text: "hello 2",
+        itemValue: 2,
+        id: 2,
+        icon: <Telegram className="mr-2 size-4 fill-white" />,
+      },
+      {
+        text: "hello 3",
+        itemValue: 3,
+        id: 3,
+        icon: <Telegram className="mr-2 size-4 fill-white" />,
+      },
+      {
+        text: "hello 4",
+        itemValue: 4,
+        id: 4,
+        icon: <Telegram className="mr-2 size-4 fill-white" />,
+      },
+      {
+        text: "hello 5",
+        itemValue: 5,
+        id: 5,
+        icon: <Telegram className="mr-2 size-4 fill-white" />,
+      },
+    ],
+    placeholder: "Select a value",
+    callback: () => {},
+  },
+};

From b1e282e69224f9924a3addd02c0ff8be322442c1 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 11 Aug 2025 18:55:52 +0530
Subject: [PATCH 10/10] chore: rabbit-review

---
 src/lib/button/ButtonIcon.tsx        | 37 +++++++++++++++++-----------
 src/lib/form/file-uploader.tsx       | 11 ++++++---
 src/lib/progress/timeline/custom.tsx |  2 +-
 src/lib/progress/timeline/index.tsx  |  2 +-
 src/lib/tooltip/index.tsx            |  5 +++-
 5 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/lib/button/ButtonIcon.tsx b/src/lib/button/ButtonIcon.tsx
index aa54da3..97ef9f2 100644
--- a/src/lib/button/ButtonIcon.tsx
+++ b/src/lib/button/ButtonIcon.tsx
@@ -6,19 +6,28 @@ const ButtonIcon: React.FC<
   Pick<ButtonProps, "Icon" | "icon" | "isDisabled" | "isLoading" | "variant">
 > = ({ Icon, icon, isDisabled, isLoading, variant }) => {
   const isSecondary = variant === "secondary";
-  return icon
-    ? !isLoading && icon
-    : Icon && (
-        <Icon
-          className={cn(
-            "button-svg",
-            "mr-2 size-4",
-            "fill-klerosUIComponentsWhiteBackground",
-            isLoading && ["invisible"],
-            isSecondary && ["fill-klerosUIComponentsPrimaryBlue"],
-            isDisabled && ["fill-klerosUIComponentsStroke"],
-          )}
-        />
-      );
+  return icon ? (
+    isLoading ? (
+      <span
+        className={cn("button-svg", "mr-2 size-4", "invisible")}
+        aria-hidden
+      />
+    ) : (
+      icon
+    )
+  ) : (
+    Icon && (
+      <Icon
+        className={cn(
+          "button-svg",
+          "mr-2 size-4",
+          "fill-klerosUIComponentsWhiteBackground",
+          isLoading && ["invisible"],
+          isSecondary && ["fill-klerosUIComponentsPrimaryBlue"],
+          isDisabled && ["fill-klerosUIComponentsStroke"],
+        )}
+      />
+    )
+  );
 };
 export default ButtonIcon;
diff --git a/src/lib/form/file-uploader.tsx b/src/lib/form/file-uploader.tsx
index 8daa818..9030d62 100644
--- a/src/lib/form/file-uploader.tsx
+++ b/src/lib/form/file-uploader.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import UploadIcon from "../../assets/svgs/form/upload-icon.svg";
 import SuccessIcon from "../../assets/svgs/status-icons/success.svg";
 import ErrorIcon from "../../assets/svgs/status-icons/error.svg";
@@ -48,6 +48,10 @@ function FileUploader({
     selectedFile,
   );
 
+  useEffect(() => {
+    setFileSelected(selectedFile);
+  }, [selectedFile]);
+
   return (
     <div className={cn("box-border h-fit w-50", className)}>
       <DropZone
@@ -81,7 +85,8 @@ function FileUploader({
             const file = await item.getFile();
             const validated = validationFunction?.(file) ?? true;
             if (!validated) return;
-            setFileSelected(file);
+            if (selectedFile === undefined) setFileSelected(file);
+
             callback(file);
           }
         }}
@@ -94,7 +99,7 @@ function FileUploader({
               const file = e[0];
               const validated = validationFunction?.(file) ?? true;
               if (!validated) return;
-              setFileSelected(file);
+              if (selectedFile === undefined) setFileSelected(file);
               callback(file);
             }
           }}
diff --git a/src/lib/progress/timeline/custom.tsx b/src/lib/progress/timeline/custom.tsx
index 77ff334..adbcd62 100644
--- a/src/lib/progress/timeline/custom.tsx
+++ b/src/lib/progress/timeline/custom.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Bullet, { StateProp, VariantProp } from "./bullet";
 import { cn } from "../../../utils";
 
-interface TimelineItem extends VariantProp, StateProp {
+export interface TimelineItem extends VariantProp, StateProp {
   title: string;
   party: string | React.ReactElement;
   subtitle: string;
diff --git a/src/lib/progress/timeline/index.tsx b/src/lib/progress/timeline/index.tsx
index 41e491a..e11d47b 100644
--- a/src/lib/progress/timeline/index.tsx
+++ b/src/lib/progress/timeline/index.tsx
@@ -10,7 +10,7 @@ export interface TimelineItem extends SideProp, VariantProp {
 }
 
 export interface TimelineProps {
-  items: TimelineItem[];
+  items: [TimelineItem, ...TimelineItem[]];
   className?: string;
 }
 
diff --git a/src/lib/tooltip/index.tsx b/src/lib/tooltip/index.tsx
index efa1450..e53fafa 100644
--- a/src/lib/tooltip/index.tsx
+++ b/src/lib/tooltip/index.tsx
@@ -44,7 +44,10 @@ function Tooltip({
   return (
     <TooltipTrigger {...{ delay }} {...props}>
       <Focusable>
-        <div {...props.wrapperProps} role="button">
+        <div
+          {...props.wrapperProps}
+          role={props?.wrapperProps?.role ?? "button"}
+        >
           {children}
         </div>
       </Focusable>