labsense-ui-kit 1.2.54 → 1.2.56

package/dist/index.js

@@ -5224,739 +5224,81 @@ var Span = styled__default.span(_templateObject2$1 || (_templateObject2$1 = _tag
   return $whiteSpace;
 });
 
-var light = {
-  vms: {
-    brand: {
-      primary: '#4C9EEB',
-      secondary: '#14171A',
-      light: '#FFFFFF'
-    },
-    accent: {
-      light_1: '#E1E8ED',
-      light_2: '#F5F8FA',
-      light_3: '#F0F3F5',
-      light_4: '#ECF0F4',
-      light_5: '#F0F0F3',
-      light_6: '#EFF8FF',
-      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',
-      critical: '#FF7518'
-    },
-    disabled: {
-      primary: '#B9DCF7',
-      secondary: '#DADADA',
-      error: '#FFEBEE',
-      success: '#E8F5E9',
-      warning: '#FFF3E0',
-      info: '#E3F2FD',
-      critical: '#FFF5DA'
-    },
-    hover: {
-      primary: '#4C9EEB',
-      secondary: '#A3A3A3',
-      tertiary: 'transparent',
-      error: '#D32F2F',
-      success: '#388E3C',
-      warning: '#F57C00',
-      info: '#193ED2',
-      critical: '#CC5500'
-    },
-    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 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,
+      promiseConfig = _ref.promiseConfig,
+      customStyle = _ref.customStyle,
+      _ref$clearCurrent = _ref.clearCurrent,
+      clearCurrent = _ref$clearCurrent === void 0 ? false : _ref$clearCurrent;
+    if (clearCurrent) {
+      reactHotToast.toast.dismiss();
     }
-  },
-  AiProtectWebsite: {
-    primary: {
-      50: '#F5FAFF',
-      100: '#EFF8FF',
-      200: '#D1E9FF',
-      300: '#B2DDFF',
-      400: '#84CAFF',
-      500: '#53B1FD',
-      600: '#2E90FA',
-      700: '#1570EF',
-      800: '#175CD3',
-      900: '#1849A9',
-      950: '#194185'
-    },
-    secondary: {
-      50: '#F3F7FA',
-      100: '#E8F3F7',
-      200: '#D6E7EF',
-      300: '#BCD7E5',
-      400: '#A1C1D8',
-      500: '#89ABCB',
-      600: '#7393BC',
-      700: '#5F7CA3',
-      800: '#4F6684',
-      900: '#44566B',
-      950: '#28323E'
-    },
-    gray: {
-      50: '#FFFFFF',
-      100: '#FAFAFA',
-      200: '#F5F5F5',
-      300: '#E5E5E5',
-      400: '#D6D6D6',
-      500: '#A3A3A3',
-      600: '#737373',
-      700: '#525252',
-      800: '#424242',
-      900: '#292929',
-      950: '#141414'
-    },
-    error: {
-      50: '#FFF0F0',
-      100: '#FFDDDD',
-      200: '#FFC0C0',
-      300: '#FF9494',
-      400: '#FF5757',
-      500: '#FF2323',
-      600: '#FF0000',
-      700: '#D70000',
-      800: '#B10303',
-      900: '#920A0A',
-      950: '#500000'
-    },
-    success: {
-      50: '#F3FAF3',
-      100: '#E3F5E3',
-      200: '#C8EAC9',
-      300: '#9DD89F',
-      400: '#6ABE6E',
-      500: '#45A249',
-      600: '#388E3C',
-      700: '#2C692F',
-      800: '#275429',
-      900: '#224525',
-      950: '#0E2511'
-    },
-    warning: {
-      50: '#FFFBEC',
-      100: '#FFF7D3',
-      200: '#FFEBA5',
-      300: '#FFDB6D',
-      400: '#FFBF32',
-      500: '#FFA80A',
-      600: '#FA8E00',
-      700: '#CC6B02',
-      800: '#A1520B',
-      900: '#82450C',
-      950: '#462104'
-    },
-    info: {
-      50: '#F0F0FF',
-      100: '#E4E4FF',
-      200: '#CDCEFF',
-      300: '#A7A6FF',
-      400: '#7B73FF',
-      500: '#513BFF',
-      600: '#3C14FF',
-      700: '#2800FA',
-      800: '#2301D6',
-      900: '#1E03AF',
-      950: '#0E0077'
-    },
-    transparent: {
-      white10: 'rgba(255,255,255,0.1)',
-      white20: 'rgba(255,255,255,0.2)',
-      white30: 'rgba(255,255,255,0.3)',
-      white40: 'rgba(229, 229, 229, 0.4)',
-      white50: 'rgba(255, 255, 255, 0.5)',
-      black10: 'rgba(0,0,0,0.1)',
-      black20: 'rgba(0,0,0,0.2)',
-      black30: 'rgba(0,0,0,0.3)'
-    }
-  },
-  SNetLabsWebsite: {
-    primary: {
-      50: '#F5FAFF',
-      100: '#EFF8FF',
-      200: '#D1E9FF',
-      300: '#B2DDFF',
-      400: '#84CAFF',
-      500: '#53B1FD',
-      600: '#2E90FA',
-      700: '#1570EF',
-      800: '#175CD3',
-      900: '#1849A9',
-      950: '#194185'
-    },
-    secondary: {
-      50: '#F3F7FA',
-      100: '#E8F3F7',
-      200: '#D6E7EF',
-      300: '#BCD7E5',
-      400: '#A1C1D8',
-      500: '#89ABCB',
-      600: '#7393BC',
-      700: '#5F7CA3',
-      800: '#4F6684',
-      900: '#44566B',
-      950: '#28323E'
-    },
-    gray: {
-      50: '#FFFFFF',
-      100: '#FAFAFA',
-      200: '#F5F5F5',
-      300: '#E5E5E5',
-      400: '#D6D6D6',
-      500: '#A3A3A3',
-      600: '#737373',
-      700: '#525252',
-      800: '#424242',
-      900: '#292929',
-      950: '#141414'
-    },
-    error: {
-      50: '#FFF0F0',
-      100: '#FFDDDD',
-      200: '#FFC0C0',
-      300: '#FF9494',
-      400: '#FF5757',
-      500: '#FF2323',
-      600: '#FF0000',
-      700: '#D70000',
-      800: '#B10303',
-      900: '#920A0A',
-      950: '#500000'
-    },
-    success: {
-      50: '#F3FAF3',
-      100: '#E3F5E3',
-      200: '#C8EAC9',
-      300: '#9DD89F',
-      400: '#6ABE6E',
-      500: '#45A249',
-      600: '#388E3C',
-      700: '#2C692F',
-      800: '#275429',
-      900: '#224525',
-      950: '#0E2511'
-    },
-    warning: {
-      50: '#FFF4E6',
-      100: '#FEE8CC',
-      200: '#FEDDB3',
-      300: '#FDD199',
-      400: '#FDBA66',
-      500: '#FCA333',
-      600: '#FB8C00',
-      700: '#C96000',
-      800: '#950300',
-      900: '#643700',
-      950: '#4B2A00'
-    },
-    info: {
-      50: '#F0F0FF',
-      100: '#E4E4FF',
-      200: '#CDCEFF',
-      300: '#A7A6FF',
-      400: '#7B73FF',
-      500: '#513BFF',
-      600: '#3C14FF',
-      700: '#2800FA',
-      800: '#2301D6',
-      900: '#1E03AF',
-      950: '#0E0077'
-    },
-    tertiary: {
-      50: '#ECFCFA',
-      100: '#D9F9F6',
-      200: '#C6F6F1',
-      300: '#B3F3EC',
-      400: '#8CECE3',
-      500: '#66E6D9',
-      600: '#40E0D0',
-      700: '#33B3A6',
-      800: '#26867D',
-      900: '#1A5A53',
-      950: '#13433E'
-    },
-    purple: {
-      50: '#F3EEFB',
-      100: '#E7DEF7',
-      200: '#DBCDF3',
-      300: '#CFBCEF',
-      400: '#B89BE6',
-      500: '#A079DE',
-      600: '#8858D6',
-      700: '#6D47AC',
-      800: '#533582',
-      900: '#382459',
-      950: '#2B1B44'
-    },
-    yellow: {
-      50: '#FFFBE7',
-      100: '#FFF7CE',
-      200: '#FFF3B5',
-      300: '#FFEF9D',
-      400: '#FFE66C',
-      500: '#FFDE3B',
-      600: '#FFD60A',
-      700: '#CCAB08',
-      800: '#997006',
-      900: '#665604',
-      950: '#4D3003'
-    },
-    transparent: {
-      white10: '#FFFFFF1A',
-      white20: '#FFFFFF33',
-      white30: '#FFFFFF4D',
-      white100: '#FFF7CE',
-      white200: '#FFF3B5',
-      white300: '#FFEF9D',
-      black100: '#0000001A',
-      black200: '#00000033',
-      black300: '#0000004D'
-    }
-  }
-};
-var dark = {
-  vms: {
-    brand: {
-      primary: '#4C9EEB',
-      secondary: '#E1E8ED',
-      light: '#1A1A1A'
-    },
-    accent: {
-      light_1: '#2A2E33',
-      light_2: '#1F2327',
-      light_3: '#0F1214',
-      light_4: '#101417',
-      light_5: '#0F0F0C',
-      light_6: '#0D3B66',
-      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',
-      critical: '#FF7518'
-    },
-    disabled: {
-      primary: '#3B4A58',
-      secondary: '#3E3E3E',
-      error: '#5B1B1B',
-      success: '#1B3C1B',
-      warning: '#5A3C1B',
-      info: '#1A3C5A',
-      critical: '#FFF5DA'
-    },
-    hover: {
-      primary: '#5CA6F0',
-      secondary: '#7A7A7A',
-      tertiary: 'transparent',
-      error: '#D32F2F',
-      success: '#388E3C',
-      warning: '#F57C00',
-      info: '#1976D2',
-      critical: '#CC5500'
-    },
-    border: {
-      extraBold: '#8899A6',
-      bold: '#5E5E5E',
-      medium: '#4A4A4A',
-      light: '#3A3A3A',
-      extraLight: '#2B2B2B'
-    },
-    text: {
-      dark: '#FFFFFF',
-      medium: '#FFFFFF',
-      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'
-    }
-  },
-  AiProtectWebsite: {
-    primary: {
-      50: '#F5FAFF',
-      100: '#EFF8FF',
-      200: '#D1E9FF',
-      300: '#B2DDFF',
-      400: '#84CAFF',
-      500: '#53B1FD',
-      600: '#2E90FA',
-      700: '#1570EF',
-      800: '#175CD3',
-      900: '#1849A9',
-      950: '#194185'
-    },
-    secondary: {
-      50: '#F3F7FA',
-      100: '#E8F3F7',
-      200: '#D6E7EF',
-      300: '#BCD7E5',
-      400: '#A1C1D8',
-      500: '#89ABCB',
-      600: '#7393BC',
-      700: '#5F7CA3',
-      800: '#4F6684',
-      900: '#44566B',
-      950: '#28323E'
-    },
-    gray: {
-      50: '#FFFFFF',
-      100: '#FAFAFA',
-      200: '#F5F5F5',
-      300: '#E5E5E5',
-      400: '#D6D6D6',
-      500: '#A3A3A3',
-      600: '#737373',
-      700: '#525252',
-      800: '#424242',
-      900: '#292929',
-      950: '#141414'
-    },
-    error: {
-      50: '#FFF0F0',
-      100: '#FFDDDD',
-      200: '#FFC0C0',
-      300: '#FF9494',
-      400: '#FF5757',
-      500: '#FF2323',
-      600: '#FF0000',
-      700: '#D70000',
-      800: '#B10303',
-      900: '#920A0A',
-      950: '#500000'
-    },
-    success: {
-      50: '#F3FAF3',
-      100: '#E3F5E3',
-      200: '#C8EAC9',
-      300: '#9DD89F',
-      400: '#6ABE6E',
-      500: '#45A249',
-      600: '#388E3C',
-      700: '#2C692F',
-      800: '#275429',
-      900: '#224525',
-      950: '#0E2511'
-    },
-    warning: {
-      50: '#FFFBEC',
-      100: '#FFF7D3',
-      200: '#FFEBA5',
-      300: '#FFDB6D',
-      400: '#FFBF32',
-      500: '#FFA80A',
-      600: '#FA8E00',
-      700: '#CC6B02',
-      800: '#A1520B',
-      900: '#82450C',
-      950: '#462104'
-    },
-    info: {
-      50: '#F0F0FF',
-      100: '#E4E4FF',
-      200: '#CDCEFF',
-      300: '#A7A6FF',
-      400: '#7B73FF',
-      500: '#513BFF',
-      600: '#3C14FF',
-      700: '#2800FA',
-      800: '#2301D6',
-      900: '#1E03AF',
-      950: '#0E0077'
-    },
-    transparent: {
-      white10: 'rgba(255,255,255,0.1)',
-      white20: 'rgba(255,255,255,0.2)',
-      white30: 'rgba(255,255,255,0.3)',
-      white40: 'rgba(229, 229, 229, 0.4)',
-      white50: 'rgba(255, 255, 255, 0.5)',
-      black10: 'rgba(0,0,0,0.1)',
-      black20: 'rgba(0,0,0,0.2)',
-      black30: 'rgba(0,0,0,0.3)'
-    }
-  },
-  SNetLabsWebsite: {
-    primary: {
-      50: '#F5FAFF',
-      100: '#EFF8FF',
-      200: '#D1E9FF',
-      300: '#B2DDFF',
-      400: '#84CAFF',
-      500: '#53B1FD',
-      600: '#2E90FA',
-      700: '#1570EF',
-      800: '#175CD3',
-      900: '#1849A9',
-      950: '#194185'
-    },
-    secondary: {
-      50: '#F3F7FA',
-      100: '#E8F3F7',
-      200: '#D6E7EF',
-      300: '#BCD7E5',
-      400: '#A1C1D8',
-      500: '#89ABCB',
-      600: '#7393BC',
-      700: '#5F7CA3',
-      800: '#4F6684',
-      900: '#44566B',
-      950: '#28323E'
-    },
-    gray: {
-      50: '#FFFFFF',
-      100: '#FAFAFA',
-      200: '#F5F5F5',
-      300: '#E5E5E5',
-      400: '#D6D6D6',
-      500: '#A3A3A3',
-      600: '#737373',
-      700: '#525252',
-      800: '#424242',
-      900: '#292929',
-      950: '#141414'
-    },
-    error: {
-      50: '#FFF0F0',
-      100: '#FFDDDD',
-      200: '#FFC0C0',
-      300: '#FF9494',
-      400: '#FF5757',
-      500: '#FF2323',
-      600: '#FF0000',
-      700: '#D70000',
-      800: '#B10303',
-      900: '#920A0A',
-      950: '#500000'
-    },
-    success: {
-      50: '#F3FAF3',
-      100: '#E3F5E3',
-      200: '#C8EAC9',
-      300: '#9DD89F',
-      400: '#6ABE6E',
-      500: '#45A249',
-      600: '#388E3C',
-      700: '#2C692F',
-      800: '#275429',
-      900: '#224525',
-      950: '#0E2511'
-    },
-    warning: {
-      50: '#FFF4E6',
-      100: '#FEE8CC',
-      200: '#FEDDB3',
-      300: '#FDD199',
-      400: '#FDBA66',
-      500: '#FCA333',
-      600: '#FB8C00',
-      700: '#C96000',
-      800: '#950300',
-      900: '#643700',
-      950: '#4B2A00'
-    },
-    info: {
-      50: '#F0F0FF',
-      100: '#E4E4FF',
-      200: '#CDCEFF',
-      300: '#A7A6FF',
-      400: '#7B73FF',
-      500: '#513BFF',
-      600: '#3C14FF',
-      700: '#2800FA',
-      800: '#2301D6',
-      900: '#1E03AF',
-      950: '#0E0077'
-    },
-    tertiary: {
-      50: '#ECFCFA',
-      100: '#D9F9F6',
-      200: '#C6F6F1',
-      300: '#B3F3EC',
-      400: '#8CECE3',
-      500: '#66E6D9',
-      600: '#40E0D0',
-      700: '#33B3A6',
-      800: '#26867D',
-      900: '#1A5A53',
-      950: '#13433E'
-    },
-    purple: {
-      50: '#F3EEFB',
-      100: '#E7DEF7',
-      200: '#DBCDF3',
-      300: '#CFBCEF',
-      400: '#B89BE6',
-      500: '#A079DE',
-      600: '#8858D6',
-      700: '#6D47AC',
-      800: '#533582',
-      900: '#382459',
-      950: '#2B1B44'
-    },
-    yellow: {
-      50: '#FFFBE7',
-      100: '#FFF7CE',
-      200: '#FFF3B5',
-      300: '#FFEF9D',
-      400: '#FFE66C',
-      500: '#FFDE3B',
-      600: '#FFD60A',
-      700: '#CCAB08',
-      800: '#997006',
-      900: '#665604',
-      950: '#4D3003'
-    },
-    transparent: {
-      white10: '#FFFFFF1A',
-      white20: '#FFFFFF33',
-      white30: '#FFFFFF4D',
-      white100: '#FFF7CE',
-      white200: '#FFF3B5',
-      white300: '#FFEF9D',
-      black100: '#0000001A',
-      black200: '#00000033',
-      black300: '#0000004D'
-    }
-  }
-};
-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 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) {
-      reactHotToast.toast.dismiss();
-    }
-    switch (type) {
-      case 'success':
-        reactHotToast.toast.success(message);
-        break;
-      case 'error':
-        reactHotToast.toast.error(message);
-        break;
-      case 'info':
-        reactHotToast.toast(message, {
-          icon: React__default.createElement(Container, {
-            "$minWidth": '20px',
-            "$height": '20px',
-            "$width": '20px',
-            "$alignItems": 'center',
-            "$justifyContent": 'center',
-            "$borderRadius": '100%',
-            "$background": colorVariables.vms.disabled.info
-          }, React__default.createElement(Icon, {
-            icon: 'InformationFilled',
-            weight: '0px',
-            size: 20,
-            color: colorVariables.vms["default"].info
-          })),
-          style: {
-            borderRadius: '8px',
-            background: colorVariables.vms.text.white,
-            color: '#363636',
-            maxWidth: '648px'
-          }
-        });
-        break;
-      case 'promise':
-        if (promiseConfig) {
-          reactHotToast.toast.promise(promiseConfig.promise, {
-            loading: promiseConfig.loading,
-            success: promiseConfig.success,
-            error: promiseConfig.error
-          }, {
-            style: {
-              minWidth: '300px'
-            }
-          });
-        }
-        break;
-      case 'custom':
-        reactHotToast.toast(message, {
-          icon: React__default.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!');
+    switch (type) {
+      case 'success':
+        reactHotToast.toast.success(message);
+        break;
+      case 'error':
+        reactHotToast.toast.error(message);
+        break;
+      case 'info':
+        reactHotToast.toast(message, {
+          icon: React__default.createElement(Container, {
+            "$minWidth": '20px',
+            "$height": '20px',
+            "$width": '20px',
+            "$alignItems": 'center',
+            "$justifyContent": 'center',
+            "$borderRadius": '100%',
+            "$background": themeColors.vms.disabled.info
+          }, React__default.createElement(Icon, {
+            icon: 'InformationFilled',
+            weight: '0px',
+            size: 20,
+            color: themeColors.vms["default"].info
+          })),
+          style: {
+            borderRadius: '8px',
+            background: themeColors.vms.text.white,
+            color: themeColors.vms.text.dark,
+            maxWidth: '648px'
+          }
+        });
+        break;
+      case 'promise':
+        if (promiseConfig) {
+          reactHotToast.toast.promise(promiseConfig.promise, {
+            loading: promiseConfig.loading,
+            success: promiseConfig.success,
+            error: promiseConfig.error
+          }, {
+            style: {
+              minWidth: '300px'
+            }
+          });
+        }
+        break;
+      case 'custom':
+        reactHotToast.toast(message, {
+          icon: React__default.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 {
@@ -5964,10 +5306,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) {
@@ -9138,1019 +8476,1697 @@ var Loader = function Loader(_ref4) {
     titleSize = _ref4.titleSize;
   var themeColors = useTheme();
   return React__default.createElement(Container, {
-    "$alignItems": 'center',
-    "$justifyContent": 'center',
+    "$alignItems": 'center',
+    "$justifyContent": 'center',
+    "$width": '100%',
+    "$height": '100%',
+    "$flexDirection": 'column',
+    "$gap": '12px'
+  }, React__default.createElement(Container, null, React__default.createElement(Spinner$1, {
+    "$size": size,
+    "$color": color || themeColors.vms["default"].primary
+  })), title && React__default.createElement(Container, {
+    "$flexDirection": 'column',
+    "$gap": '12px'
+  }, React__default.createElement(Container, {
+    "$alignItems": 'center',
+    "$justifyContent": 'center'
+  }, React__default.createElement(Span, {
+    "$fontWeight": '400',
+    "$color": titleColor,
+    "$fontSize": titleSize
+  }, title))));
+};
+
+var _templateObject$l;
+var PageInput = styled__default.input(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.vms.accent.light_2;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return "1px solid " + theme.vms.border.light;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.vms.text.dark;
+});
+var Pagination = function Pagination(_ref4) {
+  var totalPages = _ref4.totalPages,
+    currentPage = _ref4.currentPage,
+    itemsPerPage = _ref4.itemsPerPage,
+    onPageChange = _ref4.onPageChange,
+    onItemsPerPageChange = _ref4.onItemsPerPageChange;
+  var themeColors = useTheme();
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useNotification = useNotification(),
+    sendNotification = _useNotification.sendNotification;
+  var _useState = React.useState(currentPage.toString()),
+    inputPage = _useState[0],
+    setInputPage = _useState[1];
+  React__default.useEffect(function () {
+    setInputPage(currentPage.toString());
+  }, [currentPage]);
+  var handlePageChange = function handlePageChange(page) {
+    if (page < 1 || page > totalPages) return;
+    onPageChange(page);
+  };
+  var handleInputChange = function handleInputChange(e) {
+    var value = e.target.value;
+    if (/^(?:[1-9][0-9]*|0)?$/.test(value)) {
+      setInputPage(value);
+    }
+  };
+  var handleGoClick = function handleGoClick() {
+    var page = Math.floor(Number(inputPage));
+    if (!isNaN(page) && page >= 1 && page <= totalPages) {
+      handlePageChange(page);
+    } else {
+      setInputPage(currentPage.toString());
+      sendNotification({
+        type: 'error',
+        message: 'Invalid page number'
+      });
+    }
+  };
+  var containerRef = React.useRef(null);
+  return React__default.createElement(Container, {
+    "$gap": '40px',
+    "$height": '100%',
+    "$alignItems": 'flex-start',
+    ref: containerRef
+  }, React__default.createElement(Container, {
+    "$gap": '16px',
+    "$alignItems": 'center'
+  }, React__default.createElement(Span, {
+    "$fontWeight": '400',
+    "$fontSize": '14px',
+    "$lineHeight": '100%'
+  }, t('Page')), React__default.createElement(Container, {
+    "$gap": '12px',
+    "$alignItems": 'center'
+  }, React__default.createElement(Container, {
+    "$gap": '4px',
+    "$alignItems": 'center'
+  }, React__default.createElement(PageInput, {
+    type: 'number',
+    value: inputPage,
+    onChange: handleInputChange,
+    min: 1,
+    max: totalPages,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter') handleGoClick();
+    }
+  }), React__default.createElement(Span, {
+    "$fontWeight": '400',
+    "$fontSize": '14px'
+  }, "/ ", totalPages)), React__default.createElement(ButtonComponent, {
+    variant: 'primary',
+    disabled: inputPage.trim() === '' || isNaN(Number(inputPage)),
+    onClick: handleGoClick,
+    text: t('Go'),
+    size: 'small'
+  })), React__default.createElement(Container, {
+    "$gap": '12px'
+  }, React__default.createElement(ButtonComponent, {
+    onClick: function onClick() {
+      return handlePageChange(currentPage - 1);
+    },
+    disabled: currentPage === 1,
+    icon: 'LeftArrow',
+    iconSize: 12,
+    size: 'custom',
+    padding: '7px',
+    variant: 'secondary',
+    borderRadius: '4px',
+    color: themeColors.vms.text.white
+  }), React__default.createElement(ButtonComponent, {
+    onClick: function onClick() {
+      return handlePageChange(currentPage + 1);
+    },
+    disabled: currentPage === totalPages,
+    icon: 'RightArrow',
+    iconSize: 12,
+    size: 'custom',
+    padding: '7px',
+    variant: 'secondary',
+    borderRadius: '4px',
+    color: themeColors.vms.text.white
+  }))), React__default.createElement(Container, {
+    "$gap": '16px',
+    "$justifyContent": 'center',
+    "$alignItems": 'center'
+  }, React__default.createElement(Span, {
+    "$fontWeight": '400',
+    "$fontSize": '14px'
+  }, t('Item_Per_Page')), React__default.createElement(Container, null, React__default.createElement(SelectOption, {
+    width: '54px',
+    size: 'small',
+    value: itemsPerPage.toString(),
+    onChange: function onChange(e) {
+      var val = parseInt(e.target.value, 10);
+      if (!isNaN(val)) {
+        onItemsPerPageChange(val);
+      }
+    },
+    options: [{
+      label: '5',
+      value: '5'
+    }, {
+      label: '10',
+      value: '10'
+    }, {
+      label: '20',
+      value: '20'
+    }],
+    positionRef: containerRef,
+    allowDeselect: false
+  }))));
+};
+
+var strokeWidth = 6.5;
+var viewBoxSize = 44;
+var CircularProgress = function CircularProgress(_ref) {
+  var threshold = _ref.threshold,
+    totalCapacity = _ref.totalCapacity,
+    usedCapacity = _ref.usedCapacity,
+    progressColor = _ref.progressColor,
+    _ref$thresholdColor = _ref.thresholdColor,
+    thresholdColor = _ref$thresholdColor === void 0 ? 'rgba(255, 0, 0, 0.2)' : _ref$thresholdColor,
+    trackColor = _ref.trackColor;
+  var themeColors = useTheme();
+  var radius = (viewBoxSize - strokeWidth) / 2;
+  var circumference = 2 * Math.PI * radius;
+  var parseVolumeData = function parseVolumeData(threshold, totalCapacity, usedCapacity) {
+    var thresholdValue = threshold != null ? threshold : 100;
+    var progress = usedCapacity / totalCapacity * 100;
+    return {
+      progress: Math.min(Math.max(Math.round(progress), 0), 100),
+      processedThreshold: Math.min(Math.max(thresholdValue, 0), 100)
+    };
+  };
+  var _parseVolumeData = parseVolumeData(threshold, totalCapacity, usedCapacity),
+    progress = _parseVolumeData.progress,
+    processedThreshold = _parseVolumeData.processedThreshold;
+  var progressOffset = circumference * (1 - progress / 100);
+  var thresholdOffset = circumference * (1 - processedThreshold / 100);
+  return React__default.createElement(Container, {
+    "$width": '100%',
+    "$height": '100%',
+    "$position": 'relative',
+    "$alignItems": 'center',
+    "$justifyContent": 'center'
+  }, React__default.createElement("svg", {
+    width: '100%',
+    height: '100%',
+    viewBox: "0 0 " + viewBoxSize + " " + viewBoxSize
+  }, React__default.createElement("circle", {
+    cx: viewBoxSize / 2,
+    cy: viewBoxSize / 2,
+    r: radius,
+    stroke: trackColor || themeColors.vms.accent.softBlue,
+    strokeWidth: strokeWidth,
+    fill: 'none'
+  }), processedThreshold > progress && React__default.createElement("circle", {
+    cx: viewBoxSize / 2,
+    cy: viewBoxSize / 2,
+    r: radius,
+    stroke: thresholdColor,
+    strokeWidth: strokeWidth,
+    fill: 'none',
+    strokeDasharray: circumference,
+    strokeDashoffset: thresholdOffset,
+    strokeLinecap: 'round',
+    transform: "rotate(-90 " + viewBoxSize / 2 + " " + viewBoxSize / 2 + ")"
+  }), React__default.createElement("circle", {
+    cx: viewBoxSize / 2,
+    cy: viewBoxSize / 2,
+    r: radius,
+    stroke: progressColor || themeColors.vms["default"].primary,
+    strokeWidth: strokeWidth,
+    fill: 'none',
+    strokeDasharray: circumference,
+    strokeDashoffset: progressOffset,
+    strokeLinecap: 'round',
+    transform: "rotate(-90 " + viewBoxSize / 2 + " " + viewBoxSize / 2 + ")"
+  })), React__default.createElement(Container, {
+    "$position": 'absolute',
+    "$fontSize": '12px',
+    "$fontWeight": '500',
+    "$color": progressColor || themeColors.vms["default"].primary
+  }, progress + "%"));
+};
+
+var _templateObject$m, _templateObject2$i;
+var shimmer = styled.keyframes(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  0% { background-position: 200% 0; }\n  100% { background-position: -100% 0; }\n"])));
+var AnimatedProgress = styled__default.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  width: ", ";\n  background: ", ";\n  background-size: 300% 100%;\n  // background-repeat: no-repeat;\n  animation: ", " 2s linear infinite;\n  transition: width 0.5s ease-in-out;\n"])), function (_ref) {
+  var width = _ref.width;
+  return width;
+}, function (_ref2) {
+  var color = _ref2.color;
+  return color;
+}, shimmer);
+var ProgressBar = function ProgressBar(_ref3) {
+  var threshold = _ref3.threshold,
+    totalCapacity = _ref3.totalCapacity,
+    usedCapacity = _ref3.usedCapacity,
+    progressColor = _ref3.progressColor,
+    thresholdColor = _ref3.thresholdColor,
+    trackColor = _ref3.trackColor,
+    animate = _ref3.animate;
+  var themeColors = styled.useTheme();
+  var parseVolumeData = function parseVolumeData(threshold, totalCapacity, usedCapacity) {
+    var totalCapacityGB = totalCapacity;
+    var usedCapacityGB = usedCapacity;
+    var thresholdPercent = threshold != null ? threshold : 100;
+    var progress = usedCapacityGB / totalCapacityGB * 100;
+    return {
+      progress: Math.round(progress),
+      Processed_threshold: thresholdPercent
+    };
+  };
+  var _parseVolumeData = parseVolumeData(threshold, totalCapacity, usedCapacity),
+    progress = _parseVolumeData.progress,
+    Processed_threshold = _parseVolumeData.Processed_threshold;
+  var thresholdWidth = Math.max((Processed_threshold != null ? Processed_threshold : 100) - progress, 0);
+  return React__default.createElement(Container, {
     "$width": '100%',
     "$height": '100%',
-    "$flexDirection": 'column',
-    "$gap": '12px'
-  }, React__default.createElement(Container, null, React__default.createElement(Spinner$1, {
-    "$size": size,
-    "$color": color || themeColors.vms["default"].primary
-  })), title && React__default.createElement(Container, {
-    "$flexDirection": 'column',
-    "$gap": '12px'
-  }, React__default.createElement(Container, {
-    "$alignItems": 'center',
-    "$justifyContent": 'center'
-  }, React__default.createElement(Span, {
-    "$fontWeight": '400',
-    "$color": titleColor,
-    "$fontSize": titleSize
-  }, title))));
+    "$borderRadius": '100px',
+    "$background": trackColor != null ? trackColor : themeColors.vms.accent.softBlue,
+    "$overflow": 'hidden',
+    "$position": 'relative'
+  }, animate ? React__default.createElement(AnimatedProgress, {
+    width: progress + "%",
+    color: progressColor != null ? progressColor : themeColors.vms["default"].primary
+  }) : React__default.createElement(Container, {
+    "$width": progress + "%",
+    "$height": '100%',
+    "$background": progressColor != null ? progressColor : themeColors.vms["default"].primary,
+    "$transition": 'width 0.5s ease-in-out'
+  }), Processed_threshold !== undefined && Processed_threshold > progress && React__default.createElement(Container, {
+    "$width": thresholdWidth + "%",
+    "$height": '100%',
+    "$background": thresholdColor != null ? thresholdColor : 'rgba(255, 0, 0, 0.2)'
+  }));
 };
 
-var _templateObject$l;
-var PageInput = styled__default.input(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.vms.accent.light_2;
+var _templateObject$n, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$8, _templateObject6$7;
+var SidebarContainer = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  max-width: ", ";\n  height: 100vh;\n  background: ", ";\n  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
+  var $isExpanded = _ref.$isExpanded;
+  return $isExpanded ? 'max-content' : '68px';
 }, function (_ref2) {
-  var theme = _ref2.theme;
-  return "1px solid " + theme.vms.border.light;
+  var $isExpanded = _ref2.$isExpanded;
+  return $isExpanded ? '400px' : '68px';
 }, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.vms.text.dark;
+  var $background = _ref3.$background,
+    theme = _ref3.theme;
+  return $background || theme.vms.accent.softBlue;
 });
