atomos_next_genesis 0.0.9 → 1.0.2

package/dist/index.cjs

@@ -64,10 +64,10 @@ __export(app_exports, {
   DropdownWithIcon: () => DropdownWithIcon_default,
   FileSelector: () => FileSelector_default,
   FileUpload: () => FileUpload_default,
+  FileUploadControl: () => FileUploadControl,
   FileUploadPreview: () => FileUploadPreview_default,
   GlobalNavigation: () => GlobalNavigation_default,
   HelperText: () => HelperText_default,
-  ImageUploadControlled: () => ImageUploadControlled,
   Input: () => Input_default,
   Label: () => Label_default,
   ListPagination: () => ListPagination_default,
@@ -295,7 +295,7 @@ var Avatar = (0, import_react3.forwardRef)((props, ref) => {
     {
       ref,
       className: cn(
-        "relative -z-10 ",
+        "relative",
         rounded && "rounded-full",
         border && "border border-gray-200",
         disabled && "opacity-50 pointer-events-none select-none",
@@ -311,7 +311,7 @@ var Avatar = (0, import_react3.forwardRef)((props, ref) => {
       "div",
       {
         className: cn(
-          "relative -z-10 flex items-center justify-center",
+          "relative flex items-center justify-center",
           sizes[size],
           className
         ),
@@ -1133,7 +1133,8 @@ var Dropdown = (0, import_react17.forwardRef)(
     onApply,
     disabled = false,
     onReset,
-    footerAction
+    footerAction,
+    height = "200px"
   }, ref) => {
     var _a, _b;
     const [searchQuery, setSearchQuery] = (0, import_react17.useState)("");
@@ -1244,7 +1245,7 @@ var Dropdown = (0, import_react17.forwardRef)(
             }
           },
           className: cn(
-            "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",
+            "w-full hover:bg-gray-50 py-2 px-[14px] rounded-lg flex justify-between items-center text-gray-900 bg-gray-25 text-sm cursor-pointer",
             dropdownMenu ? "border border-primary-600" : "border border-gray-200",
             disabled && "bg-gray-300 hover:bg-gray-300 cursor-not-allowed"
           )
@@ -1259,7 +1260,7 @@ var Dropdown = (0, import_react17.forwardRef)(
           "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",
+            "max-h-0 opacity-0 overflow-hidden shadow-sm mt-1 rounded absolute text-sm bg-white z-[1000] w-full transition-all duration-75 delay-100 ease-in",
             position === "top" ? "top-10" : "bottom-10",
             dropdownMenu ? "border border-primary-600" : "border border-gray-200",
             dropdownMenu && "max-h-[360px] h-fit opacity-[1] transition-all ease-in duration-150"
@@ -1284,7 +1285,7 @@ var Dropdown = (0, import_react17.forwardRef)(
             type: "button",
             "aria-label": "Select all",
             onClick: handleSelectAll,
-            className: "text-text-sm  hover:text-primary-700 text-primary-600 cursor-pointer"
+            className: "text-sm  hover:text-primary-700 text-primary-600 cursor-pointer"
           },
           "Select all"
         ), /* @__PURE__ */ import_react17.default.createElement(
@@ -1292,77 +1293,84 @@ var Dropdown = (0, import_react17.forwardRef)(
           {
             "aria-label": "Reset",
             type: "button",
-            className: "text-text-sm text-warning-500 hover:text-warning-600",
+            className: "text-sm text-warning-500 hover:text-warning-600",
             onClick: handleReset
           },
           "Reset"
         )),
-        /* @__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_react17.default.createElement(import_react17.default.Fragment, { key: i }, multiple ? /* @__PURE__ */ import_react17.default.createElement(
-            Label_default,
-            {
-              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_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: `${id}-checkbox-${option.value}`,
-                checked: (selected == null ? void 0 : selected.some(
-                  (item) => item.value === option.value
-                )) ?? false,
-                onChange: () => handleCheckboxChange(option),
-                disabled: option == null ? void 0 : option.disabledOption
-              }
-            ), /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react17.default.createElement(
-              "div",
+        /* @__PURE__ */ import_react17.default.createElement(
+          "section",
+          {
+            style: { maxHeight: height },
+            className: "z-[1000] 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_react17.default.createElement(import_react17.default.Fragment, { key: i }, multiple ? /* @__PURE__ */ import_react17.default.createElement(
+              Label_default,
               {
-                style: {
-                  color: (option == null ? void 0 : option.disabledOption) ? "#D1D5DB" : option.labelTextColor
-                },
                 className: cn(
-                  "break-words",
-                  (option == null ? void 0 : option.disabledOption) && "text-gray-300"
-                )
+                  "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
               },
-              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",
+              /* @__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,
                 {
-                  "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
+                  id: `${id}-checkbox-${option.value}`,
+                  checked: (selected == null ? void 0 : selected.some(
+                    (item) => item.value === option.value
+                  )) ?? false,
+                  onChange: () => handleCheckboxChange(option),
+                  disabled: option == null ? void 0 : option.disabledOption
                 }
-              ),
-              onClick: () => !(option == null ? void 0 : option.disabledOption) && toggleOption(option)
-            },
-            /* @__PURE__ */ import_react17.default.createElement(
-              "div",
-              {
-                style: {
-                  color: (option == null ? void 0 : option.disabledOption) ? "#D1D5DB" : option.labelTextColor
+              ), /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react17.default.createElement(
+                "div",
+                {
+                  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-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(
-                  "break-words",
-                  (option == null ? void 0 : option.disabledOption) && "text-gray-300"
-                )
+                  "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,
+                    "opacity-50 cursor-not-allowed hover:bg-white text-gray-500": option == null ? void 0 : option.disabledOption
+                  }
+                ),
+                onClick: () => !(option == null ? void 0 : option.disabledOption) && toggleOption(option)
               },
-              renderItem(option)
-            ),
-            /* @__PURE__ */ import_react17.default.createElement("span", { className: "text-gray-500" }, info)
-          ));
-        }) : children),
+              /* @__PURE__ */ import_react17.default.createElement(
+                "div",
+                {
+                  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
+        ),
         footerAction && /* @__PURE__ */ import_react17.default.createElement("div", { className: "py-2 mt-1 px-2 border-t" }, footerAction),
         dropdownFooter && /* @__PURE__ */ import_react17.default.createElement(
           DropdownFooter,
@@ -1382,7 +1390,7 @@ var DropdownFooter = ({
   onApply,
   setDropdownMenu
 }) => {
-  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(
+  return /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex justify-end border-t border-gray-200 px-[14px] py-[8px] text-sm" }, /* @__PURE__ */ import_react17.default.createElement(
     "button",
     {
       type: "button",
@@ -1405,8 +1413,9 @@ var Dropdown_default = Dropdown;
 // 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 }) {
+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);
@@ -1425,106 +1434,82 @@ function DropdownMenu({ children }) {
   (0, import_react20.useEffect)(() => {
     if (!isOpen)
       return;
-    const handleClickOutside = (e) => {
+    const handler = (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);
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
   }, [isOpen]);
   (0, import_react20.useEffect)(() => {
     if (!isOpen)
       return;
-    const handleKey = (event) => {
+    const handler = (e) => {
       var _a;
-      switch (event.key) {
+      switch (e.key) {
         case "Escape":
-          event.preventDefault();
+          e.preventDefault();
           closeMenu();
           (_a = triggerRef.current) == null ? void 0 : _a.focus();
           break;
         case "ArrowDown":
-          event.preventDefault();
+          e.preventDefault();
           setFocusedIndex(
-            (prev) => prev < itemsCountRef.current - 1 ? prev + 1 : 0
+            (p) => p < itemsCountRef.current - 1 ? p + 1 : 0
           );
           break;
         case "ArrowUp":
-          event.preventDefault();
+          e.preventDefault();
           setFocusedIndex(
-            (prev) => prev > 0 ? prev - 1 : itemsCountRef.current - 1
+            (p) => p > 0 ? p - 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);
+    document.addEventListener("keydown", handler);
     setFocusedIndex(0);
-    return () => document.removeEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handler);
   }, [isOpen]);
   (0, import_react20.useEffect)(() => {
+    var _a;
     if (!isOpen)
       return;
-    const el = menuItemsRef.current[focusedIndex];
-    if (el)
-      el.focus();
+    (_a = menuItemsRef.current[focusedIndex]) == null ? void 0 : _a.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));
+  const childrenWithProps = import_react20.default.Children.map(children, (child) => {
+    if (!import_react20.default.isValidElement(child))
+      return child;
+    return import_react20.default.cloneElement(child, {
+      dropdownProps: {
+        isOpen,
+        setIsOpen,
+        triggerRef,
+        contentRef,
+        registerItem,
+        menuItemsRef
+      }
+    });
+  });
+  return /* @__PURE__ */ import_react20.default.createElement("div", { className: "relative inline-block" }, childrenWithProps);
 }
-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;
-    }
-  };
+function DropdownMenuTrigger({ children, dropdownProps }) {
+  const { isOpen, setIsOpen, triggerRef } = dropdownProps ?? {};
   return /* @__PURE__ */ import_react20.default.createElement(
     "div",
     {
-      ref: ctx == null ? void 0 : ctx.triggerRef,
+      ref: triggerRef,
       tabIndex: 0,
       role: "button",
       "aria-haspopup": "menu",
-      "aria-expanded": actualIsOpen,
-      onClick: () => actualSetIsOpen == null ? void 0 : actualSetIsOpen(!actualIsOpen),
-      onKeyDown: handleKey,
+      "aria-expanded": isOpen,
+      onClick: () => setIsOpen == null ? void 0 : setIsOpen(!isOpen),
       className: "cursor-pointer outline-none focus:ring-2 focus:ring-primary-500 rounded"
     },
     children
@@ -1532,30 +1517,29 @@ function DropdownMenuTrigger({
 }
 function DropdownMenuContent({
   children,
-  isOpen,
   align = "right",
-  className = ""
+  className,
+  dropdownProps
 }) {
-  const ctx = import_react20.default.useContext(DropdownContext);
-  const actualIsOpen = (ctx == null ? void 0 : ctx.isOpen) ?? isOpen;
-  const [visible, setVisible] = (0, import_react20.useState)(actualIsOpen);
+  const { isOpen, contentRef } = dropdownProps ?? {};
+  const [visible, setVisible] = (0, import_react20.useState)(isOpen);
   (0, import_react20.useEffect)(() => {
-    if (actualIsOpen)
+    if (isOpen)
       setVisible(true);
     else
       setTimeout(() => setVisible(false), 150);
-  }, [actualIsOpen]);
+  }, [isOpen]);
   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,
+      ref: 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",
+        "absolute mt-2 w-56 rounded-md bg-white shadow-lg ring-1 ring-black/5 z-50 transition-all",
+        isOpen ? "opacity-100" : "opacity-0 -translate-y-2",
         pos,
         className
       )
@@ -1563,45 +1547,46 @@ function DropdownMenuContent({
     children
   );
 }
+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: "my-1 border-t border-gray-100" });
+}
 function DropdownMenuItemWrapper({
   children,
   onClick,
   onKeyDown,
   disabled,
-  isSubTrigger,
   className,
+  dropdownProps,
   "aria-expanded": ariaExpanded
 }) {
-  const ctx = import_react20.default.useContext(DropdownContext);
-  const [index] = (0, import_react20.useState)(() => (ctx == null ? void 0 : ctx.registerItem()) ?? -1);
+  const [index] = (0, import_react20.useState)(() => {
+    var _a;
+    return ((_a = dropdownProps == null ? void 0 : dropdownProps.registerItem) == null ? void 0 : _a.call(dropdownProps)) ?? -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();
+    if (index >= 0 && (dropdownProps == null ? void 0 : dropdownProps.menuItemsRef)) {
+      dropdownProps.menuItemsRef.current[index] = ref.current;
     }
-  };
+  }, [index, dropdownProps]);
   return /* @__PURE__ */ import_react20.default.createElement(
     "div",
     {
       ref,
       role: "menuitem",
       tabIndex: disabled ? -1 : 0,
-      "aria-disabled": disabled,
       "aria-expanded": ariaExpanded,
+      "aria-disabled": disabled,
       onClick: () => !disabled && (onClick == null ? void 0 : onClick()),
-      onKeyDown: handleKey,
+      onKeyDown,
       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",
+        "px-4 py-2 text-sm flex justify-between cursor-pointer rounded",
+        disabled ? "text-gray-400" : "hover:bg-gray-100",
         className
       )
     },
@@ -1610,78 +1595,68 @@ function DropdownMenuItemWrapper({
 }
 function DropdownMenuItem({
   children,
-  className = "",
   onClick,
   disabled,
-  shortcut
+  dropdownProps
 }) {
-  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);
-        }
+        onClick == null ? void 0 : onClick();
+        dropdownProps == null ? void 0 : dropdownProps.setIsOpen(false);
       },
-      className
+      dropdownProps
     },
-    /* @__PURE__ */ import_react20.default.createElement("span", null, children),
-    shortcut && /* @__PURE__ */ import_react20.default.createElement("kbd", { className: "text-xs text-gray-400" }, shortcut)
+    children
   );
 }
-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));
+  const childrenWithProps = import_react20.default.Children.map(children, (child) => {
+    if (!import_react20.default.isValidElement(child))
+      return child;
+    return import_react20.default.cloneElement(child, {
+      submenuProps: { isSubOpen, setIsSubOpen }
+    });
+  });
+  return /* @__PURE__ */ import_react20.default.createElement("div", { className: "relative" }, childrenWithProps);
 }
-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);
-    }
-  };
+function DropdownMenuSubTrigger({
+  children,
+  submenuProps,
+  dropdownProps
+}) {
   return /* @__PURE__ */ import_react20.default.createElement(
     DropdownMenuItemWrapper,
     {
-      isSubTrigger: true,
-      "aria-expanded": sub.isSubOpen,
-      onClick: () => sub.setIsSubOpen(!sub.isSubOpen),
-      onKeyDown: handleKey
+      dropdownProps,
+      "aria-expanded": submenuProps == null ? void 0 : submenuProps.isSubOpen,
+      onClick: () => submenuProps == null ? void 0 : submenuProps.setIsSubOpen(!(submenuProps == null ? void 0 : submenuProps.isSubOpen))
     },
-    /* @__PURE__ */ import_react20.default.createElement("span", { className: "flex-1" }, children),
+    /* @__PURE__ */ import_react20.default.createElement("span", null, children),
     /* @__PURE__ */ import_react20.default.createElement(
       import_react19.RiArrowDownSLine,
       {
         className: cn(
           "w-4 h-4 transition-transform",
-          sub.isSubOpen && "rotate-180"
+          (submenuProps == null ? void 0 : submenuProps.isSubOpen) && "rotate-180"
         )
       }
     )
   );
 }
