meticulous-ui 3.7.11 → 3.7.13

package/cjs/components/Dropdown/Dropdown.cjs

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

package/cjs/components/Dropdown/constants.cjs

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const grey = require("../../colors/grey.cjs");
-const DEFAULT_BORDER = grey.default.m500;
-exports.DEFAULT_BORDER = DEFAULT_BORDER;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../colors/grey.cjs"),t=e.default.m500;exports.DEFAULT_BORDER=t;

package/cjs/components/Dropdown/index.cjs

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Dropdown = require("./Dropdown.cjs");
-exports.default = Dropdown.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Dropdown.cjs");exports.default=e.default;

package/cjs/components/Glass/Glass.cjs

@@ -1,15 +1,7 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const styled = require("styled-components");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const GlassWrapper = styled__default.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),o=require("styled-components"),i=r=>r&&r.__esModule?r:{default:r},n=i(o),s=n.default.div`
   width: 100%;
   height: 100%;
-  border-radius: ${({
-  $borderRadius
-}) => $borderRadius};
+  border-radius: ${({$borderRadius:r})=>r};
   position: relative;
   overflow: hidden;
   box-sizing: border-box;
@@ -74,10 +66,4 @@ const GlassWrapper = styled__default.default.div`
     pointer-events: none;
     transform: translateZ(0);
   }
-`;
-const Glass = ({
-  border = "none",
-  borderRadius = 0,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(GlassWrapper, { $border: border, $borderRadius: borderRadius, ...rest });
-exports.default = Glass;
+`,d=({border:r="none",borderRadius:e=0,...t})=>a.jsx(s,{$border:r,$borderRadius:e,...t});exports.default=d;

package/cjs/components/Glass/index.cjs

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Glass = require("./Glass.cjs");
-exports.default = Glass.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Glass.cjs");exports.default=e.default;

package/cjs/components/Icons/Add.cjs

