labsense-ui-kit 1.1.84 → 1.1.86

package/dist/index.modern.js

@@ -1,8 +1,8 @@
-import React, { useState, useRef, useEffect, useId } from 'react';
-import styled, { css, keyframes, useTheme as useTheme$1, styled as styled$1 } from 'styled-components';
+import React, { useRef, useEffect, useState, useId } from 'react';
+import styled, { useTheme as useTheme$1, css, keyframes, styled as styled$1 } from 'styled-components';
+import { toast } from 'react-hot-toast';
 import { useNavigate, NavLink, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'react-hot-toast';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -17,165 +17,6 @@ function _taggedTemplateLiteralLoose(e, t) {
   return t || (t = e.slice(0)), e.raw = t, e;
 }
 
-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: '#F0F3F5',
-    light_4: '#ECF0F4',
-    light_5: '#F0F0F3',
-    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: '#FFFFFF',
-    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 Add = function Add(_ref) {
   var size = _ref.size,
     color = _ref.color,
@@ -3297,167 +3138,59 @@ var Zapper = function Zapper(_ref) {
   }));
 };
 
-var _templateObject, _templateObject2, _templateObject3;
-var wrapperCss = css(_templateObject || (_templateObject = _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.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: max-content;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  ", ";\n"])), function (_ref) {
-  var $clickable = _ref.$clickable;
-  return $clickable ? 'pointer' : 'default';
-}, wrapperCss);
-var IconWrapperForSVG = styled.g(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), wrapperCss);
-var IconSVGs = {
-  Add_1: Add,
-  Add_2: Add_2,
-  AddProfile: AddProfile,
-  App: App,
-  AI_Web: AI_Web,
-  Back: Back,
-  Bin: Bin,
-  Bulb: Bulb,
-  Business: Business,
-  Calendar: Calendar,
-  CCTV_1: CCTV_1,
-  CCTV_2: CCTV_2,
-  Circle: Circle,
-  CircularEdit: CircularEdit,
-  CircularFilledWarning: CircularFilledWarning,
-  CircularPause: CircularPause,
-  CircularPlay: CircularPlay,
-  CircularWarning: CircularWarning,
-  Client: Client,
-  Close: Close,
-  CloseCircle: CloseCircle,
-  CloseEye: CloseEye,
-  Copy: Copy,
-  CPU: CPU,
-  Cube3D: Cube3D,
-  Cyber: Cyber,
-  DiagonalArrow: DiagonalArrow,
-  Directory: Directory,
-  Disk: Disk,
-  DocumentBadge: DocumentBadge,
-  DownArrow: DownArrow,
-  Download: Download,
-  Email: Email,
-  ExitFullScreen: ExitFullScreen,
-  FaceRecognition: FaceRecognition,
-  FilesBox: FilesBox,
-  FilledCircle: FilledCircle,
-  FilledCircleTick: FilledCircleTick,
-  FilledPin: FilledPin,
-  Filter_1: Filter_1,
-  Filter_2: Filter_2,
-  Forward_10_Sec: Forward_10_Sec,
-  Forward: Forward,
-  FPS: FPS,
-  Free: Free,
-  FullScreen: FullScreen,
-  FullVolume: FullVolume,
-  Grid_2x2_Hollow: Grid_2x2_Hollow,
-  Grid_2x2: Grid_2x2,
-  Grid_3x3: Grid_3x3,
-  Grid_4x4: Grid_4x4,
-  Grid_5x5: Grid_5x5,
-  Hazard: Hazard,
-  History: History,
-  Hexagon: Hexagon,
-  Information: Information,
-  InformationFilled: InformationFilled,
-  IP: IP,
-  Key: Key,
-  KeyDown: KeyDown,
-  KnobController: KnobController,
-  LedBulb: LedBulb,
-  LeftArrow: LeftArrow,
-  Letter: Letter,
-  Live: Live,
-  Lock: Lock,
-  Logout: Logout,
-  Maps: Maps,
-  Media: Media,
-  MediumVolume: MediumVolume,
-  Mute: Mute,
-  MuteVolume: MuteVolume,
-  Menu: Menu,
-  Monitor: Monitor,
-  MultiMonitor: MultiMonitor,
-  NetworkStorage: NetworkStorage,
-  NFS_Directory: NFS_Directory,
-  NoCam: NoCam,
-  Node: Node,
-  NoStorage: NoStorage,
-  Notifications: Notifications,
-  OpenBin: OpenBin,
-  OpenEye: OpenEye,
-  PasswordLock: PasswordLock,
-  Pause: Pause,
-  Phone: Phone,
-  Pin_2: Pin_2,
-  Pin: Pin,
-  Play_1: Play,
-  Play_2: Play_2,
-  Playback: Playback,
-  Power: Power,
-  PremiumBadge: PremiumBadge,
-  ProcessingBulb: ProcessingBulb,
-  Profile_1: Profile_1,
-  Profile_2: Profile_2,
-  Profile_3: Profile_3,
-  Recording_1: Recording_1,
-  Recording_2: KnobController$1,
-  Rectangle: Rectangle,
-  Retry: Retry,
-  Return: Return,
-  Rewind_10_Sec: Rewind_10_Sec,
-  Rhombus: Rhombus,
-  RightArrow: RightArrow,
-  ROI: ROI,
-  RunAway: RunAway,
-  SandTimer: SandTimer,
-  Search: Search,
-  Settings: Settings,
-  Shield: Shield,
-  SlantLine: SlantLine,
-  SquareEdit: SquareEdit,
-  SquareTick: SquareTick,
-  StorageDisks: StorageDisks,
-  Tag: Tag,
-  Team: Team,
-  ThreeDots: ThreeDots,
-  ThumbsUp: ThumbsUp,
-  Tick: Tick,
-  Tools: Tools,
-  TriangularFilledWarning: TriangularFilledWarning,
-  UnPinned: UnPinned,
-  UpArrow: UpArrow,
-  Video: Video,
-  Wallet: Wallet,
-  Web: Web,
-  WiFiCam: WiFiCam,
-  WiFiLaptop: WiFiLaptop,
-  Zapper: Zapper
+var useClickOutside = function useClickOutside(elRef, elCallback) {
+  var callbackRef = useRef(elCallback);
+  callbackRef.current = elCallback;
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(eve) {
+      var _elRef$current;
+      if (!(elRef !== null && elRef !== void 0 && (_elRef$current = elRef.current) !== null && _elRef$current !== void 0 && _elRef$current.contains(eve.target))) {
+        callbackRef.current(eve);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return function () {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [elCallback, elRef]);
 };
-var Icon = function Icon(_ref2) {
-  var icon = _ref2.icon,
-    _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? colorVariables.text.medium : _ref2$color,
-    _ref2$weight = _ref2.weight,
-    weight = _ref2$weight === void 0 ? '2px' : _ref2$weight,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 24 : _ref2$size,
-    onClick = _ref2.onClick;
-  var IconSVG = IconSVGs[icon];
-  if (!IconSVG) {
-    console.warn("Icon '" + icon + "' not found");
-    return null;
-  }
-  return React.createElement(IconWrapper, {
-    onClick: onClick,
-    "$clickable": !!onClick
-  }, React.createElement(IconSVG, {
-    size: size,
-    color: color,
-    weight: weight
-  }));
+
+var _templateObject, _templateObject2;
+var ModalOverlay = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: NotoSans, sans-serif;\n  z-index: 9999;\n  backdrop-filter: blur(4px);\n"])));
+var ModalContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  max-height: 100vh;\n  max-width: ", ";\n  overflow: visible;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.accent.light_1;
+}, function (_ref2) {
+  var $maxWidth = _ref2.$maxWidth;
+  return $maxWidth ? $maxWidth : '400px';
+});
+var Modal = function Modal(_ref3) {
+  var isOpen = _ref3.isOpen,
+    maxWidth = _ref3.maxWidth,
+    children = _ref3.children;
+  if (!isOpen) return null;
+  return React.createElement(ModalOverlay, null, React.createElement(ModalContainer, {
+    "$maxWidth": maxWidth,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, children));
+};
+var useCustomModal = function useCustomModal(_ref4) {
+  var maxWidth = _ref4.maxWidth;
+  var _useState = useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var createModal = function createModal(content) {
+    return React.createElement(Modal, {
+      isOpen: isOpen,
+      maxWidth: maxWidth
+    }, content);
+  };
+  return {
+    setIsOpen: setIsOpen,
+    createModal: createModal
+  };
 };
 
 var _templateObject$1, _templateObject2$1;
@@ -3630,9 +3363,254 @@ var Span = styled.span(_templateObject2$1 || (_templateObject2$1 = _taggedTempla
   return $overflowWrap;
 });
 
-var _templateObject$2, _templateObject2$2;
-var TooltipWrapper = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
-var TooltipText = styled.span(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  opacity: ", ";\n  transition: opacity 0.2s ease-in-out;\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: 8px;\n  padding: 8px 16px;\n  font-size: ", ";\n  font-weight: ", ";\n  max-width: 300px;\n  width: max-content;\n  position: fixed;\n  z-index: 999;\n  pointer-events: none;\n"])), function (_ref) {
+var useTheme = function useTheme() {
+  return useTheme$1();
+};
+
+var useNotification = function useNotification() {
+  var themeColors = useTheme();
+  var sendNotification = function sendNotification(_ref) {
+    var type = _ref.type,
+      message = _ref.message,
+      promiseConfig = _ref.promiseConfig,
+      customStyle = _ref.customStyle,
+      _ref$clearCurrent = _ref.clearCurrent,
+      clearCurrent = _ref$clearCurrent === void 0 ? false : _ref$clearCurrent;
+    if (clearCurrent) {
+      toast.dismiss();
+    }
+    switch (type) {
+      case 'success':
+        toast.success(message);
+        break;
+      case 'error':
+        toast.error(message);
+        break;
+      case 'info':
+        toast(message, {
+          icon: React.createElement(Container, {
+            "$minWidth": '20px',
+            "$height": '20px',
+            "$width": '20px',
+            "$alignItems": 'center',
+            "$justifyContent": 'center',
+            "$borderRadius": '100%',
+            "$background": themeColors.disabled.info
+          }, React.createElement(Icon, {
+            icon: 'InformationFilled',
+            weight: '0px',
+            size: 20,
+            color: themeColors["default"].info
+          })),
+          style: {
+            borderRadius: '8px',
+            background: themeColors.text.white,
+            color: '#363636',
+            maxWidth: '648px'
+          }
+        });
+        break;
+      case 'promise':
+        if (promiseConfig) {
+          toast.promise(promiseConfig.promise, {
+            loading: promiseConfig.loading,
+            success: promiseConfig.success,
+            error: promiseConfig.error
+          }, {
+            style: {
+              minWidth: '300px'
+            }
+          });
+        }
+        break;
+      case 'custom':
+        toast(message, {
+          icon: React.createElement(Icon, {
+            icon: (customStyle === null || customStyle === void 0 ? void 0 : customStyle.icon) || 'Add_1',
+            size: customStyle === null || customStyle === void 0 ? void 0 : customStyle.iconSize,
+            weight: customStyle === null || customStyle === void 0 ? void 0 : customStyle.iconWeight
+          }),
+          style: {
+            background: customStyle === null || customStyle === void 0 ? void 0 : customStyle.background,
+            color: customStyle === null || customStyle === void 0 ? void 0 : customStyle.color
+          }
+        });
+        break;
+      default:
+        console.error('Invalid notification type or missing configuration!');
+    }
+  };
+  return {
+    sendNotification: sendNotification
+  };
+};
+
+var _templateObject$2, _templateObject2$2, _templateObject3;
+var wrapperCss = 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.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) {
+  var $clickable = _ref.$clickable;
+  return $clickable ? 'pointer' : 'default';
+}, wrapperCss);
+var IconWrapperForSVG = styled.g(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), wrapperCss);
+var IconSVGs = {
+  Add_1: Add,
+  Add_2: Add_2,
+  AddProfile: AddProfile,
+  App: App,
+  AI_Web: AI_Web,
+  Back: Back,
+  Bin: Bin,
+  Bulb: Bulb,
+  Business: Business,
+  Calendar: Calendar,
+  CCTV_1: CCTV_1,
+  CCTV_2: CCTV_2,
+  Circle: Circle,
+  CircularEdit: CircularEdit,
+  CircularFilledWarning: CircularFilledWarning,
+  CircularPause: CircularPause,
+  CircularPlay: CircularPlay,
+  CircularWarning: CircularWarning,
+  Client: Client,
+  Close: Close,
+  CloseCircle: CloseCircle,
+  CloseEye: CloseEye,
+  Copy: Copy,
+  CPU: CPU,
+  Cube3D: Cube3D,
+  Cyber: Cyber,
+  DiagonalArrow: DiagonalArrow,
+  Directory: Directory,
+  Disk: Disk,
+  DocumentBadge: DocumentBadge,
+  DownArrow: DownArrow,
+  Download: Download,
+  Email: Email,
+  ExitFullScreen: ExitFullScreen,
+  FaceRecognition: FaceRecognition,
+  FilesBox: FilesBox,
+  FilledCircle: FilledCircle,
+  FilledCircleTick: FilledCircleTick,
+  FilledPin: FilledPin,
+  Filter_1: Filter_1,
+  Filter_2: Filter_2,
+  Forward_10_Sec: Forward_10_Sec,
+  Forward: Forward,
+  FPS: FPS,
+  Free: Free,
+  FullScreen: FullScreen,
+  FullVolume: FullVolume,
+  Grid_2x2_Hollow: Grid_2x2_Hollow,
+  Grid_2x2: Grid_2x2,
+  Grid_3x3: Grid_3x3,
+  Grid_4x4: Grid_4x4,
+  Grid_5x5: Grid_5x5,
+  Hazard: Hazard,
+  History: History,
+  Hexagon: Hexagon,
+  Information: Information,
+  InformationFilled: InformationFilled,
+  IP: IP,
+  Key: Key,
+  KeyDown: KeyDown,
+  KnobController: KnobController,
+  LedBulb: LedBulb,
+  LeftArrow: LeftArrow,
+  Letter: Letter,
+  Live: Live,
+  Lock: Lock,
+  Logout: Logout,
+  Maps: Maps,
+  Media: Media,
+  MediumVolume: MediumVolume,
+  Mute: Mute,
+  MuteVolume: MuteVolume,
+  Menu: Menu,
+  Monitor: Monitor,
+  MultiMonitor: MultiMonitor,
+  NetworkStorage: NetworkStorage,
+  NFS_Directory: NFS_Directory,
+  NoCam: NoCam,
+  Node: Node,
+  NoStorage: NoStorage,
+  Notifications: Notifications,
+  OpenBin: OpenBin,
+  OpenEye: OpenEye,
+  PasswordLock: PasswordLock,
+  Pause: Pause,
+  Phone: Phone,
+  Pin_2: Pin_2,
+  Pin: Pin,
+  Play_1: Play,
+  Play_2: Play_2,
+  Playback: Playback,
+  Power: Power,
+  PremiumBadge: PremiumBadge,
+  ProcessingBulb: ProcessingBulb,
+  Profile_1: Profile_1,
+  Profile_2: Profile_2,
+  Profile_3: Profile_3,
+  Recording_1: Recording_1,
+  Recording_2: KnobController$1,
+  Rectangle: Rectangle,
+  Retry: Retry,
+  Return: Return,
+  Rewind_10_Sec: Rewind_10_Sec,
+  Rhombus: Rhombus,
+  RightArrow: RightArrow,
+  ROI: ROI,
+  RunAway: RunAway,
+  SandTimer: SandTimer,
+  Search: Search,
+  Settings: Settings,
+  Shield: Shield,
+  SlantLine: SlantLine,
+  SquareEdit: SquareEdit,
+  SquareTick: SquareTick,
+  StorageDisks: StorageDisks,
+  Tag: Tag,
+  Team: Team,
+  ThreeDots: ThreeDots,
+  ThumbsUp: ThumbsUp,
+  Tick: Tick,
+  Tools: Tools,
+  TriangularFilledWarning: TriangularFilledWarning,
+  UnPinned: UnPinned,
+  UpArrow: UpArrow,
+  Video: Video,
+  Wallet: Wallet,
+  Web: Web,
+  WiFiCam: WiFiCam,
+  WiFiLaptop: WiFiLaptop,
+  Zapper: Zapper
+};
+var Icon = function Icon(_ref2) {
+  var icon = _ref2.icon,
+    color = _ref2.color,
+    _ref2$weight = _ref2.weight,
+    weight = _ref2$weight === void 0 ? '2px' : _ref2$weight,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 24 : _ref2$size,
+    onClick = _ref2.onClick;
+  var themeColors = useTheme();
+  var IconSVG = IconSVGs[icon];
+  if (!IconSVG) {
+    console.warn("Icon '" + icon + "' not found");
+    return null;
+  }
+  return React.createElement(IconWrapper, {
+    onClick: onClick,
+    "$clickable": !!onClick
+  }, React.createElement(IconSVG, {
+    size: size,
+    color: color || themeColors.text.medium,
+    weight: weight
+  }));
+};
+
+var _templateObject$3, _templateObject2$3;
+var TooltipWrapper = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TooltipText = styled.span(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  opacity: ", ";\n  transition: opacity 0.2s ease-in-out;\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: 8px;\n  padding: 8px 16px;\n  font-size: ", ";\n  font-weight: ", ";\n  max-width: 300px;\n  width: max-content;\n  position: fixed;\n  z-index: 999;\n  pointer-events: none;\n"])), function (_ref) {
   var $visible = _ref.$visible;
   return $visible ? 'visible' : 'hidden';
 }, function (_ref2) {
@@ -3670,11 +3648,11 @@ var Badge = function Badge(_ref8) {
     icon = _ref8$icon === void 0 ? {
       icon: 'Information',
       size: 10,
-      weight: '0.1px',
-      color: colorVariables.text.medium
+      weight: '0.1px'
     } : _ref8$icon,
     tooltipText = _ref8.tooltipText,
     tooltipCSS = _ref8.tooltipCSS;
+  var themeColors = useTheme();
   var _useState = useState(false),
     showTooltip = _useState[0],
     setShowTooltip = _useState[1];
@@ -3748,7 +3726,7 @@ var Badge = function Badge(_ref8) {
     icon: icon.icon,
     size: icon.size,
     weight: icon.weight,
-    color: icon.color
+    color: icon.color || themeColors.text.medium
   }), React.createElement(TooltipText, {
     "$bgColor": tooltipCSS === null || tooltipCSS === void 0 ? void 0 : tooltipCSS.background,
     "$visible": showTooltip,
@@ -3765,8 +3743,8 @@ var Badge = function Badge(_ref8) {
   }, text));
 };
 
-var _templateObject$3, _templateObject2$3, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-var TooltipContainer = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: absolute;\n  z-index: 10;\n  align-items: center;\n  justify-content: center;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.3s;\n  border-radius: ", ";\n  padding: 6px 8px;\n  border: ", ";\n  min-width: ", ";\n  min-width: ", ";\n  background-color: ", ";\n  gap: ", ";\n\n  ", "\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 16px;\n    height: 8px;\n    background-color: ", ";\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n\n    ", "\n  }\n"])), function (_ref) {
+var _templateObject$4, _templateObject2$4, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var TooltipContainer = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: absolute;\n  z-index: 10;\n  align-items: center;\n  justify-content: center;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.3s;\n  border-radius: ", ";\n  padding: 6px 8px;\n  border: ", ";\n  min-width: ", ";\n  min-width: ", ";\n  background-color: ", ";\n  gap: ", ";\n\n  ", "\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 16px;\n    height: 8px;\n    background-color: ", ";\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n\n    ", "\n  }\n"])), function (_ref) {
   var $borderRadius = _ref.$borderRadius;
   return $borderRadius != null ? $borderRadius : '4px';
 }, function (_ref2) {
@@ -3790,7 +3768,7 @@ var TooltipContainer = styled.div(_templateObject$3 || (_templateObject$3 = _tag
     $iconSize = _ref7.$iconSize,
     $tooltipTop = _ref7.$tooltipTop;
   var vertical = $tooltipPosition.startsWith('top') ? "bottom: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";" : "top: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";";
-  var horizontal = $tooltipPosition.endsWith('Left') ? css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["left: calc(100% + 10px); transform: translateX(-99%);"]))) : $tooltipPosition.endsWith('Center') ? css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["left: 50%; transform: translateX(-50%);"]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["right: calc(100% + 10px); transform: translateX(99%);"])));
+  var horizontal = $tooltipPosition.endsWith('Left') ? css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["left: calc(100% + 10px); transform: translateX(-99%);"]))) : $tooltipPosition.endsWith('Center') ? css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["left: 50%; transform: translateX(-50%);"]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["right: calc(100% + 10px); transform: translateX(99%);"])));
   return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["", " ", ";"])), vertical, horizontal);
 }, function (_ref8) {
   var $background = _ref8.$background,
@@ -3811,19 +3789,18 @@ var IconTooltip = function IconTooltip(_ref10) {
     icon = _ref10$icon === void 0 ? {
       icon: 'Information',
       size: 12,
-      weight: '0px',
-      color: colorVariables.text.medium
+      weight: '0px'
     } : _ref10$icon,
     infoIcon = _ref10.infoIcon,
     infoText = _ref10.infoText,
     _ref10$tooltipCSS = _ref10.tooltipCSS,
     tooltipCSS = _ref10$tooltipCSS === void 0 ? {
-      background: colorVariables.accent.light_1,
       gap: '4px',
       minWidth: 'max-content',
       position: 'bottomCenter',
       tooltipTop: undefined
     } : _ref10$tooltipCSS;
+  var themeColors = useTheme();
   return React.createElement(TooltipWrapper$1, null, React.createElement(Icon, Object.assign({}, icon, {
     onClick: function onClick() {}
   })), React.createElement(TooltipContainer, {
@@ -3831,7 +3808,7 @@ var IconTooltip = function IconTooltip(_ref10) {
     "$minWidth": tooltipCSS.minWidth,
     "$maxWidth": tooltipCSS.maxWidth,
     "$tooltipTop": tooltipCSS.tooltipTop,
-    "$background": tooltipCSS.background,
+    "$background": tooltipCSS.background || themeColors.accent.light_1,
     "$gap": tooltipCSS.gap,
     "$iconSize": icon.size || 17,
     "$border": tooltipCSS.border,
@@ -3839,8 +3816,8 @@ var IconTooltip = function IconTooltip(_ref10) {
   }, infoIcon && React.createElement(Icon, Object.assign({}, infoIcon)), infoText));
 };
 
-var _templateObject$4;
-var BreadCrum = styled.span(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  font-weight: 400;\n  font-size: 12px;\n  color: ", ";\n  line-height: 100%;\n  text-align: center;\n  opacity: ", ";\n  \n  &:hover {\n    text-decoration: ", ";\n    cursor: ", ";\n    color: ", ";\n  }\n"])), function (_ref) {
+var _templateObject$5;
+var BreadCrum = styled.span(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  font-weight: 400;\n  font-size: 12px;\n  color: ", ";\n  line-height: 100%;\n  text-align: center;\n  opacity: ", ";\n  \n  &:hover {\n    text-decoration: ", ";\n    cursor: ", ";\n    color: ", ";\n  }\n"])), function (_ref) {
   var $color = _ref.$color,
     theme = _ref.theme;
   return $color ? $color : theme.text.medium;
@@ -3868,6 +3845,7 @@ var Breadcrumbs = function Breadcrumbs(_ref6) {
     disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
     breadcrumbs = _ref6.breadcrumbs,
     onBackClick = _ref6.onBackClick;
+  var themeColors = useTheme();
   var navigate = useNavigate();
   var _useState = useState(false),
     hovered = _useState[0],
@@ -3896,29 +3874,29 @@ var Breadcrumbs = function Breadcrumbs(_ref6) {
     }, React.createElement(Icon, {
       icon: 'RightArrow',
       size: 5,
-      color: colorVariables.text.medium
+      color: themeColors.text.medium
     })), React.createElement(BreadCrum, {
       onClick: function onClick() {
         if (breadcrumb.navigateLink) navigate(breadcrumb.navigateLink);
       },
       "$hover": breadcrumb.navigateLink ? true : false,
       "$disabled": disabled,
-      "$color": breadcrumb.navigateLink ? colorVariables.text.dark : colorVariables.text.medium
+      "$color": breadcrumb.navigateLink ? themeColors.text.dark : themeColors.text.medium
     }, breadcrumb.text));
   }));
 };
 
