labsense-ui-kit 1.1.93 → 1.1.95

package/dist/index.js

@@ -3446,9 +3446,9 @@ var dark = {
   accent: {
     light_1: '#2A2E33',
     light_2: '#1F2327',
-    light_3: '#F0F3F5',
-    light_4: '#ECF0F4',
-    light_5: '#F0F0F3',
+    light_3: '#0F1214',
+    light_4: '#101417',
+    light_5: '#0F0F0C',
     softBlue: '#2C3E50',
     extraSoftBlue: '#34495E',
     boldTransparent: '#D3D3D380',
@@ -4470,101 +4470,108 @@ var timeStringToSeconds = function timeStringToSeconds(timeString) {
 
 var _templateObject$9, _templateObject2$6, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 var DatePickerContainer = styled__default.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
-var CalendarContainer = styled__default.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n  overflow: auto;\n  display: flex;\n  flex-direction: row;\n  background: rgba(245, 248, 250, .95); \n  position: absolute;\n  border: ", ";\n  height: auto;\n  width: auto;\n  border-radius: 10px;\n  z-index: 10;\n  padding: 10px;\n  top: 0px;\n  right: 0px;\n  gap: 16px;\n"])), function (_ref) {
+var CalendarContainer = styled__default.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n  overflow: auto;\n  display: flex;\n  flex-direction: row;\n  background: ", ";\n  position: absolute;\n  border: ", ";\n  height: auto;\n  width: auto;\n  border-radius: 10px;\n  z-index: 10;\n  padding: 10px;\n  top: 0px;\n  right: 0px;\n  gap: 16px;\n"])), function (_ref) {
   var theme = _ref.theme;
+  return theme.accent.light_2;
+}, function (_ref2) {
+  var theme = _ref2.theme;
   return "1px solid " + theme.border.medium;
 });
 var Calendar$1 = styled__default.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose([""])));
-var CalendarTime = styled__default.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  border: ", ";\n  border-radius: 4px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 8px;\n"])), function (_ref2) {
-  var theme = _ref2.theme;
+var CalendarTime = styled__default.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  border: ", ";\n  border-radius: 4px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 8px;\n"])), function (_ref3) {
+  var theme = _ref3.theme;
   return "1px solid " + theme.border.medium;
 });
 var StartDate = styled__default.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding-bottom: 4px;\n"])));
-var SelectedStart = styled__default.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  gap: 4px;\n  color: ", ";\n"])), function (_ref3) {
-  var theme = _ref3.theme;
+var SelectedStart = styled__default.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  gap: 4px;\n  color: ", ";\n"])), function (_ref4) {
+  var theme = _ref4.theme;
   return theme.text.medium;
 });
 var CurrentDate = styled__default.p(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 12px;\n"])));
-var CurrentTime = styled__default.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  color: ", ";\n"])), function (_ref4) {
-  var theme = _ref4.theme;
+var CurrentTime = styled__default.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  color: ", ";\n"])), function (_ref5) {
+  var theme = _ref5.theme;
   return theme.text.medium;
 });
-var Selectedtime = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  color: ", ";\n  gap: 8px;\n"])), function (_ref5) {
-  var theme = _ref5.theme;
+var Selectedtime = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  color: ", ";\n  gap: 8px;\n"])), function (_ref6) {
+  var theme = _ref6.theme;
   return theme.text.medium;
 });
 var Line = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding-top: 10px;\n  padding-bottom: 10px;\n"])));
 var Zones = styled__default.div(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n"])));
 var CalendarHeader = styled__default.div(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px;\n"])));
-var CalendarMonthYear = styled__default.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  color: ", ";\n  justify-content: center;\n  align-items: center;\n"])), function (_ref6) {
-  var theme = _ref6.theme;
+var CalendarMonthYear = styled__default.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  color: ", ";\n  justify-content: center;\n  align-items: center;\n"])), function (_ref7) {
+  var theme = _ref7.theme;
   return theme.text.medium;
 });
 var CalendarContent = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 5px;\n  padding: 10px;\n"])));
