atomos_next_genesis 0.0.4 → 0.0.5

package/dist/index.cjs

@@ -38,30 +38,52 @@ __export(app_exports, {
   AvatarGroup: () => AvatarGroup_default,
   BreadCrumb: () => Breadcrumb_default,
   Button: () => Button_default,
+  Callout: () => Callout_default,
+  Card: () => Card_default,
+  CardAction: () => CardAction,
+  CardContent: () => CardContent,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
   Checkbox: () => Checkbox_default,
   Chip: () => Chip_default,
   CircularProgress: () => CircularProgress_default,
   Divider: () => Divider_default,
+  Drawer: () => Drawer_default,
   Dropdown: () => Dropdown_default,
+  DropdownMenu: () => DropdownMenu,
+  DropdownMenuContent: () => DropdownMenuContent,
+  DropdownMenuItem: () => DropdownMenuItem,
+  DropdownMenuLabel: () => DropdownMenuLabel,
+  DropdownMenuSeparator: () => DropdownMenuSeparator,
+  DropdownMenuSub: () => DropdownMenuSub,
+  DropdownMenuSubContent: () => DropdownMenuSubContent,
+  DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
+  DropdownMenuTrigger: () => DropdownMenuTrigger,
   DropdownWithIcon: () => DropdownWithIcon_default,
+  FileSelector: () => FileSelector_default,
   FileUpload: () => FileUpload_default,
+  FileUploadPreview: () => FileUploadPreview_default,
   GlobalNavigation: () => GlobalNavigation_default,
   HelperText: () => HelperText_default,
   Input: () => Input_default,
   Label: () => Label_default,
   ListItem: () => ListItem_default,
+  ListPagination: () => ListPagination_default,
   Loading: () => Loading_default,
-  MenuDropdown: () => MenuDropdown,
-  MenuItem: () => MenuItem3,
-  MenuSubItem: () => MenuSubItem,
   Modal: () => Modal,
   Notice: () => Notice_default,
+  OTPInput: () => OTPInput_default,
   Pagination: () => Pagination_default,
   ProgressBar: () => Progress_default,
   Radio: () => Radio_default,
+  RazorPayFileUpload: () => ImageUploadControlled,
   Sidebar: () => Sidebar_default,
   Skeleton: () => Skeleton_default,
   Slider: () => Slider_default,
+  Spinner: () => Spinner_default,
+  SplitButton: () => SplitButton_default,
   Stepper: () => Stepper_default,
   Tab: () => Tab,
   TabList: () => TabList,
@@ -73,29 +95,60 @@ __export(app_exports, {
   TableHeadCell: () => TableHeadCell,
   TableRow: () => TableRow,
   TabsContainer: () => Tabs_default,
+  TextInputWithLabel: () => TextInputWithLabel_default,
   Textarea: () => Textarea_default,
   Toggle: () => Toggle_default,
-  Tooltip: () => Tooltip_default
+  Tooltip: () => Tooltip_default,
+  TreeView: () => TreeView_default,
+  Typography: () => Typography_default,
+  defaultGetFileIcon: () => defaultGetFileIcon
 });
 module.exports = __toCommonJS(app_exports);
 
-// app/components/Accordian.tsx
+// app/components/Accordion.tsx
 var import_react = __toESM(require("react"), 1);
+var import_react2 = require("@remixicon/react");
 
 // app/utils/utils.tsx
 var import_clsx = __toESM(require("clsx"), 1);
 var import_tailwind_merge = require("tailwind-merge");
 var cn = (...classes) => (0, import_tailwind_merge.twMerge)((0, import_clsx.default)(...classes));
 
-// app/components/Accordian.tsx
-var import_react2 = require("@remixicon/react");
+// app/components/Accordion.tsx
 function Accordion({
   type = "single",
   collapsible = true,
   className,
-  children
+  children,
+  expanded
 }) {
-  const [openItems, setOpenItems] = (0, import_react.useState)([]);
+  const [openItems, setOpenItems] = (0, import_react.useState)(() => {
+    const defaultOpen = [];
+    import_react.default.Children.forEach(children, (child) => {
+      if (import_react.default.isValidElement(child)) {
+        const triggerChild = import_react.default.Children.toArray(child.props.children)[0];
+        if (import_react.default.isValidElement(triggerChild) && triggerChild.props.defaultOpen) {
+          defaultOpen.push(child.props.value);
+        }
+      }
+    });
+    return defaultOpen;
+  });
+  (0, import_react.useEffect)(() => {
+    if (expanded !== void 0) {
+      if (expanded) {
+        const allValues = [];
+        import_react.default.Children.forEach(children, (child) => {
+          if (import_react.default.isValidElement(child)) {
+            allValues.push(child.props.value);
+          }
+        });
+        setOpenItems(allValues);
+      } else {
+        setOpenItems([]);
+      }
+    }
+  }, [expanded, children]);
   const handleToggle = (value) => {
     if (type === "single") {
       setOpenItems(
@@ -107,7 +160,7 @@ function Accordion({
       );
     }
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className }, import_react.default.Children.map(children, (child) => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className, role: "region", "aria-label": "Accordion" }, import_react.default.Children.map(children, (child) => {
     if (import_react.default.isValidElement(child)) {
       return import_react.default.cloneElement(
         child,
@@ -129,6 +182,8 @@ function AccordionItem({
   className
 }) {
   const isOpen = openItems == null ? void 0 : openItems.includes(value);
+  const headerId = `accordion-header-${value}`;
+  const contentId = `accordion-content-${value}`;
   const toggle = () => {
     if (!disabled && handleToggle) {
       handleToggle(value);
@@ -138,55 +193,79 @@ function AccordionItem({
     "div",
     {
       className: cn(
-        "bg-white hover:bg-gray-50 rounded-lg shadow transition-all duration-300 ease-in-out",
-        disabled ? "opacity-50 pointer-events-none select-none" : "cursor-pointer",
-        isOpen ? "border border-gray-300" : "border",
+        "bg-white rounded-lg shadow transition-all duration-300 ease-in-out border",
+        disabled && "opacity-50 pointer-events-none select-none",
+        isOpen && "border-gray-300",
         className
       )
     },
-    /* @__PURE__ */ import_react.default.createElement(
+    children && Array.isArray(children) ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
-        className: "font-semibold transition-all duration-300 ease-in-out",
-        onClick: toggle
-      },
-      children && Array.isArray(children) ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, import_react.default.cloneElement(children[0], { isOpen }), /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: cn(
-            "grid transition-all duration-300 ease-in-out",
-            isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
-          )
+        onClick: toggle,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggle();
+          }
         },
-        /* @__PURE__ */ import_react.default.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement("div", { className: cn("") }, children[1]))
-      )) : children
-    )
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-expanded": isOpen,
+        "aria-disabled": disabled,
+        "aria-controls": contentId,
+        id: headerId,
+        className: "cursor-pointer"
+      },
+      import_react.default.cloneElement(children[0], { isOpen })
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        id: contentId,
+        role: "region",
+        "aria-labelledby": headerId,
+        className: cn(
+          "transition-all duration-300 ease-in-out overflow-hidden",
+          isOpen ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
+        ),
+        onClick: (e) => e.stopPropagation()
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "p-3.5" }, children[1])
+    )) : children
   );
 }
-function AccordionTrigger({ isOpen, children }) {
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "flex p-3.5 justify-between items-center text-sm font-semibold transition-all delay-150 ease-in" }, children, /* @__PURE__ */ import_react.default.createElement(
-    "span",
-    {
-      className: cn(
-        "transition-transform duration-300 transform",
-        isOpen ? "rotate-180" : "rotate-0"
-      )
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_react2.RiArrowDownSLine, { size: 18 })
-  ));
-}
-function AccordionContent({ isOpen, children }) {
+function AccordionTrigger({
+  isOpen,
+  children,
+  className,
+  triggerIcon = /* @__PURE__ */ import_react.default.createElement(import_react2.RiArrowDownSLine, { size: 18 })
+}) {
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: cn(
-        "w-full font-normal px-3.5 pb-3.5 text-sm overflow-hidden transition-all duration-500 ease-in",
-        !isOpen ? "max-h-full opacity-100" : "max-h-0 opacity-0"
+        "flex p-3.5 text-lg rounded-lg bg-white hover:bg-gray-50 justify-between items-center font-semibold transition-all delay-150 ease-in",
+        isOpen && "bg-gray-100",
+        className
       )
     },
-    children
+    children,
+    /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: cn(
+          "transition-transform duration-300",
+          isOpen ? "rotate-180" : "rotate-0"
+        ),
+        "aria-hidden": "true"
+      },
+      triggerIcon
+    )
   );
 }
+function AccordionContent({ children }) {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "text-gray-700" }, children);
+}
 
 // app/components/Avatar.tsx
 var import_image = __toESM(require("next/image"), 1);
@@ -377,7 +456,7 @@ var Breadcrumb_default = Breadcrumbs;
 var import_react6 = __toESM(require("react"), 1);
 var import_class_variance_authority = require("class-variance-authority");
 var buttonVariants = (0, import_class_variance_authority.cva)(
-  "rounded-lg disabled:select-none font-semibold cursor-pointer transition-colors duration-300 ease-in-out",
+  "rounded-lg disabled:select-none font-semibold cursor-pointer transition-colors duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",
   {
     variants: {
       variant: {
@@ -390,11 +469,29 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
         error: "bg-error-700 border-error-700 active:bg-error-900 active:border-error-900 hover:bg-error-800 hover:border-error-800",
         warning: "bg-warning-600 border-warning-600 active:bg-warning-900 active:border-warning-900 hover:bg-warning-700 hover:border-warning-700",
         default: "bg-gray-600 border-gray-600 active:bg-gray-900 active:border-gray-900 hover:bg-gray-700 hover:border-gray-700",
+        blue: "bg-blue-600 border-blue-600 active:bg-blue-900 active:border-blue-900 hover:bg-blue-700 hover:border-blue-700",
+        bluegray: "bg-bluegray-600 border-bluegray-600 active:bg-bluegray-900 active:border-bluegray-900 hover:bg-bluegray-700 hover:border-bluegray-700",
+        bluelight: "bg-bluelight-600 border-bluelight-600 active:bg-bluelight-900 active:border-bluelight-900 hover:bg-bluelight-700 hover:border-bluelight-700",
+        indigo: "bg-indigo-600 border-indigo-600 active:bg-indigo-900 active:border-indigo-900 hover:bg-indigo-700 hover:border-indigo-700",
+        purple: "bg-purple-600 border-purple-600 active:bg-purple-900 active:border-purple-900 hover:bg-purple-700 hover:border-purple-700",
+        violet: "bg-violet-600 border-violet-600 active:bg-violet-900 active:border-violet-900 hover:bg-violet-700 hover:border-violet-700",
+        pink: "bg-pink-600 border-pink-600 active:bg-pink-900 active:border-pink-900 hover:bg-pink-700 hover:border-pink-700",
+        rose: "bg-rose-600 border-rose-600 active:bg-rose-900 active:border-rose-900 hover:bg-rose-700 hover:border-rose-700",
+        orange: "bg-orange-600 border-orange-600 active:bg-orange-900 active:border-orange-900 hover:bg-orange-700 hover:border-orange-700",
         "primary-outlined": "border-primary-600 text-primary-600 hover:bg-primary-100 active:bg-primary-200 active:border-primary-700",
         "success-outlined": "border-success-600 text-success-600 hover:bg-success-50 hover:border-success-700 hover:text-success-700 active:bg-success-100 active:text-success-900 active:border-success-900",
         "error-outlined": "border-error-700 text-error-700 hover:bg-error-100 hover:border-error-700 hover:text-error-700 active:bg-error-200 active:text-error-700 active:border-error-800",
         "warning-outlined": "border-warning-500 text-warning-500 hover:bg-warning-50 hover:border-warning-600 hover:text-warning-600 active:bg-warning-100 active:text-warning-700 active:border-warning-700",
-        "default-outlined": "border-gray-700 text-gray-700 hover:bg-gray-100 hover:border-gray-700 hover:text-gray-700 active:bg-gray-300 active:text-gray-800 active:border-gray-800"
+        "default-outlined": "border-gray-700 text-gray-700 hover:bg-gray-100 hover:border-gray-700 hover:text-gray-700 active:bg-gray-300 active:text-gray-800 active:border-gray-800",
+        "blue-outlined": "border-blue-600 text-blue-600 hover:bg-blue-50 hover:border-blue-700 hover:text-blue-700 active:bg-blue-100 active:text-blue-900 active:border-blue-900",
+        "bluegray-outlined": "border-bluegray-600 text-bluegray-600 hover:bg-bluegray-50 hover:border-bluegray-700 hover:text-bluegray-700 active:bg-bluegray-100 active:text-bluegray-900 active:border-bluegray-900",
+        "bluelight-outlined": "border-bluelight-600 text-bluelight-600 hover:bg-bluelight-50 hover:border-bluelight-700 hover:text-bluelight-700 active:bg-bluelight-100 active:text-bluelight-900 active:border-bluelight-900",
+        "indigo-outlined": "border-indigo-600 text-indigo-600 hover:bg-indigo-50 hover:border-indigo-700 hover:text-indigo-700 active:bg-indigo-100 active:text-indigo-900 active:border-indigo-900",
+        "purple-outlined": "border-purple-600 text-purple-600 hover:bg-purple-50 hover:border-purple-700 hover:text-purple-700 active:bg-purple-100 active:text-purple-900 active:border-purple-900",
+        "violet-outlined": "border-violet-600 text-violet-600 hover:bg-violet-50 hover:border-violet-700 hover:text-violet-700 active:bg-violet-100 active:text-violet-900 active:border-violet-900",
+        "pink-outlined": "border-pink-600 text-pink-600 hover:bg-pink-50 hover:border-pink-700 hover:text-pink-700 active:bg-pink-100 active:text-pink-900 active:border-pink-900",
+        "rose-outlined": "border-rose-600 text-rose-600 hover:bg-rose-50 hover:border-rose-700 hover:text-rose-700 active:bg-rose-100 active:text-rose-900 active:border-rose-900",
+        "orange-outlined": "border-orange-600 text-orange-600 hover:bg-orange-50 hover:border-orange-700 hover:text-orange-700 active:bg-orange-100 active:text-orange-900 active:border-orange-900"
       },
       size: {
         sm: "text-sm px-3.5 py-2",
@@ -404,7 +501,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
     },
     defaultVariants: {
       variant: "filled",
-      size: "md"
+      size: "sm"
     }
   }
 );
@@ -418,36 +515,187 @@ var Button = ({
   disabled,
   endIcon,
   size,
+  type = "button",
   ...props
 }) => {
-  return /* @__PURE__ */ import_react6.default.createElement(
-    "button",
+  return (
+    // <button
+    //   {...props}
+    //   disabled={disabled}
+    //   type={type}
+    //   aria-disabled={disabled}
+    //   className={cn(
+    //     fullWidth && "w-full",
+    //     buttonVariants({ intent, className, variant, size }),
+    //     "flex items-center text-center justify-center gap-2"
+    //   )}
+    // >
+    //   {startIcon}
+    //   {children}
+    //   {endIcon}
+    // </button>
+    /* @__PURE__ */ import_react6.default.createElement(
+      "button",
+      {
+        ...props,
+        disabled,
+        "aria-disabled": disabled,
+        type,
+        className: cn(
+          fullWidth && "w-full",
+          buttonVariants({ intent, className, variant, size }),
+          "flex items-center text-center justify-center gap-2"
+        )
+      },
+      startIcon && /* @__PURE__ */ import_react6.default.createElement("span", { "aria-hidden": "true" }, startIcon),
+      children,
+      endIcon && /* @__PURE__ */ import_react6.default.createElement("span", { "aria-hidden": "true" }, endIcon)
+    )
+  );
+};
+var Button_default = Button;
+
+// app/components/Callout.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_react7 = __toESM(require("react"), 1);
+var calloutVariants = (0, import_class_variance_authority2.cva)("py-3 px-4 font-medium rounded-md", {
+  variants: {
+    variant: {
+      filled: "",
+      outlined: "border"
+    },
+    intent: {
+      primary: "",
+      warning: "",
+      error: "",
+      success: "",
+      default: ""
+    },
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg"
+    }
+  },
+  compoundVariants: [
     {
-      ...props,
-      disabled,
+      variant: "filled",
+      intent: "primary",
+      className: "bg-primary-50 text-primary-600"
+    },
+    {
+      variant: "outlined",
+      intent: "primary",
+      className: "border-primary-200 text-primary-600 bg-transparent"
+    },
+    {
+      variant: "filled",
+      intent: "warning",
+      className: "bg-warning-50 text-warning-600"
+    },
+    {
+      variant: "outlined",
+      intent: "warning",
+      className: "border-warning-200 text-warning-600 bg-transparent"
+    },
+    {
+      variant: "filled",
+      intent: "error",
+      className: "bg-error-50 text-error-600"
+    },
+    {
+      variant: "outlined",
+      intent: "error",
+      className: "border-error-200 text-error-600 bg-transparent"
+    },
+    {
+      variant: "filled",
+      intent: "success",
+      className: "bg-success-50 text-success-600"
+    },
+    {
+      variant: "outlined",
+      intent: "success",
+      className: "border-success-200 text-success-600 bg-transparent"
+    },
+    {
+      variant: "filled",
+      intent: "default",
+      className: "bg-gray-50 text-gray-600"
+    },
+    {
+      variant: "outlined",
+      intent: "default",
+      className: "border-gray-300 text-gray-600 bg-transparent"
+    }
+  ],
+  defaultVariants: {
+    variant: "filled",
+    intent: "primary",
+    size: "sm"
+  }
+});
+var Callout = ({
+  children,
+  variant,
+  intent,
+  size,
+  startIcon,
+  endIcon,
+  className
+}) => {
+  return /* @__PURE__ */ import_react7.default.createElement(
+    "div",
+    {
+      role: "alert",
       className: cn(
-        fullWidth && "w-full",
-        buttonVariants({ intent, className, variant, size }),
-        "flex items-center text-center justify-center gap-2"
+        calloutVariants({ variant, intent, size }),
+        "flex items-center justify-between gap-2",
+        className
       )
     },
-    startIcon,
-    children,
-    endIcon
+    /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-2" }, startIcon && /* @__PURE__ */ import_react7.default.createElement("span", null, startIcon), children),
+    endIcon && /* @__PURE__ */ import_react7.default.createElement("span", null, endIcon)
   );
 };
-var Button_default = Button;
+var Callout_default = Callout;
+
+// app/components/Card.tsx
+var import_react8 = __toESM(require("react"), 1);
+function Card_default({ children, className }) {
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: cn("bg-white rounded-lg border border-gray-200 shadow-sm", className) }, children);
+}
+var CardHeader = ({ children, className }) => {
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: cn("p-4 pb-4", className) }, children);
+};
+var CardTitle = ({ children, className }) => {
+  return /* @__PURE__ */ import_react8.default.createElement("h3", { className: cn("text-lg font-semibold text-gray-900 mb-2", className) }, children);
+};
+var CardDescription = ({ children, className }) => {
+  return /* @__PURE__ */ import_react8.default.createElement("p", { className: cn("text-sm text-gray-600 mb-4", className) }, children);
+};
+var CardAction = ({ children, className }) => {
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: cn("mt-4", className) }, children);
+};
+var CardContent = ({ children, className }) => {
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: cn("p-6 pt-0", className) }, children);
+};
+var CardFooter = ({ children, className }) => {
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: cn("p-6 pt-0", className) }, children);
+};
 
 // app/components/Checkbox.tsx
