@verifiedinc-public/shared-ui-elements 9.9.2-beta.4 → 9.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -17,6 +17,12 @@ interface DateInputProps extends Omit<TextFieldProps, 'onBlur' | 'onChange'> {
|
|
|
17
17
|
'data-mask-me'?: boolean;
|
|
18
18
|
};
|
|
19
19
|
redactYear?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* CSP nonce applied to the inline <style> tag. Pass this from the server
|
|
22
|
+
* (e.g. Next.js middleware/headers) so the style tag carries a nonce during
|
|
23
|
+
* SSR. Falls back to reading `<meta property="csp-nonce">` on the client.
|
|
24
|
+
*/
|
|
25
|
+
nonce?: string;
|
|
20
26
|
}
|
|
21
27
|
export declare const DateInput: import('react').ForwardRefExoticComponent<Omit<Readonly<DateInputProps>, "ref"> & import('react').RefAttributes<unknown>>;
|
|
22
28
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef as
|
|
1
|
+
"use strict";import{forwardRef as Y,useState as P,useMemo as I,useRef as R}from"react";import{TextField as _,Box as $,Stack as z,IconButton as E}from"@mui/material";import{CalendarToday as W}from"@mui/icons-material";import B from"../../../node_modules/react-datepicker/dist/es/index.mjs";import{useOnClickOutside as j}from"../../../hooks/useOnClickOutside.mjs";import{reactDatepickerCss as K}from"../../../styles/lib/react-datepicker.mjs";import{masks as O}from"../../../utils/masks/index.mjs";import{InputMask as q}from"../InputMask.mjs";import{TextMaskCustom as G}from"../TextMaskCustom.mjs";import{jsxs as T,Fragment as H,jsx as r}from"react/jsx-runtime";const J=B.default??B,L=Y(function(n,u){return r(z,{ref:u,sx:{position:"relative"},children:r(E,{edge:"end",size:"small",onClick:()=>{var d;n.disabled||(d=n.onFocus)==null||d.call(n)},disabled:n.disabled,children:r(W,{fontSize:"small"})})})}),Q=function({value:n,onChange:u,defaultSelectedDate:d,overflow:f=!1,clickOutsideBoundaryElement:l,minDate:h,maxDate:p,disabled:D,nonce:k}){const[w,c]=P(!1),g=R(null),y=new Date("08/01/1989"),m=h??new Date(1900,0,1),t=p??new Date,v=e=>{if(!e||!(e instanceof Date)||isNaN(e.getTime()))return"";try{const a=e.getDate().toString().padStart(2,"0"),s=(e.getMonth()+1).toString().padStart(2,"0"),o=e.getFullYear();return s==="00"||s>"12"||a==="00"||a>"31"||o<1900||o>t.getFullYear()?"":`${s}/${a}/${o}`}catch{return""}},x=I(()=>{if(!n)return d??void 0;const e=new Date(n);return isNaN(+e)||!/^\d{2}\/\d{2}\/\d{4}$/.test(n)||e<m||e>t?y:e},[n]);return j(g,()=>{c(!1)},"mousedown",{},l),T($,{ref:g,sx:{position:"relative","& .react-datepicker-popper":f?{transform:"translate(calc(-100% + 32px), calc(-50% + 10px))!important"}:{}},children:[r("style",{nonce:k,children:K}),r(J,{open:w,onFocus:()=>{c(e=>!e)},popperPlacement:"bottom-end",placeholderText:"MM/DD/YYYY",showPopperArrow:!1,showYearDropdown:!0,showMonthDropdown:!0,scrollableYearDropdown:!1,dateFormat:"MM/dd/yyyy",minDate:m,maxDate:t,selected:x,dropdownMode:"select",onSelect:e=>{const a=v(e);a&&(u?.({target:{value:a}}),c(!1))},disabled:D,customInput:r(L,{disabled:D})})]})};function V({label:n="Date",value:u,error:d,helperText:f,onChange:l,onBlur:h,disabled:p,pickerDefaultSelectedDate:D,pickerClickOutsideBoundaryElement:k,pickerInputOverflow:w=!1,inputMaskProps:c,minDate:g,maxDate:y,redactYear:m=!1,...t},v){var x;const[e,a]=P(""),s=u!==void 0,o=s?u:e,A=I(()=>{var i;if(t.nonce)return t.nonce;if(!(typeof document>"u"))return((i=document.querySelector('meta[property="csp-nonce"]'))==null?void 0:i.getAttribute("content"))??void 0},[t.nonce]),C=i=>{const b=i.target.value;s||a(b),l&&l(b)},M=T(H,{children:[!m&&r(Q,{onChange:C,value:o,overflow:w,clickOutsideBoundaryElement:k,defaultSelectedDate:D,minDate:g,maxDate:y,disabled:p,nonce:A}),(x=t.InputProps)==null?void 0:x.endAdornment]}),S={flex:1,"& input":{boxShadow:"none!important",border:"none!important",letterSpacing:"1px"}};if(m)return r(_,{label:n,error:d,helperText:f,fullWidth:!0,...t,autoComplete:"bday",inputRef:v,value:o?.replace(/-/g,"")??"",onChange:((i,b)=>{if(!b)return;const N=o?.replace(/\//g,"")??"";if(i.target.value.replace(/\//g,"").length<N.length){l?.(""),s||a("");return}l?.(i.target.value),s||a(i.target.value)}),onBlur:h,disabled:p,placeholder:"__/__/____",inputProps:{...t.inputProps,useOnComplete:!1,unmask:!1,lazy:!0,mask:"00/00/YYYY",definitions:{Y:{mask:/[0-9•]/,displayChar:"\u2022"}},placeholderChar:"_",inputMode:"numeric",overwrite:!1,tabIndex:0},InputProps:{...t.InputProps,inputComponent:G,endAdornment:M},sx:S});const F={label:n,error:d,helperText:f,fullWidth:!0,...t,autoComplete:"bday",inputProps:{...t.inputProps,inputMode:"numeric",tabIndex:0,mask:O.DOB_MASK},InputProps:{...t.InputProps,endAdornment:M}};return r(q,{mask:O.DOB_MASK,maskPlaceholder:null,disabled:p,value:o,onBlur:h,onChange:C,...c,children:r(_,{...F,inputRef:v,fullWidth:!0,sx:S})})}const U=Y(V);export{U as DateInput};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const reactDatepickerCss = "@charset \"UTF-8\";\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view--down-arrow,\n.react-datepicker__navigation-icon::before {\n border-color: rgba(0, 0, 0, 0.23);\n border-style: solid;\n border-width: 3px 3px 0 0;\n content: '';\n display: block;\n height: 9px;\n position: absolute;\n top: 6px;\n width: 9px;\n}\n.react-datepicker-wrapper {\n display: flex;\n padding: 0;\n border: 0;\n}\n\n.react-datepicker {\n font-family: inherit;\n font-size: 0.8rem;\n background-color: #fff;\n color: #fff;\n border-radius: 0.3rem;\n box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);\n display: inline-block;\n position: relative;\n line-height: initial;\n}\n\n.react-datepicker--time-only .react-datepicker__time-container {\n border-left: 0;\n}\n.react-datepicker--time-only .react-datepicker__time,\n.react-datepicker--time-only .react-datepicker__time-box {\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n}\n\n.react-datepicker-popper {\n z-index: 2;\n line-height: 0;\n}\n.react-datepicker-popper .react-datepicker__triangle {\n stroke: #aeaeae;\n}\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n fill: #0dbc3d;\n color: #0dbc3d;\n}\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle {\n fill: #0dbc3d;\n color: #0dbc3d;\n}\n\n.react-datepicker__header {\n text-align: center;\n color: #fff;\n background-color: #0dbc3d;\n border-bottom: 1px solid #aeaeae;\n border-top-left-radius: 0.3rem;\n padding: 8px 0;\n position: relative;\n}\n.react-datepicker__header--time {\n padding-bottom: 8px;\n padding-left: 5px;\n padding-right: 5px;\n}\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n border-top-left-radius: 0;\n}\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n border-top-right-radius: 0.3rem;\n}\n\n.react-datepicker__year-dropdown-container--select,\n.react-datepicker__month-dropdown-container--select,\n.react-datepicker__month-year-dropdown-container--select,\n.react-datepicker__year-dropdown-container--scroll,\n.react-datepicker__month-dropdown-container--scroll,\n.react-datepicker__month-year-dropdown-container--scroll {\n display: inline-block;\n margin: 0 15px;\n}\n\n.react-datepicker__current-month,\n.react-datepicker-time__header,\n.react-datepicker-year-header {\n margin-top: 0;\n color: currentColor;\n font-weight: bold;\n font-size: 0.944rem;\n}\n\nh2.react-datepicker__current-month {\n padding: 0;\n margin: 0;\n}\n\n.react-datepicker-time__header {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.react-datepicker__navigation {\n align-items: center;\n background: none;\n display: flex;\n justify-content: center;\n text-align: center;\n cursor: pointer;\n position: absolute;\n top: 2px;\n padding: 0;\n border: none;\n z-index: 1;\n height: 32px;\n width: 32px;\n text-indent: -999em;\n overflow: hidden;\n}\n.react-datepicker__navigation--previous {\n left: 2px;\n}\n.react-datepicker__navigation--next {\n right: 2px;\n}\n.react-datepicker__navigation--next--with-time:not(\n .react-datepicker__navigation--next--with-today-button\n ) {\n right: 85px;\n}\n.react-datepicker__navigation--years {\n position: relative;\n top: 0;\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n.react-datepicker__navigation--years-previous {\n top: 4px;\n}\n.react-datepicker__navigation--years-upcoming {\n top: -4px;\n}\n.react-datepicker__navigation:hover *::before {\n border-color: rgba(0, 0, 0, 0.23);\n}\n\n.react-datepicker__navigation-icon {\n position: relative;\n top: -1px;\n font-size: 20px;\n width: 0;\n}\n.react-datepicker__navigation-icon--next {\n left: -2px;\n}\n.react-datepicker__navigation-icon--next::before {\n transform: rotate(45deg);\n left: -7px;\n}\n.react-datepicker__navigation-icon--previous {\n right: -2px;\n}\n.react-datepicker__navigation-icon--previous::before {\n transform: rotate(225deg);\n right: -7px;\n}\n\n.react-datepicker__month-container {\n float: left;\n}\n\n.react-datepicker__year {\n margin: 0.4rem;\n text-align: center;\n}\n.react-datepicker__year-wrapper {\n display: flex;\n flex-wrap: wrap;\n max-width: 180px;\n}\n.react-datepicker__year .react-datepicker__year-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n\n.react-datepicker__month {\n margin: 0.4rem;\n text-align: center;\n}\n.react-datepicker__month .react-datepicker__month-text,\n.react-datepicker__month .react-datepicker__quarter-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n\n.react-datepicker__input-time-container {\n clear: both;\n width: 100%;\n float: left;\n margin: 5px 0 10px 15px;\n text-align: left;\n}\n.react-datepicker__input-time-container .react-datepicker-time__caption {\n display: inline-block;\n}\n.react-datepicker__input-time-container\n .react-datepicker-time__input-container {\n display: inline-block;\n}\n.react-datepicker__input-time-container\n .react-datepicker-time__input-container\n .react-datepicker-time__input {\n display: inline-block;\n margin-left: 10px;\n}\n.react-datepicker__input-time-container\n .react-datepicker-time__input-container\n .react-datepicker-time__input\n input {\n width: auto;\n}\n.react-datepicker__input-time-container\n .react-datepicker-time__input-container\n .react-datepicker-time__input\n input[type='time']::-webkit-inner-spin-button,\n.react-datepicker__input-time-container\n .react-datepicker-time__input-container\n .react-datepicker-time__input\n input[type='time']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.react-datepicker__input-time-container\n .react-datepicker-time__input-container\n .react-datepicker-time__input\n input[type='time'] {\n -moz-appearance: textfield;\n}\n.react-datepicker__input-time-container\n .react-datepicker-time__input-container\n .react-datepicker-time__delimiter {\n margin-left: 5px;\n display: inline-block;\n}\n\n.react-datepicker__time-container {\n float: right;\n border-left: 1px solid #aeaeae;\n width: 85px;\n}\n.react-datepicker__time-container--with-today-button {\n display: inline;\n border: 1px solid #aeaeae;\n border-radius: 0.3rem;\n position: absolute;\n right: -87px;\n top: 0;\n}\n.react-datepicker__time-container .react-datepicker__time {\n position: relative;\n background: white;\n border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box {\n width: 85px;\n overflow-x: hidden;\n margin: 0 auto;\n text-align: center;\n border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list {\n list-style: none;\n margin: 0;\n height: calc(195px + 1.7rem / 2);\n overflow-y: scroll;\n padding-right: 0;\n padding-left: 0;\n width: 100%;\n box-sizing: content-box;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item {\n height: 30px;\n padding: 5px 10px;\n white-space: nowrap;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item:hover {\n cursor: pointer;\n background-color: #008a01;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--selected {\n background-color: #008a01;\n color: white;\n font-weight: bold;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--selected:hover {\n background-color: #0dbc3d;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--disabled {\n color: #ccc;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--disabled:hover {\n cursor: default;\n background-color: transparent;\n}\n\n.react-datepicker__week-number {\n color: #ccc;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable {\n cursor: pointer;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable:not(\n .react-datepicker__week-number--selected,\n .react-datepicker__week-number--keyboard-selected\n ):hover {\n border-radius: 0.3rem;\n background-color: #0dbc3d;\n}\n.react-datepicker__week-number--selected {\n border-radius: 0.3rem;\n background-color: #0dbc3d;\n color: #fff;\n}\n.react-datepicker__week-number--selected:hover {\n background-color: #008a01;\n}\n.react-datepicker__week-number--keyboard-selected {\n border-radius: 0.3rem;\n background-color: rgb(41.5, 134.5606060606, 207.5);\n color: #fff;\n}\n.react-datepicker__week-number--keyboard-selected:hover {\n background-color: #008a01;\n}\n\n.react-datepicker__day-names {\n white-space: nowrap;\n margin-bottom: -8px;\n}\n\n.react-datepicker__week {\n white-space: nowrap;\n}\n\n.react-datepicker__header .react-datepicker__day-name {\n color: currentColor;\n font-weight: 600;\n}\n\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n color: #000;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n\n.react-datepicker__day:last-child:not(.react-datepicker__day--in-range) {\n color: #eb0d28;\n}\n.react-datepicker__day:last-child:not(\n .react-datepicker__day--in-range\n ).react-datepicker__day--disabled {\n color: #eb0d2866;\n}\n\n.react-datepicker__day,\n.react-datepicker__month-text,\n.react-datepicker__quarter-text,\n.react-datepicker__year-text {\n cursor: pointer;\n}\n.react-datepicker__day:not([aria-disabled='true']):hover,\n.react-datepicker__month-text:not([aria-disabled='true']):hover,\n.react-datepicker__quarter-text:not([aria-disabled='true']):hover,\n.react-datepicker__year-text:not([aria-disabled='true']):hover {\n border-radius: 0.3rem;\n background-color: #0dbc3d;\n}\n.react-datepicker__day--today,\n.react-datepicker__month-text--today,\n.react-datepicker__quarter-text--today,\n.react-datepicker__year-text--today {\n font-weight: bold;\n}\n.react-datepicker__day--highlighted,\n.react-datepicker__month-text--highlighted,\n.react-datepicker__quarter-text--highlighted,\n.react-datepicker__year-text--highlighted {\n border-radius: 0.3rem;\n background-color: #008a01;\n color: #fff;\n}\n.react-datepicker__day--highlighted:not([aria-disabled='true']):hover,\n.react-datepicker__month-text--highlighted:not([aria-disabled='true']):hover,\n.react-datepicker__quarter-text--highlighted:not([aria-disabled='true']):hover,\n.react-datepicker__year-text--highlighted:not([aria-disabled='true']):hover {\n background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);\n}\n.react-datepicker__day--highlighted-custom-1,\n.react-datepicker__month-text--highlighted-custom-1,\n.react-datepicker__quarter-text--highlighted-custom-1,\n.react-datepicker__year-text--highlighted-custom-1 {\n color: #008a01;\n}\n.react-datepicker__day--highlighted-custom-2,\n.react-datepicker__month-text--highlighted-custom-2,\n.react-datepicker__quarter-text--highlighted-custom-2,\n.react-datepicker__year-text--highlighted-custom-2 {\n color: #008a01;\n}\n.react-datepicker__day--holidays,\n.react-datepicker__month-text--holidays,\n.react-datepicker__quarter-text--holidays,\n.react-datepicker__year-text--holidays {\n position: relative;\n border-radius: 0.3rem;\n background-color: #ff6803;\n color: #fff;\n}\n.react-datepicker__day--holidays .overlay,\n.react-datepicker__month-text--holidays .overlay,\n.react-datepicker__quarter-text--holidays .overlay,\n.react-datepicker__year-text--holidays .overlay {\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background-color: #333;\n color: #fff;\n padding: 4px;\n border-radius: 4px;\n white-space: nowrap;\n visibility: hidden;\n opacity: 0;\n transition:\n visibility 0s,\n opacity 0.3s ease-in-out;\n}\n.react-datepicker__day--holidays:not([aria-disabled='true']):hover,\n.react-datepicker__month-text--holidays:not([aria-disabled='true']):hover,\n.react-datepicker__quarter-text--holidays:not([aria-disabled='true']):hover,\n.react-datepicker__year-text--holidays:not([aria-disabled='true']):hover {\n background-color: rgb(207, 82.9642857143, 0);\n}\n.react-datepicker__day--holidays:hover .overlay,\n.react-datepicker__month-text--holidays:hover .overlay,\n.react-datepicker__quarter-text--holidays:hover .overlay,\n.react-datepicker__year-text--holidays:hover .overlay {\n visibility: visible;\n opacity: 1;\n}\n.react-datepicker__day--selected,\n.react-datepicker__day--in-selecting-range,\n.react-datepicker__day--in-range,\n.react-datepicker__month-text--selected,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--selected,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--selected,\n.react-datepicker__year-text--in-selecting-range,\n.react-datepicker__year-text--in-range {\n border-radius: 0.3rem;\n background-color: #0dbc3d;\n}\n.react-datepicker__day--selected:not([aria-disabled='true']):hover,\n.react-datepicker__day--in-selecting-range:not([aria-disabled='true']):hover,\n.react-datepicker__day--in-range:not([aria-disabled='true']):hover,\n.react-datepicker__month-text--selected:not([aria-disabled='true']):hover,\n.react-datepicker__month-text--in-selecting-range:not(\n [aria-disabled='true']\n ):hover,\n.react-datepicker__month-text--in-range:not([aria-disabled='true']):hover,\n.react-datepicker__quarter-text--selected:not([aria-disabled='true']):hover,\n.react-datepicker__quarter-text--in-selecting-range:not(\n [aria-disabled='true']\n ):hover,\n.react-datepicker__quarter-text--in-range:not([aria-disabled='true']):hover,\n.react-datepicker__year-text--selected:not([aria-disabled='true']):hover,\n.react-datepicker__year-text--in-selecting-range:not(\n [aria-disabled='true']\n ):hover,\n.react-datepicker__year-text--in-range:not([aria-disabled='true']):hover {\n background-color: #008a01;\n}\n.react-datepicker__day--keyboard-selected,\n.react-datepicker__month-text--keyboard-selected,\n.react-datepicker__quarter-text--keyboard-selected,\n.react-datepicker__year-text--keyboard-selected {\n border-radius: 0.3rem;\n background-color: #0dbc3d;\n color: rgb(0, 0, 0);\n}\n.react-datepicker__day--keyboard-selected:not([aria-disabled='true']):hover,\n.react-datepicker__month-text--keyboard-selected:not(\n [aria-disabled='true']\n ):hover,\n.react-datepicker__quarter-text--keyboard-selected:not(\n [aria-disabled='true']\n ):hover,\n.react-datepicker__year-text--keyboard-selected:not(\n [aria-disabled='true']\n ):hover {\n background-color: #008a01;\n}\n.react-datepicker__day--in-selecting-range:not(\n .react-datepicker__day--in-range,\n .react-datepicker__month-text--in-range,\n .react-datepicker__quarter-text--in-range,\n .react-datepicker__year-text--in-range\n ),\n.react-datepicker__month-text--in-selecting-range:not(\n .react-datepicker__day--in-range,\n .react-datepicker__month-text--in-range,\n .react-datepicker__quarter-text--in-range,\n .react-datepicker__year-text--in-range\n ),\n.react-datepicker__quarter-text--in-selecting-range:not(\n .react-datepicker__day--in-range,\n .react-datepicker__month-text--in-range,\n .react-datepicker__quarter-text--in-range,\n .react-datepicker__year-text--in-range\n ),\n.react-datepicker__year-text--in-selecting-range:not(\n .react-datepicker__day--in-range,\n .react-datepicker__month-text--in-range,\n .react-datepicker__quarter-text--in-range,\n .react-datepicker__year-text--in-range\n ) {\n background-color: #0dbc3d;\n}\n.react-datepicker__month--selecting-range\n .react-datepicker__day--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ),\n.react-datepicker__year--selecting-range\n .react-datepicker__day--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ),\n.react-datepicker__month--selecting-range\n .react-datepicker__month-text--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ),\n.react-datepicker__year--selecting-range\n .react-datepicker__month-text--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ),\n.react-datepicker__month--selecting-range\n .react-datepicker__quarter-text--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ),\n.react-datepicker__year--selecting-range\n .react-datepicker__quarter-text--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ),\n.react-datepicker__month--selecting-range\n .react-datepicker__year-text--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ),\n.react-datepicker__year--selecting-range\n .react-datepicker__year-text--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ) {\n background-color: #0dbc3d;\n color: #000;\n}\n.react-datepicker__day--disabled,\n.react-datepicker__month-text--disabled,\n.react-datepicker__quarter-text--disabled,\n.react-datepicker__year-text--disabled {\n cursor: default;\n color: #ccc;\n}\n.react-datepicker__day--disabled .overlay,\n.react-datepicker__month-text--disabled .overlay,\n.react-datepicker__quarter-text--disabled .overlay,\n.react-datepicker__year-text--disabled .overlay {\n position: absolute;\n bottom: 70%;\n left: 50%;\n transform: translateX(-50%);\n background-color: #333;\n color: #fff;\n padding: 4px;\n border-radius: 4px;\n white-space: nowrap;\n visibility: hidden;\n opacity: 0;\n transition:\n visibility 0s,\n opacity 0.3s ease-in-out;\n}\n\n.react-datepicker__input-container {\n position: relative;\n display: inline-block;\n width: 100%;\n}\n.react-datepicker__input-container .react-datepicker__calendar-icon {\n position: absolute;\n padding: 0.5rem;\n box-sizing: content-box;\n}\n\n.react-datepicker__view-calendar-icon input {\n padding: 6px 10px 5px 25px;\n}\n\n.react-datepicker__year-read-view,\n.react-datepicker__month-read-view,\n.react-datepicker__month-year-read-view {\n border: 1px solid transparent;\n border-radius: 0.3rem;\n position: relative;\n}\n.react-datepicker__year-read-view:hover,\n.react-datepicker__month-read-view:hover,\n.react-datepicker__month-year-read-view:hover {\n cursor: pointer;\n}\n.react-datepicker__year-read-view:hover\n .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__year-read-view:hover\n .react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-read-view:hover\n .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view:hover\n .react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view:hover\n .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-year-read-view:hover\n .react-datepicker__month-read-view--down-arrow {\n /* border-top-color: #0dbc3d; */\n}\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view--down-arrow {\n transform: rotate(135deg);\n right: -16px;\n top: 0;\n}\n\n.react-datepicker__year-dropdown,\n.react-datepicker__month-dropdown,\n.react-datepicker__month-year-dropdown {\n background-color: #0dbc3d;\n position: absolute;\n width: 50%;\n left: 25%;\n top: 30px;\n z-index: 1;\n text-align: center;\n border-radius: 0.3rem;\n box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);\n}\n.react-datepicker__year-dropdown:hover,\n.react-datepicker__month-dropdown:hover,\n.react-datepicker__month-year-dropdown:hover {\n cursor: pointer;\n}\n.react-datepicker__year-dropdown--scrollable,\n.react-datepicker__month-dropdown--scrollable,\n.react-datepicker__month-year-dropdown--scrollable {\n height: 150px;\n overflow-y: scroll;\n}\n\n.react-datepicker__year-option,\n.react-datepicker__month-option,\n.react-datepicker__month-year-option {\n line-height: 20px;\n width: 100%;\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n.react-datepicker__year-option:first-of-type,\n.react-datepicker__month-option:first-of-type,\n.react-datepicker__month-year-option:first-of-type {\n border-top-left-radius: 0.3rem;\n border-top-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:last-of-type,\n.react-datepicker__month-option:last-of-type,\n.react-datepicker__month-year-option:last-of-type {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:hover,\n.react-datepicker__month-option:hover,\n.react-datepicker__month-year-option:hover {\n background-color: #008a01;\n}\n.react-datepicker__year-option:hover\n .react-datepicker__navigation--years-upcoming,\n.react-datepicker__month-option:hover\n .react-datepicker__navigation--years-upcoming,\n.react-datepicker__month-year-option:hover\n .react-datepicker__navigation--years-upcoming {\n border-bottom-color: rgb(178.5, 178.5, 178.5);\n}\n.react-datepicker__year-option:hover\n .react-datepicker__navigation--years-previous,\n.react-datepicker__month-option:hover\n .react-datepicker__navigation--years-previous,\n.react-datepicker__month-year-option:hover\n .react-datepicker__navigation--years-previous {\n border-top-color: rgb(178.5, 178.5, 178.5);\n}\n.react-datepicker__year-option--selected,\n.react-datepicker__month-option--selected,\n.react-datepicker__month-year-option--selected {\n position: absolute;\n left: 15px;\n}\n\n.react-datepicker__close-icon {\n cursor: pointer;\n background-color: transparent;\n border: 0;\n outline: 0;\n padding: 0 6px 0 0;\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n display: table-cell;\n vertical-align: middle;\n}\n.react-datepicker__close-icon::after {\n cursor: pointer;\n background-color: #0dbc3d;\n color: #fff;\n border-radius: 50%;\n height: 16px;\n width: 16px;\n padding: 2px;\n font-size: 12px;\n line-height: 1;\n text-align: center;\n display: table-cell;\n vertical-align: middle;\n content: '\u00D7';\n}\n.react-datepicker__close-icon--disabled {\n cursor: default;\n}\n.react-datepicker__close-icon--disabled::after {\n cursor: default;\n background-color: #ccc;\n}\n\n.react-datepicker__today-button {\n background: #b6edbd;\n border-top: 1px solid #aeaeae;\n cursor: pointer;\n text-align: center;\n font-weight: bold;\n padding: 5px 0;\n clear: left;\n}\n\n.react-datepicker__portal {\n position: fixed;\n width: 100vw;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.8);\n left: 0;\n top: 0;\n justify-content: center;\n align-items: center;\n display: flex;\n z-index: 2147483647;\n}\n.react-datepicker__portal .react-datepicker__day-name,\n.react-datepicker__portal .react-datepicker__day,\n.react-datepicker__portal .react-datepicker__time-name {\n width: 3rem;\n line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n .react-datepicker__portal .react-datepicker__day-name,\n .react-datepicker__portal .react-datepicker__day,\n .react-datepicker__portal .react-datepicker__time-name {\n width: 2rem;\n line-height: 2rem;\n }\n}\n.react-datepicker__portal .react-datepicker__current-month,\n.react-datepicker__portal .react-datepicker-time__header {\n font-size: 1.44rem;\n}\n\n.react-datepicker__children-container {\n width: 13.8rem;\n margin: 0.4rem;\n padding-right: 0.2rem;\n padding-left: 0.2rem;\n height: auto;\n}\n\n.react-datepicker__aria-live {\n position: absolute;\n clip-path: circle(0);\n border: 0;\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n width: 1px;\n white-space: nowrap;\n}\n\n.react-datepicker__calendar-icon {\n width: 1em;\n height: 1em;\n vertical-align: -0.125em;\n}\n\na.react-datepicker__navigation--years-upcoming,\na.react-datepicker__navigation--years-previous {\n position: relative;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\na.react-datepicker__navigation--years-upcoming::after {\n content: '';\n position: absolute;\n width: 9px;\n height: 9px;\n border-color: rgba(0, 0, 0, 0.23);\n border-style: solid;\n border-width: 3px 3px 0 0;\n transform: rotate(-45deg);\n}\n\na.react-datepicker__navigation--years-previous::after {\n content: '';\n position: absolute;\n width: 9px;\n height: 9px;\n border-color: rgba(0, 0, 0, 0.23);\n border-style: solid;\n border-width: 3px 3px 0 0;\n transform: rotate(135deg);\n}\n\n.react-datepicker__year-dropdown,\n.react-datepicker__month-dropdown {\n font-weight: 600;\n}\n\n.react-datepicker__year-option--selected_year,\n.react-datepicker__month-option--selected_month {\n background-color: #008a01;\n}\n\nselect.react-datepicker__month-select,\nselect.react-datepicker__year-select {\n font-family: inherit;\n background: transparent;\n border: none;\n color: white;\n outline: none;\n cursor: pointer;\n}\n\n/* Selected date and hovered date */\n.react-datepicker__day--selected,\n.react-datepicker__day:not([aria-disabled='true']):hover {\n color: #fff;\n}\n\n.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow {\n border-top-color: #008a01;\n}\n";
|
|
1
|
+
export declare const reactDatepickerCss = "@charset \"UTF-8\";\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view--down-arrow,\n.react-datepicker__navigation-icon::before {\n border-color: rgba(0, 0, 0, 0.23);\n border-style: solid;\n border-width: 3px 3px 0 0;\n content: '';\n display: block;\n height: 9px;\n position: absolute;\n top: 6px;\n width: 9px;\n}\n.react-datepicker-wrapper {\n display: flex;\n padding: 0;\n border: 0;\n}\n\n.react-datepicker {\n font-family: inherit;\n font-size: 0.8rem;\n background-color: #fff;\n color: #fff;\n border-radius: 0.3rem;\n box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);\n display: inline-block;\n position: relative;\n line-height: initial;\n}\n\n.react-datepicker--time-only .react-datepicker__time-container {\n border-left: 0;\n}\n.react-datepicker--time-only .react-datepicker__time,\n.react-datepicker--time-only .react-datepicker__time-box {\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n}\n\n.react-datepicker-popper {\n z-index: 2;\n line-height: 0;\n}\n.react-datepicker-popper .react-datepicker__triangle {\n stroke: #aeaeae;\n}\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n fill: #0dbc3d;\n color: #0dbc3d;\n}\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle {\n fill: #0dbc3d;\n color: #0dbc3d;\n}\n\n.react-datepicker__header {\n text-align: center;\n color: #fff;\n background-color: #0dbc3d;\n border-bottom: 1px solid #aeaeae;\n border-top-left-radius: 0.3rem;\n padding: 8px 0;\n position: relative;\n}\n.react-datepicker__header--time {\n padding-bottom: 8px;\n padding-left: 5px;\n padding-right: 5px;\n}\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n border-top-left-radius: 0;\n}\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n border-top-right-radius: 0.3rem;\n}\n\n.react-datepicker__year-dropdown-container--select,\n.react-datepicker__month-dropdown-container--select,\n.react-datepicker__month-year-dropdown-container--select,\n.react-datepicker__year-dropdown-container--scroll,\n.react-datepicker__month-dropdown-container--scroll,\n.react-datepicker__month-year-dropdown-container--scroll {\n display: inline-block;\n margin: 0 15px;\n}\n\n.react-datepicker__current-month,\n.react-datepicker-time__header,\n.react-datepicker-year-header {\n margin-top: 0;\n color: currentColor;\n font-weight: bold;\n font-size: 0.944rem;\n}\n\nh2.react-datepicker__current-month {\n padding: 0;\n margin: 0;\n}\n\n.react-datepicker-time__header {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.react-datepicker__navigation {\n align-items: center;\n background: none;\n display: flex;\n justify-content: center;\n text-align: center;\n cursor: pointer;\n position: absolute;\n top: 2px;\n padding: 0;\n border: none;\n z-index: 1;\n height: 32px;\n width: 32px;\n text-indent: -999em;\n overflow: hidden;\n}\n.react-datepicker__navigation--previous {\n left: 2px;\n}\n.react-datepicker__navigation--next {\n right: 2px;\n}\n.react-datepicker__navigation--next--with-time:not(\n .react-datepicker__navigation--next--with-today-button\n ) {\n right: 85px;\n}\n.react-datepicker__navigation--years {\n position: relative;\n top: 0;\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n.react-datepicker__navigation--years-previous {\n top: 4px;\n}\n.react-datepicker__navigation--years-upcoming {\n top: -4px;\n}\n.react-datepicker__navigation:hover *::before {\n border-color: rgba(0, 0, 0, 0.23);\n}\n\n.react-datepicker__navigation-icon {\n position: relative;\n top: -1px;\n font-size: 20px;\n width: 0;\n}\n.react-datepicker__navigation-icon--next {\n left: -2px;\n}\n.react-datepicker__navigation-icon--next::before {\n transform: rotate(45deg);\n left: -7px;\n}\n.react-datepicker__navigation-icon--previous {\n right: -2px;\n}\n.react-datepicker__navigation-icon--previous::before {\n transform: rotate(225deg);\n right: -7px;\n}\n\n.react-datepicker__month-container {\n float: left;\n}\n\n.react-datepicker__year {\n margin: 0.4rem;\n text-align: center;\n}\n.react-datepicker__year-wrapper {\n display: flex;\n flex-wrap: wrap;\n max-width: 180px;\n}\n.react-datepicker__year .react-datepicker__year-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n\n.react-datepicker__month {\n margin: 0.4rem;\n text-align: center;\n}\n.react-datepicker__month .react-datepicker__month-text,\n.react-datepicker__month .react-datepicker__quarter-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n\n.react-datepicker__input-time-container {\n clear: both;\n width: 100%;\n float: left;\n margin: 5px 0 10px 15px;\n text-align: left;\n}\n.react-datepicker__input-time-container .react-datepicker-time__caption {\n display: inline-block;\n}\n.react-datepicker__input-time-container\n .react-datepicker-time__input-container {\n display: inline-block;\n}\n.react-datepicker__input-time-container\n .react-datepicker-time__input-container\n .react-datepicker-time__input {\n display: inline-block;\n margin-left: 10px;\n}\n.react-datepicker__input-time-container\n .react-datepicker-time__input-container\n .react-datepicker-time__input\n input {\n width: auto;\n}\n.react-datepicker__input-time-container\n .react-datepicker-time__input-container\n .react-datepicker-time__input\n input[type='time']::-webkit-inner-spin-button,\n.react-datepicker__input-time-container\n .react-datepicker-time__input-container\n .react-datepicker-time__input\n input[type='time']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.react-datepicker__input-time-container\n .react-datepicker-time__input-container\n .react-datepicker-time__input\n input[type='time'] {\n -moz-appearance: textfield;\n}\n.react-datepicker__input-time-container\n .react-datepicker-time__input-container\n .react-datepicker-time__delimiter {\n margin-left: 5px;\n display: inline-block;\n}\n\n.react-datepicker__time-container {\n float: right;\n border-left: 1px solid #aeaeae;\n width: 85px;\n}\n.react-datepicker__time-container--with-today-button {\n display: inline;\n border: 1px solid #aeaeae;\n border-radius: 0.3rem;\n position: absolute;\n right: -87px;\n top: 0;\n}\n.react-datepicker__time-container .react-datepicker__time {\n position: relative;\n background: white;\n border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box {\n width: 85px;\n overflow-x: hidden;\n margin: 0 auto;\n text-align: center;\n border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list {\n list-style: none;\n margin: 0;\n height: calc(195px + 1.7rem / 2);\n overflow-y: scroll;\n padding-right: 0;\n padding-left: 0;\n width: 100%;\n box-sizing: content-box;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item {\n height: 30px;\n padding: 5px 10px;\n white-space: nowrap;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item:hover {\n cursor: pointer;\n background-color: #008a01;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--selected {\n background-color: #008a01;\n color: white;\n font-weight: bold;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--selected:hover {\n background-color: #0dbc3d;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--disabled {\n color: #ccc;\n}\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--disabled:hover {\n cursor: default;\n background-color: transparent;\n}\n\n.react-datepicker__week-number {\n color: #ccc;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable {\n cursor: pointer;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable:not(\n .react-datepicker__week-number--selected,\n .react-datepicker__week-number--keyboard-selected\n ):hover {\n border-radius: 0.3rem;\n background-color: #0dbc3d;\n}\n.react-datepicker__week-number--selected {\n border-radius: 0.3rem;\n background-color: #0dbc3d;\n color: #fff;\n}\n.react-datepicker__week-number--selected:hover {\n background-color: #008a01;\n}\n.react-datepicker__week-number--keyboard-selected {\n border-radius: 0.3rem;\n background-color: rgb(41.5, 134.5606060606, 207.5);\n color: #fff;\n}\n.react-datepicker__week-number--keyboard-selected:hover {\n background-color: #008a01;\n}\n\n.react-datepicker__day-names {\n white-space: nowrap;\n margin-bottom: -8px;\n}\n\n.react-datepicker__week {\n white-space: nowrap;\n}\n\n.react-datepicker__header .react-datepicker__day-name {\n color: currentColor;\n font-weight: 600;\n}\n\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n color: #000;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n\n.react-datepicker__day:last-child:not(.react-datepicker__day--in-range) {\n color: #eb0d28;\n}\n.react-datepicker__day:last-child:not(\n .react-datepicker__day--in-range\n ).react-datepicker__day--disabled {\n color: #eb0d2866;\n}\n\n.react-datepicker__day,\n.react-datepicker__month-text,\n.react-datepicker__quarter-text,\n.react-datepicker__year-text {\n cursor: pointer;\n}\n.react-datepicker__day:not([aria-disabled='true']):hover,\n.react-datepicker__month-text:not([aria-disabled='true']):hover,\n.react-datepicker__quarter-text:not([aria-disabled='true']):hover,\n.react-datepicker__year-text:not([aria-disabled='true']):hover {\n border-radius: 0.3rem;\n background-color: #0dbc3d;\n}\n.react-datepicker__day--today,\n.react-datepicker__month-text--today,\n.react-datepicker__quarter-text--today,\n.react-datepicker__year-text--today {\n font-weight: bold;\n}\n.react-datepicker__day--highlighted,\n.react-datepicker__month-text--highlighted,\n.react-datepicker__quarter-text--highlighted,\n.react-datepicker__year-text--highlighted {\n border-radius: 0.3rem;\n background-color: #008a01;\n color: #fff;\n}\n.react-datepicker__day--highlighted:not([aria-disabled='true']):hover,\n.react-datepicker__month-text--highlighted:not([aria-disabled='true']):hover,\n.react-datepicker__quarter-text--highlighted:not([aria-disabled='true']):hover,\n.react-datepicker__year-text--highlighted:not([aria-disabled='true']):hover {\n background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);\n}\n.react-datepicker__day--highlighted-custom-1,\n.react-datepicker__month-text--highlighted-custom-1,\n.react-datepicker__quarter-text--highlighted-custom-1,\n.react-datepicker__year-text--highlighted-custom-1 {\n color: #008a01;\n}\n.react-datepicker__day--highlighted-custom-2,\n.react-datepicker__month-text--highlighted-custom-2,\n.react-datepicker__quarter-text--highlighted-custom-2,\n.react-datepicker__year-text--highlighted-custom-2 {\n color: #008a01;\n}\n.react-datepicker__day--holidays,\n.react-datepicker__month-text--holidays,\n.react-datepicker__quarter-text--holidays,\n.react-datepicker__year-text--holidays {\n position: relative;\n border-radius: 0.3rem;\n background-color: #ff6803;\n color: #fff;\n}\n.react-datepicker__day--holidays .overlay,\n.react-datepicker__month-text--holidays .overlay,\n.react-datepicker__quarter-text--holidays .overlay,\n.react-datepicker__year-text--holidays .overlay {\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background-color: #333;\n color: #fff;\n padding: 4px;\n border-radius: 4px;\n white-space: nowrap;\n visibility: hidden;\n opacity: 0;\n transition:\n visibility 0s,\n opacity 0.3s ease-in-out;\n}\n.react-datepicker__day--holidays:not([aria-disabled='true']):hover,\n.react-datepicker__month-text--holidays:not([aria-disabled='true']):hover,\n.react-datepicker__quarter-text--holidays:not([aria-disabled='true']):hover,\n.react-datepicker__year-text--holidays:not([aria-disabled='true']):hover {\n background-color: rgb(207, 82.9642857143, 0);\n}\n.react-datepicker__day--holidays:hover .overlay,\n.react-datepicker__month-text--holidays:hover .overlay,\n.react-datepicker__quarter-text--holidays:hover .overlay,\n.react-datepicker__year-text--holidays:hover .overlay {\n visibility: visible;\n opacity: 1;\n}\n.react-datepicker__day--selected,\n.react-datepicker__day--in-selecting-range,\n.react-datepicker__day--in-range,\n.react-datepicker__month-text--selected,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--selected,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--selected,\n.react-datepicker__year-text--in-selecting-range,\n.react-datepicker__year-text--in-range {\n border-radius: 0.3rem;\n background-color: #0dbc3d;\n}\n.react-datepicker__day--selected:not([aria-disabled='true']):hover,\n.react-datepicker__day--in-selecting-range:not([aria-disabled='true']):hover,\n.react-datepicker__day--in-range:not([aria-disabled='true']):hover,\n.react-datepicker__month-text--selected:not([aria-disabled='true']):hover,\n.react-datepicker__month-text--in-selecting-range:not(\n [aria-disabled='true']\n ):hover,\n.react-datepicker__month-text--in-range:not([aria-disabled='true']):hover,\n.react-datepicker__quarter-text--selected:not([aria-disabled='true']):hover,\n.react-datepicker__quarter-text--in-selecting-range:not(\n [aria-disabled='true']\n ):hover,\n.react-datepicker__quarter-text--in-range:not([aria-disabled='true']):hover,\n.react-datepicker__year-text--selected:not([aria-disabled='true']):hover,\n.react-datepicker__year-text--in-selecting-range:not(\n [aria-disabled='true']\n ):hover,\n.react-datepicker__year-text--in-range:not([aria-disabled='true']):hover {\n background-color: #008a01;\n}\n.react-datepicker__day--keyboard-selected,\n.react-datepicker__month-text--keyboard-selected,\n.react-datepicker__quarter-text--keyboard-selected,\n.react-datepicker__year-text--keyboard-selected {\n border-radius: 0.3rem;\n background-color: #0dbc3d;\n color: rgb(0, 0, 0);\n}\n.react-datepicker__day--keyboard-selected:not([aria-disabled='true']):hover,\n.react-datepicker__month-text--keyboard-selected:not(\n [aria-disabled='true']\n ):hover,\n.react-datepicker__quarter-text--keyboard-selected:not(\n [aria-disabled='true']\n ):hover,\n.react-datepicker__year-text--keyboard-selected:not(\n [aria-disabled='true']\n ):hover {\n background-color: #008a01;\n}\n.react-datepicker__day--in-selecting-range:not(\n .react-datepicker__day--in-range,\n .react-datepicker__month-text--in-range,\n .react-datepicker__quarter-text--in-range,\n .react-datepicker__year-text--in-range\n ),\n.react-datepicker__month-text--in-selecting-range:not(\n .react-datepicker__day--in-range,\n .react-datepicker__month-text--in-range,\n .react-datepicker__quarter-text--in-range,\n .react-datepicker__year-text--in-range\n ),\n.react-datepicker__quarter-text--in-selecting-range:not(\n .react-datepicker__day--in-range,\n .react-datepicker__month-text--in-range,\n .react-datepicker__quarter-text--in-range,\n .react-datepicker__year-text--in-range\n ),\n.react-datepicker__year-text--in-selecting-range:not(\n .react-datepicker__day--in-range,\n .react-datepicker__month-text--in-range,\n .react-datepicker__quarter-text--in-range,\n .react-datepicker__year-text--in-range\n ) {\n background-color: #0dbc3d;\n}\n.react-datepicker__month--selecting-range\n .react-datepicker__day--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ),\n.react-datepicker__year--selecting-range\n .react-datepicker__day--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ),\n.react-datepicker__month--selecting-range\n .react-datepicker__month-text--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ),\n.react-datepicker__year--selecting-range\n .react-datepicker__month-text--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ),\n.react-datepicker__month--selecting-range\n .react-datepicker__quarter-text--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ),\n.react-datepicker__year--selecting-range\n .react-datepicker__quarter-text--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ),\n.react-datepicker__month--selecting-range\n .react-datepicker__year-text--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ),\n.react-datepicker__year--selecting-range\n .react-datepicker__year-text--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__year-text--in-selecting-range\n ) {\n background-color: #0dbc3d;\n color: #000;\n}\n.react-datepicker__day--disabled,\n.react-datepicker__month-text--disabled,\n.react-datepicker__quarter-text--disabled,\n.react-datepicker__year-text--disabled {\n cursor: default;\n color: #ccc;\n}\n.react-datepicker__day--disabled .overlay,\n.react-datepicker__month-text--disabled .overlay,\n.react-datepicker__quarter-text--disabled .overlay,\n.react-datepicker__year-text--disabled .overlay {\n position: absolute;\n bottom: 70%;\n left: 50%;\n transform: translateX(-50%);\n background-color: #333;\n color: #fff;\n padding: 4px;\n border-radius: 4px;\n white-space: nowrap;\n visibility: hidden;\n opacity: 0;\n transition:\n visibility 0s,\n opacity 0.3s ease-in-out;\n}\n\n.react-datepicker__input-container {\n position: relative;\n display: inline-block;\n width: 100%;\n}\n.react-datepicker__input-container .react-datepicker__calendar-icon {\n position: absolute;\n padding: 0.5rem;\n box-sizing: content-box;\n}\n\n.react-datepicker__view-calendar-icon input {\n padding: 6px 10px 5px 25px;\n}\n\n.react-datepicker__year-read-view,\n.react-datepicker__month-read-view,\n.react-datepicker__month-year-read-view {\n border: 1px solid transparent;\n border-radius: 0.3rem;\n position: relative;\n}\n.react-datepicker__year-read-view:hover,\n.react-datepicker__month-read-view:hover,\n.react-datepicker__month-year-read-view:hover {\n cursor: pointer;\n}\n.react-datepicker__year-read-view:hover\n .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__year-read-view:hover\n .react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-read-view:hover\n .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view:hover\n .react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view:hover\n .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-year-read-view:hover\n .react-datepicker__month-read-view--down-arrow {\n /* border-top-color: #0dbc3d; */\n}\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view--down-arrow {\n transform: rotate(135deg);\n right: -16px;\n top: 0;\n}\n\n.react-datepicker__year-dropdown,\n.react-datepicker__month-dropdown,\n.react-datepicker__month-year-dropdown {\n background-color: #0dbc3d;\n position: absolute;\n width: 50%;\n left: 25%;\n top: 30px;\n z-index: 1;\n text-align: center;\n border-radius: 0.3rem;\n box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);\n}\n.react-datepicker__year-dropdown:hover,\n.react-datepicker__month-dropdown:hover,\n.react-datepicker__month-year-dropdown:hover {\n cursor: pointer;\n}\n.react-datepicker__year-dropdown--scrollable,\n.react-datepicker__month-dropdown--scrollable,\n.react-datepicker__month-year-dropdown--scrollable {\n height: 150px;\n overflow-y: scroll;\n}\n\n.react-datepicker__year-option,\n.react-datepicker__month-option,\n.react-datepicker__month-year-option {\n line-height: 20px;\n width: 100%;\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n.react-datepicker__year-option:first-of-type,\n.react-datepicker__month-option:first-of-type,\n.react-datepicker__month-year-option:first-of-type {\n border-top-left-radius: 0.3rem;\n border-top-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:last-of-type,\n.react-datepicker__month-option:last-of-type,\n.react-datepicker__month-year-option:last-of-type {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:hover,\n.react-datepicker__month-option:hover,\n.react-datepicker__month-year-option:hover {\n background-color: #008a01;\n}\n.react-datepicker__year-option:hover\n .react-datepicker__navigation--years-upcoming,\n.react-datepicker__month-option:hover\n .react-datepicker__navigation--years-upcoming,\n.react-datepicker__month-year-option:hover\n .react-datepicker__navigation--years-upcoming {\n border-bottom-color: rgb(178.5, 178.5, 178.5);\n}\n.react-datepicker__year-option:hover\n .react-datepicker__navigation--years-previous,\n.react-datepicker__month-option:hover\n .react-datepicker__navigation--years-previous,\n.react-datepicker__month-year-option:hover\n .react-datepicker__navigation--years-previous {\n border-top-color: rgb(178.5, 178.5, 178.5);\n}\n.react-datepicker__year-option--selected,\n.react-datepicker__month-option--selected,\n.react-datepicker__month-year-option--selected {\n position: absolute;\n left: 15px;\n}\n\n.react-datepicker__close-icon {\n cursor: pointer;\n background-color: transparent;\n border: 0;\n outline: 0;\n padding: 0 6px 0 0;\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n display: table-cell;\n vertical-align: middle;\n}\n.react-datepicker__close-icon::after {\n cursor: pointer;\n background-color: #0dbc3d;\n color: #fff;\n border-radius: 50%;\n height: 16px;\n width: 16px;\n padding: 2px;\n font-size: 12px;\n line-height: 1;\n text-align: center;\n display: table-cell;\n vertical-align: middle;\n content: '\u00D7';\n}\n.react-datepicker__close-icon--disabled {\n cursor: default;\n}\n.react-datepicker__close-icon--disabled::after {\n cursor: default;\n background-color: #ccc;\n}\n\n.react-datepicker__today-button {\n background: #b6edbd;\n border-top: 1px solid #aeaeae;\n cursor: pointer;\n text-align: center;\n font-weight: bold;\n padding: 5px 0;\n clear: left;\n}\n\n.react-datepicker__portal {\n position: fixed;\n width: 100vw;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.8);\n left: 0;\n top: 0;\n justify-content: center;\n align-items: center;\n display: flex;\n z-index: 2147483647;\n}\n.react-datepicker__portal .react-datepicker__day-name,\n.react-datepicker__portal .react-datepicker__day,\n.react-datepicker__portal .react-datepicker__time-name {\n width: 3rem;\n line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n .react-datepicker__portal .react-datepicker__day-name,\n .react-datepicker__portal .react-datepicker__day,\n .react-datepicker__portal .react-datepicker__time-name {\n width: 2rem;\n line-height: 2rem;\n }\n}\n.react-datepicker__portal .react-datepicker__current-month,\n.react-datepicker__portal .react-datepicker-time__header {\n font-size: 1.44rem;\n}\n\n.react-datepicker__children-container {\n width: 13.8rem;\n margin: 0.4rem;\n padding-right: 0.2rem;\n padding-left: 0.2rem;\n height: auto;\n}\n\n.react-datepicker__aria-live {\n position: absolute;\n clip-path: circle(0);\n border: 0;\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n width: 1px;\n white-space: nowrap;\n}\n\n.react-datepicker__calendar-icon {\n width: 1em;\n height: 1em;\n vertical-align: -0.125em;\n}\n\na.react-datepicker__navigation--years-upcoming,\na.react-datepicker__navigation--years-previous {\n position: relative;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\na.react-datepicker__navigation--years-upcoming::after {\n content: '';\n position: absolute;\n width: 9px;\n height: 9px;\n border-color: rgba(0, 0, 0, 0.23);\n border-style: solid;\n border-width: 3px 3px 0 0;\n transform: rotate(-45deg);\n}\n\na.react-datepicker__navigation--years-previous::after {\n content: '';\n position: absolute;\n width: 9px;\n height: 9px;\n border-color: rgba(0, 0, 0, 0.23);\n border-style: solid;\n border-width: 3px 3px 0 0;\n transform: rotate(135deg);\n}\n\n.react-datepicker__year-dropdown,\n.react-datepicker__month-dropdown {\n font-weight: 600;\n}\n\n.react-datepicker__year-option--selected_year,\n.react-datepicker__month-option--selected_month {\n background-color: #008a01;\n}\n\nselect.react-datepicker__month-select,\nselect.react-datepicker__year-select {\n font-family: inherit;\n background: transparent;\n border: none;\n color: white;\n outline: none;\n cursor: pointer;\n}\n\n/* Selected date and hovered date */\n.react-datepicker__day--selected,\n.react-datepicker__day:not([aria-disabled='true']):hover {\n color: #fff;\n}\n\n.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow {\n border-top-color: #008a01;\n}\n\n.react-datepicker__year-dropdown-container--select,\n.react-datepicker__month-dropdown-container--select {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.react-datepicker__year-dropdown-container--select::after,\n.react-datepicker__month-dropdown-container--select::after {\n content: \"\";\n display: block;\n position: absolute;\n border-color: inherit;\n border-style: solid;\n border-width: 3px 3px 0 0;\n width: 9px;\n height: 9px;\n right: 0px;\n top: 50%;\n transform: translateY(-50%) rotate(135deg);\n pointer-events: none;\n}\n\nselect.react-datepicker__year-select,\nselect.react-datepicker__month-select {\n appearance: none;\n -webkit-appearance: none;\n padding-right: 14px;\n width: auto;\n}\n";
|
|
@@ -955,4 +955,35 @@ select.react-datepicker__year-select {
|
|
|
955
955
|
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow {
|
|
956
956
|
border-top-color: #008a01;
|
|
957
957
|
}
|
|
958
|
+
|
|
959
|
+
.react-datepicker__year-dropdown-container--select,
|
|
960
|
+
.react-datepicker__month-dropdown-container--select {
|
|
961
|
+
position: relative;
|
|
962
|
+
display: inline-flex;
|
|
963
|
+
align-items: center;
|
|
964
|
+
}
|
|
965
|
+
|
|
966
|
+
.react-datepicker__year-dropdown-container--select::after,
|
|
967
|
+
.react-datepicker__month-dropdown-container--select::after {
|
|
968
|
+
content: "";
|
|
969
|
+
display: block;
|
|
970
|
+
position: absolute;
|
|
971
|
+
border-color: inherit;
|
|
972
|
+
border-style: solid;
|
|
973
|
+
border-width: 3px 3px 0 0;
|
|
974
|
+
width: 9px;
|
|
975
|
+
height: 9px;
|
|
976
|
+
right: 0px;
|
|
977
|
+
top: 50%;
|
|
978
|
+
transform: translateY(-50%) rotate(135deg);
|
|
979
|
+
pointer-events: none;
|
|
980
|
+
}
|
|
981
|
+
|
|
982
|
+
select.react-datepicker__year-select,
|
|
983
|
+
select.react-datepicker__month-select {
|
|
984
|
+
appearance: none;
|
|
985
|
+
-webkit-appearance: none;
|
|
986
|
+
padding-right: 14px;
|
|
987
|
+
width: auto;
|
|
988
|
+
}
|
|
958
989
|
`;export{e as reactDatepickerCss};
|
package/package.json
CHANGED