-var Pagination = function Pagination(_ref4) {
-  var totalPages = _ref4.totalPages,
-    currentPage = _ref4.currentPage,
-    itemsPerPage = _ref4.itemsPerPage,
-    onPageChange = _ref4.onPageChange,
-    onItemsPerPageChange = _ref4.onItemsPerPageChange;
-  var themeColors = useTheme();
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useNotification = useNotification(),
-    sendNotification = _useNotification.sendNotification;
-  var _useState = React.useState(currentPage.toString()),
-    inputPage = _useState[0],
-    setInputPage = _useState[1];
-  React__default.useEffect(function () {
-    setInputPage(currentPage.toString());
-  }, [currentPage]);
-  var handlePageChange = function handlePageChange(page) {
-    if (page < 1 || page > totalPages) return;
-    onPageChange(page);
+var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject2$j || (_templateObject2$j = _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  text-decoration: none;\n  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: ", ";\n  color: ", ";\n\n  /* Hover state */\n  &:hover {\n    color: ", ";\n    background: ", ";\n  }\n\n  /* Active link state */\n  &.active {\n    color: ", ";\n    background: ", ";\n  }\n"])), function (_ref4) {
+  var $padding = _ref4.$padding;
+  return $padding;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.vms.text.medium;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.vms.text.white;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.vms["default"].primary;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.vms.text.white;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.vms["default"].primary;
+});
+var IconWrapper$2 = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref10) {
+  var $selected = _ref10.$selected,
+    theme = _ref10.theme;
+  return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
+});
+var Logo = styled__default.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: center;\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  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n  transform: ", ";\n"])), function (_ref11) {
+  var $padding = _ref11.$padding;
+  return $padding;
+}, function (_ref12) {
+  var $fontSize = _ref12.$fontSize;
+  return $fontSize || '20px';
+}, function (_ref13) {
+  var $fontWeight = _ref13.$fontWeight;
+  return $fontWeight || '500';
+}, function (_ref14) {
+  var $isExpanded = _ref14.$isExpanded;
+  return $isExpanded ? 1 : 0;
+}, function (_ref15) {
+  var $isExpanded = _ref15.$isExpanded;
+  return $isExpanded ? 'visible' : 'hidden';
+}, function (_ref16) {
+  var $isExpanded = _ref16.$isExpanded;
+  return $isExpanded ? 'translateX(0)' : 'translateX(-10px)';
+});
+var NotificationBadge = styled__default.div(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -4px;\n  right: -4px;\n  background: red;\n  color: white;\n  font-size: 10px;\n  font-weight: bold;\n  border-radius: 50%;\n  padding: 2px 5px;\n  min-width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref17) {
+  var $position = _ref17.$position;
+  return $position || 'absolute';
+});
+var Sidebar = function Sidebar(_ref18) {
+  var logo = _ref18.logo,
+    content = _ref18.content,
+    background = _ref18.background,
+    ProfileContent = _ref18.ProfileContent,
+    _ref18$isExpanded = _ref18.isExpanded,
+    isExpanded = _ref18$isExpanded === void 0 ? false : _ref18$isExpanded,
+    setIsExpanded = _ref18.setIsExpanded;
+  var location = reactRouterDom.useLocation();
+  var _useState = React.useState({}),
+    openMenus = _useState[0],
+    setOpenMenus = _useState[1];
+  React.useEffect(function () {
+    if (!isExpanded) setOpenMenus({});
+  }, [isExpanded]);
+  var toggleMenu = function toggleMenu(id) {
+    setOpenMenus(function (prev) {
+      var _extends2;
+      return _extends({}, prev, (_extends2 = {}, _extends2[id] = !prev[id], _extends2));
+    });
   };
-  var handleInputChange = function handleInputChange(e) {
-    var value = e.target.value;
-    if (/^(?:[1-9][0-9]*|0)?$/.test(value)) {
-      setInputPage(value);
+  var _getTotalNotifications = function getTotalNotifications(item) {
+    var _item$children;
+    if ((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
+      return (item.notificationCount || 0) + item.children.reduce(function (sum, child) {
+        return sum + _getTotalNotifications(child);
+      }, 0);
     }
+    return item.notificationCount || 0;
+  };
+  var getBasePath = function getBasePath(path) {
+    if (!path) return '';
+    var parts = path.split('/').filter(Boolean);
+    return parts.length > 0 ? "/" + parts[0] : '';
+  };
+  var isRouteActive = function isRouteActive(item) {
+    var _item$children2;
+    var currentBase = getBasePath(location.pathname);
+    var itemBase = item.activeUrl ? getBasePath(item.activeUrl) : getBasePath(item.url);
+    return currentBase === itemBase || ((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.some(function (child) {
+      return currentBase === getBasePath(child.activeUrl) || currentBase === getBasePath(child.url);
+    }));
+  };
+  var ChildLink = React__default.memo(function (_ref19) {
+    var child = _ref19.child,
+      isExpanded = _ref19.isExpanded;
+    var themeColors = styled.useTheme();
+    var location = reactRouterDom.useLocation();
+    var active = getBasePath(location.pathname) === getBasePath(child.activeUrl) || getBasePath(location.pathname) === getBasePath(child.url);
+    var _useState2 = React.useState(false),
+      isHovered = _useState2[0],
+      setIsHovered = _useState2[1];
+    return React__default.createElement(SidebarLink, {
+      to: child.url || '#',
+      key: child.id,
+      "$padding": '0px 10px 0px 0px',
+      onClick: function onClick(e) {
+        if (child.url && child.url === location.pathname) {
+          e.preventDefault();
+        }
+      },
+      onMouseEnter: function onMouseEnter() {
+        return setIsHovered(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsHovered(false);
+      }
+    }, React__default.createElement(IconWrapper$2, {
+      "$selected": active
+    }, React__default.createElement(Icon, {
+      icon: child.icon,
+      size: 18,
+      weight: child.iconWeight,
+      color: active || isHovered ? themeColors.vms.text.white : themeColors.vms.text.medium
+    })), React__default.createElement(Container, {
+      "$width": '100%',
+      "$justifyContent": 'space-between',
+      "$gap": '5px'
+    }, React__default.createElement(TextContainer, {
+      "$isExpanded": isExpanded,
+      "$fontSize": '12px'
+    }, child.label), _getTotalNotifications(child) > 0 && React__default.createElement(NotificationBadge, {
+      "$position": 'unset'
+    }, _getTotalNotifications(child) > 99 ? '99+' : _getTotalNotifications(child))));
+  });
+  var renderChildLinks = function renderChildLinks(children) {
+    return React__default.createElement(Container, {
+      "$padding": '0px 0px 0px 16px',
+      "$flexDirection": 'column',
+      "$gap": '10px'
+    }, children.map(function (child) {
+      return React__default.createElement(ChildLink, {
+        key: child.id,
+        child: child,
+        isExpanded: isExpanded
+      });
+    }));
+  };
+  var SidebarItem = function SidebarItem(_ref20) {
+    var item = _ref20.item,
+      isActive = _ref20.isActive,
+      isOpen = _ref20.isOpen,
+      hasChildren = _ref20.hasChildren,
+      isExpanded = _ref20.isExpanded,
+      onToggle = _ref20.onToggle,
+      renderChildLinks = _ref20.renderChildLinks;
+    var themeColors = styled.useTheme();
+    var _useState3 = React.useState(false),
+      isHovered = _useState3[0],
+      setIsHovered = _useState3[1];
+    var ContentLayout = React__default.createElement(Container, {
+      onMouseEnter: function onMouseEnter() {
+        return setIsHovered(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsHovered(false);
+      },
+      "$alignItems": 'center',
+      "$gap": '8px',
+      "$width": '100%',
+      "$cursor": 'pointer',
+      "$borderRadius": '4px',
+      "$justifyContent": 'space-between',
+      "$hoverBackground": themeColors.vms["default"].primary,
+      onClick: function onClick() {
+        return hasChildren && onToggle();
+      }
+    }, React__default.createElement(Container, {
+      "$alignItems": 'center',
+      "$gap": '8px',
+      "$width": '100%',
+      "$cursor": 'pointer',
+      "$borderRadius": '4px'
+    }, React__default.createElement(Container, {
+      "$position": 'relative'
+    }, React__default.createElement(IconWrapper$2, {
+      "$selected": !!isActive
+    }, React__default.createElement(Icon, {
+      icon: item.icon,
+      size: 20,
+      weight: item.iconWeight,
+      color: isHovered || isActive ? themeColors.vms.text.white : themeColors.vms.text.medium
+    })), _getTotalNotifications(item) > 0 && React__default.createElement(NotificationBadge, null, _getTotalNotifications(item) > 99 ? '99+' : _getTotalNotifications(item))), React__default.createElement(TextContainer, {
+      "$isExpanded": isExpanded,
+      "$fontSize": '14px'
+    }, item.label)), hasChildren && React__default.createElement(Container, {
+      "$padding": '9px',
+      "$opacity": isExpanded ? 1 : 0
+    }, React__default.createElement(Icon, {
+      icon: isOpen ? 'UpArrow' : 'DownArrow',
+      size: 10,
+      color: isHovered ? themeColors.vms.text.white : themeColors.vms.text.medium,
+      cursor: 'pointer'
+    })));
+    return item.url ? React__default.createElement(SidebarLink, {
+      to: item.url,
+      onClick: function onClick(e) {
+        if (item.url === location.pathname) {
+          e.preventDefault();
+        }
+      }
+    }, ContentLayout) : React__default.createElement(Container, {
+      "$flexDirection": 'column',
+      "$alignItems": 'start',
+      "$gap": '8px',
+      "$width": '100%'
+    }, React__default.createElement(Container, {
+      "$color": themeColors.vms.text.medium,
+      "$hoverColor": themeColors.vms.text.white,
+      "$width": '100%'
+    }, ContentLayout), hasChildren && isExpanded && isOpen && renderChildLinks && React__default.createElement(Container, null, renderChildLinks(item.children)));
   };
-  var handleGoClick = function handleGoClick() {
-    var page = Math.floor(Number(inputPage));
-    if (!isNaN(page) && page >= 1 && page <= totalPages) {
-      handlePageChange(page);
-    } else {
-      setInputPage(currentPage.toString());
-      sendNotification({
-        type: 'error',
-        message: 'Invalid page number'
-      });
+  return React__default.createElement(SidebarContainer, {
+    "$background": background,
+    "$isExpanded": isExpanded,
+    onMouseEnter: function onMouseEnter() {
+      return setIsExpanded(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsExpanded(false);
     }
-  };
-  var containerRef = React.useRef(null);
-  return React__default.createElement(Container, {
-    "$gap": '40px',
-    "$height": '100%',
-    "$alignItems": 'flex-start',
-    ref: containerRef
-  }, React__default.createElement(Container, {
-    "$gap": '16px',
-    "$alignItems": 'center'
-  }, React__default.createElement(Span, {
-    "$fontWeight": '400',
-    "$fontSize": '14px',
-    "$lineHeight": '100%'
-  }, t('Page')), React__default.createElement(Container, {
-    "$gap": '12px',
-    "$alignItems": 'center'
   }, React__default.createElement(Container, {
-    "$gap": '4px',
-    "$alignItems": 'center'
-  }, React__default.createElement(PageInput, {
-    type: 'number',
-    value: inputPage,
-    onChange: handleInputChange,
-    min: 1,
-    max: totalPages,
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter') handleGoClick();
-    }
-  }), React__default.createElement(Span, {
-    "$fontWeight": '400',
-    "$fontSize": '14px'
-  }, "/ ", totalPages)), React__default.createElement(ButtonComponent, {
-    variant: 'primary',
-    disabled: inputPage.trim() === '' || isNaN(Number(inputPage)),
-    onClick: handleGoClick,
-    text: t('Go'),
-    size: 'small'
-  })), React__default.createElement(Container, {
-    "$gap": '12px'
-  }, React__default.createElement(ButtonComponent, {
-    onClick: function onClick() {
-      return handlePageChange(currentPage - 1);
-    },
-    disabled: currentPage === 1,
-    icon: 'LeftArrow',
-    iconSize: 12,
-    size: 'custom',
-    padding: '7px',
-    variant: 'secondary',
-    borderRadius: '4px',
-    color: themeColors.vms.text.white
-  }), React__default.createElement(ButtonComponent, {
-    onClick: function onClick() {
-      return handlePageChange(currentPage + 1);
-    },
-    disabled: currentPage === totalPages,
-    icon: 'RightArrow',
-    iconSize: 12,
-    size: 'custom',
-    padding: '7px',
-    variant: 'secondary',
-    borderRadius: '4px',
-    color: themeColors.vms.text.white
+    "$flexDirection": 'column',
+    "$gap": '28px',
+    "$width": '100%'
+  }, logo && (logo.icon ? React__default.createElement(Logo, null, React__default.createElement(Icon, {
+    icon: logo.icon,
+    color: logo.iconColor
+  }), React__default.createElement(TextContainer, {
+    "$isExpanded": isExpanded,
+    "$fontWeight": '700'
+  }, logo.name)) : logo.imageDetails && React__default.createElement(Logo, null, React__default.createElement("img", {
+    src: logo.imageDetails.url,
+    alt: logo.imageDetails.altText,
+    width: logo.imageDetails.width,
+    height: logo.imageDetails.height
   }))), React__default.createElement(Container, {
+    "$flexDirection": 'column',
     "$gap": '16px',
-    "$justifyContent": 'center',
-    "$alignItems": 'center'
-  }, React__default.createElement(Span, {
-    "$fontWeight": '400',
-    "$fontSize": '14px'
-  }, t('Item_Per_Page')), React__default.createElement(Container, null, React__default.createElement(SelectOption, {
-    width: '54px',
-    size: 'small',
-    value: itemsPerPage.toString(),
-    onChange: function onChange(e) {
-      var val = parseInt(e.target.value, 10);
-      if (!isNaN(val)) {
-        onItemsPerPageChange(val);
-      }
-    },
-    options: [{
-      label: '5',
-      value: '5'
-    }, {
-      label: '10',
-      value: '10'
-    }, {
-      label: '20',
-      value: '20'
-    }],
-    positionRef: containerRef,
-    allowDeselect: false
-  }))));
+    "$width": '100%'
+  }, content.map(function (item) {
+    var _item$children3;
+    var active = isRouteActive(item) || false;
+    var hasChildren = !!((_item$children3 = item.children) !== null && _item$children3 !== void 0 && _item$children3.length);
+    var isOpen = openMenus[item.id];
+    return React__default.createElement(SidebarItem, {
+      key: item.id,
+      item: item,
+      isActive: active,
+      isOpen: isOpen,
+      hasChildren: hasChildren,
+      isExpanded: isExpanded,
+      onToggle: function onToggle() {
+        return toggleMenu(item.id);
+      },
+      renderChildLinks: renderChildLinks
+    });
+  }))), ProfileContent);
+};
+
+var _templateObject$o, _templateObject2$k, _templateObject3$d, _templateObject4$a;
+var ContainerWrapper = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
+  return props.$width || 'auto';
+}, function (_ref) {
+  var $minHeight = _ref.$minHeight;
+  return $minHeight;
+});
+var CellContainer = styled__default.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
+  return props.$align;
+}, function (props) {
+  return props.$width || 'auto';
+}, function (props) {
+  return props.$minWidth;
+}, function (props) {
+  return props.$background || 'inherit';
+}, function (props) {
+  return props.$padding;
+});
+var MainText = styled__default.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+  return props.$mtc;
+}, function (props) {
+  return props.$mtfs;
+}, function (props) {
+  return props.$mtw;
+});
+var SubText = styled__default.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+  return props.$stc;
+}, function (props) {
+  return props.$stfs;
+}, function (props) {
+  return props.$stw;
+});
+var TableCell = function TableCell(_ref2) {
+  var maintext = _ref2.maintext,
+    _ref2$maintextcolor = _ref2.maintextcolor,
+    maintextcolor = _ref2$maintextcolor === void 0 ? 'inherit' : _ref2$maintextcolor,
+    _ref2$maintextfontsiz = _ref2.maintextfontsize,
+    maintextfontsize = _ref2$maintextfontsiz === void 0 ? '14px' : _ref2$maintextfontsiz,
+    _ref2$maintextweight = _ref2.maintextweight,
+    maintextweight = _ref2$maintextweight === void 0 ? '500' : _ref2$maintextweight,
+    subtext = _ref2.subtext,
+    _ref2$subtextcolor = _ref2.subtextcolor,
+    subtextcolor = _ref2$subtextcolor === void 0 ? 'inherit' : _ref2$subtextcolor,
+    _ref2$subtextfontsize = _ref2.subtextfontsize,
+    subtextfontsize = _ref2$subtextfontsize === void 0 ? '10px' : _ref2$subtextfontsize,
+    _ref2$subtextweight = _ref2.subtextweight,
+    subtextweight = _ref2$subtextweight === void 0 ? '400' : _ref2$subtextweight,
+    _ref2$alignment = _ref2.alignment,
+    alignment = _ref2$alignment === void 0 ? 'center' : _ref2$alignment,
+    width = _ref2.width,
+    minWidth = _ref2.minWidth,
+    CustomFunction = _ref2.CustomFunction,
+    padding = _ref2.padding,
+    minHeight = _ref2.minHeight;
+  return React__default.createElement(ContainerWrapper, {
+    "$width": width,
+    "$minHeight": minHeight
+  }, CustomFunction ? React__default.createElement(CellContainer, {
+    "$align": alignment,
+    "$width": width,
+    "$minWidth": minWidth
+  }, CustomFunction) : React__default.createElement(CellContainer, {
+    "$align": alignment,
+    "$width": width,
+    "$minWidth": minWidth,
+    "$padding": padding
+  }, React__default.createElement(MainText, {
+    "$mtc": maintextcolor,
+    "$mtfs": maintextfontsize,
+    "$mtw": maintextweight
+  }, maintext), subtext && React__default.createElement(SubText, {
+    "$stc": subtextcolor,
+    "$stfs": subtextfontsize,
+    "$stw": subtextweight
+  }, subtext)));
+};
+
+var _templateObject$p;
+var TableRowContainer = styled.styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items: center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
+var TableRow = function TableRow(_ref) {
+  var rowconfig = _ref.rowconfig,
+    tableheaderconfig = _ref.tableheaderconfig,
+    selectCallback = _ref.selectCallback;
+  var toggleChecked = function toggleChecked(index) {
+    var currentRow = rowconfig[index];
+    var newChecked = !currentRow._checked;
+    if (selectCallback && currentRow.id !== undefined) {
+      selectCallback(newChecked, currentRow.id);
+    }
+  };
+  return React__default.createElement(Container, null, rowconfig.map(function (data, Index) {
+    return React__default.createElement(TableRowContainer, {
+      key: Index
+    }, tableheaderconfig.isAllSelectable && React__default.createElement(Container, {
+      "$padding": '0px 16px 0px 0px',
+      "$alignItems": 'center'
+    }, React__default.createElement(StyledCheckBox, {
+      type: 'checkbox',
+      "$checkboxSize": 13.5,
+      checked: data._checked,
+      "$checked": data._checked,
+      onChange: function onChange() {
+        return toggleChecked(Index);
+      },
+      disabled: data === null || data === void 0 ? void 0 : data._selectable,
+      "$borderSize": 2
+    })), data.rowData.map(function (cellData, cellkey) {
+      var _tableheaderconfig$he;
+      return React__default.createElement(TableCell, {
+        key: cellkey,
+        maintext: cellData.maintext,
+        width: (_tableheaderconfig$he = tableheaderconfig.headerdata[cellkey]) === null || _tableheaderconfig$he === void 0 ? void 0 : _tableheaderconfig$he.width,
+        background: cellData.background,
+        maintextcolor: cellData.maintextcolor,
+        maintextfontsize: cellData.maintextfontsize,
+        maintextweight: cellData.maintextweight,
+        subtext: cellData.subtext,
+        subtextcolor: cellData.subtextcolor,
+        subtextfontsize: cellData.subtextfontsize,
+        subtextweight: cellData.subtextweight,
+        alignment: cellData.alignment,
+        CustomFunction: cellData.CustomFunction,
+        minHeight: '30px'
+      });
+    }));
+  }));
 };
 
