meticulous-ui 3.7.11 → 3.7.13

package/components/Dropdown/Dropdown.js

@@ -1,446 +1,397 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useId, useRef, useMemo, useEffect, useLayoutEffect, useCallback, createElement } from "react";
-import PropTypes from "prop-types";
-import grey from "../../colors/grey.js";
-import MenuItem from "../MenuItem/MenuItem.js";
-import colors from "../../colors/colorMap.js";
-import { blue } from "../../colors/blue.js";
-import Spinner from "../Spinner/Spinner.js";
-import styled, { css, keyframes } from "styled-components";
-import P from "../Typography/P/P.js";
-import ChevronDown from "../Icons/ChevronDown.js";
-import Search from "../Icons/Search.js";
-import { DEFAULT_BORDER } from "./constants.js";
-import white from "../../colors/white.js";
-const rotate = keyframes`
+import { jsxs as E, jsx as f } from "react/jsx-runtime";
+import { useState as O, useId as ue, useRef as D, useMemo as he, useEffect as x, useLayoutEffect as be, useCallback as ge, createElement as we } from "react";
+import o from "prop-types";
+import m from "../../colors/grey.js";
+import xe from "../MenuItem/MenuItem.js";
+import ve from "../../colors/colorMap.js";
+import { blue as $e } from "../../colors/blue.js";
+import q from "../Spinner/Spinner.js";
+import c, { css as F, keyframes as N } from "styled-components";
+import ye from "../Typography/P/P.js";
+import ke from "../Icons/ChevronDown.js";
+import Ie from "../Icons/Search.js";
+import { DEFAULT_BORDER as Ce } from "./constants.js";
+import _ from "../../colors/white.js";
+const Se = N`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(180deg);
   }
-`;
-const reverse = keyframes`
+`, Ee = N`
   from {
     transform: rotate(180deg);
   }
   to {
     transform: rotate(0deg);
   }
-`;
-const DropdownWrapper = /*@__PURE__*/styled.div`
-  max-width: ${({
-  $width
-}) => $width};
+`, Oe = c.div`
+  max-width: ${({ $width: t }) => t};
   position: relative;
   outline: none;
 