-var _templateObject$5;
-var fontFaces = css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 200;\n    font-style: normal;\n    src: url('./NotoSans-ExtraLight.woff') format('woff');\n    font-display: fallback;\n  }\n\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 300;\n    font-style: normal;\n    src: url('./NotoSans-Light.woff') format('woff');\n    font-display: fallback;\n  }\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 400;\n    font-style: normal;\n    src: url('./NotoSans-Regular.woff') format('woff');\n    font-display: fallback;\n  }\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 400;\n    font-style: italic;\n    src: url('./NotoSans-italic.woff') format('woff');\n    font-display: fallback;\n  }\n\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 500;\n    font-style: normal;\n    src: url('./NotoSans-Medium.woff') format('woff');\n    font-display: fallback;\n  }\n\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 600;\n    font-style: normal;\n    src: url('./NotoSans-SemiBold.woff') format('woff');\n    font-display: fallback;\n  }\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 700;\n    font-style: normal;\n    src: url('./NotoSans-Bold.woff') format('woff');\n    font-display: fallback;\n  }\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 800;\n    font-style: normal;\n    src: url('./NotoSans-ExtraBold.woff') format('woff');\n    font-display: fallback;\n  }\n"])));
+var _templateObject$6;
+var fontFaces = css(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 200;\n    font-style: normal;\n    src: url('./NotoSans-ExtraLight.woff') format('woff');\n    font-display: fallback;\n  }\n\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 300;\n    font-style: normal;\n    src: url('./NotoSans-Light.woff') format('woff');\n    font-display: fallback;\n  }\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 400;\n    font-style: normal;\n    src: url('./NotoSans-Regular.woff') format('woff');\n    font-display: fallback;\n  }\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 400;\n    font-style: italic;\n    src: url('./NotoSans-italic.woff') format('woff');\n    font-display: fallback;\n  }\n\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 500;\n    font-style: normal;\n    src: url('./NotoSans-Medium.woff') format('woff');\n    font-display: fallback;\n  }\n\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 600;\n    font-style: normal;\n    src: url('./NotoSans-SemiBold.woff') format('woff');\n    font-display: fallback;\n  }\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 700;\n    font-style: normal;\n    src: url('./NotoSans-Bold.woff') format('woff');\n    font-display: fallback;\n  }\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 800;\n    font-style: normal;\n    src: url('./NotoSans-ExtraBold.woff') format('woff');\n    font-display: fallback;\n  }\n"])));
 var GlobalFonts = {
   bold: 'NotoSans, sans-serif',
   regular: 'NotoSans, sans-serif',
   light: 'NotoSans, sans-serif'
 };
 