-var strokeWidth = 6.5;
-var viewBoxSize = 44;
-var CircularProgress = function CircularProgress(_ref) {
-  var threshold = _ref.threshold,
-    totalCapacity = _ref.totalCapacity,
-    usedCapacity = _ref.usedCapacity,
-    progressColor = _ref.progressColor,
-    _ref$thresholdColor = _ref.thresholdColor,
-    thresholdColor = _ref$thresholdColor === void 0 ? 'rgba(255, 0, 0, 0.2)' : _ref$thresholdColor,
-    trackColor = _ref.trackColor;
+var _templateObject$q, _templateObject2$l, _templateObject3$e, _templateObject4$b, _templateObject5$9, _templateObject6$8;
+var TableContainer = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.vms.brand.light;
+});
+var TableHeader = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (_ref2) {
+  var $hbcolor = _ref2.$hbcolor,
+    theme = _ref2.theme;
+  return $hbcolor || theme.vms["default"].tertiary;
+}, function (_ref3) {
+  var $tcolor = _ref3.$tcolor,
+    theme = _ref3.theme;
+  return $tcolor || theme.vms.text.white;
+});
+var TableContent = styled__default.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TableData = styled__default.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: ", ";\n"])), function (_ref4) {
+  var $isLegends = _ref4.$isLegends;
+  return $isLegends ? 'calc(100% - 56px)' : 'calc(100% - 36px)';
+});
+var LegendDivider = styled__default.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background: ", ";\n  margin-right: ", ";\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.vms.border.extraLight;
+}, function (_ref6) {
+  var $marginRight = _ref6.$marginRight;
+  return $marginRight != null ? $marginRight : '0px';
+});
+var Divider = styled__default.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  height: 2px;\n  background: ", ";\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.vms.border.extraLight;
+});
+var Table = function Table(_ref8) {
+  var tableObject = _ref8.tableObject,
+    _ref8$filter = _ref8.filter,
+    filter = _ref8$filter === void 0 ? false : _ref8$filter,
+    loading = _ref8.loading,
+    _ref8$noDataText = _ref8.noDataText,
+    noDataText = _ref8$noDataText === void 0 ? 'No Data Found!' : _ref8$noDataText;
   var themeColors = useTheme();
-  var radius = (viewBoxSize - strokeWidth) / 2;
-  var circumference = 2 * Math.PI * radius;
-  var parseVolumeData = function parseVolumeData(threshold, totalCapacity, usedCapacity) {
-    var thresholdValue = threshold != null ? threshold : 100;
-    var progress = usedCapacity / totalCapacity * 100;
-    return {
-      progress: Math.min(Math.max(Math.round(progress), 0), 100),
-      processedThreshold: Math.min(Math.max(thresholdValue, 0), 100)
-    };
+  var rowconfig = tableObject.rowconfig,
+    tableheaderconfig = tableObject.tableheaderconfig;
+  var _useState = React.useState(new Set()),
+    collapsedRoles = _useState[0],
+    setCollapsedRoles = _useState[1];
+  var _useState2 = React.useState(false),
+    isAllSelected = _useState2[0],
+    setIsAllSelected = _useState2[1];
+  var getRole = function getRole(row) {
+    var _row$rowData, _row$rowData$, _row$rowData$$CustomF, _row$rowData$$CustomF2, _row$rowData2, _row$rowData2$, _row$rowData2$$Custom, _row$rowData2$$Custom2;
+    return ((_row$rowData = row.rowData) === null || _row$rowData === void 0 ? void 0 : (_row$rowData$ = _row$rowData[1]) === null || _row$rowData$ === void 0 ? void 0 : (_row$rowData$$CustomF = _row$rowData$.CustomFunction) === null || _row$rowData$$CustomF === void 0 ? void 0 : (_row$rowData$$CustomF2 = _row$rowData$$CustomF.props) === null || _row$rowData$$CustomF2 === void 0 ? void 0 : _row$rowData$$CustomF2.text) || ((_row$rowData2 = row.rowData) === null || _row$rowData2 === void 0 ? void 0 : (_row$rowData2$ = _row$rowData2[1]) === null || _row$rowData2$ === void 0 ? void 0 : (_row$rowData2$$Custom = _row$rowData2$.CustomFunction) === null || _row$rowData2$$Custom === void 0 ? void 0 : (_row$rowData2$$Custom2 = _row$rowData2$$Custom.props) === null || _row$rowData2$$Custom2 === void 0 ? void 0 : _row$rowData2$$Custom2.$text) || 'Unassigned';
   };
-  var _parseVolumeData = parseVolumeData(threshold, totalCapacity, usedCapacity),
-    progress = _parseVolumeData.progress,
-    processedThreshold = _parseVolumeData.processedThreshold;
-  var progressOffset = circumference * (1 - progress / 100);
-  var thresholdOffset = circumference * (1 - processedThreshold / 100);
-  return React__default.createElement(Container, {
-    "$width": '100%',
-    "$height": '100%',
-    "$position": 'relative',
-    "$alignItems": 'center',
-    "$justifyContent": 'center'
-  }, React__default.createElement("svg", {
-    width: '100%',
-    height: '100%',
-    viewBox: "0 0 " + viewBoxSize + " " + viewBoxSize
-  }, React__default.createElement("circle", {
-    cx: viewBoxSize / 2,
-    cy: viewBoxSize / 2,
-    r: radius,
-    stroke: trackColor || themeColors.vms.accent.softBlue,
-    strokeWidth: strokeWidth,
-    fill: 'none'
-  }), processedThreshold > progress && React__default.createElement("circle", {
-    cx: viewBoxSize / 2,
-    cy: viewBoxSize / 2,
-    r: radius,
-    stroke: thresholdColor,
-    strokeWidth: strokeWidth,
-    fill: 'none',
-    strokeDasharray: circumference,
-    strokeDashoffset: thresholdOffset,
-    strokeLinecap: 'round',
-    transform: "rotate(-90 " + viewBoxSize / 2 + " " + viewBoxSize / 2 + ")"
-  }), React__default.createElement("circle", {
-    cx: viewBoxSize / 2,
-    cy: viewBoxSize / 2,
-    r: radius,
-    stroke: progressColor || themeColors.vms["default"].primary,
-    strokeWidth: strokeWidth,
-    fill: 'none',
-    strokeDasharray: circumference,
-    strokeDashoffset: progressOffset,
-    strokeLinecap: 'round',
-    transform: "rotate(-90 " + viewBoxSize / 2 + " " + viewBoxSize / 2 + ")"
-  })), React__default.createElement(Container, {
-    "$position": 'absolute',
-    "$fontSize": '12px',
-    "$fontWeight": '500',
-    "$color": progressColor || themeColors.vms["default"].primary
-  }, progress + "%"));
-};
-
-var _templateObject$m, _templateObject2$i;
-var shimmer = styled.keyframes(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  0% { background-position: 200% 0; }\n  100% { background-position: -100% 0; }\n"])));
-var AnimatedProgress = styled__default.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  width: ", ";\n  background: ", ";\n  background-size: 300% 100%;\n  // background-repeat: no-repeat;\n  animation: ", " 2s linear infinite;\n  transition: width 0.5s ease-in-out;\n"])), function (_ref) {
-  var width = _ref.width;
-  return width;
-}, function (_ref2) {
-  var color = _ref2.color;
-  return color;
-}, shimmer);
-var ProgressBar = function ProgressBar(_ref3) {
-  var threshold = _ref3.threshold,
-    totalCapacity = _ref3.totalCapacity,
-    usedCapacity = _ref3.usedCapacity,
-    progressColor = _ref3.progressColor,
-    thresholdColor = _ref3.thresholdColor,
-    trackColor = _ref3.trackColor,
-    animate = _ref3.animate;
-  var themeColors = styled.useTheme();
-  var parseVolumeData = function parseVolumeData(threshold, totalCapacity, usedCapacity) {
-    var totalCapacityGB = totalCapacity;
-    var usedCapacityGB = usedCapacity;
-    var thresholdPercent = threshold != null ? threshold : 100;
-    var progress = usedCapacityGB / totalCapacityGB * 100;
-    return {
-      progress: Math.round(progress),
-      Processed_threshold: thresholdPercent
-    };
+  var filteredRows = filter ? rowconfig.filter(function (row) {
+    return getRole(row);
+  }) : rowconfig;
+  var roleGroups = {};
+  filteredRows.forEach(function (row) {
+    var role = getRole(row);
+    if (!roleGroups[role]) roleGroups[role] = [];
+    roleGroups[role].push(row);
+  });
+  var toggleRoleVisibility = function toggleRoleVisibility(role) {
+    setCollapsedRoles(function (prev) {
+      var newSet = new Set(prev);
+      if (newSet.has(role)) {
+        newSet["delete"](role);
+      } else {
+        newSet.add(role);
+      }
+      return newSet;
+    });
   };
-  var _parseVolumeData = parseVolumeData(threshold, totalCapacity, usedCapacity),
-    progress = _parseVolumeData.progress,
-    Processed_threshold = _parseVolumeData.Processed_threshold;
-  var thresholdWidth = Math.max((Processed_threshold != null ? Processed_threshold : 100) - progress, 0);
-  return React__default.createElement(Container, {
-    "$width": '100%',
-    "$height": '100%',
-    "$borderRadius": '100px',
-    "$background": trackColor != null ? trackColor : themeColors.vms.accent.softBlue,
-    "$overflow": 'hidden',
-    "$position": 'relative'
-  }, animate ? React__default.createElement(AnimatedProgress, {
-    width: progress + "%",
-    color: progressColor != null ? progressColor : themeColors.vms["default"].primary
-  }) : React__default.createElement(Container, {
-    "$width": progress + "%",
-    "$height": '100%',
-    "$background": progressColor != null ? progressColor : themeColors.vms["default"].primary,
-    "$transition": 'width 0.5s ease-in-out'
-  }), Processed_threshold !== undefined && Processed_threshold > progress && React__default.createElement(Container, {
-    "$width": thresholdWidth + "%",
-    "$height": '100%',
-    "$background": thresholdColor != null ? thresholdColor : 'rgba(255, 0, 0, 0.2)'
-  }));
+  var toggleSelectAll = function toggleSelectAll() {
+    var _tableObject$toggleAl;
+    var newState = !isAllSelected;
+    (_tableObject$toggleAl = tableObject.toggleAllCallback) === null || _tableObject$toggleAl === void 0 ? void 0 : _tableObject$toggleAl.call(tableObject, newState);
+  };
+  React.useEffect(function () {
+    if (!(rowconfig !== null && rowconfig !== void 0 && rowconfig.length)) {
+      setIsAllSelected(false);
+      return;
+    }
+    var allChecked = rowconfig.every(function (row) {
+      return row._checked;
+    });
+    setIsAllSelected(allChecked);
+  }, [rowconfig]);
+  return React__default.createElement(TableContainer, null, React__default.createElement(TableContent, null, React__default.createElement(TableHeader, {
+    "$hbcolor": tableheaderconfig.headercolor,
+    "$tcolor": tableheaderconfig.textcolor
+  }, tableheaderconfig.isAllSelectable && React__default.createElement(Container, {
+    "$padding": '0px 16px 0px 0px',
+    "$alignItems": 'end',
+    "$height": '-webkit-fill-available'
+  }, React__default.createElement(StyledCheckBox, {
+    type: 'checkbox',
+    "$checkboxSize": 13.5,
+    checked: isAllSelected,
+    "$checked": isAllSelected,
+    onChange: toggleSelectAll,
+    "$borderSize": 2
+  })), tableheaderconfig.headerdata.map(function (columndata, index, allCols) {
+    var _allCols, _columndata$maintext;
+    var currentGroupTitle = columndata.groupTitle || '';
+    var prevGroupTitle = index > 0 ? allCols[index - 1].groupTitle || '' : '';
+    var isFirstOfGroup = currentGroupTitle && currentGroupTitle !== prevGroupTitle;
+    var isInLegendGroup = !!currentGroupTitle;
+    return React__default.createElement(Container, {
+      key: index,
+      "$flexDirection": 'column',
+      "$width": columndata.width || '100px',
+      "$gap": '8px'
+    }, tableheaderconfig.headerdata.some(function (col) {
+      return !!col.groupTitle;
+    }) && React__default.createElement(Container, {
+      "$alignItems": 'center',
+      "$height": '16px'
+    }, isInLegendGroup ? React__default.createElement(Container, {
+      "$width": '100%'
+    }, isFirstOfGroup ? React__default.createElement(Container, {
+      "$width": '100%',
+      "$alignItems": 'center',
+      "$gap": '4px'
+    }, React__default.createElement(Span, {
+      "$fontSize": '12px',
+      "$fontWeight": '400',
+      "$width": 'max-content',
+      "$lineHeight": 'normal'
+    }, currentGroupTitle), React__default.createElement(LegendDivider, null)) : React__default.createElement(LegendDivider, {
+      "$marginRight": currentGroupTitle !== (((_allCols = allCols[index + 1]) === null || _allCols === void 0 ? void 0 : _allCols.groupTitle) || '') ? '8px' : '0px'
+    })) : null), React__default.createElement(TableCell, {
+      maintext: (_columndata$maintext = columndata.maintext) != null ? _columndata$maintext : '',
+      width: columndata.width,
+      alignment: columndata.alignment
+    }));
+  })), React__default.createElement(Divider, null), loading ? React__default.createElement(Container, {
+    "$flexDirection": 'column',
+    "$alignItems": 'center',
+    "$justifyContent": 'center',
+    "$padding": '24px 24px'
+  }, React__default.createElement(Loader, {
+    title: 'Loading users'
+  })) : rowconfig.length === 0 ? React__default.createElement(Container, {
+    "$flexDirection": 'column',
+    "$alignItems": 'center',
+    "$padding": '24px 24px',
+    "$justifyContent": 'center'
+  }, React__default.createElement(Span, null, noDataText)) : filter ? React__default.createElement(TableData, {
+    "$isLegends": tableheaderconfig.headerdata.some(function (col) {
+      return !!col.groupTitle;
+    })
+  }, Object.entries(roleGroups).map(function (_ref9) {
+    var role = _ref9[0],
+      rows = _ref9[1];
+    return React__default.createElement(React__default.Fragment, {
+      key: role
+    }, React__default.createElement(Container, {
+      "$justifyContent": 'space-between',
+      "$padding": '9px 12px',
+      "$minHeight": '30px',
+      "$alignItems": 'center',
+      "$background": themeColors.vms.accent.light_1,
+      onClick: function onClick() {
+        return toggleRoleVisibility(role);
+      },
+      "$cursor": 'pointer',
+      "$border": "1px solid " + themeColors.vms.border.extraLight
+    }, React__default.createElement(Span, {
+      "$color": themeColors.vms.text.medium,
+      "$fontSize": '12px',
+      "$lineHeight": '100%'
+    }, role, " (", rows.length, ")"), React__default.createElement(Icon, {
+      size: 12,
+      icon: collapsedRoles.has(role) ? 'UpArrow' : 'DownArrow'
+    })), !collapsedRoles.has(role) && rows.map(function (row, index) {
+      return React__default.createElement(Container, {
+        key: index,
+        "$flexDirection": 'column'
+      }, React__default.createElement(TableRow, {
+        rowconfig: [row],
+        tableheaderconfig: tableheaderconfig,
+        selectCallback: tableObject.selectCallback
+      }), rows.length > 1 && index < rows.length - 1 && React__default.createElement(Divider, null));
+    }));
+  })) : React__default.createElement(TableData, {
+    "$isLegends": tableheaderconfig.headerdata.some(function (col) {
+      return !!col.groupTitle;
+    })
+  }, filteredRows.map(function (row, index) {
+    return React__default.createElement(React__default.Fragment, {
+      key: index
+    }, React__default.createElement(TableRow, {
+      rowconfig: [row],
+      tableheaderconfig: tableheaderconfig,
+      selectCallback: tableObject.selectCallback
+    }), filteredRows.length > 1 && index < filteredRows.length - 1 && React__default.createElement(Divider, null));
+  }))));
 };
 
-var _templateObject$n, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$8, _templateObject6$7;
-var SidebarContainer = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  max-width: ", ";\n  height: 100vh;\n  background: ", ";\n  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
-  var $isExpanded = _ref.$isExpanded;
-  return $isExpanded ? 'max-content' : '68px';
+var _templateObject$r, _templateObject2$m, _templateObject3$f, _templateObject4$c, _templateObject5$a, _templateObject6$9;
+var Container$4 = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: ", ";\n  gap: ", ";\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
+  var $overflow = _ref.$overflow;
+  return $overflow || 'visible';
 }, function (_ref2) {
-  var $isExpanded = _ref2.$isExpanded;
-  return $isExpanded ? '400px' : '68px';
+  var $gap = _ref2.$gap;
+  return $gap;
 }, function (_ref3) {
-  var $background = _ref3.$background,
-    theme = _ref3.theme;
-  return $background || theme.vms.accent.softBlue;
+  var $border = _ref3.$border;
+  return $border;
 });