-function DropdownMenuSubContent({ children }) {
-  const sub = import_react20.default.useContext(SubmenuContext);
+function DropdownMenuSubContent({
+  children,
+  submenuProps
+}) {
   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"
+        "overflow-hidden transition-all",
+        (submenuProps == null ? void 0 : submenuProps.isSubOpen) ? "max-h-[300px] opacity-100" : "max-h-0 opacity-0"
       )
     },
     children
@@ -1713,7 +1688,8 @@ var DropdownWithIcon = (0, import_react21.forwardRef)(
     onApply,
     disabled = false,
     onReset,
-    footerAction
+    footerAction,
+    height = "200px"
   }, ref) => {
     const [searchQuery, setSearchQuery] = (0, import_react21.useState)("");
     const localDropdownRef = (0, import_react21.useRef)(null);
@@ -1833,7 +1809,7 @@ var DropdownWithIcon = (0, import_react21.forwardRef)(
           "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",
+            "max-h-0 opacity-0 overflow-hidden shadow-sm mt-1 rounded absolute text-sm 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-[360px] h-fit opacity-[1] transition-all ease-in duration-150"
@@ -1863,7 +1839,7 @@ var DropdownWithIcon = (0, import_react21.forwardRef)(
             type: "button",
             "aria-label": "Select all",
             onClick: handleSelectAll,
-            className: "text-text-sm  hover:text-primary-700 text-primary-600 cursor-pointer"
+            className: "text-sm  hover:text-primary-700 text-primary-600 cursor-pointer"
           },
           "Select all"
         ), /* @__PURE__ */ import_react21.default.createElement(
@@ -1871,12 +1847,12 @@ var DropdownWithIcon = (0, import_react21.forwardRef)(
           {
             "aria-label": "Reset",
             type: "button",
-            className: "text-text-sm text-warning-500 hover:text-warning-600",
+            className: "text-sm text-warning-500 hover:text-warning-600",
             onClick: handleReset
           },
           "Reset"
         )),
-        /* @__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) => {
+        /* @__PURE__ */ import_react21.default.createElement("section", { style: { maxHeight: height }, className: "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_react21.default.createElement(import_react21.default.Fragment, { key: i }, multiple ? /* @__PURE__ */ import_react21.default.createElement(
             Label_default,
@@ -1911,7 +1887,7 @@ var DropdownWithIcon = (0, import_react21.forwardRef)(
               },
               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("span", { className: "pt-[2px] text-sm text-gray-500" }, option == null ? void 0 : option.addInfo)
           ) : /* @__PURE__ */ import_react21.default.createElement(
             Label_default,
             {
@@ -1961,7 +1937,7 @@ var DropdownFooter2 = ({
   onApply,
   setDropdownMenu
 }) => {
-  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(
+  return /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex justify-end border-t border-gray-200 px-[14px] py-[8px] text-sm" }, /* @__PURE__ */ import_react21.default.createElement(
     "button",
     {
       type: "button",
@@ -2446,7 +2422,7 @@ var noticeVariants = (0, import_class_variance_authority6.cva)("p-4 w-fit rounde
     position: {
       top: "top-4 transition-all duration-700 m-auto left-0 right-0",
       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"
+      center: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
     }
   }
 });
@@ -2774,7 +2750,7 @@ var Radio = (0, import_react41.forwardRef)(
 Radio.displayName = "Radio";
 var Radio_default = Radio;
 
-// app/components/RazorPayFileUpload.tsx
+// app/components/FileUploadControl.tsx
 var import_react43 = __toESM(require("react"), 1);
 var import_react44 = require("@remixicon/react");
 
@@ -2827,7 +2803,7 @@ var Spinner = ({ size = "md", color = "primary" }) => {
 };
 var Spinner_default = Spinner;
 
-// app/components/RazorPayFileUpload.tsx
+// app/components/FileUploadControl.tsx
 var fileSvg = () => {
   return /* @__PURE__ */ import_react43.default.createElement(
     "svg",
@@ -2932,7 +2908,7 @@ var defaultGetFileIcon = (fileName, fileType) => {
   }
   return /* @__PURE__ */ import_react43.default.createElement(import_react44.RiFileLine, { className: "w-5 h-5 text-white" });
 };
-function ImageUploadControlled({
+function FileUploadControl({
   items,
   onAddFiles,
   onUpdateItem,
@@ -4499,10 +4475,10 @@ var Typography_default = Typography;
   DropdownWithIcon,
   FileSelector,
   FileUpload,
+  FileUploadControl,
   FileUploadPreview,
   GlobalNavigation,
   HelperText,
-  ImageUploadControlled,
   Input,
   Label,
   ListPagination,