@telsho/react-google-flight-datepicker 1.1.3 → 1.1.5

package/dist/index.mjs

@@ -1,2 +1,1368 @@
-var kt=Object.defineProperty,Jt=Object.defineProperties;var vt=Object.getOwnPropertyDescriptors;var me=Object.getOwnPropertySymbols;var Pe=Object.prototype.hasOwnProperty,Ke=Object.prototype.propertyIsEnumerable;var Se=(e,t,o)=>t in e?kt(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,O=(e,t)=>{for(var o in t||(t={}))Pe.call(t,o)&&Se(e,o,t[o]);if(me)for(var o of me(t))Ke.call(t,o)&&Se(e,o,t[o]);return e},U=(e,t)=>Jt(e,vt(t));var fe=(e,t)=>{var o={};for(var a in e)Pe.call(e,a)&&t.indexOf(a)<0&&(o[a]=e[a]);if(e!=null&&me)for(var a of me(e))t.indexOf(a)<0&&Ke.call(e,a)&&(o[a]=e[a]);return o};import{useState as _,useRef as ze,useEffect as ie,useLayoutEffect as fo,useCallback as Le}from"react";import W from"dayjs";import yo from"classnames";import Go from"dayjs/plugin/localeData";import wt from"dayjs";function ye(e,t,o){let a=[],n=new Date(e,t,1),d=new Date(e,t+1,0).getDate(),A=1,g=n.getDay()===0?1:7-n.getDay()+1;for(o==="sunday"&&(g=7-n.getDay());A<=d;)a.push({start:A,days:g-A+1}),A=g+1,g+=7,g=A===1&&g===8?1:g,g>d&&(g=d);return{totalWeek:a,totalDay:d}}function Ge(e,t){let o=[...Array(7)].map((a,n)=>wt().day(n).format(t==="dd"?"dd":t==="ddd"?"ddd":"dddd"));if(e==="sunday"){let a=o.pop();a&&o.unshift(a)}return o}function $e(e,t){let o;return function(...n){let l=()=>{o=null,e.apply(this,n)};o&&clearTimeout(o),o=setTimeout(l,t)}}import{createContext as se,useContext as Xe,useState as Nt,useEffect as Wt}from"react";import Je from"dayjs";import{jsx as Ie}from"react/jsx-runtime";var _e=se(null),qe=se(null),et=se(null),tt=se(null),Vt=se(null),v=()=>{let e=Xe(_e);if(!e)throw new Error("useDateState must be used within DatePickerProvider");return e},k=()=>{let e=Xe(qe);if(!e)throw new Error("useDatePickerConfig must be used within DatePickerProvider");return e},ne=()=>{let e=Xe(et);if(!e)throw new Error("useUIState must be used within DatePickerProvider");return e},w=()=>{let e=Xe(tt);if(!e)throw new Error("useDisplayCustomization must be used within DatePickerProvider");return e};var Tt=async e=>{if(e==="en")return!0;try{return await import(`dayjs/locale/${e}.js`),!0}catch(t){return console.error(`Failed to load locale ${e}:`,t),!1}},ot=({children:e,dateState:t,config:o,uiState:a,display:n,locale:l="en"})=>{let[d,A]=Nt({currentLocale:"en",isLocaleReady:l==="en"});return Wt(()=>{l!=="en"?(A(g=>U(O({},g),{isLocaleReady:!1})),Tt(l).then(g=>{g?(Je.locale(l),A({currentLocale:l,isLocaleReady:!0})):(Je.locale("en"),A({currentLocale:"en",isLocaleReady:!0}))})):(Je.locale("en"),A({currentLocale:"en",isLocaleReady:!0}))},[l]),d.isLocaleReady?Ie(Vt.Provider,{value:d,children:Ie(_e.Provider,{value:t,children:Ie(qe.Provider,{value:o,children:Ie(et.Provider,{value:a,children:Ie(tt.Provider,{value:n,children:e})})})})}):null};import"react";import{jsx as ct}from"react/jsx-runtime";var Yt=e=>ct("svg",U(O({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},e),{children:ct("path",{d:"M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 002 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"})})),De=Yt;import{useEffect as zt,useState as ve}from"react";import Lt from"classnames";import we from"dayjs";import"react";import{jsx as at}from"react/jsx-runtime";var jt=e=>at("svg",U(O({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},e),{children:at("path",{d:"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"})})),he=jt;import"react";import{jsx as gt}from"react/jsx-runtime";var Mt=e=>gt("svg",U(O({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},e),{children:gt("path",{d:"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"})})),Be=Mt;import{jsx as ce,jsxs as it}from"react/jsx-runtime";var Ne=({type:e,showIcon:t=!1,tabIndex:o=0,nonFocusable:a=!1})=>{let[n,l]=ve(null),[d,A]=ve(!1),[g,s]=ve(!1),{fromDate:r,toDate:p,inputFocus:G,handleClickDateInput:B,handleChangeDate:x}=v(),{isSingle:D,minDate:y,maxDate:X,dateFormat:c}=k(),{startDatePlaceholder:m,endDatePlaceholder:C}=w(),f=e==="from"?r:p,V=e==="from"?m:C;zt(()=>{if(f){let Z=f.clone().locale(we.locale()).format("ddd, DD MMM");c&&(Z=f.format(c)),l(Z);let Q=y?we(y):null,H=X?we(X):null;Q!=null&&Q.add(1,"day").isAfter(f,"date")||e==="to"&&r&&f.isBefore(r.add(1,"day"),"date")?A(!0):A(!1),H!=null&&H.subtract(1,"day").isBefore(f,"date")?s(!0):s(!1)}else l(null)},[f,r,y,X,c,e]);let N=J=>{J.stopPropagation(),f&&x(f.subtract(1,"day"),e)},S=J=>{J.stopPropagation(),f&&x(f.add(1,"day"),e)},u=()=>{B(e)};return it("div",{className:Lt("date",{"is-focus":G===e&&!D,"is-single":D}),role:"button",tabIndex:a?-1:o,onClick:u,id:`${e}-date-input-button`,children:[t&&ce(De,{className:"icon-calendar",viewBox:"0 0 24 24"}),ce("div",{className:"selected-date",children:n!=null?n:ce("div",{className:"date-placeholder",children:V})}),n&&it("div",{className:"change-date-group",children:[ce("button",{type:"button",className:"btn-outline change-date-button",onClick:N,tabIndex:a?-1:0,disabled:d,children:ce(he,{viewBox:"0 0 24 24",className:"icon-arrow"})}),ce("button",{type:"button",className:"btn-outline change-date-button",onClick:S,tabIndex:a?-1:0,disabled:g,children:ce(Be,{viewBox:"0 0 24 24",className:"icon-arrow"})})]})]})};import{jsx as He,jsxs as lt}from"react/jsx-runtime";var Fe=({showIcon:e=!1,nonFocusable:t=!1})=>{let{isSingle:o}=k(),{dateInputSeperator:a}=w();return lt("div",{className:"date-picker-input",children:[e&&He(De,{className:"icon-calendar mobile",viewBox:"0 0 24 24"}),lt("div",{className:"date-picker-date-group",children:[He(Ne,{type:"from",tabIndex:t?-1:0,showIcon:!0,nonFocusable:t}),!o&&a&&He("div",{className:"date-input-separator",children:a}),!o&&He(Ne,{type:"to",tabIndex:t?-1:0,showIcon:!1,nonFocusable:t})]})]})};import{createPortal as Pt}from"react-dom";import{useEffect as Et,useState as St}from"react";var rt=()=>{let[e,t]=St(!1);return Et(()=>{t(!0)},[]),e};import{jsx as $t}from"react/jsx-runtime";var Kt=({children:e=null,isMobile:t=!1})=>rt()?t?Pt($t("div",{children:e}),document.body):e:null,nt=Kt;import{useEffect as po,useState as ft,useRef as xo}from"react";import mo from"classnames";import"react";import{jsx as dt}from"react/jsx-runtime";var _t=e=>dt("svg",U(O({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 492 492"},e),{children:dt("path",{d:"M464.3 207.4l.8.2H136l103.5-103.7c5-5.1 7.8-12 7.8-19.2 0-7.2-2.7-14-7.8-19l-16.1-16.2c-5-5-11.8-7.8-19-7.8-7.2 0-14 2.8-19 7.8L7.8 227C2.8 232 0 238.8 0 246c0 7.3 2.8 14 7.8 19.2l177.5 177.4c5 5 11.8 7.8 19 7.8 7.2 0 14-2.8 19-7.8l16-16.1a26.6 26.6 0 000-37.7L134.8 284.4h330a27.9 27.9 0 0027.3-27.6V234a27.3 27.3 0 00-27.7-26.6z"})})),It=_t;import no,{useEffect as bt,useState as Io,useRef as so}from"react";import z from"dayjs";import{VariableSizeList as Co}from"react-window";import Ao from"react-virtualized-auto-sizer";import{forwardRef as go}from"react";import io from"classnames";import lo from"dayjs";import{forwardRef as oo}from"react";import co from"classnames";import ao from"dayjs";import{forwardRef as qt,useCallback as st,useEffect as eo,useRef as to}from"react";import Ct from"classnames";import{jsx as We,jsxs as At}from"react/jsx-runtime";var Ve=qt(({dateIndex:e,dateValue:t,isEndDay:o,selected:a,hovered:n,disabled:l,totalDay:d,highlight:A,handleHoverDay:g,subText:s},r)=>{let p=to(null),{onSelectDate:G,onHoverDate:B}=v(),x=c=>{c.stopPropagation(),c.preventDefault(),!l&&G(t)},D=()=>{l||(B(t),g(t))},y=st(()=>{if(!r||typeof r=="function")return;let c=r.current;c&&p.current&&(c.style.left=`${p.current.offsetLeft-c.offsetWidth+135}px`,c.style.top=`${p.current.offsetTop-c.offsetHeight-15}px`,c.style.visibility="visible")},[r]),X=st(()=>{if(!r||typeof r=="function")return;let c=r.current;c&&(c.style.visibility="hidden")},[r]);return eo(()=>{let c=p.current;return c&&(c.addEventListener("mouseover",y),c.addEventListener("mouseleave",X)),()=>{c&&(c.removeEventListener("mouseover",y),c.removeEventListener("mouseleave",X))}},[y,X]),At("div",{className:Ct("day",{selected:a,hovered:n,disabled:l,highlight:A,end:o,"has-subtext":!!s}),onClick:x,onMouseEnter:D,role:"button",tabIndex:-1,"data-day-index":e,"data-date-value":t.valueOf(),ref:p,children:[n&&!(o&&e===d)&&!(e===1&&a&&!o)&&We("div",{className:Ct("background-day",{"first-day":e===1,"last-day":e===d})}),At("div",{className:"day-content",children:[We("div",{className:"text-day",children:e}),s&&We("div",{className:"sub-text",style:{position:"relative",zIndex:3,color:a&&!n?"#fff":"#666"},children:s})]})]})});Ve.displayName="Day";import{jsx as ut}from"react/jsx-runtime";var Te=oo(({isFirst:e,week:t,month:o,year:a,totalDay:n,weekIndex:l,handleHoverDay:d},A)=>{let{fromDate:g,toDate:s,hoverDate:r}=v(),{minDate:p,maxDate:G,isSingle:B,highlightToday:x}=k(),{subTextDict:D}=w(),y=()=>Array.from({length:t.days},(X,c)=>{var Z;let m=c+t.start,C=ao(`${a}-${o+1}-${m}`),f=p&&C.isBefore(p,"date")||G&&C.isAfter(G,"date"),V=g&&C.isSame(g,"date")||s&&C.isSame(s,"date"),N=!1,S=x&&C.isSame(new Date,"date");g&&!g.isSame(s,"date")&&!B&&(s&&!g.isAfter(C,"date")&&!s.isBefore(C,"date")&&(N=!0),!s&&!C.isBefore(g,"date")&&!(r&&r.isBefore(C,"date"))&&g.isBefore(r,"date")&&(N=!0));let u=s&&C.isSame(s,"date")||!s&&r&&C.isSame(r,"date"),J=D?(Z=D[C.format("YYYY-MM-DD")])!=null?Z:"\xA0":"";return ut(Ve,{dateIndex:m,dateValue:C,selected:V,hovered:N,highlight:S,disabled:f,isEndDay:u,totalDay:n,handleHoverDay:d,subText:J,ref:A},c)});return ut("div",{className:co("week",{first:e}),children:y()})});Te.displayName="Week";import{jsx as Ce,jsxs as ro}from"react/jsx-runtime";var Ae=go(({month:e,year:t,hidden:o=!1,isAnimating:a=!1,handleHoverDay:n,className:l},d)=>{let{startWeekDay:A,weekDayFormat:g,monthFormat:s,singleCalendar:r}=k(),p=()=>{let{totalWeek:x,totalDay:D}=ye(t,e,A);return x.map(y=>{let X=`${t}-${e}-${y.start}`;return Ce(Te,{week:y,month:e,year:t,isFirst:y===x[0],totalDay:D,weekIndex:x.indexOf(y),handleHoverDay:n,ref:d},X)})},G=()=>Ge(A,g).map(D=>Ce("div",{className:"weekday",children:D},`weekday-${D.toLowerCase()}`)),B=()=>{let x=lo(`${t}-${e+1}-1`);return s?x.format(s):x.format("MMMM - YYYY")};return ro("div",{className:io("month-calendar",{isAnimating:a,hidden:o,single:r},l),"data-month-index":e+1,children:[Ce("div",{className:"month-name",children:B()}),Ce("div",{className:"weekdays",children:G()}),Ce("div",{className:"week-container",children:p()})]})});Ae.displayName="MonthCalendar";import{jsx as ae,jsxs as uo}from"react/jsx-runtime";var pt=()=>{let[e,t]=Io(2400),o=so(null),{fromDate:a}=v(),{startWeekDay:n,minDate:l,maxDate:d,weekDayFormat:A}=k(),{complsOpen:g}=ne(),{tooltip:s,subTextDict:r}=w(),p=l?z(l).year():1900,G=l?z(l).month():0;bt(()=>{if(d){let c=l?z(l):z("1900-01-01");t(z(d).diff(c,"month")+1)}},[d,l]),bt(()=>{if(o.current&&g){let c=a?z(a):z(),m=c.diff(z("1900-01-01"),"month");l&&(m=c.diff(z(l),"month")),o.current.scrollToItem(m+1,"smart")}},[g,a,l]);let B=c=>{let m=c+G,C=p+Math.floor(m/12),f=m%12;return{year:C,month:f}},x=no.memo(({index:c,style:m})=>{let{year:C,month:f}=B(c);return ae("div",{style:m,children:ae(Ae,{month:f,year:C,hidden:!1,isAnimating:!1,handleHoverDay:()=>{}})})});x.displayName="CalendarRow";let D=c=>{let{year:m,month:C}=B(c),{totalWeek:f}=ye(m,C,n||"monday");return f.length*48+34},y=()=>ae(Ao,{children:({height:c,width:m})=>ae(Co,{ref:o,width:m,height:c-36,itemCount:e,itemSize:D,children:x})});return ae("div",{className:"calendar-wrapper",children:uo("div",{className:"calendar-content",children:[ae("div",{className:"weekdays mobile",children:Ge(n||"monday",A).map((m,C)=>ae("div",{className:"weekday",children:m},C))}),y()]})})};import{useEffect as be,useState as L,useRef as xt,useCallback as Qe,useMemo as Ye}from"react";import ue from"classnames";import Ze from"dayjs";import{jsx as ge,jsxs as je}from"react/jsx-runtime";var bo=()=>{let[e,t]=L(!1);return be(()=>{t(!0)},[]),e},mt=({dateChanged:e=null})=>{let t=bo(),o=xt(null),a=xt(null),[n,l]=L(0),[d,A]=L([]),[g,s]=L(null),[r,p]=L(!1),[G,B]=L(!1),[x,D]=L(0),[y,X]=L(null),[c,m]=L(!1),{fromDate:C}=v(),{minDate:f,maxDate:V,singleCalendar:N}=k(),{complsOpen:S}=ne(),{tooltip:u}=w(),J=Qe(I=>[I.subtract(1,"month"),I,I.add(1,"month"),I.add(2,"month")],[]);be(()=>{if(!t||!o.current)return;let I=()=>{let R=o.current.offsetWidth,F=window.getComputedStyle(o.current),Y=N?R+parseInt(F.marginLeft)-8:R/2;D(Y)};I();let b=new ResizeObserver(I);return b.observe(o.current),()=>b.disconnect()},[t,N]),be(()=>{s(C!=null?C:Ze())},[S,C]),be(()=>{if(!g)return;let I=f?Ze(f):null,b=V?Ze(V):null;p(!!(I&&g.isBefore(I.add(1,"month"),"month"))),B(!!(b&&g.isAfter(b.subtract(2,"month"),"month"))),A(J(g))},[g,f,V,J]),be(()=>{if(!e||!g)return;let I=e.diff(g,"month");I<-1&&H(),I>1&&Q()},[e,g]);let Z=Qe(I=>()=>{if(I==="next"&&G||I==="prev"&&r||c)return;m(!0),l(I==="next"?-x:x);let b=setTimeout(()=>{s(R=>{let F=I==="next"?R.add(1,"month"):R.subtract(1,"month");return A(J(F)),F}),l(0),m(!1)},200);return()=>clearTimeout(b)},[G,r,c,x,J]),[Q,H]=Ye(()=>[Z("next"),Z("prev")],[Z]),P=Qe(()=>{if(!t||!o.current)return;let b=o.current.querySelector(".day.selected, .month-calendar:not(.hidden) .day:not(.disabled)");b==null||b.focus()},[t]),q=Qe(I=>{var te,le;let b=I.target,R=b.getAttribute("data-day-index");if(!R)return;I.preventDefault();let F=b.closest(".calendar-wrapper"),Y=parseInt((te=b.dataset.dateValue)!=null?te:"0"),ee=Ze(Y),ke=ee.endOf("month").date(),j=parseInt(R);switch(I.key){case"ArrowLeft":j--;break;case"ArrowUp":j-=7;break;case"ArrowRight":j++;break;case"ArrowDown":j+=7;break;case" ":b.click();return;default:return}if(j>0&&j<=ke)(le=F==null?void 0:F.querySelector(`[data-day-index="${j}"]`))==null||le.focus();else{let M=ee.add(j-parseInt(R),"day"),K=M.diff(g,"month");K>1&&!G&&Q(),K<0&&!r&&H(),setTimeout(()=>{var oe;(oe=F==null?void 0:F.querySelector(`[data-month-index="${M.month()+1}"] [data-day-index="${M.date()}"]`))==null||oe.focus()},200)}},[g,G,r,Q,H]),Ue=Ye(()=>{var b;if(!u||!t)return null;let I=typeof u=="function"?u((b=y==null?void 0:y.toDate())!=null?b:new Date):u;return ge("div",{id:"day-tooltip",className:"tooltip-text",ref:a,children:I})},[u,y,t]),T=Ye(()=>d.map((I,b)=>{let R=b===1||b===2,F=c&&n<0&&b===3,Y=c&&n>0&&b===0;return ge(Ae,{hidden:!R&&!F&&!Y,isAnimating:F||Y,month:I.month(),year:I.year(),handleHoverDay:X,ref:a,className:ue({"slide-next":F,"slide-prev":Y})},`${I.year()}-${I.month()}`)}),[d,c,n]);return je("div",{className:"relative",children:[Ue,je("div",{className:ue("calendar-wrapper",{single:N}),ref:o,onKeyDown:q,role:"grid","aria-label":"Calendar",children:[ge("div",{className:ue("calendar-content",{isAnimating:c}),style:{transform:`translateX(${n}px)`},children:T}),je("div",{className:"calendar-flippers",children:[ge("button",{className:ue("flipper-button",{disabled:r}),onClick:H,onKeyDown:I=>I.key===" "&&H(),disabled:r,"aria-label":"Previous month",children:ge(he,{viewBox:"0 0 24 24"})}),ge("button",{className:ue("flipper-button",{disabled:G}),onClick:Q,onKeyDown:I=>I.key===" "&&Q(),disabled:G,"aria-label":"Next month",onBlur:P,children:ge(Be,{viewBox:"0 0 24 24"})})]})]})]})};import{jsx as E,jsxs as Me}from"react/jsx-runtime";var yt=({containerRef:e})=>{let[t,o]=ft(!1),[a,n]=ft(null),l=xo(null),d=e||l,{handleChangeDate:A,handleReset:g}=v(),{singleCalendar:s,expandDirection:r}=k(),{complsOpen:p,isMobile:G,toggleDialog:B}=ne(),{hideDialogHeader:x,hideDialogFooter:D}=w(),y=(X,c)=>{n(X),A(X,c)};return po(()=>{p&&!t&&o(!0),p&&setTimeout(()=>{var c;let X=(c=d.current)==null?void 0:c.querySelector("#start-date-input-button");X&&X.focus()},50)},[p,d,t]),Me("div",{className:mo("dialog-date-picker",{open:p,hide:!p&&t,single:s&&!G,"expand-left":r==="left","expand-right":r==="right"}),ref:d,children:[!x&&Me("div",{className:"dialog-header",children:[E("button",{type:"button",className:"btn-outline back-button",onClick:B,children:E(It,{viewBox:"0 0 492 492"})}),E(Fe,{showIcon:!0,nonFocusable:!p}),E("button",{type:"button",className:"btn-outline reset-button",onClick:g,children:"Reset"})]}),E("div",{className:"dialog-content",children:G?E(pt,{}):E(mt,{dateChanged:a})}),!D&&Me("div",{className:"dialog-footer",children:[E("button",{type:"button",className:"submit-button",onClick:B,tabIndex:0,children:"Done"}),E("button",{type:"button",className:"btn-outline reset-button mobile",onClick:g,children:"Reset"})]})]})};import{jsx as pe,jsxs as Do}from"react/jsx-runtime";W.extend(Go);var Xo=({startDate:e=null,endDate:t=null,className:o="",disabled:a=!1,startDatePlaceholder:n,endDatePlaceholder:l,onChange:d,onFocus:A=()=>{},startWeekDay:g="monday",minDate:s=null,maxDate:r=null,weekDayFormat:p="dd",dateFormat:G="",monthFormat:B="",highlightToday:x=!1,dateInputSeperator:D=null,hideDialogHeader:y=!1,hideDialogFooter:X=!1,hideDialogAfterSelectEndDate:c=!1,isOpen:m=!1,onCloseCalendar:C,tooltip:f="",subTextDict:V=null,expandDirection:N="right",locale:S="en",isSingle:u=!1,singleCalendar:J=!1})=>{let[Z,Q]=_(m),[H,P]=_(u?"from":null),[q,Ue]=_(e?W(e):void 0),[T,I]=_(t?W(t):void 0),[b,R]=_(),[F,Y]=_(!1),[ee,ke]=_(!1),te=(()=>{let[i,h]=_(!1);return ie(()=>{h(!0)},[]),i})(),le=ze(null),M=ze(null),K=ze(null),oe=Le(()=>{te&&Y(window.innerWidth<768)},[te]),Ee=$e(()=>{let i=M.current?M.current.toDate():null,h=!u&&K.current?K.current.toDate():null;u?d(i,null):d(i,h)},20),de=(i,h=!1)=>{Ue(i||void 0),M.current=i||null,h&&Ee()},re=(i,h=!1)=>{u||(I(i||void 0),K.current=i||null,h&&Ee())};fo(()=>{if(te)return oe(),window.addEventListener("resize",oe),()=>window.removeEventListener("resize",oe)},[te,oe]),ie(()=>{ke(!0);let i=h=>{le.current&&h.target instanceof Node&&!le.current.contains(h.target)&&window.innerWidth>=768&&Q(!1)};return document.addEventListener("click",i),()=>document.removeEventListener("click",i)},[]),ie(()=>{let i=e?W(e):null;M.current=i,de(i,!1)},[e]),ie(()=>{if(!u){let i=t?W(t):null;K.current=i,re(i,!1)}},[t,u]),ie(()=>{var i,h;if(!Z&&ee){let $=((i=M.current)==null?void 0:i.toDate())||null,xe=((h=K.current)==null?void 0:h.toDate())||null;u?C($,null):C($,xe)}},[Z,ee,u,C]),ie(()=>{Q(m)},[m]),ie(()=>{ee&&A(H==="from"?"Start Date":H==="to"?"End Date":"")},[H,ee,A]);let Dt=()=>{Q(!Z)},ht=i=>{a||!u&&i==="to"&&!q||(Z||Q(!0),P(i))},Bt=Le(i=>{let h=s?W(s):null,$=r?W(r):null;h&&h.isAfter(i,"date")||$&&$.isBefore(i,"date")||(u?(de(i,!0),c&&setTimeout(()=>Q(!1),50)):H==="from"||q&&i.isBefore(q,"date")?(de(i,!0),T&&i.isAfter(T,"date")&&re(null,!0),P("to")):(re(i,!0),P(null),c&&setTimeout(()=>Q(!1),50)))},[s,r,u,c,H,q,T]),Ht=i=>{R(i)},Ft=()=>{R(void 0),de(null,!0),u||re(null,!0),P("from")},Qt=Le((i,h)=>{let $=s?W(s):null,xe=r?W(r):null;$&&$.isAfter(i,"date")||xe&&xe.isBefore(i,"date")||(h==="from"||u?(P("from"),de(i,!0),!u&&T&&i.isAfter(T,"date")&&re(null,!0)):(P("to"),re(i,!0)))},[s,r,u,T,H]),Zt={fromDate:q,toDate:T,hoverDate:b,inputFocus:H,onSelectDate:Bt,onHoverDate:Ht,handleChangeDate:Qt,handleReset:Ft,handleClickDateInput:ht},Rt={isSingle:u,startWeekDay:g,minDate:s?W(s).toDate():null,maxDate:r?W(r).toDate():null,weekDayFormat:p,dateFormat:G,monthFormat:B,highlightToday:x,singleCalendar:J,expandDirection:N,locale:S},Ot={complsOpen:Z,isMobile:F,disabled:a,toggleDialog:Dt},Ut={startDatePlaceholder:n,endDatePlaceholder:l,dateInputSeperator:D,hideDialogHeader:y,hideDialogFooter:X,hideDialogAfterSelectEndDate:c,tooltip:f,subTextDict:V};return pe("div",{className:"react-google-flight-datepicker",children:pe("div",{className:yo("date-picker",o,{disabled:a}),ref:le,children:Do(ot,{dateState:Zt,config:Rt,uiState:Ot,display:Ut,locale:S,children:[pe(Fe,{}),pe(nt,{children:pe(yt,{})})]})})})},Re=Xo;import{useState as ho,useEffect as Bo}from"react";import{Fragment as Ho,jsx as Fo}from"react/jsx-runtime";var Oe=({children:e})=>{let[t,o]=ho(!1);return Bo(()=>{o(!0)},[]),t?Fo(Ho,{children:e}):null};import{jsx as Gt}from"react/jsx-runtime";var Qo=l=>{var d=l,{onChange:e=()=>{},onCloseCalendar:t=()=>{},startDatePlaceholder:o="Start date",endDatePlaceholder:a="End date"}=d,n=fe(d,["onChange","onCloseCalendar","startDatePlaceholder","endDatePlaceholder"]);return Gt(Oe,{children:Gt(Re,U(O({},n),{isSingle:!1,startDate:n.startDate,endDate:n.endDate,startDatePlaceholder:o,endDatePlaceholder:a,onChange:e,onCloseCalendar:t}))})};import{jsx as Xt}from"react/jsx-runtime";var Zo=n=>{var l=n,{onChange:e=()=>{},onCloseCalendar:t=()=>{},startDatePlaceholder:o="Date"}=l,a=fe(l,["onChange","onCloseCalendar","startDatePlaceholder"]);return Xt(Oe,{children:Xt(Re,U(O({},a),{endDate:null,isSingle:!0,startDate:a.startDate,startDatePlaceholder:o,onChange:d=>e(d),onCloseCalendar:d=>t(d)}))})};export{Qo as RangeDatePicker,Zo as SingleDatePicker};
+// src/lib/components/DatePicker/BaseDatePicker.tsx
+import {
+  useState as useState7,
+  useRef as useRef5,
+  useEffect as useEffect8,
+  useLayoutEffect,
+  useCallback as useCallback4
+} from "react";
+import dayjs8 from "dayjs";
+import cx7 from "classnames";
+import localeData from "dayjs/plugin/localeData";
+
+// src/lib/helpers/index.ts
+import dayjs from "dayjs";
+function getMonthInfo(year, month, startDay) {
+  const weeks = [];
+  const firstDate = new Date(year, month, 1);
+  const lastDate = new Date(year, month + 1, 0);
+  const numDays = lastDate.getDate();
+  let start = 1;
+  let end = firstDate.getDay() === 0 ? 1 : 7 - firstDate.getDay() + 1;
+  if (startDay === "sunday") {
+    end = 7 - firstDate.getDay();
+  }
+  while (start <= numDays) {
+    weeks.push({ start, days: end - start + 1 });
+    start = end + 1;
+    end += 7;
+    end = start === 1 && end === 8 ? 1 : end;
+    if (end > numDays) {
+      end = numDays;
+    }
+  }
+  return { totalWeek: weeks, totalDay: numDays };
+}
+function getWeekDay(startWeekDay, weekDayFormat) {
+  const days = [...Array(7)].map(
+    (_, i) => dayjs().day(i).format(weekDayFormat === "dd" ? "dd" : weekDayFormat === "ddd" ? "ddd" : "dddd")
+  );
+  if (startWeekDay === "sunday") {
+    const last = days.pop();
+    if (last) {
+      days.unshift(last);
+    }
+  }
+  return days;
+}
+function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      timeout = null;
+      func.apply(this, args);
+    };
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(later, wait);
+  };
+}
+
+// src/lib/components/DatePicker/DatePickerProvider.tsx
+import { createContext, useContext, useState, useEffect } from "react";
+import dayjs2 from "dayjs";
+import { jsx } from "react/jsx-runtime";
+var DateStateContext = createContext(null);
+var DatePickerConfigContext = createContext(null);
+var UIStateContext = createContext(null);
+var DisplayContext = createContext(null);
+var LocaleContext = createContext(null);
+var useDateState = () => {
+  const context = useContext(DateStateContext);
+  if (!context) throw new Error("useDateState must be used within DatePickerProvider");
+  return context;
+};
+var useDatePickerConfig = () => {
+  const context = useContext(DatePickerConfigContext);
+  if (!context) throw new Error("useDatePickerConfig must be used within DatePickerProvider");
+  return context;
+};
+var useUIState = () => {
+  const context = useContext(UIStateContext);
+  if (!context) throw new Error("useUIState must be used within DatePickerProvider");
+  return context;
+};
+var useDisplayCustomization = () => {
+  const context = useContext(DisplayContext);
+  if (!context) throw new Error("useDisplayCustomization must be used within DatePickerProvider");
+  return context;
+};
+var loadLocale = async (locale) => {
+  if (locale === "en") return true;
+  try {
+    await import(`dayjs/locale/${locale}.js`);
+    return true;
+  } catch (error) {
+    console.error(`Failed to load locale ${locale}:`, error);
+    return false;
+  }
+};
+var DatePickerProvider = ({
+  children,
+  dateState,
+  config,
+  uiState,
+  display,
+  locale = "en"
+}) => {
+  const [localeState, setLocaleState] = useState({
+    currentLocale: "en",
+    isLocaleReady: locale === "en"
+  });
+  useEffect(() => {
+    if (locale !== "en") {
+      setLocaleState((prev) => ({ ...prev, isLocaleReady: false }));
+      loadLocale(locale).then((success) => {
+        if (success) {
+          dayjs2.locale(locale);
+          setLocaleState({
+            currentLocale: locale,
+            isLocaleReady: true
+          });
+        } else {
+          dayjs2.locale("en");
+          setLocaleState({
+            currentLocale: "en",
+            isLocaleReady: true
+          });
+        }
+      });
+    } else {
+      dayjs2.locale("en");
+      setLocaleState({
+        currentLocale: "en",
+        isLocaleReady: true
+      });
+    }
+  }, [locale]);
+  if (!localeState.isLocaleReady) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(LocaleContext.Provider, { value: localeState, children: /* @__PURE__ */ jsx(DateStateContext.Provider, { value: dateState, children: /* @__PURE__ */ jsx(DatePickerConfigContext.Provider, { value: config, children: /* @__PURE__ */ jsx(UIStateContext.Provider, { value: uiState, children: /* @__PURE__ */ jsx(DisplayContext.Provider, { value: display, children }) }) }) }) });
+};
+
+// src/lib/assets/svg/calendar.svg
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SvgCalendar = (props) => /* @__PURE__ */ jsx2("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx2("path", { d: "M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 002 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z" }) });
+var calendar_default = SvgCalendar;
+
+// src/lib/components/DatePicker/DateInput.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import cx from "classnames";
+import dayjs3 from "dayjs";
+
+// src/lib/assets/svg/prev.svg
+import * as React3 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SvgPrev = (props) => /* @__PURE__ */ jsx3("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx3("path", { d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" }) });
+var prev_default = SvgPrev;
+
+// src/lib/assets/svg/next.svg
+import * as React4 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var SvgNext = (props) => /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx4("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" }) });
+var next_default = SvgNext;
+
+// src/lib/components/DatePicker/DateInput.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var DateInput = ({
+  type,
+  showIcon = false,
+  tabIndex = 0,
+  nonFocusable = false
+}) => {
+  const [formattedDate, setFormattedDate] = useState2(null);
+  const [disablePrev, setDisablePrev] = useState2(false);
+  const [disableNext, setDisableNext] = useState2(false);
+  const {
+    fromDate,
+    toDate,
+    inputFocus,
+    handleClickDateInput,
+    handleChangeDate
+  } = useDateState();
+  const {
+    isSingle,
+    minDate,
+    maxDate,
+    dateFormat
+  } = useDatePickerConfig();
+  const {
+    startDatePlaceholder,
+    endDatePlaceholder
+  } = useDisplayCustomization();
+  const value = type === "from" ? fromDate : toDate;
+  const placeholder = type === "from" ? startDatePlaceholder : endDatePlaceholder;
+  useEffect2(() => {
+    if (value) {
+      let formattedValue = value.clone().locale(dayjs3.locale());
+      let text = formattedValue.format("ddd, DD MMM");
+      if (dateFormat) {
+        text = value.format(dateFormat);
+      }
+      setFormattedDate(text);
+      const minDateDayjs = minDate ? dayjs3(minDate) : null;
+      const maxDateDayjs = maxDate ? dayjs3(maxDate) : null;
+      if (minDateDayjs?.add(1, "day").isAfter(value, "date") || type === "to" && fromDate && value.isBefore(fromDate.add(1, "day"), "date")) {
+        setDisablePrev(true);
+      } else {
+        setDisablePrev(false);
+      }
+      if (maxDateDayjs?.subtract(1, "day").isBefore(value, "date")) {
+        setDisableNext(true);
+      } else {
+        setDisableNext(false);
+      }
+    } else {
+      setFormattedDate(null);
+    }
+  }, [value, fromDate, minDate, maxDate, dateFormat, type]);
+  const prevDate = (e) => {
+    e.stopPropagation();
+    if (value) {
+      handleChangeDate(value.subtract(1, "day"), type);
+    }
+  };
+  const nextDate = (e) => {
+    e.stopPropagation();
+    if (value) {
+      handleChangeDate(value.add(1, "day"), type);
+    }
+  };
+  const handleClick = () => {
+    handleClickDateInput(type);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("date", {
+        "is-focus": inputFocus === type && !isSingle,
+        "is-single": isSingle
+      }),
+      role: "button",
+      tabIndex: nonFocusable ? -1 : tabIndex,
+      onClick: handleClick,
+      id: `${type}-date-input-button`,
+      children: [
+        showIcon && /* @__PURE__ */ jsx5(calendar_default, { className: "icon-calendar", viewBox: "0 0 24 24" }),
+        /* @__PURE__ */ jsx5("div", { className: "selected-date", children: formattedDate ?? /* @__PURE__ */ jsx5("div", { className: "date-placeholder", children: placeholder }) }),
+        formattedDate && /* @__PURE__ */ jsxs("div", { className: "change-date-group", children: [
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              className: "btn-outline change-date-button",
+              onClick: prevDate,
+              tabIndex: nonFocusable ? -1 : 0,
+              disabled: disablePrev,
+              children: /* @__PURE__ */ jsx5(prev_default, { viewBox: "0 0 24 24", className: "icon-arrow" })
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              className: "btn-outline change-date-button",
+              onClick: nextDate,
+              tabIndex: nonFocusable ? -1 : 0,
+              disabled: disableNext,
+              children: /* @__PURE__ */ jsx5(next_default, { viewBox: "0 0 24 24", className: "icon-arrow" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/lib/components/DatePicker/DateInputGroup.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var DateInputGroup = ({
+  showIcon = false,
+  nonFocusable = false
+}) => {
+  const { isSingle } = useDatePickerConfig();
+  const { dateInputSeperator } = useDisplayCustomization();
+  return /* @__PURE__ */ jsxs2("div", { className: "date-picker-input", children: [
+    showIcon && /* @__PURE__ */ jsx6(calendar_default, { className: "icon-calendar mobile", viewBox: "0 0 24 24" }),
+    /* @__PURE__ */ jsxs2("div", { className: "date-picker-date-group", children: [
+      /* @__PURE__ */ jsx6(
+        DateInput,
+        {
+          type: "from",
+          tabIndex: nonFocusable ? -1 : 0,
+          showIcon: true,
+          nonFocusable
+        }
+      ),
+      !isSingle && dateInputSeperator && /* @__PURE__ */ jsx6("div", { className: "date-input-separator", children: dateInputSeperator }),
+      !isSingle && /* @__PURE__ */ jsx6(
+        DateInput,
+        {
+          type: "to",
+          tabIndex: nonFocusable ? -1 : 0,
+          showIcon: false,
+          nonFocusable
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/lib/components/DatePicker/DialogWrapper.tsx
+import { createPortal } from "react-dom";
+
+// src/lib/hooks/useClientSide.ts
+import { useEffect as useEffect3, useState as useState3 } from "react";
+var useClientSide = () => {
+  const [isClient, setIsClient] = useState3(false);
+  useEffect3(() => {
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+      setIsClient(true);
+    } else {
+      console.warn("Client-side context not available");
+    }
+  }, []);
+  return isClient;
+};
+
+// src/lib/components/DatePicker/DialogWrapper.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var DialogWrapper = ({
+  children = null,
+  isMobile = false
+}) => {
+  const isClient = useClientSide();
+  if (!isClient) return null;
+  return isMobile ? createPortal(/* @__PURE__ */ jsx7("div", { children }), document.body) : children;
+};
+var DialogWrapper_default = DialogWrapper;
+
+// src/lib/components/DatePicker/Dialog.tsx
+import { useEffect as useEffect7, useState as useState6, useRef as useRef4 } from "react";
+import cx6 from "classnames";
+
+// src/lib/assets/svg/back.svg
+import * as React6 from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var SvgBack = (props) => /* @__PURE__ */ jsx8("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 492 492", ...props, children: /* @__PURE__ */ jsx8("path", { d: "M464.3 207.4l.8.2H136l103.5-103.7c5-5.1 7.8-12 7.8-19.2 0-7.2-2.7-14-7.8-19l-16.1-16.2c-5-5-11.8-7.8-19-7.8-7.2 0-14 2.8-19 7.8L7.8 227C2.8 232 0 238.8 0 246c0 7.3 2.8 14 7.8 19.2l177.5 177.4c5 5 11.8 7.8 19 7.8 7.2 0 14-2.8 19-7.8l16-16.1a26.6 26.6 0 000-37.7L134.8 284.4h330a27.9 27.9 0 0027.3-27.6V234a27.3 27.3 0 00-27.7-26.6z" }) });
+var back_default = SvgBack;
+
+// src/lib/components/DatePicker/DialogContentMobile.tsx
+import React10, { useEffect as useEffect5, useState as useState4, useRef as useRef2 } from "react";
+import dayjs6 from "dayjs";
+import { VariableSizeList as List } from "react-window";
+import AutoSizer from "react-virtualized-auto-sizer";
+
+// src/lib/components/DatePicker/MonthCalendar.tsx
+import { forwardRef as forwardRef3 } from "react";
+import cx4 from "classnames";
+import dayjs5 from "dayjs";
+
+// src/lib/components/DatePicker/Week.tsx
+import { forwardRef as forwardRef2 } from "react";
+import cx3 from "classnames";
+import dayjs4 from "dayjs";
+
+// src/lib/components/DatePicker/Day.tsx
+import { forwardRef, useCallback as useCallback2, useEffect as useEffect4, useRef } from "react";
+import cx2 from "classnames";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var Day = forwardRef(({
+  dateIndex,
+  dateValue,
+  isEndDay,
+  selected,
+  hovered,
+  disabled,
+  totalDay,
+  highlight,
+  handleHoverDay,
+  subText
+}, ref) => {
+  const dayRef = useRef(null);
+  const { onSelectDate, onHoverDate } = useDateState();
+  const selectDate = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (disabled) return;
+    onSelectDate(dateValue);
+  };
+  const handleHoverDate = () => {
+    if (disabled) return;
+    onHoverDate(dateValue);
+    handleHoverDay(dateValue);
+  };
+  const handleTooltipPosition = useCallback2(() => {
+    if (!ref || typeof ref === "function") return;
+    const element = ref.current;
+    if (element && dayRef.current) {
+      element.style.left = `${dayRef.current.offsetLeft - element.offsetWidth + 135}px`;
+      element.style.top = `${dayRef.current.offsetTop - element.offsetHeight - 15}px`;
+      element.style.visibility = "visible";
+    }
+  }, [ref]);
+  const handleTooltipHidden = useCallback2(() => {
+    if (!ref || typeof ref === "function") return;
+    const element = ref.current;
+    if (element) {
+      element.style.visibility = "hidden";
+    }
+  }, [ref]);
+  useEffect4(() => {
+    const currentRef = dayRef.current;
+    if (currentRef) {
+      currentRef.addEventListener("mouseover", handleTooltipPosition);
+      currentRef.addEventListener("mouseleave", handleTooltipHidden);
+    }
+    return () => {
+      if (currentRef) {
+        currentRef.removeEventListener("mouseover", handleTooltipPosition);
+        currentRef.removeEventListener("mouseleave", handleTooltipHidden);
+      }
+    };
+  }, [handleTooltipPosition, handleTooltipHidden]);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cx2("day", {
+        selected,
+        hovered,
+        disabled,
+        highlight,
+        end: isEndDay,
+        "has-subtext": !!subText
+      }),
+      onClick: selectDate,
+      onMouseEnter: handleHoverDate,
+      role: "button",
+      tabIndex: -1,
+      "data-day-index": dateIndex,
+      "data-date-value": dateValue.valueOf(),
+      ref: dayRef,
+      children: [
+        hovered && !(isEndDay && dateIndex === totalDay) && !(dateIndex === 1 && selected && !isEndDay) && /* @__PURE__ */ jsx9(
+          "div",
+          {
+            className: cx2("background-day", {
+              "first-day": dateIndex === 1,
+              "last-day": dateIndex === totalDay
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs3("div", { className: "day-content", children: [
+          /* @__PURE__ */ jsx9("div", { className: "text-day", children: dateIndex }),
+          subText && /* @__PURE__ */ jsx9(
+            "div",
+            {
+              className: "sub-text",
+              style: {
+                position: "relative",
+                zIndex: 3,
+                color: selected && !hovered ? "#fff" : "#666"
+              },
+              children: subText
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+Day.displayName = "Day";
+
+// src/lib/components/DatePicker/Week.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Week = forwardRef2(({
+  isFirst,
+  week,
+  month,
+  year,
+  totalDay,
+  weekIndex,
+  handleHoverDay
+}, ref) => {
+  const {
+    fromDate,
+    toDate,
+    hoverDate
+  } = useDateState();
+  const {
+    minDate,
+    maxDate,
+    isSingle,
+    highlightToday
+  } = useDatePickerConfig();
+  const { subTextDict } = useDisplayCustomization();
+  const generateDay = () => {
+    return Array.from({ length: week.days }, (_, index) => {
+      const dateIndex = index + week.start;
+      const dateValue = dayjs4(`${year}-${month + 1}-${dateIndex}`);
+      const disabled = minDate && dateValue.isBefore(minDate, "date") || maxDate && dateValue.isAfter(maxDate, "date");
+      const selected = fromDate && dateValue.isSame(fromDate, "date") || toDate && dateValue.isSame(toDate, "date");
+      let hovered = false;
+      const highlight = highlightToday && dateValue.isSame(/* @__PURE__ */ new Date(), "date");
+      if (fromDate && !fromDate.isSame(toDate, "date") && !isSingle) {
+        if (toDate && !fromDate.isAfter(dateValue, "date") && !toDate.isBefore(dateValue, "date")) {
+          hovered = true;
+        }
+        if (!toDate && !dateValue.isBefore(fromDate, "date") && !(hoverDate && hoverDate.isBefore(dateValue, "date")) && fromDate.isBefore(hoverDate, "date")) {
+          hovered = true;
+        }
+      }
+      const isEndDate = toDate && dateValue.isSame(toDate, "date") || !toDate && hoverDate && dateValue.isSame(hoverDate, "date");
+      const subText = !subTextDict ? "" : subTextDict[dateValue.format("YYYY-MM-DD")] ?? "\xA0";
+      return /* @__PURE__ */ jsx10(
+        Day,
+        {
+          dateIndex,
+          dateValue,
+          selected,
+          hovered,
+          highlight,
+          disabled,
+          isEndDay: isEndDate,
+          totalDay,
+          handleHoverDay,
+          subText,
+          ref
+        },
+        index
+      );
+    });
+  };
+  return /* @__PURE__ */ jsx10("div", { className: cx3("week", { first: isFirst }), children: generateDay() });
+});
+Week.displayName = "Week";
+
+// src/lib/components/DatePicker/MonthCalendar.tsx
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+var MonthCalendar = forwardRef3(({
+  month,
+  year,
+  hidden = false,
+  isAnimating = false,
+  handleHoverDay,
+  className
+}, ref) => {
+  const {
+    startWeekDay,
+    weekDayFormat,
+    monthFormat,
+    singleCalendar
+  } = useDatePickerConfig();
+  const generateWeek = () => {
+    const { totalWeek, totalDay } = getMonthInfo(year, month, startWeekDay);
+    return totalWeek.map((week) => {
+      const weekKey = `${year}-${month}-${week.start}`;
+      return /* @__PURE__ */ jsx11(
+        Week,
+        {
+          week,
+          month,
+          year,
+          isFirst: week === totalWeek[0],
+          totalDay,
+          weekIndex: totalWeek.indexOf(week),
+          handleHoverDay,
+          ref
+        },
+        weekKey
+      );
+    });
+  };
+  const generateWeekDay = () => {
+    const arrWeekDay = getWeekDay(startWeekDay, weekDayFormat);
+    return arrWeekDay.map((day) => {
+      return /* @__PURE__ */ jsx11("div", { className: "weekday", children: day }, `weekday-${day.toLowerCase()}`);
+    });
+  };
+  const getMonthDisplay = () => {
+    const date = dayjs5(`${year}-${month + 1}-1`);
+    return monthFormat ? date.format(monthFormat) : date.format("MMMM - YYYY");
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cx4("month-calendar", {
+        isAnimating,
+        hidden,
+        single: singleCalendar
+      }, className),
+      "data-month-index": month + 1,
+      children: [
+        /* @__PURE__ */ jsx11("div", { className: "month-name", children: getMonthDisplay() }),
+        /* @__PURE__ */ jsx11("div", { className: "weekdays", children: generateWeekDay() }),
+        /* @__PURE__ */ jsx11("div", { className: "week-container", children: generateWeek() })
+      ]
+    }
+  );
+});
+MonthCalendar.displayName = "MonthCalendar";
+
+// src/lib/components/DatePicker/DialogContentMobile.tsx
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var DialogContentMobile = () => {
+  const [rowCount, setRowCount] = useState4(2400);
+  const listRef = useRef2(null);
+  const {
+    fromDate
+  } = useDateState();
+  const {
+    startWeekDay,
+    minDate,
+    maxDate,
+    weekDayFormat
+  } = useDatePickerConfig();
+  const {
+    complsOpen
+  } = useUIState();
+  const {
+    tooltip,
+    subTextDict
+  } = useDisplayCustomization();
+  const minYear = minDate ? dayjs6(minDate).year() : 1900;
+  const minMonth = minDate ? dayjs6(minDate).month() : 0;
+  useEffect5(() => {
+    if (maxDate) {
+      const _minDate = minDate ? dayjs6(minDate) : dayjs6("1900-01-01");
+      setRowCount(dayjs6(maxDate).diff(_minDate, "month") + 1);
+    }
+  }, [maxDate, minDate]);
+  useEffect5(() => {
+    if (listRef.current && complsOpen) {
+      const date = fromDate ? dayjs6(fromDate) : dayjs6();
+      let monthDiff = date.diff(dayjs6("1900-01-01"), "month");
+      if (minDate) {
+        monthDiff = date.diff(dayjs6(minDate), "month");
+      }
+      listRef.current.scrollToItem(monthDiff + 1, "smart");
+    }
+  }, [complsOpen, fromDate, minDate]);
+  const getMonthYearFromIndex = (index) => {
+    const _index = index + minMonth;
+    const year = minYear + Math.floor(_index / 12);
+    const month = _index % 12;
+    return { year, month };
+  };
+  const Row = React10.memo(({ index, style }) => {
+    const { year, month } = getMonthYearFromIndex(index);
+    return /* @__PURE__ */ jsx12("div", { style, children: /* @__PURE__ */ jsx12(
+      MonthCalendar,
+      {
+        month,
+        year,
+        hidden: false,
+        isAnimating: false,
+        handleHoverDay: () => {
+        }
+      }
+    ) });
+  });
+  Row.displayName = "CalendarRow";
+  const getItemSize = (index) => {
+    const { year, month } = getMonthYearFromIndex(index);
+    const { totalWeek } = getMonthInfo(year, month, startWeekDay || "monday");
+    return totalWeek.length * 48 + 34;
+  };
+  const renderMonthCalendars = () => {
+    return /* @__PURE__ */ jsx12(AutoSizer, { children: ({ height, width }) => /* @__PURE__ */ jsx12(
+      List,
+      {
+        ref: listRef,
+        width,
+        height: height - 36,
+        itemCount: rowCount,
+        itemSize: getItemSize,
+        children: Row
+      }
+    ) });
+  };
+  const generateWeekDay = () => {
+    const arrWeekDay = getWeekDay(startWeekDay || "monday", weekDayFormat);
+    return arrWeekDay.map((day, index) => /* @__PURE__ */ jsx12("div", { className: "weekday", children: day }, index));
+  };
+  return /* @__PURE__ */ jsx12("div", { className: "calendar-wrapper", children: /* @__PURE__ */ jsxs5("div", { className: "calendar-content", children: [
+    /* @__PURE__ */ jsx12("div", { className: "weekdays mobile", children: generateWeekDay() }),
+    renderMonthCalendars()
+  ] }) });
+};
+
+// src/lib/components/DatePicker/DialogContentDesktop.tsx
+import {
+  useEffect as useEffect6,
+  useState as useState5,
+  useRef as useRef3,
+  useCallback as useCallback3,
+  useMemo
+} from "react";
+import cx5 from "classnames";
+import dayjs7 from "dayjs";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var useClientSide2 = () => {
+  const [isClient, setIsClient] = useState5(false);
+  useEffect6(() => {
+    setIsClient(true);
+  }, []);
+  return isClient;
+};
+var DialogContentDesktop = ({
+  dateChanged = null
+}) => {
+  const isClient = useClientSide2();
+  const containerRef = useRef3(null);
+  const tooltipRef = useRef3(null);
+  const [translateAmount, setTranslateAmount] = useState5(0);
+  const [monthArray, setMonthArray] = useState5([]);
+  const [focusDate, setFocusDate] = useState5(null);
+  const [disablePrev, setDisablePrev] = useState5(false);
+  const [disableNext, setDisableNext] = useState5(false);
+  const [wrapperWidth, setWrapperWidth] = useState5(0);
+  const [dayValue, setDayValue] = useState5(null);
+  const [isAnimating, setIsAnimating] = useState5(false);
+  const { fromDate } = useDateState();
+  const { minDate, maxDate, singleCalendar } = useDatePickerConfig();
+  const { complsOpen } = useUIState();
+  const { tooltip } = useDisplayCustomization();
+  const getArrayMonth = useCallback3((date) => [
+    date.subtract(1, "month"),
+    date,
+    date.add(1, "month"),
+    date.add(2, "month")
+  ], []);
+  useEffect6(() => {
+    if (!isClient || !containerRef.current) return;
+    const updateDimensions = () => {
+      const width = containerRef.current.offsetWidth;
+      const style = window.getComputedStyle(containerRef.current);
+      const translateValue = singleCalendar ? width + parseInt(style.marginLeft) - 8 : width / 2;
+      setWrapperWidth(translateValue);
+    };
+    updateDimensions();
+    const resizeObserver = new ResizeObserver(updateDimensions);
+    resizeObserver.observe(containerRef.current);
+    return () => resizeObserver.disconnect();
+  }, [isClient, singleCalendar]);
+  useEffect6(() => {
+    setFocusDate(fromDate ?? dayjs7());
+  }, [complsOpen, fromDate]);
+  useEffect6(() => {
+    if (!focusDate) return;
+    const minDayjs = minDate ? dayjs7(minDate) : null;
+    const maxDayjs = maxDate ? dayjs7(maxDate) : null;
+    setDisablePrev(
+      Boolean(
+        minDayjs && focusDate.isBefore(minDayjs.add(1, "month"), "month")
+      )
+    );
+    setDisableNext(
+      Boolean(
+        maxDayjs && focusDate.isAfter(maxDayjs.subtract(2, "month"), "month")
+      )
+    );
+    setMonthArray(getArrayMonth(focusDate));
+  }, [focusDate, minDate, maxDate, getArrayMonth]);
+  useEffect6(() => {
+    if (!dateChanged || !focusDate) return;
+    const monthDiff = dateChanged.diff(focusDate, "month");
+    if (monthDiff < -1) decreaseCurrentMonth();
+    if (monthDiff > 1) increaseCurrentMonth();
+  }, [dateChanged, focusDate]);
+  const handleMonthChange = useCallback3((direction) => () => {
+    if (direction === "next" && disableNext || direction === "prev" && disablePrev || isAnimating) return;
+    setIsAnimating(true);
+    setTranslateAmount(direction === "next" ? -wrapperWidth : wrapperWidth);
+    const timer = setTimeout(() => {
+      setFocusDate((prev) => {
+        const newDate = direction === "next" ? prev.add(1, "month") : prev.subtract(1, "month");
+        setMonthArray(getArrayMonth(newDate));
+        return newDate;
+      });
+      setTranslateAmount(0);
+      setIsAnimating(false);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [disableNext, disablePrev, isAnimating, wrapperWidth, getArrayMonth]);
+  const [increaseCurrentMonth, decreaseCurrentMonth] = useMemo(
+    () => [handleMonthChange("next"), handleMonthChange("prev")],
+    [handleMonthChange]
+  );
+  const focusOnCalendar = useCallback3(() => {
+    if (!isClient || !containerRef.current) return;
+    const selector = ".day.selected, .month-calendar:not(.hidden) .day:not(.disabled)";
+    const focusTarget = containerRef.current.querySelector(selector);
+    focusTarget?.focus();
+  }, [isClient]);
+  const handleKeyDown = useCallback3((e) => {
+    const target = e.target;
+    const dayIndex = target.getAttribute("data-day-index");
+    if (!dayIndex) return;
+    e.preventDefault();
+    const calendarContainer = target.closest(".calendar-wrapper");
+    const dateValue = parseInt(target.dataset.dateValue ?? "0");
+    const date = dayjs7(dateValue);
+    const lastDate = date.endOf("month").date();
+    let newIndex = parseInt(dayIndex);
+    switch (e.key) {
+      case "ArrowLeft":
+        newIndex--;
+        break;
+      case "ArrowUp":
+        newIndex -= 7;
+        break;
+      case "ArrowRight":
+        newIndex++;
+        break;
+      case "ArrowDown":
+        newIndex += 7;
+        break;
+      case " ":
+        target.click();
+        return;
+      default:
+        return;
+    }
+    if (newIndex > 0 && newIndex <= lastDate) {
+      calendarContainer?.querySelector(`[data-day-index="${newIndex}"]`)?.focus();
+    } else {
+      const newDate = date.add(newIndex - parseInt(dayIndex), "day");
+      const monthDiff = newDate.diff(focusDate, "month");
+      if (monthDiff > 1 && !disableNext) increaseCurrentMonth();
+      if (monthDiff < 0 && !disablePrev) decreaseCurrentMonth();
+      setTimeout(() => {
+        calendarContainer?.querySelector(
+          `[data-month-index="${newDate.month() + 1}"] [data-day-index="${newDate.date()}"]`
+        )?.focus();
+      }, 200);
+    }
+  }, [focusDate, disableNext, disablePrev, increaseCurrentMonth, decreaseCurrentMonth]);
+  const renderTooltip = useMemo(() => {
+    if (!tooltip || !isClient) return null;
+    const content = typeof tooltip === "function" ? tooltip(dayValue?.toDate() ?? /* @__PURE__ */ new Date()) : tooltip;
+    return /* @__PURE__ */ jsx13("div", { id: "day-tooltip", className: "tooltip-text", ref: tooltipRef, children: content });
+  }, [tooltip, dayValue, isClient]);
+  const calendarMonths = useMemo(
+    () => monthArray.map((date, index) => {
+      const isVisible = index === 1 || index === 2;
+      const isSlidingNext = isAnimating && translateAmount < 0 && index === 3;
+      const isSlidingPrev = isAnimating && translateAmount > 0 && index === 0;
+      return /* @__PURE__ */ jsx13(
+        MonthCalendar,
+        {
+          hidden: !isVisible && !isSlidingNext && !isSlidingPrev,
+          isAnimating: isSlidingNext || isSlidingPrev,
+          month: date.month(),
+          year: date.year(),
+          handleHoverDay: setDayValue,
+          ref: tooltipRef,
+          className: cx5({ "slide-next": isSlidingNext, "slide-prev": isSlidingPrev })
+        },
+        `${date.year()}-${date.month()}`
+      );
+    }),
+    [monthArray, isAnimating, translateAmount]
+  );
+  return /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+    renderTooltip,
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: cx5("calendar-wrapper", { single: singleCalendar }),
+        ref: containerRef,
+        onKeyDown: handleKeyDown,
+        role: "grid",
+        "aria-label": "Calendar",
+        children: [
+          /* @__PURE__ */ jsx13(
+            "div",
+            {
+              className: cx5("calendar-content", { isAnimating }),
+              style: { transform: `translateX(${translateAmount}px)` },
+              children: calendarMonths
+            }
+          ),
+          /* @__PURE__ */ jsxs6("div", { className: "calendar-flippers", children: [
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                className: cx5("flipper-button", { disabled: disablePrev }),
+                onClick: decreaseCurrentMonth,
+                onKeyDown: (e) => e.key === " " && decreaseCurrentMonth(),
+                disabled: disablePrev,
+                "aria-label": "Previous month",
+                children: /* @__PURE__ */ jsx13(prev_default, { viewBox: "0 0 24 24" })
+              }
+            ),
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                className: cx5("flipper-button", { disabled: disableNext }),
+                onClick: increaseCurrentMonth,
+                onKeyDown: (e) => e.key === " " && increaseCurrentMonth(),
+                disabled: disableNext,
+                "aria-label": "Next month",
+                onBlur: focusOnCalendar,
+                children: /* @__PURE__ */ jsx13(next_default, { viewBox: "0 0 24 24" })
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/lib/components/DatePicker/Dialog.tsx
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+var Dialog = ({
+  containerRef: externalRef
+}) => {
+  const [hideAnimation, setHideAnimation] = useState6(false);
+  const [dateChanged, setDateChanged] = useState6(null);
+  const defaultRef = useRef4(null);
+  const containerRef = externalRef || defaultRef;
+  const {
+    handleChangeDate,
+    handleReset
+  } = useDateState();
+  const {
+    singleCalendar,
+    expandDirection
+  } = useDatePickerConfig();
+  const {
+    complsOpen,
+    isMobile,
+    toggleDialog
+  } = useUIState();
+  const {
+    hideDialogHeader,
+    hideDialogFooter
+  } = useDisplayCustomization();
+  const onChangeDate = (date, type) => {
+    setDateChanged(date);
+    handleChangeDate(date, type);
+  };
+  useEffect7(() => {
+    if (complsOpen && !hideAnimation) {
+      setHideAnimation(true);
+    }
+    if (complsOpen) {
+      setTimeout(() => {
+        const startDateInput = containerRef.current?.querySelector(
+          "#start-date-input-button"
+        );
+        if (startDateInput) {
+          startDateInput.focus();
+        }
+      }, 50);
+    }
+  }, [complsOpen, containerRef, hideAnimation]);
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cx6("dialog-date-picker", {
+        "open": complsOpen,
+        "hide": !complsOpen && hideAnimation,
+        "single": singleCalendar && !isMobile,
+        "expand-left": expandDirection === "left",
+        "expand-right": expandDirection === "right"
+      }),
+      ref: containerRef,
+      children: [
+        !hideDialogHeader && /* @__PURE__ */ jsxs7("div", { className: "dialog-header", children: [
+          /* @__PURE__ */ jsx14(
+            "button",
+            {
+              type: "button",
+              className: "btn-outline back-button",
+              onClick: toggleDialog,
+              children: /* @__PURE__ */ jsx14(back_default, { viewBox: "0 0 492 492" })
+            }
+          ),
+          /* @__PURE__ */ jsx14(
+            DateInputGroup,
+            {
+              showIcon: true,
+              nonFocusable: !complsOpen
+            }
+          ),
+          /* @__PURE__ */ jsx14(
+            "button",
+            {
+              type: "button",
+              className: "btn-outline reset-button",
+              onClick: handleReset,
+              children: "Reset"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx14("div", { className: "dialog-content", children: isMobile ? /* @__PURE__ */ jsx14(DialogContentMobile, {}) : /* @__PURE__ */ jsx14(
+          DialogContentDesktop,
+          {
+            dateChanged
+          }
+        ) }),
+        !hideDialogFooter && /* @__PURE__ */ jsxs7("div", { className: "dialog-footer", children: [
+          /* @__PURE__ */ jsx14(
+            "button",
+            {
+              type: "button",
+              className: "submit-button",
+              onClick: toggleDialog,
+              tabIndex: 0,
+              children: "Done"
+            }
+          ),
+          /* @__PURE__ */ jsx14(
+            "button",
+            {
+              type: "button",
+              className: "btn-outline reset-button mobile",
+              onClick: handleReset,
+              children: "Reset"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/lib/components/DatePicker/BaseDatePicker.tsx
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+dayjs8.extend(localeData);
+var BaseDatePicker = ({
+  startDate = null,
+  endDate = null,
+  className = "",
+  disabled = false,
+  startDatePlaceholder,
+  endDatePlaceholder,
+  onChange,
+  onFocus = () => {
+  },
+  startWeekDay = "monday",
+  minDate = null,
+  maxDate = null,
+  weekDayFormat = "dd",
+  dateFormat = "",
+  monthFormat = "",
+  highlightToday = false,
+  dateInputSeperator = null,
+  hideDialogHeader = false,
+  hideDialogFooter = false,
+  hideDialogAfterSelectEndDate = false,
+  isOpen = false,
+  onCloseCalendar,
+  tooltip = "",
+  subTextDict = null,
+  expandDirection = "right",
+  locale = "en",
+  isSingle = false,
+  singleCalendar = false
+}) => {
+  const [complsOpen, setComplsOpen] = useState7(isOpen);
+  const [inputFocus, setInputFocus] = useState7(
+    isSingle ? "from" : null
+  );
+  const [fromDate, setFromDate] = useState7(
+    startDate ? dayjs8(startDate) : void 0
+  );
+  const [toDate, setToDate] = useState7(
+    endDate ? dayjs8(endDate) : void 0
+  );
+  const [hoverDate, setHoverDate] = useState7();
+  const [isMobile, setIsMobile] = useState7(false);
+  const [isFirstTime, setIsFirstTime] = useState7(false);
+  const isClient = useClientSide();
+  const containerRef = useRef5(null);
+  const fromDateRef = useRef5(null);
+  const toDateRef = useRef5(null);
+  const handleResize = useCallback4(() => {
+    if (!isClient) return;
+    setIsMobile(window.innerWidth < 768);
+  }, [isClient]);
+  const notifyChange = () => {
+    const _startDate = fromDateRef.current ? fromDateRef.current.toDate() : null;
+    const _endDate = !isSingle && toDateRef.current ? toDateRef.current.toDate() : null;
+    if (isSingle) {
+      onChange(_startDate, null);
+    } else {
+      onChange(_startDate, _endDate);
+    }
+  };
+  const debounceNotifyChange = debounce(notifyChange, 20);
+  const updateFromDate = (dateValue, shouldNotifyChange = false) => {
+    setFromDate(dateValue || void 0);
+    fromDateRef.current = dateValue || null;
+    if (shouldNotifyChange) {
+      debounceNotifyChange();
+    }
+  };
+  const updateToDate = (dateValue, shouldNotifyChange = false) => {
+    if (!isSingle) {
+      setToDate(dateValue || void 0);
+      toDateRef.current = dateValue || null;
+      if (shouldNotifyChange) {
+        debounceNotifyChange();
+      }
+    }
+  };
+  useLayoutEffect(() => {
+    if (!isClient) return;
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [isClient, handleResize]);
+  useEffect8(() => {
+    if (!isClient) return;
+    setIsFirstTime(true);
+    const handleDocumentClick = (e) => {
+      if (containerRef.current && e.target instanceof Node && !containerRef.current.contains(e.target) && window.innerWidth >= 768) {
+        setComplsOpen(false);
+      }
+    };
+    document.addEventListener("click", handleDocumentClick);
+    return () => document.removeEventListener("click", handleDocumentClick);
+  }, [isClient]);
+  useEffect8(() => {
+    const _startDateJs = startDate ? dayjs8(startDate) : null;
+    fromDateRef.current = _startDateJs;
+    updateFromDate(_startDateJs, false);
+  }, [startDate]);
+  useEffect8(() => {
+    if (!isSingle) {
+      const _endDateJs = endDate ? dayjs8(endDate) : null;
+      toDateRef.current = _endDateJs;
+      updateToDate(_endDateJs, false);
+    }
+  }, [endDate, isSingle]);
+  useEffect8(() => {
+    if (!complsOpen && isFirstTime) {
+      const _startDate = fromDateRef.current?.toDate() || null;
+      const _endDate = toDateRef.current?.toDate() || null;
+      if (isSingle) {
+        onCloseCalendar(_startDate, null);
+      } else {
+        onCloseCalendar(_startDate, _endDate);
+      }
+    }
+  }, [complsOpen, isFirstTime, isSingle, onCloseCalendar]);
+  useEffect8(() => {
+    setComplsOpen(isOpen);
+  }, [isOpen]);
+  useEffect8(() => {
+    if (isFirstTime) {
+      const input = inputFocus === "from" ? "Start Date" : inputFocus === "to" ? "End Date" : "";
+      onFocus(input);
+    }
+  }, [inputFocus, isFirstTime, onFocus]);
+  const toggleDialog = () => {
+    setComplsOpen(!complsOpen);
+  };
+  const handleClickDateInput = (focusInput) => {
+    if (disabled || !isSingle && focusInput === "to" && !fromDate) {
+      return;
+    }
+    if (!complsOpen) {
+      setComplsOpen(true);
+    }
+    setInputFocus(focusInput);
+  };
+  const onSelectDate = useCallback4(
+    (date) => {
+      const minDayjs = minDate ? dayjs8(minDate) : null;
+      const maxDayjs = maxDate ? dayjs8(maxDate) : null;
+      if (minDayjs && minDayjs.isAfter(date, "date") || maxDayjs && maxDayjs.isBefore(date, "date")) {
+        return;
+      }
+      if (isSingle) {
+        updateFromDate(date, true);
+        if (hideDialogAfterSelectEndDate) {
+          setTimeout(() => setComplsOpen(false), 50);
+        }
+      } else if (inputFocus === "from" || fromDate && date.isBefore(fromDate, "date")) {
+        updateFromDate(date, true);
+        if (toDate && date.isAfter(toDate, "date")) {
+          updateToDate(null, true);
+        }
+        setInputFocus("to");
+      } else {
+        updateToDate(date, true);
+        setInputFocus(null);
+        if (hideDialogAfterSelectEndDate) {
+          setTimeout(() => setComplsOpen(false), 50);
+        }
+      }
+    },
+    [
+      minDate,
+      maxDate,
+      isSingle,
+      hideDialogAfterSelectEndDate,
+      inputFocus,
+      fromDate,
+      toDate
+    ]
+  );
+  const onHoverDate = (date) => {
+    setHoverDate(date);
+  };
+  const handleReset = () => {
+    setHoverDate(void 0);
+    updateFromDate(null, true);
+    if (!isSingle) {
+      updateToDate(null, true);
+    }
+    setInputFocus("from");
+  };
+  const handleChangeDate = useCallback4(
+    (date, type) => {
+      const minDayjs = minDate ? dayjs8(minDate) : null;
+      const maxDayjs = maxDate ? dayjs8(maxDate) : null;
+      if (minDayjs && minDayjs.isAfter(date, "date") || maxDayjs && maxDayjs.isBefore(date, "date")) {
+        return;
+      }
+      if (type === "from" || isSingle) {
+        setInputFocus("from");
+        updateFromDate(date, true);
+        if (!isSingle && toDate && date.isAfter(toDate, "date")) {
+          updateToDate(null, true);
+        }
+      } else {
+        setInputFocus("to");
+        updateToDate(date, true);
+      }
+    },
+    [minDate, maxDate, isSingle, toDate, inputFocus]
+  );
+  const dateState = {
+    fromDate,
+    toDate,
+    hoverDate,
+    inputFocus,
+    onSelectDate,
+    onHoverDate,
+    handleChangeDate,
+    handleReset,
+    handleClickDateInput
+  };
+  const config = {
+    isSingle,
+    startWeekDay,
+    minDate: minDate ? dayjs8(minDate).toDate() : null,
+    maxDate: maxDate ? dayjs8(maxDate).toDate() : null,
+    weekDayFormat,
+    dateFormat,
+    monthFormat,
+    highlightToday,
+    singleCalendar,
+    expandDirection,
+    locale
+  };
+  const uiState = {
+    complsOpen,
+    isMobile,
+    disabled,
+    toggleDialog
+  };
+  const display = {
+    startDatePlaceholder,
+    endDatePlaceholder,
+    dateInputSeperator,
+    hideDialogHeader,
+    hideDialogFooter,
+    hideDialogAfterSelectEndDate,
+    tooltip,
+    subTextDict
+  };
+  return /* @__PURE__ */ jsx15("div", { className: "react-google-flight-datepicker", children: /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: cx7("date-picker", className, {
+        disabled
+      }),
+      ref: containerRef,
+      children: /* @__PURE__ */ jsxs8(
+        DatePickerProvider,
+        {
+          dateState,
+          config,
+          uiState,
+          display,
+          locale,
+          children: [
+            /* @__PURE__ */ jsx15(DateInputGroup, {}),
+            /* @__PURE__ */ jsx15(DialogWrapper_default, { children: /* @__PURE__ */ jsx15(Dialog, {}) })
+          ]
+        }
+      )
+    }
+  ) });
+};
+var BaseDatePicker_default = BaseDatePicker;
+
+// src/lib/components/DatePicker/ClientOnly.tsx
+import { useState as useState8, useEffect as useEffect9 } from "react";
+import { Fragment, jsx as jsx16 } from "react/jsx-runtime";
+var ClientOnly = ({ children }) => {
+  const [hasMounted, setHasMounted] = useState8(false);
+  useEffect9(() => {
+    setHasMounted(true);
+  }, []);
+  if (!hasMounted) return null;
+  return /* @__PURE__ */ jsx16(Fragment, { children });
+};
+
+// src/lib/components/DatePicker/RangeDatePicker.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var RangeDatePicker = ({
+  onChange = () => {
+  },
+  onCloseCalendar = () => {
+  },
+  startDatePlaceholder = "Start date",
+  endDatePlaceholder = "End date",
+  ...props
+}) => /* @__PURE__ */ jsx17(ClientOnly, { children: /* @__PURE__ */ jsx17(
+  BaseDatePicker_default,
+  {
+    ...props,
+    isSingle: false,
+    startDate: props.startDate,
+    endDate: props.endDate,
+    startDatePlaceholder,
+    endDatePlaceholder,
+    onChange,
+    onCloseCalendar
+  }
+) });
+
+// src/lib/components/DatePicker/SingleDatePicker.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var SingleDatePicker = ({
+  onChange = () => {
+  },
+  onCloseCalendar = () => {
+  },
+  startDatePlaceholder = "Date",
+  ...props
+}) => /* @__PURE__ */ jsx18(ClientOnly, { children: /* @__PURE__ */ jsx18(
+  BaseDatePicker_default,
+  {
+    ...props,
+    endDate: null,
+    isSingle: true,
+    startDate: props.startDate,
+    startDatePlaceholder,
+    onChange: (date) => onChange(date),
+    onCloseCalendar: (date) => onCloseCalendar(date)
+  }
+) });
+export {
+  RangeDatePicker,
+  SingleDatePicker
+};
 //# sourceMappingURL=index.mjs.map