-var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject2$j || (_templateObject2$j = _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  text-decoration: none;\n  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: ", ";\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    background: ", ";\n  }\n"])), function (_ref4) {
-  var $padding = _ref4.$padding;
-  return $padding;
+var FirstContainer = styled__default.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: ", ";\n  padding: ", ";\n  justify-content: space-between;\n  align-items: center;\n  height: max-content;\n"])), function (_ref4) {
+  var $bordeBottom = _ref4.$bordeBottom,
+    theme = _ref4.theme;
+  return $bordeBottom != null ? $bordeBottom : "1px solid " + theme.vms.border.light;
 }, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.vms.text.medium;
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.vms.text.white;
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.vms["default"].primary;
-});
-var IconWrapper$2 = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref8) {
-  var $selected = _ref8.$selected,
-    theme = _ref8.theme;
-  return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
+  var $headerPadding = _ref5.$headerPadding;
+  return $headerPadding ? $headerPadding : '0px';
 });
-var Logo = styled__default.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: center;\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  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n  transform: ", ";\n"])), function (_ref9) {
-  var $padding = _ref9.$padding;
-  return $padding;
+var TabContainer = styled__default.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref6) {
+  var $disabled = _ref6.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref7) {
+  var $disabled = _ref7.$disabled;
+  return $disabled ? '0.6' : '1';
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.vms.text.medium;
+}, function (_ref9) {
+  var $headerHeight = _ref9.$headerHeight;
+  return $headerHeight ? $headerHeight : '34px';
 }, function (_ref10) {
-  var $fontSize = _ref10.$fontSize;
-  return $fontSize || '20px';
-}, function (_ref11) {
-  var $fontWeight = _ref11.$fontWeight;
-  return $fontWeight || '500';
-}, function (_ref12) {
-  var $isExpanded = _ref12.$isExpanded;
-  return $isExpanded ? 1 : 0;
-}, function (_ref13) {
-  var $isExpanded = _ref13.$isExpanded;
-  return $isExpanded ? 'visible' : 'hidden';
-}, function (_ref14) {
-  var $isExpanded = _ref14.$isExpanded;
-  return $isExpanded ? 'translateX(0)' : 'translateX(-10px)';
+  var $disabled = _ref10.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
 });