-var Button = styled__default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  color: ", ";\n  border: none;\n  border-radius: 5px;\n  padding: 5px 10px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n\n  svg {\n    cursor: pointer;\n  }\n"])), function (_ref7) {
-  var theme = _ref7.theme;
-  return theme["default"].secondary;
-}, function (_ref8) {
+var Button = styled__default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  color: ", ";\n  border: none;\n  border-radius: 5px;\n  padding: 5px 10px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n\n  svg {\n    cursor: pointer;\n  }\n"])), function (_ref8) {
   var theme = _ref8.theme;
-  return theme.text.white;
+  return theme["default"].secondary;
 }, function (_ref9) {
-  var $size = _ref9.$size;
-  return $size ? $size + "px" : '30px';
+  var theme = _ref9.theme;
+  return theme.text.white;
 }, function (_ref10) {
   var $size = _ref10.$size;
   return $size ? $size + "px" : '30px';
-});
-var CalendarDates = styled__default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  cursor: ", "; \n  font-size: 12px;\n  opacity: ", "; \n\n  background-color: ", ";\n\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref11) {
+}, function (_ref11) {
   var $size = _ref11.$size;
   return $size ? $size + "px" : '30px';
-}, function (_ref12) {
+});
+var CalendarDates = styled__default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  cursor: ", "; \n  font-size: 12px;\n  opacity: ", "; \n\n  background-color: ", ";\n\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref12) {
   var $size = _ref12.$size;
   return $size ? $size + "px" : '30px';
 }, function (_ref13) {
-  var $isFuture = _ref13.$isFuture,
-    $futureDateTime = _ref13.$futureDateTime;
-  return !$futureDateTime && $isFuture ? 'default' : 'pointer';
+  var $size = _ref13.$size;
+  return $size ? $size + "px" : '30px';
 }, function (_ref14) {
   var $isFuture = _ref14.$isFuture,
     $futureDateTime = _ref14.$futureDateTime;
-  return !$futureDateTime && $isFuture ? 0.5 : 1;
+  return !$futureDateTime && $isFuture ? 'default' : 'pointer';
 }, function (_ref15) {
-  var $selected = _ref15.$selected,
-    $inRange = _ref15.$inRange,
-    theme = _ref15.theme;
-  return $selected ? theme["default"].primary : $inRange ? theme["default"].primary : theme["default"].tertiary;
+  var $isFuture = _ref15.$isFuture,
+    $futureDateTime = _ref15.$futureDateTime;
+  return !$futureDateTime && $isFuture ? 0.5 : 1;
 }, function (_ref16) {
   var $selected = _ref16.$selected,
     $inRange = _ref16.$inRange,
     theme = _ref16.theme;
-  return $selected ? theme.text.white : $inRange ? theme.text.white : theme.text.medium;
+  return $selected ? theme["default"].primary : $inRange ? theme["default"].primary : theme["default"].tertiary;
 }, function (_ref17) {
   var $selected = _ref17.$selected,
     $inRange = _ref17.$inRange,
-    $isFuture = _ref17.$isFuture,
-    $futureDateTime = _ref17.$futureDateTime,
     theme = _ref17.theme;
+  return $selected ? theme.text.white : $inRange ? theme.text.white : theme.text.medium;
+}, function (_ref18) {
+  var $selected = _ref18.$selected,
+    $inRange = _ref18.$inRange,
+    $isFuture = _ref18.$isFuture,
+    $futureDateTime = _ref18.$futureDateTime,
+    theme = _ref18.theme;
   return !$futureDateTime && $isFuture ? 'transparent' : $selected ? theme.disabled.primary : $inRange ? theme.disabled.primary : theme.disabled.primary;
 });
 var Year = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 500;\n  font-size: 12px;\n"])));
 var Month = styled__default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 600;\n  font-size: 14px;\n"])));
 var InputWrapper = styled__default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 24px;\n"])));
 var TimeInputWrapper = styled__default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n"])));
-var StyledInput = styled__default.input(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n  outline: none;\n  width: 60px;\n  height: 30px;\n  text-align: center;\n  font-size: 16px;\n  border-radius: 5px;\n  background: white;\n  border: ", ";\n  color: ", ";\n"])), function (_ref18) {
-  var theme = _ref18.theme;
-  return "1px solid " + theme.border.extraBold;
-}, function (_ref19) {
+var StyledInput = styled__default.input(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n  outline: none;\n  width: 60px;\n  height: 30px;\n  text-align: center;\n  font-size: 16px;\n  border-radius: 5px;\n  background: ", ";\n  border: ", ";\n  color: ", ";\n"])), function (_ref19) {
   var theme = _ref19.theme;
+  return theme.text.white;
+}, function (_ref20) {
+  var theme = _ref20.theme;
+  return "1px solid " + theme.border.extraBold;
+}, function (_ref21) {
+  var theme = _ref21.theme;
   return theme.text.dark;
 });