-var _templateObject$6, _templateObject2$4, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1;
-var spin = keyframes(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var Spinner = styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  width: ", "px;\n  height: ", "px;\n  border: ", "px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: fadeIn 0.3s ease-in-out forwards, ", " 1s linear infinite;\n"])), function (_ref) {
+var _templateObject$7, _templateObject2$5, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1;
+var spin = keyframes(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner = styled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  width: ", "px;\n  height: ", "px;\n  border: ", "px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: fadeIn 0.3s ease-in-out forwards, ", " 1s linear infinite;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
@@ -4016,8 +3994,7 @@ var ButtonComponent = function ButtonComponent(_ref20) {
     text = _ref20.text,
     size = _ref20.size,
     background = _ref20.background,
-    _ref20$hoverColor = _ref20.hoverColor,
-    hoverColor = _ref20$hoverColor === void 0 ? colorVariables.text.white : _ref20$hoverColor,
+    hoverColor = _ref20.hoverColor,
     color = _ref20.color,
     colorHover = _ref20.colorHover,
     borderDefault = _ref20.borderDefault,
@@ -4042,9 +4019,9 @@ var ButtonComponent = function ButtonComponent(_ref20) {
     _ref20$loaderProps = _ref20.loaderProps,
     loaderProps = _ref20$loaderProps === void 0 ? {
       loading: false,
-      loaderPosition: 'right',
-      loaderColor: colorVariables.text.white
+      loaderPosition: 'right'
     } : _ref20$loaderProps;
+  var themeColors = useTheme();
   var _useState = useState(false),
     isHovered = _useState[0],
     setIsHovered = _useState[1];
@@ -4082,7 +4059,7 @@ var ButtonComponent = function ButtonComponent(_ref20) {
         iconClick();
       }
     },
-    color: variant === 'tertiary' && isHovered ? colorVariables.hover.primary : variant === 'tertiary' && disabled ? colorVariables.disabled.primary : variant === 'tertiary' ? colorVariables["default"].primary : variant === 'outline-primary' && isHovered ? colorVariables.text.white : variant === 'outline-primary' && disabled ? colorVariables.disabled.primary : variant === 'outline-primary' ? colorVariables["default"].primary : variant === 'outline-secondary' && isHovered ? colorVariables.text.white : variant === 'outline-secondary' && disabled ? colorVariables.disabled.secondary : variant === 'outline-secondary' ? colorVariables["default"].secondary : variant === 'outline-error' && isHovered ? colorVariables.text.white : variant === 'outline-error' && disabled ? colorVariables.disabled.error : variant === 'outline-error' ? colorVariables["default"].error : isHovered ? hoverColor : color ? color : colorVariables.text.white
+    color: variant === 'tertiary' && isHovered ? themeColors.hover.primary : variant === 'tertiary' && disabled ? themeColors.disabled.primary : variant === 'tertiary' ? themeColors["default"].primary : variant === 'outline-primary' && isHovered ? themeColors.text.white : variant === 'outline-primary' && disabled ? themeColors.disabled.primary : variant === 'outline-primary' ? themeColors["default"].primary : variant === 'outline-secondary' && isHovered ? themeColors.text.white : variant === 'outline-secondary' && disabled ? themeColors.disabled.secondary : variant === 'outline-secondary' ? themeColors["default"].secondary : variant === 'outline-error' && isHovered ? themeColors.text.white : variant === 'outline-error' && disabled ? themeColors.disabled.error : variant === 'outline-error' ? themeColors["default"].error : isHovered ? hoverColor || themeColors.text.white : color ? color : themeColors.text.white
   }), text && React.createElement(ButtonText, {
     "$size": size,
     "$fontFamily": fontFamily,
@@ -4092,18 +4069,19 @@ var ButtonComponent = function ButtonComponent(_ref20) {
     "$loaderPosition": loaderPos
   }, React.createElement(Spinner, {
     "$size": size === 'small' ? 12 : size === 'medium' ? 16 : 18,
-    "$color": loaderProps.loaderColor || 'color'
+    "$color": loaderProps.loaderColor || themeColors.text.white
   })));
 };
 
