labsense-ui-kit 1.1.94 → 1.1.96

package/dist/index.js

@@ -3367,166 +3367,12 @@ var Span = styled__default.span(_templateObject2$1 || (_templateObject2$1 = _tag
   return $overflowWrap;
 });
 
-var light = {
-  brand: {
-    primary: '#4C9EEB',
-    secondary: '#14171A',
-    light: '#FFFFFF'
-  },
-  accent: {
-    light_1: '#E1E8ED',
-    light_2: '#F5F8FA',
-    light_3: '#F0F3F5',
-    light_4: '#ECF0F4',
-    light_5: '#F0F0F3',
-    softBlue: '#D4EEFF',
-    extraSoftBlue: '#E4F4FF',
-    boldTransparent: '#5E5E5E80',
-    transparent: '#5E5E5E4D',
-    lightTransparent: '#5E5E5E23'
-  },
-  "default": {
-    primary: '#78B6F0',
-    secondary: '#C2C2C2',
-    tertiary: 'transparent',
-    error: '#F44336',
-    success: '#4CAF50',
-    warning: '#FF9800',
-    info: '#2159F3'
-  },
-  disabled: {
-    primary: '#B9DCF7',
-    secondary: '#DADADA',
-    error: '#FFEBEE',
-    success: '#E8F5E9',
-    warning: '#FFF3E0',
-    info: '#E3F2FD'
-  },
-  hover: {
-    primary: '#4C9EEB',
-    secondary: '#A3A3A3',
-    tertiary: 'transparent',
-    error: '#D32F2F',
-    success: '#388E3C',
-    warning: '#F57C00',
-    info: '#193ED2'
-  },
-  border: {
-    extraBold: '#657786',
-    bold: '#BFBFBF',
-    medium: '#CBCED0',
-    light: '#DCDCDC',
-    extraLight: '#E6E3E3'
-  },
-  text: {
-    dark: '#14171A',
-    medium: '#657786',
-    light: '#98A2AA',
-    white: '#FFFFFF',
-    success: '#1B5E20',
-    error: '#B71C1C',
-    info: '#0D30A1',
-    warning: '#E65100'
-  },
-  badge: {
-    lavender: '#E8DAFF',
-    papayaWhip: '#FFEDD5',
-    water: '#C7E3FF',
-    paleBlue: '#B0F0E4',
-    teaGreen: '#D5F7C2',
-    lightBlue: '#ADD8E6'
-  }
-};
-var dark = {
-  brand: {
-    primary: '#4C9EEB',
-    secondary: '#E1E8ED',
-    light: '#1A1A1A'
-  },
-  accent: {
-    light_1: '#2A2E33',
-    light_2: '#1F2327',
-    light_3: '#0F1214',
-    light_4: '#101417',
-    light_5: '#0F0F0C',
-    softBlue: '#2C3E50',
-    extraSoftBlue: '#34495E',
-    boldTransparent: '#D3D3D380',
-    transparent: '#D3D3D34D',
-    lightTransparent: '#D3D3D323'
-  },
-  "default": {
-    primary: '#78B6F0',
-    secondary: '#4F4F4F',
-    tertiary: 'transparent',
-    error: '#EF5350',
-    success: '#66BB6A',
-    warning: '#FFB74D',
-    info: '#42A5F5'
-  },
-  disabled: {
-    primary: '#3B4A58',
-    secondary: '#3E3E3E',
-    error: '#5B1B1B',
-    success: '#1B3C1B',
-    warning: '#5A3C1B',
-    info: '#1A3C5A'
-  },
-  hover: {
-    primary: '#5CA6F0',
-    secondary: '#7A7A7A',
-    tertiary: 'transparent',
-    error: '#D32F2F',
-    success: '#388E3C',
-    warning: '#F57C00',
-    info: '#1976D2'
-  },
-  border: {
-    extraBold: '#8899A6',
-    bold: '#5E5E5E',
-    medium: '#4A4A4A',
-    light: '#3A3A3A',
-    extraLight: '#2B2B2B'
-  },
-  text: {
-    dark: '#FFFFFF',
-    medium: '#AAB8C2',
-    light: '#8899A6',
-    white: '#14171A',
-    success: '#81C784',
-    error: '#E57373',
-    info: '#64B5F6',
-    warning: '#FFB74D'
-  },
-  badge: {
-    lavender: '#7B5FA1',
-    papayaWhip: '#A46A3E',
-    water: '#5CA6F0',
-    paleBlue: '#4BC9BC',
-    teaGreen: '#7FBF7F',
-    lightBlue: '#5DADE2'
-  }
-};
-var getCurrentTheme = function getCurrentTheme() {
-  if (typeof document !== 'undefined') {
-    var isDarkClass = document.documentElement.classList.contains('dark');
-    return isDarkClass ? 'dark' : 'light';
-  }
-  return 'light';
-};
-var colorVariables = new Proxy({}, {
-  get: function get(_, prop) {
-    var currentThemeName = getCurrentTheme();
-    var currentTheme = themes[currentThemeName];
-    return currentTheme[prop];
-  }
-});
-var themes = {
-  light: light,
-  dark: dark
+var useTheme = function useTheme() {
+  return styled.useTheme();
 };
 
 var useNotification = function useNotification() {
+  var themeColors = useTheme();
   var sendNotification = function sendNotification(_ref) {
     var type = _ref.type,
       message = _ref.message,
@@ -3539,10 +3385,20 @@ var useNotification = function useNotification() {
     }
     switch (type) {
       case 'success':
-        reactHotToast.toast.success(message);
+        reactHotToast.toast.success(message, {
+          style: {
+            background: themeColors.text.white,
+            color: themeColors.text.dark
+          }
+        });
         break;
       case 'error':
-        reactHotToast.toast.error(message);
+        reactHotToast.toast.error(message, {
+          style: {
+            background: themeColors.text.white,
+            color: themeColors.text.dark
+          }
+        });
         break;
       case 'info':
         reactHotToast.toast(message, {
@@ -3553,17 +3409,17 @@ var useNotification = function useNotification() {
             "$alignItems": 'center',
             "$justifyContent": 'center',
             "$borderRadius": '100%',
-            "$background": colorVariables.disabled.info
+            "$background": themeColors.disabled.info
           }, React__default.createElement(Icon, {
             icon: 'InformationFilled',
             weight: '0px',
             size: 20,
-            color: colorVariables["default"].info
+            color: themeColors["default"].info
           })),
           style: {
             borderRadius: '8px',
-            background: colorVariables.text.white,
-            color: '#363636',
+            background: themeColors.text.white,
+            color: themeColors.text.dark,
             maxWidth: '648px'
           }
         });
@@ -3603,10 +3459,6 @@ var useNotification = function useNotification() {
   };
 };
 
-var useTheme = function useTheme() {
-  return styled.useTheme();
-};
-
 var _templateObject$2, _templateObject2$2, _templateObject3;
 var wrapperCss = styled.css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  svg {\n    overflow: visible;\n    vector-effect: non-scaling-stroke;\n    line,\n    path,\n    circle,\n    ellipse,\n    foreignObject,\n    polygon,\n    polyline,\n    rect,\n    text,\n    textPath,\n    tspan {\n      vector-effect: non-scaling-stroke;\n    }\n  }\n"])));
 var IconWrapper = styled__default.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  width: max-content;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  ", ";\n"])), function (_ref) {
@@ -4470,101 +4322,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 +4602,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 +4619,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 +5071,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 +5186,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,
@@ -7571,6 +7429,165 @@ var InternalTabs = function InternalTabs(_ref) {
   }));
 };
 