@@ -1,15 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const Add = ({
-  size = 24,
-  color = "currentColor",
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsxRuntime.jsx("title", {}),
-  /* @__PURE__ */ jsxRuntime.jsx("g", { children: /* @__PURE__ */ jsxRuntime.jsx("g", { "data-name": "add", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("line", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", x1: "12", x2: "12", y1: "19", y2: "5" }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", x1: "5", x2: "19", y1: "12", y2: "12" })
-  ] }) }) })
-] });
-exports.default = Add;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=({size:n=24,color:t="currentColor",...i})=>e.jsxs("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...i,children:[e.jsx("title",{}),e.jsx("g",{children:e.jsx("g",{"data-name":"add",children:e.jsxs("g",{children:[e.jsx("line",{fill:"none",stroke:t,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",x1:"12",x2:"12",y1:"19",y2:"5"}),e.jsx("line",{fill:"none",stroke:t,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",x1:"5",x2:"19",y1:"12",y2:"12"})]})})})]});exports.default=o;

package/cjs/components/Icons/AddCircle.cjs

@@ -1,12 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const AddCircle = ({
-  size = 24,
-  color = "currentColor",
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44771 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8Z", fill: color }),
-  /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM3.00683 12C3.00683 16.9668 7.03321 20.9932 12 20.9932C16.9668 20.9932 20.9932 16.9668 20.9932 12C20.9932 7.03321 16.9668 3.00683 12 3.00683C7.03321 3.00683 3.00683 7.03321 3.00683 12Z", fill: color })
-] });
-exports.default = AddCircle;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),i=({size:l=24,color:t="currentColor",...C})=>e.jsxs("svg",{width:l,height:l,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...C,children:[e.jsx("path",{d:"M11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44771 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8Z",fill:t}),e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM3.00683 12C3.00683 16.9668 7.03321 20.9932 12 20.9932C16.9668 20.9932 20.9932 16.9668 20.9932 12C20.9932 7.03321 16.9668 3.00683 12 3.00683C7.03321 3.00683 3.00683 7.03321 3.00683 12Z",fill:t})]});exports.default=i;

package/cjs/components/Icons/AddCircleFilled.cjs

@@ -1,9 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const AddCircleFilled = ({
-  size = 24,
-  color = "currentColor",
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12.75 9C12.75 8.58579 12.4142 8.25 12 8.25C11.5858 8.25 11.25 8.58579 11.25 9L11.25 11.25H9C8.58579 11.25 8.25 11.5858 8.25 12C8.25 12.4142 8.58579 12.75 9 12.75H11.25V15C11.25 15.4142 11.5858 15.75 12 15.75C12.4142 15.75 12.75 15.4142 12.75 15L12.75 12.75H15C15.4142 12.75 15.75 12.4142 15.75 12C15.75 11.5858 15.4142 11.25 15 11.25H12.75V9Z", fill: color }) });
-exports.default = AddCircleFilled;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),d=({size:e=24,color:t="currentColor",...i})=>l.jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...i,children:l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12.75 9C12.75 8.58579 12.4142 8.25 12 8.25C11.5858 8.25 11.25 8.58579 11.25 9L11.25 11.25H9C8.58579 11.25 8.25 11.5858 8.25 12C8.25 12.4142 8.58579 12.75 9 12.75H11.25V15C11.25 15.4142 11.5858 15.75 12 15.75C12.4142 15.75 12.75 15.4142 12.75 15L12.75 12.75H15C15.4142 12.75 15.75 12.4142 15.75 12C15.75 11.5858 15.4142 11.25 15 11.25H12.75V9Z",fill:t})});exports.default=d;

package/cjs/components/Icons/ArrowDown.cjs

@@ -1,9 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const ArrowDown = ({
-  size = 24,
-  color = "currentColor",
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 3C12.5523 3 13 3.44772 13 4V17.5858L18.2929 12.2929C18.6834 11.9024 19.3166 11.9024 19.7071 12.2929C20.0976 12.6834 20.0976 13.3166 19.7071 13.7071L12.7071 20.7071C12.3166 21.0976 11.6834 21.0976 11.2929 20.7071L4.29289 13.7071C3.90237 13.3166 3.90237 12.6834 4.29289 12.2929C4.68342 11.9024 5.31658 11.9024 5.70711 12.2929L11 17.5858V4C11 3.44772 11.4477 3 12 3Z", fill: color }) });
-exports.default = ArrowDown;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),r=({size:e=24,color:t="currentColor",...o})=>l.jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...o,children:l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 3C12.5523 3 13 3.44772 13 4V17.5858L18.2929 12.2929C18.6834 11.9024 19.3166 11.9024 19.7071 12.2929C20.0976 12.6834 20.0976 13.3166 19.7071 13.7071L12.7071 20.7071C12.3166 21.0976 11.6834 21.0976 11.2929 20.7071L4.29289 13.7071C3.90237 13.3166 3.90237 12.6834 4.29289 12.2929C4.68342 11.9024 5.31658 11.9024 5.70711 12.2929L11 17.5858V4C11 3.44772 11.4477 3 12 3Z",fill:t})});exports.default=r;

package/cjs/components/Icons/ArrowLeft.cjs

@@ -1,9 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const ArrowLeft = ({
-  size = 24,
-  color = "currentColor",
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12H19M5 12L11 6M5 12L11 18", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
-exports.default = ArrowLeft;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=({size:e=24,color:o="currentColor",...r})=>t.jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...r,children:t.jsx("path",{d:"M5 12H19M5 12L11 6M5 12L11 18",stroke:o,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})});exports.default=n;

package/cjs/components/Icons/ArrowRight.cjs

@@ -1,9 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const ArrowRight = ({
-  size = 24,
-  color = "currentColor",
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12H19M19 12L13 6M19 12L13 18", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
-exports.default = ArrowRight;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),i=({size:e=24,color:o="currentColor",...r})=>t.jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...r,children:t.jsx("path",{d:"M5 12H19M19 12L13 6M19 12L13 18",stroke:o,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})});exports.default=i;

package/cjs/components/Icons/ArrowUp.cjs

@@ -1,9 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const ArrowUp = ({
-  size = 24,
-  color = "currentColor",
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 3C12.2652 3 12.5196 3.10536 12.7071 3.29289L19.7071 10.2929C20.0976 10.6834 20.0976 11.3166 19.7071 11.7071C19.3166 12.0976 18.6834 12.0976 18.2929 11.7071L13 6.41421V20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20V6.41421L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071C3.90237 11.3166 3.90237 10.6834 4.29289 10.2929L11.2929 3.29289C11.4804 3.10536 11.7348 3 12 3Z", fill: color }) });
-exports.default = ArrowUp;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),r=({size:e=24,color:t="currentColor",...o})=>l.jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...o,children:l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 3C12.2652 3 12.5196 3.10536 12.7071 3.29289L19.7071 10.2929C20.0976 10.6834 20.0976 11.3166 19.7071 11.7071C19.3166 12.0976 18.6834 12.0976 18.2929 11.7071L13 6.41421V20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20V6.41421L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071C3.90237 11.3166 3.90237 10.6834 4.29289 10.2929L11.2929 3.29289C11.4804 3.10536 11.7348 3 12 3Z",fill:t})});exports.default=r;