meticulous-ui 3.7.1 → 3.7.3

package/cjs/components/Button/Button.cjs

@@ -1 +1,65 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),T=require("react"),_=require("../Spinner/Spinner.cjs"),I=require("../../colors/colorMap.cjs"),y=require("../../colors/blue.cjs"),l=require("./styles.cjs"),L=require("../Ripple/Ripple.cjs"),M=require("../../colors/white.cjs"),P=require("../../colors/grey.cjs"),b=require("./constants.cjs"),R=require("prop-types"),S=t=>t&&t.__esModule?t:{default:t},e=S(R),K=({theme:t,children:i})=>o.jsx(L.default,{rippleColor:t.m100,children:i}),w=t=>{const{children:i,theme:s=y.blue,size:C=b.MEDIUM,width:d,leftIcon:z,rightIcon:B,isLoading:n,textColor:u,onKeyDown:m,...$}=t||{},a=T.useRef(0),x=r=>{if(r.key==="Enter"||r.key===" "){const g=Date.now();if(g-a.current<500){r.preventDefault(),r.stopPropagation();return}a.current=g}m?.(r)},{m400:q,m500:j,m600:v}=I.default[s]??y.blue,{height:c,width:f,font:D}=b.SIZE[C]||{},h=["white","yellow"].includes(s)?P.default.m600:M.default,p=o.jsxs(l.ButtonWrapper,{type:"button",...$,onKeyDown:x,$hoverColor:j,$activeColor:v,$selectedColor:q,$height:c,$width:d||f,disabled:t.disabled,$isLoading:n,children:[o.jsx(l.SpinnerWrapper,{$isLoading:n,children:o.jsx(_.default,{size:"small",color:u||h})}),o.jsx(l.Content,{$isLoading:n,$textColor:u||h,$font:D,children:i})]});return o.jsx(l.ButtonContainer,{$height:c,$width:d||f,disabled:t.disabled,$isLoading:n,children:n?p:o.jsx(K,{theme:s,children:p})})};w.propTypes={children:e.default.node,theme:e.default.string,size:e.default.string,width:e.default.oneOfType([e.default.string,e.default.number]),leftIcon:e.default.elementType,rightIcon:e.default.elementType,isLoading:e.default.bool,textColor:e.default.string,disabled:e.default.bool};exports.default=w;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),I=require("react"),L=require("../Spinner/Spinner.cjs"),M=require("../../colors/colorMap.cjs"),g=require("../../colors/blue.cjs"),P=require("../Ripple/Ripple.cjs"),R=require("../../colors/white.cjs"),w=require("../../colors/grey.cjs"),$=require("./constants.cjs"),S=require("prop-types"),l=require("styled-components"),y=e=>e&&e.__esModule?e:{default:e},o=y(S),d=y(l),z=d.default.button`
+  height: ${({$height:e})=>e}rem;
+  width: ${({$width:e})=>e}rem;
+  border-radius: 0.96rem;
+  border: none;
+  padding: 0.96rem 0.64rem;
+  position: relative;
+  overflow: hidden;
+  background-color: ${({$selectedColor:e,disabled:t})=>t?w.default.m500:e};
+  cursor: ${({disabled:e,$isLoading:t})=>e?"not-allowed":t?"auto":"pointer"};
+
+  ${({$isLoading:e})=>e&&l.css`
+      pointer-events: none;
+    `};
+
+  ${({disabled:e,$isLoading:t})=>!(e||t)&&l.css`
+      &:hover {
+        background-color: ${({$hoverColor:n})=>n};
+      }
+
+      &:active {
+        background-color: ${({$activeColor:n})=>n};
+      }
+    `};
+
+  &:focus-visible {
+    outline: none;
+  }
+`,K=d.default.div`
+  font-size: ${({$font:e})=>e}rem;
+  font-weight: 500;
+  max-width: 100%;
+  overflow: hidden;
+  color: ${({$textColor:e})=>e};
+  opacity: ${({$isLoading:e})=>e?0:1};
+  transition: opacity 0.3s ease;
+`,B=d.default.div`
+  height: ${({$height:e})=>e}rem;
+  width: ${({$width:e})=>e}rem;
+  display: inline-block;
+  position: relative;
+  border-radius: 0.96rem;
+
+  ${({disabled:e,$isLoading:t})=>!(e||t)&&l.css`
+      box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.2);
+      transition:
+        transform 0.2s,
+        box-shadow 0.2s;
+
+      &:hover,
+      &:focus-within {
+        box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.3);
+        transform: translateY(-2px);
+      }
+    `};
+`,E=d.default.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: ${({$isLoading:e})=>e?1:0};
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+`,O=({theme:e,children:t})=>r.jsx(P.default,{rippleColor:e.m100,children:t}),v=e=>{const{children:t,theme:n=g.blue,size:x=$.MEDIUM,width:a,leftIcon:W,rightIcon:U,isLoading:i,textColor:c,onKeyDown:C,...q}=e||{},u=I.useRef(0),j=s=>{if(s.key==="Enter"||s.key===" "){const b=Date.now();if(b-u.current<500){s.preventDefault(),s.stopPropagation();return}u.current=b}C?.(s)},{m400:_,m500:D,m600:T}=M.default[n]??g.blue,{height:f,width:h,font:k}=$.SIZE[x]||{},p=["white","yellow"].includes(n)?w.default.m600:R.default,m=r.jsxs(z,{type:"button",...q,onKeyDown:j,$hoverColor:D,$activeColor:T,$selectedColor:_,$height:f,$width:a||h,disabled:e.disabled,$isLoading:i,children:[r.jsx(E,{$isLoading:i,children:r.jsx(L.default,{size:"small",color:c||p})}),r.jsx(K,{$isLoading:i,$textColor:c||p,$font:k,children:t})]});return r.jsx(B,{$height:f,$width:a||h,disabled:e.disabled,$isLoading:i,children:i?m:r.jsx(O,{theme:n,children:m})})};v.propTypes={children:o.default.node,theme:o.default.string,size:o.default.string,width:o.default.oneOfType([o.default.string,o.default.number]),leftIcon:o.default.elementType,rightIcon:o.default.elementType,isLoading:o.default.bool,textColor:o.default.string,disabled:o.default.bool};exports.default=v;

package/cjs/components/Carousel/Carousel.cjs

@@ -1 +1,148 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),r=require("react"),u=require("./styles.cjs"),ce=require("../Icons/ChevronLeft/ChevronLeft.cjs"),oe=require("../Icons/ChevronRight/ChevronRight.cjs"),T=50,y=2e3,le=()=>t.jsxs("svg",{width:12,height:12,viewBox:"0 0 12 12",fill:"currentColor","aria-hidden":"true",children:[t.jsx("rect",{x:"2",y:"1",width:"3",height:"10",rx:"1"}),t.jsx("rect",{x:"7",y:"1",width:"3",height:"10",rx:"1"})]}),de=()=>t.jsx("svg",{width:12,height:12,viewBox:"0 0 12 12",fill:"currentColor","aria-hidden":"true",children:t.jsx("path",{d:"M2 1.5l9 4.5-9 4.5V1.5z"})}),he=({data:X,renderCarousel:z,visibleSlides:E=1,hasArrow:k=!0,overlayArrows:a=!1,arrowTop:p,areDotsHidden:H=!1,autoSlide:w=!1,autoSlideSec:C=3,loop:d=!1,dragToSlide:m=!1,liveDrag:j=!1,liveDragMobile:R=!0,showProgress:N=!1,defaultIndex:U=0,onSlideChange:K,...A})=>{const[s,M]=r.useState(U),[L,h]=r.useState(!0),[O,D]=r.useState(!1),[f,x]=r.useState(!1),[Y,v]=r.useState(0),[P,g]=r.useState(!1),[I,B]=r.useState(!1),o=r.useRef(null),c=r.useRef(null),l=r.useRef(null),q=r.useRef(null);r.useEffect(()=>{const e=window.matchMedia("(max-width: 1024px)");B(e.matches);const n=ae=>B(ae.matches);return e.addEventListener("change",n),()=>e.removeEventListener("change",n)},[]);const i=X.length-E,b=()=>M(e=>d&&e===0?i:Math.max(e-1,0)),$=()=>M(e=>d&&e>=i?0:Math.min(e+1,i));r.useEffect(()=>{K?.(s)},[s]);const V=()=>{a&&(clearTimeout(l.current),h(!0),l.current=setTimeout(()=>h(!1),y))},G=()=>{x(!0),a&&(clearTimeout(l.current),h(!0))},J=()=>{x(!1),a&&(l.current=setTimeout(()=>h(!1),y))};r.useEffect(()=>{if(a)return l.current=setTimeout(()=>h(!1),y),()=>clearTimeout(l.current)},[a]),r.useEffect(()=>{if(!w||f)return;const e=setInterval(()=>{M(n=>n>=i?0:n+1)},C*1e3);return()=>clearInterval(e)},[w,C,f,i]);const W=e=>d?e:s===0&&e>0||s===i&&e<0?e*.3:e,Q=e=>{o.current=e.touches[0].clientX,R&&I&&g(!0),V()},Z=e=>{!R||!I||o.current===null||v(W(e.touches[0].clientX-o.current))},ee=e=>{if(R&&I&&(g(!1),v(0)),o.current===null)return;const n=o.current-e.changedTouches[0].clientX;n>T?$():n<-T&&b(),o.current=null},te=e=>{m&&(c.current=e.clientX,j&&g(!0))},ne=e=>{!m||!j||c.current===null||v(W(e.clientX-c.current))},re=e=>{if(!m||c.current===null)return;j&&(g(!1),v(0));const n=c.current-e.clientX;n>T?$():n<-T&&b(),c.current=null},se=e=>{e.key==="ArrowLeft"?(e.preventDefault(),b()):e.key==="ArrowRight"&&(e.preventDefault(),$())},_=q.current?.clientWidth??0,ue=_>0?Y/_*100:0,ie=-(s*(100/E))+ue,F=p!==void 0?typeof p=="number"?`${p}px`:p:void 0,S=i+1;return t.jsxs(u.Wrapper,{onClick:V,onMouseEnter:G,onMouseLeave:J,onMouseMove:ne,onMouseUp:re,onKeyDown:se,role:"region","aria-label":"Carousel",...A,children:[t.jsxs(u.SlideArea,{onTouchStart:Q,onTouchMove:Z,onTouchEnd:ee,children:[k&&t.jsx(u.NavButton,{onClick:b,disabled:!d&&s===0,"aria-label":"Previous slide",$direction:"prev",$overlay:a,$visible:L,$arrowTop:F,$viewportFocused:O,children:t.jsx(ce.default,{size:20,"aria-hidden":"true"})}),t.jsx(u.SlideViewport,{ref:q,tabIndex:0,"aria-label":"Carousel slides. Use arrow keys to navigate.",$draggable:m,onFocus:()=>{D(!0),x(!0)},onBlur:()=>{D(!1),x(!1)},onMouseDown:te,onMouseLeave:e=>{e.buttons!==1&&(j&&P&&(g(!1),v(0)),c.current=null)},children:t.jsx(u.SlideTrack,{$translateX:ie,$visibleSlides:E,$dragging:P,children:X.map(z)})}),k&&t.jsx(u.NavButton,{onClick:$,disabled:!d&&s===i,"aria-label":"Next slide",$direction:"next",$overlay:a,$visible:L,$arrowTop:F,$viewportFocused:O,children:t.jsx(oe.default,{size:20,"aria-hidden":"true"})}),w&&t.jsx(u.PauseButton,{onClick:()=>x(e=>!e),"aria-label":f?"Play slideshow":"Pause slideshow",children:f?t.jsx(de,{}):t.jsx(le,{})})]}),t.jsxs("div",{"aria-live":"polite","aria-atomic":"true",style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0,0,0,0)",whiteSpace:"nowrap"},children:["Slide ",s+1," of ",S]}),w&&N&&t.jsx(u.ProgressBar,{$duration:C,$paused:f},s),!H&&t.jsx(u.DotsWrapper,{children:Array.from({length:S}).map((e,n)=>t.jsx(u.Dot,{$active:n===s,onClick:()=>M(n),"aria-label":`Slide ${n+1} of ${S}`,"aria-current":n===s?"true":void 0},n))})]})};exports.default=he;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),s=require("react"),U=require("styled-components"),ce=require("../Icons/ChevronLeft/ChevronLeft.cjs"),de=require("../Icons/ChevronRight/ChevronRight.cjs"),fe=t=>t&&t.__esModule?t:{default:t},i=fe(U),he=i.default.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 12px;
+  outline: none;
+`,pe=i.default.div`
+  position: relative;
+  width: 100%;
+`,xe=i.default.div`
+  overflow: hidden;
+  width: 100%;
+  outline: none;
+  cursor: ${({$draggable:t})=>t?"grab":"default"};
+
+  &:active {
+    cursor: ${({$draggable:t})=>t?"grabbing":"default"};
+  }
+`,be=i.default.div`
+  display: flex;
+  width: 100%;
+  transform: translateX(${({$translateX:t})=>t}%);
+  transition: ${({$dragging:t})=>t?"none":"transform 0.35s ease"};
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  & > * {
+    flex: 0 0 ${({$visibleSlides:t})=>100/t}%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+`,H=i.default.button`
+  position: absolute;
+  top: ${({$arrowTop:t})=>t??"50%"};
+  transform: translateY(-50%);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1px solid #e0e0e0;
+  background: #fff;
+  cursor: pointer;
+  color: #333;
+  transition:
+    background 0.15s,
+    opacity 0.3s;
+  padding: 0;
+
+  ${({$direction:t,$overlay:c})=>t==="prev"?`left: ${c?"12px":"-16px"};`:`right: ${c?"12px":"-16px"};`}
+
+  &:hover:not(:disabled) {
+    background: #f5f5f5;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: none;
+    background: #ffe4ec;
+    border-color: #f9a8c0;
+  }
+
+  ${({$viewportFocused:t})=>t&&`
+    border-color: #bdbdbd;
+  `}
+
+  ${({$overlay:t,$visible:c})=>t&&!c&&`
+    opacity: 0;
+    pointer-events: none;
+  `}
+`,ge=i.default.div`
+  display: flex;
+  gap: 6px;
+  align-items: center;
+`,ve=i.default.button`
+  width: ${({$active:t})=>t?"20px":"8px"};
+  height: 8px;
+  border-radius: 4px;
+  border: none;
+  background: ${({$active:t})=>t?"#333":"#ccc"};
+  cursor: pointer;
+  padding: 0;
+  transition:
+    width 0.2s ease,
+    background 0.2s ease;
+`,me=U.keyframes`
+  from { width: 0%; }
+  to { width: 100%; }
+`,we=i.default.div`
+  width: 100%;
+  height: 3px;
+  background: #e0e0e0;
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    width: 0%;
+    background: #333;
+    animation: ${me} ${({$duration:t})=>t}s linear forwards;
+    animation-play-state: ${({$paused:t})=>t?"paused":"running"};
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+      width: 100%;
+    }
+  }
+`,$e=i.default.button`
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  background: rgba(0, 0, 0, 0.35);
+  color: #fff;
+  cursor: pointer;
+  padding: 0;
+  backdrop-filter: blur(2px);
+  transition: background 0.15s;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.55);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+`,T=50,X=2e3,je=()=>n.jsxs("svg",{width:12,height:12,viewBox:"0 0 12 12",fill:"currentColor","aria-hidden":"true",children:[n.jsx("rect",{x:"2",y:"1",width:"3",height:"10",rx:"1"}),n.jsx("rect",{x:"7",y:"1",width:"3",height:"10",rx:"1"})]}),ke=()=>n.jsx("svg",{width:12,height:12,viewBox:"0 0 12 12",fill:"currentColor","aria-hidden":"true",children:n.jsx("path",{d:"M2 1.5l9 4.5-9 4.5V1.5z"})}),ye=({data:t,renderCarousel:c,visibleSlides:E=1,hasArrow:_=!0,overlayArrows:u=!1,arrowTop:m,areDotsHidden:K=!1,autoSlide:w=!1,autoSlideSec:C=3,loop:h=!1,dragToSlide:$=!1,liveDrag:j=!1,liveDragMobile:R=!0,showProgress:N=!1,defaultIndex:Y=0,onSlideChange:A,...G})=>{const[o,k]=s.useState(Y),[D,p]=s.useState(!0),[L,O]=s.useState(!1),[x,b]=s.useState(!1),[J,g]=s.useState(0),[P,v]=s.useState(!1),[I,q]=s.useState(!1),d=s.useRef(null),l=s.useRef(null),f=s.useRef(null),z=s.useRef(null);s.useEffect(()=>{const e=window.matchMedia("(max-width: 1024px)");q(e.matches);const r=le=>q(le.matches);return e.addEventListener("change",r),()=>e.removeEventListener("change",r)},[]);const a=t.length-E,y=()=>k(e=>h&&e===0?a:Math.max(e-1,0)),M=()=>k(e=>h&&e>=a?0:Math.min(e+1,a));s.useEffect(()=>{A?.(o)},[o]);const B=()=>{u&&(clearTimeout(f.current),p(!0),f.current=setTimeout(()=>p(!1),X))},Q=()=>{b(!0),u&&(clearTimeout(f.current),p(!0))},Z=()=>{b(!1),u&&(f.current=setTimeout(()=>p(!1),X))};s.useEffect(()=>{if(u)return f.current=setTimeout(()=>p(!1),X),()=>clearTimeout(f.current)},[u]),s.useEffect(()=>{if(!w||x)return;const e=setInterval(()=>{k(r=>r>=a?0:r+1)},C*1e3);return()=>clearInterval(e)},[w,C,x,a]);const V=e=>h?e:o===0&&e>0||o===a&&e<0?e*.3:e,ee=e=>{d.current=e.touches[0].clientX,R&&I&&v(!0),B()},te=e=>{!R||!I||d.current===null||g(V(e.touches[0].clientX-d.current))},ne=e=>{if(R&&I&&(v(!1),g(0)),d.current===null)return;const r=d.current-e.changedTouches[0].clientX;r>T?M():r<-T&&y(),d.current=null},re=e=>{$&&(l.current=e.clientX,j&&v(!0))},se=e=>{!$||!j||l.current===null||g(V(e.clientX-l.current))},oe=e=>{if(!$||l.current===null)return;j&&(v(!1),g(0));const r=l.current-e.clientX;r>T?M():r<-T&&y(),l.current=null},ie=e=>{e.key==="ArrowLeft"?(e.preventDefault(),y()):e.key==="ArrowRight"&&(e.preventDefault(),M())},W=z.current?.clientWidth??0,ae=W>0?J/W*100:0,ue=-(o*(100/E))+ae,F=m!==void 0?typeof m=="number"?`${m}px`:m:void 0,S=a+1;return n.jsxs(he,{onClick:B,onMouseEnter:Q,onMouseLeave:Z,onMouseMove:se,onMouseUp:oe,onKeyDown:ie,role:"region","aria-label":"Carousel",...G,children:[n.jsxs(pe,{onTouchStart:ee,onTouchMove:te,onTouchEnd:ne,children:[_&&n.jsx(H,{onClick:y,disabled:!h&&o===0,"aria-label":"Previous slide",$direction:"prev",$overlay:u,$visible:D,$arrowTop:F,$viewportFocused:L,children:n.jsx(ce.default,{size:20,"aria-hidden":"true"})}),n.jsx(xe,{ref:z,tabIndex:0,"aria-label":"Carousel slides. Use arrow keys to navigate.",$draggable:$,onFocus:()=>{O(!0),b(!0)},onBlur:()=>{O(!1),b(!1)},onMouseDown:re,onMouseLeave:e=>{e.buttons!==1&&(j&&P&&(v(!1),g(0)),l.current=null)},children:n.jsx(be,{$translateX:ue,$visibleSlides:E,$dragging:P,children:t.map(c)})}),_&&n.jsx(H,{onClick:M,disabled:!h&&o===a,"aria-label":"Next slide",$direction:"next",$overlay:u,$visible:D,$arrowTop:F,$viewportFocused:L,children:n.jsx(de.default,{size:20,"aria-hidden":"true"})}),w&&n.jsx($e,{onClick:()=>b(e=>!e),"aria-label":x?"Play slideshow":"Pause slideshow",children:x?n.jsx(ke,{}):n.jsx(je,{})})]}),n.jsxs("div",{"aria-live":"polite","aria-atomic":"true",style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0,0,0,0)",whiteSpace:"nowrap"},children:["Slide ",o+1," of ",S]}),w&&N&&n.jsx(we,{$duration:C,$paused:x},o),!K&&n.jsx(ge,{children:Array.from({length:S}).map((e,r)=>n.jsx(ve,{$active:r===o,onClick:()=>k(r),"aria-label":`Slide ${r+1} of ${S}`,"aria-current":r===o?"true":void 0},r))})]})};exports.default=ye;

package/cjs/components/DatePicker/DatePicker.cjs

@@ -1 +1,243 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),c=require("react"),ge=require("prop-types"),Se=require("../../colors/colorMap.cjs"),Ae=require("../../colors/blue.cjs"),l=require("./constants.cjs"),a=require("./utils.cjs"),t=require("./styles.cjs"),Me=h=>h&&h.__esModule?h:{default:h},u=Me(ge),je=()=>n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:n.jsx("polyline",{points:"15 18 9 12 15 6"})}),Ne=()=>n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:n.jsx("polyline",{points:"9 18 15 12 9 6"})}),o={CALENDAR:"calendar",MONTH:"month",YEAR:"year"},Re=new Date,Q=1924,ye=Re.getFullYear()+20,me=Array.from({length:ye-Q+1},(h,x)=>Q+x),U=({theme:h="blue",mode:x=l.MODE.SINGLE,value:X,rangeValue:H,onChange:g,minDate:C,maxDate:O,showModeToggle:Z=!0,showFooter:L=!0,...ee})=>{const G=c.useMemo(()=>Se.default[h]??Ae.blue,[h]),i=G.m500,b=G.m700,j=G.m100,$={$primary:i,$primaryDark:b,$primaryLight:j},B=new Date,[r,ne]=c.useState(x),[T,_]=c.useState(B.getFullYear()),[S,A]=c.useState(B.getMonth()),[p,N]=c.useState(o.CALENDAR),[M,P]=c.useState(X??null),[s,w]=c.useState(H?.[0]??null),[E,R]=c.useState(H?.[1]??null),[y,m]=c.useState(null),[v,k]=c.useState(!1),te=a.buildCalendarGrid(T,S),q=c.useCallback(e=>!!(!e||C&&e<C||O&&e>O),[C,O]),se=()=>{S===0?(A(11),_(e=>e-1)):A(e=>e-1)},le=()=>{S===11?(A(0),_(e=>e+1)):A(e=>e+1)},re=e=>{if(!(!e||q(e))){if(r===l.MODE.SINGLE){P(e),L||g?.(e);return}!v||!s?(w(e),R(null),k(!0)):(R(e),k(!1),L||g?.([e<=s?e:s,e<=s?s:e]))}},Y=e=>{ne(e),P(null),w(null),R(null),k(!1),m(null)};c.useEffect(()=>{Y(x)},[x]);const oe=()=>{if(r===l.MODE.SINGLE)g?.(M);else if(s&&E){const[e,D]=s<=E?[s,E]:[E,s];g?.([e,D])}},ie=()=>{P(null),w(null),R(null),k(!1),m(null),g?.(r===l.MODE.SINGLE?null:[null,null])},f=v&&y?y:E,F=e=>r===l.MODE.RANGE&&a.isRangeStart(e,s,f),W=e=>r===l.MODE.RANGE&&a.isRangeEnd(e,s,f),ce=e=>r===l.MODE.RANGE&&a.isInRange(e,s,f),ae=e=>r===l.MODE.SINGLE?a.isSameDay(e,M):F(e)||W(e),V=r===l.MODE.SINGLE?a.formatDate(M):a.formatDate(s?s<=(f??s)?s:f:null),ue=r===l.MODE.RANGE?a.formatDate(f?f>=s?f:s:null):null,de=r===l.MODE.SINGLE?!M:!s||!E,he=()=>n.jsx(t.PickerGrid,{children:l.MONTHS.map((e,D)=>n.jsx(t.PickerItem,{$active:D===S,...$,onClick:()=>{A(D),N(o.CALENDAR)},children:e.slice(0,3)},e))}),Ee=()=>n.jsx(t.YearScroll,{children:me.map(e=>n.jsx(t.PickerItem,{$active:e===T,...$,onClick:()=>{_(e),N(o.CALENDAR)},children:e},e))}),fe=()=>n.jsxs(t.Grid,{children:[l.DAYS_SHORT.map(e=>n.jsx(t.DayHeader,{children:e},e)),te.map((e,D)=>{const d=!e,z=q(e),I=!d&&ae(e),pe=!d&&a.isToday(e),J=!d&&F(e),K=!d&&W(e),De=!d&&ce(e),xe=!d&&y&&a.isSameDay(e,y);return n.jsx(t.DayCell,{$inRange:De||J||K,$rangeStart:J,$rangeEnd:K,$primaryLight:j,children:n.jsx(t.DayBtn,{$empty:d,$selected:I,$today:pe,$hovered:xe&&!I,disabled:z,...$,onClick:()=>re(e),onMouseEnter:()=>!d&&m(e),onMouseLeave:()=>m(null),"aria-label":e?e.toDateString():void 0,"aria-pressed":I,tabIndex:d||z?-1:0,children:e?.getDate()})},D)})]});return n.jsxs(t.Wrapper,{...ee,children:[n.jsx(t.SelectedDisplay,{children:r===l.MODE.RANGE?n.jsxs(n.Fragment,{children:[n.jsxs(t.DateChip,{$active:v||!s&&!E,$primary:i,children:[n.jsx("span",{children:"From"}),V]}),n.jsx(t.RangeArrow,{children:"→"}),n.jsxs(t.DateChip,{$active:!v&&!!E,$primary:i,children:[n.jsx("span",{children:"To"}),ue]})]}):n.jsxs(t.DateChip,{$active:!!M,$primary:i,style:{flex:"none",width:"100%"},children:[n.jsx("span",{children:"Selected"}),V]})}),Z&&n.jsxs(t.ModeToggle,{children:[n.jsx(t.ModeBtn,{$active:r===l.MODE.SINGLE,$primary:i,onClick:()=>Y(l.MODE.SINGLE),children:"Single"}),n.jsx(t.ModeBtn,{$active:r===l.MODE.RANGE,$primary:i,onClick:()=>Y(l.MODE.RANGE),children:"Range"})]}),n.jsxs(t.Nav,{children:[n.jsx(t.NavBtn,{$primary:i,onClick:se,"aria-label":"Previous month",children:n.jsx(je,{})}),n.jsxs("div",{style:{display:"flex",gap:4},children:[n.jsx(t.MonthLabel,{$primary:i,onClick:()=>N(p===o.MONTH?o.CALENDAR:o.MONTH),children:l.MONTHS[S]}),n.jsx(t.MonthLabel,{$primary:i,onClick:()=>N(p===o.YEAR?o.CALENDAR:o.YEAR),children:T})]}),n.jsx(t.NavBtn,{$primary:i,onClick:le,"aria-label":"Next month",children:n.jsx(Ne,{})})]}),p===o.CALENDAR&&fe(),p===o.MONTH&&he(),p===o.YEAR&&Ee(),L&&p===o.CALENDAR&&n.jsxs(t.Footer,{children:[n.jsx(t.ActionBtn,{$primary:i,$primaryDark:b,$primaryLight:j,onClick:ie,children:"Clear"}),n.jsx(t.ActionBtn,{$isPrimary:!0,$primary:i,$primaryDark:b,$primaryLight:j,disabled:de,onClick:oe,children:"Apply"})]})]})};U.propTypes={theme:u.default.string,mode:u.default.oneOf(["single","range"]),value:u.default.instanceOf(Date),rangeValue:u.default.arrayOf(u.default.instanceOf(Date)),onChange:u.default.func,minDate:u.default.instanceOf(Date),maxDate:u.default.instanceOf(Date),showModeToggle:u.default.bool,showFooter:u.default.bool};exports.default=U;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),d=require("react"),Se=require("prop-types"),Ae=require("../../colors/colorMap.cjs"),Me=require("../../colors/blue.cjs"),s=require("./constants.cjs"),p=require("./utils.cjs"),B=require("styled-components"),se=e=>e&&e.__esModule?e:{default:e},f=se(Se),i=se(B),Re=B.keyframes`
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+`,Ne=i.default.div`
+  display: inline-flex;
+  flex-direction: column;
+  background: #ffffff;
+  border-radius: 20px;
+  box-shadow:
+    0 8px 40px rgba(0, 0, 0, 0.12),
+    0 2px 8px rgba(0, 0, 0, 0.06);
+  padding: 20px;
+  width: 320px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  animation: ${Re} 0.22s ease;
+  user-select: none;
+`,we=i.default.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+`,q=i.default.div`
+  flex: 1;
+  background: ${({$active:e,$primary:o})=>e?o:"#f1f3f4"};
+  color: ${({$active:e})=>e?"#fff":"#5f6368"};
+  border-radius: 12px;
+  padding: 10px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  transition:
+    background 0.18s,
+    color 0.18s;
+
+  span {
+    display: block;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+    opacity: 0.7;
+    margin-bottom: 2px;
+  }
+`,Oe=i.default.div`
+  color: #bdc1c6;
+  font-size: 16px;
+  flex-shrink: 0;
+`,Ce=i.default.div`
+  display: flex;
+  background: #f1f3f4;
+  border-radius: 10px;
+  padding: 3px;
+  margin-bottom: 16px;
+`,Z=i.default.button`
+  flex: 1;
+  border: none;
+  background: ${({$active:e})=>e?"#fff":"transparent"};
+  color: ${({$active:e,$primary:o})=>e?o:"#5f6368"};
+  border-radius: 8px;
+  padding: 6px 0;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s;
+  box-shadow: ${({$active:e})=>e?"0 1px 4px rgba(0,0,0,0.1)":"none"};
+
+  &:focus-visible {
+    outline: 2px solid ${({$primary:e})=>e};
+    outline-offset: 2px;
+  }
+`,Le=i.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+`,ee=i.default.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #5f6368;
+  transition:
+    background 0.15s,
+    color 0.15s;
+
+  &:hover {
+    background: #f1f3f4;
+    color: ${({$primary:e})=>e};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({$primary:e})=>e};
+  }
+`,ne=i.default.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  color: #202124;
+  padding: 4px 8px;
+  border-radius: 8px;
+  transition: background 0.15s;
+
+  &:hover {
+    background: #f1f3f4;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({$primary:e})=>e};
+  }
+`,Ge=i.default.div`
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0;
+`,_e=i.default.div`
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  color: #9aa0a6;
+  padding: 4px 0 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+`,Te=i.default.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 4px 0;
+    background: ${({$inRange:e,$primaryLight:o})=>e?o:"transparent"};
+    border-radius: ${({$rangeStart:e,$rangeEnd:o})=>e?"50% 0 0 50%":o?"0 50% 50% 0":"0"};
+    pointer-events: none;
+  }
+`,Ye=i.default.button`
+  position: relative;
+  z-index: 1;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: ${({$empty:e,disabled:o})=>e||o?"default":"pointer"};
+  background: ${({$selected:e,$hovered:o,$primary:u,$primaryLight:g})=>e?u:o?g:"transparent"};
+  color: ${({$selected:e,$today:o,disabled:u,$primary:g})=>e?"#fff":u?"#dadce0":o?g:"#202124"};
+  outline: ${({$today:e,$selected:o,$primary:u})=>e&&!o?`2px solid ${u}`:"none"};
+  outline-offset: -2px;
+  transition:
+    background 0.12s,
+    color 0.12s;
+  pointer-events: ${({$empty:e,disabled:o})=>e||o?"none":"auto"};
+
+  ${({$empty:e})=>e&&B.css`
+      visibility: hidden;
+    `}
+
+  &:hover {
+    background: ${({$selected:e,$primary:o,$primaryDark:u,$primaryLight:g})=>e?u:g};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({$primary:e})=>e};
+  }
+`,Ie=i.default.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+  padding: 4px 0;
+`,te=i.default.button`
+  border: none;
+  background: ${({$active:e,$primary:o})=>e?o:"transparent"};
+  color: ${({$active:e})=>e?"#fff":"#202124"};
+  border-radius: 10px;
+  padding: 8px 4px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 0.13s,
+    color 0.13s;
+
+  &:hover {
+    background: ${({$active:e,$primaryDark:o})=>e?o:"#f1f3f4"};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({$primary:e})=>e};
+  }
+`,Pe=i.default.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+  max-height: 210px;
+  overflow-y: auto;
+  padding: 4px 0;
+  scrollbar-width: thin;
+`,ze=i.default.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #f1f3f4;
+`,oe=i.default.button`
+  border: none;
+  background: ${({$isPrimary:e,$primary:o})=>e?o:"transparent"};
+  color: ${({$isPrimary:e,$primary:o})=>e?"#fff":o};
+  border-radius: 8px;
+  padding: 7px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.14s,
+    opacity 0.14s;
+
+  &:hover {
+    background: ${({$isPrimary:e,$primaryDark:o,$primaryLight:u})=>e?o:u};
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({$primary:e})=>e};
+  }
+`,He=()=>t.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:t.jsx("polyline",{points:"15 18 9 12 15 6"})}),qe=()=>t.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:t.jsx("polyline",{points:"9 18 15 12 9 6"})}),a={CALENDAR:"calendar",MONTH:"month",YEAR:"year"},Be=new Date,re=1924,Fe=Be.getFullYear()+20,We=Array.from({length:Fe-re+1},(e,o)=>re+o),ie=({theme:e="blue",mode:o=s.MODE.SINGLE,value:u,rangeValue:g,onChange:E,minDate:w,maxDate:O,showModeToggle:le=!0,showFooter:C=!0,...ae})=>{const L=d.useMemo(()=>Ae.default[e]??Me.blue,[e]),c=L.m500,G=L.m700,$=L.m100,_={$primary:c,$primaryDark:G,$primaryLight:$},F=new Date,[l,ce]=d.useState(o),[T,Y]=d.useState(F.getFullYear()),[v,k]=d.useState(F.getMonth()),[m,j]=d.useState(a.CALENDAR),[D,I]=d.useState(u??null),[r,P]=d.useState(g?.[0]??null),[h,S]=d.useState(g?.[1]??null),[A,M]=d.useState(null),[R,N]=d.useState(!1),de=p.buildCalendarGrid(T,v),W=d.useCallback(n=>!!(!n||w&&n<w||O&&n>O),[w,O]),ue=()=>{v===0?(k(11),Y(n=>n-1)):k(n=>n-1)},pe=()=>{v===11?(k(0),Y(n=>n+1)):k(n=>n+1)},fe=n=>{if(!(!n||W(n))){if(l===s.MODE.SINGLE){I(n),C||E?.(n);return}!R||!r?(P(n),S(null),N(!0)):(S(n),N(!1),C||E?.([n<=r?n:r,n<=r?r:n]))}},z=n=>{ce(n),I(null),P(null),S(null),N(!1),M(null)};d.useEffect(()=>{z(o)},[o]);const xe=()=>{if(l===s.MODE.SINGLE)E?.(D);else if(r&&h){const[n,y]=r<=h?[r,h]:[h,r];E?.([n,y])}},ge=()=>{I(null),P(null),S(null),N(!1),M(null),E?.(l===s.MODE.SINGLE?null:[null,null])},b=R&&A?A:h,V=n=>l===s.MODE.RANGE&&p.isRangeStart(n,r,b),U=n=>l===s.MODE.RANGE&&p.isRangeEnd(n,r,b),he=n=>l===s.MODE.RANGE&&p.isInRange(n,r,b),be=n=>l===s.MODE.SINGLE?p.isSameDay(n,D):V(n)||U(n),J=l===s.MODE.SINGLE?p.formatDate(D):p.formatDate(r?r<=(b??r)?r:b:null),me=l===s.MODE.RANGE?p.formatDate(b?b>=r?b:r:null):null,ye=l===s.MODE.SINGLE?!D:!r||!h,Ee=()=>t.jsx(Ie,{children:s.MONTHS.map((n,y)=>t.jsx(te,{$active:y===v,..._,onClick:()=>{k(y),j(a.CALENDAR)},children:n.slice(0,3)},n))}),ve=()=>t.jsx(Pe,{children:We.map(n=>t.jsx(te,{$active:n===T,..._,onClick:()=>{Y(n),j(a.CALENDAR)},children:n},n))}),ke=()=>t.jsxs(Ge,{children:[s.DAYS_SHORT.map(n=>t.jsx(_e,{children:n},n)),de.map((n,y)=>{const x=!n,K=W(n),H=!x&&be(n),De=!x&&p.isToday(n),Q=!x&&V(n),X=!x&&U(n),$e=!x&&he(n),je=!x&&A&&p.isSameDay(n,A);return t.jsx(Te,{$inRange:$e||Q||X,$rangeStart:Q,$rangeEnd:X,$primaryLight:$,children:t.jsx(Ye,{$empty:x,$selected:H,$today:De,$hovered:je&&!H,disabled:K,..._,onClick:()=>fe(n),onMouseEnter:()=>!x&&M(n),onMouseLeave:()=>M(null),"aria-label":n?n.toDateString():void 0,"aria-pressed":H,tabIndex:x||K?-1:0,children:n?.getDate()})},y)})]});return t.jsxs(Ne,{...ae,children:[t.jsx(we,{children:l===s.MODE.RANGE?t.jsxs(t.Fragment,{children:[t.jsxs(q,{$active:R||!r&&!h,$primary:c,children:[t.jsx("span",{children:"From"}),J]}),t.jsx(Oe,{children:"→"}),t.jsxs(q,{$active:!R&&!!h,$primary:c,children:[t.jsx("span",{children:"To"}),me]})]}):t.jsxs(q,{$active:!!D,$primary:c,style:{flex:"none",width:"100%"},children:[t.jsx("span",{children:"Selected"}),J]})}),le&&t.jsxs(Ce,{children:[t.jsx(Z,{$active:l===s.MODE.SINGLE,$primary:c,onClick:()=>z(s.MODE.SINGLE),children:"Single"}),t.jsx(Z,{$active:l===s.MODE.RANGE,$primary:c,onClick:()=>z(s.MODE.RANGE),children:"Range"})]}),t.jsxs(Le,{children:[t.jsx(ee,{$primary:c,onClick:ue,"aria-label":"Previous month",children:t.jsx(He,{})}),t.jsxs("div",{style:{display:"flex",gap:4},children:[t.jsx(ne,{$primary:c,onClick:()=>j(m===a.MONTH?a.CALENDAR:a.MONTH),children:s.MONTHS[v]}),t.jsx(ne,{$primary:c,onClick:()=>j(m===a.YEAR?a.CALENDAR:a.YEAR),children:T})]}),t.jsx(ee,{$primary:c,onClick:pe,"aria-label":"Next month",children:t.jsx(qe,{})})]}),m===a.CALENDAR&&ke(),m===a.MONTH&&Ee(),m===a.YEAR&&ve(),C&&m===a.CALENDAR&&t.jsxs(ze,{children:[t.jsx(oe,{$primary:c,$primaryDark:G,$primaryLight:$,onClick:ge,children:"Clear"}),t.jsx(oe,{$isPrimary:!0,$primary:c,$primaryDark:G,$primaryLight:$,disabled:ye,onClick:xe,children:"Apply"})]})]})};ie.propTypes={theme:f.default.string,mode:f.default.oneOf(["single","range"]),value:f.default.instanceOf(Date),rangeValue:f.default.arrayOf(f.default.instanceOf(Date)),onChange:f.default.func,minDate:f.default.instanceOf(Date),maxDate:f.default.instanceOf(Date),showModeToggle:f.default.bool,showFooter:f.default.bool};exports.default=ie;

