labsense-ui-kit 1.1.77 → 1.1.79

package/dist/Themes/Colors.d.ts

@@ -1,6 +1,7 @@
 import { ThemeColorsInterface } from '.';
 export declare const light: ThemeColorsInterface;
 export declare const dark: ThemeColorsInterface;
+export declare const getCurrentTheme: () => "dark" | "light";
 export declare const colorVariables: ThemeColorsInterface;
 export declare const themes: {
     light: ThemeColorsInterface;

package/dist/Themes/index.d.ts

@@ -87,3 +87,5 @@ export interface ThemeColorsInterface {
     text: TextColors;
     badge: BadgeColors;
 }
+export declare type ThemeMode = 'light' | 'dark' | 'device';
+export declare type EffectiveTheme = 'light' | 'dark';

package/dist/index.d.ts

@@ -14,7 +14,7 @@ import { ProgressBar, ProgressBarProps, CircularProgress, CircularProgressProps
 import { Sidebar, logoDetails, SidebarItems } from './Sidebar';
 import { Table, TableCell, TableRow, TableProps } from './Table';
 import { InternalTabs, Tabs, TabContentProps } from './Tabs';
-import { ThemeColorsInterface } from './Themes';
+import { ThemeColorsInterface, ThemeMode } from './Themes';
 import { colorVariables, themes } from './Themes/Colors';
 import { convertToEpoch, formatDate, formatTimestamp, formatCalendarDateTime, timeAgo, formatEpochToIST, convertEpochToDateString, convertEpochToOnlyDate, getSystemTimezoneAbbreviation, timeStringToSeconds } from './Utils/Date&Time';
 export { Badge, IconTooltip };
@@ -33,5 +33,5 @@ export { ProgressBar, ProgressBarProps, CircularProgress, CircularProgressProps
 export { Sidebar, logoDetails, SidebarItems };
 export { TableCell, Table, TableRow, TableProps };
 export { InternalTabs, Tabs, TabContentProps };
-export { ThemeColorsInterface, colorVariables, themes };
+export { ThemeColorsInterface, ThemeMode, colorVariables, themes };
 export { convertToEpoch, formatDate, formatTimestamp, formatCalendarDateTime, timeAgo, formatEpochToIST, convertEpochToDateString, convertEpochToOnlyDate, getSystemTimezoneAbbreviation, timeStringToSeconds };

package/dist/index.js

@@ -163,13 +163,15 @@ var dark = {
 };
 var getCurrentTheme = function getCurrentTheme() {
   if (typeof document !== 'undefined') {
-    return document.documentElement.classList.contains('dark') ? dark : light;
+    var isDarkClass = document.documentElement.classList.contains('dark');
+    return isDarkClass ? 'dark' : 'light';
   }
-  return light;
+  return 'light';
 };
 var colorVariables = new Proxy({}, {
   get: function get(_, prop) {
-    var currentTheme = getCurrentTheme();
+    var currentThemeName = getCurrentTheme();
+    var currentTheme = themes[currentThemeName];
     return currentTheme[prop];
   }
 });
@@ -6775,42 +6777,51 @@ var SidebarContainer = styled__default.div(_templateObject$m || (_templateObject
   var $isExpanded = _ref.$isExpanded;
   return $isExpanded ? '225px' : '68px';
 }, function (_ref2) {
-  var $background = _ref2.$background;
-  return $background || colorVariables.accent.softBlue;
+  var $background = _ref2.$background,
+    theme = _ref2.theme;
+  return $background || theme.accent.softBlue;
 });
-var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  text-decoration: none;\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables.text.medium, colorVariables["default"].primary);
-var IconWrapper$2 = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref3) {
-  var $selected = _ref3.$selected;
-  return $selected ? colorVariables["default"].primary : colorVariables["default"].tertiary;
+var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  text-decoration: none;\n  transition: background 0.3s;\n\n  &:hover {\n  background: ", ";\n  }\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.text.medium;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme["default"].primary;
+});
+var IconWrapper$2 = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref5) {
+  var $selected = _ref5.$selected,
+    theme = _ref5.theme;
+  return $selected ? theme["default"].primary : theme["default"].tertiary;
 });
 var Logo = styled__default.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
-var TextContainer = styled__default.span(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
-  var $padding = _ref4.$padding;
+var TextContainer = styled__default.span(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref6) {
+  var $padding = _ref6.$padding;
   return $padding;
-}, function (_ref5) {
-  var $fontSize = _ref5.$fontSize;
-  return $fontSize || '20px';
-}, function (_ref6) {
-  var $fontWeight = _ref6.$fontWeight;
-  return $fontWeight || '500';
 }, function (_ref7) {
-  var $color = _ref7.$color;
-  return $color || colorVariables["default"].primary;
+  var $fontSize = _ref7.$fontSize;
+  return $fontSize || '20px';
 }, function (_ref8) {
-  var $isExpanded = _ref8.$isExpanded;
-  return $isExpanded ? 1 : 0;
+  var $fontWeight = _ref8.$fontWeight;
+  return $fontWeight || '500';
 }, function (_ref9) {
-  var $isExpanded = _ref9.$isExpanded;
+  var $color = _ref9.$color,
+    theme = _ref9.theme;
+  return $color || theme["default"].primary;
+}, function (_ref10) {
+  var $isExpanded = _ref10.$isExpanded;
+  return $isExpanded ? 1 : 0;
+}, function (_ref11) {
+  var $isExpanded = _ref11.$isExpanded;
   return $isExpanded ? 'visible' : 'hidden';
 });
-var Sidebar = function Sidebar(_ref10) {
-  var logo = _ref10.logo,
-    content = _ref10.content,
-    background = _ref10.background,
-    ProfileContent = _ref10.ProfileContent,
-    _ref10$isExpanded = _ref10.isExpanded,
-    isExpanded = _ref10$isExpanded === void 0 ? false : _ref10$isExpanded,
-    setIsExpanded = _ref10.setIsExpanded;
+var Sidebar = function Sidebar(_ref12) {
+  var logo = _ref12.logo,
+    content = _ref12.content,
+    background = _ref12.background,
+    ProfileContent = _ref12.ProfileContent,
+    _ref12$isExpanded = _ref12.isExpanded,
+    isExpanded = _ref12$isExpanded === void 0 ? false : _ref12$isExpanded,
+    setIsExpanded = _ref12.setIsExpanded;
   var location = reactRouterDom.useLocation();
   var _useState = React.useState({}),
     openMenus = _useState[0],