-var _templateObject$7;
-var InnerContent = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 12px;\n  overflow-x: auto;\n  scroll-behavior: smooth;\n  scrollbar-width: none;\n  ms-overflow-style: none;\n  white-space: nowrap;\n  padding: ", "; \n  margin: 0 10px;\n"])), function (_ref) {
+var _templateObject$8;
+var InnerContent = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 12px;\n  overflow-x: auto;\n  scroll-behavior: smooth;\n  scrollbar-width: none;\n  ms-overflow-style: none;\n  white-space: nowrap;\n  padding: ", "; \n  margin: 0 10px;\n"])), function (_ref) {
   var $isScrollable = _ref.$isScrollable;
   return $isScrollable ? '0 12px' : '0';
 });
 var ButtonCarousel = function ButtonCarousel(_ref2) {
   var contentLength = _ref2.contentLength,
     innerNode = _ref2.innerNode;
+  var themeColors = useTheme();
   var scrollRef = useRef(null);
   var _useState = useState(false),
     isScrollable = _useState[0],
@@ -4164,8 +4142,8 @@ var ButtonCarousel = function ButtonCarousel(_ref2) {
     borderRadius: '50%',
     onClick: scrollLeft,
     iconSize: 10,
-    borderDefault: "2px solid " + colorVariables["default"].tertiary,
-    borderHover: "2px solid " + colorVariables.hover.primary
+    borderDefault: "2px solid " + themeColors["default"].tertiary,
+    borderHover: "2px solid " + themeColors.hover.primary
   }), React.createElement(InnerContent, {
     "$isScrollable": isScrollable,
     ref: scrollRef,
@@ -4178,8 +4156,8 @@ var ButtonCarousel = function ButtonCarousel(_ref2) {
     borderRadius: '50%',
     onClick: scrollRight,
     iconSize: 10,
-    borderDefault: "2px solid " + colorVariables["default"].tertiary,
-    borderHover: "2px solid " + colorVariables.hover.primary
+    borderDefault: "2px solid " + themeColors["default"].tertiary,
+    borderHover: "2px solid " + themeColors.hover.primary
   }));
 };
 
@@ -4328,9 +4306,9 @@ var timeStringToSeconds = function timeStringToSeconds(timeString) {
   return hours * 3600 + minutes * 60 + seconds;
 };
 
-var _templateObject$8, _templateObject2$5, _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.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
-var CalendarContainer = styled.div(_templateObject2$5 || (_templateObject2$5 = _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 _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.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
+var CalendarContainer = styled.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 theme = _ref.theme;
   return "1px solid " + theme.border.medium;
 });
@@ -4649,9 +4627,9 @@ var DatePicker = function DatePicker(_ref20) {
   }))))), React.createElement(Line, null, React.createElement("hr", null)), React.createElement(Zones, null, React.createElement(CurrentTime, null, t('TimePicker_Zone')), React.createElement(CurrentTime, null, getSystemTimezoneAbbreviation())))));
 };
 
-var _templateObject$9, _templateObject2$6, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3;
-var OptionContainer = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose([""])));
-var OptionItem = styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n  border-bottom: ", ";\n"])), function (_ref) {
+var _templateObject$a, _templateObject2$7, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3;
+var OptionContainer = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose([""])));
+var OptionItem = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  border-bottom: ", ";\n"])), function (_ref) {
   var $optionBorder = _ref.$optionBorder,
     $isborder = _ref.$isborder,
     theme = _ref.theme;
