@luscii-healthtech/web-ui 38.2.1 → 38.2.2

package/dist/components/DatePicker/DatePicker.d.ts

@@ -15,6 +15,14 @@ type ReactDatePickerProps = {
     openToDate?: Date;
     placeholderText?: string;
     portalId?: string;
+    /**
+     * @default undefined
+     */
+    zIndex?: 10 | 20 | 30 | 40 | 50;
+    /**
+     * @default 30
+     */
+    popperZIndex?: 10 | 20 | 30 | 40 | 50;
 };
 type Props = {
     /**

package/dist/index.development.js

@@ -3429,7 +3429,7 @@ const ConfirmationDialog = (_a) => {
   );
 };
 
-var css_248z$9 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-datepicker {\n  width: 182px;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  background-color: #ffffff;\n  outline: none;\n  padding: 12px 12px 11px 12px;\n}\n.cweb-datepicker input.cweb-datepicker {\n  font-size: 14px;\n}\n.cweb-datepicker::placeholder {\n  color: #64748b;\n}\n.cweb-datepicker:-ms-input-placeholder {\n  color: #64748b !important;\n}\n.cweb-datepicker::-ms-input-placeholder {\n  color: #64748b;\n}\n\n.react-datepicker-popper {\n  z-index: 30;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle.react-datepicker__triangle {\n  border-bottom-color: #ffffff;\n  margin-top: -4px;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.react-datepicker-popper[data-placement^=top] {\n  margin-bottom: 4px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle.react-datepicker__triangle {\n  border-top-color: #ffffff;\n  margin-bottom: -4px;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.react-datepicker-popper .react-datepicker__children-container {\n  width: 100%;\n  margin: 0;\n}\n\n.cweb-datepicker-calendar {\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n  padding: 0;\n  border: 1px solid #cccccc;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cweb-datepicker-calendar {\n    box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);\n  }\n}\n.cweb-datepicker-calendar .react-datepicker__triangle {\n  left: 10px;\n  border: 6px solid transparent;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation {\n  top: 19px;\n  width: 19px;\n  height: 10px;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation .react-datepicker__navigation-icon:before {\n  border: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  border: 0;\n  transform: rotate(90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  border: 0;\n  transform: rotate(-90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--scroll {\n  margin: 2px;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box {\n  width: auto;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list {\n  overflow-x: hidden;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 40px !important;\n  padding: 0 !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {\n  color: #ffffff;\n  background-color: #1e40af !important;\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:hover {\n  background-color: #1e40af !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__header {\n  padding-top: 0;\n  border: none;\n  background-color: #ffffff;\n  font-size: 14px;\n  padding-bottom: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__current-month {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 19px;\n  color: #2d2d2d;\n  margin: 0;\n  padding-top: 16px;\n  padding-bottom: 16px;\n  text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__header__dropdown {\n  margin-bottom: 15px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  height: 44px;\n  padding-left: 12px;\n  border-radius: 4px;\n  background: #ffffff url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2214%22 viewBox%3D%220 0 8 14%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z%22 fill%3D%22%239CA3AF%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 8px center;\n  text-transform: capitalize;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border: 1px solid #cccccc;\n  transition: all 0.4s ease;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:hover, .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:focus,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:hover,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:focus {\n  color: #1e40af;\n  border-color: #1e40af;\n  cursor: pointer;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select {\n  min-width: 172px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  min-width: 107px;\n}\n.cweb-datepicker-calendar .react-datepicker__header.react-datepicker__header--time {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 52px;\n  padding: 0;\n  background-color: #f3f3f3;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__month {\n  margin: 0.4rem;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__week {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name,\n.cweb-datepicker-calendar .react-datepicker__day {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  width: 41px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name {\n  height: 19px;\n  text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__day {\n  height: 30px;\n  border-radius: 4px;\n  transition: background-color 0.3s ease-in-out;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted {\n  background-color: #ffffff;\n  color: #1e40af;\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted:after {\n  content: \"\";\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: #1e40af;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  margin: 0 auto;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--in-range:after {\n  background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--today {\n  font-weight: bold;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-selecting-range {\n  background-color: #e8f5fc;\n}\n.cweb-datepicker-calendar .react-datepicker__day:hover {\n  background-color: #f8fafc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  color: #ffffff;\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range:hover, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected:hover {\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n  color: #ffffff;\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start:before {\n  content: \"\";\n  position: absolute;\n  top: -3px;\n  left: 0;\n  bottom: initial;\n  right: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(45deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled {\n  color: #cccccc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled:hover {\n  background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {\n  color: #cccccc;\n}";
+var css_248z$9 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-datepicker {\n  width: 182px;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  background-color: #ffffff;\n  outline: none;\n  padding: 12px 12px 11px 12px;\n}\n.cweb-datepicker input.cweb-datepicker {\n  font-size: 14px;\n}\n.cweb-datepicker::placeholder {\n  color: #64748b;\n}\n.cweb-datepicker:-ms-input-placeholder {\n  color: #64748b !important;\n}\n.cweb-datepicker::-ms-input-placeholder {\n  color: #64748b;\n}\n\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle.react-datepicker__triangle {\n  border-bottom-color: #ffffff;\n  margin-top: -4px;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.react-datepicker-popper[data-placement^=top] {\n  margin-bottom: 4px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle.react-datepicker__triangle {\n  border-top-color: #ffffff;\n  margin-bottom: -4px;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.react-datepicker-popper .react-datepicker__children-container {\n  width: 100%;\n  margin: 0;\n}\n\n.cweb-datepicker-calendar {\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n  padding: 0;\n  border: 1px solid #cccccc;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cweb-datepicker-calendar {\n    box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);\n  }\n}\n.cweb-datepicker-calendar .react-datepicker__triangle {\n  left: 10px;\n  border: 6px solid transparent;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation {\n  top: 19px;\n  width: 19px;\n  height: 10px;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation .react-datepicker__navigation-icon:before {\n  border: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  border: 0;\n  transform: rotate(90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  border: 0;\n  transform: rotate(-90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--scroll {\n  margin: 2px;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box {\n  width: auto;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list {\n  overflow-x: hidden;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 40px !important;\n  padding: 0 !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {\n  color: #ffffff;\n  background-color: #1e40af !important;\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:hover {\n  background-color: #1e40af !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__header {\n  padding-top: 0;\n  border: none;\n  background-color: #ffffff;\n  font-size: 14px;\n  padding-bottom: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__current-month {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 19px;\n  color: #2d2d2d;\n  margin: 0;\n  padding-top: 16px;\n  padding-bottom: 16px;\n  text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__header__dropdown {\n  margin-bottom: 15px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  height: 44px;\n  padding-left: 12px;\n  border-radius: 4px;\n  background: #ffffff url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2214%22 viewBox%3D%220 0 8 14%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z%22 fill%3D%22%239CA3AF%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 8px center;\n  text-transform: capitalize;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border: 1px solid #cccccc;\n  transition: all 0.4s ease;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:hover, .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:focus,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:hover,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:focus {\n  color: #1e40af;\n  border-color: #1e40af;\n  cursor: pointer;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select {\n  min-width: 172px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  min-width: 107px;\n}\n.cweb-datepicker-calendar .react-datepicker__header.react-datepicker__header--time {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 52px;\n  padding: 0;\n  background-color: #f3f3f3;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__month {\n  margin: 0.4rem;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__week {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name,\n.cweb-datepicker-calendar .react-datepicker__day {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  width: 41px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name {\n  height: 19px;\n  text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__day {\n  height: 30px;\n  border-radius: 4px;\n  transition: background-color 0.3s ease-in-out;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted {\n  background-color: #ffffff;\n  color: #1e40af;\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted:after {\n  content: \"\";\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: #1e40af;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  margin: 0 auto;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--in-range:after {\n  background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--today {\n  font-weight: bold;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-selecting-range {\n  background-color: #e8f5fc;\n}\n.cweb-datepicker-calendar .react-datepicker__day:hover {\n  background-color: #f8fafc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  color: #ffffff;\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range:hover, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected:hover {\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n  color: #ffffff;\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start:before {\n  content: \"\";\n  position: absolute;\n  top: -3px;\n  left: 0;\n  bottom: initial;\n  right: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(45deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled {\n  color: #cccccc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled:hover {\n  background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {\n  color: #cccccc;\n}";
 styleInject(css_248z$9);
 
 const LocaleContext = React.createContext("en-GB");
@@ -3456,14 +3456,20 @@ function getLocaleModule(locale) {
   return LOCALE_MAP[resolvedLocale];
 }
 const DatePicker = (props) => {
-  const { locale: localeFromProps, className, hasCloseButton, closeButtonText, adjustDateOnChange = true, showMonthDropdown = true, showYearDropdown = true, shouldCloseOnSelect = false, allowSameDay = false, minDate, maxDate, isDisabled = false, selected, portalId = "datepicker-portal" } = props, otherProps = __rest(props, ["locale", "className", "hasCloseButton", "closeButtonText", "adjustDateOnChange", "showMonthDropdown", "showYearDropdown", "shouldCloseOnSelect", "allowSameDay", "minDate", "maxDate", "isDisabled", "selected", "portalId"]);
+  const { locale: localeFromProps, className, hasCloseButton, closeButtonText, adjustDateOnChange = true, showMonthDropdown = true, showYearDropdown = true, shouldCloseOnSelect = false, allowSameDay = false, minDate, maxDate, isDisabled = false, selected, portalId = "datepicker-portal", zIndex = void 0, popperZIndex = 30 } = props, otherProps = __rest(props, ["locale", "className", "hasCloseButton", "closeButtonText", "adjustDateOnChange", "showMonthDropdown", "showYearDropdown", "shouldCloseOnSelect", "allowSameDay", "minDate", "maxDate", "isDisabled", "selected", "portalId", "zIndex", "popperZIndex"]);
   const localeFromContext = useLocaleContext();
   const locale = localeFromProps !== null && localeFromProps !== void 0 ? localeFromProps : localeFromContext;
   const datePickerRef = React.useRef(null);
   React.useEffect(() => {
     updateLocale(locale);
   }, [locale]);
-  const pickerClassName = classNames__default.default("cweb-datepicker ui-text-slate-800 ui-text-sm", className);
+  const pickerClassName = classNames__default.default("cweb-datepicker ui-text-slate-800 ui-text-sm", className, {
+    "!ui-z-10": zIndex === 10,
+    "!ui-z-20": zIndex === 20,
+    "!ui-z-30": zIndex === 30,
+    "!ui-z-40": zIndex === 40,
+    "!ui-z-50": zIndex === 50
+  });
   const getDateFormat = () => {
     const { formatDateWithTime = false } = props;
     return formatDateWithTime ? "Pp" : "P";
@@ -3476,7 +3482,13 @@ const DatePicker = (props) => {
   const dateFormat = getDateFormat();
   return React__namespace.default.createElement(
     ReactDatePicker__default.default,
-    Object.assign({}, otherProps, { adjustDateOnChange, allowSameDay, calendarClassName: "cweb-datepicker-calendar", className: pickerClassName, dateFormat, disabled: isDisabled, dropdownMode: "select", locale: getLocaleModule(locale), maxDate, minDate, popperClassName: "react-datepicker-popper ui-z-30", popperPlacement: "bottom-start", portalId, ref: datePickerRef, selected, shouldCloseOnSelect, showMonthDropdown, showYearDropdown, timeFormat: "HH:mm" }),
+    Object.assign({}, otherProps, { adjustDateOnChange, allowSameDay, calendarClassName: "cweb-datepicker-calendar", className: pickerClassName, dateFormat, disabled: isDisabled, dropdownMode: "select", locale: getLocaleModule(locale), maxDate, minDate, popperClassName: classNames__default.default("react-datepicker-popper", {
+      "!ui-z-10": popperZIndex === 10,
+      "!ui-z-20": popperZIndex === 20,
+      "!ui-z-30": popperZIndex === 30,
+      "!ui-z-40": popperZIndex === 40,
+      "!ui-z-50": popperZIndex === 50
+    }), popperPlacement: "bottom-start", portalId, ref: datePickerRef, selected, shouldCloseOnSelect, showMonthDropdown, showYearDropdown, timeFormat: "HH:mm" }),
     React__namespace.default.createElement("div", { className: "ui-m-2 ui-mt-0" }, hasCloseButton ? React__namespace.default.createElement(PrimaryButton, { onClick: handleCloseButtonClick }, closeButtonText !== null && closeButtonText !== void 0 ? closeButtonText : "OK") : null)
   );
 };