package/cjs/components/Dropdown/Dropdown.cjs

@@ -1 +1,120 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),n=require("react"),ce=require("prop-types"),k=require("../../colors/grey.cjs"),ae=require("../MenuItem/MenuItem.cjs"),ie=require("../../colors/colorMap.cjs"),ue=require("../../colors/blue.cjs"),A=require("../Spinner/Spinner.cjs"),a=require("./styles.cjs"),de=o=>o&&o.__esModule?o:{default:o},r=de(ce),fe=o=>{if(typeof o!="string")return o;if(o.endsWith("px"))return parseFloat(o);if(o.endsWith("rem")){const O=parseFloat(o),i=parseFloat(getComputedStyle(document.documentElement).fontSize);return O*i}return parseFloat(o)},B=({options:o,onChange:O,value:i,width:g="32rem",menuHeight:j="32rem",placeholder:T,theme:H="blue",isLoading:w,isDisabled:y,loaderColor:R,searchable:S=!1,onLoadMore:p,hasMore:I=!1,isLoadingMore:h=!1,searchPh:D="Search...",...V})=>{const[s,b]=n.useState(!1),[K,q]=n.useState(!1),[Q,U]=n.useState("bottom"),[E,F]=n.useState(""),[u,m]=n.useState(-1),C=n.useId(),x=n.useRef(null),v=n.useRef(null),$=n.useRef(null),P=n.useRef(null),N=n.useRef(!0),G=()=>!w&&!y&&b(e=>!e),z=e=>{e!==i&&(O(e),b(!1))},d=n.useMemo(()=>{if(!S||!E.trim())return o;const e=E.toLowerCase();return o.filter(({label:t})=>t.toLowerCase().includes(e))},[o,E,S]);n.useEffect(()=>{if(s){const e=d.findIndex(t=>t.value===i);if(e!==-1&&!d[e].disabled)m(e);else{const t=d.findIndex(c=>!c.disabled);m(t)}}else F(""),m(-1)},[s,E,d,i]),n.useEffect(()=>{if(s&&u!==-1&&v.current){const e=v.current.children[u];e&&e.scrollIntoView({block:"nearest",behavior:"auto"})}},[u,s]),n.useEffect(()=>{s&&S&&$.current&&$.current.focus()},[s,S]),n.useEffect(()=>{s||(N.current=!0)},[s]),n.useEffect(()=>{const e=t=>{x.current&&!x.current.contains(t.target)&&b(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]),n.useLayoutEffect(()=>{if(s&&v.current&&x.current){const e=x.current.getBoundingClientRect(),t=window.innerHeight,c=fe(j),f=t-e.bottom;U(f<c+8&&e.top>f?"top":"bottom")}},[s,j]);const J=e=>{let t=e+1;for(;t<d.length;){if(!d[t].disabled)return t;t++}return e},X=e=>{let t=e-1;for(;t>=0;){if(!d[t].disabled)return t;t--}return e},Y=e=>{if(!(w||y)){if(!s){(e.key===" "||e.key==="Enter"||e.key==="ArrowDown"||e.key==="ArrowUp")&&(e.preventDefault(),b(!0));return}switch(e.key){case"ArrowDown":e.preventDefault();const t=J(u);t===u&&I&&!h&&p?.(),m(t);break;case"ArrowUp":e.preventDefault(),m(f=>X(f));break;case"Enter":e.preventDefault();const c=d[u];c&&!c.disabled&&z(c.value);break;case"Escape":b(!1);break}}},W=n.useCallback(()=>{I&&!h&&p&&p()},[I,h,p]);n.useEffect(()=>{const e=P.current;if(!e||!p||!I)return;const t=new IntersectionObserver(([c])=>{c.isIntersecting&&!h&&W()},{root:v.current,threshold:.1,rootMargin:"20px"});return t.observe(e),()=>t.disconnect()},[W,p,I,h]);const{m50:Z,m100:M,m200:L,m500:ee}=ie.default[H]??ue.blue,te=(e,t)=>()=>!e&&m(t),_=e=>`${C}-opt-${e}`,ne=({value:e,label:t,disabled:c},f)=>n.createElement(ae.default,{value:e,label:t,isDisabled:c,onSelect:z,onMouseEnter:te(c,f),isSelected:e===i,isHighlighted:f===u,key:e,id:_(f),width:g,selectedColor:L,hoverColor:Z,activeColor:M}),re=e=>()=>{q(e)},se=e=>{q(!1),x.current?.contains(e.relatedTarget)||b(!1)},oe=e=>{F(e.target.value)},le=e=>{e.stopPropagation()};return l.jsxs(a.DropdownWrapper,{ref:x,$width:g,...V,tabIndex:y||w?-1:0,onKeyDown:Y,$isLoading:w,$isDisabled:y,role:"combobox","aria-expanded":s,"aria-haspopup":"listbox","aria-controls":C,"aria-disabled":y||void 0,"aria-activedescendant":u!==-1?_(u):void 0,onFocus:re(!0),onBlur:se,children:[l.jsxs(a.Box,{$width:g,onClick:G,$isOpen:s,$border:ee,$isFocused:K&&!s,children:[l.jsx(a.PWrapper,{$width:g,color:i?k.default.m700:k.default.m500,size:"1.92rem",children:i?o.find(({value:e})=>i===e)?.label:T}),l.jsx(a.ChevronDownWrapper,{color:k.default.m500,size:22,$isOpen:s,"aria-hidden":!0})]}),l.jsxs(a.OptionWrapper,{$isOpen:s,$width:g,$height:j,$top:Q==="top",children:[S&&l.jsxs(a.SearchContainer,{onClick:le,children:[l.jsx(a.SearchIcon,{size:20,color:k.default.m600,"aria-hidden":!0}),l.jsx(a.SearchInput,{ref:$,value:E,onChange:oe,placeholder:D,"aria-label":D,"aria-controls":C,"aria-autocomplete":"list","aria-expanded":s,role:"combobox",tabIndex:s?0:-1})]}),l.jsxs(a.OptionsList,{ref:v,role:"listbox",id:C,tabIndex:-1,children:[d.map(ne),p&&l.jsx(a.LoadMoreSentinel,{ref:P,children:h&&l.jsx(A.default,{size:"small",color:R})})]})]}),w&&l.jsx(a.SpinnerWrapper,{children:l.jsx(A.default,{size:"small",color:R})})]})};B.propTypes={options:r.default.arrayOf(r.default.shape({value:r.default.any,label:r.default.string,disabled:r.default.bool})),value:r.default.any,onChange:r.default.func,width:r.default.string,menuHeight:r.default.string,placeholder:r.default.string,theme:r.default.string,isLoading:r.default.bool,isDisabled:r.default.bool,loaderColor:r.default.string,searchable:r.default.bool,searchPh:r.default.string,onLoadMore:r.default.func,hasMore:r.default.bool,isLoadingMore:r.default.bool};exports.default=B;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),o=require("react"),de=require("prop-types"),f=require("../../colors/grey.cjs"),ue=require("../MenuItem/MenuItem.cjs"),fe=require("../../colors/colorMap.cjs"),pe=require("../../colors/blue.cjs"),B=require("../Spinner/Spinner.cjs"),m=require("styled-components"),me=require("../Typography/P/P.cjs"),he=require("./constants.cjs"),T=require("../../colors/white.cjs"),be=require("../Icons/ChevronDown/ChevronDown.cjs"),ge=require("../Icons/Search/Search.cjs"),H=t=>t&&t.__esModule?t:{default:t},n=H(de),c=H(m),xe=m.keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(180deg);
+  }
+`,we=m.keyframes`
+  from {
+    transform: rotate(180deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+`,ve=c.default.div`
+  max-width: ${({$width:t})=>t};
+  position: relative;
+  outline: none;
+
+  ${({$isLoading:t})=>t&&m.css`
+      pointer-events: none;
+      opacity: 0.8;
+    `}
+
+  ${({$isDisabled:t})=>t&&m.css`
+      pointer-events: none;
+      opacity: 0.7;
+    `}
+`,ye=c.default.div`
+  height: 3.2rem;
+  width: ${({$width:t})=>t};
+  border-radius: 0.96rem;
+  border: ${({$isOpen:t,$isFocused:h,$border:l})=>t||h?`2px solid ${l}`:`1px solid ${he.DEFAULT_BORDER}`};
+  padding: 0.64rem 0.96rem 0.64rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+`,$e=c.default(me.default)`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: calc(${({$width:t})=>t} - 3.2rem);
+  pointer-events: none;
+`,Se=c.default(be.default)`
+  animation: ${({$isOpen:t})=>t?xe:we} 0.15s linear;
+  transform: rotate(${({$isOpen:t})=>t?180:0}deg);
+`,ke=c.default.div`
+  border: 1px solid ${f.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: ${T.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:t})=>t&&m.css`
+      max-height: ${({$height:h})=>h};
+      opacity: 1;
+    `};
+
+  ${({$top:t})=>t?m.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;
+        `:m.css`
+          top: 100%;
+          border-bottom-right-radius: 0.96rem;
+          border-bottom-left-radius: 0.96rem;
+          margin-top: 0.16rem;
+        `}
+`,Ee=c.default.div`
+  overflow-y: auto;
+  flex: 1;
+`,Ie=c.default.div`
+  position: absolute;
+  top: 1.28rem;
+  right: 1.92rem;
+`,Ce=c.default.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid ${f.default.m300};
+  background: ${T.default};
+
+  &:focus-within {
+    border-bottom-color: ${f.default.m500};
+  }
+`,je=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: ${f.default.m700};
+  background: transparent;
+  outline: none;
+
+  &::placeholder {
+    color: ${f.default.m400};
+  }
+`,Oe=c.default(ge.default)`
+  margin: 0 1.28rem;
+`,qe=c.default.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.6rem 0;
+  min-height: 1.6rem;
+  width: 100%;
+`,Re=t=>{if(typeof t!="string")return t;if(t.endsWith("px"))return parseFloat(t);if(t.endsWith("rem")){const h=parseFloat(t),l=parseFloat(getComputedStyle(document.documentElement).fontSize);return h*l}return parseFloat(t)},K=({options:t,onChange:h,value:l,width:y="32rem",menuHeight:O="32rem",placeholder:U,theme:V="blue",isLoading:$,isDisabled:S,loaderColor:R,searchable:k=!1,onLoadMore:b,hasMore:E=!1,isLoadingMore:g=!1,searchPh:D="Search...",...Q})=>{const[s,x]=o.useState(!1),[N,F]=o.useState(!1),[G,J]=o.useState("bottom"),[I,z]=o.useState(""),[d,w]=o.useState(-1),j=o.useId(),v=o.useRef(null),C=o.useRef(null),q=o.useRef(null),_=o.useRef(null),X=o.useRef(!0),Y=()=>!$&&!S&&x(e=>!e),P=e=>{e!==l&&(h(e),x(!1))},u=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=u.findIndex(r=>r.value===l);if(e!==-1&&!u[e].disabled)w(e);else{const r=u.findIndex(a=>!a.disabled);w(r)}}else z(""),w(-1)},[s,I,u,l]),o.useEffect(()=>{if(s&&d!==-1&&C.current){const e=C.current.children[d];e&&e.scrollIntoView({block:"nearest",behavior:"auto"})}},[d,s]),o.useEffect(()=>{s&&k&&q.current&&q.current.focus()},[s,k]),o.useEffect(()=>{s||(X.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=Re(O),p=r-e.bottom;J(p<a+8&&e.top>p?"top":"bottom")}},[s,O]);const Z=e=>{let r=e+1;for(;r<u.length;){if(!u[r].disabled)return r;r++}return e},M=e=>{let r=e-1;for(;r>=0;){if(!u[r].disabled)return r;r--}return e},L=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=Z(d);r===d&&E&&!g&&b?.(),w(r);break;case"ArrowUp":e.preventDefault(),w(p=>M(p));break;case"Enter":e.preventDefault();const a=u[d];a&&!a.disabled&&P(a.value);break;case"Escape":x(!1);break}}},A=o.useCallback(()=>{E&&!g&&b&&b()},[E,g,b]);o.useEffect(()=>{const e=_.current;if(!e||!b||!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,b,E,g]);const{m50:ee,m100:te,m200:re,m500:oe}=fe.default[V]??pe.blue,ne=(e,r)=>()=>!e&&w(r),W=e=>`${j}-opt-${e}`,se=({value:e,label:r,disabled:a},p)=>o.createElement(ue.default,{value:e,label:r,isDisabled:a,onSelect:P,onMouseEnter:ne(a,p),isSelected:e===l,isHighlighted:p===d,key:e,id:W(p),width:y,selectedColor:re,hoverColor:ee,activeColor:te}),ie=e=>()=>{F(e)},ae=e=>{F(!1),v.current?.contains(e.relatedTarget)||x(!1)},le=e=>{z(e.target.value)},ce=e=>{e.stopPropagation()};return i.jsxs(ve,{ref:v,$width:y,...Q,tabIndex:S||$?-1:0,onKeyDown:L,$isLoading:$,$isDisabled:S,role:"combobox","aria-expanded":s,"aria-haspopup":"listbox","aria-controls":j,"aria-disabled":S||void 0,"aria-activedescendant":d!==-1?W(d):void 0,onFocus:ie(!0),onBlur:ae,children:[i.jsxs(ye,{$width:y,onClick:Y,$isOpen:s,$border:oe,$isFocused:N&&!s,children:[i.jsx($e,{$width:y,color:l?f.default.m700:f.default.m500,size:"1.92rem",children:l?t.find(({value:e})=>l===e)?.label:U}),i.jsx(Se,{color:f.default.m500,size:22,$isOpen:s,"aria-hidden":!0})]}),i.jsxs(ke,{$isOpen:s,$width:y,$height:O,$top:G==="top",children:[k&&i.jsxs(Ce,{onClick:ce,children:[i.jsx(Oe,{size:20,color:f.default.m600,"aria-hidden":!0}),i.jsx(je,{ref:q,value:I,onChange:le,placeholder:D,"aria-label":D,"aria-controls":j,"aria-autocomplete":"list","aria-expanded":s,role:"combobox",tabIndex:s?0:-1})]}),i.jsxs(Ee,{ref:C,role:"listbox",id:j,tabIndex:-1,children:[u.map(se),b&&i.jsx(qe,{ref:_,children:g&&i.jsx(B.default,{size:"small",color:R})})]})]}),$&&i.jsx(Ie,{children:i.jsx(B.default,{size:"small",color:R})})]})};K.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=K;