-var import_react7 = __toESM(require("react"), 1);
-var import_class_variance_authority2 = require("class-variance-authority");
-var checkboxVariant = (0, import_class_variance_authority2.cva)(
+var import_react9 = __toESM(require("react"), 1);
+var import_class_variance_authority3 = require("class-variance-authority");
+var checkboxVariant = (0, import_class_variance_authority3.cva)(
   "peer relative cursor-pointer appearance-none rounded-[4px] border border-gray-300 transition-all checked:border-primary-600 checked:bg-primary-50 hover:bg-primary-50 disabled:opacity-30 disabled:pointer-events-none",
   {
     variants: {
       size: {
         sm: "h-3 w-3",
-        lg: "h-3.5 w-3.5"
+        lg: "h-3.5 w-3.5",
+        xl: "h-4 w-4"
       }
     },
     defaultVariants: {
@@ -455,47 +703,59 @@ var checkboxVariant = (0, import_class_variance_authority2.cva)(
     }
   }
 );
-var Checkbox = (0, import_react7.forwardRef)(
-  ({ disabled, checked, size, className, children, ...props }, ref) => {
-    return /* @__PURE__ */ import_react7.default.createElement("div", { className: "inline-flex relative items-center" }, /* @__PURE__ */ import_react7.default.createElement(
+var Checkbox = (0, import_react9.forwardRef)(
+  ({ disabled, checked, size, className, children, id, ...props }, ref) => {
+    return /* @__PURE__ */ import_react9.default.createElement("div", { className: "inline-flex relative items-center" }, /* @__PURE__ */ import_react9.default.createElement(
       "input",
       {
         type: "checkbox",
         ref,
+        id,
         ...props,
         disabled,
         checked,
-        className: cn(checkboxVariant({ className, size }))
+        className: cn(
+          "peer",
+          checkboxVariant({ className, size }),
+          "focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2"
+        )
       }
-    ), /* @__PURE__ */ import_react7.default.createElement("span", { className: "absolute text-primary-600 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100" }, /* @__PURE__ */ import_react7.default.createElement(
-      "svg",
+    ), /* @__PURE__ */ import_react9.default.createElement(
+      "span",
       {
-        xmlns: "http://www.w3.org/2000/svg",
-        className: "w-2.5 h-2.5",
-        viewBox: "0 0 20 20",
-        fill: "currentColor",
-        stroke: "currentColor",
-        strokeWidth: "1"
+        "aria-hidden": "true",
+        className: "absolute text-primary-600 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100"
       },
-      /* @__PURE__ */ import_react7.default.createElement(
-        "path",
+      /* @__PURE__ */ import_react9.default.createElement(
+        "svg",
         {
-          fillRule: "evenodd",
-          d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
-          clipRule: "evenodd"
-        }
+          xmlns: "http://www.w3.org/2000/svg",
+          className: "w-2.5 h-2.5",
+          viewBox: "0 0 20 20",
+          fill: "currentColor",
+          stroke: "currentColor",
+          strokeWidth: "1"
+        },
+        /* @__PURE__ */ import_react9.default.createElement(
+          "path",
+          {
+            fillRule: "evenodd",
+            d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+            clipRule: "evenodd"
+          }
+        )
       )
-    )));
+    ));
   }
 );
 Checkbox.displayName = "Checkbox";
 var Checkbox_default = Checkbox;
 
 // app/components/Chip.tsx
-var import_react8 = __toESM(require("react"), 1);
-var import_class_variance_authority3 = require("class-variance-authority");
-var chipVariants = (0, import_class_variance_authority3.cva)(
-  "rounded-full capitalize flex items-center w-fit gap-2",
+var import_react10 = __toESM(require("react"), 1);
+var import_class_variance_authority4 = require("class-variance-authority");
+var chipVariants = (0, import_class_variance_authority4.cva)(
+  "inline-flex items-center w-fit gap-2 rounded-full capitalize",
   {
     variants: {
       intent: {
@@ -503,6 +763,7 @@ var chipVariants = (0, import_class_variance_authority3.cva)(
         success: "bg-success-50 text-success-600",
         warning: "bg-warning-50 text-warning-500",
         error: "bg-error-50 text-error-600",
+        blue: "bg-blue-100 text-blue-700",
         primary: "bg-primary-100 text-primary-700",
         bluegray: "bg-bluegray-100 text-bluegray-500",
         bluelight: "bg-bluelight-100 text-bluelight-600",
@@ -516,7 +777,7 @@ var chipVariants = (0, import_class_variance_authority3.cva)(
       size: {
         sm: "text-xs px-2 py-0.5",
         md: "text-sm px-2.5 py-0.5",
-        lg: "text-sm px-3 py-1"
+        lg: "text-base px-3 py-1"
       }
     },
     defaultVariants: {
@@ -530,6 +791,7 @@ var dotColorVariants = {
   success: "bg-success-600",
   warning: "bg-warning-600",
   error: "bg-error-600",
+  blue: "bg-blue-600",
   primary: "bg-primary-600",
   bluegray: "bg-bluegray-500",
   bluelight: "bg-bluelight-600",
@@ -546,24 +808,37 @@ var Chip = ({
   size,
   intent = "default",
   dot,
-  dotColor
+  dotColor,
+  startIcon,
+  endIcon,
+  ...rest
 }) => {
   const resolvedIntent = intent ?? "default";
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: cn(chipVariants({ intent: resolvedIntent, size }), className) }, dot && /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(
     "span",
     {
-      className: cn(
-        "w-1.5 h-1.5 rounded-full",
-        dotColor || dotColorVariants[resolvedIntent] || "bg-primary-600"
-        // Default fallback
-      )
-    }
-  ), /* @__PURE__ */ import_react8.default.createElement("span", null, children));
+      className: cn(chipVariants({ intent: resolvedIntent, size }), className),
+      ...rest
+    },
+    startIcon && /* @__PURE__ */ import_react10.default.createElement("span", { "aria-hidden": "true" }, startIcon),
+    !startIcon && dot && /* @__PURE__ */ import_react10.default.createElement(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "w-1.5 h-1.5 rounded-full",
+          dotColor || dotColorVariants[resolvedIntent] || "bg-primary-600"
+        )
+      }
+    ),
+    children,
+    endIcon && /* @__PURE__ */ import_react10.default.createElement("span", { "aria-hidden": "true" }, endIcon)
+  );
 };
 var Chip_default = Chip;
 
 // app/components/CircularProgress.tsx
-var import_react9 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var CircularProgressBar = ({
   percentage,
   size = 160,
@@ -575,7 +850,7 @@ var CircularProgressBar = ({
   const viewBox = `0 0 ${size} ${size}`;
   const dashArray = radius * Math.PI * 2;
   const dashOffset = dashArray - dashArray * (percentage || 0) / 100;
-  return /* @__PURE__ */ import_react9.default.createElement("svg", { width: size, height: size, viewBox }, /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react11.default.createElement("svg", { width: size, height: size, viewBox }, /* @__PURE__ */ import_react11.default.createElement(
     "circle",
     {
       className: "fill-none stroke-gray-200",
@@ -584,7 +859,7 @@ var CircularProgressBar = ({
       r: radius,
       strokeWidth: `${strokeWidth}px`
     }
-  ), /* @__PURE__ */ import_react9.default.createElement(
+  ), /* @__PURE__ */ import_react11.default.createElement(
     "circle",
     {
       className: "fill-none stroke-primary-600 transition-all delay-200 ease-in",
@@ -599,7 +874,7 @@ var CircularProgressBar = ({
         strokeDashoffset: dashOffset
       }
     }
-  ), /* @__PURE__ */ import_react9.default.createElement(
+  ), /* @__PURE__ */ import_react11.default.createElement(
     "text",
     {
       x: "50%",
@@ -615,14 +890,14 @@ var CircularProgressBar = ({
 var CircularProgress_default = CircularProgressBar;
 
 // app/components/Divider.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 var Divider = ({
   width,
   height,
   position = "horizontal",
   className
 }) => {
-  return /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(
     "div",
     {
       style: {
@@ -639,52 +914,142 @@ var Divider = ({
 };
 var Divider_default = Divider;
 
+// app/components/Drawer.tsx
+var import_react13 = require("react");
+var import_react14 = require("@remixicon/react");
+var Drawer = ({
+  isOpen,
+  setIsOpen,
+  children,
+  position = "right",
+  width = "w-80",
+  height = "h-64",
+  className,
+  showCloseButton = true,
+  closeOnOutsideClick = true
+}) => {
+  const handleClose = (0, import_react13.useCallback)(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+  (0, import_react13.useEffect)(() => {
+    document.body.style.overflow = isOpen ? "hidden" : "";
+  }, [isOpen]);
+  (0, import_react13.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        handleClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, handleClose]);
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "fixed inset-0 bg-black/50 transition-opacity duration-300 z-[10000000000000000]",
+        isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+      ),
+      onClick: () => closeOnOutsideClick && handleClose()
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "fixed bg-white shadow-xl p-4 transition-transform duration-300 z-[100000000000000000]",
+        position === "right" && `top-0 right-0 ${width} h-full`,
+        position === "left" && `top-0 left-0 ${width} h-full`,
+        position === "top" && `top-0 left-0 w-full ${height}`,
+        position === "bottom" && `bottom-0 left-0 w-full ${height}`,
+        !isOpen && (position === "right" ? "translate-x-full" : position === "left" ? "-translate-x-full" : position === "top" ? "-translate-y-full" : "translate-y-full"),
+        isOpen && "translate-x-0 translate-y-0",
+        className
+      ),
+      onClick: (e) => e.stopPropagation()
+    },
+    showCloseButton && /* @__PURE__ */ React.createElement(
+      Button_default,
+      {
+        size: "sm",
+        variant: "outlined",
+        intent: "default-outlined",
+        onClick: handleClose,
+        startIcon: /* @__PURE__ */ React.createElement(import_react14.RiCloseLine, { size: 20 }),
+        "aria-label": "Close drawer",
+        className: "absolute border-none p-1 transition-colors top-3 right-4"
+      }
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: "overflow-y-auto h-full" }, children)
+  ));
+};
+var Drawer_default = Drawer;
+
 // app/components/Dropdown.tsx
-var import_react14 = __toESM(require("react"), 1);
-var import_react15 = require("@remixicon/react");
+var import_react17 = __toESM(require("react"), 1);
+var import_react18 = require("@remixicon/react");
 
 // app/components/Input.tsx
-var import_react11 = __toESM(require("react"), 1);
-var Input = (0, import_react11.forwardRef)(
-  ({ size, startIcon, endIcon, className, type, disabled, ...props }, ref) => {
-    return /* @__PURE__ */ import_react11.default.createElement(
+var import_react15 = __toESM(require("react"), 1);
+var Input = (0, import_react15.forwardRef)(
+  ({
+    size,
+    startIcon,
+    endIcon,
+    className,
+    type,
+    error,
+    disabled,
+    id,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ import_react15.default.createElement(
       "div",
       {
         className: cn(
-          "group flex items-center gap-2 p-3.5 border border-gray-200 rounded-lg bg-white shadow-xs hover:bg-gray-50 hover:border-gray-300 focus-within:border-gray-800 focus-within:bg-gray-25 focus-within:hover:bg-gray-50 focus-within:hover:border-gray-800 has-[:disabled]:opacity-30 has-[:disabled]:bg-gray-300 has-[:disabled]:select-none has-[:disabled]:pointer-events-none",
+          "group flex items-center gap-2 p-3.5 border border-gray-200 rounded-lg bg-white shadow-[0px_1px_2px_0px_#1018280D] hover:bg-gray-50 hover:border-gray-300 focus-within:border-gray-800 focus-within:bg-gray-25 focus-within:hover:bg-gray-50 focus-within:hover:border-gray-800 has-[:disabled]:opacity-30 has-[:disabled]:bg-gray-300 has-[:disabled]:select-none has-[:disabled]:pointer-events-none",
           size === "sm" ? "w-[320px] h-10" : size === "lg" ? "w-[313px] h-11" : "w-full h-10",
+          error && "border-error-500 hover:border-error-600 focus-within:border-error-500 focus-within:hover:border-error-500",
           className
         )
       },
-      /* @__PURE__ */ import_react11.default.createElement(
+      startIcon && /* @__PURE__ */ import_react15.default.createElement(
         "span",
         {
+          "aria-hidden": "true",
           className: cn(
-            startIcon ? "group-hover:text-gray-600 group-focus-within:text-gray-600" : "hidden",
-            disabled === true && "text-gray-900"
+            "group-hover:text-gray-600 group-focus-within:text-gray-600",
+            disabled && "text-gray-900",
+            error && "text-error-500"
           )
         },
         startIcon
       ),
-      /* @__PURE__ */ import_react11.default.createElement(
+      /* @__PURE__ */ import_react15.default.createElement(
         "input",
         {
           ...props,
           ref,
+          id,
           disabled,
           type,
+          "aria-label": ariaLabel,
+          "aria-describedby": ariaDescribedby,
+          "aria-disabled": disabled,
           className: cn(
-            "w-full text-sm focus:outline-none bg-transparent disabled:text-gray-900 placeholder:text-gray-500 group-hover:placeholder:text-gray-500",
+            "w-full text-sm focus:outline-none focus:ring-offset-0 bg-transparent disabled:text-gray-900 placeholder:text-gray-500 group-hover:placeholder:text-gray-500 rounded-md",
             size
           )
         }
       ),
-      /* @__PURE__ */ import_react11.default.createElement(
+      endIcon && /* @__PURE__ */ import_react15.default.createElement(
         "span",
         {
+          "aria-hidden": "true",
           className: cn(
-            endIcon ? "group-hover:text-gray-600 group-focus-within:text-gray-600" : "hidden",
-            disabled === true && "text-gray-900"
+            "group-hover:text-gray-600 group-focus-within:text-gray-600",
+            disabled && "text-gray-900"
           )
         },
         endIcon
@@ -696,9 +1061,9 @@ Input.displayName = "Input";
 var Input_default = Input;
 
 // app/components/Label.tsx
-var import_class_variance_authority4 = require("class-variance-authority");
-var import_react12 = __toESM(require("react"), 1);
-var labelVariants = (0, import_class_variance_authority4.cva)("flex item-start", {
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_react16 = __toESM(require("react"), 1);
+var labelVariants = (0, import_class_variance_authority5.cva)("flex item-start", {
   variants: {
     size: {
       sm: "text-xs",
@@ -719,52 +1084,39 @@ var Label = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "label",
     {
       htmlFor,
-      className: cn("cursor-pointer", labelVariants({ className, size }), disabled === true ? "opacity-30 select-none" : "opacity-100"),
+      className: cn(
+        "cursor-pointer",
+        labelVariants({ className, size }),
+        disabled === true ? "opacity-30 select-none pointer-events-none" : "opacity-100"
+      ),
+      "aria-disabled": disabled,
       ...props
     },
-    children,
-    /* @__PURE__ */ import_react12.default.createElement("span", { className: cn(required === true ? "block text-red-500" : "hidden") }, "*")
+    /* @__PURE__ */ import_react16.default.createElement("span", { className: "flex items-center gap-1" }, children, required && /* @__PURE__ */ import_react16.default.createElement(
+      "span",
+      {
+        "aria-label": "required field",
+        role: "presentation",
+        className: "text-red-500",
+        "aria-hidden": "true"
+      },
+      "*"
+    ))
   );
 };
 var Label_default = Label;
 
-// app/components/Tooltip.tsx
-var import_class_variance_authority5 = require("class-variance-authority");
-var import_react13 = __toESM(require("react"), 1);
-var tooltipVariants = (0, import_class_variance_authority5.cva)(
-  "bg-white shadow-lg rounded-lg absolute hidden group-hover:block p-3 z-10 max-w-[328px] w-max whitespace-normal opacity-0 group-hover:opacity-100 transform transition-all duration-1000 ease-in-out group-hover:delay-[2000ms]",
-  {
-    variants: {
-      position: {
-        top: "bottom-[calc(100%+0px)] group-hover:translate-y-0 delay-1000 translate-y-[-10px]",
-        right: "top-1/2 -translate-y-1/2 left-[calc(100%+0px)] group-hover:translate-x-0 translate-x-[-10px]",
-        bottom: "top-[calc(100%+0px)] group-hover:translate-y-0 translate-y-[10px]",
-        left: "top-1/2 -translate-y-1/2 right-[calc(100%+0px)] group-hover:translate-x-0 translate-x-[10px]"
-      }
-    }
-  }
-);
-var Tooltip = ({
-  position,
-  content,
-  children,
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ import_react13.default.createElement("div", { ...props, className: "relative cursor-pointer text-sm group" }, /* @__PURE__ */ import_react13.default.createElement("div", null, children), /* @__PURE__ */ import_react13.default.createElement("span", { className: cn(tooltipVariants({ position }), className) }, content));
-};
-var Tooltip_default = Tooltip;
-
 // app/components/Dropdown.tsx
 var defaultRenderItem = (option) => {
-  return /* @__PURE__ */ import_react14.default.createElement(MenuItem, { label: option.label, value: option.value });
+  return /* @__PURE__ */ import_react17.default.createElement(MenuItem, { label: option.label, value: option.value });
 };
-var Dropdown = (0, import_react14.forwardRef)(
+var Dropdown = (0, import_react17.forwardRef)(
   ({
+    id = `dropdown-${Math.random().toString(36).substring(2, 11)}`,
     options,
     selected,
     setSelected,
@@ -777,39 +1129,42 @@ var Dropdown = (0, import_react14.forwardRef)(
     position = "top",
     width,
     info,
-    dropDownTooltip = false,
     dropdownFooter = false,
     onApply,
     disabled = false,
-    onReset
+    onReset,
+    footerAction
   }, ref) => {
     var _a, _b;
-    const [searchQuery, setSearchQuery] = (0, import_react14.useState)("");
-    const [filteredOptions, setFilteredOptions] = (0, import_react14.useState)(
+    const [searchQuery, setSearchQuery] = (0, import_react17.useState)("");
+    const [filteredOptions, setFilteredOptions] = (0, import_react17.useState)(
       options || []
     );
-    const [dropdownMenu, setDropdownMenu] = (0, import_react14.useState)(false);
-    const dropdownRef = (0, import_react14.useRef)(null);
-    (0, import_react14.useImperativeHandle)(ref, () => dropdownRef.current);
-    (0, import_react14.useEffect)(() => {
+    const [dropdownMenu, setDropdownMenu] = (0, import_react17.useState)(false);
+    const dropdownRef = (0, import_react17.useRef)(null);
+    (0, import_react17.useImperativeHandle)(ref, () => dropdownRef.current);
+    (0, import_react17.useEffect)(() => {
       if (options) {
         setFilteredOptions(options);
       }
     }, [options]);
-    const memoizedFilteredOptions = (0, import_react14.useMemo)(() => {
+    const memoizedFilteredOptions = (0, import_react17.useMemo)(() => {
       if (!search)
         return filteredOptions;
-      return filteredOptions.filter(
-        (option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())
-      );
+      return filteredOptions.filter((option) => {
+        if (typeof option.label === "string") {
+          return option.label.toLowerCase().includes(searchQuery.toLowerCase());
+        }
+        return option.label.toString().includes(searchQuery.toLowerCase());
+      });
     }, [search, searchQuery, filteredOptions]);
-    const handleSearchChange = (0, import_react14.useCallback)(
+    const handleSearchChange = (0, import_react17.useCallback)(
       (e) => {
         setSearchQuery(e.target.value);
       },
       []
     );
-    const toggleOption = (0, import_react14.useCallback)(
+    const toggleOption = (0, import_react17.useCallback)(
       (option) => {
         if (multiple && setSelected) {
           setSelected(
@@ -822,7 +1177,7 @@ var Dropdown = (0, import_react14.forwardRef)(
       },
       [multiple, setSelected]
     );
-    const handleCheckboxChange = (0, import_react14.useCallback)(
+    const handleCheckboxChange = (0, import_react17.useCallback)(
       (option) => {
         if (multiple && setSelected) {
           setSelected(
@@ -848,7 +1203,7 @@ var Dropdown = (0, import_react14.forwardRef)(
       setSelected == null ? void 0 : setSelected([]);
       setDropdownMenu(false);
     };
-    (0, import_react14.useEffect)(() => {
+    (0, import_react17.useEffect)(() => {
       document.addEventListener("mousedown", handleClickOutside);
       return () => {
         document.removeEventListener("mousedown", handleClickOutside);
@@ -859,12 +1214,13 @@ var Dropdown = (0, import_react14.forwardRef)(
         setDropdownMenu(false);
       }
     };
-    return /* @__PURE__ */ import_react14.default.createElement(
+    return /* @__PURE__ */ import_react17.default.createElement(
       "div",
       {
+        id,
         ref: dropdownRef,
         className: cn(
-          "relative ",
+          "relative bg-gray-25 shadow-[0px_1px_2px_0px_#1018280D] rounded-lg",
           !width && "w-full",
           disabled && "cursor-not-allowed opacity-50"
         ),
@@ -872,110 +1228,143 @@ var Dropdown = (0, import_react14.forwardRef)(
           width
         }
       },
-      /* @__PURE__ */ import_react14.default.createElement(
-        "div",
+      /* @__PURE__ */ import_react17.default.createElement(
+        "button",
         {
+          type: "button",
+          "aria-haspopup": "listbox",
+          "aria-expanded": dropdownMenu,
+          "aria-labelledby": `${id}-label`,
+          disabled,
           onClick: () => !disabled && setDropdownMenu((prev) => !prev),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              !disabled && setDropdownMenu((prev) => !prev);
+            }
+          },
           className: cn(
-            "hover:bg-gray-50 py-2 px-[14px] rounded-lg flex justify-between items-center text-gray-900 bg-gray-25 text-text-sm cursor-pointer",
-            dropdownMenu ? "border border-gray-800" : "border border-gray-200",
+            "w-full hover:bg-gray-50 py-2 px-[14px] rounded-lg flex justify-between items-center text-gray-900 bg-gray-25 text-text-sm cursor-pointer",
+            dropdownMenu ? "border border-primary-600" : "border border-gray-200",
             disabled && "bg-gray-300 hover:bg-gray-300 cursor-not-allowed"
           )
         },
-        /* @__PURE__ */ import_react14.default.createElement(
-          "section",
-          {
-            className: cn(
-              "flex items-center gap-2 text-ellipsis overflow-hidden"
-            )
-          },
-          icon && /* @__PURE__ */ import_react14.default.createElement("span", null, icon),
-          /* @__PURE__ */ import_react14.default.createElement("p", { className: "line-clamp-1 w-full" }, multiple ? ((selected == null ? void 0 : selected.length) ?? 0) > 0 ? `${selected == null ? void 0 : selected.length} Selected` : dropdownText : ((_a = selected == null ? void 0 : selected[0]) == null ? void 0 : _a.label) ? (_b = selected == null ? void 0 : selected[0]) == null ? void 0 : _b.label : dropdownText)
-        ),
-        /* @__PURE__ */ import_react14.default.createElement(import_react15.RiArrowDownSLine, { size: 18 })
+        /* @__PURE__ */ import_react17.default.createElement("section", { className: "flex items-center gap-2 text-ellipsis overflow-hidden" }, icon && /* @__PURE__ */ import_react17.default.createElement("span", { "aria-hidden": "true" }, icon), /* @__PURE__ */ import_react17.default.createElement("span", { id: `${id}-label`, className: "line-clamp-1 w-full" }, multiple ? ((selected == null ? void 0 : selected.length) ?? 0) > 0 ? `${selected == null ? void 0 : selected.length} Selected` : dropdownText : ((_a = selected == null ? void 0 : selected[0]) == null ? void 0 : _a.label) ? (_b = selected == null ? void 0 : selected[0]) == null ? void 0 : _b.label : dropdownText)),
+        /* @__PURE__ */ import_react17.default.createElement(import_react18.RiArrowDownSLine, { "aria-hidden": "true", size: 18 })
       ),
-      /* @__PURE__ */ import_react14.default.createElement(
+      /* @__PURE__ */ import_react17.default.createElement(
         "ul",
         {
+          role: "listbox",
+          "aria-multiselectable": multiple,
+          "aria-labelledby": `${id}-label`,
           className: cn(
             "max-h-0 opacity-0 overflow-hidden shadow-sm mt-1 rounded absolute text-[16px] bg-white z-[1000] w-full transition-all duration-75 delay-100 ease-in",
             position === "top" ? "top-10" : "bottom-10",
-            dropdownMenu && "max-h-[320px] opacity-[1] transition-all ease-in duration-150"
+            dropdownMenu ? "border border-primary-600" : "border border-gray-200",
+            dropdownMenu && "max-h-[360px] h-fit opacity-[1] transition-all ease-in duration-150"
           )
         },
-        search && /* @__PURE__ */ import_react14.default.createElement(
+        search && /* @__PURE__ */ import_react17.default.createElement(
           Input_default,
           {
+            id: `${id}-search`,
             type: "text",
             placeholder: "Search...",
+            "aria-label": "Search options",
             value: searchQuery,
             onChange: handleSearchChange,
-            className: "rounded rounded-b-none text-gray-800 bg-white w-full h-[35px] pl-3",
-            endIcon: /* @__PURE__ */ import_react14.default.createElement(import_react15.RiSearchLine, { size: 18 })
+            className: "rounded rounded-b-none text-gray-800 bg-white w-full h-[35px] pl-3 border-none",
+            endIcon: /* @__PURE__ */ import_react17.default.createElement(import_react18.RiSearchLine, { size: 18 })
           }
         ),
-        multiple && /* @__PURE__ */ import_react14.default.createElement("section", { className: "py-[6px] px-[14px] flex justify-between items-center" }, /* @__PURE__ */ import_react14.default.createElement(
-          "p",
+        multiple && /* @__PURE__ */ import_react17.default.createElement("section", { className: "py-[6px] px-[14px] flex justify-between items-center" }, /* @__PURE__ */ import_react17.default.createElement(
+          "button",
           {
+            type: "button",
+            "aria-label": "Select all",
             onClick: handleSelectAll,
             className: "text-text-sm  hover:text-primary-700 text-primary-600 cursor-pointer"
           },
           "Select all"
-        ), /* @__PURE__ */ import_react14.default.createElement(
+        ), /* @__PURE__ */ import_react17.default.createElement(
           "button",
           {
+            "aria-label": "Reset",
+            type: "button",
             className: "text-text-sm text-warning-500 hover:text-warning-600",
             onClick: handleReset
           },
           "Reset"
         )),
-        /* @__PURE__ */ import_react14.default.createElement("section", { className: "max-h-[200px] transition-all duration-75 delay-100 ease-in-out overflow-y-scroll" }, options ? memoizedFilteredOptions.map((option, i) => {
+        /* @__PURE__ */ import_react17.default.createElement("section", { className: "max-h-[200px] transition-all duration-75 delay-100 ease-in-out overflow-y-scroll" }, options ? memoizedFilteredOptions == null ? void 0 : memoizedFilteredOptions.map((option, i) => {
           var _a2;
-          return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, { key: i }, multiple ? /* @__PURE__ */ import_react14.default.createElement(
+          return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, { key: i }, multiple ? /* @__PURE__ */ import_react17.default.createElement(
             Label_default,
             {
-              className: "has-[:checked]:bg-primary-50 has-[:checked]:border-primary-600 hover:bg-gray-50 flex flex-col py-[6px] px-[14px] cursor-pointer border-l-4 border-transparent",
-              htmlFor: `checkbox-${option.value}`,
+              className: cn(
+                "has-[:checked]:bg-primary-50 has-[:checked]:border-primary-600 hover:bg-gray-50 flex flex-col py-[6px] px-[14px] cursor-pointer border-l-4 border-transparent",
+                (option == null ? void 0 : option.disabledOption) && "opacity-50 cursor-not-allowed hover:bg-white text-gray-300 select-none"
+              ),
+              htmlFor: `${id}-checkbox-${option.value}`,
               key: i
             },
-            /* @__PURE__ */ import_react14.default.createElement("section", { className: "flex items-center justify-between gap-2 w-full" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react14.default.createElement(
+            /* @__PURE__ */ import_react17.default.createElement("section", { className: "flex items-center justify-between gap-2 w-full" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react17.default.createElement(
               Checkbox_default,
               {
-                id: `checkbox-${option.value}`,
+                id: `${id}-checkbox-${option.value}`,
                 checked: (selected == null ? void 0 : selected.some(
                   (item) => item.value === option.value
                 )) ?? false,
-                onChange: () => handleCheckboxChange(option)
+                onChange: () => handleCheckboxChange(option),
+                disabled: option == null ? void 0 : option.disabledOption
               }
-            ), /* @__PURE__ */ import_react14.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react14.default.createElement("span", null, renderItem(option)), dropDownTooltip && /* @__PURE__ */ import_react14.default.createElement(
-              DropdownTooltip,
+            ), /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react17.default.createElement(
+              "div",
               {
-                tooltipContent: option == null ? void 0 : option.tooltipContent
-              }
-            ))), /* @__PURE__ */ import_react14.default.createElement("span", { className: "text-gray-500" }, option == null ? void 0 : option.info)),
-            /* @__PURE__ */ import_react14.default.createElement("span", { className: "pt-[2px] text-text-sm text-gray-500" }, option == null ? void 0 : option.addInfo)
-          ) : /* @__PURE__ */ import_react14.default.createElement(
+                style: {
+                  color: (option == null ? void 0 : option.disabledOption) ? "#D1D5DB" : option.labelTextColor
+                },
+                className: cn(
+                  "break-words",
+                  (option == null ? void 0 : option.disabledOption) && "text-gray-300"
+                )
+              },
+              renderItem(option)
+            ))), /* @__PURE__ */ import_react17.default.createElement("span", { className: "text-gray-500" }, option == null ? void 0 : option.info)),
+            /* @__PURE__ */ import_react17.default.createElement("span", { className: "pt-[2px] text-text-sm text-gray-500" }, option == null ? void 0 : option.addInfo)
+          ) : /* @__PURE__ */ import_react17.default.createElement(
             Label_default,
             {
               key: i,
+              htmlFor: `${id}-checkbox-${option.value}`,
               className: cn(
                 "flex justify-between py-[6px] px-[14px] hover:bg-gray-50 gap-2 items-center border-l-4 border-transparent cursor-pointer",
                 {
-                  "bg-primary-50 border-primary-600": selected && ((_a2 = selected[0]) == null ? void 0 : _a2.value) === option.value
+                  "bg-primary-50 border-primary-600": selected && ((_a2 = selected[0]) == null ? void 0 : _a2.value) === option.value,
+                  "opacity-50 cursor-not-allowed hover:bg-white text-gray-500": option == null ? void 0 : option.disabledOption
                 }
               ),
-              onClick: () => toggleOption(option)
+              onClick: () => !(option == null ? void 0 : option.disabledOption) && toggleOption(option)
             },
-            /* @__PURE__ */ import_react14.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react14.default.createElement("span", null, renderItem(option)), dropDownTooltip && /* @__PURE__ */ import_react14.default.createElement(
-              DropdownTooltip,
+            /* @__PURE__ */ import_react17.default.createElement(
+              "div",
               {
-                tooltipContent: option == null ? void 0 : option.tooltipContent
-              }
-            )),
-            /* @__PURE__ */ import_react14.default.createElement("span", { className: "text-gray-500" }, info)
+                style: {
+                  color: (option == null ? void 0 : option.disabledOption) ? "#D1D5DB" : option.labelTextColor
+                },
+                className: cn(
+                  "break-words",
+                  (option == null ? void 0 : option.disabledOption) && "text-gray-300"
+                )
+              },
+              renderItem(option)
+            ),
+            /* @__PURE__ */ import_react17.default.createElement("span", { className: "text-gray-500" }, info)
           ));
         }) : children),
-        dropdownFooter && /* @__PURE__ */ import_react14.default.createElement(
+        footerAction && /* @__PURE__ */ import_react17.default.createElement("div", { className: "py-2 mt-1 px-2 border-t" }, footerAction),
+        dropdownFooter && /* @__PURE__ */ import_react17.default.createElement(
           DropdownFooter,
           {
             setDropdownMenu,
@@ -987,28 +1376,24 @@ var Dropdown = (0, import_react14.forwardRef)(
   }
 );
 var MenuItem = ({ label, children }) => {
-  return /* @__PURE__ */ import_react14.default.createElement("p", { className: "break-all" }, label || children);
-};
-var DropdownTooltip = ({
-  tooltipContent
-}) => {
-  const content = tooltipContent || "";
-  return content ? /* @__PURE__ */ import_react14.default.createElement(Tooltip_default, { position: "right", content }, /* @__PURE__ */ import_react14.default.createElement(import_react15.RiErrorWarningLine, { color: "#98A2B3", size: 14 })) : null;
+  return /* @__PURE__ */ import_react17.default.createElement("p", { className: "break-all" }, label || children);
 };
 var DropdownFooter = ({
-  // onReset,
   onApply,
   setDropdownMenu
 }) => {
-  return /* @__PURE__ */ import_react14.default.createElement("div", { className: "flex justify-end border-t border-gray-200 px-[14px] py-[8px] text-text-sm" }, /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex justify-end border-t border-gray-200 px-[14px] py-[8px] text-text-sm" }, /* @__PURE__ */ import_react17.default.createElement(
     "button",
     {
+      type: "button",
       className: "text-primary-600 hover:text-primary-700",
       onClick: () => {
         if (onApply) {
           onApply();
         }
-        setDropdownMenu(false);
+        if (setDropdownMenu) {
+          setDropdownMenu(false);
+        }
       }
     },
     "Apply"
@@ -1017,38 +1402,324 @@ var DropdownFooter = ({
 Dropdown.displayName = "Dropdown";
 var Dropdown_default = Dropdown;
 
-// app/components/DropdownWithIcon.tsx
-var import_react16 = __toESM(require("react"), 1);
-var import_react17 = require("@remixicon/react");
+// app/components/DropdownMenu.tsx
+var import_react19 = require("@remixicon/react");
+var import_react20 = __toESM(require("react"), 1);
+var DropdownContext = import_react20.default.createContext(null);
+function DropdownMenu({ children }) {
+  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
+  const [focusedIndex, setFocusedIndex] = (0, import_react20.useState)(-1);
+  const triggerRef = (0, import_react20.useRef)(null);
+  const contentRef = (0, import_react20.useRef)(null);
+  const menuItemsRef = (0, import_react20.useRef)([]);
+  const itemsCountRef = (0, import_react20.useRef)(0);
+  const registerItem = (0, import_react20.useCallback)(() => {
+    const idx = itemsCountRef.current;
+    itemsCountRef.current += 1;
+    return idx;
+  }, []);
+  const closeMenu = () => {
+    setIsOpen(false);
+    setFocusedIndex(-1);
+  };
+  (0, import_react20.useEffect)(() => {
+    if (!isOpen)
+      return;
+    const handleClickOutside = (e) => {
+      if (triggerRef.current && contentRef.current && !triggerRef.current.contains(e.target) && !contentRef.current.contains(e.target)) {
+        closeMenu();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  (0, import_react20.useEffect)(() => {
+    if (!isOpen)
+      return;
+    const handleKey = (event) => {
+      var _a;
+      switch (event.key) {
+        case "Escape":
+          event.preventDefault();
+          closeMenu();
+          (_a = triggerRef.current) == null ? void 0 : _a.focus();
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          setFocusedIndex(
+            (prev) => prev < itemsCountRef.current - 1 ? prev + 1 : 0
+          );
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          setFocusedIndex(
+            (prev) => prev > 0 ? prev - 1 : itemsCountRef.current - 1
+          );
+          break;
+        case "Home":
+          event.preventDefault();
+          setFocusedIndex(0);
+          break;
+        case "End":
+          event.preventDefault();
+          setFocusedIndex(itemsCountRef.current - 1);
+          break;
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    setFocusedIndex(0);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [isOpen]);
+  (0, import_react20.useEffect)(() => {
+    if (!isOpen)
+      return;
+    const el = menuItemsRef.current[focusedIndex];
+    if (el)
+      el.focus();
+  }, [focusedIndex, isOpen]);
+  const contextValue = {
+    isOpen,
+    setIsOpen,
+    triggerRef,
+    contentRef,
+    focusedIndex,
+    setFocusedIndex,
+    itemsCount: itemsCountRef.current,
+    registerItem,
+    menuItemsRef
+  };
+  return /* @__PURE__ */ import_react20.default.createElement(DropdownContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "relative inline-block text-left" }, children));
+}
+function DropdownMenuTrigger({
+  children,
+  isOpen,
+  setIsOpen
+}) {
+  const ctx = import_react20.default.useContext(DropdownContext);
+  const actualIsOpen = (ctx == null ? void 0 : ctx.isOpen) ?? isOpen;
+  const actualSetIsOpen = (ctx == null ? void 0 : ctx.setIsOpen) ?? setIsOpen;
+  const handleKey = (e) => {
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        actualSetIsOpen == null ? void 0 : actualSetIsOpen(!actualIsOpen);
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        actualSetIsOpen == null ? void 0 : actualSetIsOpen(true);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        actualSetIsOpen == null ? void 0 : actualSetIsOpen(true);
+        break;
+    }
+  };
+  return /* @__PURE__ */ import_react20.default.createElement(
+    "div",
+    {
+      ref: ctx == null ? void 0 : ctx.triggerRef,
+      tabIndex: 0,
+      role: "button",
+      "aria-haspopup": "menu",
+      "aria-expanded": actualIsOpen,
+      onClick: () => actualSetIsOpen == null ? void 0 : actualSetIsOpen(!actualIsOpen),
+      onKeyDown: handleKey,
+      className: "cursor-pointer outline-none focus:ring-2 focus:ring-primary-500 rounded"
+    },
+    children
+  );
+}
+function DropdownMenuContent({
+  children,
+  isOpen,
+  align = "right",
+  className = ""
+}) {
+  const ctx = import_react20.default.useContext(DropdownContext);
+  const actualIsOpen = (ctx == null ? void 0 : ctx.isOpen) ?? isOpen;
+  const [visible, setVisible] = (0, import_react20.useState)(actualIsOpen);
+  (0, import_react20.useEffect)(() => {
+    if (actualIsOpen)
+      setVisible(true);
+    else
+      setTimeout(() => setVisible(false), 150);
+  }, [actualIsOpen]);
+  if (!visible)
+    return null;
+  const pos = align === "left" || align === "start" ? "right-0" : align === "right" || align === "end" ? "left-0" : align === "center" ? "left-1/2 -translate-x-1/2" : "";
+  return /* @__PURE__ */ import_react20.default.createElement(
+    "div",
+    {
+      ref: ctx == null ? void 0 : ctx.contentRef,
+      role: "menu",
+      className: cn(
+        "absolute w-56 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50 transition-all",
+        actualIsOpen ? "opacity-100" : "opacity-0 -translate-y-2",
+        pos,
+        className
+      )
+    },
+    children
+  );
+}
+function DropdownMenuItemWrapper({
+  children,
+  onClick,
+  onKeyDown,
+  disabled,
+  isSubTrigger,
+  className,
+  "aria-expanded": ariaExpanded
+}) {
+  const ctx = import_react20.default.useContext(DropdownContext);
+  const [index] = (0, import_react20.useState)(() => (ctx == null ? void 0 : ctx.registerItem()) ?? -1);
+  const ref = (0, import_react20.useRef)(null);
+  (0, import_react20.useEffect)(() => {
+    if (ctx && index >= 0) {
+      ctx.menuItemsRef.current[index] = ref.current;
+    }
+  }, [index, ctx]);
+  const handleKey = (e) => {
+    if (onKeyDown)
+      onKeyDown(e);
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (!disabled)
+        onClick == null ? void 0 : onClick();
+    }
+  };
+  return /* @__PURE__ */ import_react20.default.createElement(
+    "div",
+    {
+      ref,
+      role: "menuitem",
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled,
+      "aria-expanded": ariaExpanded,
+      onClick: () => !disabled && (onClick == null ? void 0 : onClick()),
+      onKeyDown: handleKey,
+      className: cn(
+        "px-4 py-2 flex items-center justify-between text-sm cursor-pointer rounded",
+        disabled ? "text-gray-400 cursor-not-allowed" : "hover:bg-gray-100",
+        className
+      )
+    },
+    children
+  );
+}
+function DropdownMenuItem({
+  children,
+  className = "",
+  onClick,
+  disabled,
+  shortcut
+}) {
+  const ctx = import_react20.default.useContext(DropdownContext);
+  return /* @__PURE__ */ import_react20.default.createElement(
+    DropdownMenuItemWrapper,
+    {
+      disabled,
+      onClick: () => {
+        if (!disabled) {
+          onClick == null ? void 0 : onClick();
+          ctx == null ? void 0 : ctx.setIsOpen(false);
+        }
+      },
+      className
+    },
+    /* @__PURE__ */ import_react20.default.createElement("span", null, children),
+    shortcut && /* @__PURE__ */ import_react20.default.createElement("kbd", { className: "text-xs text-gray-400" }, shortcut)
+  );
+}
+function DropdownMenuLabel({ children }) {
+  return /* @__PURE__ */ import_react20.default.createElement("div", { className: "px-4 py-2 text-sm font-semibold text-gray-700" }, children);
+}
+function DropdownMenuSeparator() {
+  return /* @__PURE__ */ import_react20.default.createElement("div", { className: "border-t border-gray-100 my-1" });
+}
+var SubmenuContext = import_react20.default.createContext(null);
+function DropdownMenuSub({ children }) {
+  const [isSubOpen, setIsSubOpen] = (0, import_react20.useState)(false);
+  return /* @__PURE__ */ import_react20.default.createElement(SubmenuContext.Provider, { value: { isSubOpen, setIsSubOpen } }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "relative" }, children));
+}
+function DropdownMenuSubTrigger({ children }) {
+  const sub = import_react20.default.useContext(SubmenuContext);
+  const handleKey = (e) => {
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      sub.setIsSubOpen(true);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      sub.setIsSubOpen(false);
+    }
+  };
+  return /* @__PURE__ */ import_react20.default.createElement(
+    DropdownMenuItemWrapper,
+    {
+      isSubTrigger: true,
+      "aria-expanded": sub.isSubOpen,
+      onClick: () => sub.setIsSubOpen(!sub.isSubOpen),
+      onKeyDown: handleKey
+    },
+    /* @__PURE__ */ import_react20.default.createElement("span", { className: "flex-1" }, children),
+    /* @__PURE__ */ import_react20.default.createElement(
+      import_react19.RiArrowDownSLine,
+      {
+        className: cn(
+          "w-4 h-4 transition-transform",
+          sub.isSubOpen && "rotate-180"
+        )
+      }
+    )
+  );
+}
+function DropdownMenuSubContent({ children }) {
+  const sub = import_react20.default.useContext(SubmenuContext);
+  return /* @__PURE__ */ import_react20.default.createElement(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden bg-gray-50 transition-all",
+        sub.isSubOpen ? "max-h-[300px] opacity-100" : "max-h-0 opacity-0"
+      )
+    },
+    children
+  );
+}
+
+// app/components/DropdownWithIcon.tsx
+var import_react21 = __toESM(require("react"), 1);
+var import_react22 = require("@remixicon/react");
 var defaultRenderItem2 = (option) => {
-  return /* @__PURE__ */ import_react16.default.createElement(MenuItem2, { label: option.label, value: option.value });
+  return /* @__PURE__ */ import_react21.default.createElement(MenuItem2, { label: option.label, value: option.value });
 };
-var DropdownWithIcon = (0, import_react16.forwardRef)(
+var DropdownWithIcon = (0, import_react21.forwardRef)(
   ({
+    id = `dropdown-${Math.random().toString(36).substring(2, 11)}`,
     options,
     selected = [],
     setSelected,
     search = false,
     multiple = false,
+    dropdownText,
     renderItem = defaultRenderItem2,
     children,
     trigger,
-    //   dropdownMenu = false,
     position = "top",
-    //   setDropdownMenu = () => {},
     width,
     info,
-    dropDownTooltip = false,
     dropdownFooter = false,
     onApply,
     disabled = false,
-    onReset
+    onReset,
+    footerAction
   }, ref) => {
-    const [searchQuery, setSearchQuery] = (0, import_react16.useState)("");
-    const localDropdownRef = (0, import_react16.useRef)(null);
-    const [dropdownMenu, setDropdownMenu] = (0, import_react16.useState)(false);
-    (0, import_react16.useImperativeHandle)(ref, () => localDropdownRef.current);
-    const memoizedFilteredOptions = (0, import_react16.useMemo)(() => {
+    const [searchQuery, setSearchQuery] = (0, import_react21.useState)("");
+    const localDropdownRef = (0, import_react21.useRef)(null);
+    const [dropdownMenu, setDropdownMenu] = (0, import_react21.useState)(false);
+    (0, import_react21.useImperativeHandle)(ref, () => localDropdownRef.current);
+    const memoizedFilteredOptions = (0, import_react21.useMemo)(() => {
       if (!search)
         return options;
       return options == null ? void 0 : options.filter(
@@ -1058,14 +1729,14 @@ var DropdownWithIcon = (0, import_react16.forwardRef)(
         }
       );
     }, [search, searchQuery, options]);
-    const handleSearchChange = (0, import_react16.useCallback)(
+    const handleSearchChange = (0, import_react21.useCallback)(
       (e) => {
         var _a;
         setSearchQuery((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value);
       },
       []
     );
-    const toggleOption = (0, import_react16.useCallback)(
+    const toggleOption = (0, import_react21.useCallback)(
       (option) => {
         if (multiple && setSelected) {
           setSelected(
@@ -1078,7 +1749,7 @@ var DropdownWithIcon = (0, import_react16.forwardRef)(
       },
       [multiple, setSelected, setDropdownMenu]
     );
-    const handleCheckboxChange = (0, import_react16.useCallback)(
+    const handleCheckboxChange = (0, import_react21.useCallback)(
       (option) => {
         if (multiple && setSelected) {
           setSelected(
@@ -1104,7 +1775,7 @@ var DropdownWithIcon = (0, import_react16.forwardRef)(
       setSelected == null ? void 0 : setSelected([]);
       setDropdownMenu(false);
     };
-    (0, import_react16.useEffect)(() => {
+    (0, import_react21.useEffect)(() => {
       const handleClickOutside = (event) => {
         var _a;
         if ((localDropdownRef == null ? void 0 : localDropdownRef.current) && !((_a = localDropdownRef == null ? void 0 : localDropdownRef.current) == null ? void 0 : _a.contains(event == null ? void 0 : event.target))) {
@@ -1116,9 +1787,10 @@ var DropdownWithIcon = (0, import_react16.forwardRef)(
         document == null ? void 0 : document.removeEventListener("mousedown", handleClickOutside);
       };
     }, [setDropdownMenu]);
-    return /* @__PURE__ */ import_react16.default.createElement(
+    return /* @__PURE__ */ import_react21.default.createElement(
       "div",
       {
+        id,
         ref: localDropdownRef,
         className: cn(
           "relative",
@@ -1129,14 +1801,42 @@ var DropdownWithIcon = (0, import_react16.forwardRef)(
           width
         }
       },
-      /* @__PURE__ */ import_react16.default.createElement("div", { onClick: () => !disabled && setDropdownMenu((prev) => !prev) }, trigger),
-      /* @__PURE__ */ import_react16.default.createElement(
+      /* @__PURE__ */ import_react21.default.createElement(
+        "button",
+        {
+          type: "button",
+          "aria-haspopup": "listbox",
+          "aria-expanded": dropdownMenu,
+          "aria-labelledby": `${id}-label`,
+          disabled,
+          onClick: () => !disabled && setDropdownMenu((prev) => !prev),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              !disabled && setDropdownMenu((prev) => !prev);
+            }
+          },
+          className: cn(
+            "w-full",
+            disabled && "cursor-not-allowed opacity-50",
+            dropdownText && "flex items-center gap-2"
+          )
+        },
+        trigger,
+        dropdownText && /* @__PURE__ */ import_react21.default.createElement("span", { id: `${id}-label`, className: "text-sm text-gray-800" }, dropdownText)
+      ),
+      /* @__PURE__ */ import_react21.default.createElement(
         "ul",
         {
+          role: "listbox",
+          "aria-multiselectable": multiple,
+          "aria-labelledby": `${id}-label`,
+          tabIndex: -1,
           className: cn(
             "max-h-0 opacity-0 overflow-hidden shadow-sm mt-1 rounded absolute text-[16px] bg-white z-[1000] w-full transition-all duration-75 delay-100 ease-in",
+            dropdownMenu ? "border border-primary-600" : "border border-gray-200",
             position === "top" ? "top-10" : position === "bottom" ? "bottom-10" : position === "left" ? "left-0" : position === "right" ? "right-[90%]" : "top-10",
-            dropdownMenu && "max-h-[320px] opacity-[1] transition-all ease-in duration-150"
+            dropdownMenu && "max-h-[360px] h-fit opacity-[1] transition-all ease-in duration-150"
           ),
           style: {
             width,
@@ -1144,104 +1844,135 @@ var DropdownWithIcon = (0, import_react16.forwardRef)(
             top: "calc(100% + 4px)"
           }
         },
-        search && /* @__PURE__ */ import_react16.default.createElement(
+        search && /* @__PURE__ */ import_react21.default.createElement(
           Input_default,
           {
+            id: `${id}-search`,
             type: "text",
             placeholder: "Search...",
+            "aria-label": "Search options",
             value: searchQuery,
             onChange: handleSearchChange,
-            className: "rounded rounded-b-none text-gray-800 bg-white w-full h-[35px] pl-3",
-            endIcon: /* @__PURE__ */ import_react16.default.createElement(import_react17.RiSearchLine, { size: 18 })
+            className: "rounded rounded-b-none text-gray-800 bg-white w-full h-[35px] pl-3 border-none",
+            endIcon: /* @__PURE__ */ import_react21.default.createElement(import_react22.RiSearchLine, { size: 18 })
           }
         ),
-        multiple && /* @__PURE__ */ import_react16.default.createElement("section", { className: "py-[6px] px-[14px] flex justify-between items-center" }, /* @__PURE__ */ import_react16.default.createElement(
-          "p",
+        multiple && /* @__PURE__ */ import_react21.default.createElement("section", { className: "py-[6px] px-[14px] flex justify-between items-center" }, /* @__PURE__ */ import_react21.default.createElement(
+          "button",
           {
+            type: "button",
+            "aria-label": "Select all",
             onClick: handleSelectAll,
-            className: "text-text-sm  hover:text-primary-700  text-primary-600 cursor-pointer"
+            className: "text-text-sm  hover:text-primary-700 text-primary-600 cursor-pointer"
           },
           "Select all"
-        ), /* @__PURE__ */ import_react16.default.createElement(
+        ), /* @__PURE__ */ import_react21.default.createElement(
           "button",
           {
+            "aria-label": "Reset",
+            type: "button",
             className: "text-text-sm text-warning-500 hover:text-warning-600",
             onClick: handleReset
           },
           "Reset"
         )),
-        /* @__PURE__ */ import_react16.default.createElement("section", { className: "max-h-[200px] z-[1000] transition-all duration-75 delay-100 ease-in-out overflow-y-scroll" }, options ? memoizedFilteredOptions == null ? void 0 : memoizedFilteredOptions.map((option, i) => {
+        /* @__PURE__ */ import_react21.default.createElement("section", { className: "max-h-[200px] z-[1000] transition-all duration-75 delay-100 ease-in-out overflow-y-scroll" }, options ? memoizedFilteredOptions == null ? void 0 : memoizedFilteredOptions.map((option, i) => {
           var _a;
-          return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, { key: i }, multiple ? /* @__PURE__ */ import_react16.default.createElement(
+          return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, { key: i }, multiple ? /* @__PURE__ */ import_react21.default.createElement(
             Label_default,
             {
-              className: "has-[:checked]:bg-primary-50 has-[:checked]:border-primary-600 hover:bg-gray-50 flex flex-col py-[6px] px-[14px] break-words cursor-pointer border-l-4 border-transparent",
-              htmlFor: `checkbox-${option == null ? void 0 : option.value}`,
+              className: cn(
+                "has-[:checked]:bg-primary-50 has-[:checked]:border-primary-600 hover:bg-gray-50 flex flex-col py-[6px] px-[14px] break-words cursor-pointer border-l-4 border-transparent",
+                (option == null ? void 0 : option.disabledOption) && "opacity-50 cursor-not-allowed hover:bg-white text-gray-300 select-none"
+              ),
+              htmlFor: `${id}-checkbox-${option.value}`,
               key: i
             },
-            /* @__PURE__ */ import_react16.default.createElement("section", { className: "flex items-center justify-between gap-2 w-full" }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react16.default.createElement(
+            /* @__PURE__ */ import_react21.default.createElement("section", { className: "flex items-center justify-between gap-2 w-full" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react21.default.createElement(
               Checkbox_default,
               {
-                id: `checkbox-${option == null ? void 0 : option.value}`,
+                id: `${id}-checkbox-${option.value}`,
                 checked: selected == null ? void 0 : selected.some(
                   (item) => (item == null ? void 0 : item.value) === (option == null ? void 0 : option.value)
                 ),
-                onChange: () => handleCheckboxChange(option)
+                onChange: () => handleCheckboxChange(option),
+                disabled: option == null ? void 0 : option.disabledOption
               }
-            ), /* @__PURE__ */ import_react16.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "break-words" }, renderItem(option)), dropDownTooltip && /* @__PURE__ */ import_react16.default.createElement(
-              DropdownTooltip2,
+            ), /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react21.default.createElement(
+              "div",
               {
-                tooltipContent: option == null ? void 0 : option.tooltipContent
-              }
-            ))), /* @__PURE__ */ import_react16.default.createElement("span", { className: "text-gray-500" }, option == null ? void 0 : option.info)),
-            /* @__PURE__ */ import_react16.default.createElement("span", { className: "pt-[2px] text-text-sm text-gray-500" }, option == null ? void 0 : option.addInfo)
-          ) : /* @__PURE__ */ import_react16.default.createElement(
+                style: {
+                  color: (option == null ? void 0 : option.disabledOption) ? "#D1D5DB" : option.labelTextColor
+                },
+                className: cn(
+                  "break-words",
+                  (option == null ? void 0 : option.disabledOption) && "text-gray-300"
+                )
+              },
+              renderItem(option)
+            ))), /* @__PURE__ */ import_react21.default.createElement("span", { className: "text-gray-500" }, option == null ? void 0 : option.info)),
+            /* @__PURE__ */ import_react21.default.createElement("span", { className: "pt-[2px] text-text-sm text-gray-500" }, option == null ? void 0 : option.addInfo)
+          ) : /* @__PURE__ */ import_react21.default.createElement(
             Label_default,
             {
+              htmlFor: `${id}-checkbox-${option.value}`,
               key: i,
               className: cn(
                 "flex justify-between py-[6px] px-[14px] hover:bg-gray-50 gap-2 items-center border-l-4 border-transparent cursor-pointer",
                 {
-                  "bg-primary-50 border-primary-600": selected && ((_a = selected[0]) == null ? void 0 : _a.value) === (option == null ? void 0 : option.value)
+                  "bg-primary-50 border-primary-600": selected && ((_a = selected[0]) == null ? void 0 : _a.value) === (option == null ? void 0 : option.value),
+                  "opacity-50 cursor-not-allowed hover:bg-white text-gray-500": option == null ? void 0 : option.disabledOption
                 }
               ),
-              onClick: () => toggleOption(option)
+              onClick: () => !(option == null ? void 0 : option.disabledOption) && toggleOption(option)
             },
-            /* @__PURE__ */ import_react16.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react16.default.createElement("span", null, renderItem(option)), dropDownTooltip && /* @__PURE__ */ import_react16.default.createElement(
-              DropdownTooltip2,
+            /* @__PURE__ */ import_react21.default.createElement(
+              "div",
               {
-                tooltipContent: option == null ? void 0 : option.tooltipContent
-              }
-            )),
-            /* @__PURE__ */ import_react16.default.createElement("span", { className: "text-gray-500" }, info)
+                style: {
+                  color: (option == null ? void 0 : option.disabledOption) ? "#D1D5DB" : option.labelTextColor
+                },
+                className: cn(
+                  "break-words",
+                  (option == null ? void 0 : option.disabledOption) && "text-gray-300"
+                )
+              },
+              renderItem(option)
+            ),
+            /* @__PURE__ */ import_react21.default.createElement("span", { className: "text-gray-500" }, info)
           ));
         }) : children),
-        dropdownFooter && /* @__PURE__ */ import_react16.default.createElement(DropdownFooter2, { onApply })
+        footerAction && /* @__PURE__ */ import_react21.default.createElement("div", { className: "py-2 mt-1 px-2 border-t" }, footerAction),
+        dropdownFooter && /* @__PURE__ */ import_react21.default.createElement(
+          DropdownFooter2,
+          {
+            setDropdownMenu,
+            onApply
+          }
+        )
       )
     );
   }
 );
 var MenuItem2 = ({ label, children }) => {
-  return /* @__PURE__ */ import_react16.default.createElement("p", { className: "break-all" }, label || children);
-};
-var DropdownTooltip2 = ({
-  tooltipContent
-}) => {
-  return tooltipContent ? /* @__PURE__ */ import_react16.default.createElement(Tooltip_default, { position: "right", content: tooltipContent }, /* @__PURE__ */ import_react16.default.createElement(import_react17.RiErrorWarningLine, { color: "#98A2B3", size: 14 })) : null;
+  return /* @__PURE__ */ import_react21.default.createElement("p", { className: "break-all" }, label || children);
 };
 var DropdownFooter2 = ({
   onApply,
   setDropdownMenu
 }) => {
-  return /* @__PURE__ */ import_react16.default.createElement("div", { className: "flex justify-between border-t border-gray-200 px-[14px] py-[8px] text-text-sm" }, /* @__PURE__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex justify-end border-t border-gray-200 px-[14px] py-[8px] text-text-sm" }, /* @__PURE__ */ import_react21.default.createElement(
     "button",
     {
+      type: "button",
       className: "text-primary-600 hover:text-primary-700",
       onClick: () => {
         if (onApply) {
           onApply();
         }
-        setDropdownMenu(false);
+        if (setDropdownMenu) {
+          setDropdownMenu(false);
+        }
       }
     },
     "Apply"
@@ -1250,9 +1981,45 @@ var DropdownFooter2 = ({
 DropdownWithIcon.displayName = "DropdownWithIcon";
 var DropdownWithIcon_default = DropdownWithIcon;
 
+// app/components/FileSelector.tsx
+var import_react23 = __toESM(require("react"), 1);
+var FileSelector = (0, import_react23.forwardRef)(
+  ({ component, ...props }, ref) => {
+    const internalRef = (0, import_react23.useRef)(null);
+    const inputRef = ref || internalRef;
+    const handleClick = () => {
+      var _a;
+      (_a = inputRef.current) == null ? void 0 : _a.click();
+    };
+    return /* @__PURE__ */ import_react23.default.createElement(
+      "div",
+      {
+        onClick: handleClick,
+        style: { display: "inline-block", cursor: "pointer" }
+      },
+      /* @__PURE__ */ import_react23.default.createElement(
+        "input",
+        {
+          type: "file",
+          ref: inputRef,
+          ...props,
+          style: { display: "none" }
+        }
+      ),
+      component
+    );
+  }
+);
+FileSelector.displayName = "FileSelector";
+var FileSelector_default = FileSelector;
+
 // app/components/FileUpload.tsx
-var import_react18 = __toESM(require("react"), 1);
-var import_react19 = require("@remixicon/react");
+var import_react26 = __toESM(require("react"), 1);
+var import_react27 = require("@remixicon/react");
+
+// app/components/FileUploadPreview.tsx
+var import_react24 = require("@remixicon/react");
+var import_react25 = __toESM(require("react"), 1);
 var getIconForMimeType = (file) => {
   var _a;
   const fileName = typeof file === "string" ? file : file.name;
@@ -1265,65 +2032,109 @@ var getIconForMimeType = (file) => {
     case "gif":
     case "svg":
     case "webp":
-      iconComponent = /* @__PURE__ */ import_react18.default.createElement(import_react19.RiImageLine, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      iconComponent = /* @__PURE__ */ import_react25.default.createElement(import_react24.RiImageLine, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
       break;
     case "mp3":
     case "wav":
     case "ogg":
-      iconComponent = /* @__PURE__ */ import_react18.default.createElement(import_react19.RiMusic2Line, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      iconComponent = /* @__PURE__ */ import_react25.default.createElement(import_react24.RiMusic2Line, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
       break;
     case "mp4":
     case "avi":
     case "mkv":
-      iconComponent = /* @__PURE__ */ import_react18.default.createElement(import_react19.RiVideoLine, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      iconComponent = /* @__PURE__ */ import_react25.default.createElement(import_react24.RiVideoLine, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
       break;
     case "xls":
     case "xlsx":
     case "csv":
     case "txt":
     case "ods":
-      iconComponent = /* @__PURE__ */ import_react18.default.createElement(import_react19.RiFileExcel2Line, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      iconComponent = /* @__PURE__ */ import_react25.default.createElement(import_react24.RiFileExcel2Line, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
       break;
     case "doc":
     case "docx":
     case "odt":
     case "xml":
-      iconComponent = /* @__PURE__ */ import_react18.default.createElement(import_react19.RiFileWord2Line, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      iconComponent = /* @__PURE__ */ import_react25.default.createElement(import_react24.RiFileWord2Line, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
       break;
     case "pptx":
     case "pptm":
     case "xps":
     case "ppsx":
-      iconComponent = /* @__PURE__ */ import_react18.default.createElement(import_react19.RiFilePpt2Line, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      iconComponent = /* @__PURE__ */ import_react25.default.createElement(import_react24.RiFilePpt2Line, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
       break;
     case "rar":
     case "zip":
-      iconComponent = /* @__PURE__ */ import_react18.default.createElement(import_react19.RiFileZipLine, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      iconComponent = /* @__PURE__ */ import_react25.default.createElement(import_react24.RiFileZipLine, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
       break;
     case "pdf":
-      iconComponent = /* @__PURE__ */ import_react18.default.createElement(import_react19.RiFilePdf2Line, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      iconComponent = /* @__PURE__ */ import_react25.default.createElement(import_react24.RiFilePdf2Line, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
       break;
     default:
-      iconComponent = /* @__PURE__ */ import_react18.default.createElement(import_react19.RiFileLine, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      iconComponent = /* @__PURE__ */ import_react25.default.createElement(import_react24.RiFileLine, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
       break;
   }
   return iconComponent;
 };
-var FileUpload = (0, import_react18.forwardRef)(
+var FileUploadPreview = ({
+  index,
+  file,
+  children,
+  onDelete
+}) => {
+  return /* @__PURE__ */ import_react25.default.createElement(
+    "div",
+    {
+      key: index,
+      className: "p-4 border border-gray-200 rounded-lg flex items-center justify-between gap-5"
+    },
+    /* @__PURE__ */ import_react25.default.createElement("div", { className: "flex items-center gap-2 w-full" }, getIconForMimeType(file), /* @__PURE__ */ import_react25.default.createElement("div", { className: "flex flex-col gap-1 w-full" }, /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-sm line-clamp-2 break-all" }, typeof file === "string" ? file : file.name, " "), children && /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-full" }, children))),
+    /* @__PURE__ */ import_react25.default.createElement("button", { type: "button", onClick: () => onDelete == null ? void 0 : onDelete(index) }, /* @__PURE__ */ import_react25.default.createElement(import_react24.RiDeleteBinLine, { className: "text-gray-500 w-5 h-5 cursor-pointer" }))
+  );
+};
+var FileUploadPreview_default = FileUploadPreview;
+
+// app/components/FileUpload.tsx
+var FileUpload = (0, import_react26.forwardRef)(
   ({
     selectedFile,
+    setSelectedFile,
     onChange,
     multiple,
     onDelete,
     children,
     disabled,
     title,
+    filePreviewClassName,
     id,
     className,
     accept,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ import_react18.default.createElement("div", { className: "flex flex-col gap-2 " }, /* @__PURE__ */ import_react18.default.createElement(
+    const [isDragging, setIsDragging] = (0, import_react26.useState)(false);
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      if (!disabled)
+        setIsDragging(true);
+    };
+    const handleDragLeave = () => {
+      setIsDragging(false);
+    };
+    const handleDrop = (e) => {
+      e.preventDefault();
+      setIsDragging(false);
+      if (disabled)
+        return;
+      const files = Array.from(e.dataTransfer.files);
+      if (files.length === 0)
+        return;
+      if (multiple) {
+        setSelectedFile && setSelectedFile([...selectedFile || [], ...files]);
+      } else {
+        setSelectedFile && setSelectedFile([files[0]]);
+      }
+    };
+    return /* @__PURE__ */ import_react26.default.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ import_react26.default.createElement(
       "input",
       {
         type: "file",
@@ -1336,33 +2147,40 @@ var FileUpload = (0, import_react18.forwardRef)(
         hidden: true,
         ref
       }
-    ), /* @__PURE__ */ import_react18.default.createElement(
+    ), /* @__PURE__ */ import_react26.default.createElement(
       Label_default,
       {
         htmlFor: id,
         disabled,
+        role: "button",
+        "aria-label": `Upload ${multiple ? "files" : "file"}`,
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.currentTarget.click();
+          }
+        },
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
         className: cn(
-          "w-full h-[126px] border-2 border-dashed border-gray-200 hover:bg-gray-200 cursor-pointer rounded-lg px-6 py-4 flex flex-col items-center gap-2",
+          "w-full h-[126px] border-2 border-dashed border-gray-200 hover:bg-gray-200 cursor-pointer rounded-lg px-6 py-4 flex items-center justify-center transition-all",
+          isDragging && "border-primary-500 bg-primary-50",
           disabled && "pointer-events-none",
           className
         )
       },
-      /* @__PURE__ */ import_react18.default.createElement("div", { className: "w-10 h-10 border-[6px] border-gray-50 bg-gray-200 rounded-full p-1 flex justify-center items-center" }, /* @__PURE__ */ import_react18.default.createElement(import_react19.RiUpload2Line, { className: "w-5 h-5" })),
-      /* @__PURE__ */ import_react18.default.createElement("p", { className: "text-center text-sm text-gray-600" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "text-primary-600 font-semibold" }, "Click to upload"), " ", /* @__PURE__ */ import_react18.default.createElement("br", null), " ", title)
-    ), /* @__PURE__ */ import_react18.default.createElement("div", { className: "flex flex-col gap-2" }, selectedFile == null ? void 0 : selectedFile.map((file, index) => /* @__PURE__ */ import_react18.default.createElement(
-      "div",
+      /* @__PURE__ */ import_react26.default.createElement("div", { className: cn("grid grid-cols-1 place-items-center gap-2") }, /* @__PURE__ */ import_react26.default.createElement("div", { className: "w-10 h-10 border-[6px] border-gray-50 bg-gray-200 rounded-full p-1 flex justify-center items-center" }, /* @__PURE__ */ import_react26.default.createElement(import_react27.RiUpload2Line, { className: "w-5 h-5" })), /* @__PURE__ */ import_react26.default.createElement("div", null, /* @__PURE__ */ import_react26.default.createElement("p", { className: "text-center text-sm text-gray-600" }, /* @__PURE__ */ import_react26.default.createElement("span", { className: "text-primary-600 font-semibold" }, "Click to upload or drag and drop"), " ", /* @__PURE__ */ import_react26.default.createElement("br", null), " ", title)))
+    ), /* @__PURE__ */ import_react26.default.createElement("section", { className: cn(`grid gap-2`, filePreviewClassName) }, selectedFile == null ? void 0 : selectedFile.map((file, index) => /* @__PURE__ */ import_react26.default.createElement(
+      FileUploadPreview_default,
       {
-        key: index,
-        className: "p-4 border border-gray-200 rounded-lg flex items-center justify-between gap-5"
+        key: file.name || index,
+        file,
+        index,
+        onDelete
       },
-      /* @__PURE__ */ import_react18.default.createElement("div", { className: "flex items-center gap-2 w-full" }, getIconForMimeType(file), /* @__PURE__ */ import_react18.default.createElement("div", { className: "flex flex-col gap-1 w-full" }, /* @__PURE__ */ import_react18.default.createElement("p", { className: "text-sm line-clamp-2 break-all" }, typeof file === "string" ? file : file.name, " "), /* @__PURE__ */ import_react18.default.createElement("div", { className: "w-full" }, children))),
-      /* @__PURE__ */ import_react18.default.createElement(
-        import_react19.RiDeleteBinLine,
-        {
-          onClick: onDelete,
-          className: "text-gray-500 w-5 h-5 cursor-pointer"
-        }
-      )
+      children
     ))));
   }
 );
@@ -1370,8 +2188,8 @@ FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
 // app/components/GlobalNavigation.tsx
-var import_react20 = __toESM(require("react"), 1);
-var GlobalNavigation = (0, import_react20.forwardRef)(
+var import_react28 = __toESM(require("react"), 1);
+var GlobalNavigation = (0, import_react28.forwardRef)(
   ({
     isOpen,
     setIsOpen,
@@ -1380,27 +2198,30 @@ var GlobalNavigation = (0, import_react20.forwardRef)(
     className,
     postion = "bottom-right"
   }, ref) => {
-    const popoverRef = (0, import_react20.useRef)(null);
-    (0, import_react20.useEffect)(() => {
+    const triggerRef = (0, import_react28.useRef)(null);
+    const contentRef = (0, import_react28.useRef)(null);
+    (0, import_react28.useEffect)(() => {
       const handleClickOutside = (event) => {
-        if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+        var _a, _b;
+        if (!((_a = triggerRef.current) == null ? void 0 : _a.contains(event.target)) && !((_b = contentRef.current) == null ? void 0 : _b.contains(event.target))) {
           setIsOpen(false);
         }
       };
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, []);
-    return /* @__PURE__ */ import_react20.default.createElement("div", { className: "relative w-max", ref }, /* @__PURE__ */ import_react20.default.createElement(
+    }, [setIsOpen]);
+    return /* @__PURE__ */ import_react28.default.createElement("div", { className: "relative w-max", ref }, /* @__PURE__ */ import_react28.default.createElement(
       "div",
       {
         className: "cursor-pointer",
-        ref: popoverRef,
+        ref: triggerRef,
         onClick: () => setIsOpen(!isOpen)
       },
       trigger
-    ), isOpen && /* @__PURE__ */ import_react20.default.createElement(
+    ), isOpen && /* @__PURE__ */ import_react28.default.createElement(
       "div",
       {
+        ref: contentRef,
         className: cn(
           "absolute z-10 bg-white rounded-lg shadow-sm border min-w-[200px] p-4 transition-all duration-300 ease-in-out",
           postion === "bottom-left" && "left-0 top-4/4",
@@ -1418,9 +2239,9 @@ GlobalNavigation.displayName = "GlobalNavigation";
 var GlobalNavigation_default = GlobalNavigation;
 
 // app/components/HelperText.tsx
-var import_react21 = __toESM(require("react"), 1);
+var import_react29 = __toESM(require("react"), 1);
 var HelperText = ({ children, className, size, error }) => {
-  return /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react29.default.createElement(
     "span",
     {
       className: cn(
@@ -1437,42 +2258,134 @@ var HelperText_default = HelperText;
 
 // app/components/ListItem.tsx
 var import_link = __toESM(require("next/link"), 1);
-var import_react22 = __toESM(require("react"), 1);
-var ListItem = import_react22.default.forwardRef(({ className, title, href, onClick, as = "link", icon }, ref) => {
+var import_react30 = __toESM(require("react"), 1);
+var ListItem = import_react30.default.forwardRef(({ className, title, href, onClick, as = "link", icon }, ref) => {
+  const commonClasses = cn(
+    "px-4 py-[8px] w-full flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-primary-600 focus-visible:ring-2 rounded",
+    className
+  );
   if (as === "button") {
-    return /* @__PURE__ */ import_react22.default.createElement(
+    return /* @__PURE__ */ import_react30.default.createElement(
       "button",
       {
-        className: cn(
-          "px-4 py-[8px] w-full text-left flex items-center gap-2",
-          className
-        ),
+        className: commonClasses,
         onClick,
-        ref
+        ref,
+        type: "button",
+        role: "menuitem"
       },
-      /* @__PURE__ */ import_react22.default.createElement("h1", null, title),
-      icon && /* @__PURE__ */ import_react22.default.createElement("span", null, icon)
+      /* @__PURE__ */ import_react30.default.createElement("span", { className: "text-base font-normal" }, title),
+      icon && /* @__PURE__ */ import_react30.default.createElement("span", { className: "flex-shrink-0", "aria-hidden": "true" }, icon)
     );
   }
-  return /* @__PURE__ */ import_react22.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement(
     import_link.default,
     {
       href: href ?? "",
-      passHref: true,
-      className: cn("px-4 py-[8px] w-full flex items-center gap-2", className),
-      ref
+      className: commonClasses,
+      ref,
+      role: "menuitem",
+      onClick: (e) => {
+        if (!href) {
+          e.preventDefault();
+        }
+      }
     },
-    /* @__PURE__ */ import_react22.default.createElement("h1", null, title),
-    icon && /* @__PURE__ */ import_react22.default.createElement("p", null, icon)
+    /* @__PURE__ */ import_react30.default.createElement("span", { className: "text-base font-normal" }, title),
+    icon && /* @__PURE__ */ import_react30.default.createElement("span", { className: "flex-shrink-0", "aria-hidden": "true" }, icon)
   );
 });
 ListItem.displayName = "ListItem";
 var ListItem_default = ListItem;
 
+// app/components/ListPagination.tsx
+var import_react31 = __toESM(require("react"), 1);
+var import_react32 = require("@remixicon/react");
+var ListPagination = ({
+  count,
+  page,
+  rowsPerPage,
+  onPageChange,
+  className
+}) => {
+  const totalPages = Math.ceil(count / rowsPerPage);
+  const [expanded, setExpanded] = (0, import_react31.useState)(false);
+  const renderPages = () => {
+    if (totalPages <= 6 || expanded) {
+      return [...Array(totalPages)].map((_, i) => /* @__PURE__ */ import_react31.default.createElement(PageBtn, { key: i, i, page, onPageChange }));
+    }
+    const start = [0, 1];
+    const mid = [page - 1, page, page + 1].filter(
+      (i) => i > 1 && i < totalPages - 2
+    );
+    const end = [totalPages - 2, totalPages - 1];
+    const range = Array.from(/* @__PURE__ */ new Set([...start, ...mid, ...end]));
+    return range.map(
+      (i, idx) => typeof range[idx - 1] === "number" && i - range[idx - 1] > 1 ? /* @__PURE__ */ import_react31.default.createElement(
+        Button_default,
+        {
+          key: `dots-${i}`,
+          size: "sm",
+          variant: "outlined",
+          onClick: () => setExpanded(true)
+        },
+        "..."
+      ) : /* @__PURE__ */ import_react31.default.createElement(PageBtn, { key: i, i, page, onPageChange })
+    );
+  };
+  return /* @__PURE__ */ import_react31.default.createElement("section", { className: cn("flex items-center gap-1", className) }, /* @__PURE__ */ import_react31.default.createElement(
+    NavBtn,
+    {
+      icon: /* @__PURE__ */ import_react31.default.createElement(import_react32.RiArrowLeftSLine, { size: 22 }),
+      onClick: () => onPageChange(page - 1),
+      disabled: page === 0
+    }
+  ), /* @__PURE__ */ import_react31.default.createElement("div", { className: "max-w-[90vw] w-max overflow-auto flex items-center gap-2 p-2" }, renderPages()), /* @__PURE__ */ import_react31.default.createElement(
+    NavBtn,
+    {
+      icon: /* @__PURE__ */ import_react31.default.createElement(import_react32.RiArrowRightSLine, { size: 22 }),
+      onClick: () => onPageChange(page + 1),
+      disabled: page === totalPages - 1
+    }
+  ));
+};
+var PageBtn = ({
+  i,
+  page,
+  onPageChange
+}) => /* @__PURE__ */ import_react31.default.createElement(
+  Button_default,
+  {
+    size: "sm",
+    variant: "outlined",
+    className: cn(
+      i === page && "bg-primary-50 shadow-[0px_0px_0px_2px] shadow-primary-700 hover:shadow-[0px_0px_0px_2px] hover:shadow-primary-700"
+    ),
+    onClick: () => onPageChange(i)
+  },
+  i + 1
+);
+var NavBtn = ({
+  icon,
+  onClick,
+  disabled
+}) => /* @__PURE__ */ import_react31.default.createElement(
+  Button_default,
+  {
+    size: "sm",
+    variant: "outlined",
+    startIcon: icon,
+    onClick,
+    disabled,
+    className: "p-2"
+  }
+);
+var ListPagination_default = ListPagination;
+
 // app/components/Loading.tsx
-var import_react23 = __toESM(require("react"), 1);
+var import_react33 = __toESM(require("react"), 1);
 var Loading = ({ width, height, loaderColor, variant }) => {
-  return /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement(
     "div",
     {
       className: cn(
@@ -1491,17 +2404,18 @@ var Loading = ({ width, height, loaderColor, variant }) => {
 var Loading_default = Loading;
 
 // app/components/Modal.tsx
-var import_react24 = __toESM(require("react"), 1);
-var import_react25 = require("@remixicon/react");
+var import_react34 = __toESM(require("react"), 1);
+var import_react35 = require("@remixicon/react");
 function Modal({
   children,
   showModal,
   setShowModal,
   closeModal = true,
   closeOnOutsideClick = true,
-  className = ""
+  className = "",
+  width = "50%"
 }) {
-  (0, import_react24.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (showModal) {
       document.body.style.overflow = "hidden";
     } else {
@@ -1516,144 +2430,65 @@ function Modal({
       setShowModal(false);
     }
   };
-  return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, showModal && /* @__PURE__ */ import_react24.default.createElement(
+  return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, showModal && /* @__PURE__ */ import_react34.default.createElement(
     "div",
     {
       onClick: handleClickOutside,
       className: "w-full h-full bg-backdrop bg-blend-overlay fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center z-[1000000] overflow-hidden"
     },
-    /* @__PURE__ */ import_react24.default.createElement(
+    /* @__PURE__ */ import_react34.default.createElement(
       "div",
       {
-        className: `relative bg-white shadow-boxShadow rounded-xl p-[18px] transition-all duration-150 fade-in-grow w-[50%] mx-4 ${className}`
+        style: { width },
+        className: cn(
+          "relative bg-white shadow-boxShadow rounded-xl p-[18px] transition-all duration-150 fade-in-grow mx-4",
+          className
+        )
       },
-      /* @__PURE__ */ import_react24.default.createElement("div", null, children),
-      closeModal && /* @__PURE__ */ import_react24.default.createElement(
+      /* @__PURE__ */ import_react34.default.createElement("div", null, children),
+      closeModal && /* @__PURE__ */ import_react34.default.createElement(
         "div",
         {
-          className: "absolute top-4 ml-5 right-5 z-10 shadow-backdrop rounded-full text-primary cursor-pointer hover:bg-primaryLight",
+          className: "absolute top-4 ml-5 right-5 z-10 shadow-backdrop rounded-md cursor-pointer hover:bg-gray-100",
           onClick: () => setShowModal(false)
         },
-        /* @__PURE__ */ import_react24.default.createElement(import_react25.RiCloseLine, { size: 24 })
+        /* @__PURE__ */ import_react34.default.createElement(import_react35.RiCloseLine, { size: 24 })
       )
     )
   ));
 }
 
-// app/components/MenuItem.tsx
-var import_react26 = __toESM(require("react"), 1);
-var import_react27 = require("@remixicon/react");
-function MenuDropdown({
-  trigger,
-  children,
-  width = "250px",
-  className
-}) {
-  const [isOpen, setIsOpen] = (0, import_react26.useState)(false);
-  const dropdownRef = (0, import_react26.useRef)(null);
-  (0, import_react26.useEffect)(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-  return /* @__PURE__ */ import_react26.default.createElement("div", { className: "relative w-full", ref: dropdownRef }, /* @__PURE__ */ import_react26.default.createElement(
-    "div",
-    {
-      className: "cursor-pointer",
-      onClick: () => setIsOpen(!isOpen),
-      "aria-label": "Open menu"
-    },
-    trigger
-  ), isOpen && /* @__PURE__ */ import_react26.default.createElement(
-    "div",
-    {
-      style: { width },
-      className: cn(
-        "border border-gray-200 rounded-lg absolute left-0 mt-1 z-[100000] w-full bg-white shadow-sm",
-        className
-      )
-    },
-    children
-  ));
-}
-var MenuSubItem = ({
-  label,
-  onClick,
-  disabled,
-  children,
-  className = ""
-}) => /* @__PURE__ */ import_react26.default.createElement(
-  "button",
-  {
-    className: cn(
-      "w-full text-left p-4 text-sm border-y-[0.5px] last:border-y first:rounded-t hover:bg-primary-50 hover:rounded",
-      disabled ? "opacity-50 cursor-not-allowed" : "",
-      className
-    ),
-    onClick,
-    disabled
-  },
-  label,
-  children && /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, children)
-);
-var MenuItem3 = ({
-  content,
-  children,
-  className = "",
-  sectionClassName = "",
-  menuClassName = ""
-}) => {
-  const [isSubOpen, setIsSubOpen] = (0, import_react26.useState)(false);
-  return /* @__PURE__ */ import_react26.default.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ import_react26.default.createElement(
-    "section",
-    {
-      onClick: () => setIsSubOpen(!isSubOpen),
-      className: cn(
-        "cursor-pointer hover:bg-primary-50 p-4 flex text-sm border-y-[0.5px] justify-between items-center gap-1 w-full text-left",
-        sectionClassName
-      )
-    },
-    content,
-    isSubOpen ? /* @__PURE__ */ import_react26.default.createElement(import_react27.RiArrowUpSLine, { size: 20 }) : /* @__PURE__ */ import_react26.default.createElement(import_react27.RiArrowDownSLine, { size: 20 })
-  ), isSubOpen && /* @__PURE__ */ import_react26.default.createElement("div", { className: cn(" border-primary-100 bg-gray-50", menuClassName) }, children));
-};
-
-// app/components/Notice.tsx
-var import_class_variance_authority6 = require("class-variance-authority");
-var import_react28 = __toESM(require("react"), 1);
-var import_react29 = require("@remixicon/react");
-var VariantIcon = ({ variant }) => {
-  switch (variant) {
-    case "success":
-      return /* @__PURE__ */ import_react28.default.createElement("span", null, /* @__PURE__ */ import_react28.default.createElement(import_react29.RiThumbUpLine, { size: 20, color: "#039855" }));
-    case "warning":
-      return /* @__PURE__ */ import_react28.default.createElement("span", null, /* @__PURE__ */ import_react28.default.createElement(import_react29.RiQuestionLine, { color: "#F79009", size: 20 }));
-    case "info":
-      return /* @__PURE__ */ import_react28.default.createElement("span", null, /* @__PURE__ */ import_react28.default.createElement(import_react29.RiErrorWarningLine, { color: "#1570EF", size: 20 }));
-    case "error":
-      return /* @__PURE__ */ import_react28.default.createElement("span", null, /* @__PURE__ */ import_react28.default.createElement(import_react29.RiAlertFill, { color: "#F04438", size: 20 }));
-    default:
-      return /* @__PURE__ */ import_react28.default.createElement("span", null, /* @__PURE__ */ import_react28.default.createElement(import_react29.RiShieldCheckLine, { color: "#475467", size: 20 }));
-  }
-};
-var noticeVariants = (0, import_class_variance_authority6.cva)("p-4 w-fit rounded-[6px]", {
-  variants: {
-    variant: {
-      success: "bg-success-25 border border-success-600",
-      warning: "bg-warning-25 border border-warning-600",
-      info: "bg-primary-25 border border-primary-600",
-      error: "bg-error-25 border border-error-600",
-      default: "bg-gray-25 border border-gray-600"
+// app/components/Notice.tsx
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_react36 = __toESM(require("react"), 1);
+var import_react37 = require("@remixicon/react");
+var VariantIcon = ({ variant }) => {
+  switch (variant) {
+    case "success":
+      return /* @__PURE__ */ import_react36.default.createElement("span", null, /* @__PURE__ */ import_react36.default.createElement(import_react37.RiThumbUpLine, { size: 20, color: "#039855" }));
+    case "warning":
+      return /* @__PURE__ */ import_react36.default.createElement("span", null, /* @__PURE__ */ import_react36.default.createElement(import_react37.RiQuestionLine, { color: "#F79009", size: 20 }));
+    case "info":
+      return /* @__PURE__ */ import_react36.default.createElement("span", null, /* @__PURE__ */ import_react36.default.createElement(import_react37.RiErrorWarningLine, { color: "#1570EF", size: 20 }));
+    case "error":
+      return /* @__PURE__ */ import_react36.default.createElement("span", null, /* @__PURE__ */ import_react36.default.createElement(import_react37.RiAlertFill, { color: "#F04438", size: 20 }));
+    default:
+      return /* @__PURE__ */ import_react36.default.createElement("span", null, /* @__PURE__ */ import_react36.default.createElement(import_react37.RiShieldCheckLine, { color: "#475467", size: 20 }));
+  }
+};
+var noticeVariants = (0, import_class_variance_authority6.cva)("p-4 w-fit rounded-[6px]", {
+  variants: {
+    variant: {
+      success: "bg-success-25 border border-success-600",
+      warning: "bg-warning-25 border border-warning-600",
+      info: "bg-primary-25 border border-primary-600",
+      error: "bg-error-25 border border-error-600",
+      default: "bg-gray-25 border border-gray-600"
     },
     position: {
       top: "top-4 transition-all duration-700 m-auto left-0 right-0",
-      bottom: "bottom-4 transition-all duration-700 right-4"
+      bottom: "bottom-4 transition-all duration-700 right-4",
+      center: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 test"
     }
   }
 });
@@ -1667,38 +2502,106 @@ var Notice = ({
   showIcon = true
 }) => {
   const handleClose = () => setOpen(false);
-  return /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, open && /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, open && /* @__PURE__ */ import_react36.default.createElement(
     "div",
     {
       className: cn(
         noticeVariants({ variant, position }),
         `fixed z-10`,
         position === "top" && open && `animate-slide-in-top`,
-        position === "bottom" && open && `animate-slide-in-right`
+        position === "bottom" && open && `animate-slide-in-right`,
+        position === "center" && open && `animate-fade-in`
       )
     },
-    /* @__PURE__ */ import_react28.default.createElement("div", { className: "relative" }, showIcon ? noticeTitle == "" ? /* @__PURE__ */ import_react28.default.createElement("div", { className: "flex items-start" }, /* @__PURE__ */ import_react28.default.createElement(VariantIcon, { variant }), /* @__PURE__ */ import_react28.default.createElement("span", { className: "ml-2 mr-8 text-text-sm" }, children), /* @__PURE__ */ import_react28.default.createElement("span", { onClick: handleClose }, /* @__PURE__ */ import_react28.default.createElement(import_react29.RiCloseLine, { size: 20 }))) : /* @__PURE__ */ import_react28.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react28.default.createElement("section", { className: "flex items-start" }, /* @__PURE__ */ import_react28.default.createElement(VariantIcon, { variant }), /* @__PURE__ */ import_react28.default.createElement("div", { className: "ml-2 mr-8 -mt-[3px]" }, /* @__PURE__ */ import_react28.default.createElement("span", { className: "font-bold text-gray-800 mb-1" }, noticeTitle), /* @__PURE__ */ import_react28.default.createElement("p", { className: "text-text-sm text-gray-700" }, children))), /* @__PURE__ */ import_react28.default.createElement(
+    /* @__PURE__ */ import_react36.default.createElement("div", { className: "relative" }, showIcon ? noticeTitle == "" ? /* @__PURE__ */ import_react36.default.createElement("div", { className: "flex items-start" }, /* @__PURE__ */ import_react36.default.createElement(VariantIcon, { variant }), /* @__PURE__ */ import_react36.default.createElement("span", { className: "ml-2 mr-8 text-text-sm" }, children), /* @__PURE__ */ import_react36.default.createElement("span", { onClick: handleClose }, /* @__PURE__ */ import_react36.default.createElement(import_react37.RiCloseLine, { size: 20 }))) : /* @__PURE__ */ import_react36.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react36.default.createElement("section", { className: "flex items-start" }, /* @__PURE__ */ import_react36.default.createElement(VariantIcon, { variant }), /* @__PURE__ */ import_react36.default.createElement("div", { className: "ml-2 mr-8 -mt-[3px]" }, /* @__PURE__ */ import_react36.default.createElement("span", { className: "font-bold text-gray-800 mb-1" }, noticeTitle), /* @__PURE__ */ import_react36.default.createElement("p", { className: "text-text-sm text-gray-700" }, children))), /* @__PURE__ */ import_react36.default.createElement(
       "span",
       {
         className: cn("absolute top-0 right-0 cursor-pointer"),
         onClick: handleClose
       },
-      /* @__PURE__ */ import_react28.default.createElement(import_react29.RiCloseLine, { size: 20 })
-    )) : /* @__PURE__ */ import_react28.default.createElement("div", { className: "mr-8" }, /* @__PURE__ */ import_react28.default.createElement("section", { className: "flex items-center" }, /* @__PURE__ */ import_react28.default.createElement("p", { className: "font-bold text-gray-800 mb-1" }, noticeTitle)), /* @__PURE__ */ import_react28.default.createElement(
+      /* @__PURE__ */ import_react36.default.createElement(import_react37.RiCloseLine, { size: 20 })
+    )) : /* @__PURE__ */ import_react36.default.createElement("div", { className: "mr-8" }, /* @__PURE__ */ import_react36.default.createElement("section", { className: "flex items-center" }, /* @__PURE__ */ import_react36.default.createElement("p", { className: "font-bold text-gray-800 mb-1" }, noticeTitle)), /* @__PURE__ */ import_react36.default.createElement(
       "span",
       {
         className: cn("absolute top-0 right-0 cursor-pointer"),
         onClick: handleClose
       },
-      /* @__PURE__ */ import_react28.default.createElement(import_react29.RiCloseLine, { size: 20 })
-    ), /* @__PURE__ */ import_react28.default.createElement("p", { className: "text-text-sm" }, children)))
+      /* @__PURE__ */ import_react36.default.createElement(import_react37.RiCloseLine, { size: 20 })
+    ), /* @__PURE__ */ import_react36.default.createElement("p", { className: "text-text-sm" }, children)))
   ));
 };
 var Notice_default = Notice;
 
+// app/components/OTPInput.tsx
+var import_react38 = __toESM(require("react"), 1);
+var OTPInput = ({
+  length,
+  onChange,
+  type = "text"
+}) => {
+  const [otpValues, setOtpValues] = (0, import_react38.useState)(Array(length).fill(""));
+  const inputsRef = (0, import_react38.useRef)([]);
+  const handleChange = (e, idx) => {
+    var _a;
+    let value = e.target.value;
+    if (type === "number")
+      value = value.replace(/\D/g, "");
+    if (!value)
+      return;
+    const newOtp = [...otpValues];
+    newOtp[idx] = value[0];
+    setOtpValues(newOtp);
+    onChange(newOtp.join(""));
+    if (idx < length - 1)
+      (_a = inputsRef.current[idx + 1]) == null ? void 0 : _a.focus();
+  };
+  const handleKeyDown = (e, idx) => {
+    var _a;
+    if (e.key === "Backspace") {
+      if (otpValues[idx]) {
+        const newOtp = [...otpValues];
+        newOtp[idx] = "";
+        setOtpValues(newOtp);
+        onChange(newOtp.join(""));
+      } else if (idx > 0) {
+        (_a = inputsRef.current[idx - 1]) == null ? void 0 : _a.focus();
+      }
+    }
+  };
+  const handlePaste = (e) => {
+    var _a;
+    e.preventDefault();
+    let pasteData = e.clipboardData.getData("Text");
+    if (type === "number")
+      pasteData = pasteData.replace(/\D/g, "");
+    const newOtp = pasteData.split("").concat(Array(length).fill("")).slice(0, length);
+    setOtpValues(newOtp);
+    onChange(newOtp.join(""));
+    (_a = inputsRef.current[Math.min(pasteData.length, length - 1)]) == null ? void 0 : _a.focus();
+  };
+  return /* @__PURE__ */ import_react38.default.createElement("div", { className: "flex items-center gap-2" }, Array.from({ length }).map((_, idx) => /* @__PURE__ */ import_react38.default.createElement(
+    Input_default,
+    {
+      key: idx,
+      type,
+      inputMode: type === "number" ? "numeric" : "text",
+      maxLength: 1,
+      value: otpValues[idx],
+      onChange: (e) => handleChange(e, idx),
+      onKeyDown: (e) => handleKeyDown(e, idx),
+      onPaste: handlePaste,
+      ref: (el) => {
+        inputsRef.current[idx] = el ?? null;
+      },
+      className: "w-[40px] p-3.5"
+    }
+  )));
+};
+var OTPInput_default = OTPInput;
+
 // app/components/Pagination.tsx
-var import_react30 = __toESM(require("react"), 1);
-var import_react31 = require("@remixicon/react");
+var import_react39 = __toESM(require("react"), 1);
+var import_react40 = require("@remixicon/react");
 var Pagination = ({
   count,
   page,
@@ -1706,7 +2609,10 @@ var Pagination = ({
   rowsPerPageOptions,
   onPageChange,
   onRowsPerPageChange,
-  className
+  className,
+  variant = "primary",
+  countVariable,
+  itemsPerPage = true
 }) => {
   const totalPages = Math.ceil(count / rowsPerPage);
   const handlePrevPageClick = () => {
@@ -1715,7 +2621,7 @@ var Pagination = ({
   const handleNextPageClick = () => {
     onPageChange(page + 1);
   };
-  const [showOptions, setShowOptions] = (0, import_react30.useState)(false);
+  const [showOptions, setShowOptions] = (0, import_react39.useState)(false);
   const handleOptionClick = (option) => {
     if (typeof option === "number") {
       onRowsPerPageChange(option);
@@ -1724,15 +2630,16 @@ var Pagination = ({
     }
     setShowOptions(false);
   };
-  return /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(
     "div",
     {
       className: cn(
-        "border border-gray-200 px-6 py-4 flex justify-between items-center w-full",
+        "px-3 py-4 flex justify-between items-center w-full",
+        variant === "primary" && "border border-gray-200 px-6 py-4",
         className
       )
     },
-    /* @__PURE__ */ import_react30.default.createElement("section", { className: "flex gap-1.5 items-center" }, /* @__PURE__ */ import_react30.default.createElement("span", { className: "text-gray-800 text-text-sm font-medium" }, "Items per page"), /* @__PURE__ */ import_react30.default.createElement("div", { className: "relative z-[100]" }, /* @__PURE__ */ import_react30.default.createElement(
+    /* @__PURE__ */ import_react39.default.createElement("section", { className: "flex gap-1.5 items-center" }, countVariable && /* @__PURE__ */ import_react39.default.createElement("p", { className: "text-text-sm text-gray-800 font-medium" }, count, " ", countVariable ?? "Items"), itemsPerPage && /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex gap-1.5 items-center" }, /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-gray-800 text-text-sm font-medium" }, "Items per page"), /* @__PURE__ */ import_react39.default.createElement("div", { className: "relative z-[100]" }, /* @__PURE__ */ import_react39.default.createElement(
       "div",
       {
         className: "border border-gray-600 w-[88px] rounded text-sm px-1.5 py-1 cursor-pointer flex items-center justify-between gap-1 text-gray-600",
@@ -1740,8 +2647,8 @@ var Pagination = ({
       },
       rowsPerPage,
       " ",
-      !showOptions ? /* @__PURE__ */ import_react30.default.createElement(import_react31.RiArrowDownSLine, { size: 14 }) : /* @__PURE__ */ import_react30.default.createElement(import_react31.RiArrowUpSLine, { size: 14 })
-    ), showOptions && /* @__PURE__ */ import_react30.default.createElement("div", { className: "absolute top-full left-0 shadow bg-white rounded-md text-sm mt-1 z-50" }, rowsPerPageOptions == null ? void 0 : rowsPerPageOptions.map((option, index) => /* @__PURE__ */ import_react30.default.createElement(
+      !showOptions ? /* @__PURE__ */ import_react39.default.createElement(import_react40.RiArrowDownSLine, { size: 14 }) : /* @__PURE__ */ import_react39.default.createElement(import_react40.RiArrowUpSLine, { size: 14 })
+    ), showOptions && /* @__PURE__ */ import_react39.default.createElement("div", { className: "absolute top-full left-0 shadow bg-white rounded-md text-sm mt-1 z-50" }, rowsPerPageOptions == null ? void 0 : rowsPerPageOptions.map((option, index) => /* @__PURE__ */ import_react39.default.createElement(
       "div",
       {
         key: index,
@@ -1749,42 +2656,62 @@ var Pagination = ({
         onClick: () => handleOptionClick(option)
       },
       typeof option === "number" ? option : option.label
-    ))))),
-    /* @__PURE__ */ import_react30.default.createElement("section", { className: "flex items-center gap-2 font-medium" }, /* @__PURE__ */ import_react30.default.createElement("div", { className: "flex items-center gap-2 text-gray-800 text-text-sm" }, /* @__PURE__ */ import_react30.default.createElement("span", null, "page"), /* @__PURE__ */ import_react30.default.createElement(
+    )))))),
+    /* @__PURE__ */ import_react39.default.createElement("section", { className: "flex items-center gap-2 font-medium" }, variant === "primary" ? /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center gap-2 text-gray-800 text-text-sm" }, /* @__PURE__ */ import_react39.default.createElement("span", null, "page"), /* @__PURE__ */ import_react39.default.createElement(
       "select",
       {
         value: page + 1,
         onChange: (e) => onPageChange(parseInt(e.target.value, 10) - 1),
         className: "bg-gray-25 text-gray-500 px-3.5 py-1 border border-gray-200 rounded-md text-sm focus:outline-none focus:border-gray-600"
       },
-      totalPages > 0 && [...Array(totalPages)].map((_, index) => /* @__PURE__ */ import_react30.default.createElement("option", { key: index + 1, value: index + 1 }, index + 1))
-    ), /* @__PURE__ */ import_react30.default.createElement("span", null, "of ", totalPages > 0 ? totalPages : 0)), /* @__PURE__ */ import_react30.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ import_react30.default.createElement(
+      totalPages > 0 && [...Array(totalPages)].map((_, index) => /* @__PURE__ */ import_react39.default.createElement("option", { key: index + 1, value: index + 1 }, index + 1))
+    ), /* @__PURE__ */ import_react39.default.createElement("span", null, "of ", totalPages > 0 ? totalPages : 0)) : /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center gap-2 text-gray-800 text-text-sm mx-3" }, /* @__PURE__ */ import_react39.default.createElement("span", null, page + 1, " of ", totalPages > 0 ? totalPages : 0)), variant === "primary" ? /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ import_react39.default.createElement(
       Button_default,
       {
         variant: "outlined",
         intent: "default-outlined",
-        startIcon: /* @__PURE__ */ import_react30.default.createElement(import_react31.RiArrowLeftLine, { size: 20 }),
+        startIcon: /* @__PURE__ */ import_react39.default.createElement(import_react40.RiArrowLeftLine, { size: 20 }),
         onClick: handlePrevPageClick,
         disabled: page === 0,
         className: "rounded-none h-8 rounded-l-lg"
       }
-    ), /* @__PURE__ */ import_react30.default.createElement(
+    ), /* @__PURE__ */ import_react39.default.createElement(
       Button_default,
       {
         variant: "outlined",
         intent: "default-outlined",
-        startIcon: /* @__PURE__ */ import_react30.default.createElement(import_react31.RiArrowRightLine, { size: 20 }),
+        startIcon: /* @__PURE__ */ import_react39.default.createElement(import_react40.RiArrowRightLine, { size: 20 }),
         onClick: handleNextPageClick,
         disabled: page === totalPages - 1,
         className: "rounded-none h-8 rounded-r-lg"
       }
+    )) : /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react39.default.createElement(
+      import_react40.RiArrowLeftSLine,
+      {
+        size: 22,
+        cursor: "pointer",
+        onClick: handlePrevPageClick,
+        className: cn(
+          page === 0 && "pointer-events-none select-none opacity-30"
+        )
+      }
+    ), /* @__PURE__ */ import_react39.default.createElement(
+      import_react40.RiArrowRightSLine,
+      {
+        size: 22,
+        cursor: "pointer",
+        onClick: handleNextPageClick,
+        className: cn(
+          page === totalPages - 1 && "pointer-events-none select-none opacity-30"
+        )
+      }
     )))
   );
 };
 var Pagination_default = Pagination;
 
 // app/components/Progress.tsx
-var import_react32 = __toESM(require("react"), 1);
+var import_react41 = __toESM(require("react"), 1);
 var ProgressBar = ({
   progress,
   progressText = "",
@@ -1792,7 +2719,7 @@ var ProgressBar = ({
   progressTextPosition
 }) => {
   const _progress = Math == null ? void 0 : Math.min(Math == null ? void 0 : Math.max(0, progress), 100);
-  return /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement(
     "div",
     {
       className: cn(
@@ -1800,7 +2727,7 @@ var ProgressBar = ({
         progressTextPosition === "right" ? "flex items-center gap-1" : progressTextPosition === "left" ? "flex items-center gap-1" : ""
       )
     },
-    /* @__PURE__ */ import_react32.default.createElement(
+    /* @__PURE__ */ import_react41.default.createElement(
       "span",
       {
         className: cn(
@@ -1810,7 +2737,7 @@ var ProgressBar = ({
       },
       progressText
     ),
-    /* @__PURE__ */ import_react32.default.createElement(
+    /* @__PURE__ */ import_react41.default.createElement(
       "div",
       {
         className: "w-full h-2 rounded bg-gray-200",
@@ -1819,15 +2746,15 @@ var ProgressBar = ({
         "aria-valuemin": 0,
         "aria-valuemax": 100
       },
-      /* @__PURE__ */ import_react32.default.createElement(
+      /* @__PURE__ */ import_react41.default.createElement(
         "div",
         {
-          className: `${progressColor} h-full transition-all delay-1000 duration-700 rounded ease-in`,
+          className: `${progressColor} h-full transition-all delay-100 duration-300 rounded ease-in`,
           style: { width: `${_progress}%` }
         }
       )
     ),
-    /* @__PURE__ */ import_react32.default.createElement(
+    /* @__PURE__ */ import_react41.default.createElement(
       "span",
       {
         className: cn(
@@ -1842,7 +2769,7 @@ var ProgressBar = ({
 var Progress_default = ProgressBar;
 
 // app/components/Radio.tsx
-var import_react33 = __toESM(require("react"), 1);
+var import_react42 = __toESM(require("react"), 1);
 var import_class_variance_authority7 = require("class-variance-authority");
 var radioVariants = (0, import_class_variance_authority7.cva)("", {
   variants: {
@@ -1855,27 +2782,32 @@ var radioVariants = (0, import_class_variance_authority7.cva)("", {
     size: "sm"
   }
 });
-var Radio = (0, import_react33.forwardRef)(
-  ({ size, disabled, checked, className, children, ...props }, ref) => {
-    return /* @__PURE__ */ import_react33.default.createElement("div", { className: "relative inline-flex items-center cursor-pointer" }, /* @__PURE__ */ import_react33.default.createElement(
+var Radio = (0, import_react42.forwardRef)(
+  ({ size, disabled, checked, className, children, id, name, ...props }, ref) => {
+    return /* @__PURE__ */ import_react42.default.createElement("div", { className: "relative inline-flex items-center cursor-pointer" }, /* @__PURE__ */ import_react42.default.createElement(
       "input",
       {
         ...props,
         ref,
+        id,
+        name,
         checked,
         disabled,
+        role: "radio",
+        "aria-checked": checked,
         type: "radio",
         className: cn(
-          "peer relative cursor-pointer appearance-none rounded-full border border-gray-300 hover:border-primary-600 hover:bg-primary-50 transition-all checked:border-primary-600 checked:bg-primary-50 disabled:opacity-30 disabled:pointer-events-none",
+          "peer relative cursor-pointer appearance-none rounded-full border border-gray-300 hover:border-primary-600 hover:bg-primary-50 transition-all checked:border-primary-600 checked:bg-primary-50 disabled:opacity-30 disabled:pointer-events-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2",
           radioVariants({ size, className })
         )
       }
-    ), /* @__PURE__ */ import_react33.default.createElement(
+    ), /* @__PURE__ */ import_react42.default.createElement(
       "span",
       {
+        "aria-hidden": "true",
         className: cn(
           "absolute transition-opacity opacity-0 ease-in-out pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100 h-1.5 w-1.5 bg-primary-600 rounded-full duration-300",
-          size == "sm" && "h-[4.5px] w-[4.5px]"
+          size === "sm" && "h-[4.5px] w-[4.5px]"
         )
       }
     ));
@@ -1884,156 +2816,685 @@ var Radio = (0, import_react33.forwardRef)(
 Radio.displayName = "Radio";
 var Radio_default = Radio;
 
+// app/components/RazorPayFileUpload.tsx
+var import_react44 = __toESM(require("react"), 1);
+var import_react45 = require("@remixicon/react");
+
+// app/components/Spinner.tsx
+var import_react43 = __toESM(require("react"), 1);
+var colorVars = {
+  primary: {
+    c1: "var(--primary-500)",
+    c2: "var(--primary-200)"
+  },
+  black: {
+    c1: "rgba(0, 0, 0, 1)",
+    c2: "rgba(0, 0, 0, 0.5)"
+  },
+  gray: {
+    c1: "var(--gray-500)",
+    c2: "var(--gray-300)"
+  }
+};
+var Spinner = ({ size = "md", color = "primary" }) => {
+  const sizeClass = cn({
+    "w-4 h-4": size === "xs",
+    "w-6 h-6": size === "sm",
+    "w-10 h-10": size === "md",
+    "w-16 h-16": size === "lg"
+  });
+  const getColorValues = (color2) => {
+    if (colorVars[color2]) {
+      return colorVars[color2];
+    }
+    if (color2.startsWith("#")) {
+      return {
+        c1: color2,
+        c2: `${color2}80`
+      };
+    }
+    return colorVars.primary;
+  };
+  const colorValues = getColorValues(color);
+  return /* @__PURE__ */ import_react43.default.createElement("div", { className: cn("relative", sizeClass) }, /* @__PURE__ */ import_react43.default.createElement(
+    "div",
+    {
+      className: "spinner",
+      style: {
+        ["--spinner-color-1"]: colorValues.c1,
+        ["--spinner-color-2"]: colorValues.c2
+      }
+    }
+  ));
+};
+var Spinner_default = Spinner;
+
+// app/components/RazorPayFileUpload.tsx
+var import_image2 = __toESM(require("next/image"), 1);
+var defaultGetFileIcon = (fileName, fileType) => {
+  var _a;
+  const extension = ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
+  if (fileType.startsWith("image/") || ["jpg", "jpeg", "png", "gif", "svg", "webp", "bmp"].includes(extension)) {
+    return /* @__PURE__ */ import_react44.default.createElement(import_react45.RiImageLine, { className: "w-6 h-6 text-white" });
+  }
+  if (fileType.startsWith("audio/") || ["mp3", "wav", "ogg", "m4a"].includes(extension)) {
+    return /* @__PURE__ */ import_react44.default.createElement(import_react45.RiMusic2Line, { className: "w-6 h-6 text-white" });
+  }
+  if (fileType.startsWith("video/") || ["mp4", "avi", "mkv", "mov", "wmv"].includes(extension)) {
+    return /* @__PURE__ */ import_react44.default.createElement(import_react45.RiVideoLine, { className: "w-6 h-6 text-white" });
+  }
+  if (fileType.includes("excel") || ["xls", "xlsx", "csv", "txt", "ods"].includes(extension)) {
+    return /* @__PURE__ */ import_react44.default.createElement(import_react45.RiFileExcel2Line, { className: "w-6 h-6 text-white" });
+  }
+  if (fileType.includes("word") || ["doc", "docx", "odt", "xml"].includes(extension)) {
+    return /* @__PURE__ */ import_react44.default.createElement(import_react45.RiFileWord2Line, { className: "w-6 h-6 text-white" });
+  }
+  if (["pptx", "pptm", "xps", "ppsx"].includes(extension)) {
+    return /* @__PURE__ */ import_react44.default.createElement(import_react45.RiFilePpt2Line, { className: "w-6 h-6 text-white" });
+  }
+  if (fileType.includes("zip") || ["zip", "rar", "7z", "tar", "gz"].includes(extension)) {
+    return /* @__PURE__ */ import_react44.default.createElement(import_react45.RiFileZipLine, { className: "w-6 h-6 text-white" });
+  }
+  if (fileType === "application/pdf" || extension === "pdf") {
+    return /* @__PURE__ */ import_react44.default.createElement(import_react45.RiFilePdf2Line, { className: "w-6 h-6 text-white" });
+  }
+  return /* @__PURE__ */ import_react44.default.createElement(import_react45.RiFileLine, { className: "w-6 h-6 text-white" });
+};
+function ImageUploadControlled({
+  items,
+  onAddFiles,
+  onUpdateItem,
+  onDelete,
+  onRetry,
+  onPreview,
+  onUpload,
+  multiple = true,
+  accept = "image/*",
+  maxSizeMB = 15,
+  className = "",
+  hintText,
+  showSizeText = true,
+  getFileIcon = defaultGetFileIcon,
+  autoUpload = true,
+  disabled
+}) {
+  var _a;
+  const inputRef = (0, import_react44.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react44.useState)(false);
+  const localPreviews = (0, import_react44.useRef)(/* @__PURE__ */ new Map());
+  const uploadProgress = (0, import_react44.useRef)(/* @__PURE__ */ new Map());
+  const formatSize = (bytes) => {
+    if (!bytes)
+      return "0 KB";
+    return `${Math.round(bytes / 1024)} KB`;
+  };
+  const getPreviewUrl = (item) => {
+    if (item.previewUrl)
+      return item.previewUrl;
+    if (item.file && !localPreviews.current.has(item.id)) {
+      const url = URL.createObjectURL(item.file);
+      localPreviews.current.set(item.id, url);
+    }
+    return localPreviews.current.get(item.id);
+  };
+  const getStatusDisplay = (status) => {
+    switch (status) {
+      case "uploading":
+        return {
+          text: "Uploading",
+          color: "text-blue-600",
+          showSpinner: true,
+          icon: /* @__PURE__ */ import_react44.default.createElement(Spinner_default, { size: "xs", color: "gray" }),
+          canPreview: false
+        };
+      case "success":
+        return {
+          text: "Completed",
+          color: "text-green-600",
+          showSpinner: false,
+          icon: /* @__PURE__ */ import_react44.default.createElement(import_react45.RiCheckLine, { className: "w-3 h-3 text-white" }),
+          canPreview: true
+        };
+      case "error":
+        return {
+          text: "Failed",
+          color: "text-red-600",
+          showSpinner: false,
+          icon: /* @__PURE__ */ import_react44.default.createElement(import_react45.RiCloseLine, { className: "w-3 h-3 text-white" }),
+          canPreview: false
+        };
+      default:
+        return {
+          text: "",
+          color: "",
+          showSpinner: false,
+          icon: null,
+          canPreview: false
+        };
+    }
+  };
+  const getProgressColor = (status) => {
+    switch (status) {
+      case "uploading":
+        return "bg-blue-500";
+      case "success":
+        return "bg-green-600";
+      case "error":
+        return "bg-red-500";
+      default:
+        return "bg-gray-300";
+    }
+  };
+  const getItemFileIcon = (item) => {
+    var _a2, _b;
+    const fileName = item.name || ((_a2 = item.file) == null ? void 0 : _a2.name) || "";
+    const fileType = ((_b = item.file) == null ? void 0 : _b.type) || "";
+    return getFileIcon(fileName, fileType);
+  };
+  const handleUpload = import_react44.default.useCallback(
+    async (item) => {
+      if (!item.file || !onUpload)
+        return;
+      try {
+        if (onUpdateItem) {
+          onUpdateItem(item.id, { status: "uploading", progress: 0 });
+        }
+        const previewUrl = await onUpload(item.file, (progress) => {
+          uploadProgress.current.set(item.id, progress);
+          if (onUpdateItem) {
+            onUpdateItem(item.id, { progress, status: "uploading" });
+          }
+        });
+        if (onUpdateItem) {
+          onUpdateItem(item.id, {
+            progress: 100,
+            status: "success",
+            previewUrl
+          });
+        }
+      } catch (error) {
+        if (onUpdateItem) {
+          onUpdateItem(item.id, { progress: 0, status: "error" });
+        }
+      }
+    },
+    [onUpload, onUpdateItem]
+  );
+  const getCurrentProgress = (item) => {
+    return uploadProgress.current.get(item.id) ?? item.progress ?? 0;
+  };
+  const handleRetry = (id) => {
+    const item = items.find((item2) => item2.id === id);
+    if (item && onUpload) {
+      handleUpload(item);
+    } else if (onRetry) {
+      onRetry(id);
+    }
+  };
+  const handleDelete = (id) => {
+    if (localPreviews.current.has(id)) {
+      const url = localPreviews.current.get(id);
+      if (url)
+        URL.revokeObjectURL(url);
+      localPreviews.current.delete(id);
+    }
+    uploadProgress.current.delete(id);
+    if (onDelete) {
+      onDelete(id);
+    }
+  };
+  const triggerInput = () => {
+    var _a2;
+    return (_a2 = inputRef.current) == null ? void 0 : _a2.click();
+  };
+  const handleInputChange = (e) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length === 0)
+      return;
+    const validFiles = files.filter(
+      (file) => file.size <= maxSizeMB * 1024 * 1024
+    );
+    if (validFiles.length === 0)
+      return;
+    onAddFiles(multiple ? validFiles : [validFiles[0]]);
+    e.target.value = "";
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (!disabled)
+      setIsDragging(true);
+  };
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (disabled)
+      return;
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length === 0)
+      return;
+    const validFiles = files.filter(
+      (file) => file.size <= maxSizeMB * 1024 * 1024
+    );
+    if (validFiles.length > 0) {
+      onAddFiles(multiple ? validFiles : [validFiles[0]]);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      triggerInput();
+    }
+  };
+  import_react44.default.useEffect(() => {
+    if (autoUpload && onUpload) {
+      items.forEach((item) => {
+        if (item.status === "idle" && item.file) {
+          handleUpload(item);
+        }
+      });
+    }
+  }, [items, autoUpload, onUpload, handleUpload]);
+  import_react44.default.useEffect(() => {
+    const previews = localPreviews == null ? void 0 : localPreviews.current;
+    return () => {
+      previews == null ? void 0 : previews.forEach((url) => URL == null ? void 0 : URL.revokeObjectURL(url));
+    };
+  }, []);
+  return /* @__PURE__ */ import_react44.default.createElement("div", { className: `w-full ${className}` }, /* @__PURE__ */ import_react44.default.createElement(
+    "input",
+    {
+      ref: inputRef,
+      type: "file",
+      accept,
+      multiple,
+      hidden: true,
+      onChange: handleInputChange,
+      disabled
+    }
+  ), /* @__PURE__ */ import_react44.default.createElement(
+    Label_default,
+    {
+      htmlFor: (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.id,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      onClick: triggerInput,
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      role: "button",
+      disabled,
+      "aria-label": `Upload ${multiple ? "images" : "an image"}`,
+      className: cn(
+        "max-w-[564px] w-full bg-white py-4 flex items-center justify-center rounded-lg border cursor-pointer transition-all",
+        isDragging ? "border-blue-500 bg-blue-50" : "border-gray-300 bg-white hover:bg-gray-50",
+        disabled && "pointer-events-none cursor-not-allowed"
+      )
+    },
+    /* @__PURE__ */ import_react44.default.createElement("div", { className: "flex items-center gap-3 text-center" }, /* @__PURE__ */ import_react44.default.createElement("div", null, /* @__PURE__ */ import_react44.default.createElement("p", { className: "text-sm text-gray-600" }, "Drag files here or", /* @__PURE__ */ import_react44.default.createElement("span", { className: "text-primary-600 font-semibold ml-1" }, "Upload"), " ", /* @__PURE__ */ import_react44.default.createElement("br", null))))
+  ), /* @__PURE__ */ import_react44.default.createElement("span", { className: "text-xs" }, hintText ?? `Only PNG, JPG, GIF. Max file size ${maxSizeMB}MB`), /* @__PURE__ */ import_react44.default.createElement("div", { className: "flex flex-col gap-4 mt-4" }, items == null ? void 0 : items.map((item) => {
+    var _a2, _b;
+    const previewUrl = getPreviewUrl(item);
+    const progress = getCurrentProgress(item);
+    const statusInfo = getStatusDisplay(item.status);
+    const progressColor = getProgressColor(item == null ? void 0 : item.status);
+    const fileIcon = getItemFileIcon(item);
+    return /* @__PURE__ */ import_react44.default.createElement(
+      "div",
+      {
+        key: item == null ? void 0 : item.id,
+        className: "flex items-center gap-4 bg-white max-w-[564px] w-full p-4 rounded-lg border border-gray-200"
+      },
+      /* @__PURE__ */ import_react44.default.createElement("div", { className: "w-14 h-14 flex-shrink-0 rounded-md overflow-hidden relative" }, /* @__PURE__ */ import_react44.default.createElement(
+        import_image2.default,
+        {
+          src: "/fileImg.svg",
+          className: "absolute inset-0 w-full h-full object-contain",
+          fill: true,
+          alt: "file"
+        }
+      ), /* @__PURE__ */ import_react44.default.createElement("div", { className: "relative z-10 mt-2 -ml-[2px] flex items-center justify-center w-full h-full text-white" }, fileIcon)),
+      /* @__PURE__ */ import_react44.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react44.default.createElement("div", { className: "flex items-start justify-between gap-2 mb-3" }, /* @__PURE__ */ import_react44.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react44.default.createElement("h4", { className: "text-sm font-medium text-gray-900 truncate" }, (item == null ? void 0 : item.name) || ((_a2 = item.file) == null ? void 0 : _a2.name) || "Unnamed file"), showSizeText && /* @__PURE__ */ import_react44.default.createElement("div", { className: "text-xs text-gray-500 mt-1 flex items-center gap-1" }, formatSize((item == null ? void 0 : item.size) || ((_b = item.file) == null ? void 0 : _b.size)), statusInfo.text && /* @__PURE__ */ import_react44.default.createElement("div", { className: "ml-2 font-medium flex items-center gap-1" }, (statusInfo == null ? void 0 : statusInfo.showSpinner) ? (
+        // For uploading - just show spinner without circle
+        /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, statusInfo.icon, /* @__PURE__ */ import_react44.default.createElement("span", { className: statusInfo.color }, statusInfo.text))
+      ) : (
+        // For completed/failed - show circle with icon
+        /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, /* @__PURE__ */ import_react44.default.createElement(
+          "div",
+          {
+            className: `w-4 h-4 rounded-full flex justify-center items-center ${(statusInfo == null ? void 0 : statusInfo.color) === "text-red-600" ? "bg-red-600" : (statusInfo == null ? void 0 : statusInfo.color) === "text-green-600" ? "bg-green-600" : "bg-gray-400"}`
+          },
+          statusInfo == null ? void 0 : statusInfo.icon
+        ), /* @__PURE__ */ import_react44.default.createElement("span", { className: statusInfo.color }, statusInfo == null ? void 0 : statusInfo.text))
+      )))), /* @__PURE__ */ import_react44.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react44.default.createElement("div", { className: "flex items-center gap-2" }, onPreview && (item == null ? void 0 : item.status) === "success" && /* @__PURE__ */ import_react44.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPreview(item.id),
+          className: "p-2 rounded-md hover:bg-gray-100 transition-colors text-gray-600",
+          title: "Preview"
+        },
+        /* @__PURE__ */ import_react44.default.createElement(import_react45.RiEyeLine, { size: 16 })
+      ), (item == null ? void 0 : item.status) === "error" && /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, /* @__PURE__ */ import_react44.default.createElement("span", { className: "hidden sm:inline-block" }, /* @__PURE__ */ import_react44.default.createElement(
+        Button_default,
+        {
+          variant: "outlined",
+          intent: "primary-outlined",
+          type: "button",
+          size: "sm",
+          onClick: () => handleRetry(item == null ? void 0 : item.id),
+          className: "whitespace-nowrap h-[30px]"
+        },
+        /* @__PURE__ */ import_react44.default.createElement(import_react45.RiRefreshLine, { size: 16 }),
+        "Try Again"
+      )), /* @__PURE__ */ import_react44.default.createElement("span", { className: "sm:hidden" }, /* @__PURE__ */ import_react44.default.createElement(
+        Button_default,
+        {
+          variant: "outlined",
+          intent: "primary-outlined",
+          type: "button",
+          size: "sm",
+          onClick: () => handleRetry(item == null ? void 0 : item.id),
+          className: "h-[30px] px-1 py-1"
+        },
+        /* @__PURE__ */ import_react44.default.createElement(import_react45.RiRefreshLine, { size: 16 })
+      ))), /* @__PURE__ */ import_react44.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleDelete(item.id),
+          className: "p-2 rounded-md hover:bg-gray-100 transition-colors text-gray-600",
+          title: "Delete"
+        },
+        /* @__PURE__ */ import_react44.default.createElement(import_react45.RiDeleteBin6Line, { size: 16 })
+      )))), /* @__PURE__ */ import_react44.default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ import_react44.default.createElement("div", { className: "flex-1" }, /* @__PURE__ */ import_react44.default.createElement(
+        Progress_default,
+        {
+          progressColor,
+          progress
+        }
+      )), /* @__PURE__ */ import_react44.default.createElement("div", { className: "text-xs text-gray-500 w-12 text-right" }, item.status === "error" ? "--%" : `${Math.round(progress)}%`)))
+    );
+  })));
+}
+
 // app/components/Sidebar.tsx
-var import_react34 = __toESM(require("react"), 1);
+var import_react46 = __toESM(require("react"), 1);
 var import_link2 = __toESM(require("next/link"), 1);
+var import_react47 = require("@remixicon/react");
 var import_navigation = require("next/navigation");
-var Sidebar = ({ children, collapsed, setCollapsed }) => {
-  return /* @__PURE__ */ import_react34.default.createElement(
+var Sidebar = ({ children, collapsed, setCollapsed, dense = false }) => {
+  return /* @__PURE__ */ import_react46.default.createElement(
     "div",
     {
       onMouseEnter: () => setCollapsed(true),
       onMouseLeave: () => setCollapsed(false),
       className: cn(
         "border border-gray-200 shadow-sm relative flex flex-col min-h-screen transition-all duration-300 ease-in-out cursor-pointer",
-        !collapsed ? "w-[80px] py-[21px] px-[17px]" : "w-[308px] py-[22px] px-6"
+        !collapsed ? dense ? "w-[76px] py-[19px] px-[15px]" : "w-[80px] py-[21px] px-[17px]" : dense ? "w-[304px] py-[20px] px-5" : "w-[308px] py-[22px] px-6"
       )
     },
-    /* @__PURE__ */ import_react34.default.createElement("div", { className: "" }, children)
+    /* @__PURE__ */ import_react46.default.createElement("div", null, children)
   );
 };
 var SidebarHeader = ({
-  collapsed,
-  setCollapsed,
-  children
+  children,
+  dense = false
 }) => {
-  return /* @__PURE__ */ import_react34.default.createElement(
-    "div",
-    {
-      className: cn({
-        "z-20": true
-      })
-    },
-    /* @__PURE__ */ import_react34.default.createElement("div", { className: "flex justify-between items-center mb-4" }, /* @__PURE__ */ import_react34.default.createElement("span", { className: "whitespace-nowrap" }, children))
-  );
+  return /* @__PURE__ */ import_react46.default.createElement("div", { className: cn("z-20", dense ? "mb-3" : "mb-4") }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ import_react46.default.createElement("span", { className: "whitespace-nowrap" }, children)));
 };
 var SidebarMenu = ({
   collapsed,
   navItems,
-  scroll = false
+  scroll = false,
+  dense = false
 }) => {
+  const [openMenus, setOpenMenus] = (0, import_react46.useState)({});
   const currentPath = (0, import_navigation.usePathname)();
-  return /* @__PURE__ */ import_react34.default.createElement("nav", { className: `max-h-[60vh] ${scroll && "overflow-y-auto customScroll"}` }, /* @__PURE__ */ import_react34.default.createElement("ul", { className: "my-2 flex flex-col gap-2 items-stretch" }, navItems == null ? void 0 : navItems.map((parentItem, parentIndex) => /* @__PURE__ */ import_react34.default.createElement(
-    "li",
+  const toggleMenu = (label) => {
+    setOpenMenus((prev) => ({ ...prev, [label]: !prev[label] }));
+  };
+  import_react46.default.useEffect(() => {
+    if (!collapsed) {
+      setOpenMenus({});
+    }
+  }, [collapsed]);
+  const getMenuHeight = () => {
+    const footerItemsLength = (navItems == null ? void 0 : navItems.reduce((acc, item) => acc + item.items.length, 0)) || 0;
+    if (footerItemsLength <= 1) {
+      return "max-h-[80vh]";
+    } else if (footerItemsLength === 2) {
+      return "max-h-[70vh]";
+    } else {
+      return "max-h-[60vh]";
+    }
+  };
+  const renderMenuItems = (items, level = 0) => {
+    return /* @__PURE__ */ import_react46.default.createElement("ul", { className: level > 0 ? "ml-5 border-l border-gray-200" : "" }, items == null ? void 0 : items.map((item, index) => {
+      const hasSubItems = item.subItems && item.subItems.length > 0;
+      const isActive = item.href === currentPath;
+      const isOpen = openMenus[item.label];
+      const paddingLeft = level === 0 ? dense ? "10px" : "12px" : `${level * 5 + (dense ? 10 : 12)}px`;
+      return /* @__PURE__ */ import_react46.default.createElement("li", { key: index }, hasSubItems ? /* @__PURE__ */ import_react46.default.createElement(
+        import_link2.default,
+        {
+          href: item.href || "#",
+          className: cn(
+            "flex items-center justify-between rounded-md cursor-pointer transition-colors duration-300 font-semibold whitespace-nowrap overflow-hidden",
+            dense ? "px-3 py-1.5 mb-1" : "px-3 py-2 mb-[6px]",
+            isActive ? "bg-primary-600 text-white" : "text-gray-700",
+            isOpen ? "bg-gray-100" : "",
+            "hover:bg-gray-100",
+            level > 0 ? "text-sm font-medium" : ""
+          ),
+          style: { paddingLeft },
+          onClick: (e) => {
+            if (collapsed) {
+              toggleMenu(item.label);
+            }
+            if (!item.href)
+              e.preventDefault();
+          }
+        },
+        /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex items-center gap-2" }, item.icon && level === 0 && /* @__PURE__ */ import_react46.default.createElement("span", { className: dense ? "text-xs" : "text-text-sm" }, item.icon), /* @__PURE__ */ import_react46.default.createElement("span", { className: cn(!collapsed ? "opacity-0" : "") }, item.label)),
+        collapsed && hasSubItems && /* @__PURE__ */ import_react46.default.createElement("span", null, isOpen ? /* @__PURE__ */ import_react46.default.createElement(
+          import_react47.RiArrowDownSLine,
+          {
+            size: dense ? 16 : 18,
+            color: "#475467"
+          }
+        ) : /* @__PURE__ */ import_react46.default.createElement(
+          import_react47.RiArrowRightSLine,
+          {
+            size: dense ? 16 : 18,
+            color: "#475467"
+          }
+        ))
+      ) : /* @__PURE__ */ import_react46.default.createElement(
+        import_link2.default,
+        {
+          href: item.href || "#",
+          className: cn(
+            "flex items-center gap-2 rounded-md cursor-pointer transition-colors duration-300 whitespace-nowrap overflow-hidden",
+            "hover:bg-gray-100",
+            dense ? "px-3 py-1 mb-1" : "px-3 py-2 mb-[6px]",
+            isActive ? "bg-primary-600 hover:bg-primary-700 text-white" : "text-gray-700",
+            level > 0 ? "text-sm font-medium" : "font-semibold"
+          )
+        },
+        item.icon && level === 0 && /* @__PURE__ */ import_react46.default.createElement("span", { className: dense ? "text-xs" : "text-text-sm" }, item.icon),
+        /* @__PURE__ */ import_react46.default.createElement("span", { className: cn(!collapsed ? "opacity-0" : "") }, item.label)
+      ), hasSubItems && isOpen && /* @__PURE__ */ import_react46.default.createElement("div", { className: dense ? "mt-0.5" : "mt-1" }, renderMenuItems(item.subItems, level + 1)));
+    }));
+  };
+  return /* @__PURE__ */ import_react46.default.createElement(
+    "nav",
     {
-      key: parentIndex,
-      className: "flex flex-col gap-3 mb-1 whitespace-nowrap overflow-hidden"
+      className: cn(
+        getMenuHeight(),
+        "",
+        scroll && collapsed ? "overflow-y-auto customScroll" : "overflow-hidden"
+      )
     },
-    /* @__PURE__ */ import_react34.default.createElement(
-      "p",
+    /* @__PURE__ */ import_react46.default.createElement(
+      "ul",
       {
-        className: cn({
-          "text-[14px] text-gray-500": true,
-          "w-[37px] text-ellipsis text-white whitespace-nowrap overflow-hidden": !collapsed
-        })
-      },
-      parentItem.label
-    ),
-    /* @__PURE__ */ import_react34.default.createElement("ul", null, parentItem == null ? void 0 : parentItem.items.map((item, index) => /* @__PURE__ */ import_react34.default.createElement("li", { key: index }, /* @__PURE__ */ import_react34.default.createElement(
-      import_link2.default,
-      {
-        className: cn({
-          "hover:bg-gray-100 px-3 py-2 flex items-center mb-[6px] cursor-pointer rounded-md transition-colors duration-300 font-semibold whitespace-nowrap overflow-hidden": true,
-          "text-white bg-primary-600": currentPath === (item == null ? void 0 : item.href),
-          "text-gray-700": currentPath !== (item == null ? void 0 : item.href),
-          "hover:bg-primary-600": currentPath === (item == null ? void 0 : item.href)
-        }),
-        href: item.href,
-        passHref: true
+        className: cn(
+          "flex flex-col gap-2 items-stretch",
+          dense ? "my-1.5" : "my-2"
+        )
       },
-      /* @__PURE__ */ import_react34.default.createElement(
-        "div",
+      navItems == null ? void 0 : navItems.map((parentItem, parentIndex) => /* @__PURE__ */ import_react46.default.createElement(
+        "li",
         {
-          className: `flex items-center gap-2 whitespace-nowrap`
+          key: parentIndex,
+          className: "flex flex-col gap-3 mb-1 whitespace-nowrap overflow-hidden"
         },
-        /* @__PURE__ */ import_react34.default.createElement("span", { className: "text-text-sm" }, " ", item.icon),
-        /* @__PURE__ */ import_react34.default.createElement("span", { className: cn(!collapsed ? "opacity-0" : "") }, item.label)
-      )
-    ))))
-  ))));
+        /* @__PURE__ */ import_react46.default.createElement(
+          "p",
+          {
+            className: cn(
+              "text-gray-500 font-medium",
+              dense ? "text-[12px]" : "text-[14px]",
+              !collapsed ? "opacity-0" : ""
+            )
+          },
+          parentItem.label
+        ),
+        renderMenuItems(parentItem.items)
+      ))
+    )
+  );
 };
-var Footer = ({
+var SidebarFooter = ({
   children,
   setCollapsed,
   collapsed,
-  navItems
+  navItems,
+  dense = false
 }) => {
   const currentPath = (0, import_navigation.usePathname)();
-  return /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(
     "div",
     {
       className: cn({
-        "absolute bottom-0 max-h-[230px] overflow-auto bg-white z-10 py-3 w-[85%]": true,
-        "w-[55%]": !collapsed
+        "absolute bottom-0 overflow-auto bg-white z-10": true,
+        "max-h-[226px] py-2.5 w-[85%]": dense,
+        "max-h-[230px] py-3 w-[85%]": !dense,
+        "w-[53%]": !collapsed && dense,
+        "w-[55%]": !collapsed && !dense
       }),
       onClick: () => setCollapsed(true)
     },
-    collapsed && /* @__PURE__ */ import_react34.default.createElement("div", { className: "shadow-md" }, /* @__PURE__ */ import_react34.default.createElement(Divider_default, null)),
-    navItems && navItems.length > 0 && /* @__PURE__ */ import_react34.default.createElement("nav", { className: "flex-grow w-full" }, /* @__PURE__ */ import_react34.default.createElement("ul", { className: "my-2 flex flex-col gap-2 items-stretch" }, navItems == null ? void 0 : navItems.map((parentItem, parentIndex) => {
-      var _a;
-      return /* @__PURE__ */ import_react34.default.createElement(
-        "li",
-        {
-          key: parentIndex,
-          className: "flex flex-col gap-3 mb-1 whitespace-nowrap overflow-hidden"
-        },
-        /* @__PURE__ */ import_react34.default.createElement(
-          "p",
-          {
-            className: cn({
-              "text-[14px] text-gray-500": true,
-              "w-[37px] text-ellipsis text-white whitespace-nowrap overflow-hidden": !collapsed
-            })
-          },
-          parentItem.label
-        ),
-        /* @__PURE__ */ import_react34.default.createElement("ul", null, (_a = parentItem == null ? void 0 : parentItem.items) == null ? void 0 : _a.map((item, index) => /* @__PURE__ */ import_react34.default.createElement("li", { key: index }, /* @__PURE__ */ import_react34.default.createElement(
-          import_link2.default,
+    collapsed && /* @__PURE__ */ import_react46.default.createElement("div", { className: "shadow-md" }, /* @__PURE__ */ import_react46.default.createElement(Divider_default, null)),
+    navItems && navItems.length > 0 && /* @__PURE__ */ import_react46.default.createElement("nav", { className: "flex-grow w-full" }, /* @__PURE__ */ import_react46.default.createElement(
+      "ul",
+      {
+        className: cn(
+          "flex flex-col gap-2 items-stretch",
+          dense ? "my-1.5" : "my-2"
+        )
+      },
+      navItems == null ? void 0 : navItems.map((parentItem, parentIndex) => {
+        var _a;
+        return /* @__PURE__ */ import_react46.default.createElement(
+          "li",
           {
-            className: cn({
-              "hover:bg-gray-100 px-3 py-2 flex items-center mb-[6px] cursor-pointer rounded-md transition-colors duration-300 font-semibold whitespace-nowrap overflow-hidden": true,
-              "text-white bg-primary-600": currentPath === (item == null ? void 0 : item.href),
-              "text-gray-700": currentPath !== (item == null ? void 0 : item.href),
-              "hover:bg-primary-600": currentPath === (item == null ? void 0 : item.href)
-            }),
-            href: item.href,
-            passHref: true
+            key: parentIndex,
+            className: "flex flex-col gap-3 mb-1 whitespace-nowrap overflow-hidden"
           },
-          /* @__PURE__ */ import_react34.default.createElement(
-            "div",
+          /* @__PURE__ */ import_react46.default.createElement(
+            "p",
             {
-              className: `flex items-center gap-2 whitespace-nowrap`
+              className: cn({
+                "text-gray-500": true,
+                "text-[12px]": dense,
+                "text-[14px]": !dense,
+                "w-[35px] text-ellipsis text-white whitespace-nowrap overflow-hidden": !collapsed && dense,
+                "w-[37px] text-ellipsis text-white whitespace-nowrap overflow-hidden": !collapsed && !dense
+              })
             },
-            /* @__PURE__ */ import_react34.default.createElement("span", { className: "text-text-sm" }, " ", item.icon),
-            /* @__PURE__ */ import_react34.default.createElement("span", { className: cn(!collapsed ? "opacity-0" : "") }, item.label)
-          )
-        ))))
-      );
-    }))),
+            parentItem.label
+          ),
+          /* @__PURE__ */ import_react46.default.createElement("ul", null, (_a = parentItem == null ? void 0 : parentItem.items) == null ? void 0 : _a.map((item, index) => /* @__PURE__ */ import_react46.default.createElement("li", { key: index }, /* @__PURE__ */ import_react46.default.createElement(
+            import_link2.default,
+            {
+              className: cn({
+                "hover:bg-gray-100 flex items-center cursor-pointer rounded-md transition-colors duration-300 font-semibold whitespace-nowrap overflow-hidden": true,
+                "px-2 py-1.5 mb-1": dense,
+                "px-3 py-2 mb-[6px]": !dense,
+                "text-white bg-primary-600": currentPath === (item == null ? void 0 : item.href),
+                "text-gray-700": currentPath !== (item == null ? void 0 : item.href),
+                "hover:bg-primary-600": currentPath === (item == null ? void 0 : item.href)
+              }),
+              href: (item == null ? void 0 : item.href) || "#",
+              passHref: true
+            },
+            /* @__PURE__ */ import_react46.default.createElement(
+              "div",
+              {
+                className: `flex items-center gap-2 whitespace-nowrap`
+              },
+              /* @__PURE__ */ import_react46.default.createElement(
+                "span",
+                {
+                  className: dense ? "text-xs" : "text-text-sm"
+                },
+                " ",
+                item.icon
+              ),
+              /* @__PURE__ */ import_react46.default.createElement("span", { className: cn(!collapsed ? "opacity-0" : "") }, item.label)
+            )
+          ))))
+        );
+      })
+    )),
     children
   );
 };
 Sidebar.Header = SidebarHeader;
 Sidebar.Menu = SidebarMenu;
-Sidebar.Footer = Footer;
+Sidebar.Footer = SidebarFooter;
 var Sidebar_default = Sidebar;
 
+// app/components/Skeleton.tsx
+var import_react48 = __toESM(require("react"), 1);
+var Skeleton = ({
+  width = "100%",
+  height = "100%",
+  circle = false,
+  animation = "shimmer"
+}) => {
+  const style = {
+    width: typeof width === "number" ? `${width}px` : width,
+    height: typeof height === "number" ? `${height}px` : height,
+    borderRadius: circle ? "50%" : void 0,
+    display: "block"
+  };
+  return /* @__PURE__ */ import_react48.default.createElement(
+    "span",
+    {
+      className: cn(
+        "skeleton rounded-lg",
+        circle ? "circle" : "",
+        animation === "shimmer" && "skeleton-shimmer",
+        animation === "wave" && "skeleton-wave",
+        animation === "pulse" && "skeleton-pulse"
+      ),
+      style
+    }
+  );
+};
+var Skeleton_default = Skeleton;
+
 // app/components/Slider.tsx
-var import_react35 = __toESM(require("react"), 1);
-var Slider = (0, import_react35.forwardRef)(
+var import_react49 = __toESM(require("react"), 1);
+var Slider = (0, import_react49.forwardRef)(
   ({ value, min = 0, max = 100, size = "sm", ...props }, ref) => {
     const progress = (value - min) / (max - min) * 100;
-    return /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, /* @__PURE__ */ import_react35.default.createElement(
+    return /* @__PURE__ */ import_react49.default.createElement(import_react49.default.Fragment, null, /* @__PURE__ */ import_react49.default.createElement(
       "input",
       {
         ref,
@@ -2053,28 +3514,30 @@ var Slider = (0, import_react35.forwardRef)(
     ));
   }
 );
-Slider.displayName = "Slider";
-var Slider_default = Slider;
-
-// app/components/Skeleton.tsx
-var import_react36 = __toESM(require("react"), 1);
-var Skeleton = ({
-  width = "100%",
-  height = "100%",
-  circle = false
-}) => {
-  const style = {
-    width: typeof width === "number" ? `${width}px` : width,
-    height: typeof height === "number" ? `${height}px` : height,
-    borderRadius: circle ? "50%" : void 0
-  };
-  return /* @__PURE__ */ import_react36.default.createElement("span", { className: `skeleton rounded-lg ${circle ? "circle" : ""}`, style });
-};
-var Skeleton_default = Skeleton;
+Slider.displayName = "Slider";
+var Slider_default = Slider;
+
+// app/components/SplitButton.tsx
+var import_react50 = __toESM(require("react"), 1);
+var SplitButton = (0, import_react50.forwardRef)(
+  ({ children, className = "", size = "md", appearance = "primary", compact = false, ...props }, ref) => {
+    return /* @__PURE__ */ import_react50.default.createElement(
+      "div",
+      {
+        ref,
+        className: `inline-flex ${compact ? "gap-0" : ""} ${className}`,
+        ...props
+      },
+      children
+    );
+  }
+);
+SplitButton.displayName = "SplitButton";
+var SplitButton_default = SplitButton;
 
 // app/components/Stepper.tsx
-var import_react37 = __toESM(require("react"), 1);
-var import_react38 = require("@remixicon/react");
+var import_react51 = __toESM(require("react"), 1);
+var import_react52 = require("@remixicon/react");
 var Stepper = ({
   stepsConfig,
   currentStep,
@@ -2083,82 +3546,126 @@ var Stepper = ({
   setIsComplete,
   position = "horizontal"
 }) => {
-  var _a;
-  const stepRef = (0, import_react37.useRef)([]);
+  var _a, _b;
+  const stepRef = (0, import_react51.useRef)([]);
   if (!stepsConfig.length) {
     return null;
   }
   const ActiveComponent = (_a = stepsConfig[currentStep - 1]) == null ? void 0 : _a.Component;
-  return /* @__PURE__ */ import_react37.default.createElement("div", { className: cn(position !== "horizontal" && "flex") }, /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react51.default.createElement(
     "div",
     {
-      className: cn(
-        "relative",
-        position === "horizontal" ? "flex justify-between items-start" : "flex flex-col"
-      )
+      role: "region",
+      "aria-label": "Step Progress",
+      className: cn(position !== "horizontal" && "flex")
     },
-    stepsConfig.map((step, index) => /* @__PURE__ */ import_react37.default.createElement(
+    /* @__PURE__ */ import_react51.default.createElement(
       "div",
       {
-        key: index,
-        ref: (el) => stepRef.current[index] = el,
-        className: `w-full ${position === "horizontal" ? "flex gap-4 flex-col" : "flex gap-6 justify-start"} ${currentStep > index + 1 || isComplete ? "complete" : ""} ${currentStep === index + 1 ? "" : ""}`
+        className: cn(
+          "relative",
+          position === "horizontal" ? "flex justify-center items-start" : "flex flex-col"
+        ),
+        role: "list",
+        "aria-label": `Progress: ${currentStep} of ${stepsConfig.length} steps`
       },
-      /* @__PURE__ */ import_react37.default.createElement(
+      stepsConfig == null ? void 0 : stepsConfig.map((step, index) => /* @__PURE__ */ import_react51.default.createElement(
         "div",
         {
+          key: index,
+          ref: (el) => stepRef.current[index] = el,
           className: cn(
-            "",
-            position === "horizontal" ? "flex items-center" : "flex flex-col"
-          )
+            position === "horizontal" ? "flex gap-4 flex-col" : "flex gap-6 justify-start",
+            index === stepsConfig.length - 1 ? "w-auto" : "w-full",
+            currentStep > index + 1 || isComplete ? "complete" : "",
+            currentStep === index + 1 ? "" : ""
+          ),
+          role: "listitem",
+          "aria-current": currentStep === index + 1 ? "step" : void 0,
+          "aria-label": `${step.name}${step.helperName ? `, ${step.helperName}` : ""}, ${currentStep > index + 1 || isComplete ? "completed" : currentStep === index + 1 ? "current step" : "pending"}`
         },
-        /* @__PURE__ */ import_react37.default.createElement(
+        /* @__PURE__ */ import_react51.default.createElement(
           "div",
           {
-            className: `w-[20px] h-[20px] rounded-full bg-gray-100 flex justify-center items-center ${currentStep === index + 1 ? "border border-primary-600" : "border border-gray-200"} ${currentStep > index + 1 || isComplete ? "bg-primary-600 border-none" : ""}`
+            className: cn(
+              "",
+              position === "horizontal" ? "flex items-center" : "flex flex-col"
+            )
           },
-          currentStep === index + 1 && !isComplete && /* @__PURE__ */ import_react37.default.createElement("span", { className: "w-[10px] h-[10px] rounded-full bg-primary-600" }),
-          (currentStep > index + 1 || isComplete) && /* @__PURE__ */ import_react37.default.createElement("span", null, /* @__PURE__ */ import_react37.default.createElement(import_react38.RiCheckLine, { size: 12, color: "#fff" }))
+          /* @__PURE__ */ import_react51.default.createElement(
+            "div",
+            {
+              className: `w-[20px] h-[20px] rounded-full bg-gray-100 flex justify-center items-center ${currentStep === index + 1 ? "border border-primary-600" : "border border-gray-200"} ${currentStep > index + 1 || isComplete ? "bg-primary-600 border-none" : ""}`,
+              role: "status",
+              "aria-label": `Step ${index + 1} ${currentStep > index + 1 || isComplete ? "completed" : currentStep === index + 1 ? "current" : "pending"}`
+            },
+            currentStep === index + 1 && !isComplete && /* @__PURE__ */ import_react51.default.createElement(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "w-[10px] h-[10px] rounded-full bg-primary-600"
+              }
+            ),
+            (currentStep > index + 1 || isComplete) && /* @__PURE__ */ import_react51.default.createElement("span", { "aria-hidden": "true" }, /* @__PURE__ */ import_react51.default.createElement(import_react52.RiCheckLine, { size: 12, color: "#fff" }))
+          ),
+          index !== stepsConfig.length - 1 && /* @__PURE__ */ import_react51.default.createElement(
+            "div",
+            {
+              className: cn(
+                "mx-auto rounded-lg bg-gray-200",
+                position === "horizontal" ? "w-[80%] h-1" : "h-[100px] w-1 my-2"
+              ),
+              "aria-hidden": "true"
+            },
+            /* @__PURE__ */ import_react51.default.createElement(
+              "p",
+              {
+                className: cn(
+                  "h-full rounded-lg",
+                  currentStep > index + 1 ? "bg-primary-600" : ""
+                )
+              }
+            )
+          )
         ),
-        index !== stepsConfig.length - 1 && /* @__PURE__ */ import_react37.default.createElement(
+        /* @__PURE__ */ import_react51.default.createElement(
           "div",
           {
+            "aria-hidden": currentStep !== index + 1,
             className: cn(
-              "mx-auto rounded-lg bg-gray-200",
-              position === "horizontal" ? "w-[80%] h-1" : "h-[100px] w-1 my-2"
+              "whitespace-nowrap",
+              position === "vertical" || (step == null ? void 0 : step.helperName) ? "-mt-1" : ""
             )
           },
-          /* @__PURE__ */ import_react37.default.createElement(
-            "p",
+          /* @__PURE__ */ import_react51.default.createElement(
+            "span",
             {
-              className: cn(
-                "h-full rounded-lg ",
-                currentStep > index + 1 ? "bg-primary-600" : ""
-              )
-            }
-          )
+              "aria-label": "Helper text",
+              className: "text-gray-400 text-text-xs"
+            },
+            step == null ? void 0 : step.helperName
+          ),
+          /* @__PURE__ */ import_react51.default.createElement("p", null, step == null ? void 0 : step.name)
         )
-      ),
-      /* @__PURE__ */ import_react37.default.createElement(
-        "div",
-        {
-          className: cn(
-            "whitespace-nowrap",
-            position === "vertical" || (step == null ? void 0 : step.helperName) ? "-mt-1" : ""
-          )
-        },
-        /* @__PURE__ */ import_react37.default.createElement("span", { className: "text-gray-400 text-text-xs" }, step == null ? void 0 : step.helperName),
-        /* @__PURE__ */ import_react37.default.createElement("p", null, step == null ? void 0 : step.name)
-      )
-    ))
-  ), ActiveComponent && /* @__PURE__ */ import_react37.default.createElement(ActiveComponent, null));
+      ))
+    ),
+    ActiveComponent && /* @__PURE__ */ import_react51.default.createElement(
+      "div",
+      {
+        role: "tabpanel",
+        "aria-label": `Current step: ${(_b = stepsConfig[currentStep - 1]) == null ? void 0 : _b.name}`,
+        tabIndex: 0
+      },
+      /* @__PURE__ */ import_react51.default.createElement(ActiveComponent, null)
+    )
+  );
 };
 var Stepper_default = Stepper;
 
 // app/components/TableComponents.tsx
-var import_react39 = __toESM(require("react"), 1);
+var import_react53 = __toESM(require("react"), 1);
 var Table = ({ children, className, dense, ...props }) => {
-  return /* @__PURE__ */ import_react39.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement(
     "table",
     {
       ...props,
@@ -2176,7 +3683,7 @@ var TableHead = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ import_react39.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement(
     "thead",
     {
       ...props,
@@ -2190,7 +3697,7 @@ var TableBody = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ import_react39.default.createElement("tbody", { ...props, className: cn(className) }, children);
+  return /* @__PURE__ */ import_react53.default.createElement("tbody", { ...props, className: cn(className) }, children);
 };
 var TableRow = ({
   children,
@@ -2198,7 +3705,7 @@ var TableRow = ({
   indent,
   ...props
 }) => {
-  return /* @__PURE__ */ import_react39.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement(
     "tr",
     {
       ...props,
@@ -2218,9 +3725,11 @@ var TableHeadCell = ({
   sticky,
   shadow,
   left,
+  shadowRight,
+  right,
   ...props
 }) => {
-  return /* @__PURE__ */ import_react39.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement(
     "th",
     {
       ...props,
@@ -2228,14 +3737,17 @@ var TableHeadCell = ({
         "px-6 py-3 text-left group-has-[th]/dense:py-2",
         sticky && `sticky bg-gray-50`,
         sticky && shadow && "shadow-table",
+        sticky && shadowRight && "shadow-tableRight",
         left,
+        right,
         className
       ),
       style: {
-        left
+        left,
+        right
       }
     },
-    /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react39.default.createElement("span", { className: "font-medium text-xs" }, children), icon && /* @__PURE__ */ import_react39.default.createElement(
+    /* @__PURE__ */ import_react53.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react53.default.createElement("span", { className: "font-medium text-xs" }, children), icon && /* @__PURE__ */ import_react53.default.createElement(
       "span",
       {
         className: "hover:bg-gray-200 w-5 h-5 flex items-center justify-center p-1 rounded focus:bg-gray-300 active:bg-gray-300"
@@ -2250,10 +3762,12 @@ var TableDataCell = ({
   icon,
   sticky,
   shadow,
+  shadowRight,
   left,
+  right,
   ...props
 }) => {
-  return /* @__PURE__ */ import_react39.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement(
     "td",
     {
       ...props,
@@ -2261,15 +3775,18 @@ var TableDataCell = ({
         "px-6 py-4 text-sm font-medium group-has-[td]/dense:py-2 first:group-has-[td]/indent:pl-[60px]",
         sticky && `sticky bg-white`,
         sticky && shadow && "shadow-table",
+        sticky && shadowRight && "shadow-tableRight",
         left,
+        right,
         className
       ),
       style: {
-        left
+        left,
+        right
       }
     },
-    /* @__PURE__ */ import_react39.default.createElement("span", { className: "font-medium text-sm" }, children),
-    icon && /* @__PURE__ */ import_react39.default.createElement(
+    /* @__PURE__ */ import_react53.default.createElement("span", { className: "font-medium text-sm" }, children),
+    icon && /* @__PURE__ */ import_react53.default.createElement(
       "span",
       {
         className: "hover:bg-gray-200 w-5 h-5 flex items-center justify-center p-1 rounded focus:bg-gray-300 active:bg-gray-300"
@@ -2281,94 +3798,215 @@ var TableDataCell = ({
 var TableComponents_default = Table;
 
 // app/components/Tabs.tsx
-var import_react40 = __toESM(require("react"), 1);
+var import_react54 = __toESM(require("react"), 1);
 var TabsContainer = ({
   children,
-  className
+  className,
+  position = "horizontal"
 }) => {
-  return /* @__PURE__ */ import_react40.default.createElement("div", { className }, children);
+  return /* @__PURE__ */ import_react54.default.createElement("div", { className: cn(position === "vertical" ? "flex" : "block", className) }, children);
 };
 var TabList = ({
   onChange,
   ariaLabel,
   children,
   box = false,
-  className
+  pill = false,
+  className,
+  position = "horizontal"
 }) => {
-  const handleTabChange = (value) => {
-    onChange(value);
+  const [focusIndex, setFocusIndex] = import_react54.default.useState(0);
+  const tabRefs = import_react54.default.useRef([]);
+  const handleKeyDown = (e, index) => {
+    var _a, _b, _c, _d, _e, _f;
+    const tabCount = import_react54.default.Children.count(children);
+    switch (e.key) {
+      case "ArrowRight":
+        if (position === "horizontal") {
+          e.preventDefault();
+          const nextIndex = (index + 1) % tabCount;
+          setFocusIndex(nextIndex);
+          (_a = tabRefs.current[nextIndex]) == null ? void 0 : _a.focus();
+        }
+        break;
+      case "ArrowLeft":
+        if (position === "horizontal") {
+          e.preventDefault();
+          const prevIndex = (index - 1 + tabCount) % tabCount;
+          setFocusIndex(prevIndex);
+          (_b = tabRefs.current[prevIndex]) == null ? void 0 : _b.focus();
+        }
+        break;
+      case "ArrowDown":
+        if (position === "vertical") {
+          e.preventDefault();
+          const nextIndex = (index + 1) % tabCount;
+          setFocusIndex(nextIndex);
+          (_c = tabRefs.current[nextIndex]) == null ? void 0 : _c.focus();
+        }
+        break;
+      case "ArrowUp":
+        if (position === "vertical") {
+          e.preventDefault();
+          const prevIndex = (index - 1 + tabCount) % tabCount;
+          setFocusIndex(prevIndex);
+          (_d = tabRefs.current[prevIndex]) == null ? void 0 : _d.focus();
+        }
+        break;
+      case "Home":
+        e.preventDefault();
+        setFocusIndex(0);
+        (_e = tabRefs.current[0]) == null ? void 0 : _e.focus();
+        break;
+      case "End":
+        e.preventDefault();
+        const lastIndex = tabCount - 1;
+        setFocusIndex(lastIndex);
+        (_f = tabRefs.current[lastIndex]) == null ? void 0 : _f.focus();
+        break;
+    }
   };
-  return /* @__PURE__ */ import_react40.default.createElement(
+  return /* @__PURE__ */ import_react54.default.createElement(
     "div",
     {
       className: cn(
-        "flex items-center",
-        box ? "bg-gray-50 rounded-lg border border-gray-200" : "border-b border-gray-200",
+        position === "horizontal" ? "flex items-center" : "flex flex-col items-stretch",
+        box ? "bg-gray-50 rounded-lg border border-gray-200" : pill ? position === "horizontal" ? "bg-transparent rounded-lg" : "bg-gray-100 rounded-full p-1" : position === "horizontal" ? "border-b border-gray-200" : "border-r border-gray-200",
         className
       ),
       role: "tablist",
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      "aria-orientation": position
     },
-    import_react40.default.Children.map(children, (child) => {
-      if (import_react40.default.isValidElement(child)) {
-        return import_react40.default.cloneElement(child, {
-          onChange: handleTabChange,
-          box
+    import_react54.default.Children.map(children, (child, index) => {
+      if (import_react54.default.isValidElement(child)) {
+        const childProps = {
+          onChange,
+          box,
+          pill,
+          // Add this line to pass pill prop to Tab
+          position,
+          onKeyDown: (e) => handleKeyDown(e, index),
+          tabIndex: index === focusIndex ? 0 : -1
+        };
+        return import_react54.default.cloneElement(child, {
+          ...childProps,
+          ref: (el) => {
+            tabRefs.current[index] = el;
+            const originalRef = child.ref;
+            if (originalRef) {
+              if (typeof originalRef === "function") {
+                originalRef(el);
+              } else {
+                originalRef.current = el;
+              }
+            }
+          }
         });
       }
       return null;
     })
   );
 };
-var Tab = ({
-  label,
-  value,
-  onChange,
-  icon,
-  content,
-  box = false,
-  selectedTabValue,
-  className
-}) => {
-  const handleClick = () => {
-    onChange(value);
-  };
-  const isSelected = value === selectedTabValue;
-  return /* @__PURE__ */ import_react40.default.createElement(
-    "button",
-    {
-      role: "tab",
-      className: cn(
-        "flex items-center gap-2 px-4 py-3 text-text-sm font-medium cursor-pointer hover:bg-gray-100 hover:rounded-t transition-all ease-linear duration-200 delay-75",
-        isSelected && !box ? "text-primary-600 border-b-2 border-primary-600" : "border-b-2 border-transparent text-gray-700",
-        isSelected && box ? "bg-white hover:bg-white shadow-md" : "",
-        box ? "m-1 rounded-lg hover:rounded-lg" : "m-0",
-        className
-      ),
-      onClick: handleClick
-    },
-    icon,
-    " ",
+var Tab = import_react54.default.forwardRef(
+  ({
     label,
-    " ",
-    content
-  );
-};
+    value,
+    onChange,
+    icon,
+    content,
+    box = false,
+    pill = false,
+    selectedTabValue,
+    className,
+    onKeyDown,
+    tabIndex,
+    position = "horizontal"
+  }, ref) => {
+    const isSelected = value === selectedTabValue;
+    return /* @__PURE__ */ import_react54.default.createElement(
+      "button",
+      {
+        ref,
+        role: "tab",
+        "aria-selected": isSelected,
+        "aria-controls": `panel-${value}`,
+        id: `tab-${value}`,
+        tabIndex,
+        onKeyDown,
+        className: cn(
+          "flex items-center gap-2 px-4 py-3 text-text-sm font-medium cursor-pointer",
+          // Default variant (no box, no pill)
+          !box && !pill && [
+            isSelected && position === "horizontal" ? "text-primary-600 border-b-2 border-primary-600" : isSelected && position === "vertical" ? "text-primary-600 border-r-2 border-primary-600" : "border-transparent text-gray-700"
+          ],
+          // Box variant
+          box && [
+            position === "horizontal" ? "m-1 rounded-lg hover:rounded-lg" : "mx-1 my-0.5 rounded-lg hover:rounded-lg",
+            isSelected ? "bg-white hover:bg-white shadow-md" : ""
+          ],
+          // Pill variant - Horizontal
+          pill && position === "horizontal" && [
+            "py-1 px-3 text-sm first:rounded-l-2xl last:rounded-r-2xl border transition-all duration-200",
+            isSelected ? "bg-primary-600 border-primary-600 text-white shadow-sm hover:bg-primary-700" : "bg-white border-gray-300 text-gray-700 hover:bg-gray-100"
+          ],
+          // Pill variant - Vertical
+          pill && position === "vertical" && [
+            "py-2 px-4 rounded-full border transition-all duration-200 my-1",
+            isSelected ? "bg-primary-600 border-primary-600 text-white shadow-sm hover:bg-primary-700" : "bg-gray-100 border-gray-300 text-gray-700 hover:bg-gray-200 hover:border-gray-400"
+          ],
+          // Common hover styles for non-pill variants
+          !pill && [
+            position === "horizontal" ? "hover:bg-gray-100 hover:rounded-t transition-all ease-linear duration-200 delay-75" : "hover:bg-gray-100 hover:rounded-l transition-all ease-linear duration-200 delay-75"
+          ],
+          // Border for vertical non-box, non-pill
+          position === "vertical" && !box && !pill && !isSelected ? "border-r-2" : "",
+          className
+        ),
+        onClick: () => onChange(value)
+      },
+      icon && /* @__PURE__ */ import_react54.default.createElement("span", { "aria-hidden": "true" }, icon),
+      label,
+      content && /* @__PURE__ */ import_react54.default.createElement("span", { "aria-hidden": "true" }, content)
+    );
+  }
+);
 var TabPanel = ({
   value,
   currentValue,
   children,
   className
 }) => {
-  return value === currentValue ? /* @__PURE__ */ import_react40.default.createElement("div", { className }, children) : null;
+  return value === currentValue ? /* @__PURE__ */ import_react54.default.createElement(
+    "div",
+    {
+      role: "tabpanel",
+      id: `panel-${value}`,
+      "aria-labelledby": `tab-${value}`,
+      tabIndex: 0,
+      className
+    },
+    children
+  ) : null;
 };
 var Tabs_default = TabsContainer;
+Tab.displayName = "Tab";
 
 // app/components/Textarea.tsx
-var import_react41 = __toESM(require("react"), 1);
-var Textarea = (0, import_react41.forwardRef)(
-  ({ size, className, rows, cols, disabled, children, ...props }, ref) => {
-    return /* @__PURE__ */ import_react41.default.createElement(
+var import_react55 = __toESM(require("react"), 1);
+var Textarea = (0, import_react55.forwardRef)(
+  ({
+    size,
+    className,
+    rows,
+    cols,
+    disabled,
+    error,
+    children,
+    id,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ import_react55.default.createElement(
       "textarea",
       {
         ...props,
@@ -2377,8 +4015,9 @@ var Textarea = (0, import_react41.forwardRef)(
         rows,
         cols,
         className: cn(
-          "group flex items-center gap-2 border border-gray-200 rounded-lg bg-gray-50 shadow-xs hover:bg-gray-50 hover:border-gray-300 text-sm focus-within:border-gray-800 focus-within:bg-gray-25 focus-within:hover:bg-gray-50 focus-within:hover:border-gray-800 outline-none disabled:bg-gray-300 disabled:select-none disabled:pointer-events-none disabled:opacity-30 placeholder:text-gray-500 hover:placeholder:text-gray-500",
+          "group flex items-center gap-2 border border-gray-200 rounded-lg bg-gray-50 shadow-xs hover:bg-gray-50 hover:border-gray-300 text-sm focus-within:border-gray-800 focus-within:bg-gray-25 focus-within:hover:bg-gray-50 focus-within:hover:border-gray-800 outline-none disabled:bg-gray-300 disabled:select-none disabled:pointer-events-none disabled:opacity-30 w-full placeholder:text-gray-500 hover:placeholder:text-gray-500 shadow-[0px_1px_2px_0px_#1018280D]",
           size === "sm" ? "py-2.5 px-3.5" : "p-2.5",
+          error && "border-error-500 hover:border-error-600 focus-within:hover:border-error-500 focus-within:border-error-500",
           className,
           size
         )
@@ -2390,9 +4029,74 @@ var Textarea = (0, import_react41.forwardRef)(
 Textarea.displayName = "Textarea";
 var Textarea_default = Textarea;
 
+// app/components/TextInputWithLabel.tsx
+var import_react56 = require("@remixicon/react");
+var import_react57 = __toESM(require("react"), 1);
+var TextInputWithLabel = ({
+  intent = "primary",
+  placeholder = "Enter tags",
+  type = "text",
+  size,
+  tags,
+  setTags,
+  ...props
+}) => {
+  const handleAddTags = (inputValue) => {
+    const values = inputValue.split(",").map((v) => v.trim()).filter((v) => v && !tags.includes(v));
+    if (values.length === 0)
+      return;
+    setTags([...tags, ...values]);
+  };
+  const handleRemoveTag = (tag) => {
+    setTags(tags.filter((t) => t !== tag));
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const target = e.target;
+      handleAddTags(target.value);
+      target.value = "";
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasteData = e.clipboardData.getData("text");
+    handleAddTags(pasteData);
+  };
+  return /* @__PURE__ */ import_react57.default.createElement("div", null, /* @__PURE__ */ import_react57.default.createElement(
+    Input_default,
+    {
+      type,
+      size,
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      placeholder,
+      className: "w-full",
+      ...props
+    }
+  ), /* @__PURE__ */ import_react57.default.createElement("div", { className: "flex flex-wrap items-center gap-2 mt-2 transition-all duration-300" }, tags == null ? void 0 : tags.map((tag, idx) => /* @__PURE__ */ import_react57.default.createElement(
+    Chip_default,
+    {
+      size: "md",
+      intent,
+      key: `${tag}-${idx}`,
+      endIcon: /* @__PURE__ */ import_react57.default.createElement(
+        import_react56.RiCloseCircleLine,
+        {
+          size: 14,
+          className: "cursor-pointer hover:text-red-500",
+          onClick: () => handleRemoveTag(tag)
+        }
+      )
+    },
+    tag
+  ))));
+};
+var TextInputWithLabel_default = TextInputWithLabel;
+
 // app/components/Toggle.tsx
 var import_class_variance_authority8 = require("class-variance-authority");
-var import_react42 = __toESM(require("react"), 1);
+var import_react58 = __toESM(require("react"), 1);
 var toggleVariants = (0, import_class_variance_authority8.cva)("", {
   variants: {
     size: {
@@ -2410,37 +4114,42 @@ var toggleVariants = (0, import_class_variance_authority8.cva)("", {
     intent: "primary"
   }
 });
-var Toggle = (0, import_react42.forwardRef)(
-  ({ size, className, intent, disabled, children, ...props }, ref) => {
-    return /* @__PURE__ */ import_react42.default.createElement(
+var Toggle = (0, import_react58.forwardRef)(
+  ({ size, className, intent, disabled, children, id, ...props }, ref) => {
+    return /* @__PURE__ */ import_react58.default.createElement(
       "label",
       {
         className: cn(
           "inline-flex items-center cursor-pointer",
           disabled && "opacity-30 pointer-events-none"
-        )
+        ),
+        htmlFor: id
       },
-      /* @__PURE__ */ import_react42.default.createElement(
+      /* @__PURE__ */ import_react58.default.createElement(
         "input",
         {
           type: "checkbox",
           disabled,
           ref,
+          id,
+          role: "switch",
+          "aria-checked": props == null ? void 0 : props.checked,
           ...props,
-          className: "sr-only flex justify-center peer"
+          className: "sr-only peer"
         }
       ),
-      /* @__PURE__ */ import_react42.default.createElement(
+      /* @__PURE__ */ import_react58.default.createElement(
         "span",
         {
           className: cn(
-            "relative w-11 h-7 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full  after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all",
+            "relative w-11 h-7 bg-gray-300 rounded-full peer peer-focus:ring-2 peer-focus:ring-primary-600 peer-focus:ring-offset-2 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all",
             toggleVariants({
               intent,
-              className,
               size
-            })
-          )
+            }),
+            className
+          ),
+          "aria-hidden": "true"
         },
         children
       )
@@ -2449,6 +4158,288 @@ var Toggle = (0, import_react42.forwardRef)(
 );
 Toggle.displayName = "Toggle";
 var Toggle_default = Toggle;
+
+// app/components/Tooltip.tsx
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_react59 = __toESM(require("react"), 1);
+var tooltipVariants = (0, import_class_variance_authority9.cva)(
+  "bg-white shadow-lg rounded-lg absolute hidden group-hover:block p-3 z-10 max-w-[328px] w-max whitespace-normal opacity-0 group-hover:opacity-100 transform transition-all duration-1000 ease-in-out group-hover:delay-[2000ms]",
+  {
+    variants: {
+      position: {
+        top: "bottom-[calc(100%+8px)] group-hover:translate-y-0 delay-1000 translate-y-[-10px]",
+        right: "top-1/2 -translate-y-1/2 left-[calc(100%+8px)] group-hover:translate-x-0 translate-x-[-10px]",
+        bottom: "top-[calc(100%+8px)] group-hover:translate-y-0 translate-y-[10px]",
+        left: "top-1/2 -translate-y-1/2 right-[calc(100%+8px)] group-hover:translate-x-0 translate-x-[10px]"
+      }
+    }
+  }
+);
+var arrowVariants = (0, import_class_variance_authority9.cva)(
+  "absolute w-0 h-0 border-transparent border-solid",
+  {
+    variants: {
+      position: {
+        top: "top-full left-5 -translate-x-1/2 border-t-white border-t-[6px] border-x-[6px] border-x-transparent border-b-0",
+        right: "right-full top-1/2 -translate-y-1/2 border-r-white border-r-[6px] border-y-[6px] border-y-transparent border-l-0",
+        bottom: "bottom-full left-4 -translate-x-1/2 border-b-white border-b-[6px] border-x-[6px] border-x-transparent border-t-0",
+        left: "left-full top-1/2 -translate-y-1/2 border-l-white border-l-[6px] border-y-[6px] border-y-transparent border-r-0"
+      }
+    }
+  }
+);
+var Tooltip = ({
+  position,
+  content,
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ import_react59.default.createElement("div", { ...props, className: "relative cursor-pointer text-sm group w-fit" }, /* @__PURE__ */ import_react59.default.createElement("div", null, children), /* @__PURE__ */ import_react59.default.createElement("div", { className: cn(tooltipVariants({ position }), className) }, content, /* @__PURE__ */ import_react59.default.createElement("div", { className: cn(arrowVariants({ position })) })));
+};
+var Tooltip_default = Tooltip;
+
+// app/components/TreeView.tsx
+var import_react60 = __toESM(require("react"), 1);
+var import_react61 = require("@remixicon/react");
+var TreeView = ({
+  children,
+  "aria-label": ariaLabel,
+  flat = false,
+  className,
+  defaultExpandedIds = [],
+  expandedIds,
+  onExpandedChange,
+  allowMultiple = true,
+  expandTopLevelByDefault = false
+}) => {
+  const topLevelIds = import_react60.default.Children.toArray(children).map(
+    (child) => import_react60.default.isValidElement(child) ? child.props.id : null
+  ).filter(Boolean);
+  const [internalExpanded, setInternalExpanded] = (0, import_react60.useState)(
+    () => new Set(
+      defaultExpandedIds.length ? defaultExpandedIds : expandTopLevelByDefault ? topLevelIds : []
+    )
+  );
+  const expandedNodes = expandedIds ? new Set(expandedIds) : internalExpanded;
+  const [selectedId, setSelectedId] = (0, import_react60.useState)(null);
+  const toggleNode = (id) => {
+    const updateSet = (set) => {
+      const next = new Set(set);
+      if (allowMultiple) {
+        next.has(id) ? next.delete(id) : next.add(id);
+      } else {
+        next.clear();
+        next.add(id);
+      }
+      return next;
+    };
+    if (expandedIds && onExpandedChange) {
+      const newExpanded = updateSet(expandedNodes);
+      onExpandedChange(Array.from(newExpanded));
+    } else {
+      setInternalExpanded((prev) => updateSet(prev));
+    }
+  };
+  const handleSelect = (id) => setSelectedId(id);
+  const enhanceChildren = (nodes, level = 0) => import_react60.default.Children.map(nodes, (child) => {
+    if (import_react60.default.isValidElement(child)) {
+      return import_react60.default.cloneElement(child, {
+        level,
+        expanded: expandedNodes.has(child.props.id),
+        onToggle: toggleNode,
+        onSelect: handleSelect,
+        selected: selectedId === child.props.id,
+        flat,
+        children: enhanceChildren(child.props.children, level + 1)
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ import_react60.default.createElement(
+    "ul",
+    {
+      role: "tree",
+      "aria-label": ariaLabel,
+      className: cn("list-none p-0 m-0 text-sm", className)
+    },
+    enhanceChildren(children)
+  );
+};
+var DefaultExpandIcon = ({ expanded }) => /* @__PURE__ */ import_react60.default.createElement("span", { className: "transition-transform duration-200" }, expanded ? /* @__PURE__ */ import_react60.default.createElement(import_react61.RiArrowDownSFill, { size: 18 }) : /* @__PURE__ */ import_react60.default.createElement(import_react61.RiArrowRightSFill, { size: 18 }));
+var TreeViewItem = ({
+  id,
+  children,
+  current = false,
+  className,
+  onSelect,
+  expanded = false,
+  onToggle,
+  selected = false,
+  level = 0,
+  flat = false
+}) => {
+  const leading = [];
+  const trailing = [];
+  const content = [];
+  let subTree = null;
+  import_react60.default.Children.forEach(children, (child) => {
+    if (import_react60.default.isValidElement(child)) {
+      if (child.type === TreeViewLeadingVisual)
+        leading.push(child);
+      else if (child.type === TreeViewTrailingVisual)
+        trailing.push(child);
+      else if (child.type === TreeViewSubTree)
+        subTree = child;
+      else
+        content.push(child);
+    } else
+      content.push(child);
+  });
+  const hasSubTree = !!subTree;
+  const handleClick = (e) => {
+    e.stopPropagation();
+    if (hasSubTree && !flat && onToggle)
+      onToggle(id);
+    if (onSelect)
+      onSelect(id);
+  };
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        handleClick(e);
+        break;
+      case "ArrowRight":
+        if (hasSubTree && !expanded && !flat && onToggle) {
+          e.preventDefault();
+          onToggle(id);
+        }
+        break;
+      case "ArrowLeft":
+        if (hasSubTree && expanded && !flat && onToggle) {
+          e.preventDefault();
+          onToggle(id);
+        }
+        break;
+    }
+  };
+  const processedSubTree = subTree && import_react60.default.isValidElement(subTree) ? import_react60.default.cloneElement(subTree, { expanded, flat }) : null;
+  return /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, /* @__PURE__ */ import_react60.default.createElement(
+    "li",
+    {
+      role: "treeitem",
+      "aria-expanded": hasSubTree && !flat ? expanded : void 0,
+      "aria-selected": selected,
+      "aria-current": current ? "true" : void 0,
+      className: cn(
+        "flex items-center gap-2 px-2 py-1 cursor-pointer select-none rounded transition-colors duration-150",
+        selected && "bg-blue-50 text-blue-600 font-medium",
+        "hover:bg-gray-100",
+        className
+      ),
+      style: { paddingLeft: `${level * 16 + 8}px` },
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      tabIndex: 0
+    },
+    /* @__PURE__ */ import_react60.default.createElement("span", { className: "flex items-center gap-1" }, !leading.length && hasSubTree && !flat && /* @__PURE__ */ import_react60.default.createElement(DefaultExpandIcon, { expanded }), leading),
+    /* @__PURE__ */ import_react60.default.createElement("span", { className: "flex-1" }, content),
+    trailing
+  ), processedSubTree);
+};
+var TreeViewSubTree = ({
+  children,
+  state,
+  count,
+  className,
+  expanded = false,
+  flat = false
+}) => {
+  if (flat)
+    return null;
+  if (state === "loading") {
+    return /* @__PURE__ */ import_react60.default.createElement("ul", { role: "group", className: cn("list-none m-0", className) }, /* @__PURE__ */ import_react60.default.createElement("li", { className: "text-gray-500 italic p-1 pl-6" }, "Loading", count ? ` ${count} items...` : "..."));
+  }
+  return /* @__PURE__ */ import_react60.default.createElement(
+    "ul",
+    {
+      role: "group",
+      className: cn(
+        "list-none m-0 pl-0 overflow-hidden transition-all duration-300 ease-in-out",
+        expanded ? "max-h-96 opacity-100" : "max-h-0 opacity-0",
+        className
+      )
+    },
+    children
+  );
+};
+var TreeViewLeadingVisual = ({ children, className }) => /* @__PURE__ */ import_react60.default.createElement("span", { className: cn("flex items-center flex-shrink-0", className) }, children);
+var TreeViewTrailingVisual = ({ children, label, className }) => /* @__PURE__ */ import_react60.default.createElement(
+  "span",
+  {
+    className: cn("flex items-center ml-auto flex-shrink-0", className),
+    "aria-label": label
+  },
+  children
+);
+TreeView.Item = TreeViewItem;
+TreeView.SubTree = TreeViewSubTree;
+TreeView.LeadingVisual = TreeViewLeadingVisual;
+TreeView.TrailingVisual = TreeViewTrailingVisual;
+var TreeView_default = TreeView;
+
+// app/components/Typography.tsx
+var import_class_variance_authority10 = require("class-variance-authority");
+var import_react62 = __toESM(require("react"), 1);
+var typographyVariant = (0, import_class_variance_authority10.cva)("text-dark", {
+  variants: {
+    variant: {
+      h1: "text-8xl font-bold",
+      h2: "text-7xl font-bold",
+      h3: "text-5xl font-bold",
+      h4: "text-[32px] font-bold",
+      h5: "text-2xl font-bold",
+      h6: "text-xl font-semibold",
+      b1: "text-xl font-normal",
+      b2: "text-lg font-normal",
+      b3: "text-base font-normal",
+      b4: "text-sm font-normal",
+      b5: "text-xs font-normal"
+    },
+    intent: {
+      primary: "text-primary-600",
+      success: "text-success-600",
+      error: "text-error-600",
+      warning: "text-warning-600",
+      default: "text-black"
+    }
+  },
+  defaultVariants: {
+    variant: "h1",
+    intent: "default"
+  }
+});
+var Typography = ({
+  as,
+  variant = "h1",
+  intent = "default",
+  children,
+  className,
+  ...props
+}) => {
+  const Component = as || ((variant == null ? void 0 : variant.startsWith("b")) ? "p" : variant);
+  return /* @__PURE__ */ import_react62.default.createElement(
+    Component,
+    {
+      className: cn(typographyVariant({ variant, intent, className })),
+      ...props
+    },
+    children
+  );
+};
+var Typography_default = Typography;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -2459,30 +4450,52 @@ var Toggle_default = Toggle;
   AvatarGroup,
   BreadCrumb,
   Button,
+  Callout,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
   Checkbox,
   Chip,
   CircularProgress,
   Divider,
+  Drawer,
   Dropdown,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
   DropdownWithIcon,
+  FileSelector,
   FileUpload,
+  FileUploadPreview,
   GlobalNavigation,
   HelperText,
   Input,
   Label,
   ListItem,
+  ListPagination,
   Loading,
-  MenuDropdown,
-  MenuItem,
-  MenuSubItem,
   Modal,
   Notice,
+  OTPInput,
   Pagination,
   ProgressBar,
   Radio,
+  RazorPayFileUpload,
   Sidebar,
   Skeleton,
   Slider,
+  Spinner,
+  SplitButton,
   Stepper,
   Tab,
   TabList,
@@ -2494,8 +4507,12 @@ var Toggle_default = Toggle;
   TableHeadCell,
   TableRow,
   TabsContainer,
+  TextInputWithLabel,
   Textarea,
   Toggle,
-  Tooltip
+  Tooltip,
+  TreeView,
+  Typography,
+  defaultGetFileIcon
 });
 //# sourceMappingURL=index.cjs.map