-var NotificationBadge = styled__default.div(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -4px;\n  right: -4px;\n  background: red;\n  color: white;\n  font-size: 10px;\n  font-weight: bold;\n  border-radius: 50%;\n  padding: 2px 5px;\n  min-width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref15) {
-  var $position = _ref15.$position;
-  return $position || 'absolute';
+var TabItemContainer = styled__default.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: '';\n    display: ", ";\n    width: 100%;\n    min-height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref11) {
+  var $headerHeight = _ref11.$headerHeight;
+  return $headerHeight ? $headerHeight : '34px';
+}, function (props) {
+  return props.$active ? 'block' : 'none';
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.vms["default"].primary;
 });
-var Sidebar = function Sidebar(_ref16) {
-  var logo = _ref16.logo,
-    content = _ref16.content,
-    background = _ref16.background,
-    ProfileContent = _ref16.ProfileContent,
-    _ref16$isExpanded = _ref16.isExpanded,
-    isExpanded = _ref16$isExpanded === void 0 ? false : _ref16$isExpanded,
-    setIsExpanded = _ref16.setIsExpanded;
-  var location = reactRouterDom.useLocation();
-  var _useState = React.useState({}),
-    openMenus = _useState[0],
-    setOpenMenus = _useState[1];
-  React.useEffect(function () {
-    if (!isExpanded) setOpenMenus({});
-  }, [isExpanded]);
-  var toggleMenu = function toggleMenu(id) {
-    setOpenMenus(function (prev) {
-      var _extends2;
-      return _extends({}, prev, (_extends2 = {}, _extends2[id] = !prev[id], _extends2));
-    });
-  };
-  var _getTotalNotifications = function getTotalNotifications(item) {
-    var _item$children;
-    if ((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
-      return (item.notificationCount || 0) + item.children.reduce(function (sum, child) {
-        return sum + _getTotalNotifications(child);
-      }, 0);
-    }
-    return item.notificationCount || 0;
-  };
-  var getBasePath = function getBasePath(path) {
-    if (!path) return '';
-    var parts = path.split('/').filter(Boolean);
-    return parts.length > 0 ? "/" + parts[0] : '';
-  };
-  var isRouteActive = function isRouteActive(item) {
-    var _item$children2;
-    var currentBase = getBasePath(location.pathname);
-    var itemBase = item.activeUrl ? getBasePath(item.activeUrl) : getBasePath(item.url);
-    return currentBase === itemBase || ((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.some(function (child) {
-      return currentBase === getBasePath(child.activeUrl) || currentBase === getBasePath(child.url);
-    }));
-  };
-  var ChildLink = React__default.memo(function (_ref17) {
-    var child = _ref17.child,
-      isExpanded = _ref17.isExpanded;
-    var themeColors = styled.useTheme();
-    var location = reactRouterDom.useLocation();
-    var active = getBasePath(location.pathname) === getBasePath(child.activeUrl) || getBasePath(location.pathname) === getBasePath(child.url);
-    var _useState2 = React.useState(false),
-      isHovered = _useState2[0],
-      setIsHovered = _useState2[1];
-    return React__default.createElement(SidebarLink, {
-      to: child.url || '#',
-      key: child.id,
-      onMouseEnter: function onMouseEnter() {
-        return setIsHovered(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setIsHovered(false);
-      },
-      "$padding": '0px 10px 0px 0px'
-    }, React__default.createElement(IconWrapper$2, {
-      "$selected": active
-    }, React__default.createElement(Icon, {
-      icon: child.icon,
-      size: 18,
-      weight: child.iconWeight,
-      color: isHovered || active ? themeColors.vms.text.white : themeColors.vms.text.medium
-    })), React__default.createElement(Container, {
-      "$width": '100%',
-      "$justifyContent": 'space-between',
-      "$gap": '5px'
-    }, React__default.createElement(TextContainer, {
-      "$isExpanded": isExpanded,
-      "$fontSize": '12px',
-      "$color": themeColors.vms.text.medium
-    }, child.label), _getTotalNotifications(child) > 0 && React__default.createElement(NotificationBadge, {
-      "$position": 'unset'
-    }, _getTotalNotifications(child) > 99 ? '99+' : _getTotalNotifications(child))));
-  });
-  var renderChildLinks = function renderChildLinks(children) {
-    return React__default.createElement(Container, {
-      "$padding": '0px 0px 0px 16px',
-      "$flexDirection": 'column',
-      "$gap": '10px'
-    }, children.map(function (child) {
-      return React__default.createElement(ChildLink, {
-        key: child.id,
-        child: child,
-        isExpanded: isExpanded
-      });
-    }));
-  };
-  var SidebarItem = React__default.memo(function (_ref18) {
-    var item = _ref18.item,
-      isActive = _ref18.isActive,
-      isOpen = _ref18.isOpen,
-      hasChildren = _ref18.hasChildren,
-      isExpanded = _ref18.isExpanded,
-      onToggle = _ref18.onToggle,
-      renderChildLinks = _ref18.renderChildLinks;
-    var themeColors = styled.useTheme();
-    var _useState3 = React.useState(false),
-      isHovered = _useState3[0],
-      setIsHovered = _useState3[1];
-    var ContentLayout = React__default.createElement(Container, {
-      onMouseEnter: function onMouseEnter() {
-        return setIsHovered(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setIsHovered(false);
+var DetailsFirstContainer = styled__default.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  white-space: nowrap;\n"])), function (_ref13) {
+  var $active = _ref13.$active,
+    theme = _ref13.theme;
+  return $active ? theme.vms["default"].primary : theme.vms.text.medium;
+});
+var TabItemsWrapper = styled__default.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  // overflow-x: auto;\n  scrollbar-width: thin;\n"])));
+var Tabs = function Tabs(_ref14) {
+  var tabItems = _ref14.tabItems,
+    _ref14$disabled = _ref14.disabled,
+    disabled = _ref14$disabled === void 0 ? false : _ref14$disabled,
+    headerHeight = _ref14.headerHeight,
+    headerPadding = _ref14.headerPadding,
+    activeTab = _ref14.activeTab,
+    border = _ref14.border,
+    _ref14$gap = _ref14.gap,
+    gap = _ref14$gap === void 0 ? '24px' : _ref14$gap,
+    overflow = _ref14.overflow,
+    bordeBottom = _ref14.bordeBottom,
+    tabRightNode = _ref14.tabRightNode;
+  var themeColors = useTheme();
+  return React__default.createElement(Container$4, {
+    "$gap": gap,
+    "$border": border,
+    "$overflow": overflow
+  }, React__default.createElement(FirstContainer, {
+    "$headerPadding": headerPadding,
+    "$bordeBottom": bordeBottom
+  }, React__default.createElement(TabItemsWrapper, null, tabItems.map(function (tab, index) {
+    return React__default.createElement(TabContainer, {
+      key: index,
+      onClick: function onClick() {
+        if (!disabled && tab.onClick) tab.onClick();
       },
-      "$alignItems": 'center',
-      "$gap": '8px',
-      "$width": '100%',
-      "$cursor": 'pointer',
+      "$disabled": disabled,
+      "$headerHeight": headerHeight
+    }, React__default.createElement(TabItemContainer, {
+      "$active": activeTab === tab.title,
+      "$headerHeight": headerHeight
+    }, tab.icon && React__default.createElement(Icon, {
+      color: activeTab === tab.title ? tab.activeColor : themeColors.vms.text.medium,
+      icon: tab.icon,
+      size: tab.iconSize,
+      weight: tab.iconWeight
+    }), React__default.createElement(DetailsFirstContainer, {
+      "$active": activeTab === tab.title
+    }, tab.title)));
+  })), tabRightNode === null || tabRightNode === void 0 ? void 0 : tabRightNode.node), tabItems.map(function (tab, index) {
+    return activeTab === tab.title && React__default.createElement(Container$4, {
+      key: index,
+      "$overflow": overflow
+    }, tab.content);
+  }));
+};
+
+var InternalTabs = function InternalTabs(_ref) {
+  var tabs = _ref.tabs,
+    activeTab = _ref.activeTab,
+    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__default.createElement(Container, {
+    "$background": backgroundColor || themeColors.vms.text.white,
+    "$padding": '3px',
+    "$borderRadius": '4px',
+    "$justifyContent": 'space-between',
+    "$opacity": disabled ? 0.6 : 1
+  }, tabs.map(function (tab) {
+    return React__default.createElement(Container, {
+      key: tab.value,
       "$borderRadius": '4px',
-      "$justifyContent": 'space-between',
-      "$hoverBackground": themeColors.vms["default"].primary,
-      onClick: function onClick() {
-        return hasChildren && onToggle();
-      }
-    }, React__default.createElement(Container, {
+      "$width": '126px',
+      "$justifyContent": 'center',
       "$alignItems": 'center',
-      "$gap": '8px',
-      "$width": '100%',
-      "$cursor": 'pointer',
-      "$borderRadius": '4px'
-    }, React__default.createElement(Container, {
-      "$position": 'relative'
-    }, React__default.createElement(IconWrapper$2, {
-      "$selected": !!isActive
-    }, React__default.createElement(Icon, {
-      icon: item.icon,
-      size: 20,
-      weight: item.iconWeight,
-      color: isHovered || isActive ? themeColors.vms.text.white : themeColors.vms.text.medium
-    })), _getTotalNotifications(item) > 0 && React__default.createElement(NotificationBadge, null, _getTotalNotifications(item) > 99 ? '99+' : _getTotalNotifications(item))), React__default.createElement(TextContainer, {
-      "$isExpanded": isExpanded,
-      "$fontSize": '14px'
-    }, item.label)), hasChildren && React__default.createElement(Container, {
-      "$padding": '9px',
-      "$opacity": isExpanded ? 1 : 0
-    }, React__default.createElement(Icon, {
-      icon: isOpen ? 'UpArrow' : 'DownArrow',
-      size: 10,
-      color: isHovered ? themeColors.vms.text.white : themeColors.vms.text.medium,
-      cursor: 'pointer'
-    })));
-    return item.url ? React__default.createElement(SidebarLink, {
-      to: item.url
-    }, ContentLayout) : React__default.createElement(Container, {
-      "$flexDirection": 'column',
-      "$alignItems": 'start',
-      "$gap": '8px',
-      "$width": '100%'
-    }, React__default.createElement(Container, {
-      "$color": themeColors.vms.text.medium,
-      "$hoverColor": themeColors.vms.text.white,
-      "$width": '100%'
-    }, ContentLayout), hasChildren && isExpanded && isOpen && renderChildLinks && React__default.createElement(Container, null, renderChildLinks(item.children)));
-  });
-  return React__default.createElement(SidebarContainer, {
-    "$background": background,
-    "$isExpanded": isExpanded,
-    onMouseEnter: function onMouseEnter() {
-      return setIsExpanded(true);
+      "$cursor": disabled ? 'not-allowed' : 'pointer',
+      onClick: disabled ? undefined : tab.onClick,
+      "$background": activeTab === tab.value ? activeTabBg || themeColors.vms.accent.softBlue : themeColors.vms["default"].tertiary,
+      "$color": activeTab === tab.value ? textColor || themeColors.vms["default"].primary : themeColors.vms.text.medium
+    }, React__default.createElement(Span, {
+      "$fontSize": '14px',
+      "$color": activeTab === tab.value ? textColor || themeColors.vms["default"].primary : themeColors.vms.text.medium
+    }, tab.title));
+  }));
+};
+
+var light = {
+  vms: {
+    brand: {
+      primary: '#4C9EEB',
+      secondary: '#14171A',
+      light: '#FFFFFF'
+    },
+    accent: {
+      light_1: '#E1E8ED',
+      light_2: '#F5F8FA',
+      light_3: '#F0F3F5',
+      light_4: '#ECF0F4',
+      light_5: '#F0F0F3',
+      light_6: '#EFF8FF',
+      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',
+      critical: '#FF7518'
+    },
+    disabled: {
+      primary: '#B9DCF7',
+      secondary: '#DADADA',
+      error: '#FFEBEE',
+      success: '#E8F5E9',
+      warning: '#FFF3E0',
+      info: '#E3F2FD',
+      critical: '#FFF5DA'
+    },
+    hover: {
+      primary: '#4C9EEB',
+      secondary: '#A3A3A3',
+      tertiary: 'transparent',
+      error: '#D32F2F',
+      success: '#388E3C',
+      warning: '#F57C00',
+      info: '#193ED2',
+      critical: '#CC5500'
+    },
+    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'
+    }
+  },
+  AiProtectWebsite: {
+    primary: {
+      50: '#F5FAFF',
+      100: '#EFF8FF',
+      200: '#D1E9FF',
+      300: '#B2DDFF',
+      400: '#84CAFF',
+      500: '#53B1FD',
+      600: '#2E90FA',
+      700: '#1570EF',
+      800: '#175CD3',
+      900: '#1849A9',
+      950: '#194185'
+    },
+    secondary: {
+      50: '#F3F7FA',
+      100: '#E8F3F7',
+      200: '#D6E7EF',
+      300: '#BCD7E5',
+      400: '#A1C1D8',
+      500: '#89ABCB',
+      600: '#7393BC',
+      700: '#5F7CA3',
+      800: '#4F6684',
+      900: '#44566B',
+      950: '#28323E'
+    },
+    gray: {
+      50: '#FFFFFF',
+      100: '#FAFAFA',
+      200: '#F5F5F5',
+      300: '#E5E5E5',
+      400: '#D6D6D6',
+      500: '#A3A3A3',
+      600: '#737373',
+      700: '#525252',
+      800: '#424242',
+      900: '#292929',
+      950: '#141414'
+    },
+    error: {
+      50: '#FFF0F0',
+      100: '#FFDDDD',
+      200: '#FFC0C0',
+      300: '#FF9494',
+      400: '#FF5757',
+      500: '#FF2323',
+      600: '#FF0000',
+      700: '#D70000',
+      800: '#B10303',
+      900: '#920A0A',
+      950: '#500000'
     },
-    onMouseLeave: function onMouseLeave() {
-      return setIsExpanded(false);
+    success: {
+      50: '#F3FAF3',
+      100: '#E3F5E3',
+      200: '#C8EAC9',
+      300: '#9DD89F',
+      400: '#6ABE6E',
+      500: '#45A249',
+      600: '#388E3C',
+      700: '#2C692F',
+      800: '#275429',
+      900: '#224525',
+      950: '#0E2511'
+    },
+    warning: {
+      50: '#FFFBEC',
+      100: '#FFF7D3',
+      200: '#FFEBA5',
+      300: '#FFDB6D',
+      400: '#FFBF32',
+      500: '#FFA80A',
+      600: '#FA8E00',
+      700: '#CC6B02',
+      800: '#A1520B',
+      900: '#82450C',
+      950: '#462104'
+    },
+    info: {
+      50: '#F0F0FF',
+      100: '#E4E4FF',
+      200: '#CDCEFF',
+      300: '#A7A6FF',
+      400: '#7B73FF',
+      500: '#513BFF',
+      600: '#3C14FF',
+      700: '#2800FA',
+      800: '#2301D6',
+      900: '#1E03AF',
+      950: '#0E0077'
+    },
+    transparent: {
+      white10: 'rgba(255,255,255,0.1)',
+      white20: 'rgba(255,255,255,0.2)',
+      white30: 'rgba(255,255,255,0.3)',
+      white40: 'rgba(229, 229, 229, 0.4)',
+      white50: 'rgba(255, 255, 255, 0.5)',
+      black10: 'rgba(0,0,0,0.1)',
+      black20: 'rgba(0,0,0,0.2)',
+      black30: 'rgba(0,0,0,0.3)'
     }
-  }, React__default.createElement(Container, {
-    "$flexDirection": 'column',
-    "$gap": '28px',
-    "$width": '100%'
-  }, logo && (logo.icon ? React__default.createElement(Logo, null, React__default.createElement(Icon, {
-    icon: logo.icon,
-    color: logo.iconColor
-  }), React__default.createElement(TextContainer, {
-    "$isExpanded": isExpanded,
-    "$fontWeight": '700'
-  }, logo.name)) : logo.imageDetails && React__default.createElement(Logo, null, React__default.createElement("img", {
-    src: logo.imageDetails.url,
-    alt: logo.imageDetails.altText,
-    width: logo.imageDetails.width,
-    height: logo.imageDetails.height
-  }))), React__default.createElement(Container, {
-    "$flexDirection": 'column',
-    "$gap": '16px',
-    "$width": '100%'
-  }, content.map(function (item) {
-    var _item$children3;
-    var active = isRouteActive(item) || false;
-    var hasChildren = !!((_item$children3 = item.children) !== null && _item$children3 !== void 0 && _item$children3.length);
-    var isOpen = openMenus[item.id];
-    return React__default.createElement(SidebarItem, {
-      key: item.id,
-      item: item,
-      isActive: active,
-      isOpen: isOpen,
-      hasChildren: hasChildren,
-      isExpanded: isExpanded,
-      onToggle: function onToggle() {
-        return toggleMenu(item.id);
-      },
-      renderChildLinks: renderChildLinks
-    });
-  }))), ProfileContent);
-};
-
-var _templateObject$o, _templateObject2$k, _templateObject3$d, _templateObject4$a;
-var ContainerWrapper = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
-  return props.$width || 'auto';
-}, function (_ref) {
-  var $minHeight = _ref.$minHeight;
-  return $minHeight;
-});
-var CellContainer = styled__default.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
-  return props.$align;
-}, function (props) {
-  return props.$width || 'auto';
-}, function (props) {
-  return props.$minWidth;
-}, function (props) {
-  return props.$background || 'inherit';
-}, function (props) {
-  return props.$padding;
-});
-var MainText = styled__default.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
-  return props.$mtc;
-}, function (props) {
-  return props.$mtfs;
-}, function (props) {
-  return props.$mtw;
-});
-var SubText = styled__default.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
-  return props.$stc;
-}, function (props) {
-  return props.$stfs;
-}, function (props) {
-  return props.$stw;
-});
-var TableCell = function TableCell(_ref2) {
-  var maintext = _ref2.maintext,
-    _ref2$maintextcolor = _ref2.maintextcolor,
-    maintextcolor = _ref2$maintextcolor === void 0 ? 'inherit' : _ref2$maintextcolor,
-    _ref2$maintextfontsiz = _ref2.maintextfontsize,
-    maintextfontsize = _ref2$maintextfontsiz === void 0 ? '14px' : _ref2$maintextfontsiz,
-    _ref2$maintextweight = _ref2.maintextweight,
-    maintextweight = _ref2$maintextweight === void 0 ? '500' : _ref2$maintextweight,
-    subtext = _ref2.subtext,
-    _ref2$subtextcolor = _ref2.subtextcolor,
-    subtextcolor = _ref2$subtextcolor === void 0 ? 'inherit' : _ref2$subtextcolor,
-    _ref2$subtextfontsize = _ref2.subtextfontsize,
-    subtextfontsize = _ref2$subtextfontsize === void 0 ? '10px' : _ref2$subtextfontsize,
-    _ref2$subtextweight = _ref2.subtextweight,
-    subtextweight = _ref2$subtextweight === void 0 ? '400' : _ref2$subtextweight,
-    _ref2$alignment = _ref2.alignment,
-    alignment = _ref2$alignment === void 0 ? 'center' : _ref2$alignment,
-    width = _ref2.width,
-    minWidth = _ref2.minWidth,
-    CustomFunction = _ref2.CustomFunction,
-    padding = _ref2.padding,
-    minHeight = _ref2.minHeight;
-  return React__default.createElement(ContainerWrapper, {
-    "$width": width,
-    "$minHeight": minHeight
-  }, CustomFunction ? React__default.createElement(CellContainer, {
-    "$align": alignment,
-    "$width": width,
-    "$minWidth": minWidth
-  }, CustomFunction) : React__default.createElement(CellContainer, {
-    "$align": alignment,
-    "$width": width,
-    "$minWidth": minWidth,
-    "$padding": padding
-  }, React__default.createElement(MainText, {
-    "$mtc": maintextcolor,
-    "$mtfs": maintextfontsize,
-    "$mtw": maintextweight
-  }, maintext), subtext && React__default.createElement(SubText, {
-    "$stc": subtextcolor,
-    "$stfs": subtextfontsize,
-    "$stw": subtextweight
-  }, subtext)));
-};
-
-var _templateObject$p;
-var TableRowContainer = styled.styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items: center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
-var TableRow = function TableRow(_ref) {
-  var rowconfig = _ref.rowconfig,
-    tableheaderconfig = _ref.tableheaderconfig,
-    selectCallback = _ref.selectCallback;
-  var toggleChecked = function toggleChecked(index) {
-    var currentRow = rowconfig[index];
-    var newChecked = !currentRow._checked;
-    if (selectCallback && currentRow.id !== undefined) {
-      selectCallback(newChecked, currentRow.id);
+  },
+  SNetLabsWebsite: {
+    primary: {
+      50: '#F5FAFF',
+      100: '#EFF8FF',
+      200: '#D1E9FF',
+      300: '#B2DDFF',
+      400: '#84CAFF',
+      500: '#53B1FD',
+      600: '#2E90FA',
+      700: '#1570EF',
+      800: '#175CD3',
+      900: '#1849A9',
+      950: '#194185'
+    },
+    secondary: {
+      50: '#F3F7FA',
+      100: '#E8F3F7',
+      200: '#D6E7EF',
+      300: '#BCD7E5',
+      400: '#A1C1D8',
+      500: '#89ABCB',
+      600: '#7393BC',
+      700: '#5F7CA3',
+      800: '#4F6684',
+      900: '#44566B',
+      950: '#28323E'
+    },
+    gray: {
+      50: '#FFFFFF',
+      100: '#FAFAFA',
+      200: '#F5F5F5',
+      300: '#E5E5E5',
+      400: '#D6D6D6',
+      500: '#A3A3A3',
+      600: '#737373',
+      700: '#525252',
+      800: '#424242',
+      900: '#292929',
+      950: '#141414'
+    },
+    error: {
+      50: '#FFF0F0',
+      100: '#FFDDDD',
+      200: '#FFC0C0',
+      300: '#FF9494',
+      400: '#FF5757',
+      500: '#FF2323',
+      600: '#FF0000',
+      700: '#D70000',
+      800: '#B10303',
+      900: '#920A0A',
+      950: '#500000'
+    },
+    success: {
+      50: '#F3FAF3',
+      100: '#E3F5E3',
+      200: '#C8EAC9',
+      300: '#9DD89F',
+      400: '#6ABE6E',
+      500: '#45A249',
+      600: '#388E3C',
+      700: '#2C692F',
+      800: '#275429',
+      900: '#224525',
+      950: '#0E2511'
+    },
+    warning: {
+      50: '#FFF4E6',
+      100: '#FEE8CC',
+      200: '#FEDDB3',
+      300: '#FDD199',
+      400: '#FDBA66',
+      500: '#FCA333',
+      600: '#FB8C00',
+      700: '#C96000',
+      800: '#950300',
+      900: '#643700',
+      950: '#4B2A00'
+    },
+    info: {
+      50: '#F0F0FF',
+      100: '#E4E4FF',
+      200: '#CDCEFF',
+      300: '#A7A6FF',
+      400: '#7B73FF',
+      500: '#513BFF',
+      600: '#3C14FF',
+      700: '#2800FA',
+      800: '#2301D6',
+      900: '#1E03AF',
+      950: '#0E0077'
+    },
+    tertiary: {
+      50: '#ECFCFA',
+      100: '#D9F9F6',
+      200: '#C6F6F1',
+      300: '#B3F3EC',
+      400: '#8CECE3',
+      500: '#66E6D9',
+      600: '#40E0D0',
+      700: '#33B3A6',
+      800: '#26867D',
+      900: '#1A5A53',
+      950: '#13433E'
+    },
+    purple: {
+      50: '#F3EEFB',
+      100: '#E7DEF7',
+      200: '#DBCDF3',
+      300: '#CFBCEF',
+      400: '#B89BE6',
+      500: '#A079DE',
+      600: '#8858D6',
+      700: '#6D47AC',
+      800: '#533582',
+      900: '#382459',
+      950: '#2B1B44'
+    },
+    yellow: {
+      50: '#FFFBE7',
+      100: '#FFF7CE',
+      200: '#FFF3B5',
+      300: '#FFEF9D',
+      400: '#FFE66C',
+      500: '#FFDE3B',
+      600: '#FFD60A',
+      700: '#CCAB08',
+      800: '#997006',
+      900: '#665604',
+      950: '#4D3003'
+    },
+    transparent: {
+      white10: '#FFFFFF1A',
+      white20: '#FFFFFF33',
+      white30: '#FFFFFF4D',
+      white100: '#FFF7CE',
+      white200: '#FFF3B5',
+      white300: '#FFEF9D',
+      black100: '#0000001A',
+      black200: '#00000033',
+      black300: '#0000004D'
     }
-  };
-  return React__default.createElement(Container, null, rowconfig.map(function (data, Index) {
-    return React__default.createElement(TableRowContainer, {
-      key: Index
-    }, tableheaderconfig.isAllSelectable && React__default.createElement(Container, {
-      "$padding": '0px 16px 0px 0px',
-      "$alignItems": 'center'
-    }, React__default.createElement(StyledCheckBox, {
-      type: 'checkbox',
-      "$checkboxSize": 13.5,
-      checked: data._checked,
-      "$checked": data._checked,
-      onChange: function onChange() {
-        return toggleChecked(Index);
-      },
-      disabled: data === null || data === void 0 ? void 0 : data._selectable,
-      "$borderSize": 2
-    })), data.rowData.map(function (cellData, cellkey) {
-      var _tableheaderconfig$he;
-      return React__default.createElement(TableCell, {
-        key: cellkey,
-        maintext: cellData.maintext,
-        width: (_tableheaderconfig$he = tableheaderconfig.headerdata[cellkey]) === null || _tableheaderconfig$he === void 0 ? void 0 : _tableheaderconfig$he.width,
-        background: cellData.background,
-        maintextcolor: cellData.maintextcolor,
-        maintextfontsize: cellData.maintextfontsize,
-        maintextweight: cellData.maintextweight,
-        subtext: cellData.subtext,
-        subtextcolor: cellData.subtextcolor,
-        subtextfontsize: cellData.subtextfontsize,
-        subtextweight: cellData.subtextweight,
-        alignment: cellData.alignment,
-        CustomFunction: cellData.CustomFunction,
-        minHeight: '30px'
-      });
-    }));
-  }));
+  }
 };
