@seekho/ui 0.1.32 → 0.1.34

package/dist/index.js

@@ -1,14 +1,18 @@
 'use strict';
 
-var React8 = require('react');
+var React10 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var ReactDOM = require('react-dom');
 var reactHotkeysHook = require('react-hotkeys-hook');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React8__default = /*#__PURE__*/_interopDefault(React8);
+var React10__default = /*#__PURE__*/_interopDefault(React10);
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -24,6 +28,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -36,9 +41,9 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-var AccordionContext = React8.createContext(null);
+var AccordionContext = React10.createContext(null);
 var useAccordion = () => {
-  const ctx = React8.useContext(AccordionContext);
+  const ctx = React10.useContext(AccordionContext);
   if (!ctx)
     throw new Error(
       "AccordionSummary / AccordionDetails must be used inside <Accordion>"
@@ -54,7 +59,7 @@ var Accordion = ({
   variant = "outlined",
   className
 }) => {
-  const [internalExpanded, setInternalExpanded] = React8.useState(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = React10.useState(defaultExpanded);
   const isControlled = controlledExpanded !== void 0;
   const isExpanded = isControlled ? controlledExpanded : internalExpanded;
   const handleToggle = () => {
@@ -156,6 +161,62 @@ var AccordionDetails = ({
     }
   );
 };
+var typeMap = {
+  success: "bg-green-100 text-green-500",
+  error: "bg-red-100 text-red-500",
+  warning: "bg-orange-100 text-orange-500",
+  default: "bg-gray-100 text-gray-500"
+};
+var Chip = ({
+  label,
+  type = "default",
+  style,
+  deleteIcon,
+  disabled = false,
+  className = "",
+  onClick,
+  onDelete
+}) => {
+  var _a;
+  const typeClass = (_a = typeMap[type]) != null ? _a : typeMap.default;
+  const cursorClass = disabled ? "opacity-50 cursor-not-allowed" : onClick ? "cursor-pointer" : "cursor-default";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick && !disabled ? 0 : void 0,
+      style,
+      onClick: !disabled && onClick ? onClick : void 0,
+      className: `inline-flex items-center gap-1 rounded-full w-fit px-3 py-[6px] text-[12px] capitalize ${typeClass} ${cursorClass} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "leading-none", children: label }),
+        onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            role: "button",
+            tabIndex: disabled ? -1 : 0,
+            onClick: (e) => {
+              e.stopPropagation();
+              if (!disabled) onDelete(e);
+            },
+            className: "flex items-center cursor-pointer ml-0.5 opacity-60 hover:opacity-100",
+            children: deleteIcon != null ? deleteIcon : /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
 function AutoComplete({
   label,
   value,
@@ -170,14 +231,14 @@ function AutoComplete({
   onChange,
   onInputChange
 }) {
-  const inputId = React8.useId();
-  const containerRef = React8.useRef(null);
-  const listRef = React8.useRef(null);
-  const [open, setOpen] = React8.useState(false);
-  const [inputValue, setInputValue] = React8.useState(
+  const inputId = React10.useId();
+  const containerRef = React10.useRef(null);
+  const listRef = React10.useRef(null);
+  const [open, setOpen] = React10.useState(false);
+  const [inputValue, setInputValue] = React10.useState(
     value ? getOptionLabel(value) : ""
   );
-  const [highlightedIndex, setHighlightedIndex] = React8.useState(-1);
+  const [highlightedIndex, setHighlightedIndex] = React10.useState(-1);
   const filteredOptions = options.filter(
     (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
   );
@@ -216,10 +277,10 @@ function AutoComplete({
     if (!value) return false;
     return isOptionEqualToValue ? isOptionEqualToValue(option, value) : getOptionLabel(option) === getOptionLabel(value);
   };
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     setInputValue(value ? getOptionLabel(value) : "");
   }, [value]);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setOpen(false);
@@ -396,7 +457,7 @@ function AutoComplete({
                   isSelected({ option }) ? "font-semibold" : ""
                 ].join(" ")
               };
-              return renderOption ? /* @__PURE__ */ jsxRuntime.jsx(React8__default.default.Fragment, { children: renderOption(optionProps, option) }, idx) : /* @__PURE__ */ jsxRuntime.jsx(
+              return renderOption ? /* @__PURE__ */ jsxRuntime.jsx(React10__default.default.Fragment, { children: renderOption(optionProps, option) }, idx) : /* @__PURE__ */ jsxRuntime.jsx(
                 "li",
                 {
                   onMouseDown: () => handleSelect({ option }),
@@ -639,7 +700,7 @@ var CustomAnchor = ({
     }
   );
 };
-var CustomInput = React8__default.default.forwardRef(
+var CustomInput = React10__default.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { label: _label, error, className, type } = _b, props = __objRest(_b, ["label", "error", "className", "type"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -680,13 +741,13 @@ var Drawer = ({
   className,
   onClose
 }) => {
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     document.body.style.overflow = open ? "hidden" : "";
     return () => {
       document.body.style.overflow = "";
     };
   }, [open]);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape" && open) onClose();
     };
@@ -819,6 +880,123 @@ var FilterDrawer = ({
     }
   );
 };
+var GAP = 4;
+var PAD = 6;
+function reposition(menu, anchorEl, align) {
+  const rect = anchorEl.getBoundingClientRect();
+  const mw = menu.offsetWidth;
+  const mh = menu.offsetHeight;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  let top = rect.bottom + GAP + mh > vh - PAD ? Math.max(PAD, rect.top - mh - GAP) : rect.bottom + GAP;
+  let left = align === "right" ? rect.right - mw : rect.left;
+  left = Math.max(PAD, Math.min(left, vw - mw - PAD));
+  menu.style.top = `${top}px`;
+  menu.style.left = `${left}px`;
+  menu.style.minWidth = `${rect.width}px`;
+  menu.style.opacity = "1";
+}
+var Menu = ({
+  anchorEl,
+  open,
+  onClose,
+  children,
+  align = "left",
+  className = ""
+}) => {
+  const menuRef = React10.useRef(null);
+  const onCloseRef = React10.useRef(onClose);
+  React10.useEffect(() => {
+    onCloseRef.current = onClose;
+  });
+  React10.useEffect(() => {
+    if (!open || !anchorEl) return;
+    const id = requestAnimationFrame(() => {
+      if (menuRef.current) reposition(menuRef.current, anchorEl, align);
+    });
+    return () => cancelAnimationFrame(id);
+  }, [open, anchorEl, align]);
+  React10.useEffect(() => {
+    if (!open || !anchorEl) return;
+    const update = () => {
+      if (menuRef.current) reposition(menuRef.current, anchorEl, align);
+    };
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, anchorEl, align]);
+  React10.useEffect(() => {
+    if (!open) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") onCloseRef.current();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open]);
+  React10.useEffect(() => {
+    if (!open) return;
+    const handleMouseDown = (e) => {
+      var _a;
+      if ((anchorEl == null ? void 0 : anchorEl.contains(e.target)) || ((_a = menuRef.current) == null ? void 0 : _a.contains(e.target)))
+        return;
+      onCloseRef.current();
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [open, anchorEl]);
+  if (!open) return null;
+  return ReactDOM__default.default.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: menuRef,
+        role: "menu",
+        style: {
+          position: "fixed",
+          top: -9999,
+          left: -9999,
+          opacity: 0,
+          zIndex: 9999,
+          transition: "opacity 100ms ease"
+        },
+        className: `bg-white rounded shadow-lg border border-gray-100 py-1 max-w-[calc(100vw-12px)] ${className}`,
+        children
+      }
+    ),
+    document.body
+  );
+};
+var MenuItem = ({
+  onClick,
+  children,
+  disabled = false,
+  selected = false,
+  icon,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "menuitem",
+      "aria-disabled": disabled,
+      onClick: disabled ? void 0 : onClick,
+      className: [
+        "px-3 py-2 flex gap-x-3 items-center text-[14px] tracking-wide min-w-0 w-full",
+        disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-gray-50",
+        selected ? "bg-gray-100 font-medium" : "",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center shrink-0", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 break-words", children })
+      ]
+    }
+  );
+};
+var MenuDivider = () => /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "my-1 border-gray-100" });
 
 // src/utils/modalStack.ts
 var stack = [];
@@ -846,8 +1024,8 @@ function Modal({
   handleConfirmation,
   handleConfirmationBtnText = "Confirm"
 }) {
-  const modalId = React8.useId();
-  React8.useEffect(() => {
+  const modalId = React10.useId();
+  React10.useEffect(() => {
     if (show) handlePushModal({ id: modalId });
     return () => handlePopModal({ id: modalId });
   }, [show, modalId]);
@@ -1081,9 +1259,9 @@ var MonthYearPicker = ({
   triggerClassName,
   dropdownClassName
 }) => {
-  const [isOpen, setIsOpen] = React8.useState(false);
-  const [pickerYear, setPickerYear] = React8.useState(year);
-  const ref = React8.useRef(null);
+  const [isOpen, setIsOpen] = React10.useState(false);
+  const [pickerYear, setPickerYear] = React10.useState(year);
+  const ref = React10.useRef(null);
   const now = /* @__PURE__ */ new Date();
   const currentMonth = now.getMonth() + 1;
   const currentYear = now.getFullYear();
@@ -1116,10 +1294,10 @@ var MonthYearPicker = ({
     if (maxDate && pickerYear >= maxDate.year) return true;
     return false;
   };
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     setPickerYear(year);
   }, [year]);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     const handleClickOutside = (e) => {
       if (ref.current && !ref.current.contains(e.target)) {
         setIsOpen(false);
@@ -1694,6 +1872,228 @@ var StagingAlert = ({
     ] })
   ] });
 };
+var sizeStyles = {
+  small: { padding: "4px 10px", fontSize: "13px" },
+  medium: { padding: "7px 14px", fontSize: "16px" },
+  large: { padding: "10px 16px", fontSize: "16px" }
+};
+var Select = ({
+  value,
+  onChange,
+  children,
+  disabled = false,
+  placeholder = "Select...",
+  size = "medium",
+  error = false,
+  className = ""
+}) => {
+  const [isOpen, setIsOpen] = React10.useState(false);
+  const [dropdownStyle, setDropdownStyle] = React10.useState({});
+  const [focusedIndex, setFocusedIndex] = React10.useState(-1);
+  const triggerRef = React10.useRef(null);
+  const dropdownRef = React10.useRef(null);
+  const options = React10__default.default.Children.toArray(children).filter(Boolean).map((child) => {
+    var _a, _b, _c, _d, _e;
+    const c = child;
+    return {
+      value: (_b = (_a = c.props) == null ? void 0 : _a.value) != null ? _b : "",
+      label: (_c = c.props) == null ? void 0 : _c.children,
+      disabled: (_e = (_d = c.props) == null ? void 0 : _d.disabled) != null ? _e : false
+    };
+  });
+  const selectedOption = options.find(
+    (opt) => String(opt.value) === String(value)
+  );
+  const computePosition = React10.useCallback(() => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const dropdownHeight = Math.min(options.length * 40, 240);
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const openAbove = spaceBelow < dropdownHeight + 8 && rect.top > dropdownHeight;
+    setDropdownStyle(__spreadProps(__spreadValues({
+      position: "fixed"
+    }, openAbove ? { bottom: window.innerHeight - rect.top + 2 } : { top: rect.bottom + 2 }), {
+      left: rect.left,
+      width: rect.width,
+      zIndex: 9999
+    }));
+  }, [options.length]);
+  React10.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (triggerRef.current && !triggerRef.current.contains(e.target) && (!dropdownRef.current || !dropdownRef.current.contains(e.target))) {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  React10.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          var _a;
+          let next = prev + 1;
+          while (next < options.length && ((_a = options[next]) == null ? void 0 : _a.disabled)) next++;
+          return next < options.length ? next : prev;
+        });
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          var _a;
+          let next = prev - 1;
+          while (next >= 0 && ((_a = options[next]) == null ? void 0 : _a.disabled)) next--;
+          return next >= 0 ? next : prev;
+        });
+      } else if (e.key === "Enter" && focusedIndex >= 0) {
+        const opt = options[focusedIndex];
+        if (opt && !opt.disabled) {
+          onChange({ target: { value: opt.value } });
+          setIsOpen(false);
+          setFocusedIndex(-1);
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, focusedIndex, options, onChange]);
+  React10.useEffect(() => {
+    if (focusedIndex >= 0 && dropdownRef.current) {
+      const item = dropdownRef.current.children[focusedIndex];
+      item == null ? void 0 : item.scrollIntoView({ block: "nearest" });
+    }
+  }, [focusedIndex]);
+  React10.useEffect(() => {
+    if (!isOpen) return;
+    window.addEventListener("scroll", computePosition, true);
+    window.addEventListener("resize", computePosition);
+    return () => {
+      window.removeEventListener("scroll", computePosition, true);
+      window.removeEventListener("resize", computePosition);
+    };
+  }, [isOpen, computePosition]);
+  const handleOpen = () => {
+    if (disabled) return;
+    if (!isOpen) {
+      computePosition();
+      setFocusedIndex(
+        options.findIndex((opt) => String(opt.value) === String(value))
+      );
+    }
+    setIsOpen((prev) => !prev);
+  };
+  const handleSelect = (opt) => {
+    if (opt.disabled) return;
+    onChange({ target: { value: opt.value } });
+    setIsOpen(false);
+    setFocusedIndex(-1);
+  };
+  const borderColor = error ? "#ef4444" : isOpen ? "#534f8f" : "rgba(0,0,0,0.23)";
+  const { padding, fontSize } = sizeStyles[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${className}`, ref: triggerRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: handleOpen,
+        className: "w-full flex items-center justify-between rounded-md bg-white text-left outline-none disabled:opacity-50 disabled:cursor-not-allowed",
+        style: { padding, border: `1px solid ${borderColor}`, transition: "border-color 0.15s ease" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1", style: { fontSize }, children: selectedOption ? selectedOption.label : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: placeholder }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "18",
+              height: "18",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              className: `shrink-0 ml-2 text-gray-400 transition-transform duration-150 ${isOpen ? "rotate-180" : ""}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" })
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && ReactDOM__default.default.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "ul",
+        {
+          ref: dropdownRef,
+          style: dropdownStyle,
+          className: "bg-white shadow-lg rounded-md border border-gray-200 max-h-60 overflow-y-auto",
+          children: options.map((opt, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "li",
+            {
+              onClick: () => handleSelect(opt),
+              className: `px-4 py-2 text-[14px] ${opt.disabled ? "text-gray-400 cursor-not-allowed" : String(opt.value) === String(value) ? "bg-purple-100 text-[#534f8f] font-medium cursor-pointer" : focusedIndex === i ? "bg-gray-100 text-gray-800 cursor-pointer" : "text-gray-800 hover:bg-gray-50 cursor-pointer"}`,
+              children: opt.label
+            },
+            i
+          ))
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+
+// src/components/Select/SelectOption.tsx
+var SelectOption = (_props) => null;
+var Switch = ({
+  checked,
+  onChange,
+  disabled = false,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      disabled,
+      onClick: disabled ? void 0 : onChange,
+      className: `relative inline-flex shrink-0 border-0 bg-transparent p-0 focus:outline-none ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer"} ${className}`,
+      style: { width: 58, height: 38 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "absolute rounded-full transition-colors duration-200",
+            style: {
+              width: 34,
+              height: 14,
+              top: 12,
+              left: 12,
+              backgroundColor: checked ? "rgba(83,79,143,0.5)" : "rgba(0,0,0,0.38)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "absolute rounded-full transition-all duration-200",
+            style: {
+              width: 20,
+              height: 20,
+              top: 9,
+              left: checked ? 29 : 9,
+              backgroundColor: checked ? "#534f8f" : "#fafafa",
+              boxShadow: "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
 var SCROLL_STEP = 120;
 function Tabs({
   value,
@@ -1706,12 +2106,12 @@ function Tabs({
   className,
   "aria-label": ariaLabel
 }) {
-  const listRef = React8.useRef(null);
-  const [canScrollLeft, setCanScrollLeft] = React8.useState(false);
-  const [canScrollRight, setCanScrollRight] = React8.useState(false);
-  const tabRefs = React8.useRef([]);
-  const tabs = React8.Children.toArray(children).filter(
-    React8.isValidElement
+  const listRef = React10.useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = React10.useState(false);
+  const [canScrollRight, setCanScrollRight] = React10.useState(false);
+  const tabRefs = React10.useRef([]);
+  const tabs = React10.Children.toArray(children).filter(
+    React10.isValidElement
   );
   function resolveIndex(val) {
     var _a;
@@ -1722,13 +2122,13 @@ function Tabs({
     return -1;
   }
   const selectedIndex = resolveIndex(value);
-  const updateScrollState = React8.useCallback(() => {
+  const updateScrollState = React10.useCallback(() => {
     const el = listRef.current;
     if (!el) return;
     setCanScrollLeft(el.scrollLeft > 0);
     setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
   }, []);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     const el = listRef.current;
     if (!el) return;
     updateScrollState();
@@ -1740,7 +2140,7 @@ function Tabs({
       ro.disconnect();
     };
   }, [updateScrollState]);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     const el = tabRefs.current[selectedIndex];
     el == null ? void 0 : el.scrollIntoView({
       block: "nearest",
@@ -1795,7 +2195,7 @@ function Tabs({
           var _a;
           const tabValue = (_a = tab.props.value) != null ? _a : i;
           const selected = tabValue === value;
-          return React8.cloneElement(tab, {
+          return React10.cloneElement(tab, {
             key: i,
             selected,
             onChange: (e) => {
@@ -1868,26 +2268,43 @@ function Tab({
     }
   );
 }
-var placementClass = {
-  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-  "top-start": "bottom-full left-0 mb-2",
-  "top-end": "bottom-full right-0 mb-2",
-  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-  "bottom-start": "top-full left-0 mt-2",
-  "bottom-end": "top-full right-0 mt-2",
-  left: "right-full top-1/2 -translate-y-1/2 mr-2",
-  "left-start": "right-full top-0 mr-2",
-  "left-end": "right-full bottom-0 mr-2",
-  right: "left-full top-1/2 -translate-y-1/2 ml-2",
-  "right-start": "left-full top-0 ml-2",
-  "right-end": "left-full bottom-0 ml-2"
-};
+var GAP2 = 8;
+var VIEWPORT_PADDING = 6;
 var arrowClass = {
   top: "top-full left-1/2 -translate-x-1/2 border-t-gray-600/80 border-x-transparent border-b-transparent",
   bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-gray-600/80 border-x-transparent border-t-transparent",
   left: "left-full top-1/2 -translate-y-1/2 border-l-gray-600/80 border-y-transparent border-r-transparent",
   right: "right-full top-1/2 -translate-y-1/2 border-r-gray-600/80 border-y-transparent border-l-transparent"
 };
+function getPosition(trigger, tooltip, placement) {
+  const tw = tooltip.offsetWidth;
+  const th = tooltip.offsetHeight;
+  const { top, left, right, bottom, width, height } = trigger;
+  const positions = {
+    top: { top: top - th - GAP2, left: left + width / 2 - tw / 2 },
+    "top-start": { top: top - th - GAP2, left },
+    "top-end": { top: top - th - GAP2, left: right - tw },
+    bottom: { top: bottom + GAP2, left: left + width / 2 - tw / 2 },
+    "bottom-start": { top: bottom + GAP2, left },
+    "bottom-end": { top: bottom + GAP2, left: right - tw },
+    left: { top: top + height / 2 - th / 2, left: left - tw - GAP2 },
+    "left-start": { top, left: left - tw - GAP2 },
+    "left-end": { top: bottom - th, left: left - tw - GAP2 },
+    right: { top: top + height / 2 - th / 2, left: right + GAP2 },
+    "right-start": { top, left: right + GAP2 },
+    "right-end": { top: bottom - th, left: right + GAP2 }
+  };
+  const pos = positions[placement];
+  pos.left = Math.max(
+    VIEWPORT_PADDING,
+    Math.min(pos.left, window.innerWidth - tw - VIEWPORT_PADDING)
+  );
+  pos.top = Math.max(
+    VIEWPORT_PADDING,
+    Math.min(pos.top, window.innerHeight - th - VIEWPORT_PADDING)
+  );
+  return pos;
+}
 function Tooltip({
   title,
   children,
@@ -1899,11 +2316,35 @@ function Tooltip({
   className,
   disabled = false
 }) {
-  const [visible, setVisible] = React8.useState(false);
+  const [visible, setVisible] = React10.useState(false);
+  const triggerRef = React10.useRef(null);
+  const tooltipRef = React10.useRef(null);
+  const enterTimer = React10.useRef(null);
+  const leaveTimer = React10.useRef(null);
   const isControlled = controlledOpen !== void 0;
   const show = isControlled ? controlledOpen : visible;
-  const enterTimer = React8__default.default.useRef(null);
-  const leaveTimer = React8__default.default.useRef(null);
+  const positionAndShow = React10.useCallback(() => {
+    const tooltip = tooltipRef.current;
+    const trigger2 = triggerRef.current;
+    if (!tooltip || !trigger2) return;
+    const pos = getPosition(
+      trigger2.getBoundingClientRect(),
+      tooltip,
+      placement
+    );
+    tooltip.style.top = `${pos.top}px`;
+    tooltip.style.left = `${pos.left}px`;
+    tooltip.style.opacity = "1";
+  }, [placement]);
+  React10.useEffect(() => {
+    if (!show) {
+      const tooltip = tooltipRef.current;
+      if (tooltip) tooltip.style.opacity = "0";
+      return;
+    }
+    const id = requestAnimationFrame(positionAndShow);
+    return () => cancelAnimationFrame(id);
+  }, [show, positionAndShow]);
   const handleEnter = () => {
     if (disabled || isControlled) return;
     if (leaveTimer.current) clearTimeout(leaveTimer.current);
@@ -1914,47 +2355,79 @@ function Tooltip({
     if (enterTimer.current) clearTimeout(enterTimer.current);
     leaveTimer.current = setTimeout(() => setVisible(false), leaveDelay);
   };
+  React10.useEffect(() => {
+    return () => {
+      if (enterTimer.current) clearTimeout(enterTimer.current);
+      if (leaveTimer.current) clearTimeout(leaveTimer.current);
+    };
+  }, []);
+  if (!React10__default.default.isValidElement(children)) return children;
   const side = placement.split("-")[0];
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+  const trigger = React10__default.default.cloneElement(
+    children,
     {
-      className: "relative inline-flex",
-      onMouseEnter: handleEnter,
-      onMouseLeave: handleLeave,
-      onFocus: handleEnter,
-      onBlur: handleLeave,
-      children: [
-        children,
-        show && title && !disabled && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            role: "tooltip",
-            className: [
-              "absolute z-[9999] max-w-[300px] px-2 py-1.5 whitespace-nowrap",
-              "bg-gray-600/80 text-white text-xs rounded shadow-md pointer-events-none",
-              "animate-in fade-in-0 zoom-in-95 duration-100",
-              placementClass[placement],
-              className || ""
-            ].join(" "),
-            children: [
-              arrow && /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: ["absolute w-0 h-0 border-4", arrowClass[side]].join(
-                    " "
-                  )
-                }
-              ),
-              title
-            ]
-          }
-        )
-      ]
+      ref: triggerRef,
+      onMouseEnter: (e) => {
+        var _a, _b;
+        handleEnter();
+        (_b = (_a = children.props).onMouseEnter) == null ? void 0 : _b.call(_a, e);
+      },
+      onMouseLeave: (e) => {
+        var _a, _b;
+        handleLeave();
+        (_b = (_a = children.props).onMouseLeave) == null ? void 0 : _b.call(_a, e);
+      },
+      onFocus: (e) => {
+        var _a, _b;
+        handleEnter();
+        (_b = (_a = children.props).onFocus) == null ? void 0 : _b.call(_a, e);
+      },
+      onBlur: (e) => {
+        var _a, _b;
+        handleLeave();
+        (_b = (_a = children.props).onBlur) == null ? void 0 : _b.call(_a, e);
+      }
     }
   );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    trigger,
+    ReactDOM.createPortal(
+      title ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: tooltipRef,
+          role: "tooltip",
+          style: {
+            position: "fixed",
+            top: -9999,
+            left: -9999,
+            opacity: 0,
+            transition: "opacity 100ms ease"
+          },
+          className: [
+            "z-[99] max-w-[300px] px-2 py-1.5",
+            "bg-gray-600/80 text-white text-xs rounded shadow-md pointer-events-none",
+            className || ""
+          ].join(" "),
+          children: [
+            arrow && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: ["absolute w-0 h-0 border-4", arrowClass[side]].join(
+                  " "
+                )
+              }
+            ),
+            title
+          ]
+        }
+      ) : null,
+      document.body
+    )
+  ] });
 }
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = React8.useState(() => {
+  const [storedValue, setStoredValue] = React10.useState(() => {
     if (typeof window === "undefined") return initialValue;
     try {
       const item = window.localStorage.getItem(key);
@@ -1993,18 +2466,25 @@ exports.AccordionSummary = AccordionSummary;
 exports.AutoComplete = AutoComplete;
 exports.Breadcrumb = Breadcrumb;
 exports.ButtonLoader = ButtonLoader;
+exports.Chip = Chip;
 exports.CopyId = CopyId;
 exports.CustomAnchor = CustomAnchor;
 exports.CustomInput = CustomInput;
 exports.Drawer = Drawer;
 exports.FilterDrawer = FilterDrawer;
 exports.InputTitleWithRequired = InputTitleWithRequired;
+exports.Menu = Menu;
+exports.MenuDivider = MenuDivider;
+exports.MenuItem = MenuItem;
 exports.Modal = Modal;
 exports.MonthYearPicker = MonthYearPicker;
 exports.Pagination = Pagination;
 exports.ReadMore = ReadMore;
 exports.SearchBar = SearchBar;
+exports.Select = Select;
+exports.SelectOption = SelectOption;
 exports.StagingAlert = StagingAlert;
+exports.Switch = Switch;
 exports.Tab = Tab;
 exports.Tabs = Tabs;
 exports.Tooltip = Tooltip;