+var light = {
+  brand: {
+    primary: '#4C9EEB',
+    secondary: '#14171A',
+    light: '#FFFFFF'
+  },
+  accent: {
+    light_1: '#E1E8ED',
+    light_2: '#F5F8FA',
+    light_3: '#F0F3F5',
+    light_4: '#ECF0F4',
+    light_5: '#F0F0F3',
+    softBlue: '#D4EEFF',
+    extraSoftBlue: '#E4F4FF',
+    boldTransparent: '#5E5E5E80',
+    transparent: '#5E5E5E4D',
+    lightTransparent: '#5E5E5E23'
+  },
+  "default": {
+    primary: '#78B6F0',
+    secondary: '#C2C2C2',
+    tertiary: 'transparent',
+    error: '#F44336',
+    success: '#4CAF50',
+    warning: '#FF9800',
+    info: '#2159F3'
+  },
+  disabled: {
+    primary: '#B9DCF7',
+    secondary: '#DADADA',
+    error: '#FFEBEE',
+    success: '#E8F5E9',
+    warning: '#FFF3E0',
+    info: '#E3F2FD'
+  },
+  hover: {
+    primary: '#4C9EEB',
+    secondary: '#A3A3A3',
+    tertiary: 'transparent',
+    error: '#D32F2F',
+    success: '#388E3C',
+    warning: '#F57C00',
+    info: '#193ED2'
+  },
+  border: {
+    extraBold: '#657786',
+    bold: '#BFBFBF',
+    medium: '#CBCED0',
+    light: '#DCDCDC',
+    extraLight: '#E6E3E3'
+  },
+  text: {
+    dark: '#14171A',
+    medium: '#657786',
+    light: '#98A2AA',
+    white: '#FFFFFF',
+    success: '#1B5E20',
+    error: '#B71C1C',
+    info: '#0D30A1',
+    warning: '#E65100'
+  },
+  badge: {
+    lavender: '#E8DAFF',
+    papayaWhip: '#FFEDD5',
+    water: '#C7E3FF',
+    paleBlue: '#B0F0E4',
+    teaGreen: '#D5F7C2',
+    lightBlue: '#ADD8E6'
+  }
+};
+var dark = {
+  brand: {
+    primary: '#4C9EEB',
+    secondary: '#E1E8ED',
+    light: '#1A1A1A'
+  },
+  accent: {
+    light_1: '#2A2E33',
+    light_2: '#1F2327',
+    light_3: '#0F1214',
+    light_4: '#101417',
+    light_5: '#0F0F0C',
+    softBlue: '#2C3E50',
+    extraSoftBlue: '#34495E',
+    boldTransparent: '#D3D3D380',
+    transparent: '#D3D3D34D',
+    lightTransparent: '#D3D3D323'
+  },
+  "default": {
+    primary: '#78B6F0',
+    secondary: '#4F4F4F',
+    tertiary: 'transparent',
+    error: '#EF5350',
+    success: '#66BB6A',
+    warning: '#FFB74D',
+    info: '#42A5F5'
+  },
+  disabled: {
+    primary: '#3B4A58',
+    secondary: '#3E3E3E',
+    error: '#5B1B1B',
+    success: '#1B3C1B',
+    warning: '#5A3C1B',
+    info: '#1A3C5A'
+  },
+  hover: {
+    primary: '#5CA6F0',
+    secondary: '#7A7A7A',
+    tertiary: 'transparent',
+    error: '#D32F2F',
+    success: '#388E3C',
+    warning: '#F57C00',
+    info: '#1976D2'
+  },
+  border: {
+    extraBold: '#8899A6',
+    bold: '#5E5E5E',
+    medium: '#4A4A4A',
+    light: '#3A3A3A',
+    extraLight: '#2B2B2B'
+  },
+  text: {
+    dark: '#FFFFFF',
+    medium: '#AAB8C2',
+    light: '#8899A6',
+    white: '#14171A',
+    success: '#81C784',
+    error: '#E57373',
+    info: '#64B5F6',
+    warning: '#FFB74D'
+  },
+  badge: {
+    lavender: '#7B5FA1',
+    papayaWhip: '#A46A3E',
+    water: '#5CA6F0',
+    paleBlue: '#4BC9BC',
+    teaGreen: '#7FBF7F',
+    lightBlue: '#5DADE2'
+  }
+};
+var getCurrentTheme = function getCurrentTheme() {
+  if (typeof document !== 'undefined') {
+    var isDarkClass = document.documentElement.classList.contains('dark');
+    return isDarkClass ? 'dark' : 'light';
+  }
+  return 'light';
+};
+var colorVariables = new Proxy({}, {
+  get: function get(_, prop) {
+    var currentThemeName = getCurrentTheme();
+    var currentTheme = themes[currentThemeName];
+    return currentTheme[prop];
+  }
+});
+var themes = {
+  light: light,
+  dark: dark
+};
+
 exports.Badge = Badge;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = ButtonComponent;