@@ -4767,212 +4745,76 @@ var OptionComponent = function OptionComponent(_ref9) {
     selectedOptions = _ref9.selectedOptions,
     onChange = _ref9.onChange,
     _ref9$placeholder = _ref9.placeholder,
-    placeholder = _ref9$placeholder === void 0 ? 'Search...' : _ref9$placeholder,
-    placeholderColor = _ref9.placeholderColor,
-    optionBorder = _ref9.optionBorder,
-    optionColor = _ref9.optionColor,
-    searchIcon = _ref9.searchIcon,
-    searchbarTextColor = _ref9.searchbarTextColor,
-    searchBoxBorder = _ref9.searchBoxBorder,
-    searchBoxBorderRadius = _ref9.searchBoxBorderRadius,
-    searchBoxBackground = _ref9.searchBoxBackground,
-    _ref9$searchBox = _ref9.searchBox,
-    searchBox = _ref9$searchBox === void 0 ? true : _ref9$searchBox,
-    NoOptionsText = _ref9.NoOptionsText;
-  var _useState = useState(''),
-    searchQuery = _useState[0],
-    setSearchQuery = _useState[1];
-  var handleSearchChange = function handleSearchChange(e) {
-    setSearchQuery(e.target.value);
-  };
-  var handleOptionToggle = function handleOptionToggle(currentOption) {
-    var newOption = selectedOptions.includes(currentOption) ? selectedOptions.filter(function (item) {
-      return item !== currentOption;
-    }) : [].concat(selectedOptions, [currentOption]);
-    onChange === null || onChange === void 0 ? void 0 : onChange(newOption);
-  };
-  var SortedOptions = [].concat(options).sort(function (a, b) {
-    return a.labelText.localeCompare(b.labelText);
-  }).filter(function (option) {
-    return option.labelText.toLowerCase().includes(searchQuery.toLowerCase());
-  });
-  return React.createElement(Container, {
-    "$flexDirection": 'column',
-    "$gap": '8px',
-    "$width": '100%'
-  }, searchBox && React.createElement(SearchContainer, {
-    "$borderBottom": searchBoxBorder,
-    "$background": searchBoxBackground,
-    "$borderRadius": searchBoxBorderRadius
-  }, React.createElement(Icon, {
-    icon: 'Search',
-    size: (searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.size) || 16,
-    color: searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.color,
-    weight: (searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.weight) || '0px'
-  }), React.createElement(SearchBar, {
-    type: 'text',
-    placeholder: placeholder,
-    value: searchQuery,
-    onChange: handleSearchChange,
-    "$inputColor": searchbarTextColor,
-    "$placeholderColor": placeholderColor
-  })), React.createElement(OptionContainer, null, SortedOptions.length > 0 ? SortedOptions.map(function (option, id) {
-    return React.createElement(OptionItem, {
-      key: option.value,
-      "$optionBorder": optionBorder,
-      "$isborder": id !== SortedOptions.length - 1
-    }, React.createElement(OptionLabel, {
-      htmlFor: option.value,
-      "$optionColor": optionColor
-    }, React.createElement("input", {
-      id: option.value,
-      type: 'checkbox',
-      checked: selectedOptions.includes(option.value),
-      onChange: function onChange() {
-        return handleOptionToggle(option.value);
-      }
-    }), React.createElement(Text, null, option.labelText)));
-  }) : React.createElement(Container, {
-    "$padding": '8px'
-  }, React.createElement(Span, {
-    "$fontSize": '14px'
-  }, NoOptionsText))));
-};
-
-var useClickOutside = function useClickOutside(elRef, elCallback) {
-  var callbackRef = useRef(elCallback);
-  callbackRef.current = elCallback;
-  useEffect(function () {
-    var handleClickOutside = function handleClickOutside(eve) {
-      var _elRef$current;
-      if (!(elRef !== null && elRef !== void 0 && (_elRef$current = elRef.current) !== null && _elRef$current !== void 0 && _elRef$current.contains(eve.target))) {
-        callbackRef.current(eve);
-      }
-    };
-    document.addEventListener('click', handleClickOutside, true);
-    return function () {
-      document.removeEventListener('click', handleClickOutside, true);
-    };
-  }, [elCallback, elRef]);
-};
-
-var _templateObject$a, _templateObject2$7;
-var ModalOverlay = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: NotoSans, sans-serif;\n  z-index: 9999;\n  backdrop-filter: blur(4px);\n"])));
-var ModalContainer = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  max-height: 100vh;\n  max-width: ", ";\n  overflow: visible;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.accent.light_1;
-}, function (_ref2) {
-  var $maxWidth = _ref2.$maxWidth;
-  return $maxWidth ? $maxWidth : '400px';
-});
-var Modal = function Modal(_ref3) {
-  var isOpen = _ref3.isOpen,
-    maxWidth = _ref3.maxWidth,
-    children = _ref3.children;
-  if (!isOpen) return null;
-  return React.createElement(ModalOverlay, null, React.createElement(ModalContainer, {
-    "$maxWidth": maxWidth,
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
-  }, children));
-};
-var useCustomModal = function useCustomModal(_ref4) {
-  var maxWidth = _ref4.maxWidth;
-  var _useState = useState(false),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var createModal = function createModal(content) {
-    return React.createElement(Modal, {
-      isOpen: isOpen,
-      maxWidth: maxWidth
-    }, content);
-  };
-  return {
-    setIsOpen: setIsOpen,
-    createModal: createModal
-  };
-};
-
-var useNotification = function useNotification() {
-  var sendNotification = function sendNotification(_ref) {
-    var type = _ref.type,
-      message = _ref.message,
-      promiseConfig = _ref.promiseConfig,
-      customStyle = _ref.customStyle,
-      _ref$clearCurrent = _ref.clearCurrent,
-      clearCurrent = _ref$clearCurrent === void 0 ? false : _ref$clearCurrent;
-    if (clearCurrent) {
-      toast.dismiss();
-    }
-    switch (type) {
-      case 'success':
-        toast.success(message);
-        break;
-      case 'error':
-        toast.error(message);
-        break;
-      case 'info':
-        toast(message, {
-          icon: React.createElement(Container, {
-            "$minWidth": '20px',
-            "$height": '20px',
-            "$width": '20px',
-            "$alignItems": 'center',
-            "$justifyContent": 'center',
-            "$borderRadius": '100%',
-            "$background": colorVariables.disabled.info
-          }, React.createElement(Icon, {
-            icon: 'InformationFilled',
-            weight: '0px',
-            size: 20,
-            color: colorVariables["default"].info
-          })),
-          style: {
-            borderRadius: '8px',
-            background: colorVariables.text.white,
-            color: '#363636',
-            maxWidth: '648px'
-          }
-        });
-        break;
-      case 'promise':
-        if (promiseConfig) {
-          toast.promise(promiseConfig.promise, {
-            loading: promiseConfig.loading,
-            success: promiseConfig.success,
-            error: promiseConfig.error
-          }, {
-            style: {
-              minWidth: '300px'
-            }
-          });
-        }
-        break;
-      case 'custom':
-        toast(message, {
-          icon: React.createElement(Icon, {
-            icon: (customStyle === null || customStyle === void 0 ? void 0 : customStyle.icon) || 'Add_1',
-            size: customStyle === null || customStyle === void 0 ? void 0 : customStyle.iconSize,
-            weight: customStyle === null || customStyle === void 0 ? void 0 : customStyle.iconWeight
-          }),
-          style: {
-            background: customStyle === null || customStyle === void 0 ? void 0 : customStyle.background,
-            color: customStyle === null || customStyle === void 0 ? void 0 : customStyle.color
-          }
-        });
-        break;
-      default:
-        console.error('Invalid notification type or missing configuration!');
-    }
+    placeholder = _ref9$placeholder === void 0 ? 'Search...' : _ref9$placeholder,
+    placeholderColor = _ref9.placeholderColor,
+    optionBorder = _ref9.optionBorder,
+    optionColor = _ref9.optionColor,
+    searchIcon = _ref9.searchIcon,
+    searchbarTextColor = _ref9.searchbarTextColor,
+    searchBoxBorder = _ref9.searchBoxBorder,
+    searchBoxBorderRadius = _ref9.searchBoxBorderRadius,
+    searchBoxBackground = _ref9.searchBoxBackground,
+    _ref9$searchBox = _ref9.searchBox,
+    searchBox = _ref9$searchBox === void 0 ? true : _ref9$searchBox,
+    NoOptionsText = _ref9.NoOptionsText;
+  var _useState = useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var handleSearchChange = function handleSearchChange(e) {
+    setSearchQuery(e.target.value);
   };
-  return {
-    sendNotification: sendNotification
+  var handleOptionToggle = function handleOptionToggle(currentOption) {
+    var newOption = selectedOptions.includes(currentOption) ? selectedOptions.filter(function (item) {
+      return item !== currentOption;
+    }) : [].concat(selectedOptions, [currentOption]);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newOption);
   };
-};
-
-var useTheme = function useTheme() {
-  return useTheme$1();
+  var SortedOptions = [].concat(options).sort(function (a, b) {
+    return a.labelText.localeCompare(b.labelText);
+  }).filter(function (option) {
+    return option.labelText.toLowerCase().includes(searchQuery.toLowerCase());
+  });
+  return React.createElement(Container, {
+    "$flexDirection": 'column',
+    "$gap": '8px',
+    "$width": '100%'
+  }, searchBox && React.createElement(SearchContainer, {
+    "$borderBottom": searchBoxBorder,
+    "$background": searchBoxBackground,
+    "$borderRadius": searchBoxBorderRadius
+  }, React.createElement(Icon, {
+    icon: 'Search',
+    size: (searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.size) || 16,
+    color: searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.color,
+    weight: (searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.weight) || '0px'
+  }), React.createElement(SearchBar, {
+    type: 'text',
+    placeholder: placeholder,
+    value: searchQuery,
+    onChange: handleSearchChange,
+    "$inputColor": searchbarTextColor,
+    "$placeholderColor": placeholderColor
+  })), React.createElement(OptionContainer, null, SortedOptions.length > 0 ? SortedOptions.map(function (option, id) {
+    return React.createElement(OptionItem, {
+      key: option.value,
+      "$optionBorder": optionBorder,
+      "$isborder": id !== SortedOptions.length - 1
+    }, React.createElement(OptionLabel, {
+      htmlFor: option.value,
+      "$optionColor": optionColor
+    }, React.createElement("input", {
+      id: option.value,
+      type: 'checkbox',
+      checked: selectedOptions.includes(option.value),
+      onChange: function onChange() {
+        return handleOptionToggle(option.value);
+      }
+    }), React.createElement(Text, null, option.labelText)));
+  }) : React.createElement(Container, {
+    "$padding": '8px'
+  }, React.createElement(Span, {
+    "$fontSize": '14px'
+  }, NoOptionsText))));
 };
 
 var _templateObject$b, _templateObject2$8, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2;
@@ -5372,6 +5214,7 @@ var SelectedOption = function SelectedOption(_ref4) {
     removeIconColor = _ref4.removeIconColor,
     onChange = _ref4.onChange,
     type = _ref4.type;
+  var themeColors = useTheme();
   var selectedOptionObjects = allOptions.filter(function (opt) {
     return selectedOptions.includes(opt.value);
   }).sort(function (a, b) {
@@ -5404,7 +5247,7 @@ var SelectedOption = function SelectedOption(_ref4) {
     }, React.createElement(Icon, {
       icon: 'Close',
       size: 6,
-      color: removeIconColor || type === 'remove' ? colorVariables["default"].error : colorVariables.brand.primary
+      color: removeIconColor || type === 'remove' ? themeColors["default"].error : themeColors.brand.primary
     })));
   }));
 };
