meticulous-ui 3.7.11 → 3.7.13

package/cjs/components/Selectbox/Selectbox.cjs

@@ -1,433 +1,126 @@
-"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 colorMap = require("../../colors/colorMap.cjs");
-const blue = require("../../colors/blue.cjs");
-const Checkbox = require("../Input/Checkbox/Checkbox.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 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 DEFAULT_BORDER = grey.default.m500;
-const rotate = /*@__PURE__*/styled.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),n=require("react"),ue=require("prop-types"),u=require("../../colors/grey.cjs"),fe=require("../../colors/colorMap.cjs"),pe=require("../../colors/blue.cjs"),me=require("../Input/Checkbox/Checkbox.cjs"),V=require("../Spinner/Spinner.cjs"),m=require("styled-components"),he=require("../Typography/P/P.cjs"),be=require("../Icons/ChevronDown.cjs"),ge=require("../Icons/Search.cjs"),K=require("../../colors/white.cjs"),Q=t=>t&&t.__esModule?t:{default:t},o=Q(ue),l=Q(m),xe=u.default.m500,$e=m.keyframes`
   from { transform: rotate(0deg); }
   to { transform: rotate(180deg); }
-`;
-const reverse = /*@__PURE__*/styled.keyframes`
+`,we=m.keyframes`
   from { transform: rotate(180deg); }
   to { transform: rotate(0deg); }
-`;
-const SelectBoxWrapper = styled__default.default.div`
-  max-width: ${({
-  $width
-}) => $width};
+`,ve=l.default.div`
+  max-width: ${({$width:t})=>t};
   position: relative;
   outline: none;
 
-  ${({
-  $isDisabled
-}) => $isDisabled && /*@__PURE__*/styled.css`
+  ${({$isDisabled:t})=>t&&m.css`
       pointer-events: none;
       opacity: 0.7;
     `}
 