-var DatePicker = function DatePicker(_ref20) {
+var DatePicker = function DatePicker(_ref22) {
   var _renderState$startDat3, _renderState$startDat4;
-  var _ref20$dateSize = _ref20.dateSize,
-    dateSize = _ref20$dateSize === void 0 ? 30 : _ref20$dateSize,
-    dateTime = _ref20.dateTime,
-    setDateTime = _ref20.setDateTime,
-    _ref20$futureDateTime = _ref20.futureDateTime,
-    futureDateTime = _ref20$futureDateTime === void 0 ? true : _ref20$futureDateTime;
+  var _ref22$dateSize = _ref22.dateSize,
+    dateSize = _ref22$dateSize === void 0 ? 30 : _ref22$dateSize,
+    dateTime = _ref22.dateTime,
+    setDateTime = _ref22.setDateTime,
+    _ref22$futureDateTime = _ref22.futureDateTime,
+    futureDateTime = _ref22$futureDateTime === void 0 ? true : _ref22$futureDateTime;
+  var themeColors = useTheme();
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = React.useState({
@@ -4743,7 +4750,7 @@ var DatePicker = function DatePicker(_ref20) {
     }
   }, React__default.createElement(Icon, {
     icon: 'LeftArrow',
-    color: 'white',
+    color: themeColors.text.white,
     size: 12
   })), React__default.createElement(CalendarMonthYear, null, React__default.createElement(Year, null, (_renderState$startDat3 = renderState.startDate) === null || _renderState$startDat3 === void 0 ? void 0 : _renderState$startDat3.getFullYear()), React__default.createElement(Month, null, (_renderState$startDat4 = renderState.startDate) === null || _renderState$startDat4 === void 0 ? void 0 : _renderState$startDat4.toLocaleDateString('default', {
     month: 'long'
@@ -4760,7 +4767,7 @@ var DatePicker = function DatePicker(_ref20) {
     }
   }, React__default.createElement(Icon, {
     icon: 'RightArrow',
-    color: 'white',
+    color: themeColors.text.white,
     size: 12
   }))), React__default.createElement(CalendarContent, null, renderCalendar(dateSize))), React__default.createElement(CalendarTime, null, React__default.createElement(StartDate, null, React__default.createElement(SelectedStart, null, React__default.createElement(CurrentDate, null, t('TimePicker_StartDate')), React__default.createElement(CurrentTime, null, React__default.createElement("p", null, dateTime.startDate ? formatDate1(dateTime.startDate) : '-'))), React__default.createElement(Selectedtime, null, React__default.createElement(CurrentDate, null, t('TimePicker_StartTime')), React__default.createElement(InputWrapper, null, React__default.createElement(TimeInputWrapper, null, React__default.createElement(StyledInput, {
     value: dateTime.startDate ? formatTime(dateTime.startDate.getHours()) : '',
@@ -5212,8 +5219,7 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
     background = _ref31.background,
     selectedOptionBackground = _ref31.selectedOptionBackground,
     selectedOptionColor = _ref31.selectedOptionColor,
-    _ref31$menuBackground = _ref31.menuBackground,
-    menuBackground = _ref31$menuBackground === void 0 ? 'white' : _ref31$menuBackground,
+    menuBackground = _ref31.menuBackground,
     optionsBorderRadius = _ref31.optionsBorderRadius,
     borderRadius = _ref31.borderRadius,
     removeIconBackground = _ref31.removeIconBackground,
@@ -5328,7 +5334,7 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
     color: themeColors.text.medium
   })), isOpen && React__default.createElement(DropdownMenu, {
     "$width": optionWidth,
-    "$menuBackground": menuBackground,
+    "$menuBackground": menuBackground || themeColors.text.white,
     "$optionsBorderRadius": optionsBorderRadius
   }, React__default.createElement(OptionComponent, {
     options: options,