-  ${({
-  $isLoading
-}) => $isLoading && css`
+  ${({ $isLoading: t }) => t && F`
       pointer-events: none;
       opacity: 0.8;
     `}
 
-  ${({
-  $isDisabled
-}) => $isDisabled && css`
+  ${({ $isDisabled: t }) => t && F`
       pointer-events: none;
       opacity: 0.7;
     `}
-`;
-const Box = /*@__PURE__*/styled.div`
+`, De = c.div`
   height: 3.2rem;
-  width: ${({
-  $width
-}) => $width};
+  width: ${({ $width: t }) => t};
   border-radius: 0.96rem;
-  border: ${({
-  $isOpen,
-  $isFocused,
-  $border
-}) => $isOpen || $isFocused ? `2px solid ${$border}` : `1px solid ${DEFAULT_BORDER}`};
+  border: ${({ $isOpen: t, $isFocused: u, $border: s }) => t || u ? `2px solid ${s}` : `1px solid ${Ce}`};
   padding: 0.64rem 0.96rem 0.64rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
-`;
-const PWrapper = /*@__PURE__*/styled(P)`
+`, Fe = c(ye)`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  max-width: calc(${({
-  $width
-}) => $width} - 3.2rem);
+  max-width: calc(${({ $width: t }) => t} - 3.2rem);
   pointer-events: none;
-`;
-const ChevronDownWrapper = /*@__PURE__*/styled(ChevronDown)`
-  animation: ${({
-  $isOpen
-}) => $isOpen ? rotate : reverse} 0.15s linear;
-  transform: rotate(${({
-  $isOpen
-}) => $isOpen ? 180 : 0}deg);
-`;
-const OptionWrapper = /*@__PURE__*/styled.div`
-  border: 1px solid ${grey.m700};
-  width: calc(${({
-  $width
-}) => $width} + 1.6rem);
+`, ze = c(ke)`
+  animation: ${({ $isOpen: t }) => t ? Se : Ee} 0.15s linear;
+  transform: rotate(${({ $isOpen: t }) => t ? 180 : 0}deg);
+`, Re = c.div`
+  border: 1px solid ${m.m700};
+  width: calc(${({ $width: t }) => t} + 1.6rem);
   /* Remove overflow: auto from here */
   display: flex;
   flex-direction: column;
   position: absolute;
   z-index: 1000;
-  background-color: ${white};
+  background-color: ${_};
   left: 0.24rem;
   max-height: 0;
   transition: max-height 0.15s ease-out;
   opacity: 0;
   overflow: hidden; /* Keep this hidden so the collapse works */
 
-  ${({
-  $isOpen
-}) => $isOpen && css`
-      max-height: ${({
-  $height
-}) => $height};
+  ${({ $isOpen: t }) => t && F`
+      max-height: ${({ $height: u }) => u};
       opacity: 1;
     `};
 
-  ${({
-  $top
-}) => $top ? css`
+  ${({ $top: t }) => t ? F`
           bottom: 100%;
           flex-direction: column-reverse; /* Search at bottom if menu opens upward */
           border-top-right-radius: 0.96rem;
           border-top-left-radius: 0.96rem;
           margin-bottom: 0.16rem;
-        ` : css`
+        ` : F`
           top: 100%;
           border-bottom-right-radius: 0.96rem;
           border-bottom-left-radius: 0.96rem;
           margin-top: 0.16rem;
         `}
-`;
-const OptionsList = /*@__PURE__*/styled.div`
+`, Ae = c.div`
   overflow-y: auto;
   flex: 1;
-`;
-const SpinnerWrapper = /*@__PURE__*/styled.div`
+`, Pe = c.div`
   position: absolute;
   top: 1.28rem;
   right: 1.92rem;
-`;
-const SearchContainer = /*@__PURE__*/styled.div`
+`, We = c.div`
   position: relative;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid ${grey.m300};
-  background: ${white};
+  border-bottom: 1px solid ${m.m300};
+  background: ${_};
 
   &:focus-within {
-    border-bottom-color: ${grey.m500};
+    border-bottom-color: ${m.m500};
   }
-`;
-const SearchInput = /*@__PURE__*/styled.input`
+`, Be = c.input`
   width: 100%;
   box-sizing: border-box;
   border: none;
   /* Add left padding to make room for the icon */
   padding: 0.8rem 1.2rem 0.8rem 0;
   font-size: 1.92rem;
-  color: ${grey.m700};
+  color: ${m.m700};
   background: transparent;
   outline: none;
 
   &::placeholder {
-    color: ${grey.m400};
+    color: ${m.m400};
   }
-`;
-const SearchIcon = /*@__PURE__*/styled(Search)`
+`, je = c(Ie)`
   margin: 0 1.28rem;
-`;
-const LoadMoreSentinel = /*@__PURE__*/styled.div`
+`, He = c.div`
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 1.6rem 0;
   min-height: 1.6rem;
   width: 100%;
-`;
-const getPixelValue = (value) => {
-  if (typeof value !== "string") return value;
-  if (value.endsWith("px")) return parseFloat(value);
-  if (value.endsWith("rem")) {
-    const remValue = parseFloat(value);
-    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-    return remValue * rootFontSize;
+`, Te = (t) => {
+  if (typeof t != "string") return t;
+  if (t.endsWith("px")) return parseFloat(t);
+  if (t.endsWith("rem")) {
+    const u = parseFloat(t), s = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return u * s;
   }
-  return parseFloat(value);
-};
-const Dropdown = ({
-  options,
-  onChange,
-  value,
-  width = "32rem",
-  menuHeight = "32rem",
-  placeholder,
-  theme = "blue",
-  isLoading,
-  isDisabled,
-  loaderColor,
-  searchable = false,
-  onLoadMore,
-  hasMore = false,
-  isLoadingMore = false,
-  searchPh = "Search...",
-  ...rest
+  return parseFloat(t);
+}, Ke = ({
+  options: t,
+  onChange: u,
+  value: s,
+  width: v = "32rem",
+  menuHeight: R = "32rem",
+  placeholder: G,
+  theme: J = "blue",
+  isLoading: $,
+  isDisabled: y,
+  loaderColor: P,
+  searchable: k = !1,
+  onLoadMore: a,
+  hasMore: I = !1,
+  isLoadingMore: h = !1,
+  searchPh: W = "Search...",
+  ...X
 }) => {
-  var _a, _b;
-  const [isOpen, setOpen] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  const [position, setPosition] = useState("bottom");
-  const [searchQuery, setSearchQuery] = useState("");
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const listboxId = useId();
-  const containerRef = useRef(null);
-  const menuRef = useRef(null);
-  const searchInputRef = useRef(null);
-  const sentinelRef = useRef(null);
-  const isInitialOpen = useRef(true);
-  const toggle = () => !isLoading && !isDisabled && setOpen((prev) => !prev);
-  const handleChange = (val) => {
-    if (val !== value) {
-      onChange(val);
-      setOpen(false);
-    }
-  };
-  const filteredOptions = useMemo(() => {
-    if (!searchable || !searchQuery.trim()) return options;
-    const q = searchQuery.toLowerCase();
-    return options.filter(({
-      label
-    }) => label.toLowerCase().includes(q));
-  }, [options, searchQuery, searchable]);
-  useEffect(() => {
-    if (isOpen) {
-      const selectedIndex = filteredOptions.findIndex((opt) => opt.value === value);
-      if (selectedIndex !== -1 && !filteredOptions[selectedIndex].disabled) {
-        setActiveIndex(selectedIndex);
-      } else {
-        const firstEnabled = filteredOptions.findIndex((opt) => !opt.disabled);
-        setActiveIndex(firstEnabled);
-      }
-    } else {
-      setSearchQuery("");
-      setActiveIndex(-1);
-    }
-  }, [isOpen, searchQuery, filteredOptions, value]);
-  useEffect(() => {
-    if (isOpen && activeIndex !== -1 && menuRef.current) {
-      const highlightedElement = menuRef.current.children[activeIndex];
-      if (highlightedElement) {
-        highlightedElement.scrollIntoView({
-          block: "nearest",
-          behavior: "auto"
-        });
+  var V, Q;
+  const [n, b] = O(!1), [Y, B] = O(!1), [Z, L] = O("bottom"), [C, j] = O(""), [l, g] = O(-1), z = ue(), w = D(null), S = D(null), A = D(null), H = D(null), M = D(!0), ee = () => !$ && !y && b((e) => !e), T = (e) => {
+    e !== s && (u(e), b(!1));
+  }, d = he(() => {
+    if (!k || !C.trim()) return t;
+    const e = C.toLowerCase();
+    return t.filter(({ label: r }) => r.toLowerCase().includes(e));
+  }, [t, C, k]);
+  x(() => {
+    if (n) {
+      const e = d.findIndex((r) => r.value === s);
+      if (e !== -1 && !d[e].disabled)
+        g(e);
+      else {
+        const r = d.findIndex((i) => !i.disabled);
+        g(r);
       }
+    } else
+      j(""), g(-1);
+  }, [n, C, d, s]), x(() => {
+    if (n && l !== -1 && S.current) {
+      const e = S.current.children[l];
+      e && e.scrollIntoView({
+        block: "nearest",
+        behavior: "auto"
+      });
     }
-  }, [activeIndex, isOpen]);
-  useEffect(() => {
-    if (isOpen && searchable && searchInputRef.current) {
-      searchInputRef.current.focus();
-    }
-  }, [isOpen, searchable]);
-  useEffect(() => {
-    if (!isOpen) isInitialOpen.current = true;
-  }, [isOpen]);
-  useEffect(() => {
-    const handleOutsideClick = (event) => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setOpen(false);
-      }
+  }, [l, n]), x(() => {
+    n && k && A.current && A.current.focus();
+  }, [n, k]), x(() => {
+    n || (M.current = !0);
+  }, [n]), x(() => {
+    const e = (r) => {
+      w.current && !w.current.contains(r.target) && b(!1);
     };
-    document.addEventListener("mousedown", handleOutsideClick);
-    return () => document.removeEventListener("mousedown", handleOutsideClick);
-  }, []);
-  useLayoutEffect(() => {
-    if (isOpen && menuRef.current && containerRef.current) {
-      const containerRect = containerRef.current.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-      const parsedMenuHeight = getPixelValue(menuHeight);
-      const spaceBelow = viewportHeight - containerRect.bottom;
-      const buffer = 8;
-      setPosition(spaceBelow < parsedMenuHeight + buffer && containerRect.top > spaceBelow ? "top" : "bottom");
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []), be(() => {
+    if (n && S.current && w.current) {
+      const e = w.current.getBoundingClientRect(), r = window.innerHeight, i = Te(R), p = r - e.bottom;
+      L(
+        p < i + 8 && e.top > p ? "top" : "bottom"
+      );
     }
-  }, [isOpen, menuHeight]);
-  const getNextEnabledIndex = (currentIndex) => {
-    let next = currentIndex + 1;
-    while (next < filteredOptions.length) {
-      if (!filteredOptions[next].disabled) return next;
-      next++;
+  }, [n, R]);
+  const te = (e) => {
+    let r = e + 1;
+    for (; r < d.length; ) {
+      if (!d[r].disabled) return r;
+      r++;
     }
-    return currentIndex;
-  };
-  const getPrevEnabledIndex = (currentIndex) => {
-    let prev = currentIndex - 1;
-    while (prev >= 0) {
-      if (!filteredOptions[prev].disabled) return prev;
-      prev--;
+    return e;
+  }, re = (e) => {
+    let r = e - 1;
+    for (; r >= 0; ) {
+      if (!d[r].disabled) return r;
+      r--;
     }
-    return currentIndex;
-  };
-  const handleKeyDown = (e) => {
-    if (isLoading || isDisabled) return;
-    if (!isOpen) {
-      if (e.key === " " || e.key === "Enter" || e.key === "ArrowDown" || e.key === "ArrowUp") {
-        e.preventDefault();
-        setOpen(true);
+    return e;
+  }, oe = (e) => {
+    if (!($ || y)) {
+      if (!n) {
+        (e.key === " " || e.key === "Enter" || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), b(!0));
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          const r = te(l);
+          r === l && I && !h && (a == null || a()), g(r);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), g((p) => re(p));
+          break;
+        case "Enter":
+          e.preventDefault();
+          const i = d[l];
+          i && !i.disabled && T(i.value);
+          break;
+        case "Escape":
+          b(!1);
+          break;
       }
-      return;
-    }
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        const nextIndex = getNextEnabledIndex(activeIndex);
-        if (nextIndex === activeIndex && hasMore && !isLoadingMore) {
-          onLoadMore == null ? void 0 : onLoadMore();
-        }
-        setActiveIndex(nextIndex);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        setActiveIndex((prev) => getPrevEnabledIndex(prev));
-        break;
-      case "Enter":
-        e.preventDefault();
-        const selectedOption = filteredOptions[activeIndex];
-        if (selectedOption && !selectedOption.disabled) {
-          handleChange(selectedOption.value);
-        }
-        break;
-      case "Escape":
-        setOpen(false);
-        break;
-    }
-  };
-  const handleLoadMore = useCallback(() => {
-    if (hasMore && !isLoadingMore && onLoadMore) {
-      onLoadMore();
     }
-  }, [hasMore, isLoadingMore, onLoadMore]);
-  useEffect(() => {
-    const sentinel = sentinelRef.current;
-    if (!sentinel || !onLoadMore || !hasMore) return;
-    const observer = new IntersectionObserver(([entry]) => {
-      if (entry.isIntersecting && !isLoadingMore) {
-        handleLoadMore();
+  }, K = ge(() => {
+    I && !h && a && a();
+  }, [I, h, a]);
+  x(() => {
+    const e = H.current;
+    if (!e || !a || !I) return;
+    const r = new IntersectionObserver(
+      ([i]) => {
+        i.isIntersecting && !h && K();
+      },
+      {
+        root: S.current,
+        // Observe relative to the scrollable container
+        threshold: 0.1,
+        rootMargin: "20px"
+        // Start loading 20px before the user even hits the bottom
       }
-    }, {
-      root: menuRef.current,
-      // Observe relative to the scrollable container
-      threshold: 0.1,
-      rootMargin: "20px"
-      // Start loading 20px before the user even hits the bottom
-    });
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, [handleLoadMore, onLoadMore, hasMore, isLoadingMore]);
+    );
+    return r.observe(e), () => r.disconnect();
+  }, [K, a, I, h]);
   const {
-    m50: hoverColor,
-    m100: activeColor,
-    m200: selectedColor,
-    m500: border
-  } = (_a = colors[theme]) != null ? _a : blue;
-  const mouseHighlight = (disabled, index) => () => !disabled && setActiveIndex(index);
-  const getOptionId = (index) => `${listboxId}-opt-${index}`;
-  const renderOption = ({
-    value: val,
-    label,
-    disabled
-  }, index) => /* @__PURE__ */ createElement(MenuItem, { ...{
-    value: val,
-    label,
-    isDisabled: disabled
-  }, onSelect: handleChange, onMouseEnter: mouseHighlight(disabled, index), isSelected: val === value, isHighlighted: index === activeIndex, key: val, id: getOptionId(index), width, ...{
-    selectedColor,
-    hoverColor,
-    activeColor
-  } });
-  const changeFocus = (focus) => () => {
-    setIsFocused(focus);
-  };
-  const handleBlur = (e) => {
-    var _a2;
-    setIsFocused(false);
-    if (!((_a2 = containerRef.current) == null ? void 0 : _a2.contains(e.relatedTarget))) {
-      setOpen(false);
+    m50: ne,
+    m100: ie,
+    m200: se,
+    m500: ce
+  } = (V = ve[J]) != null ? V : $e, ae = (e, r) => () => !e && g(r), U = (e) => `${z}-opt-${e}`, le = ({ value: e, label: r, disabled: i }, p) => /* @__PURE__ */ we(
+    xe,
+    {
+      value: e,
+      label: r,
+      isDisabled: i,
+      onSelect: T,
+      onMouseEnter: ae(i, p),
+      isSelected: e === s,
+      isHighlighted: p === l,
+      key: e,
+      id: U(p),
+      width: v,
+      selectedColor: se,
+      hoverColor: ne,
+      activeColor: ie
     }
-  };
-  const handleSearch = (e) => {
-    setSearchQuery(e.target.value);
-  };
-  const onSearchClick = (e) => {
+  ), de = (e) => () => {
+    B(e);
+  }, me = (e) => {
+    var r;
+    B(!1), (r = w.current) != null && r.contains(e.relatedTarget) || b(!1);
+  }, pe = (e) => {
+    j(e.target.value);
+  }, fe = (e) => {
     e.stopPropagation();
   };
-  return /* @__PURE__ */ jsxs(DropdownWrapper, { ref: containerRef, $width: width, ...rest, tabIndex: isDisabled || isLoading ? -1 : 0, onKeyDown: handleKeyDown, $isLoading: isLoading, $isDisabled: isDisabled, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-disabled": isDisabled || void 0, "aria-activedescendant": activeIndex !== -1 ? getOptionId(activeIndex) : void 0, onFocus: changeFocus(true), onBlur: handleBlur, children: [
-    /* @__PURE__ */ jsxs(Box, { $width: width, onClick: toggle, $isOpen: isOpen, $border: border, $isFocused: isFocused && !isOpen, children: [
-      /* @__PURE__ */ jsx(PWrapper, { $width: width, color: !!value ? grey.m700 : grey.m500, size: "1.92rem", children: value ? (_b = options.find(({
-        value: opt
-      }) => value === opt)) == null ? void 0 : _b.label : placeholder }),
-      /* @__PURE__ */ jsx(ChevronDownWrapper, { color: grey.m500, size: 22, $isOpen: isOpen, "aria-hidden": true })
-    ] }),
-    /* @__PURE__ */ jsxs(OptionWrapper, { $isOpen: isOpen, $width: width, $height: menuHeight, $top: position === "top", children: [
-      searchable && /* @__PURE__ */ jsxs(SearchContainer, { onClick: onSearchClick, children: [
-        /* @__PURE__ */ jsx(SearchIcon, { size: 20, color: grey.m600, "aria-hidden": true }),
-        /* @__PURE__ */ jsx(SearchInput, { ref: searchInputRef, value: searchQuery, onChange: handleSearch, placeholder: searchPh, "aria-label": searchPh, "aria-controls": listboxId, "aria-autocomplete": "list", "aria-expanded": isOpen, role: "combobox", tabIndex: isOpen ? 0 : -1 })
-      ] }),
-      /* @__PURE__ */ jsxs(OptionsList, { ref: menuRef, role: "listbox", id: listboxId, tabIndex: -1, children: [
-        filteredOptions.map(renderOption),
-        onLoadMore && /* @__PURE__ */ jsx(LoadMoreSentinel, { ref: sentinelRef, children: isLoadingMore && /* @__PURE__ */ jsx(Spinner, { size: "small", color: loaderColor }) })
-      ] })
-    ] }),
-    isLoading && /* @__PURE__ */ jsx(SpinnerWrapper, { children: /* @__PURE__ */ jsx(Spinner, { size: "small", color: loaderColor }) })
-  ] });
+  return /* @__PURE__ */ E(
+    Oe,
+    {
+      ref: w,
+      $width: v,
+      ...X,
+      tabIndex: y || $ ? -1 : 0,
+      onKeyDown: oe,
+      $isLoading: $,
+      $isDisabled: y,
+      role: "combobox",
+      "aria-expanded": n,
+      "aria-haspopup": "listbox",
+      "aria-controls": z,
+      "aria-disabled": y || void 0,
+      "aria-activedescendant": l !== -1 ? U(l) : void 0,
+      onFocus: de(!0),
+      onBlur: me,
+      children: [
+        /* @__PURE__ */ E(
+          De,
+          {
+            $width: v,
+            onClick: ee,
+            $isOpen: n,
+            $border: ce,
+            $isFocused: Y && !n,
+            children: [
+              /* @__PURE__ */ f(Fe, { $width: v, color: s ? m.m700 : m.m500, size: "1.92rem", children: s ? (Q = t.find(({ value: e }) => s === e)) == null ? void 0 : Q.label : G }),
+              /* @__PURE__ */ f(ze, { color: m.m500, size: 22, $isOpen: n, "aria-hidden": !0 })
+            ]
+          }
+        ),
+        /* @__PURE__ */ E(Re, { $isOpen: n, $width: v, $height: R, $top: Z === "top", children: [
+          k && /* @__PURE__ */ E(We, { onClick: fe, children: [
+            /* @__PURE__ */ f(je, { size: 20, color: m.m600, "aria-hidden": !0 }),
+            /* @__PURE__ */ f(
+              Be,
+              {
+                ref: A,
+                value: C,
+                onChange: pe,
+                placeholder: W,
+                "aria-label": W,
+                "aria-controls": z,
+                "aria-autocomplete": "list",
+                "aria-expanded": n,
+                role: "combobox",
+                tabIndex: n ? 0 : -1
+              }
+            )
+          ] }),
+          /* @__PURE__ */ E(Ae, { ref: S, role: "listbox", id: z, tabIndex: -1, children: [
+            d.map(le),
+            a && /* @__PURE__ */ f(He, { ref: H, children: h && /* @__PURE__ */ f(q, { size: "small", color: P }) })
+          ] })
+        ] }),
+        $ && /* @__PURE__ */ f(Pe, { children: /* @__PURE__ */ f(q, { size: "small", color: P }) })
+      ]
+    }
+  );
 };
-Dropdown.propTypes = {
+Ke.propTypes = {
   /** Array of option objects: `{ value, label, disabled? }` */
-  options: /* @__PURE__ */ PropTypes.arrayOf(/* @__PURE__ */ PropTypes.shape({
-    value: PropTypes.any,
-    label: PropTypes.string,
-    disabled: PropTypes.bool
-  })),
+  options: o.arrayOf(
+    o.shape({
+      value: o.any,
+      label: o.string,
+      disabled: o.bool
+    })
+  ),
   /** Currently selected value (controlled) */
-  value: PropTypes.any,
+  value: o.any,
   /** Called with the selected value when an option is picked */
-  onChange: PropTypes.func,
+  onChange: o.func,
   /** CSS width of the dropdown trigger. Defaults to `'32rem'` */
-  width: PropTypes.string,
+  width: o.string,
   /** Maximum CSS height of the dropdown menu. Defaults to `'32rem'` */
-  menuHeight: PropTypes.string,
+  menuHeight: o.string,
   /** Placeholder text shown when no value is selected */
-  placeholder: PropTypes.string,
+  placeholder: o.string,
   /** Color theme key. Defaults to `'blue'` */
-  theme: PropTypes.string,
+  theme: o.string,
   /** Shows a spinner inside the trigger and disables interaction */
-  isLoading: PropTypes.bool,
+  isLoading: o.bool,
   /** Disables the dropdown */
-  isDisabled: PropTypes.bool,
+  isDisabled: o.bool,
   /** Color key for the loading spinner */
-  loaderColor: PropTypes.string,
+  loaderColor: o.string,
   /** Adds a search input inside the dropdown menu */
-  searchable: PropTypes.bool,
+  searchable: o.bool,
   /** Placeholder text for the search input. Defaults to `'Search...'` */
-  searchPh: PropTypes.string,
+  searchPh: o.string,
   /** Called when the user scrolls to the bottom of the list (infinite scroll) */
-  onLoadMore: PropTypes.func,
+  onLoadMore: o.func,
   /** Whether more options are available to load */
-  hasMore: PropTypes.bool,
+  hasMore: o.bool,
   /** Shows a spinner at the bottom while loading more options */
-  isLoadingMore: PropTypes.bool
+  isLoadingMore: o.bool
 };
 export {
-  Dropdown as default
+  Ke as default
 };