npm - @laerdal/life-react-components - Versions diffs - 1.2.2-dev.8 → 1.2.2-dev.9 - Mend

@laerdal/life-react-components 1.2.2-dev.8 → 1.2.2-dev.9

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.

Files changed (125) hide show

package/dist/umd/InputFields/DatepickerField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/InputFields/DatepickerField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","dateFormat","validationMessage","autoComplete","placeholder","required","yearPicker","yearsBeforeCurrentDate","yearsAfterCurrentDate","margin","DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","COLORS","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","ComponentSStyling","ComponentTextStyle","scrollBarStyling","ComponentMStyling","white","neutral_600","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","css","primary_600","StyledInputFieldStyling","primary_200","primary_300","neutral_300","DatepickerField","inputRef","React","datepickerRef","supressFocusRef","moment","selectedDate","document","dropdownParent","handleCalendarOpen","setOpenAt","maxDate","minDate","itemsNumber","Math","e","newDate","setYearPickerMode","yearPickerMode","openAt","params","customHeaderCount","display","setTabbedHere","critical_400"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;;AA4BA;AACA;AACA;;AAmBA;AACA;AACA;AACA,QAAMe,mBAAmB,GAAGC,2BAAOC,GAA6C;AAChF;AACA;AACA,eAAeC,oBAAUC,QAAS;AAClC;AACA;AACA;AACA;AACA,MAAOC,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACN,MAAhCM,GAAAA,GAA4C,EAAI;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,iBAAOC,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBD,iBAAOE,WAAY;AACzC,mCAAmCF,iBAAOG,QAAS,iBAAgBH,iBAAOI,KAAM;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BJ,iBAAOK,UAAW;AAC/C;AACA;AACA;AACA,iCAAiCL,iBAAOM,WAAY;AACpD,oBAAoBN,iBAAOK,UAAW;AACtC,gBAAiBN,KAAD,IAAY,CAACA,KAAK,CAAN,UAAA,GAAA,MAAA,GAA6B,MAAQ;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQQ,mCAAkBC,2BAAD,IAAjBD,EAA2CP,iBAA1B,WAAjBO,CAA+D;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,QAAQE,wBAAiB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBF,2BAAD,OAAjBE,EAA8CV,iBAA7B,WAAjBU,CAAkE;AAC1E;AACA;AACA;AACA,oBAAoBV,iBAAOW,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQD,mCAAkBF,2BAAD,OAAjBE,EAA8CV,iBAA7B,WAAjBU,CAAkE;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBV,iBAAOY,WAAY;AACpC,sBAAsBZ,iBAAOW,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiBX,iBAAOa,WAAY;AACpC,sBAAsBb,iBAAOC,UAAW;AACxC;AACA;AACA;AACA,iBAAiBD,iBAAOc,WAAY;AACpC,sBAAsBd,iBAAOE,WAAY;AACzC,mCAAmCF,iBAAOG,QAAS,iBAAgBH,iBAAOI,KAAM;AAChF;AACA;AACA;AACA;AACA,iBAAiBJ,iBAAOW,KAAM;AAC9B,sBAAsBX,iBAAOe,WAAY;AACzC;AACA;AACA;AACA;AACA,oBAAoBf,iBAAOW,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQD,mCAAkBF,2BAAD,OAAjBE,EAA8CV,iBAA7B,WAAjBU,CAAkE;AAC1E;AACA,iBAAiBV,iBAAOY,WAAY;AACpC,sBAAsBZ,iBAAOW,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiBX,iBAAOa,WAAY;AACpC,sBAAsBb,iBAAOC,UAAW;AACxC;AACA;AACA;AACA,iBAAiBD,iBAAOc,WAAY;AACpC,sBAAsBd,iBAAOE,WAAY;AACzC,mCAAmCF,iBAAOG,QAAS,iBAAgBH,iBAAOI,KAAM;AAChF;AACA;AACA;AACA;AACA,iBAAiBJ,iBAAOW,KAAM;AAC9B,sBAAsBX,iBAAOe,WAAY;AACzC;AACA;AACA;AACA;AACA,iBAAiBf,iBAAOgB,WAAY;AACpC,sBAAsBhB,iBAAOiB,WAAY;AACzC;AACA;AACA,mBAAmBjB,iBAAOa,WAAY;AACtC,wBAAwBb,iBAAOC,UAAW;AAC1C;AACA;AACA;AACA,mBAAmBD,iBAAOc,WAAY;AACtC,wBAAwBd,iBAAOE,WAAY;AAC3C,qCAAqCF,iBAAOG,QAAS,iBAAgBH,iBAAOI,KAAM;AAClF;AACA;AACA;AACA;AACA;AAhOA,CAAA;AAmOA,QAAMc,aAAa,GAAGvB,2BAAOC,GAA8C;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKG,KAAD,IACAA,KAAK,EAALA,QAAAA,IAAmBA,KAAK,EAAxBA,MAAAA,GAAAA,EAAAA,GAEIoB,qBAAI;AACZ;AACA;AACA;AACA,sBAAsBnB,iBAAOoB,WAAY;AACzC;AACA;AACA,SAAU;AACV;AACA,gDAAgDpB,iBAAOc,WAAY;AACnE,6CAA6Cd,iBAAOc,WAAY;AAChE,wCAAwCd,iBAAOc,WAAY;AAC3D;AA7BA,CAAA;AAgCA,QAAMO,uBAAuB,GAAG1B,gCAAM,0BAANA,CAA0B;AAC1D;AACA,wCAAwCK,iBAAOsB,WAAY;AAC3D;AACA,eAAetB,iBAAOoB,WAAY;AAClC;AACA;AACA,wBAAwBpB,iBAAOC,UAAW;AAC1C,aAAaD,iBAAOoB,WAAY;AAChC;AACA;AACA,wBAAwBpB,iBAAOE,WAAY;AAC3C,aAAaF,iBAAOc,WAAY;AAChC,wCAAwCd,iBAAOuB,WAAY;AAC3D;AACA,eAAevB,iBAAOc,WAAY;AAClC;AACA;AACA;AACA;AACA,wBAAwBd,iBAAOW,KAAM;AACrC;AACA,eAAeX,iBAAOwB,WAAY;AAClC;AACA;AACA,0BAA0BxB,iBAAOW,KAAM;AACvC;AACA;AA3BA,CAAA;;AA8BA,QAAMc,eAAe,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IAAA,MAAA;AAAA,IAAA,QAAA;AAAA,IAAA,QAAA;AAAA,IAAA,KAAA;AAAA,IAAA,iBAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,WAAA;AAAA,IAAA,QAAA;AAAA,IAAA,UAAA;AAAA,IAAA,sBAAA;AAAA,IAAA,qBAAA;AAevBhC,IAAAA;AAfuB,GAAD,KAgBI;AAC1B;AACA,UAAMiC,QAAQ,GAAGC,KAAK,CAALA,MAAAA,CAAjB,IAAiBA,CAAjB;AACA,UAAMC,aAAa,GAAGD,KAAK,CAALA,MAAAA,CAAtB,IAAsBA,CAAtB;AACA,UAAM,CAAA,UAAA,EAAA,aAAA,IAA8BA,KAAK,CAALA,QAAAA,CAApC,KAAoCA,CAApC;AACA,UAAM,CAAA,eAAA,EAAA,kBAAA,IAAwCA,KAAK,CAALA,QAAAA,CAAuB,CAArE,CAA8CA,CAA9C;AACA,UAAM,CAAA,cAAA,EAAA,iBAAA,IAAsCA,KAAK,CAALA,QAAAA,CAA5C,KAA4CA,CAA5C;AACA,UAAM,CAAA,MAAA,EAAA,SAAA,IAAsBA,KAAK,CAALA,QAAAA,CAA5B,IAA4BA,CAA5B;AACA,UAAME,eAAe,GAAGF,KAAK,CAALA,MAAAA,CAAxB,IAAwBA,CAAxB;AAEA;AACF;AACA;;AACEA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAA,KAAA,EAAWD,QAAQ,CAARA,OAAAA,CAAAA,KAAAA,GAAyBI,sBAAAA,KAAAA,EAAAA,MAAAA,CAAqB7C,UAAU,GAAA,UAAA,GAAxDyC,eAAyBI,CAAzBJ;AADbC,KAAAA,EAEG,CAFHA,KAEG,CAFHA;AAIAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAA,cAAA,EAAoB;AAClB;AACA;AACA,cAAMI,YAAY,GAAGC,QAAQ,CAARA,sBAAAA,CAAAA,uCAAAA,EAArB,CAAqBA,CAArB;AACA,cAAMC,cAAc,GAAGF,YAAY,EAAZA,aAAAA,EAAvB,aAAA;AACA,YAAIA,YAAY,IAAhB,cAAA,EAAoCE,cAAc,CAAdA,SAAAA,GAA2BF,YAAY,CAAZA,SAAAA,GAAyB,IAAIA,YAAY,CAApEE,YAAAA;AACrC;AAPHN,KAAAA,EAQG,CAzBuB,cAyBvB,CARHA,EAjB0B,CA2B1B;AACA;;AACAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAA,MAAA,EAAY;AACVC,QAAAA,aAAa,CAAbA,OAAAA,CAAAA,OAAAA,CADU,IACVA,EADU,CAEV;AACD;AAJHD,KAAAA,EAKG,CALHA,MAKG,CALHA;;AAOA,UAAMO,kBAAkB,GAAG,MAAM;AAC/B,UAAA,MAAA,EAAYC,SAAS,CAATA,IAAS,CAATA;AADd,KAAA;;AAIA,QAAIC,OAAO,GAAG,IAAA,IAAA,CAASpD,KAAK,IAAI,IAAA,IAAA,CAAA,KAAA,IAAkB,IAA3BA,IAA2B,EAA3BA,GAAwC,IAAA,IAAA,CAAxCA,KAAwC,CAAxCA,GAA0D,IAAjF,IAAiF,EAAnE,CAAd;AACAoD,IAAAA,OAAO,CAAPA,WAAAA,CAAoBA,OAAO,CAAPA,WAAAA,MAAyB5C,qBAAqB,IAzCxC,EAyCN4C,CAApBA,EAzC0B,CA2C1B;AACA;;AACA,QAAIC,OAAO,GAAG,IAAA,IAAA,CAASrD,KAAK,IAAI,IAAA,IAAA,CAAA,KAAA,IAAkB,IAA3BA,IAA2B,EAA3BA,GAAwC,IAAA,IAAA,CAAxCA,KAAwC,CAAxCA,GAA0D,IAAjF,IAAiF,EAAnE,CAAd;AACA,UAAMsD,WAAW,GAAGC,IAAI,CAAJA,KAAAA,CAAW,CAACF,OAAO,CAAPA,WAAAA,MAAyB9C,sBAAsB,IAAhD,EAAC8C,CAAD,IAA/B,CAAoBE,CAApB;AAEA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAqB,MAAA,UAAU,EAA/B,cAAA;AAAiD,MAAA,MAAM,EAAE9C,MAAM,IAAI;AAAnE,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AACE,MAAA,GAAG,EADL,aAAA;AAEE,MAAA,cAAc,EAFhB,kBAAA;AAGE,MAAA,QAAQ,EAAG+C,CAAD,IAAY;AACpB,YAAA,QAAA,EAAc;AACZ,cAAA,cAAA,EAAoB;AAClB,kBAAMC,OAAO,GAAG,IAAhB,IAAgB,EAAhB;AACAA,YAAAA,OAAO,CAAPA,WAAAA,CAAoBD,CAAC,CAArBC,WAAoBD,EAApBC;AACAA,YAAAA,OAAO,CAAPA,QAAAA,CAAAA,eAAAA;AACAN,YAAAA,SAAS,CAATA,OAAS,CAATA;AAJF,WAAA,MAKOrD,QAAQ,CAARA,CAAQ,CAARA;AACR;;AACD,YAAA,cAAA,EAAoB4D,iBAAiB,CAAjBA,KAAiB,CAAjBA;AAZxB,OAAA;AAcE,MAAA,QAAQ,EAAE9D,QAAQ,IAdpB,MAAA;AAeE,MAAA,MAAM,EAfR,cAAA;AAgBE,MAAA,cAAc,EAhBhB,cAAA,CAiBE;AAjBF;AAkBE,MAAA,cAAc,EAAE+D,cAAc,GAAA,WAAA,GAlBhC,SAAA;AAmBE,MAAA,OAAO,EAAEA,cAAc,GAAA,OAAA,GAnBzB,SAAA;AAoBE,MAAA,QAAQ,EApBV,KAAA;AAqBE,MAAA,UAAU,EAAEC,MAAM,IArBpB,SAAA;AAsBE,MAAA,mBAAmB,EAtBrB,IAAA;AAuBE,MAAA,kBAAkB,EAChBtD,UAAU,GACLuD,MAAD,IAAA,aACE,KAAK,CAAL,aAAA,CAAA,4CAAA,EAAA,aAAA,CAAA,aAAA,CAAA,EAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA;AAAA,QAAA,kBAAA;AAEmCC,QAAAA,iBAAiB,EAFpD,CAAA;AAEyDH,QAAAA,cAAc,EAFvE,cAAA;AAEyFD,QAAAA,iBAAiB,EAAEA;AAF5G,OAAA,CAAA,EAFI,IAEJ,CAFI,GAxBd,SAAA;AAiCE,MAAA,WAAW,EAAA,aACT,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAc,QAAA,QAAQ,EAAtB,QAAA;AAAkC,QAAA,MAAM,EAAxC,MAAA;AAAkD,QAAA,QAAQ,EAAE9D,QAAQ,GAAG,CAAH,CAAA,GAAQ;AAA5E,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,QAAA,KAAK,EAAE;AAAEmE,UAAAA,OAAO,EAAE;AAAX;AAAZ,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAe,QAAA,MAAM,EAArB,MAAA;AAA+B,QAAA,QAAQ,EAAEnE;AAAzC,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA;AACE,QAAA,EAAE,EADJ,EAAA;AAEE,QAAA,GAAG,EAFL,QAAA;AAGE,QAAA,IAAI,EAHN,MAAA;AAIE,QAAA,IAAI,EAJN,YAAA;AAKE,QAAA,QAAQ,EALV,IAAA;AAME,QAAA,SAAS,EAAEG,QAAQ,GAAA,OAAA,GANrB,EAAA;AAOE,QAAA,QAAQ,EAPV,CAAA;AAQE,QAAA,YAAY,EARd,YAAA;AASE,QAAA,WAAW,EATb,WAAA;AAUE,QAAA,QAAQ,EAVV,QAAA;AAWE,QAAA,MAAM,EAXR,MAAA;AAYE,QAAA,QAAQ,EAZV,QAAA;AAaE,QAAA,UAAU,EAbZ,UAAA;AAcE,QAAA,MAAM,EAAE,MAAMiE,aAAa,CAd7B,KAc6B,CAd7B;AAeE,QAAA,WAAW,EAAGR,CAAD,IAAY;AACvB,cAAI,EAAE3D,MAAM,IAAR,QAAA,KAAyB,CAA7B,UAAA,EAA0CgD,eAAe,CAAfA,OAAAA,GAAAA,IAAAA;AAhB9C,SAAA;AAkBE,QAAA,OAAO,EAAGW,CAAD,IAAY;AACnB,cAAI,EAAE3D,MAAM,IAAZ,QAAI,CAAJ,EAA2B;AACzB,gBAAI,CAACgD,eAAe,CAApB,OAAA,EAA8BmB,aAAa,CAA3C,IAA2C,CAAbA,CAA9B,KACKnB,eAAe,CAAfA,OAAAA,GAAAA,KAAAA;AACN;AACF;AAvBH,OAAA,CADF,EAAA,aA0BE,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAY,QAAA,OAAO,EAAnB,WAAA;AAAgC,QAAA,KAAK,EAArC,QAAA;AAA+C,QAAA,QAAQ,EAAE,CAAzD,CAAA;AAA6D,QAAA,MAAM,EAAE,MAAM,CAA3E,CAAA;AAA+E,QAAA,QAAQ,EAAEjD,QAAQ,IAAIC;AAArG,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAU,QAAA,IAAI,EAAC;AAAf,OAAA,CADF,CA1BF,CADF,CADF;AAlCJ,KAAA,CADF,CAFF,EA4EGK,iBAAiB,IAAA,aAChB,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,MAAA,IAAI,EAAtB,MAAA;AAA8B,MAAA,KAAK,EAAEc,iBAAOiD;AAA5C,KAAA,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAhFR,iBAgFQ,CAFF,CA7EJ,CADF;AAhEF,GAAA;;;AArTEtE,IAAAA,E;AACAC,IAAAA,Q;AACAC,IAAAA,M;AACAC,IAAAA,Q;AACAC,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,U;AACAC,IAAAA,iB;AACAC,IAAAA,Y;AACAC,IAAAA,W;AACAC,IAAAA,Q;AACAC,IAAAA,U;AACAC,IAAAA,sB;AACAC,IAAAA,qB;AACAC,IAAAA,M;;oBA8bF,e","sourcesContent":["/*\n Import react libraries.\n /\nimport as React from 'react';\n\n/*\n Import third-party libraries.\n /\nimport styled, {css} from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/\n Import custom components.\n /\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button/index';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, scrollBarStyling} from '../styles';\n\n/\n Import custom styles.\n /\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n/\n Add custom types.\n /\ntype DatepickerFieldProps = {\n id: string;\n disabled?: boolean;\n locked?: boolean;\n onChange?: (date: Date) => void;\n hasError?: boolean;\n value?: Date;\n dateFormat?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n yearPicker?: boolean;\n yearsBeforeCurrentDate?: number;\n yearsAfterCurrentDate?: number;\n margin?: string;\n};\n\n/\n Add custom styles.\n /\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n \n .react-datepicker-popper{\n z-index: ${Z_INDEXES.dropdown}; \n }\n\n > div {\n display: block;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 32px;\n width: 32px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ${COLORS.primary_20};\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: 336px;\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ${COLORS.neutral_20};\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ${COLORS.neutral_200};\n background: ${COLORS.neutral_20};\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n padding-top: 0px;\n }\n\n .react-datepicker__current-month {\n height: 48px;\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ${scrollBarStyling}\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__day-name {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n margin: 0px;\n width: 48px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n }\n\n .react-datepicker__year-text {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n\n &.react-datepicker__year-text--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n }\n\n .react-datepicker__day {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n\n &.react-datepicker__day--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ${COLORS.neutral_700};\n background: ${COLORS.neutral_100};\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n }\n }\n }\n`;\n\nconst DatepickerRow = styled.div<{ disabled?: boolean; locked?: boolean }>`\n display: flex;\n flex-direction: row;\n position: relative;\n\n > button {\n position: absolute;\n right: 4px;\n top: 4px;\n\n svg {\n }\n }\n\n ${(props) =>\n props?.disabled \|\| props?.locked\n ? ''\n : css`\n &:hover {\n svg,\n svg path {\n fill: ${COLORS.primary_600} !important;\n }\n }\n `}\n &:focus-within {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n cursor: pointer;\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n &:disabled {\n box-shadow: none;\n background-color: ${COLORS.white};\n span {\n color: ${COLORS.neutral_300};\n }\n &::after {\n background-color: ${COLORS.white};\n }\n }\n`;\n\nconst DatepickerField = ({\n id,\n disabled,\n locked,\n onChange,\n hasError,\n value,\n validationMessage,\n dateFormat,\n autoComplete,\n placeholder,\n required,\n yearPicker,\n yearsBeforeCurrentDate,\n yearsAfterCurrentDate,\n margin,\n}: DatepickerFieldProps) => {\n // Globally used variables within the component\n const inputRef = React.useRef<any>(null);\n const datepickerRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n const [openAt, setOpenAt] = React.useState<Date \| null>(null);\n const supressFocusRef = React.useRef<any>(null);\n\n /\n Format the date in a specific way.\n /\n React.useEffect(() => {\n if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n }, [value]);\n\n React.useEffect(() => {\n if (yearPickerMode) {\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n //we have to touch DOM directly\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n const dropdownParent = selectedDate?.parentElement?.parentElement;\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 selectedDate.offsetHeight;\n }\n }, [yearPickerMode]);\n\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n //otherwise after year selection datepicker will show January month of the selected year\n React.useEffect(() => {\n if (openAt) {\n datepickerRef.current.setOpen(true);\n //setOpenAt(null);\n }\n }, [openAt]);\n\n const handleCalendarOpen = () => {\n if (openAt) setOpenAt(null);\n };\n\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n //itemsNumber - controls number of year select options generated in the dropdown\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n return (\n <>\n {/* Let's render the input itself /}\n <DatePickerContainer yearPicker={yearPickerMode} margin={margin \|\| ''}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onChange={(e: any) => {\n if (onChange) {\n if (yearPickerMode) {\n const newDate = new Date();\n newDate.setFullYear(e.getFullYear());\n newDate.setMonth(activeMonthPage);\n setOpenAt(newDate);\n } else onChange(e);\n }\n if (yearPickerMode) setYearPickerMode(false);\n }}\n disabled={disabled \|\| locked}\n locale={en}\n showYearPicker={yearPickerMode}\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n maxDate={yearPickerMode ? maxDate : undefined}\n selected={value}\n openToDate={openAt ?? undefined}\n shouldCloseOnSelect={true}\n renderCustomHeader={\n yearPicker\n ? (params: DatepickerFieldHeaderParams) =>\n React.createElement(\n DatepickerFieldHeader,\n { ...params, setActiveMonthPage, customHeaderCount: 0, yearPickerMode: yearPickerMode, setYearPickerMode: setYearPickerMode },\n null,\n )\n : undefined\n }\n customInput={\n <InputWrapper disabled={disabled} locked={locked} tabIndex={disabled ? -1 : 0}>\n <div style={{ display: 'block' }}>\n <DatepickerRow locked={locked} disabled={disabled}>\n <StyledInputFieldStyling\n id={id}\n ref={inputRef}\n type=\"text\"\n name=\"datepicker\"\n readOnly={true}\n className={hasError ? 'error' : ''}\n tabIndex={0}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n locked={locked}\n required={required}\n tabbedHere={tabbedHere}\n onBlur={() => setTabbedHere(false)}\n onMouseDown={(e: any) => {\n if (!(locked \|\| disabled) && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!(locked \|\| disabled)) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n />\n <IconButton variant=\"secondary\" shape=\"square\" tabIndex={-1} action={() => {}} disabled={disabled \|\| locked}>\n <Calendar size=\"24\" />\n </IconButton>\n </DatepickerRow>\n </div>\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/ If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}
1	+ {"version":3,"sources":["../../../src/InputFields/DatepickerField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","dateFormat","validationMessage","autoComplete","placeholder","required","yearPicker","yearsBeforeCurrentDate","yearsAfterCurrentDate","margin","DatePickerContainer","styled","div","props","COLORS","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","ComponentSStyling","ComponentTextStyle","scrollBarStyling","ComponentMStyling","white","neutral_600","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","css","primary_600","StyledInputFieldStyling","primary_200","primary_300","neutral_300","DatepickerField","inputRef","React","datepickerRef","supressFocusRef","moment","selectedDate","document","dropdownParent","handleCalendarOpen","setOpenAt","maxDate","minDate","itemsNumber","Math","e","newDate","setYearPickerMode","yearPickerMode","openAt","params","customHeaderCount","display","setTabbedHere","critical_400"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;;AA2BA;AACA;AACA;;AAmBA;AACA;AACA;AACA,QAAMe,mBAAmB,GAAGC,2BAAOC,GAA6C;AAChF;AACA;AACA,MAAOC,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACJ,MAAhCI,GAAAA,GAA4C,EAAI;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,iBAAOC,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBD,iBAAOE,WAAY;AACzC,mCAAmCF,iBAAOG,QAAS,iBAAgBH,iBAAOI,KAAM;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BJ,iBAAOK,UAAW;AAC/C;AACA;AACA;AACA,iCAAiCL,iBAAOM,WAAY;AACpD,oBAAoBN,iBAAOK,UAAW;AACtC,gBAAiBN,KAAD,IAAY,CAACA,KAAK,CAAN,UAAA,GAAA,MAAA,GAA6B,MAAQ;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQQ,mCAAkBC,2BAAD,IAAjBD,EAA2CP,iBAA1B,WAAjBO,CAA+D;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,QAAQE,wBAAiB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBF,2BAAD,OAAjBE,EAA8CV,iBAA7B,WAAjBU,CAAkE;AAC1E;AACA;AACA;AACA,oBAAoBV,iBAAOW,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQD,mCAAkBF,2BAAD,OAAjBE,EAA8CV,iBAA7B,WAAjBU,CAAkE;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBV,iBAAOY,WAAY;AACpC,sBAAsBZ,iBAAOW,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiBX,iBAAOa,WAAY;AACpC,sBAAsBb,iBAAOC,UAAW;AACxC;AACA;AACA;AACA,iBAAiBD,iBAAOc,WAAY;AACpC,sBAAsBd,iBAAOE,WAAY;AACzC,mCAAmCF,iBAAOG,QAAS,iBAAgBH,iBAAOI,KAAM;AAChF;AACA;AACA;AACA;AACA,iBAAiBJ,iBAAOW,KAAM;AAC9B,sBAAsBX,iBAAOe,WAAY;AACzC;AACA;AACA;AACA;AACA,oBAAoBf,iBAAOW,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQD,mCAAkBF,2BAAD,OAAjBE,EAA8CV,iBAA7B,WAAjBU,CAAkE;AAC1E;AACA,iBAAiBV,iBAAOY,WAAY;AACpC,sBAAsBZ,iBAAOW,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiBX,iBAAOa,WAAY;AACpC,sBAAsBb,iBAAOC,UAAW;AACxC;AACA;AACA;AACA,iBAAiBD,iBAAOc,WAAY;AACpC,sBAAsBd,iBAAOE,WAAY;AACzC,mCAAmCF,iBAAOG,QAAS,iBAAgBH,iBAAOI,KAAM;AAChF;AACA;AACA;AACA;AACA,iBAAiBJ,iBAAOW,KAAM;AAC9B,sBAAsBX,iBAAOe,WAAY;AACzC;AACA;AACA;AACA;AACA,iBAAiBf,iBAAOgB,WAAY;AACpC,sBAAsBhB,iBAAOiB,WAAY;AACzC;AACA;AACA,mBAAmBjB,iBAAOa,WAAY;AACtC,wBAAwBb,iBAAOC,UAAW;AAC1C;AACA;AACA;AACA,mBAAmBD,iBAAOc,WAAY;AACtC,wBAAwBd,iBAAOE,WAAY;AAC3C,qCAAqCF,iBAAOG,QAAS,iBAAgBH,iBAAOI,KAAM;AAClF;AACA;AACA;AACA;AACA;AA3NA,CAAA;AA8NA,QAAMc,aAAa,GAAGrB,2BAAOC,GAA8C;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IACAA,KAAK,EAALA,QAAAA,IAAmBA,KAAK,EAAxBA,MAAAA,GAAAA,EAAAA,GAEIoB,qBAAI;AACZ;AACA;AACA;AACA,sBAAsBnB,iBAAOoB,WAAY;AACzC;AACA;AACA,SAAU;AACV;AACA,gDAAgDpB,iBAAOc,WAAY;AACnE,6CAA6Cd,iBAAOc,WAAY;AAChE,wCAAwCd,iBAAOc,WAAY;AAC3D;AA7BA,CAAA;AAgCA,QAAMO,uBAAuB,GAAGxB,gCAAM,0BAANA,CAA0B;AAC1D;AACA,wCAAwCG,iBAAOsB,WAAY;AAC3D;AACA,eAAetB,iBAAOoB,WAAY;AAClC;AACA;AACA,wBAAwBpB,iBAAOC,UAAW;AAC1C,aAAaD,iBAAOoB,WAAY;AAChC;AACA;AACA,wBAAwBpB,iBAAOE,WAAY;AAC3C,aAAaF,iBAAOc,WAAY;AAChC,wCAAwCd,iBAAOuB,WAAY;AAC3D;AACA,eAAevB,iBAAOc,WAAY;AAClC;AACA;AACA;AACA;AACA,wBAAwBd,iBAAOW,KAAM;AACrC;AACA,eAAeX,iBAAOwB,WAAY;AAClC;AACA;AACA,0BAA0BxB,iBAAOW,KAAM;AACvC;AACA;AA3BA,CAAA;;AA8BA,QAAMc,eAAe,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IAAA,MAAA;AAAA,IAAA,QAAA;AAAA,IAAA,QAAA;AAAA,IAAA,KAAA;AAAA,IAAA,iBAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,WAAA;AAAA,IAAA,QAAA;AAAA,IAAA,UAAA;AAAA,IAAA,sBAAA;AAAA,IAAA,qBAAA;AAevB9B,IAAAA;AAfuB,GAAD,KAgBI;AAC1B;AACA,UAAM+B,QAAQ,GAAGC,KAAK,CAALA,MAAAA,CAAjB,IAAiBA,CAAjB;AACA,UAAMC,aAAa,GAAGD,KAAK,CAALA,MAAAA,CAAtB,IAAsBA,CAAtB;AACA,UAAM,CAAA,UAAA,EAAA,aAAA,IAA8BA,KAAK,CAALA,QAAAA,CAApC,KAAoCA,CAApC;AACA,UAAM,CAAA,eAAA,EAAA,kBAAA,IAAwCA,KAAK,CAALA,QAAAA,CAAuB,CAArE,CAA8CA,CAA9C;AACA,UAAM,CAAA,cAAA,EAAA,iBAAA,IAAsCA,KAAK,CAALA,QAAAA,CAA5C,KAA4CA,CAA5C;AACA,UAAM,CAAA,MAAA,EAAA,SAAA,IAAsBA,KAAK,CAALA,QAAAA,CAA5B,IAA4BA,CAA5B;AACA,UAAME,eAAe,GAAGF,KAAK,CAALA,MAAAA,CAAxB,IAAwBA,CAAxB;AAEA;AACF;AACA;;AACEA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAA,KAAA,EAAWD,QAAQ,CAARA,OAAAA,CAAAA,KAAAA,GAAyBI,sBAAAA,KAAAA,EAAAA,MAAAA,CAAqB3C,UAAU,GAAA,UAAA,GAAxDuC,eAAyBI,CAAzBJ;AADbC,KAAAA,EAEG,CAFHA,KAEG,CAFHA;AAIAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAA,cAAA,EAAoB;AAClB;AACA;AACA,cAAMI,YAAY,GAAGC,QAAQ,CAARA,sBAAAA,CAAAA,uCAAAA,EAArB,CAAqBA,CAArB;AACA,cAAMC,cAAc,GAAGF,YAAY,EAAZA,aAAAA,EAAvB,aAAA;AACA,YAAIA,YAAY,IAAhB,cAAA,EAAoCE,cAAc,CAAdA,SAAAA,GAA2BF,YAAY,CAAZA,SAAAA,GAAyB,IAAIA,YAAY,CAApEE,YAAAA;AACrC;AAPHN,KAAAA,EAQG,CAzBuB,cAyBvB,CARHA,EAjB0B,CA2B1B;AACA;;AACAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAA,MAAA,EAAY;AACVC,QAAAA,aAAa,CAAbA,OAAAA,CAAAA,OAAAA,CADU,IACVA,EADU,CAEV;AACD;AAJHD,KAAAA,EAKG,CALHA,MAKG,CALHA;;AAOA,UAAMO,kBAAkB,GAAG,MAAM;AAC/B,UAAA,MAAA,EAAYC,SAAS,CAATA,IAAS,CAATA;AADd,KAAA;;AAIA,QAAIC,OAAO,GAAG,IAAA,IAAA,CAASlD,KAAK,IAAI,IAAA,IAAA,CAAA,KAAA,IAAkB,IAA3BA,IAA2B,EAA3BA,GAAwC,IAAA,IAAA,CAAxCA,KAAwC,CAAxCA,GAA0D,IAAjF,IAAiF,EAAnE,CAAd;AACAkD,IAAAA,OAAO,CAAPA,WAAAA,CAAoBA,OAAO,CAAPA,WAAAA,MAAyB1C,qBAAqB,IAzCxC,EAyCN0C,CAApBA,EAzC0B,CA2C1B;AACA;;AACA,QAAIC,OAAO,GAAG,IAAA,IAAA,CAASnD,KAAK,IAAI,IAAA,IAAA,CAAA,KAAA,IAAkB,IAA3BA,IAA2B,EAA3BA,GAAwC,IAAA,IAAA,CAAxCA,KAAwC,CAAxCA,GAA0D,IAAjF,IAAiF,EAAnE,CAAd;AACA,UAAMoD,WAAW,GAAGC,IAAI,CAAJA,KAAAA,CAAW,CAACF,OAAO,CAAPA,WAAAA,MAAyB5C,sBAAsB,IAAhD,EAAC4C,CAAD,IAA/B,CAAoBE,CAApB;AAEA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAqB,MAAA,UAAU,EAA/B,cAAA;AAAiD,MAAA,MAAM,EAAE5C,MAAM,IAAI;AAAnE,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AACE,MAAA,GAAG,EADL,aAAA;AAEE,MAAA,cAAc,EAFhB,kBAAA;AAGE,MAAA,QAAQ,EAAG6C,CAAD,IAAY;AACpB,YAAA,QAAA,EAAc;AACZ,cAAA,cAAA,EAAoB;AAClB,kBAAMC,OAAO,GAAG,IAAhB,IAAgB,EAAhB;AACAA,YAAAA,OAAO,CAAPA,WAAAA,CAAoBD,CAAC,CAArBC,WAAoBD,EAApBC;AACAA,YAAAA,OAAO,CAAPA,QAAAA,CAAAA,eAAAA;AACAN,YAAAA,SAAS,CAATA,OAAS,CAATA;AAJF,WAAA,MAKOnD,QAAQ,CAARA,CAAQ,CAARA;AACR;;AACD,YAAA,cAAA,EAAoB0D,iBAAiB,CAAjBA,KAAiB,CAAjBA;AAZxB,OAAA;AAcE,MAAA,QAAQ,EAAE5D,QAAQ,IAdpB,MAAA;AAeE,MAAA,MAAM,EAfR,cAAA;AAgBE,MAAA,cAAc,EAhBhB,cAAA,CAiBE;AAjBF;AAkBE,MAAA,cAAc,EAAE6D,cAAc,GAAA,WAAA,GAlBhC,SAAA;AAmBE,MAAA,OAAO,EAAEA,cAAc,GAAA,OAAA,GAnBzB,SAAA;AAoBE,MAAA,QAAQ,EApBV,KAAA;AAqBE,MAAA,UAAU,EAAEC,MAAM,IArBpB,SAAA;AAsBE,MAAA,mBAAmB,EAtBrB,IAAA;AAuBE,MAAA,kBAAkB,EAChBpD,UAAU,GACLqD,MAAD,IAAA,aACE,KAAK,CAAL,aAAA,CAAA,4CAAA,EAAA,aAAA,CAAA,aAAA,CAAA,EAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA;AAAA,QAAA,kBAAA;AAEmCC,QAAAA,iBAAiB,EAFpD,CAAA;AAEyDH,QAAAA,cAAc,EAFvE,cAAA;AAEyFD,QAAAA,iBAAiB,EAAEA;AAF5G,OAAA,CAAA,EAFI,IAEJ,CAFI,GAxBd,SAAA;AAiCE,MAAA,WAAW,EAAA,aACT,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAc,QAAA,QAAQ,EAAtB,QAAA;AAAkC,QAAA,MAAM,EAAxC,MAAA;AAAkD,QAAA,QAAQ,EAAE5D,QAAQ,GAAG,CAAH,CAAA,GAAQ;AAA5E,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,QAAA,KAAK,EAAE;AAAEiE,UAAAA,OAAO,EAAE;AAAX;AAAZ,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAe,QAAA,MAAM,EAArB,MAAA;AAA+B,QAAA,QAAQ,EAAEjE;AAAzC,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA;AACE,QAAA,EAAE,EADJ,EAAA;AAEE,QAAA,GAAG,EAFL,QAAA;AAGE,QAAA,IAAI,EAHN,MAAA;AAIE,QAAA,IAAI,EAJN,YAAA;AAKE,QAAA,QAAQ,EALV,IAAA;AAME,QAAA,SAAS,EAAEG,QAAQ,GAAA,OAAA,GANrB,EAAA;AAOE,QAAA,QAAQ,EAPV,CAAA;AAQE,QAAA,YAAY,EARd,YAAA;AASE,QAAA,WAAW,EATb,WAAA;AAUE,QAAA,QAAQ,EAVV,QAAA;AAWE,QAAA,MAAM,EAXR,MAAA;AAYE,QAAA,QAAQ,EAZV,QAAA;AAaE,QAAA,UAAU,EAbZ,UAAA;AAcE,QAAA,MAAM,EAAE,MAAM+D,aAAa,CAd7B,KAc6B,CAd7B;AAeE,QAAA,WAAW,EAAGR,CAAD,IAAY;AACvB,cAAI,EAAEzD,MAAM,IAAR,QAAA,KAAyB,CAA7B,UAAA,EAA0C8C,eAAe,CAAfA,OAAAA,GAAAA,IAAAA;AAhB9C,SAAA;AAkBE,QAAA,OAAO,EAAGW,CAAD,IAAY;AACnB,cAAI,EAAEzD,MAAM,IAAZ,QAAI,CAAJ,EAA2B;AACzB,gBAAI,CAAC8C,eAAe,CAApB,OAAA,EAA8BmB,aAAa,CAA3C,IAA2C,CAAbA,CAA9B,KACKnB,eAAe,CAAfA,OAAAA,GAAAA,KAAAA;AACN;AACF;AAvBH,OAAA,CADF,EAAA,aA0BE,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAY,QAAA,OAAO,EAAnB,WAAA;AAAgC,QAAA,KAAK,EAArC,QAAA;AAA+C,QAAA,QAAQ,EAAE,CAAzD,CAAA;AAA6D,QAAA,MAAM,EAAE,MAAM,CAA3E,CAAA;AAA+E,QAAA,QAAQ,EAAE/C,QAAQ,IAAIC;AAArG,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAU,QAAA,IAAI,EAAC;AAAf,OAAA,CADF,CA1BF,CADF,CADF;AAlCJ,KAAA,CADF,CAFF,EA4EGK,iBAAiB,IAAA,aAChB,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,MAAA,IAAI,EAAtB,MAAA;AAA8B,MAAA,KAAK,EAAEY,iBAAOiD;AAA5C,KAAA,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAhFR,iBAgFQ,CAFF,CA7EJ,CADF;AAhEF,GAAA;;;AAhTEpE,IAAAA,E;AACAC,IAAAA,Q;AACAC,IAAAA,M;AACAC,IAAAA,Q;AACAC,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,U;AACAC,IAAAA,iB;AACAC,IAAAA,Y;AACAC,IAAAA,W;AACAC,IAAAA,Q;AACAC,IAAAA,U;AACAC,IAAAA,sB;AACAC,IAAAA,qB;AACAC,IAAAA,M;;oBAybF,e","sourcesContent":["/*\n Import react libraries.\n /\nimport as React from 'react';\n\n/*\n Import third-party libraries.\n /\nimport styled, {css} from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/\n Import custom components.\n /\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button/index';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, scrollBarStyling} from '../styles';\n\n/\n Import custom styles.\n /\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\n/\n Add custom types.\n /\ntype DatepickerFieldProps = {\n id: string;\n disabled?: boolean;\n locked?: boolean;\n onChange?: (date: Date) => void;\n hasError?: boolean;\n value?: Date;\n dateFormat?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n yearPicker?: boolean;\n yearsBeforeCurrentDate?: number;\n yearsAfterCurrentDate?: number;\n margin?: string;\n};\n\n/\n Add custom styles.\n /\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n > div {\n display: block;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 32px;\n width: 32px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ${COLORS.primary_20};\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: 336px;\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ${COLORS.neutral_20};\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ${COLORS.neutral_200};\n background: ${COLORS.neutral_20};\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n padding-top: 0px;\n }\n\n .react-datepicker__current-month {\n height: 48px;\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ${scrollBarStyling}\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__day-name {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n margin: 0px;\n width: 48px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n }\n\n .react-datepicker__year-text {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n\n &.react-datepicker__year-text--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n }\n\n .react-datepicker__day {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n\n &.react-datepicker__day--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ${COLORS.neutral_700};\n background: ${COLORS.neutral_100};\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n }\n }\n }\n`;\n\nconst DatepickerRow = styled.div<{ disabled?: boolean; locked?: boolean }>`\n display: flex;\n flex-direction: row;\n position: relative;\n\n > button {\n position: absolute;\n right: 4px;\n top: 4px;\n\n svg {\n }\n }\n\n ${(props) =>\n props?.disabled \|\| props?.locked\n ? ''\n : css`\n &:hover {\n svg,\n svg path {\n fill: ${COLORS.primary_600} !important;\n }\n }\n `}\n &:focus-within {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n cursor: pointer;\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n &:disabled {\n box-shadow: none;\n background-color: ${COLORS.white};\n span {\n color: ${COLORS.neutral_300};\n }\n &::after {\n background-color: ${COLORS.white};\n }\n }\n`;\n\nconst DatepickerField = ({\n id,\n disabled,\n locked,\n onChange,\n hasError,\n value,\n validationMessage,\n dateFormat,\n autoComplete,\n placeholder,\n required,\n yearPicker,\n yearsBeforeCurrentDate,\n yearsAfterCurrentDate,\n margin,\n}: DatepickerFieldProps) => {\n // Globally used variables within the component\n const inputRef = React.useRef<any>(null);\n const datepickerRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n const [openAt, setOpenAt] = React.useState<Date \| null>(null);\n const supressFocusRef = React.useRef<any>(null);\n\n /\n Format the date in a specific way.\n /\n React.useEffect(() => {\n if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n }, [value]);\n\n React.useEffect(() => {\n if (yearPickerMode) {\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n //we have to touch DOM directly\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n const dropdownParent = selectedDate?.parentElement?.parentElement;\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 selectedDate.offsetHeight;\n }\n }, [yearPickerMode]);\n\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n //otherwise after year selection datepicker will show January month of the selected year\n React.useEffect(() => {\n if (openAt) {\n datepickerRef.current.setOpen(true);\n //setOpenAt(null);\n }\n }, [openAt]);\n\n const handleCalendarOpen = () => {\n if (openAt) setOpenAt(null);\n };\n\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n //itemsNumber - controls number of year select options generated in the dropdown\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n return (\n <>\n {/* Let's render the input itself /}\n <DatePickerContainer yearPicker={yearPickerMode} margin={margin \|\| ''}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onChange={(e: any) => {\n if (onChange) {\n if (yearPickerMode) {\n const newDate = new Date();\n newDate.setFullYear(e.getFullYear());\n newDate.setMonth(activeMonthPage);\n setOpenAt(newDate);\n } else onChange(e);\n }\n if (yearPickerMode) setYearPickerMode(false);\n }}\n disabled={disabled \|\| locked}\n locale={en}\n showYearPicker={yearPickerMode}\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n maxDate={yearPickerMode ? maxDate : undefined}\n selected={value}\n openToDate={openAt ?? undefined}\n shouldCloseOnSelect={true}\n renderCustomHeader={\n yearPicker\n ? (params: DatepickerFieldHeaderParams) =>\n React.createElement(\n DatepickerFieldHeader,\n { ...params, setActiveMonthPage, customHeaderCount: 0, yearPickerMode: yearPickerMode, setYearPickerMode: setYearPickerMode },\n null,\n )\n : undefined\n }\n customInput={\n <InputWrapper disabled={disabled} locked={locked} tabIndex={disabled ? -1 : 0}>\n <div style={{ display: 'block' }}>\n <DatepickerRow locked={locked} disabled={disabled}>\n <StyledInputFieldStyling\n id={id}\n ref={inputRef}\n type=\"text\"\n name=\"datepicker\"\n readOnly={true}\n className={hasError ? 'error' : ''}\n tabIndex={0}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n locked={locked}\n required={required}\n tabbedHere={tabbedHere}\n onBlur={() => setTabbedHere(false)}\n onMouseDown={(e: any) => {\n if (!(locked \|\| disabled) && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!(locked \|\| disabled)) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n />\n <IconButton variant=\"secondary\" shape=\"square\" tabIndex={-1} action={() => {}} disabled={disabled \|\| locked}>\n <Calendar size=\"24\" />\n </IconButton>\n </DatepickerRow>\n </div>\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/ If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}

package/dist/umd/InputFields/PasswordField.js CHANGED Viewed

@@ -84,7 +84,7 @@
   margin-left: -40px;
   margin-top: 8px;
   position: relative;
-  z-index: 1;
+  z-index: 2;
   height: 30px;
   width: 30px;

package/dist/umd/InputFields/PasswordField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","StyledPassSwitch","styled","div","BREAKPOINTS","MEDIUM","PasswordRow","PasswordField","React","inputRef","handleKeyDown","e","setPasswordHidden","setTabbedHere","display","passwordHidden"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { InputFieldStyling, InputWrapper } from './styling';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype PasswordFieldProps = {\n id: string;\n disabled?: boolean;\n locked?: boolean;\n onChange?: (text: string) => void;\n hasError?: boolean;\n value?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n readOnly?: boolean;\n size?: 'small' \| 'medium';\n margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n float: right;\n margin-left: -40px;\n margin-top: 8px;\n position: relative;\n z-index: 1;\n height: 30px;\n width: 30px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin-top: 12px;\n }\n\n &.small {\n margin-top: 8px;\n }\n\n &.medium {\n margin-top: 12px;\n }\n\n svg {\n cursor: pointer;\n }\n div {\n &:focus {\n outline: none;\n svg {\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n border-radius: 4px;\n }\n }\n }\n`;\n\nconst PasswordRow = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n const inputRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const handleKeyDown = (e: any) => {\n if (e.keyCode === 13) {\n setPasswordHidden(!passwordHidden);\n }\n };\n return (\n <>\n <InputWrapper\n disabled={disabled}\n locked={locked}\n margin={margin}\n tabIndex={disabled ? -1 : 0}\n onFocus={(e: any) => {\n if (!e?.target?.id.includes(id) && !disabled && !locked) {\n setTabbedHere(true);\n inputRef.current.focus();\n }\n }}>\n <div style={{ display: 'block' }}>\n <PasswordRow>\n <InputFieldStyling\n id={id}\n ref={inputRef}\n type={passwordHidden ? 'password' : 'text'}\n name=\"password\"\n value={value}\n className={(hasError ? 'error' : '').concat(size ? size : '')}\n tabIndex={-1}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n locked={locked}\n required={required}\n readOnly={readOnly}\n onChange={(e: any) => onChange && onChange(e?.target?.value \|\| '')}\n tabbedHere={tabbedHere}\n onBlur={() => setTabbedHere(false)}\n />\n <StyledPassSwitch className={size ? size : ''}>\n {!disabled && !locked ? (\n passwordHidden ? (\n <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n fill=\"#666666\"></path>\n </svg>\n </div>\n ) : (\n <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n fill=\"#666666\"\n />\n <path\n d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n fill=\"#666666\"\n />\n </svg>\n </div>\n )\n ) : null}\n </StyledPassSwitch>\n </PasswordRow>\n </div>\n </InputWrapper>\n {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n </>\n );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}
1	+ {"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","StyledPassSwitch","styled","div","BREAKPOINTS","MEDIUM","PasswordRow","PasswordField","React","inputRef","handleKeyDown","e","setPasswordHidden","setTabbedHere","display","passwordHidden"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { InputFieldStyling, InputWrapper } from './styling';\n\ntype PasswordFieldProps = {\n id: string;\n disabled?: boolean;\n locked?: boolean;\n onChange?: (text: string) => void;\n hasError?: boolean;\n value?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n readOnly?: boolean;\n size?: 'small' \| 'medium';\n margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n float: right;\n margin-left: -40px;\n margin-top: 8px;\n position: relative;\n z-index: 2;\n height: 30px;\n width: 30px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin-top: 12px;\n }\n\n &.small {\n margin-top: 8px;\n }\n\n &.medium {\n margin-top: 12px;\n }\n\n svg {\n cursor: pointer;\n }\n div {\n &:focus {\n outline: none;\n svg {\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n border-radius: 4px;\n }\n }\n }\n`;\n\nconst PasswordRow = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n const inputRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const handleKeyDown = (e: any) => {\n if (e.keyCode === 13) {\n setPasswordHidden(!passwordHidden);\n }\n };\n return (\n <>\n <InputWrapper\n disabled={disabled}\n locked={locked}\n margin={margin}\n tabIndex={disabled ? -1 : 0}\n onFocus={(e: any) => {\n if (!e?.target?.id.includes(id) && !disabled && !locked) {\n setTabbedHere(true);\n inputRef.current.focus();\n }\n }}>\n <div style={{ display: 'block' }}>\n <PasswordRow>\n <InputFieldStyling\n id={id}\n ref={inputRef}\n type={passwordHidden ? 'password' : 'text'}\n name=\"password\"\n value={value}\n className={(hasError ? 'error' : '').concat(size ? size : '')}\n tabIndex={-1}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n locked={locked}\n required={required}\n readOnly={readOnly}\n onChange={(e: any) => onChange && onChange(e?.target?.value \|\| '')}\n tabbedHere={tabbedHere}\n onBlur={() => setTabbedHere(false)}\n />\n <StyledPassSwitch className={size ? size : ''}>\n {!disabled && !locked ? (\n passwordHidden ? (\n <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n fill=\"#666666\"></path>\n </svg>\n </div>\n ) : (\n <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n fill=\"#666666\"\n />\n <path\n d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n fill=\"#666666\"\n />\n </svg>\n </div>\n )\n ) : null}\n </StyledPassSwitch>\n </PasswordRow>\n </div>\n </InputWrapper>\n {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n </>\n );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}

package/dist/umd/List/ListRow.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../styles", "../styles/typography", "../Tooltips", "../Dropdown", "../icons", "../types", "../styles/z-indexes"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../styles/typography", "../Tooltips", "../Dropdown", "../icons", "../types"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../styles/typography"), require("../Tooltips"), require("../Dropdown"), require("../icons"), require("../types"), require("../styles/z-indexes"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../styles/typography"), require("../Tooltips"), require("../Dropdown"), require("../icons"), require("../types"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.typography, global.Tooltips, global.Dropdown, global.icons, global.types, global.zIndexes);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.typography, global.Tooltips, global.Dropdown, global.icons, global.types);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _typography, _Tooltips, _Dropdown, _icons, _types, _zIndexes) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _typography, _Tooltips, _Dropdown, _icons, _types) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -123,20 +123,18 @@
   &.interactive:hover:not(.in-action):not(.disabled) {
     background-color: ${_styles.COLORS.primary_20};
     color: ${_styles.COLORS.primary_700};
-    z-index: ${_zIndexes.Z_INDEXES.hover};
   }
   &.interactive:active:not(.in-action):not(.disabled) {
     background-color: ${_styles.COLORS.primary_100};
     color: ${_styles.COLORS.primary_800};
     box-shadow: none;
-    z-index: ${_zIndexes.Z_INDEXES.active};
   }
   &.interactive:focus {
     outline: none;
     box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
-    z-index: ${_zIndexes.Z_INDEXES.focus};
+    z-index: 1;
   }
   &.disabled {

package/dist/umd/List/ListRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focus","neutral_300","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","ComponentXXSStyling","ComponentXSStyling","variant","icon","mainText","secondaryText","note","noteTooltip","disabled","action","ListRow","size","Size","React","handleKeyPress","e","rowClassName","inAction","setInAction","dropdown"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,QAAMA,GAAG,GAAGC,2BAAOC,GAAI;AACvB;AACA;AACA;AACA;AACA,6BAA6BC,eAAOC,WAAY;AAChD;AACA;AACA;AACA,WAAWD,eAAOE,WAAY;AAC9B,sBAAsBF,eAAOG,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBH,eAAOI,UAAW;AAC1C,aAAaJ,eAAOK,WAAY;AAChC,eAAeC,oBAAUC,KAAM;AAC/B;AACA;AACA;AACA,wBAAwBP,eAAOQ,WAAY;AAC3C,aAAaR,eAAOS,WAAY;AAChC;AACA,eAAeH,oBAAUI,MAAO;AAChC;AACA;AACA;AACA;AACA;AACA,eAAeJ,oBAAUK,KAAM;AAC/B;AACA;AACA;AACA;AACA,eAAeX,eAAOY,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBC,2BAAD,OAAjBD,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQE,mCAAkBD,2BAAD,OAAjBC,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBF,2BAAD,OAAjBE,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,qCAAoBH,2BAAD,OAAnBG,EAAmB,IAAnBA,CAAsD;AAC5D;AACA;AACA;AACA,aA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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Row = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n position: relative;\n\n color: ${COLORS.neutral_600};\n background-color: ${COLORS.white};\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n\n &.interactive:focus {\n outline: none;\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n z-index: ${Z_INDEXES.focus};\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ${COLORS.neutral_300};\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note {\n color: ${COLORS.neutral_600};\n word-break: initial;\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n color: ${COLORS.neutral_600};\n display: flex;\n align-items: center;\n\n button div {\n background-color: transparent;\n }\n }\n`;\n\n\ntype Props = {\n size?: Size;\n variant?: 'normal' \| 'overlay';\n icon?: React.ReactNode;\n mainText: string;\n secondaryText?: string;\n dropdown?: Pick<DropdownButtonProps, 'items' \| 'onClick' \| 'disabled' \| 'width'>;\n note?: string;\n noteTooltip?: string;\n disabled?: boolean;\n action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n size = Size.Medium,\n variant = 'normal',\n icon,\n mainText,\n secondaryText,\n dropdown,\n note,\n noteTooltip,\n disabled = false,\n action\n }: Props) => {\n\n const [inAction, setInAction] = React.useState<Boolean>(false);\n\n const handleKeyPress = (e: any) => {\n if (e.key === 'Enter') {\n action && action()\n }\n }\n\n const rowClassName = (inAction ? 'in-action ' : '')\n .concat(disabled ? 'disabled ' : '')\n .concat(!!action ? 'interactive ' : '')\n .concat('list-item-row ')\n .concat(`${variant} `)\n .concat(`${size}`);\n\n return (\n <Row tabIndex={!!action && !disabled ? 0 : undefined}\n className={rowClassName}\n onKeyPress={(e) => !disabled && handleKeyPress(e)}\n onClick={e => {\n !disabled && action && action();\n }}\n data-hj-suppress>\n {\n !!icon &&\n <div className={'list-item-icon'}>{icon}</div>\n }\n <div className={'list-item-content'}>\n <div className={'list-item-main-text'}>{mainText}</div>\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n </div>\n {\n !!note &&\n <>\n {\n !!noteTooltip &&\n <div className={'list-item-note with-tooltip'}>\n <TooltipWrapper label={noteTooltip}\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n position={'top'}\n withArrow={true}>\n {note}\n </TooltipWrapper>\n </div>\n }\n {\n !noteTooltip &&\n <div className={'list-item-note'}>\n {note}\n </div>\n }\n </>\n }\n {\n !!dropdown &&\n <div className={'list-item-actions'}\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\n onMouseLeave={() => setInAction(false)}>\n <DropdownButton {...dropdown}\n disabled={disabled \|\| dropdown.disabled}\n icon={variant === 'overlay'\n ? <SystemIcons.ArrowDropDown/>\n : <SystemIcons.MoreVertical/>}\n />\n </div>\n }\n </Row>\n );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}
1	+ {"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","primary_100","primary_800","neutral_300","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","ComponentXXSStyling","ComponentXSStyling","variant","icon","mainText","secondaryText","note","noteTooltip","disabled","action","ListRow","size","Size","React","handleKeyPress","e","rowClassName","inAction","setInAction","dropdown"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,QAAMA,GAAG,GAAGC,2BAAOC,GAAI;AACvB;AACA;AACA;AACA;AACA,6BAA6BC,eAAOC,WAAY;AAChD;AACA;AACA;AACA,WAAWD,eAAOE,WAAY;AAC9B,sBAAsBF,eAAOG,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBH,eAAOI,UAAW;AAC1C,aAAaJ,eAAOK,WAAY;AAChC;AACA;AACA;AACA,wBAAwBL,eAAOM,WAAY;AAC3C,aAAaN,eAAOO,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeP,eAAOQ,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBC,2BAAD,OAAjBD,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQE,mCAAkBD,2BAAD,OAAjBC,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBF,2BAAD,OAAjBE,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,qCAAoBH,2BAAD,OAAnBG,EAAmB,IAAnBA,CAAsD;AAC5D;AACA;AACA;AACA,aAAab,eAAOE,WAAY;AAChC;AACA,MAAMY,oCAAmBJ,2BAAD,OAAlBI,EAAkB,IAAlBA,C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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\n\nconst Row = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n position: relative;\n\n color: ${COLORS.neutral_600};\n background-color: ${COLORS.white};\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n\n &.interactive:focus {\n outline: none;\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n z-index: 1;\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ${COLORS.neutral_300};\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note {\n color: ${COLORS.neutral_600};\n word-break: initial;\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n color: ${COLORS.neutral_600};\n display: flex;\n align-items: center;\n\n button div {\n background-color: transparent;\n }\n }\n`;\n\n\ntype Props = {\n size?: Size;\n variant?: 'normal' \| 'overlay';\n icon?: React.ReactNode;\n mainText: string;\n secondaryText?: string;\n dropdown?: Pick<DropdownButtonProps, 'items' \| 'onClick' \| 'disabled' \| 'width'>;\n note?: string;\n noteTooltip?: string;\n disabled?: boolean;\n action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n size = Size.Medium,\n variant = 'normal',\n icon,\n mainText,\n secondaryText,\n dropdown,\n note,\n noteTooltip,\n disabled = false,\n action\n }: Props) => {\n\n const [inAction, setInAction] = React.useState<Boolean>(false);\n\n const handleKeyPress = (e: any) => {\n if (e.key === 'Enter') {\n action && action()\n }\n }\n\n const rowClassName = (inAction ? 'in-action ' : '')\n .concat(disabled ? 'disabled ' : '')\n .concat(!!action ? 'interactive ' : '')\n .concat('list-item-row ')\n .concat(`${variant} `)\n .concat(`${size}`);\n\n return (\n <Row tabIndex={!!action && !disabled ? 0 : undefined}\n className={rowClassName}\n onKeyPress={(e) => !disabled && handleKeyPress(e)}\n onClick={e => {\n !disabled && action && action();\n }}\n data-hj-suppress>\n {\n !!icon &&\n <div className={'list-item-icon'}>{icon}</div>\n }\n <div className={'list-item-content'}>\n <div className={'list-item-main-text'}>{mainText}</div>\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n </div>\n {\n !!note &&\n <>\n {\n !!noteTooltip &&\n <div className={'list-item-note with-tooltip'}>\n <TooltipWrapper label={noteTooltip}\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n position={'top'}\n withArrow={true}>\n {note}\n </TooltipWrapper>\n </div>\n }\n {\n !noteTooltip &&\n <div className={'list-item-note'}>\n {note}\n </div>\n }\n </>\n }\n {\n !!dropdown &&\n <div className={'list-item-actions'}\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\n onMouseLeave={() => setInAction(false)}>\n <DropdownButton {...dropdown}\n disabled={disabled \|\| dropdown.disabled}\n icon={variant === 'overlay'\n ? <SystemIcons.ArrowDropDown/>\n : <SystemIcons.MoreVertical/>}\n />\n </div>\n }\n </Row>\n );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}

package/dist/umd/Modals/ModalContainer.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "react-modal", "../styles", "../styles/z-indexes"], factory);
+    define(["exports", "prop-types", "react", "react-modal", "../styles"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("react-modal"), require("../styles"), require("../styles/z-indexes"));
+    factory(exports, require("prop-types"), require("react"), require("react-modal"), require("../styles"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.reactModal, global.styles, global.zIndexes);
+    factory(mod.exports, global.propTypes, global.react, global.reactModal, global.styles);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _reactModal, _styles, _zIndexes) {
+})(this, function (exports, _propTypes, _react, _reactModal, _styles) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -152,7 +152,7 @@
   const modalTransitions = `
 .ReactModal__Overlay {
   opacity: 0;
-  z-index: ${_zIndexes.Z_INDEXES.backdrop};
+  z-index: 100;
 }
 .ReactModal__Overlay--after-open {
@@ -161,7 +161,6 @@
 }
 .ReactModal__Content{
-  z-index: ${_zIndexes.Z_INDEXES.modal};
   opacity:0;
   transform: translate(-50%, -50%) scale(1.1, 1.1);
 }

package/dist/umd/Modals/ModalContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","~~Z_INDEXES","backdrop","modal","~~id","showModal","closeModal","children","modalHeight","modalWidth","modalOverflow","padding","minWidth","maxWidth","ModalContainer","React","componentDidMount","ReactModal","document","head","style","render","sizes","stylesConfiguration","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAKA~~,QAAMA,oBAAoB,GAAG;AAC3BC,IAAAA,OAAO,EAAE;AACPC,MAAAA,GAAG,EADI,KAAA;AAEPC,MAAAA,IAAI,EAFG,KAAA;AAGPC,MAAAA,KAAK,EAHE,MAAA;AAIPC,MAAAA,MAAM,EAJC,MAAA;AAKPC,MAAAA,WAAW,EALJ,MAAA;AAMPC,MAAAA,KAAK,EANE,OAAA;AAOPC,MAAAA,MAAM,EAPC,OAAA;AAQPC,MAAAA,YAAY,EARL,KAAA;AASPC,MAAAA,SAAS,EATF,YAAA;AAUPC,MAAAA,MAAM,EAVC,CAAA;AAWPC,MAAAA,QAAQ,EAXD,MAAA;AAYPC,MAAAA,SAAS,EAAEC,mBAAWC;AAZf;AADkB,GAA7B,C,CAiBA;;AACA,QAAMC,gBAAgB,GAAI;AAC1B;AACA;AACA~~,aAAaC,oBAAUC,QAAS~~;~~AAChC~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA~~,aAAaD,oBAAUE,KAAM~~;~~AAC7B;~~AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AAhCA~~,CAAA;;~~AAkDA~~,QAAA,cAAA,SAA6BY,KAAK,CAAlC,SAAA,CAAuF;AAAA,IAAA,WAAA,CAAA,GAAA,IAAA,EAAA;AAAA,YAAA,GAAA,IAAA;;AAAA,MAAA,eAAA,CAAA,IAAA,EAAA,SAAA,EAgB3E,CAACP,WAAmB,GAApB,MAAA,EAA+BC,UAAkB,GAAjD,MAAA,MAAgE;~~AAAEjB~~,QAAAA,MAAM,EAAR,WAAA;AAAuBD,QAAAA,KAAK,~~EAAEkB~~;AAA9B,OAAhE,CAhB2E,CAAA;;AAAA,MAAA,eAAA,CAAA,IAAA,EAAA,aAAA,EAiBvE,CAACC,aAAqB,GAAtB,SAAA,KAjBuE,aAAA,CAAA;AAAA;;AACrFM,IAAAA,iBAAiB,GAAG;AAClB,UAAIC,qBAAAA,aAAAA,CAAJ,OAAA,EAAsC;AACpCA,6BAAAA,aAAAA,CAAAA,OAAAA,CAAAA,eAAAA,GAAAA,iBAAAA;AAFgB,OAAA,CAKlB;;;AACA,UAAI,CAACC,QAAQ,CAARA,aAAAA,CAAL,iCAAKA,CAAL,EAAgE;AAC9D,cAAMC,IAAI,GAAGD,QAAQ,CAARA,IAAAA,IAAiBA,QAAQ,CAARA,oBAAAA,CAAAA,MAAAA,EAA9B,CAA8BA,CAA9B;AACA,cAAME,KAAK,GAAGF,QAAQ,CAARA,aAAAA,CAAd,OAAcA,CAAd;AACAE,QAAAA,KAAK,CAALA,YAAAA,CAAAA,sBAAAA,EAAAA,QAAAA;AACAD,QAAAA,IAAI,CAAJA,WAAAA,CAAAA,KAAAA;AACAC,QAAAA,KAAK,CAALA,WAAAA,CAAkBF,QAAQ,CAARA,cAAAA,CAAlBE,gBAAkBF,CAAlBE;AACD;AACF;;AAIDC,IAAAA,MAAM,GAAG;AACP,YAAM;AAAA,QAAA,EAAA;AAAA,QAAA,SAAA;AAAA,QAAA,UAAA;AAAA,QAAA,QAAA;AAAA,QAAA,WAAA;AAAA,QAAA,UAAA;AAAA,QAAA,aAAA;AAAA,QAAA,OAAA;AAAwFT,QAAAA,QAAQ,GAAhG,EAAA;AAAuGC,QAAAA,QAAQ,GAAG;AAAlH,UAAyH,KAA/H,KAAA;AACA,YAAMS,KAAK,GAAG,KAAA,OAAA,CAAA,WAAA,EAAd,UAAc,CAAd;AACA,YAAM;AAAA,QAAA,MAAA;~~AAAU/B~~,QAAAA;AAAV,UAAN,KAAA;AACA,YAAMK,QAAQ,GAAG,KAAA,WAAA,CAAjB,aAAiB,CAAjB;AACA,~~YAAM2B~~,mBAAmB,GAAG,MAAM,CAAN,MAAA,CAAA,aAAA,CAAA,EAAA,~~EAAmBvC~~,oBAAoB,CAAvC,OAAA,CAAA,EAAmD;AAAA,QAAA,MAAA;AAAA,QAAA,KAAA;AAAA,QAAA,OAAA;AAAA,QAAA,QAAA;AAAA,QAAA,QAAA;~~AAA8C6B~~,QAAAA;AAA9C,OAAnD,CAA5B;AACA,YAAMW,MAAM,GAAG;~~AAAEvC~~,QAAAA,OAAO,~~EAAEsC~~;AAAX,OAAf;AAEA,aAAA,aACE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAY,QAAA,EAAE,EAAd,EAAA;AAAoB,QAAA,MAAM,EAA1B,SAAA;AAAuC,QAAA,cAAc,EAArD,GAAA;AAA4D,QAAA,cAAc,EAAE,MAAMjB,UAAlF,EAAA;AAAgG,QAAA,KAAK,EAArG,MAAA;AAA+G,QAAA,UAAU,EAAEY,QAAQ,CAARA,cAAAA,CAAAA,MAAAA,KAAmC;AAA9J,OAAA,EADF,QACE,CADF;AAKD;;AA/BoF;;kBAAjFJ,c;AAdJV,IAAAA,E;AACAC,IAAAA,S;AACAC,IAAAA,U;AACAC,IAAAA,Q;AACAC,IAAAA,W;AACAC,IAAAA,U;AACAC,IAAAA,a;AACAC,IAAAA,O;AACAC,IAAAA,Q;AACAC,IAAAA,Q;;;oBAuCF,c","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\~~nimport {Z_INDEXES} from '../styles/z-indexes';\~~n\nconst ModalContainerStyles = {\n content: {\n top: '50%',\n left: '50%',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n width: '640px',\n height: '320px',\n borderRadius: '8px',\n boxSizing: 'border-box' as any,\n margin: 0,\n overflow: 'auto',\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ~~${Z_INDEXES.backdrop}~~;\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n ~~z-index: ${Z_INDEXES.modal};\n~~ opacity:0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.0, 1.0);\n transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n modalHeight?: any;\n modalWidth?: any;\n modalOverflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n componentDidMount() {\n if (ReactModal.defaultStyles.overlay) {\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n }\n\n //append style node to override modal transition classes\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n const head = document.head \|\| document.getElementsByTagName('head')[0];\n const style = document.createElement('style');\n style.setAttribute('modal-custom-styling', 'active');\n head.appendChild(style);\n style.appendChild(document.createTextNode(modalTransitions));\n }\n }\n\n GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n render() {\n const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n const sizes = this.GetSize(modalHeight, modalWidth);\n const { height, width } = sizes;\n const overflow = this.GetOverflow(modalOverflow);\n const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n const styles = { content: stylesConfiguration };\n\n return (\n <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') \|\| ''}>\n {children}\n </ReactModal>\n );\n }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}
1	+ {"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","id","showModal","closeModal","children","modalHeight","modalWidth","modalOverflow","padding","minWidth","maxWidth","ModalContainer","React","componentDidMount","ReactModal","document","head","style","render","sizes","stylesConfiguration","styles"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\n\nconst ModalContainerStyles = {\n content: {\n top: '50%',\n left: '50%',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n width: '640px',\n height: '320px',\n borderRadius: '8px',\n boxSizing: 'border-box' as any,\n margin: 0,\n overflow: 'auto',\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n opacity: 0;\n z-index: 100;\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n opacity:0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.0, 1.0);\n transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n modalHeight?: any;\n modalWidth?: any;\n modalOverflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n componentDidMount() {\n if (ReactModal.defaultStyles.overlay) {\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n }\n\n //append style node to override modal transition classes\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n const head = document.head \|\| document.getElementsByTagName('head')[0];\n const style = document.createElement('style');\n style.setAttribute('modal-custom-styling', 'active');\n head.appendChild(style);\n style.appendChild(document.createTextNode(modalTransitions));\n }\n }\n\n GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n render() {\n const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n const sizes = this.GetSize(modalHeight, modalWidth);\n const { height, width } = sizes;\n const overflow = this.GetOverflow(modalOverflow);\n const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n const styles = { content: stylesConfiguration };\n\n return (\n <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') \|\| ''}>\n {children}\n </ReactModal>\n );\n }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}

package/dist/umd/NavItem/NavItem.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "styled-components", "../styles", "../styles/typography", "../styles/z-indexes"], factory);
+    define(["exports", "styled-components", "../styles", "../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("styled-components"), require("../styles"), require("../styles/typography"), require("../styles/z-indexes"));
+    factory(exports, require("styled-components"), require("../styles"), require("../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.styledComponents, global.styles, global.typography, global.zIndexes);
+    factory(mod.exports, global.styledComponents, global.styles, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _styledComponents, _styles, _typography, _zIndexes) {
+})(this, function (exports, _styledComponents, _styles, _typography) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -49,7 +49,6 @@
   }
   &.active:not(.disabled) {
-    z-index: ${_zIndexes.Z_INDEXES.active};
     background-color: ${_styles.COLORS.neutral_20};
     color: ${_styles.COLORS.neutral_800};
     &:after {
@@ -66,7 +65,6 @@
   }
   &:hover:not(.disabled) {
-    z-index: ${_zIndexes.Z_INDEXES.hover};
     background-color: ${_styles.COLORS.primary_20};
     color: ${_styles.COLORS.primary_700};
     &:after {
@@ -75,7 +73,6 @@
   }
   &:focus:not(.disabled) {
-    z-index: ${_zIndexes.Z_INDEXES.focus};
     box-shadow: 0px 0px 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
     outline: none;
     &:after {

package/dist/umd/NavItem/NavItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/NavItem/NavItem.tsx"],"names":["NavItem","styled","div","ComponentMStyling","ComponentTextStyle","COLORS","~~Z_INDEXES","active","~~neutral_20","neutral_800","primary_600","neutral_300","neutral_100","~~hover","~~primary_20","primary_700","~~focus","~~primary_500"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAMA~~,QAAMA,OAAO,GAAGC,2BAAOC,GAAI;AAC3B,IAAIC,mCAAkBC,+BAAD,OAAjBD,EAA8CE,eAA7B,WAAjBF,CAAkE;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~eAAeG~~,~~oBAAUC~~,~~MAAO;AAChC,wBAAwBF,eAAOG,~~UAAW;AAC1C,~~aAAaH~~,~~eAAOI~~,WAAY;AAChC;AACA,~~0BAA0BJ~~,~~eAAOK~~,WAAY;AAC7C;AACA;AACA;AACA;AACA,~~aAAaL~~,~~eAAOM~~,WAAY;AAChC,~~wBAAwBN~~,~~eAAOO~~,WAAY;AAC3C;AACA,~~0BAA0BP~~,~~eAAOO~~,WAAY;AAC7C;AACA;AACA;AACA;AACA,~~eAAeN~~,~~oBAAUO~~,~~KAAM;AAC/B,wBAAwBR,eAAOS,~~UAAW;AAC1C,~~aAAaT~~,~~eAAOU~~,WAAY;AAChC;AACA,~~0BAA0BV~~,~~eAAOK~~,WAAY;AAC7C;AACA;AACA;AACA;AACA,~~eAAeJ~~,~~oBAAUU~~,~~KAAM;AAC/B,8BAA8BX,eAAOY,~~WAAY;AACjD;AACA;AACA,~~0BAA0BZ~~,~~eAAOK~~,WAAY;AAC7C;AACA;~~AAxDA~~,CAAA;~~oBA2DA~~,O","sourcesContent":["import styled from 'styled-components';\n\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\~~nimport {Z_INDEXES} from '../styles/z-indexes';\~~n\nconst NavItem = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n margin: 0;\n padding: 0 21px 0 21px;\n height: 64px;\n\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 3px;\n background-color: transparent;\n }\n\n &.active:not(.disabled) {\n ~~z-index: ${Z_INDEXES.active};\n~~ background-color: ${COLORS.neutral_20};\n color: ${COLORS.neutral_800};\n &:after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n background-color: ${COLORS.neutral_100};\n &:after {\n background-color: ${COLORS.neutral_100};\n }\n }\n\n &:hover:not(.disabled) {\n ~~z-index: ${Z_INDEXES.hover};\n~~ background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n &:after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &:focus:not(.disabled) {\n ~~z-index: ${Z_INDEXES.focus};\n~~ box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n &:after {\n background-color: ${COLORS.primary_600};\n }\n }\n`;\n\nexport default NavItem;\n"],"file":"NavItem.js"}
1	+ {"version":3,"sources":["../../../src/NavItem/NavItem.tsx"],"names":["NavItem","styled","div","ComponentMStyling","ComponentTextStyle","COLORS","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","primary_20","primary_700","primary_500"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,QAAMA,OAAO,GAAGC,2BAAOC,GAAI;AAC3B,IAAIC,mCAAkBC,+BAAD,OAAjBD,EAA8CE,eAA7B,WAAjBF,CAAkE;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBE,eAAOC,UAAW;AAC1C,aAAaD,eAAOE,WAAY;AAChC;AACA,0BAA0BF,eAAOG,WAAY;AAC7C;AACA;AACA;AACA;AACA,aAAaH,eAAOI,WAAY;AAChC,wBAAwBJ,eAAOK,WAAY;AAC3C;AACA,0BAA0BL,eAAOK,WAAY;AAC7C;AACA;AACA;AACA;AACA,wBAAwBL,eAAOM,UAAW;AAC1C,aAAaN,eAAOO,WAAY;AAChC;AACA,0BAA0BP,eAAOG,WAAY;AAC7C;AACA;AACA;AACA;AACA,8BAA8BH,eAAOQ,WAAY;AACjD;AACA;AACA,0BAA0BR,eAAOG,WAAY;AAC7C;AACA;AArDA,CAAA;oBAwDA,O","sourcesContent":["import styled from 'styled-components';\n\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\n\nconst NavItem = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n margin: 0;\n padding: 0 21px 0 21px;\n height: 64px;\n\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 3px;\n background-color: transparent;\n }\n\n &.active:not(.disabled) {\n background-color: ${COLORS.neutral_20};\n color: ${COLORS.neutral_800};\n &:after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n background-color: ${COLORS.neutral_100};\n &:after {\n background-color: ${COLORS.neutral_100};\n }\n }\n\n &:hover:not(.disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n &:after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &:focus:not(.disabled) {\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n &:after {\n background-color: ${COLORS.primary_600};\n }\n }\n`;\n\nexport default NavItem;\n"],"file":"NavItem.js"}

package/dist/umd/Paginator/Paginator.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "react-router-dom", "../styles", "../icons/systemicons/SystemIcons", "../styles/typography", "../styles/z-indexes"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "react-router-dom", "../styles", "../icons/systemicons/SystemIcons", "../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("react-router-dom"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../styles/typography"), require("../styles/z-indexes"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("react-router-dom"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactRouterDom, global.styles, global.SystemIcons, global.typography, global.zIndexes);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactRouterDom, global.styles, global.SystemIcons, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _styles, _SystemIcons, _typography, _zIndexes) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _styles, _SystemIcons, _typography) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -114,27 +114,23 @@
     &:focus,
     &:focus-within {
-      z-index: ${_zIndexes.Z_INDEXES.focus};
       box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
       outline-width: 0;
     }
   }
   & > a:hover {
-    z-index: ${_zIndexes.Z_INDEXES.hover};
     color: ${_styles.COLORS.primary_800};
     background-color: ${_styles.COLORS.primary_20};
     box-shadow: none;
   }
   & > a:active {
-    z-index: ${_zIndexes.Z_INDEXES.active};
     color: ${_styles.COLORS.primary_700};
     background-color: ${_styles.COLORS.primary_100};
     box-shadow: none;
   }
   & > a.active {
-    z-index: ${_zIndexes.Z_INDEXES.active};
     color: ${_styles.COLORS.neutral_800};
     background-color: ${_styles.COLORS.neutral_20};
     cursor: default;

package/dist/umd/Paginator/Paginator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/Paginator/Paginator.tsx"],"names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentMStyling","ComponentTextStyle","COLORS","Z_INDEXES","focus","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","ItemSelected","primary_500","pageCount","currentPage","baseUrl","onPageChange","Step","up","target","disabled","testId","cursor","neutral_300","Paginator","pages","from","to","i","item","neutral_600","page"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronLeft, ChevronRight, MoreHorizontal} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Container = styled.nav`\n margin: 20px 0;\n display: flex;\n justify-content: center;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 75%;\n }\n`;\n\nconst Items = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n`;\n\nconst Item = styled.li`\n width: 48px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-decoration: none;\n border-bottom: 3px solid transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &:focus,\n &:focus-within {\n z-index: ${Z_INDEXES.focus};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline-width: 0;\n }\n }\n\n & > a:hover {\n z-index: ${Z_INDEXES.hover};\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n box-shadow: none;\n }\n & > a:active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n }\n\n & > a.active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.neutral_800};\n background-color: ${COLORS.neutral_20};\n cursor: default;\n box-shadow: none;\n &:hover {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n &:active {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n }\n`;\n\nconst Dots = styled(Item)`\n padding-top: 1%;\n cursor: not-allowed;\n`;\n\nconst ItemContent = styled('div')`\n width: 100%;\n text-align:center;\n display: table-cell;\n vertical-align:middle;\n`\nconst ItemSelected = styled('div')`\n justify-content: center;\n margin: 0 20%;\n border-radius: 4px;\n text-align: center;\n height: 4px;\n background-color: ${COLORS.primary_500}\n`\n\ntype PaginatorProps = {\n pageCount: number;\n currentPage: number;\n baseUrl: string;\n onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n up = true,\n target = '',\n disabled = false,\n page,\n onPageChange,\n testId,\n}: {\n up: boolean;\n target: string;\n disabled: boolean;\n page: number;\n onPageChange?: (page: number) => void;\n testId?: string;\n}) => {\n if (disabled)\n return (\n <Item style={{ cursor: 'not-allowed' }} data-testid={`${testId}_Disabled`}>\n {up ? <ChevronRight size=\"20\" color={COLORS.neutral_300} /> : <ChevronLeft size=\"20\" color={COLORS.neutral_300} />}\n </Item>\n );\n return (\n <Item data-testid={`${testId}_Enabled`}>\n <NavLink\n to={target}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n {up ? <ChevronRight size=\"20\" /> : <ChevronLeft />}\n </NavLink>\n </Item>\n );\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n const pages = [];\n let from = 2;\n let to = 4;\n if (pageCount === 0) return null;\n\n if (pageCount > 1) {\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\n from = currentPage - 1;\n to = currentPage + 1;\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n from = pageCount - 3;\n to = pageCount - 1;\n }\n if (to > pageCount) {\n to = pageCount;\n }\n for (let i = from; i <= to; i += 1) {\n pages.push(i);\n }\n }\n\n return (\n <Container>\n <Items>\n <Step\n up={false}\n target={`${baseUrl}/${currentPage - 1}`}\n page={currentPage - 1}\n disabled={currentPage === 1}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage - 1);\n }}\n testId=\"Test-StepLeft\"\n />\n {pages.findIndex(item => item === 1) === -1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/1`}\n onClick={() => {\n if (onPageChange) onPageChange(1);\n }}>\n <ItemContent>\n <span>1</span>\n {currentPage === 1 && <ItemSelected />}\n </ItemContent>\n </NavLink>\n </Item>\n )}\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n <Dots>\n <MoreHorizontal color={COLORS.neutral_600} />\n </Dots>\n )}\n {pages.map(page => (\n <Item key={page}>\n <NavLink\n to={`${baseUrl}/${page}`}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n <ItemContent>\n <span>{page}</span>\n {currentPage === page && <ItemSelected />}\n </ItemContent>\n </NavLink>\n </Item>\n ))}\n {pageCount > 5 && currentPage <= pageCount - 3 && (\n <Dots>\n <MoreHorizontal color={COLORS.neutral_600} />\n </Dots>\n )}\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/${pageCount}`}\n onClick={() => {\n if (onPageChange) onPageChange(pageCount);\n }}>\n <ItemContent>\n <span>{pageCount}</span>\n {currentPage === pageCount && <ItemSelected />}\n </ItemContent>\n </NavLink>\n </Item>\n )}\n <Step\n up\n target={`${baseUrl}/${currentPage + 1}`}\n page={currentPage + 1}\n disabled={currentPage === pageCount}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage + 1);\n }}\n testId=\"Test-StepRight\"\n />\n </Items>\n </Container>\n );\n};\n\nexport default Paginator;\n"],"file":"Paginator.js"}
1	+ {"version":3,"sources":["../../../src/Paginator/Paginator.tsx"],"names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentMStyling","ComponentTextStyle","COLORS","primary_800","primary_20","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","ItemSelected","primary_500","pageCount","currentPage","baseUrl","onPageChange","Step","up","target","disabled","testId","cursor","neutral_300","Paginator","pages","from","to","i","item","neutral_600","page"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronLeft, ChevronRight, MoreHorizontal} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst Container = styled.nav`\n margin: 20px 0;\n display: flex;\n justify-content: center;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 75%;\n }\n`;\n\nconst Items = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n`;\n\nconst Item = styled.li`\n width: 48px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-decoration: none;\n border-bottom: 3px solid transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &:focus,\n &:focus-within {\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline-width: 0;\n }\n }\n\n & > a:hover {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n box-shadow: none;\n }\n & > a:active {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n }\n\n & > a.active {\n color: ${COLORS.neutral_800};\n background-color: ${COLORS.neutral_20};\n cursor: default;\n box-shadow: none;\n &:hover {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n &:active {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n }\n`;\n\nconst Dots = styled(Item)`\n padding-top: 1%;\n cursor: not-allowed;\n`;\n\nconst ItemContent = styled('div')`\n width: 100%;\n text-align:center;\n display: table-cell;\n vertical-align:middle;\n`\nconst ItemSelected = styled('div')`\n justify-content: center;\n margin: 0 20%;\n border-radius: 4px;\n text-align: center;\n height: 4px;\n background-color: ${COLORS.primary_500}\n`\n\ntype PaginatorProps = {\n pageCount: number;\n currentPage: number;\n baseUrl: string;\n onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n up = true,\n target = '',\n disabled = false,\n page,\n onPageChange,\n testId,\n}: {\n up: boolean;\n target: string;\n disabled: boolean;\n page: number;\n onPageChange?: (page: number) => void;\n testId?: string;\n}) => {\n if (disabled)\n return (\n <Item style={{ cursor: 'not-allowed' }} data-testid={`${testId}_Disabled`}>\n {up ? <ChevronRight size=\"20\" color={COLORS.neutral_300} /> : <ChevronLeft size=\"20\" color={COLORS.neutral_300} />}\n </Item>\n );\n return (\n <Item data-testid={`${testId}_Enabled`}>\n <NavLink\n to={target}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n {up ? <ChevronRight size=\"20\" /> : <ChevronLeft />}\n </NavLink>\n </Item>\n );\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n const pages = [];\n let from = 2;\n let to = 4;\n if (pageCount === 0) return null;\n\n if (pageCount > 1) {\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\n from = currentPage - 1;\n to = currentPage + 1;\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n from = pageCount - 3;\n to = pageCount - 1;\n }\n if (to > pageCount) {\n to = pageCount;\n }\n for (let i = from; i <= to; i += 1) {\n pages.push(i);\n }\n }\n\n return (\n <Container>\n <Items>\n <Step\n up={false}\n target={`${baseUrl}/${currentPage - 1}`}\n page={currentPage - 1}\n disabled={currentPage === 1}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage - 1);\n }}\n testId=\"Test-StepLeft\"\n />\n {pages.findIndex(item => item === 1) === -1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/1`}\n onClick={() => {\n if (onPageChange) onPageChange(1);\n }}>\n <ItemContent>\n <span>1</span>\n {currentPage === 1 && <ItemSelected />}\n </ItemContent>\n </NavLink>\n </Item>\n )}\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n <Dots>\n <MoreHorizontal color={COLORS.neutral_600} />\n </Dots>\n )}\n {pages.map(page => (\n <Item key={page}>\n <NavLink\n to={`${baseUrl}/${page}`}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n <ItemContent>\n <span>{page}</span>\n {currentPage === page && <ItemSelected />}\n </ItemContent>\n </NavLink>\n </Item>\n ))}\n {pageCount > 5 && currentPage <= pageCount - 3 && (\n <Dots>\n <MoreHorizontal color={COLORS.neutral_600} />\n </Dots>\n )}\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/${pageCount}`}\n onClick={() => {\n if (onPageChange) onPageChange(pageCount);\n }}>\n <ItemContent>\n <span>{pageCount}</span>\n {currentPage === pageCount && <ItemSelected />}\n </ItemContent>\n </NavLink>\n </Item>\n )}\n <Step\n up\n target={`${baseUrl}/${currentPage + 1}`}\n page={currentPage + 1}\n disabled={currentPage === pageCount}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage + 1);\n }}\n testId=\"Test-StepRight\"\n />\n </Items>\n </Container>\n );\n};\n\nexport default Paginator;\n"],"file":"Paginator.js"}

package/dist/umd/Switcher/MobileSwitcherMenu.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../styles", "../Button", "../icons/systemicons/SystemIcons", "../GlobalNavigationBar/mobile/CommonStyles", "./SwitcherMenuItem", "../styles/typography", "../styles/z-indexes"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../Button", "../icons/systemicons/SystemIcons", "../GlobalNavigationBar/mobile/CommonStyles", "./SwitcherMenuItem", "../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../GlobalNavigationBar/mobile/CommonStyles"), require("./SwitcherMenuItem"), require("../styles/typography"), require("../styles/z-indexes"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../GlobalNavigationBar/mobile/CommonStyles"), require("./SwitcherMenuItem"), require("../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.Button, global.SystemIcons, global.CommonStyles, global.SwitcherMenuItem, global.typography, global.zIndexes);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.Button, global.SystemIcons, global.CommonStyles, global.SwitcherMenuItem, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _Button, _SystemIcons, _CommonStyles, _SwitcherMenuItem, _typography, _zIndexes) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _Button, _SystemIcons, _CommonStyles, _SwitcherMenuItem, _typography) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -91,7 +91,7 @@
   animation: ${_CommonStyles.flowDown} 0.2s ease-in-out;
   position: absolute;
   border-radius: 4px;
-  z-index: ${_zIndexes.Z_INDEXES.off_canvas};
+  z-index: 100;
   height: 100%;
   width: 320px;
   padding-inline-start: 0;