atomos_next_genesis 1.0.1 → 1.0.2

package/dist/index.js

@@ -1038,7 +1038,8 @@ var Dropdown = forwardRef5(
     onApply,
     disabled = false,
     onReset,
-    footerAction
+    footerAction,
+    height = "200px"
   }, ref) => {
     var _a, _b;
     const [searchQuery, setSearchQuery] = useState2("");
@@ -1149,7 +1150,7 @@ var Dropdown = forwardRef5(
             }
           },
           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"
           )
@@ -1164,7 +1165,7 @@ var Dropdown = forwardRef5(
           "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"
@@ -1189,7 +1190,7 @@ var Dropdown = forwardRef5(
             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__ */ React15.createElement(
@@ -1197,77 +1198,84 @@ var Dropdown = forwardRef5(
           {
             "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__ */ React15.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__ */ React15.createElement(React15.Fragment, { key: i }, multiple ? /* @__PURE__ */ React15.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__ */ React15.createElement("section", { className: "flex items-center justify-between gap-2 w-full" }, /* @__PURE__ */ React15.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React15.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__ */ React15.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React15.createElement(
-              "div",
+        /* @__PURE__ */ React15.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__ */ React15.createElement(React15.Fragment, { key: i }, multiple ? /* @__PURE__ */ React15.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__ */ React15.createElement("span", { className: "text-gray-500" }, option == null ? void 0 : option.info)),
-            /* @__PURE__ */ React15.createElement("span", { className: "pt-[2px] text-text-sm text-gray-500" }, option == null ? void 0 : option.addInfo)
-          ) : /* @__PURE__ */ React15.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__ */ React15.createElement("section", { className: "flex items-center justify-between gap-2 w-full" }, /* @__PURE__ */ React15.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React15.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__ */ React15.createElement(
-              "div",
-              {
-                style: {
-                  color: (option == null ? void 0 : option.disabledOption) ? "#D1D5DB" : option.labelTextColor
+              ), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React15.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__ */ React15.createElement("span", { className: "text-gray-500" }, option == null ? void 0 : option.info)),
+              /* @__PURE__ */ React15.createElement("span", { className: "pt-[2px] text-sm text-gray-500" }, option == null ? void 0 : option.addInfo)
+            ) : /* @__PURE__ */ React15.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__ */ React15.createElement("span", { className: "text-gray-500" }, info)
-          ));
-        }) : children),
+              /* @__PURE__ */ React15.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__ */ React15.createElement("span", { className: "text-gray-500" }, info)
+            ));
+          }) : children
+        ),
         footerAction && /* @__PURE__ */ React15.createElement("div", { className: "py-2 mt-1 px-2 border-t" }, footerAction),
         dropdownFooter && /* @__PURE__ */ React15.createElement(
           DropdownFooter,
@@ -1287,7 +1295,7 @@ var DropdownFooter = ({
   onApply,
   setDropdownMenu
 }) => {
-  return /* @__PURE__ */ React15.createElement("div", { className: "flex justify-end border-t border-gray-200 px-[14px] py-[8px] text-text-sm" }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React15.createElement("div", { className: "flex justify-end border-t border-gray-200 px-[14px] py-[8px] text-sm" }, /* @__PURE__ */ React15.createElement(
     "button",
     {
       type: "button",
@@ -1310,8 +1318,9 @@ var Dropdown_default = Dropdown;
 // app/components/DropdownMenu.tsx
 import { RiArrowDownSLine as RiArrowDownSLine3 } from "@remixicon/react";
 import React16, { useState as useState3, useRef as useRef2, useEffect as useEffect4, useCallback as useCallback3 } from "react";
-var DropdownContext = React16.createContext(null);
-function DropdownMenu({ children }) {
+function DropdownMenu({
+  children
+}) {
   const [isOpen, setIsOpen] = useState3(false);
   const [focusedIndex, setFocusedIndex] = useState3(-1);
   const triggerRef = useRef2(null);
@@ -1330,106 +1339,82 @@ function DropdownMenu({ children }) {
   useEffect4(() => {
     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]);
   useEffect4(() => {
     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]);
   useEffect4(() => {
+    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__ */ React16.createElement(DropdownContext.Provider, { value: contextValue }, /* @__PURE__ */ React16.createElement("div", { className: "relative inline-block text-left" }, children));
+  const childrenWithProps = React16.Children.map(children, (child) => {
+    if (!React16.isValidElement(child))
+      return child;
+    return React16.cloneElement(child, {
+      dropdownProps: {
+        isOpen,
+        setIsOpen,
+        triggerRef,
+        contentRef,
+        registerItem,
+        menuItemsRef
+      }
+    });
+  });
+  return /* @__PURE__ */ React16.createElement("div", { className: "relative inline-block" }, childrenWithProps);
 }
-function DropdownMenuTrigger({
-  children,
-  isOpen,
-  setIsOpen
-}) {
-  const ctx = React16.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__ */ React16.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
@@ -1437,30 +1422,29 @@ function DropdownMenuTrigger({
 }
 function DropdownMenuContent({
   children,
-  isOpen,
   align = "right",
-  className = ""
+  className,
+  dropdownProps
 }) {
-  const ctx = React16.useContext(DropdownContext);
-  const actualIsOpen = (ctx == null ? void 0 : ctx.isOpen) ?? isOpen;
-  const [visible, setVisible] = useState3(actualIsOpen);
+  const { isOpen, contentRef } = dropdownProps ?? {};
+  const [visible, setVisible] = useState3(isOpen);
   useEffect4(() => {
-    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__ */ React16.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
       )
@@ -1468,45 +1452,46 @@ function DropdownMenuContent({
     children
   );
 }
+function DropdownMenuLabel({
+  children
+}) {
+  return /* @__PURE__ */ React16.createElement("div", { className: "px-4 py-2 text-sm font-semibold text-gray-700" }, children);
+}
+function DropdownMenuSeparator() {
+  return /* @__PURE__ */ React16.createElement("div", { className: "my-1 border-t border-gray-100" });
+}
 function DropdownMenuItemWrapper({
   children,
   onClick,
   onKeyDown,
   disabled,
-  isSubTrigger,
   className,
+  dropdownProps,
   "aria-expanded": ariaExpanded
 }) {
-  const ctx = React16.useContext(DropdownContext);
-  const [index] = useState3(() => (ctx == null ? void 0 : ctx.registerItem()) ?? -1);
+  const [index] = useState3(() => {
+    var _a;
+    return ((_a = dropdownProps == null ? void 0 : dropdownProps.registerItem) == null ? void 0 : _a.call(dropdownProps)) ?? -1;
+  });
   const ref = useRef2(null);
   useEffect4(() => {
-    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__ */ React16.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
       )
     },
@@ -1515,78 +1500,68 @@ function DropdownMenuItemWrapper({
 }
 function DropdownMenuItem({
   children,
-  className = "",
   onClick,
   disabled,
-  shortcut
+  dropdownProps
 }) {
-  const ctx = React16.useContext(DropdownContext);
   return /* @__PURE__ */ React16.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__ */ React16.createElement("span", null, children),
-    shortcut && /* @__PURE__ */ React16.createElement("kbd", { className: "text-xs text-gray-400" }, shortcut)
+    children
   );
 }
-function DropdownMenuLabel({ children }) {
-  return /* @__PURE__ */ React16.createElement("div", { className: "px-4 py-2 text-sm font-semibold text-gray-700" }, children);
-}
-function DropdownMenuSeparator() {
-  return /* @__PURE__ */ React16.createElement("div", { className: "border-t border-gray-100 my-1" });
-}
-var SubmenuContext = React16.createContext(null);
 function DropdownMenuSub({ children }) {
   const [isSubOpen, setIsSubOpen] = useState3(false);
-  return /* @__PURE__ */ React16.createElement(SubmenuContext.Provider, { value: { isSubOpen, setIsSubOpen } }, /* @__PURE__ */ React16.createElement("div", { className: "relative" }, children));
+  const childrenWithProps = React16.Children.map(children, (child) => {
+    if (!React16.isValidElement(child))
+      return child;
+    return React16.cloneElement(child, {
+      submenuProps: { isSubOpen, setIsSubOpen }
+    });
+  });
+  return /* @__PURE__ */ React16.createElement("div", { className: "relative" }, childrenWithProps);
 }
-function DropdownMenuSubTrigger({ children }) {
-  const sub = React16.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__ */ React16.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__ */ React16.createElement("span", { className: "flex-1" }, children),
+    /* @__PURE__ */ React16.createElement("span", null, children),
     /* @__PURE__ */ React16.createElement(
       RiArrowDownSLine3,
       {
         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 = React16.useContext(SubmenuContext);
+function DropdownMenuSubContent({
+  children,
+  submenuProps
+}) {
   return /* @__PURE__ */ React16.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
@@ -1626,7 +1601,8 @@ var DropdownWithIcon = forwardRef6(
     onApply,
     disabled = false,
     onReset,
-    footerAction
+    footerAction,
+    height = "200px"
   }, ref) => {
     const [searchQuery, setSearchQuery] = useState4("");
     const localDropdownRef = useRef3(null);
@@ -1746,7 +1722,7 @@ var DropdownWithIcon = forwardRef6(
           "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"
@@ -1776,7 +1752,7 @@ var DropdownWithIcon = forwardRef6(
             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__ */ React17.createElement(
@@ -1784,12 +1760,12 @@ var DropdownWithIcon = forwardRef6(
           {
             "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__ */ React17.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__ */ React17.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__ */ React17.createElement(React17.Fragment, { key: i }, multiple ? /* @__PURE__ */ React17.createElement(
             Label_default,
@@ -1824,7 +1800,7 @@ var DropdownWithIcon = forwardRef6(
               },
               renderItem(option)
             ))), /* @__PURE__ */ React17.createElement("span", { className: "text-gray-500" }, option == null ? void 0 : option.info)),
-            /* @__PURE__ */ React17.createElement("span", { className: "pt-[2px] text-text-sm text-gray-500" }, option == null ? void 0 : option.addInfo)
+            /* @__PURE__ */ React17.createElement("span", { className: "pt-[2px] text-sm text-gray-500" }, option == null ? void 0 : option.addInfo)
           ) : /* @__PURE__ */ React17.createElement(
             Label_default,
             {
@@ -1874,7 +1850,7 @@ var DropdownFooter2 = ({
   onApply,
   setDropdownMenu
 }) => {
-  return /* @__PURE__ */ React17.createElement("div", { className: "flex justify-end border-t border-gray-200 px-[14px] py-[8px] text-text-sm" }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React17.createElement("div", { className: "flex justify-end border-t border-gray-200 px-[14px] py-[8px] text-sm" }, /* @__PURE__ */ React17.createElement(
     "button",
     {
       type: "button",
@@ -2377,7 +2353,7 @@ var noticeVariants = cva6("p-4 w-fit rounded-[6px]", {
     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"
     }
   }
 });
@@ -2712,7 +2688,7 @@ var Radio = forwardRef10(
 Radio.displayName = "Radio";
 var Radio_default = Radio;
 
-// app/components/RazorPayFileUpload.tsx
+// app/components/FileUploadControl.tsx
 import React32, { useRef as useRef7, useState as useState9 } from "react";
 import {
   RiDeleteBin6Line,
@@ -2780,7 +2756,7 @@ var Spinner = ({ size = "md", color = "primary" }) => {
 };
 var Spinner_default = Spinner;
 
-// app/components/RazorPayFileUpload.tsx
+// app/components/FileUploadControl.tsx
 var fileSvg = () => {
   return /* @__PURE__ */ React32.createElement(
     "svg",
@@ -2885,7 +2861,7 @@ var defaultGetFileIcon = (fileName, fileType) => {
   }
   return /* @__PURE__ */ React32.createElement(RiFileLine2, { className: "w-5 h-5 text-white" });
 };
-function ImageUploadControlled({
+function FileUploadControl({
   items,
   onAddFiles,
   onUpdateItem,
@@ -4456,10 +4432,10 @@ export {
   DropdownWithIcon_default as DropdownWithIcon,
   FileSelector_default as FileSelector,
   FileUpload_default as FileUpload,
+  FileUploadControl,
   FileUploadPreview_default as FileUploadPreview,
   GlobalNavigation_default as GlobalNavigation,
   HelperText_default as HelperText,
-  ImageUploadControlled,
   Input_default as Input,
   Label_default as Label,
   ListPagination_default as ListPagination,