-  ${({
-  $isLoading
-}) => $isLoading && /*@__PURE__*/styled.css`
+  ${({$isLoading:t})=>t&&m.css`
       pointer-events: none;
       opacity: 0.7;
     `}
-`;
-const Box = styled__default.default.div`
+`,ye=l.default.div`
   height: 3.2rem;
-  width: ${({
-  $width
-}) => $width};
+  width: ${({$width:t})=>t};
   border-radius: 0.96rem;
   outline: none;
-  border: ${({
-  $isOpen,
-  $isFocused,
-  $border
-}) => $isOpen || $isFocused ? `2px solid ${$border}` : `1px solid ${DEFAULT_BORDER}`};
+  border: ${({$isOpen:t,$isFocused:f,$border:c})=>t||f?`2px solid ${c}`:`1px solid ${xe}`};
   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=l.default(he.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);
+`,Se=l.default(be.default)`
+  animation: ${({$isOpen:t})=>t?$e:we} 0.15s linear;
+  transform: rotate(${({$isOpen:t})=>t?180:0}deg);
+`,Ce=l.default.div`
+  border: 1px solid ${u.default.m700};
+  width: calc(${({$width:t})=>t} + 1.6rem);
   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;
 
-  ${({
-  $isOpen
-}) => $isOpen && /*@__PURE__*/styled.css`
-      max-height: ${({
-  $height
-}) => $height};
+  ${({$isOpen:t})=>t&&m.css`
+      max-height: ${({$height:f})=>f};
       opacity: 1;
     `};
 
-  ${({
-  $top
-}) => $top ? /*@__PURE__*/styled.css`
+  ${({$top:t})=>t?m.css`
           bottom: 100%;
           flex-direction: column-reverse;
           border-top-right-radius: 0.96rem;
           border-top-left-radius: 0.96rem;
           margin-bottom: 0.16rem;
-        ` : /*@__PURE__*/styled.css`
+        `:m.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`
+`,Ie=l.default.div`
   overflow-y: auto;
   flex: 1;
-`;
-const CheckboxItem = styled__default.default.div`
-  width: ${({
-  $width
-}) => $width};
+`,je=l.default.div`
+  width: ${({$width:t})=>t};
   box-sizing: border-box;
-  background-color: ${({
-  $isHighlighted,
-  $hoverColor
-}) => $isHighlighted ? $hoverColor : "transparent"};
-  cursor: ${({
-  $isDisabled
-}) => $isDisabled ? "not-allowed" : "pointer"};
+  background-color: ${({$isHighlighted:t,$hoverColor:f})=>t?f:"transparent"};
+  cursor: ${({$isDisabled:t})=>t?"not-allowed":"pointer"};
   padding: 0.96rem 1.6rem 1.28rem;
   margin-top: 0.16rem;
   display: flex;
   align-items: center;
   gap: 0.96rem;
-  pointer-events: ${({
-  $isDisabled
-}) => $isDisabled ? "none" : "auto"};
+  pointer-events: ${({$isDisabled:t})=>t?"none":"auto"};
 
   &:active {
-    background-color: ${({
-  $activeColor
-}) => $activeColor};
+    background-color: ${({$activeColor:t})=>t};
   }
-`;
-const SearchContainer = styled__default.default.div`
+`,Ee=l.default.div`
   position: relative;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid ${grey.default.m300};
-  background: ${white.default};
+  border-bottom: 1px solid ${u.default.m300};
+  background: ${K.default};
 
   &:focus-within {
-    border-bottom-color: ${grey.default.m500};
+    border-bottom-color: ${u.default.m500};
   }
-`;
-const SearchInput = styled__default.default.input`
+`,Oe=l.default.input`
   width: 100%;
   box-sizing: border-box;
   border: none;
   padding: 0.8rem 1.2rem 0.8rem 0;
   font-size: 1.92rem;
-  color: ${grey.default.m700};
+  color: ${u.default.m700};
   background: transparent;
   outline: none;
 
   &::placeholder {
-    color: ${grey.default.m400};
+    color: ${u.default.m400};
   }
-`;
-const SearchIcon = styled__default.default(Search.default)`
+`,qe=l.default(ge.default)`
   margin: 0 1.28rem;
-`;
-const SpinnerWrapper = styled__default.default.div`
+`,Re=l.default.div`
   position: absolute;
   top: 1.28rem;
   right: 1.92rem;
-`;
-const LoadMoreSentinel = styled__default.default.div`
+`,De=l.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 Selectbox = ({
-  options,
-  onChange,
-  value = [],
-  width = "32rem",
-  menuHeight = "32rem",
-  placeholder,
-  theme = "blue",
-  isDisabled,
-  isLoading,
-  searchable = false,
-  searchPh = "Search...",
-  onLoadMore,
-  hasMore = false,
-  isLoadingMore = false,
-  loaderColor,
-  ...rest
-}) => {
-  var _a;
-  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 triggerId = react.useId();
-  const containerRef = react.useRef(null);
-  const menuRef = react.useRef(null);
-  const searchInputRef = react.useRef(null);
-  const sentinelRef = react.useRef(null);
-  const toggle = () => !isDisabled && !isLoading && setOpen((prev) => !prev);
-  const handleToggleOption = (val) => {
-    const next = value.includes(val) ? value.filter((v) => v !== val) : [...value, val];
-    onChange(next);
-  };
-  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 firstEnabled = filteredOptions.findIndex((opt) => !opt.disabled);
-      setActiveIndex(firstEnabled);
-    } else {
-      setSearchQuery("");
-      setActiveIndex(-1);
-    }
-  }, [isOpen]);
-  react.useEffect(() => {
-    if (isOpen && activeIndex !== -1 && menuRef.current) {
-      const el = menuRef.current.children[activeIndex];
-      if (el) el.scrollIntoView({
-        block: "nearest",
-        behavior: "auto"
-      });
-    }
-  }, [activeIndex, isOpen]);
-  react.useEffect(() => {
-    if (isOpen && searchable && searchInputRef.current) {
-      searchInputRef.current.focus();
-    }
-  }, [isOpen, searchable]);
-  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 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,
-      threshold: 0.1,
-      rootMargin: "20px"
-    });
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, [handleLoadMore, onLoadMore, hasMore, isLoadingMore]);
-  const handleKeyDown = (e) => {
-    if (isDisabled || isLoading) 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(getPrevEnabledIndex(activeIndex));
-        break;
-      }
-      case "Enter":
-      case " ":
-        e.preventDefault();
-        const opt = filteredOptions[activeIndex];
-        if (opt && !opt.disabled) handleToggleOption(opt.value);
-        break;
-      case "Escape":
-        setOpen(false);
-        break;
-    }
-  };
-  const {
-    m50: hoverColor,
-    m100: activeColor,
-    m500: border,
-    m800: cbOuterShade
-  } = (_a = colorMap.default[theme]) != null ? _a : blue.blue;
-  const mouseHighlight = (disabled, index) => () => !disabled && setActiveIndex(index);
-  const getOptionId = (index) => `${listboxId}-opt-${index}`;
-  const displayLabel = value.length === 0 ? placeholder : `${value.length} selected`;
-  const renderOption = ({
-    value: val,
-    label,
-    disabled
-  }, index) => {
-    const isChecked = value.includes(val);
-    return /* @__PURE__ */ jsxRuntime.jsx(CheckboxItem, { id: getOptionId(index), role: "option", "aria-selected": isChecked, "aria-disabled": disabled || void 0, $width: `calc(${width} + 1.6rem)`, $isHighlighted: index === activeIndex, $isDisabled: disabled, $hoverColor: hoverColor, $activeColor: activeColor, onClick: () => handleToggleOption(val), onMouseEnter: mouseHighlight(disabled, index), title: label, children: /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox.default, { value: isChecked, onChange: () => handleToggleOption(val), label, disabled, innerShade: border, outerShade: cbOuterShade, tabIndex: -1 }) }) }, val);
-  };
-  const handleBlur = (e) => {
-    var _a2;
-    if (!((_a2 = containerRef.current) == null ? void 0 : _a2.contains(e.relatedTarget))) {
-      setIsFocused(false);
-      setOpen(false);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(SelectBoxWrapper, { ref: containerRef, $width: width, $isDisabled: isDisabled, $isLoading: isLoading, onKeyDown: handleKeyDown, onBlur: handleBlur, onFocus: () => setIsFocused(true), ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Box, { id: triggerId, role: "button", $width: width, onClick: toggle, $isOpen: isOpen, $border: border, $isFocused: isFocused && !isOpen, tabIndex: isDisabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-disabled": isDisabled || void 0, "aria-activedescendant": activeIndex !== -1 ? getOptionId(activeIndex) : void 0, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(PWrapper, { $width: width, color: value.length > 0 ? grey.default.m700 : grey.default.m500, size: "1.92rem", children: displayLabel }),
-      /* @__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: (e) => e.stopPropagation(), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: 20, color: grey.default.m600, "aria-hidden": true }),
-        /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { ref: searchInputRef, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), 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, "aria-multiselectable": true, "aria-labelledby": triggerId, 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 }) })
-  ] });
-};
-Selectbox.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
-  })),
-  /** Array of currently selected values (controlled multi-select). Defaults to `[]` */
-  value: /* @__PURE__ */ PropTypes__default.default.arrayOf(PropTypes__default.default.any),
-  /** Called with the updated array of selected values on each change */
-  onChange: PropTypes__default.default.func,
-  /** CSS width of the selectbox 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 nothing is selected */
-  placeholder: PropTypes__default.default.string,
-  /** Color theme key. Defaults to `'blue'` */
-  theme: PropTypes__default.default.string,
-  /** Disables the selectbox */
-  isDisabled: PropTypes__default.default.bool,
-  /** Shows a spinner inside the trigger and disables interaction */
-  isLoading: 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 = Selectbox;
+`,ze=t=>{if(typeof t!="string")return t;if(t.endsWith("px"))return parseFloat(t);if(t.endsWith("rem")){const f=parseFloat(t),c=parseFloat(getComputedStyle(document.documentElement).fontSize);return f*c}return parseFloat(t)},N=({options:t,onChange:f,value:c=[],width:$="32rem",menuHeight:O="32rem",placeholder:G,theme:J="blue",isDisabled:w,isLoading:I,searchable:v=!1,searchPh:z="Search...",onLoadMore:p,hasMore:y=!1,isLoadingMore:h=!1,loaderColor:F,...X})=>{var U;const[s,k]=n.useState(!1),[Y,P]=n.useState(!1),[Z,L]=n.useState("bottom"),[j,_]=n.useState(""),[d,S]=n.useState(-1),E=n.useId(),B=n.useId(),b=n.useRef(null),C=n.useRef(null),q=n.useRef(null),T=n.useRef(null),M=()=>!w&&!I&&k(e=>!e),R=e=>{const r=c.includes(e)?c.filter(a=>a!==e):[...c,e];f(r)},g=n.useMemo(()=>{if(!v||!j.trim())return t;const e=j.toLowerCase();return t.filter(({label:r})=>r.toLowerCase().includes(e))},[t,j,v]);n.useEffect(()=>{if(s){const e=g.findIndex(r=>!r.disabled);S(e)}else _(""),S(-1)},[s]),n.useEffect(()=>{if(s&&d!==-1&&C.current){const e=C.current.children[d];e&&e.scrollIntoView({block:"nearest",behavior:"auto"})}},[d,s]),n.useEffect(()=>{s&&v&&q.current&&q.current.focus()},[s,v]),n.useEffect(()=>{const e=r=>{b.current&&!b.current.contains(r.target)&&k(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]),n.useLayoutEffect(()=>{if(s&&C.current&&b.current){const e=b.current.getBoundingClientRect(),r=window.innerHeight,a=ze(O),x=r-e.bottom;L(x<a+8&&e.top>x?"top":"bottom")}},[s,O]);const ee=e=>{let r=e+1;for(;r<g.length;){if(!g[r].disabled)return r;r++}return e},te=e=>{let r=e-1;for(;r>=0;){if(!g[r].disabled)return r;r--}return e},W=n.useCallback(()=>{y&&!h&&p&&p()},[y,h,p]);n.useEffect(()=>{const e=T.current;if(!e||!p||!y)return;const r=new IntersectionObserver(([a])=>{a.isIntersecting&&!h&&W()},{root:C.current,threshold:.1,rootMargin:"20px"});return r.observe(e),()=>r.disconnect()},[W,p,y,h]);const re=e=>{if(!(w||I)){if(!s){(e.key===" "||e.key==="Enter"||e.key==="ArrowDown"||e.key==="ArrowUp")&&(e.preventDefault(),k(!0));return}switch(e.key){case"ArrowDown":{e.preventDefault();const a=ee(d);a===d&&y&&!h&&(p==null||p()),S(a);break}case"ArrowUp":{e.preventDefault(),S(te(d));break}case"Enter":case" ":e.preventDefault();const r=g[d];r&&!r.disabled&&R(r.value);break;case"Escape":k(!1);break}}},{m50:oe,m100:ne,m500:A,m800:se}=(U=fe.default[J])!=null?U:pe.blue,ie=(e,r)=>()=>!e&&S(r),H=e=>`${E}-opt-${e}`,ae=c.length===0?G:`${c.length} selected`,le=({value:e,label:r,disabled:a},x)=>{const D=c.includes(e);return i.jsx(je,{id:H(x),role:"option","aria-selected":D,"aria-disabled":a||void 0,$width:`calc(${$} + 1.6rem)`,$isHighlighted:x===d,$isDisabled:a,$hoverColor:oe,$activeColor:ne,onClick:()=>R(e),onMouseEnter:ie(a,x),title:r,children:i.jsx("div",{onClick:de=>de.stopPropagation(),children:i.jsx(me.default,{value:D,onChange:()=>R(e),label:r,disabled:a,innerShade:A,outerShade:se,tabIndex:-1})})},e)},ce=e=>{var r;(r=b.current)!=null&&r.contains(e.relatedTarget)||(P(!1),k(!1))};return i.jsxs(ve,{ref:b,$width:$,$isDisabled:w,$isLoading:I,onKeyDown:re,onBlur:ce,onFocus:()=>P(!0),...X,children:[i.jsxs(ye,{id:B,role:"button",$width:$,onClick:M,$isOpen:s,$border:A,$isFocused:Y&&!s,tabIndex:w?-1:0,"aria-haspopup":"listbox","aria-expanded":s,"aria-controls":E,"aria-disabled":w||void 0,"aria-activedescendant":d!==-1?H(d):void 0,children:[i.jsx(ke,{$width:$,color:c.length>0?u.default.m700:u.default.m500,size:"1.92rem",children:ae}),i.jsx(Se,{color:u.default.m500,size:22,$isOpen:s,"aria-hidden":!0})]}),i.jsxs(Ce,{$isOpen:s,$width:$,$height:O,$top:Z==="top",children:[v&&i.jsxs(Ee,{onClick:e=>e.stopPropagation(),children:[i.jsx(qe,{size:20,color:u.default.m600,"aria-hidden":!0}),i.jsx(Oe,{ref:q,value:j,onChange:e=>_(e.target.value),placeholder:z,"aria-label":z,"aria-controls":E,"aria-autocomplete":"list","aria-expanded":s,role:"combobox",tabIndex:s?0:-1})]}),i.jsxs(Ie,{ref:C,role:"listbox",id:E,tabIndex:-1,"aria-multiselectable":!0,"aria-labelledby":B,children:[g.map(le),p&&i.jsx(De,{ref:T,children:h&&i.jsx(V.default,{size:"small",color:F})})]})]}),I&&i.jsx(Re,{children:i.jsx(V.default,{size:"small",color:F})})]})};N.propTypes={options:o.default.arrayOf(o.default.shape({value:o.default.any,label:o.default.string,disabled:o.default.bool})),value:o.default.arrayOf(o.default.any),onChange:o.default.func,width:o.default.string,menuHeight:o.default.string,placeholder:o.default.string,theme:o.default.string,isDisabled:o.default.bool,isLoading:o.default.bool,loaderColor:o.default.string,searchable:o.default.bool,searchPh:o.default.string,onLoadMore:o.default.func,hasMore:o.default.bool,isLoadingMore:o.default.bool};exports.default=N;

package/cjs/components/Selectbox/index.cjs

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

package/cjs/components/Shimmer/Shimmer.cjs

@@ -1,29 +1,13 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const PropTypes = require("prop-types");
-const styled = require("styled-components");
-const grey = require("../../colors/grey.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const PropTypes__default = /* @__PURE__ */ _interopDefault(PropTypes);
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const shimmerSweep = /*@__PURE__*/styled.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),m=require("prop-types"),n=require("styled-components"),o=require("../../colors/grey.cjs"),i=e=>e&&e.__esModule?e:{default:e},t=i(m),p=i(n),c=n.keyframes`
   from { transform: translateX(-100%); }
   to   { transform: translateX(100%); }
-`;
-const ShimmerWrapper = styled__default.default.div`
+`,g=p.default.div`
   position: relative;
   overflow: hidden;
-  background-color: ${grey.default.m300};
-  border-radius: ${({
-  $borderRadius
-}) => $borderRadius};
-  width: ${({
-  $width
-}) => $width};
-  height: ${({
-  $height
-}) => $height};
+  background-color: ${o.default.m300};
+  border-radius: ${({$borderRadius:e})=>e};
+  width: ${({$width:e})=>e};
+  height: ${({$height:e})=>e};
 
   &:after {
     content: '';
@@ -32,33 +16,9 @@ const ShimmerWrapper = styled__default.default.div`
     background: linear-gradient(
       120deg,
       rgba(245, 245, 245, 0) 30%,
-      ${grey.default.m100} 50%,
+      ${o.default.m100} 50%,
       rgba(245, 245, 245, 0) 70%
     );
-    animation: ${shimmerSweep} 1.8s infinite;
+    animation: ${c} 1.8s infinite;
   }
-`;
-const toRem = (val) => {
-  if (val === void 0 || val === null) return void 0;
-  return typeof val === "number" ? `${val}rem` : val;
-};
-const Shimmer = ({
-  width = "100%",
-  height = "100%",
-  borderRadius = "0.64rem",
-  label = "Loading...",
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ShimmerWrapper, { role: "status", "aria-label": label, $width: toRem(width), $height: toRem(height), $borderRadius: toRem(borderRadius), ...rest });
-};
-Shimmer.propTypes = {
-  /** Width of the shimmer block (rem string or number). Defaults to `'100%'` */
-  width: /* @__PURE__ */ PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
-  /** Height of the shimmer block (rem string or number). Defaults to `'100%'` */
-  height: /* @__PURE__ */ PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
-  /** Border-radius of the shimmer block. Defaults to `'0.64rem'` */
-  borderRadius: /* @__PURE__ */ PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
-  /** Accessible label for screen readers. Defaults to `'Loading...'` */
-  label: PropTypes__default.default.string
-};
-exports.default = Shimmer;
+`,r=e=>{if(e!=null)return typeof e=="number"?`${e}rem`:e},a=({width:e="100%",height:u="100%",borderRadius:s="0.64rem",label:d="Loading...",...l})=>f.jsx(g,{role:"status","aria-label":d,$width:r(e),$height:r(u),$borderRadius:r(s),...l});a.propTypes={width:t.default.oneOfType([t.default.string,t.default.number]),height:t.default.oneOfType([t.default.string,t.default.number]),borderRadius:t.default.oneOfType([t.default.string,t.default.number]),label:t.default.string};exports.default=a;

package/cjs/components/Shimmer/index.cjs

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

package/cjs/components/Spinner/Spinner.cjs

@@ -1,21 +1,8 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const colorMap = require("../../colors/colorMap.cjs");
-const green = require("../../colors/green.cjs");
-const white = require("../../colors/white.cjs");
-const grey = require("../../colors/grey.cjs");
-const PropTypes = require("prop-types");
-const styled = require("styled-components");
-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 n=require("react/jsx-runtime"),m=require("../../colors/colorMap.cjs"),g=require("../../colors/green.cjs"),p=require("../../colors/white.cjs"),k=require("../../colors/grey.cjs"),y=require("prop-types"),t=require("styled-components"),a=e=>e&&e.__esModule?e:{default:e},i=a(y),l=a(t),_=t.keyframes`
   100% {
     transform: rotate(360deg);
   }
-`;
-const dash = /*@__PURE__*/styled.keyframes`
+`,S=t.keyframes`
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
@@ -28,45 +15,9 @@ const dash = /*@__PURE__*/styled.keyframes`
     stroke-dasharray: 100, 200;
     stroke-dashoffset: -125;
   }
-`;
-const SpinnerSVG = styled__default.default.svg`
-  animation: ${rotate} 1.4s linear infinite;
+`,q=l.default.svg`
+  animation: ${_} 1.4s linear infinite;
   transform-origin: center;
-`;
-const SpinnerCircle = styled__default.default.circle`
-  animation: ${dash} 1.4s ease-in-out infinite;
-`;
-const SIZE_PARAMS = {
-  small: {
-    strokeWidth: 6,
-    $length: "2.4rem"
-  },
-  medium: {
-    strokeWidth: 5,
-    $length: "3.6rem"
-  },
-  large: {
-    strokeWidth: 5,
-    $length: "5rem"
-  }
-};
-const Spinner = ({
-  color = "green",
-  size = "medium",
-  ...rest
-}) => {
-  var _a, _b;
-  const {
-    strokeWidth,
-    $length
-  } = SIZE_PARAMS[size];
-  const colorValue = [white.default, grey.default.m600].includes(color) ? color : (_b = (_a = colorMap.default[color]) != null ? _a : green.default) == null ? void 0 : _b.m500;
-  return /* @__PURE__ */ jsxRuntime.jsx(SpinnerSVG, { viewBox: "0 0 50 50", width: $length, height: $length, role: "status", "aria-label": "Loading", "aria-live": "polite", ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(SpinnerCircle, { cx: "25", cy: "25", r: "20", fill: "none", stroke: colorValue, strokeWidth, strokeLinecap: "round" }) });
-};
-Spinner.propTypes = {
-  /** Color theme key (e.g. `'green'`, `'blue'`) or a raw color value. Defaults to `'green'` */
-  color: PropTypes__default.default.string,
-  /** Spinner size: `'small'`, `'medium'`, or `'large'`. Defaults to `'medium'` */
-  size: PropTypes__default.default.string
-};
-exports.default = Spinner;
+`,$=l.default.circle`
+  animation: ${S} 1.4s ease-in-out infinite;
+`,v={small:{strokeWidth:6,$length:"2.4rem"},medium:{strokeWidth:5,$length:"3.6rem"},large:{strokeWidth:5,$length:"5rem"}},d=({color:e="green",size:u="medium",...c})=>{var s,o;const{strokeWidth:f,$length:r}=v[u],h=[p.default,k.default.m600].includes(e)?e:(o=(s=m.default[e])!=null?s:g.default)==null?void 0:o.m500;return n.jsx(q,{viewBox:"0 0 50 50",width:r,height:r,role:"status","aria-label":"Loading","aria-live":"polite",...c,children:n.jsx($,{cx:"25",cy:"25",r:"20",fill:"none",stroke:h,strokeWidth:f,strokeLinecap:"round"})})};d.propTypes={color:i.default.string,size:i.default.string};exports.default=d;

package/cjs/components/Spinner/index.cjs

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