@@ -5643,8 +5486,7 @@ var SelectOption = function SelectOption(_ref36) {
     searchIcon = _ref36.searchIcon,
     _ref36$placeholderTex = _ref36.placeholderText,
     placeholderText = _ref36$placeholderTex === void 0 ? 'Search...' : _ref36$placeholderTex,
-    _ref36$iconColor = _ref36.iconColor,
-    iconColor = _ref36$iconColor === void 0 ? colorVariables.text.medium : _ref36$iconColor,
+    iconColor = _ref36.iconColor,
     placeholderColor = _ref36.placeholderColor,
     inputColor = _ref36.inputColor,
     _ref36$iconSize = _ref36.iconSize,
@@ -5652,6 +5494,7 @@ var SelectOption = function SelectOption(_ref36) {
     _ref36$allowDeselect = _ref36.allowDeselect,
     allowDeselect = _ref36$allowDeselect === void 0 ? true : _ref36$allowDeselect,
     titleRightNode = _ref36.titleRightNode;
+  var themeColors = useTheme();
   var _useState = useState(false),
     dropUp = _useState[0],
     setDropUp = _useState[1];
@@ -5759,19 +5602,19 @@ var SelectOption = function SelectOption(_ref36) {
     icon: icon.name,
     size: icon.size || 14,
     weight: icon.weight || '1px',
-    color: icon.color || colorVariables.text.medium
+    color: icon.color || themeColors.text.medium
   }), label ? React.createElement(LabelText$1, {
     color: color,
     "$disabled": disabled,
     "$size": size
   }, label) : React.createElement(LabelText$1, {
     "$fontStyle": fontStyle ? fontStyle : 'italic',
-    color: colorVariables.text.light,
+    color: themeColors.text.light,
     "$size": size
   }, labelText), React.createElement(Icon, {
     icon: isOpen ? 'UpArrow' : 'DownArrow',
     size: 7,
-    color: colorVariables.text.medium
+    color: themeColors.text.medium
   })), isOpen && React.createElement(DropdownMenu$1, {
     "$width": width,
     "$menuBackground": menuBackground,
@@ -5787,7 +5630,7 @@ var SelectOption = function SelectOption(_ref36) {
     icon: 'Search',
     size: iconSize,
     weight: (searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.weight) || '0px',
-    color: iconColor
+    color: iconColor || themeColors.text.medium
   }), React.createElement(SearchBar$1, {
     ref: searchInputRef,
     type: 'text',
@@ -5849,13 +5692,13 @@ var SearchBox = function SearchBox(_ref9) {
     placeholder = _ref9$placeholder === void 0 ? 'Search...' : _ref9$placeholder,
     border = _ref9.border,
     borderRadius = _ref9.borderRadius,
-    _ref9$iconColor = _ref9.iconColor,
-    iconColor = _ref9$iconColor === void 0 ? colorVariables.text.medium : _ref9$iconColor,
+    iconColor = _ref9.iconColor,
     placeholderColor = _ref9.placeholderColor,
     inputColor = _ref9.inputColor,
     _ref9$iconSize = _ref9.iconSize,
     iconSize = _ref9$iconSize === void 0 ? 16 : _ref9$iconSize,
     background = _ref9.background;
+  var themeColors = useTheme();
   var _useState = useState(false),
     isFocused = _useState[0],
     setIsFocused = _useState[1];
@@ -5867,7 +5710,7 @@ var SearchBox = function SearchBox(_ref9) {
   }, React.createElement(Icon, {
     icon: 'Search',
     size: iconSize,
-    color: iconColor,
+    color: iconColor || themeColors.text.medium,
     weight: '0px'
   }), React.createElement(SearchBar$2, {
     type: 'text',
@@ -6003,12 +5846,10 @@ var TextField = function TextField(_ref14) {
     onChange = _ref14.onChange,
     _ref14$size = _ref14.size,
     size = _ref14$size === void 0 ? 'medium' : _ref14$size,
-    _ref14$color = _ref14.color,
-    color = _ref14$color === void 0 ? colorVariables.text.dark : _ref14$color,
+    color = _ref14.color,
     _ref14$padding = _ref14.padding,
     padding = _ref14$padding === void 0 ? '0px' : _ref14$padding,
-    _ref14$titlecolor = _ref14.titlecolor,
-    titlecolor = _ref14$titlecolor === void 0 ? colorVariables.text.dark : _ref14$titlecolor,
+    titlecolor = _ref14.titlecolor,
     icon = _ref14.icon,
     _ref14$iconsize = _ref14.iconsize,
     iconsize = _ref14$iconsize === void 0 ? 18 : _ref14$iconsize,
@@ -6016,10 +5857,10 @@ var TextField = function TextField(_ref14) {
     iconcolor = _ref14.iconcolor,
     _ref14$required = _ref14.required,
     required = _ref14$required === void 0 ? false : _ref14$required,
-    _ref14$background = _ref14.background,
-    background = _ref14$background === void 0 ? colorVariables["default"].tertiary : _ref14$background,
+    background = _ref14.background,
     onEnter = _ref14.onEnter,
     titleRightNode = _ref14.titleRightNode;
+  var themeColors = useTheme();
   var _useState = useState(disabled),
     isDisabled = _useState[0],
     setIsDisabled = _useState[1];
@@ -6050,7 +5891,7 @@ var TextField = function TextField(_ref14) {
     "$size": size,
     "$fontWeight": titleWeight,
     htmlFor: title,
-    "$titlecolor": titlecolor
+    "$titlecolor": titlecolor || themeColors.text.dark
   }, title, required && React.createElement(Asterisk$1, null, "*")), titleRightNode === null || titleRightNode === void 0 ? void 0 : titleRightNode.node), React.createElement(InputWrapper$1, null, React.createElement(Input, {
     type: inputType || 'text',
     "$type": type,
@@ -6061,8 +5902,8 @@ var TextField = function TextField(_ref14) {
     "$disabled": isDisabled,
     onChange: onChange,
     "$size": size,
-    "$color": color,
-    "$background": background,
+    "$color": color || themeColors.text.dark,
+    "$background": background || themeColors["default"].tertiary,
     readOnly: onChange === undefined || isDisabled ? true : false,
     onKeyDown: function onKeyDown(e) {
       if (e.key === 'Enter') {
@@ -6078,14 +5919,14 @@ var TextField = function TextField(_ref14) {
     icon: inputType === 'password' ? 'CloseEye' : 'OpenEye',
     size: iconsize,
     weight: iconweight,
-    color: iconcolor || colorVariables["default"].primary
+    color: iconcolor || themeColors["default"].primary
   })), icon && type !== 'password' && React.createElement(IconWrapper$1, {
     onClick: handleToggleDisabled
   }, React.createElement(Icon, {
     icon: icon,
     size: iconsize,
     weight: iconweight,
-    color: iconcolor || colorVariables["default"].primary
+    color: iconcolor || themeColors["default"].primary
   }))));
 };
 
@@ -6158,16 +5999,14 @@ var TextArea = function TextArea(_ref12) {
     onChange = _ref12.onChange,
     _ref12$size = _ref12.size,
     size = _ref12$size === void 0 ? 'medium' : _ref12$size,
-    _ref12$color = _ref12.color,
-    color = _ref12$color === void 0 ? colorVariables.text.dark : _ref12$color,
+    color = _ref12.color,
     _ref12$padding = _ref12.padding,
     padding = _ref12$padding === void 0 ? '0px' : _ref12$padding,
-    _ref12$titlecolor = _ref12.titlecolor,
-    titlecolor = _ref12$titlecolor === void 0 ? colorVariables.text.dark : _ref12$titlecolor,
+    titlecolor = _ref12.titlecolor,
     _ref12$required = _ref12.required,
     required = _ref12$required === void 0 ? false : _ref12$required,
-    _ref12$background = _ref12.background,
-    background = _ref12$background === void 0 ? colorVariables["default"].tertiary : _ref12$background;
+    background = _ref12.background;
+  var themeColors = useTheme();
   var _useState = useState(disabled),
     isDisabled = _useState[0],
     setIsDisabled = _useState[1];
@@ -6180,7 +6019,7 @@ var TextArea = function TextArea(_ref12) {
     "$size": size,
     "$fontWeight": titleWeight,
     htmlFor: title,
-    "$titlecolor": titlecolor
+    "$titlecolor": titlecolor || themeColors.text.dark
   }, title, required && React.createElement(Asterisk$1, null, "*")), React.createElement(TextAreaComponent, {
     name: title,
     id: title,
@@ -6189,8 +6028,8 @@ var TextArea = function TextArea(_ref12) {
     "$disabled": isDisabled,
     onChange: onChange,
     "$size": size,
-    "$color": color,
-    "$background": background
+    "$color": color || themeColors.text.dark,
+    "$background": background || themeColors["default"].tertiary
   }));
 };
 
@@ -6328,6 +6167,7 @@ var TextFieldWithDropdown = function TextFieldWithDropdown(_ref16) {
     _ref16$searchBox = _ref16.searchBox,
     searchBox = _ref16$searchBox === void 0 ? true : _ref16$searchBox,
     NoOptionsText = _ref16.NoOptionsText;
+  var themeColors = useTheme();
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var searchBoxRef = useRef(null);
@@ -6359,7 +6199,7 @@ var TextFieldWithDropdown = function TextFieldWithDropdown(_ref16) {
     "$position": 'relative'
   }, searchBox && React.createElement(SearchContainer$3, {
     "$borderBottom": searchBoxBorder,
-    "$background": isSearchBarEnabled ? colorVariables.text.white : colorVariables.accent.light_1,
+    "$background": isSearchBarEnabled ? themeColors.text.white : themeColors.accent.light_1,
     "$borderRadius": searchBoxBorderRadius,
     ref: searchBoxRef
   }, React.createElement(Container, {
@@ -6379,7 +6219,7 @@ var TextFieldWithDropdown = function TextFieldWithDropdown(_ref16) {
     value: internalSearchQuery,
     onChange: handleSearchChange,
     "$inputColor": searchbarTextColor,
-    "$placeholderColor": isSearchBarEnabled ? colorVariables.text.light : colorVariables.text.medium,
+    "$placeholderColor": isSearchBarEnabled ? themeColors.text.light : themeColors.text.medium,
     disabled: !!searchQuery
   })), (internalSearchQuery || searchQuery) && React.createElement(Icon, {
     icon: 'Close',
@@ -6396,7 +6236,7 @@ var TextFieldWithDropdown = function TextFieldWithDropdown(_ref16) {
   }, React.createElement(TotalOptionsHeader, null, React.createElement(Span, {
     "$fontSize": '12px',
     "$fontWeight": '400',
-    "$color": colorVariables.text.light
+    "$color": themeColors.text.light
   }, t('Showing_results') + " (" + filteredArray.length + " of " + (options === null || options === void 0 ? void 0 : options.length) + ")")), React.createElement(OptionsWrapper$1, null, filteredArray.length > 0 ? filteredArray.map(function (option) {
     return React.createElement(OptionItem$1, {
       key: option.value,
@@ -6475,10 +6315,10 @@ var CheckBox = function CheckBox(_ref11) {
     fontSize = _ref11$fontSize === void 0 ? '14px' : _ref11$fontSize,
     _ref11$fontWeight = _ref11.fontWeight,
     fontWeight = _ref11$fontWeight === void 0 ? '500' : _ref11$fontWeight,
-    _ref11$color = _ref11.color,
-    color = _ref11$color === void 0 ? colorVariables.text.medium : _ref11$color,
+    color = _ref11.color,
     _ref11$borderSize = _ref11.borderSize,
     borderSize = _ref11$borderSize === void 0 ? 1 : _ref11$borderSize;
+  var themeColors = useTheme();
   var safeId = useId();
   return React.createElement(Container, {
     "$gap": gap,
@@ -6505,7 +6345,7 @@ var CheckBox = function CheckBox(_ref11) {
     "$borderSize": borderSize
   })), label && React.createElement(LabelSpan, {
     "$fontSize": fontSize,
-    "$color": color,
+    "$color": color || themeColors.text.medium,
     "$fontWeight": fontWeight,
     onClick: function onClick() {
       if (!disabled) _onChange(!checked);
@@ -6611,10 +6451,10 @@ var Loader = function Loader(_ref4) {
   var title = _ref4.title,
     _ref4$size = _ref4.size,
     size = _ref4$size === void 0 ? 32 : _ref4$size,
-    _ref4$color = _ref4.color,
-    color = _ref4$color === void 0 ? colorVariables["default"].primary : _ref4$color,
+    color = _ref4.color,
     titleColor = _ref4.titleColor,
     titleSize = _ref4.titleSize;
+  var themeColors = useTheme();
   return React.createElement(Container, {
     "$alignItems": 'center',
     "$justifyContent": 'center',
@@ -6624,7 +6464,7 @@ var Loader = function Loader(_ref4) {
     "$gap": '12px'
   }, React.createElement(Container, null, React.createElement(Spinner$1, {
     "$size": size,
-    "$color": color
+    "$color": color || themeColors["default"].primary
   })), title && React.createElement(Container, {
     "$flexDirection": 'column',
     "$gap": '12px'
@@ -6655,6 +6495,7 @@ var Pagination = function Pagination(_ref4) {
     itemsPerPage = _ref4.itemsPerPage,
     onPageChange = _ref4.onPageChange,
     onItemsPerPageChange = _ref4.onItemsPerPageChange;
+  var themeColors = useTheme();
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useNotification = useNotification(),
@@ -6737,7 +6578,7 @@ var Pagination = function Pagination(_ref4) {
     padding: '7px',
     variant: 'secondary',
     borderRadius: '4px',
-    color: colorVariables.text.white
+    color: themeColors.text.white
   }), React.createElement(ButtonComponent, {
     onClick: function onClick() {
       return handlePageChange(currentPage + 1);
@@ -6749,7 +6590,7 @@ var Pagination = function Pagination(_ref4) {
     padding: '7px',
     variant: 'secondary',
     borderRadius: '4px',
-    color: colorVariables.text.white
+    color: themeColors.text.white
   }))), React.createElement(Container, {
     "$gap": '16px',
     "$justifyContent": 'center',
@@ -6788,12 +6629,11 @@ var CircularProgress = function CircularProgress(_ref) {
   var threshold = _ref.threshold,
     totalCapacity = _ref.totalCapacity,
     usedCapacity = _ref.usedCapacity,
-    _ref$progressColor = _ref.progressColor,
-    progressColor = _ref$progressColor === void 0 ? colorVariables["default"].primary : _ref$progressColor,
+    progressColor = _ref.progressColor,
     _ref$thresholdColor = _ref.thresholdColor,
     thresholdColor = _ref$thresholdColor === void 0 ? 'rgba(255, 0, 0, 0.2)' : _ref$thresholdColor,
-    _ref$trackColor = _ref.trackColor,
-    trackColor = _ref$trackColor === void 0 ? colorVariables.accent.softBlue : _ref$trackColor;
+    trackColor = _ref.trackColor;
+  var themeColors = useTheme();
   var radius = (viewBoxSize - strokeWidth) / 2;
   var circumference = 2 * Math.PI * radius;
   var parseVolumeData = function parseVolumeData(threshold, totalCapacity, usedCapacity) {
@@ -6823,7 +6663,7 @@ var CircularProgress = function CircularProgress(_ref) {
     cx: viewBoxSize / 2,
     cy: viewBoxSize / 2,
     r: radius,
-    stroke: trackColor,
+    stroke: trackColor || themeColors.accent.softBlue,
     strokeWidth: strokeWidth,
     fill: 'none'
   }), processedThreshold > progress && React.createElement("circle", {
@@ -6841,7 +6681,7 @@ var CircularProgress = function CircularProgress(_ref) {
     cx: viewBoxSize / 2,
     cy: viewBoxSize / 2,
     r: radius,
-    stroke: progressColor,
+    stroke: progressColor || themeColors["default"].primary,
     strokeWidth: strokeWidth,
     fill: 'none',
     strokeDasharray: circumference,
@@ -6852,7 +6692,7 @@ var CircularProgress = function CircularProgress(_ref) {
     "$position": 'absolute',
     "$fontSize": '12px',
     "$fontWeight": '500',
-    "$color": progressColor
+    "$color": progressColor || themeColors["default"].primary
   }, progress + "%"));
 };
 
@@ -6863,6 +6703,7 @@ var ProgressBar = function ProgressBar(_ref) {
     progressColor = _ref.progressColor,
     thresholdColor = _ref.thresholdColor,
     trackColor = _ref.trackColor;
+  var themeColors = useTheme();
   var parseVolumeData = function parseVolumeData(threshold, totalCapacity, usedCapacity) {
     var totalCapacityGB = totalCapacity;
     var usedCapacityGB = usedCapacity;
@@ -6881,13 +6722,13 @@ var ProgressBar = function ProgressBar(_ref) {
     "$width": '100%',
     "$height": '100%',
     "$borderRadius": '100px',
-    "$background": trackColor != null ? trackColor : colorVariables.accent.softBlue,
+    "$background": trackColor != null ? trackColor : themeColors.accent.softBlue,
     "$overflow": 'hidden',
     "$position": 'relative'
   }, React.createElement(Container, {
     "$width": progress + "%",
     "$height": '100%',
-    "$background": progressColor != null ? progressColor : colorVariables["default"].primary,
+    "$background": progressColor != null ? progressColor : themeColors["default"].primary,
     "$transition": 'width 0.5s ease-in-out'
   }), Processed_threshold !== undefined && Processed_threshold > progress && React.createElement(Container, {
     "$width": thresholdWidth + "%",
@@ -7220,6 +7061,7 @@ var Table = function Table(_ref6) {
     loading = _ref6.loading,
     _ref6$noDataText = _ref6.noDataText,
     noDataText = _ref6$noDataText === void 0 ? 'No Data Found!' : _ref6$noDataText;
+  var themeColors = useTheme();
   var rowconfig = tableObject.rowconfig,
     tableheaderconfig = tableObject.tableheaderconfig;
   var _useState = useState(new Set()),
@@ -7340,14 +7182,14 @@ var Table = function Table(_ref6) {
       "$padding": '9px 12px',
       "$minHeight": '30px',
       "$alignItems": 'center',
-      "$background": colorVariables.accent.light_1,
+      "$background": themeColors.accent.light_1,
       onClick: function onClick() {
         return toggleRoleVisibility(role);
       },
       "$cursor": 'pointer',
-      "$border": "1px solid " + colorVariables.border.extraLight
+      "$border": "1px solid " + themeColors.border.extraLight
     }, React.createElement(Span, {
-      "$color": colorVariables.text.medium,
+      "$color": themeColors.text.medium,
       "$fontSize": '12px',
       "$lineHeight": '100%'
     }, role, " (", rows.length, ")"), React.createElement(Icon, {
@@ -7441,6 +7283,7 @@ var Tabs = function Tabs(_ref14) {
     overflow = _ref14.overflow,
     bordeBottom = _ref14.bordeBottom,
     tabRightNode = _ref14.tabRightNode;
+  var themeColors = useTheme();
   return React.createElement(Container$4, {
     "$gap": gap,
     "$border": border,
@@ -7460,7 +7303,7 @@ var Tabs = function Tabs(_ref14) {
       "$active": activeTab === tab.title,
       "$headerHeight": headerHeight
     }, tab.icon && React.createElement(Icon, {
-      color: activeTab === tab.title ? tab.activeColor : colorVariables.text.medium,
+      color: activeTab === tab.title ? tab.activeColor : themeColors.text.medium,
       icon: tab.icon,
       size: tab.iconSize,
       weight: tab.iconWeight
@@ -7478,16 +7321,14 @@ var Tabs = function Tabs(_ref14) {
 var InternalTabs = function InternalTabs(_ref) {
   var tabs = _ref.tabs,
     activeTab = _ref.activeTab,
-    _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? colorVariables.text.white : _ref$backgroundColor,
-    _ref$activeTabBg = _ref.activeTabBg,
-    activeTabBg = _ref$activeTabBg === void 0 ? colorVariables.accent.softBlue : _ref$activeTabBg,
-    _ref$textColor = _ref.textColor,
-    textColor = _ref$textColor === void 0 ? colorVariables["default"].primary : _ref$textColor,
+    backgroundColor = _ref.backgroundColor,
+    activeTabBg = _ref.activeTabBg,
+    textColor = _ref.textColor,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var themeColors = useTheme();
   return React.createElement(Container, {
-    "$background": backgroundColor,
+    "$background": backgroundColor || themeColors.text.white,
     "$padding": '3px',
     "$borderRadius": '4px',
     "$justifyContent": 'space-between',
@@ -7501,14 +7342,173 @@ var InternalTabs = function InternalTabs(_ref) {
       "$alignItems": 'center',
       "$cursor": disabled ? 'not-allowed' : 'pointer',
       onClick: disabled ? undefined : tab.onClick,
-      "$background": activeTab === tab.value ? activeTabBg : colorVariables["default"].tertiary,
-      "$color": activeTab === tab.value ? textColor : colorVariables.text.medium
+      "$background": activeTab === tab.value ? activeTabBg || themeColors.accent.softBlue : themeColors["default"].tertiary,
+      "$color": activeTab === tab.value ? textColor || themeColors["default"].primary : themeColors.text.medium
     }, React.createElement(Span, {
       "$fontSize": '14px',
-      "$color": activeTab === tab.value ? textColor : colorVariables.text.medium
+      "$color": activeTab === tab.value ? textColor || themeColors["default"].primary : themeColors.text.medium
     }, tab.title));
   }));
 };
 
+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: '#F0F3F5',
+    light_4: '#ECF0F4',
+    light_5: '#F0F0F3',
+    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: '#FFFFFF',
+    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
+};
+
 export { Badge, Breadcrumbs, ButtonComponent as Button, ButtonCarousel, CheckBox, CircularLoader, CircularProgress, Container, DatePicker, DropdownMenu$1 as DropdownMenu, Icon, IconTooltip, InternalTabs, Loader, MultiSelectDropdown, OptionComponent, Options, Pagination, ProgressBar, SearchBox, SelectOption, SelectedOption, Sidebar, Span, Table, TableCell, TableRow, Tabs, TextArea, TextField, TextFieldWithDropdown, convertEpochToDateString, convertEpochToOnlyDate, convertToEpoch, formatCalendarDateTime, formatDate, formatEpochToIST, formatTimestamp, getSystemTimezoneAbbreviation, themes, timeAgo, timeStringToSeconds, useClickOutside, useCustomModal, useNotification, useTheme };
 //# sourceMappingURL=index.modern.js.map