-
-var _templateObject$q, _templateObject2$l, _templateObject3$e, _templateObject4$b, _templateObject5$9, _templateObject6$8;
-var TableContainer = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.vms.brand.light;
-});
-var TableHeader = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (_ref2) {
-  var $hbcolor = _ref2.$hbcolor,
-    theme = _ref2.theme;
-  return $hbcolor || theme.vms["default"].tertiary;
-}, function (_ref3) {
-  var $tcolor = _ref3.$tcolor,
-    theme = _ref3.theme;
-  return $tcolor || theme.vms.text.white;
-});
-var TableContent = styled__default.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
-var TableData = styled__default.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: ", ";\n"])), function (_ref4) {
-  var $isLegends = _ref4.$isLegends;
-  return $isLegends ? 'calc(100% - 56px)' : 'calc(100% - 36px)';
-});
-var LegendDivider = styled__default.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background: ", ";\n  margin-right: ", ";\n"])), function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.vms.border.extraLight;
-}, function (_ref6) {
-  var $marginRight = _ref6.$marginRight;
-  return $marginRight != null ? $marginRight : '0px';
-});
-var Divider = styled__default.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  height: 2px;\n  background: ", ";\n"])), function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.vms.border.extraLight;
-});
-var Table = function Table(_ref8) {
-  var tableObject = _ref8.tableObject,
-    _ref8$filter = _ref8.filter,
-    filter = _ref8$filter === void 0 ? false : _ref8$filter,
-    loading = _ref8.loading,
-    _ref8$noDataText = _ref8.noDataText,
-    noDataText = _ref8$noDataText === void 0 ? 'No Data Found!' : _ref8$noDataText;
-  var themeColors = useTheme();
-  var rowconfig = tableObject.rowconfig,
-    tableheaderconfig = tableObject.tableheaderconfig;
-  var _useState = React.useState(new Set()),
-    collapsedRoles = _useState[0],
-    setCollapsedRoles = _useState[1];
-  var _useState2 = React.useState(false),
-    isAllSelected = _useState2[0],
-    setIsAllSelected = _useState2[1];
-  var getRole = function getRole(row) {
-    var _row$rowData, _row$rowData$, _row$rowData$$CustomF, _row$rowData$$CustomF2, _row$rowData2, _row$rowData2$, _row$rowData2$$Custom, _row$rowData2$$Custom2;
-    return ((_row$rowData = row.rowData) === null || _row$rowData === void 0 ? void 0 : (_row$rowData$ = _row$rowData[1]) === null || _row$rowData$ === void 0 ? void 0 : (_row$rowData$$CustomF = _row$rowData$.CustomFunction) === null || _row$rowData$$CustomF === void 0 ? void 0 : (_row$rowData$$CustomF2 = _row$rowData$$CustomF.props) === null || _row$rowData$$CustomF2 === void 0 ? void 0 : _row$rowData$$CustomF2.text) || ((_row$rowData2 = row.rowData) === null || _row$rowData2 === void 0 ? void 0 : (_row$rowData2$ = _row$rowData2[1]) === null || _row$rowData2$ === void 0 ? void 0 : (_row$rowData2$$Custom = _row$rowData2$.CustomFunction) === null || _row$rowData2$$Custom === void 0 ? void 0 : (_row$rowData2$$Custom2 = _row$rowData2$$Custom.props) === null || _row$rowData2$$Custom2 === void 0 ? void 0 : _row$rowData2$$Custom2.$text) || 'Unassigned';
-  };
-  var filteredRows = filter ? rowconfig.filter(function (row) {
-    return getRole(row);
-  }) : rowconfig;
-  var roleGroups = {};
-  filteredRows.forEach(function (row) {
-    var role = getRole(row);
-    if (!roleGroups[role]) roleGroups[role] = [];
-    roleGroups[role].push(row);
-  });
-  var toggleRoleVisibility = function toggleRoleVisibility(role) {
-    setCollapsedRoles(function (prev) {
-      var newSet = new Set(prev);
-      if (newSet.has(role)) {
-        newSet["delete"](role);
-      } else {
-        newSet.add(role);
-      }
-      return newSet;
-    });
-  };
-  var toggleSelectAll = function toggleSelectAll() {
-    var _tableObject$toggleAl;
-    var newState = !isAllSelected;
-    (_tableObject$toggleAl = tableObject.toggleAllCallback) === null || _tableObject$toggleAl === void 0 ? void 0 : _tableObject$toggleAl.call(tableObject, newState);
-  };
-  React.useEffect(function () {
-    if (!(rowconfig !== null && rowconfig !== void 0 && rowconfig.length)) {
-      setIsAllSelected(false);
-      return;
+var dark = {
+  vms: {
+    brand: {
+      primary: '#4C9EEB',
+      secondary: '#E1E8ED',
+      light: '#1A1A1A'
+    },
+    accent: {
+      light_1: '#2A2E33',
+      light_2: '#1F2327',
+      light_3: '#0F1214',
+      light_4: '#101417',
+      light_5: '#0F0F0C',
+      light_6: '#0D3B66',
+      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',
+      critical: '#FF7518'
+    },
+    disabled: {
+      primary: '#3B4A58',
+      secondary: '#3E3E3E',
+      error: '#5B1B1B',
+      success: '#1B3C1B',
+      warning: '#5A3C1B',
+      info: '#1A3C5A',
+      critical: '#FFF5DA'
+    },
+    hover: {
+      primary: '#5CA6F0',
+      secondary: '#7A7A7A',
+      tertiary: 'transparent',
+      error: '#D32F2F',
+      success: '#388E3C',
+      warning: '#F57C00',
+      info: '#1976D2',
+      critical: '#CC5500'
+    },
+    border: {
+      extraBold: '#8899A6',
+      bold: '#5E5E5E',
+      medium: '#4A4A4A',
+      light: '#3A3A3A',
+      extraLight: '#2B2B2B'
+    },
+    text: {
+      dark: '#FFFFFF',
+      medium: '#FFFFFF',
+      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 allChecked = rowconfig.every(function (row) {
-      return row._checked;
-    });
-    setIsAllSelected(allChecked);
-  }, [rowconfig]);
-  return React__default.createElement(TableContainer, null, React__default.createElement(TableContent, null, React__default.createElement(TableHeader, {
-    "$hbcolor": tableheaderconfig.headercolor,
-    "$tcolor": tableheaderconfig.textcolor
-  }, tableheaderconfig.isAllSelectable && React__default.createElement(Container, {
-    "$padding": '0px 16px 0px 0px',
-    "$alignItems": 'end',
-    "$height": '-webkit-fill-available'
-  }, React__default.createElement(StyledCheckBox, {
-    type: 'checkbox',
-    "$checkboxSize": 13.5,
-    checked: isAllSelected,
-    "$checked": isAllSelected,
-    onChange: toggleSelectAll,
-    "$borderSize": 2
-  })), tableheaderconfig.headerdata.map(function (columndata, index, allCols) {
-    var _allCols, _columndata$maintext;
-    var currentGroupTitle = columndata.groupTitle || '';
-    var prevGroupTitle = index > 0 ? allCols[index - 1].groupTitle || '' : '';
-    var isFirstOfGroup = currentGroupTitle && currentGroupTitle !== prevGroupTitle;
-    var isInLegendGroup = !!currentGroupTitle;
-    return React__default.createElement(Container, {
-      key: index,
-      "$flexDirection": 'column',
-      "$width": columndata.width || '100px',
-      "$gap": '8px'
-    }, tableheaderconfig.headerdata.some(function (col) {
-      return !!col.groupTitle;
-    }) && React__default.createElement(Container, {
-      "$alignItems": 'center',
-      "$height": '16px'
-    }, isInLegendGroup ? React__default.createElement(Container, {
-      "$width": '100%'
-    }, isFirstOfGroup ? React__default.createElement(Container, {
-      "$width": '100%',
-      "$alignItems": 'center',
-      "$gap": '4px'
-    }, React__default.createElement(Span, {
-      "$fontSize": '12px',
-      "$fontWeight": '400',
-      "$width": 'max-content',
-      "$lineHeight": 'normal'
-    }, currentGroupTitle), React__default.createElement(LegendDivider, null)) : React__default.createElement(LegendDivider, {
-      "$marginRight": currentGroupTitle !== (((_allCols = allCols[index + 1]) === null || _allCols === void 0 ? void 0 : _allCols.groupTitle) || '') ? '8px' : '0px'
-    })) : null), React__default.createElement(TableCell, {
-      maintext: (_columndata$maintext = columndata.maintext) != null ? _columndata$maintext : '',
-      width: columndata.width,
-      alignment: columndata.alignment
-    }));
-  })), React__default.createElement(Divider, null), loading ? React__default.createElement(Container, {
-    "$flexDirection": 'column',
-    "$alignItems": 'center',
-    "$justifyContent": 'center',
-    "$padding": '24px 24px'
-  }, React__default.createElement(Loader, {
-    title: 'Loading users'
-  })) : rowconfig.length === 0 ? React__default.createElement(Container, {
-    "$flexDirection": 'column',
-    "$alignItems": 'center',
-    "$padding": '24px 24px',
-    "$justifyContent": 'center'
-  }, React__default.createElement(Span, null, noDataText)) : filter ? React__default.createElement(TableData, {
-    "$isLegends": tableheaderconfig.headerdata.some(function (col) {
-      return !!col.groupTitle;
-    })
-  }, Object.entries(roleGroups).map(function (_ref9) {
-    var role = _ref9[0],
-      rows = _ref9[1];
-    return React__default.createElement(React__default.Fragment, {
-      key: role
-    }, React__default.createElement(Container, {
-      "$justifyContent": 'space-between',
-      "$padding": '9px 12px',
-      "$minHeight": '30px',
-      "$alignItems": 'center',
-      "$background": themeColors.vms.accent.light_1,
-      onClick: function onClick() {
-        return toggleRoleVisibility(role);
-      },
-      "$cursor": 'pointer',
-      "$border": "1px solid " + themeColors.vms.border.extraLight
-    }, React__default.createElement(Span, {
-      "$color": themeColors.vms.text.medium,
-      "$fontSize": '12px',
-      "$lineHeight": '100%'
-    }, role, " (", rows.length, ")"), React__default.createElement(Icon, {
-      size: 12,
-      icon: collapsedRoles.has(role) ? 'UpArrow' : 'DownArrow'
-    })), !collapsedRoles.has(role) && rows.map(function (row, index) {
-      return React__default.createElement(Container, {
-        key: index,
-        "$flexDirection": 'column'
-      }, React__default.createElement(TableRow, {
-        rowconfig: [row],
-        tableheaderconfig: tableheaderconfig,
-        selectCallback: tableObject.selectCallback
-      }), rows.length > 1 && index < rows.length - 1 && React__default.createElement(Divider, null));
-    }));
-  })) : React__default.createElement(TableData, {
-    "$isLegends": tableheaderconfig.headerdata.some(function (col) {
-      return !!col.groupTitle;
-    })
-  }, filteredRows.map(function (row, index) {
-    return React__default.createElement(React__default.Fragment, {
-      key: index
-    }, React__default.createElement(TableRow, {
-      rowconfig: [row],
-      tableheaderconfig: tableheaderconfig,
-      selectCallback: tableObject.selectCallback
-    }), filteredRows.length > 1 && index < filteredRows.length - 1 && React__default.createElement(Divider, null));
-  }))));
+  },
+  AiProtectWebsite: {
+    primary: {
+      50: '#F5FAFF',
+      100: '#EFF8FF',
+      200: '#D1E9FF',
+      300: '#B2DDFF',
+      400: '#84CAFF',
+      500: '#53B1FD',
+      600: '#2E90FA',
+      700: '#1570EF',
+      800: '#175CD3',
+      900: '#1849A9',
+      950: '#194185'
+    },
+    secondary: {
+      50: '#F3F7FA',
+      100: '#E8F3F7',
+      200: '#D6E7EF',
+      300: '#BCD7E5',
+      400: '#A1C1D8',
+      500: '#89ABCB',
+      600: '#7393BC',
+      700: '#5F7CA3',
+      800: '#4F6684',
+      900: '#44566B',
+      950: '#28323E'
+    },
+    gray: {
+      50: '#FFFFFF',
+      100: '#FAFAFA',
+      200: '#F5F5F5',
+      300: '#E5E5E5',
+      400: '#D6D6D6',
+      500: '#A3A3A3',
+      600: '#737373',
+      700: '#525252',
+      800: '#424242',
+      900: '#292929',
+      950: '#141414'
+    },
+    error: {
+      50: '#FFF0F0',
+      100: '#FFDDDD',
+      200: '#FFC0C0',
+      300: '#FF9494',
+      400: '#FF5757',
+      500: '#FF2323',
+      600: '#FF0000',
+      700: '#D70000',
+      800: '#B10303',
+      900: '#920A0A',
+      950: '#500000'
+    },
+    success: {
+      50: '#F3FAF3',
+      100: '#E3F5E3',
+      200: '#C8EAC9',
+      300: '#9DD89F',
+      400: '#6ABE6E',
+      500: '#45A249',
+      600: '#388E3C',
+      700: '#2C692F',
+      800: '#275429',
+      900: '#224525',
+      950: '#0E2511'
+    },
+    warning: {
+      50: '#FFFBEC',
+      100: '#FFF7D3',
+      200: '#FFEBA5',
+      300: '#FFDB6D',
+      400: '#FFBF32',
+      500: '#FFA80A',
+      600: '#FA8E00',
+      700: '#CC6B02',
+      800: '#A1520B',
+      900: '#82450C',
+      950: '#462104'
+    },
+    info: {
+      50: '#F0F0FF',
+      100: '#E4E4FF',
+      200: '#CDCEFF',
+      300: '#A7A6FF',
+      400: '#7B73FF',
+      500: '#513BFF',
+      600: '#3C14FF',
+      700: '#2800FA',
+      800: '#2301D6',
+      900: '#1E03AF',
+      950: '#0E0077'
+    },
+    transparent: {
+      white10: 'rgba(255,255,255,0.1)',
+      white20: 'rgba(255,255,255,0.2)',
+      white30: 'rgba(255,255,255,0.3)',
+      white40: 'rgba(229, 229, 229, 0.4)',
+      white50: 'rgba(255, 255, 255, 0.5)',
+      black10: 'rgba(0,0,0,0.1)',
+      black20: 'rgba(0,0,0,0.2)',
+      black30: 'rgba(0,0,0,0.3)'
+    }
+  },
+  SNetLabsWebsite: {
+    primary: {
+      50: '#F5FAFF',
+      100: '#EFF8FF',
+      200: '#D1E9FF',
+      300: '#B2DDFF',
+      400: '#84CAFF',
+      500: '#53B1FD',
+      600: '#2E90FA',
+      700: '#1570EF',
+      800: '#175CD3',
+      900: '#1849A9',
+      950: '#194185'
+    },
+    secondary: {
+      50: '#F3F7FA',
+      100: '#E8F3F7',
+      200: '#D6E7EF',
+      300: '#BCD7E5',
+      400: '#A1C1D8',
+      500: '#89ABCB',
+      600: '#7393BC',
+      700: '#5F7CA3',
+      800: '#4F6684',
+      900: '#44566B',
+      950: '#28323E'
+    },
+    gray: {
+      50: '#FFFFFF',
+      100: '#FAFAFA',
+      200: '#F5F5F5',
+      300: '#E5E5E5',
+      400: '#D6D6D6',
+      500: '#A3A3A3',
+      600: '#737373',
+      700: '#525252',
+      800: '#424242',
+      900: '#292929',
+      950: '#141414'
+    },
+    error: {
+      50: '#FFF0F0',
+      100: '#FFDDDD',
+      200: '#FFC0C0',
+      300: '#FF9494',
+      400: '#FF5757',
+      500: '#FF2323',
+      600: '#FF0000',
+      700: '#D70000',
+      800: '#B10303',
+      900: '#920A0A',
+      950: '#500000'
+    },
+    success: {
+      50: '#F3FAF3',
+      100: '#E3F5E3',
+      200: '#C8EAC9',
+      300: '#9DD89F',
+      400: '#6ABE6E',
+      500: '#45A249',
+      600: '#388E3C',
+      700: '#2C692F',
+      800: '#275429',
+      900: '#224525',
+      950: '#0E2511'
+    },
+    warning: {
+      50: '#FFF4E6',
+      100: '#FEE8CC',
+      200: '#FEDDB3',
+      300: '#FDD199',
+      400: '#FDBA66',
+      500: '#FCA333',
+      600: '#FB8C00',
+      700: '#C96000',
+      800: '#950300',
+      900: '#643700',
+      950: '#4B2A00'
+    },
+    info: {
+      50: '#F0F0FF',
+      100: '#E4E4FF',
+      200: '#CDCEFF',
+      300: '#A7A6FF',
+      400: '#7B73FF',
+      500: '#513BFF',
+      600: '#3C14FF',
+      700: '#2800FA',
+      800: '#2301D6',
+      900: '#1E03AF',
+      950: '#0E0077'
+    },
+    tertiary: {
+      50: '#ECFCFA',
+      100: '#D9F9F6',
+      200: '#C6F6F1',
+      300: '#B3F3EC',
+      400: '#8CECE3',
+      500: '#66E6D9',
+      600: '#40E0D0',
+      700: '#33B3A6',
+      800: '#26867D',
+      900: '#1A5A53',
+      950: '#13433E'
+    },
+    purple: {
+      50: '#F3EEFB',
+      100: '#E7DEF7',
+      200: '#DBCDF3',
+      300: '#CFBCEF',
+      400: '#B89BE6',
+      500: '#A079DE',
+      600: '#8858D6',
+      700: '#6D47AC',
+      800: '#533582',
+      900: '#382459',
+      950: '#2B1B44'
+    },
+    yellow: {
+      50: '#FFFBE7',
+      100: '#FFF7CE',
+      200: '#FFF3B5',
+      300: '#FFEF9D',
+      400: '#FFE66C',
+      500: '#FFDE3B',
+      600: '#FFD60A',
+      700: '#CCAB08',
+      800: '#997006',
+      900: '#665604',
+      950: '#4D3003'
+    },
+    transparent: {
+      white10: '#FFFFFF1A',
+      white20: '#FFFFFF33',
+      white30: '#FFFFFF4D',
+      white100: '#FFF7CE',
+      white200: '#FFF3B5',
+      white300: '#FFEF9D',
+      black100: '#0000001A',
+      black200: '#00000033',
+      black300: '#0000004D'
+    }
+  }
 };
-
-var _templateObject$r, _templateObject2$m, _templateObject3$f, _templateObject4$c, _templateObject5$a, _templateObject6$9;
-var Container$4 = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: ", ";\n  gap: ", ";\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
-  var $overflow = _ref.$overflow;
-  return $overflow || 'visible';
-}, function (_ref2) {
-  var $gap = _ref2.$gap;
-  return $gap;
-}, function (_ref3) {
-  var $border = _ref3.$border;
-  return $border;
-});
-var FirstContainer = styled__default.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: ", ";\n  padding: ", ";\n  justify-content: space-between;\n  align-items: center;\n  height: max-content;\n"])), function (_ref4) {
-  var $bordeBottom = _ref4.$bordeBottom,
-    theme = _ref4.theme;
-  return $bordeBottom != null ? $bordeBottom : "1px solid " + theme.vms.border.light;
-}, function (_ref5) {
-  var $headerPadding = _ref5.$headerPadding;
-  return $headerPadding ? $headerPadding : '0px';
-});
-var TabContainer = styled__default.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref6) {
-  var $disabled = _ref6.$disabled;
-  return $disabled ? 'not-allowed' : 'pointer';
-}, function (_ref7) {
-  var $disabled = _ref7.$disabled;
-  return $disabled ? '0.6' : '1';
-}, function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.vms.text.medium;
-}, function (_ref9) {
-  var $headerHeight = _ref9.$headerHeight;
-  return $headerHeight ? $headerHeight : '34px';
-}, function (_ref10) {
-  var $disabled = _ref10.$disabled;
-  return $disabled ? 'not-allowed' : 'pointer';
-});
-var TabItemContainer = styled__default.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: '';\n    display: ", ";\n    width: 100%;\n    min-height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref11) {
-  var $headerHeight = _ref11.$headerHeight;
-  return $headerHeight ? $headerHeight : '34px';
-}, function (props) {
-  return props.$active ? 'block' : 'none';
-}, function (_ref12) {
-  var theme = _ref12.theme;
-  return theme.vms["default"].primary;
-});
-var DetailsFirstContainer = styled__default.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  white-space: nowrap;\n"])), function (_ref13) {
-  var $active = _ref13.$active,
-    theme = _ref13.theme;
-  return $active ? theme.vms["default"].primary : theme.vms.text.medium;
-});
-var TabItemsWrapper = styled__default.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  // overflow-x: auto;\n  scrollbar-width: thin;\n"])));
-var Tabs = function Tabs(_ref14) {
-  var tabItems = _ref14.tabItems,
-    _ref14$disabled = _ref14.disabled,
-    disabled = _ref14$disabled === void 0 ? false : _ref14$disabled,
-    headerHeight = _ref14.headerHeight,
-    headerPadding = _ref14.headerPadding,
-    activeTab = _ref14.activeTab,
-    border = _ref14.border,
-    _ref14$gap = _ref14.gap,
-    gap = _ref14$gap === void 0 ? '24px' : _ref14$gap,
-    overflow = _ref14.overflow,
-    bordeBottom = _ref14.bordeBottom,
-    tabRightNode = _ref14.tabRightNode;
-  var themeColors = useTheme();
-  return React__default.createElement(Container$4, {
-    "$gap": gap,
-    "$border": border,
-    "$overflow": overflow
-  }, React__default.createElement(FirstContainer, {
-    "$headerPadding": headerPadding,
-    "$bordeBottom": bordeBottom
-  }, React__default.createElement(TabItemsWrapper, null, tabItems.map(function (tab, index) {
-    return React__default.createElement(TabContainer, {
-      key: index,
-      onClick: function onClick() {
-        if (!disabled && tab.onClick) tab.onClick();
-      },
-      "$disabled": disabled,
-      "$headerHeight": headerHeight
-    }, React__default.createElement(TabItemContainer, {
-      "$active": activeTab === tab.title,
-      "$headerHeight": headerHeight
-    }, tab.icon && React__default.createElement(Icon, {
-      color: activeTab === tab.title ? tab.activeColor : themeColors.vms.text.medium,
-      icon: tab.icon,
-      size: tab.iconSize,
-      weight: tab.iconWeight
-    }), React__default.createElement(DetailsFirstContainer, {
-      "$active": activeTab === tab.title
-    }, tab.title)));
-  })), tabRightNode === null || tabRightNode === void 0 ? void 0 : tabRightNode.node), tabItems.map(function (tab, index) {
-    return activeTab === tab.title && React__default.createElement(Container$4, {
-      key: index,
-      "$overflow": overflow
-    }, tab.content);
-  }));
+var getCurrentTheme = function getCurrentTheme() {
+  if (typeof document !== 'undefined') {
+    var isDarkClass = document.documentElement.classList.contains('dark');
+    return isDarkClass ? 'dark' : 'light';
+  }
+  return 'light';
 };
-
-var InternalTabs = function InternalTabs(_ref) {
-  var tabs = _ref.tabs,
-    activeTab = _ref.activeTab,
-    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__default.createElement(Container, {
-    "$background": backgroundColor || themeColors.vms.text.white,
-    "$padding": '3px',
-    "$borderRadius": '4px',
-    "$justifyContent": 'space-between',
-    "$opacity": disabled ? 0.6 : 1
-  }, tabs.map(function (tab) {
-    return React__default.createElement(Container, {
-      key: tab.value,
-      "$borderRadius": '4px',
-      "$width": '126px',
-      "$justifyContent": 'center',
-      "$alignItems": 'center',
-      "$cursor": disabled ? 'not-allowed' : 'pointer',
-      onClick: disabled ? undefined : tab.onClick,
-      "$background": activeTab === tab.value ? activeTabBg || themeColors.vms.accent.softBlue : themeColors.vms["default"].tertiary,
-      "$color": activeTab === tab.value ? textColor || themeColors.vms["default"].primary : themeColors.vms.text.medium
-    }, React__default.createElement(Span, {
-      "$fontSize": '14px',
-      "$color": activeTab === tab.value ? textColor || themeColors.vms["default"].primary : themeColors.vms.text.medium
-    }, tab.title));
-  }));
+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;