labsense-ui-kit 1.2.54 → 1.2.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +2 -2
  2. package/dist/index.js +1726 -1710
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.modern.js +1726 -1710
  5. package/dist/index.modern.js.map +1 -1
  6. package/package.json +1 -1
package/dist/index.modern.js CHANGED
@@ -5220,739 +5220,81 @@ var Span = styled.span(_templateObject2$1 || (_templateObject2$1 = _taggedTempla
5220
5220
  return $whiteSpace;
5221
5221
  });
5222
5222
 
5223
- var light = {
5224
- vms: {
5225
- brand: {
5226
- primary: '#4C9EEB',
5227
- secondary: '#14171A',
5228
- light: '#FFFFFF'
5229
- },
5230
- accent: {
5231
- light_1: '#E1E8ED',
5232
- light_2: '#F5F8FA',
5233
- light_3: '#F0F3F5',
5234
- light_4: '#ECF0F4',
5235
- light_5: '#F0F0F3',
5236
- light_6: '#EFF8FF',
5237
- softBlue: '#D4EEFF',
5238
- extraSoftBlue: '#E4F4FF',
5239
- boldTransparent: '#5E5E5E80',
5240
- transparent: '#5E5E5E4D',
5241
- lightTransparent: '#5E5E5E23'
5242
- },
5243
- "default": {
5244
- primary: '#78B6F0',
5245
- secondary: '#C2C2C2',
5246
- tertiary: 'transparent',
5247
- error: '#F44336',
5248
- success: '#4CAF50',
5249
- warning: '#FF9800',
5250
- info: '#2159F3',
5251
- critical: '#FF7518'
5252
- },
5253
- disabled: {
5254
- primary: '#B9DCF7',
5255
- secondary: '#DADADA',
5256
- error: '#FFEBEE',
5257
- success: '#E8F5E9',
5258
- warning: '#FFF3E0',
5259
- info: '#E3F2FD',
5260
- critical: '#FFF5DA'
5261
- },
5262
- hover: {
5263
- primary: '#4C9EEB',
5264
- secondary: '#A3A3A3',
5265
- tertiary: 'transparent',
5266
- error: '#D32F2F',
5267
- success: '#388E3C',
5268
- warning: '#F57C00',
5269
- info: '#193ED2',
5270
- critical: '#CC5500'
5271
- },
5272
- border: {
5273
- extraBold: '#657786',
5274
- bold: '#BFBFBF',
5275
- medium: '#CBCED0',
5276
- light: '#DCDCDC',
5277
- extraLight: '#E6E3E3'
5278
- },
5279
- text: {
5280
- dark: '#14171A',
5281
- medium: '#657786',
5282
- light: '#98A2AA',
5283
- white: '#FFFFFF',
5284
- success: '#1B5E20',
5285
- error: '#B71C1C',
5286
- info: '#0D30A1',
5287
- warning: '#E65100'
5288
- },
5289
- badge: {
5290
- lavender: '#E8DAFF',
5291
- papayaWhip: '#FFEDD5',
5292
- water: '#C7E3FF',
5293
- paleBlue: '#B0F0E4',
5294
- teaGreen: '#D5F7C2',
5295
- lightBlue: '#ADD8E6'
5223
+ var useTheme = function useTheme() {
5224
+ return useTheme$1();
5225
+ };
5226
+
5227
+ var useNotification = function useNotification() {
5228
+ var themeColors = useTheme();
5229
+ var sendNotification = function sendNotification(_ref) {
5230
+ var type = _ref.type,
5231
+ message = _ref.message,
5232
+ promiseConfig = _ref.promiseConfig,
5233
+ customStyle = _ref.customStyle,
5234
+ _ref$clearCurrent = _ref.clearCurrent,
5235
+ clearCurrent = _ref$clearCurrent === void 0 ? false : _ref$clearCurrent;
5236
+ if (clearCurrent) {
5237
+ toast.dismiss();
5296
5238
  }
5297
- },
5298
- AiProtectWebsite: {
5299
- primary: {
5300
- 50: '#F5FAFF',
5301
- 100: '#EFF8FF',
5302
- 200: '#D1E9FF',
5303
- 300: '#B2DDFF',
5304
- 400: '#84CAFF',
5305
- 500: '#53B1FD',
5306
- 600: '#2E90FA',
5307
- 700: '#1570EF',
5308
- 800: '#175CD3',
5309
- 900: '#1849A9',
5310
- 950: '#194185'
5311
- },
5312
- secondary: {
5313
- 50: '#F3F7FA',
5314
- 100: '#E8F3F7',
5315
- 200: '#D6E7EF',
5316
- 300: '#BCD7E5',
5317
- 400: '#A1C1D8',
5318
- 500: '#89ABCB',
5319
- 600: '#7393BC',
5320
- 700: '#5F7CA3',
5321
- 800: '#4F6684',
5322
- 900: '#44566B',
5323
- 950: '#28323E'
5324
- },
5325
- gray: {
5326
- 50: '#FFFFFF',
5327
- 100: '#FAFAFA',
5328
- 200: '#F5F5F5',
5329
- 300: '#E5E5E5',
5330
- 400: '#D6D6D6',
5331
- 500: '#A3A3A3',
5332
- 600: '#737373',
5333
- 700: '#525252',
5334
- 800: '#424242',
5335
- 900: '#292929',
5336
- 950: '#141414'
5337
- },
5338
- error: {
5339
- 50: '#FFF0F0',
5340
- 100: '#FFDDDD',
5341
- 200: '#FFC0C0',
5342
- 300: '#FF9494',
5343
- 400: '#FF5757',
5344
- 500: '#FF2323',
5345
- 600: '#FF0000',
5346
- 700: '#D70000',
5347
- 800: '#B10303',
5348
- 900: '#920A0A',
5349
- 950: '#500000'
5350
- },
5351
- success: {
5352
- 50: '#F3FAF3',
5353
- 100: '#E3F5E3',
5354
- 200: '#C8EAC9',
5355
- 300: '#9DD89F',
5356
- 400: '#6ABE6E',
5357
- 500: '#45A249',
5358
- 600: '#388E3C',
5359
- 700: '#2C692F',
5360
- 800: '#275429',
5361
- 900: '#224525',
5362
- 950: '#0E2511'
5363
- },
5364
- warning: {
5365
- 50: '#FFFBEC',
5366
- 100: '#FFF7D3',
5367
- 200: '#FFEBA5',
5368
- 300: '#FFDB6D',
5369
- 400: '#FFBF32',
5370
- 500: '#FFA80A',
5371
- 600: '#FA8E00',
5372
- 700: '#CC6B02',
5373
- 800: '#A1520B',
5374
- 900: '#82450C',
5375
- 950: '#462104'
5376
- },
5377
- info: {
5378
- 50: '#F0F0FF',
5379
- 100: '#E4E4FF',
5380
- 200: '#CDCEFF',
5381
- 300: '#A7A6FF',
5382
- 400: '#7B73FF',
5383
- 500: '#513BFF',
5384
- 600: '#3C14FF',
5385
- 700: '#2800FA',
5386
- 800: '#2301D6',
5387
- 900: '#1E03AF',
5388
- 950: '#0E0077'
5389
- },
5390
- transparent: {
5391
- white10: 'rgba(255,255,255,0.1)',
5392
- white20: 'rgba(255,255,255,0.2)',
5393
- white30: 'rgba(255,255,255,0.3)',
5394
- white40: 'rgba(229, 229, 229, 0.4)',
5395
- white50: 'rgba(255, 255, 255, 0.5)',
5396
- black10: 'rgba(0,0,0,0.1)',
5397
- black20: 'rgba(0,0,0,0.2)',
5398
- black30: 'rgba(0,0,0,0.3)'
5399
- }
5400
- },
5401
- SNetLabsWebsite: {
5402
- primary: {
5403
- 50: '#F5FAFF',
5404
- 100: '#EFF8FF',
5405
- 200: '#D1E9FF',
5406
- 300: '#B2DDFF',
5407
- 400: '#84CAFF',
5408
- 500: '#53B1FD',
5409
- 600: '#2E90FA',
5410
- 700: '#1570EF',
5411
- 800: '#175CD3',
5412
- 900: '#1849A9',
5413
- 950: '#194185'
5414
- },
5415
- secondary: {
5416
- 50: '#F3F7FA',
5417
- 100: '#E8F3F7',
5418
- 200: '#D6E7EF',
5419
- 300: '#BCD7E5',
5420
- 400: '#A1C1D8',
5421
- 500: '#89ABCB',
5422
- 600: '#7393BC',
5423
- 700: '#5F7CA3',
5424
- 800: '#4F6684',
5425
- 900: '#44566B',
5426
- 950: '#28323E'
5427
- },
5428
- gray: {
5429
- 50: '#FFFFFF',
5430
- 100: '#FAFAFA',
5431
- 200: '#F5F5F5',
5432
- 300: '#E5E5E5',
5433
- 400: '#D6D6D6',
5434
- 500: '#A3A3A3',
5435
- 600: '#737373',
5436
- 700: '#525252',
5437
- 800: '#424242',
5438
- 900: '#292929',
5439
- 950: '#141414'
5440
- },
5441
- error: {
5442
- 50: '#FFF0F0',
5443
- 100: '#FFDDDD',
5444
- 200: '#FFC0C0',
5445
- 300: '#FF9494',
5446
- 400: '#FF5757',
5447
- 500: '#FF2323',
5448
- 600: '#FF0000',
5449
- 700: '#D70000',
5450
- 800: '#B10303',
5451
- 900: '#920A0A',
5452
- 950: '#500000'
5453
- },
5454
- success: {
5455
- 50: '#F3FAF3',
5456
- 100: '#E3F5E3',
5457
- 200: '#C8EAC9',
5458
- 300: '#9DD89F',
5459
- 400: '#6ABE6E',
5460
- 500: '#45A249',
5461
- 600: '#388E3C',
5462
- 700: '#2C692F',
5463
- 800: '#275429',
5464
- 900: '#224525',
5465
- 950: '#0E2511'
5466
- },
5467
- warning: {
5468
- 50: '#FFF4E6',
5469
- 100: '#FEE8CC',
5470
- 200: '#FEDDB3',
5471
- 300: '#FDD199',
5472
- 400: '#FDBA66',
5473
- 500: '#FCA333',
5474
- 600: '#FB8C00',
5475
- 700: '#C96000',
5476
- 800: '#950300',
5477
- 900: '#643700',
5478
- 950: '#4B2A00'
5479
- },
5480
- info: {
5481
- 50: '#F0F0FF',
5482
- 100: '#E4E4FF',
5483
- 200: '#CDCEFF',
5484
- 300: '#A7A6FF',
5485
- 400: '#7B73FF',
5486
- 500: '#513BFF',
5487
- 600: '#3C14FF',
5488
- 700: '#2800FA',
5489
- 800: '#2301D6',
5490
- 900: '#1E03AF',
5491
- 950: '#0E0077'
5492
- },
5493
- tertiary: {
5494
- 50: '#ECFCFA',
5495
- 100: '#D9F9F6',
5496
- 200: '#C6F6F1',
5497
- 300: '#B3F3EC',
5498
- 400: '#8CECE3',
5499
- 500: '#66E6D9',
5500
- 600: '#40E0D0',
5501
- 700: '#33B3A6',
5502
- 800: '#26867D',
5503
- 900: '#1A5A53',
5504
- 950: '#13433E'
5505
- },
5506
- purple: {
5507
- 50: '#F3EEFB',
5508
- 100: '#E7DEF7',
5509
- 200: '#DBCDF3',
5510
- 300: '#CFBCEF',
5511
- 400: '#B89BE6',
5512
- 500: '#A079DE',
5513
- 600: '#8858D6',
5514
- 700: '#6D47AC',
5515
- 800: '#533582',
5516
- 900: '#382459',
5517
- 950: '#2B1B44'
5518
- },
5519
- yellow: {
5520
- 50: '#FFFBE7',
5521
- 100: '#FFF7CE',
5522
- 200: '#FFF3B5',
5523
- 300: '#FFEF9D',
5524
- 400: '#FFE66C',
5525
- 500: '#FFDE3B',
5526
- 600: '#FFD60A',
5527
- 700: '#CCAB08',
5528
- 800: '#997006',
5529
- 900: '#665604',
5530
- 950: '#4D3003'
5531
- },
5532
- transparent: {
5533
- white10: '#FFFFFF1A',
5534
- white20: '#FFFFFF33',
5535
- white30: '#FFFFFF4D',
5536
- white100: '#FFF7CE',
5537
- white200: '#FFF3B5',
5538
- white300: '#FFEF9D',
5539
- black100: '#0000001A',
5540
- black200: '#00000033',
5541
- black300: '#0000004D'
5542
- }
5543
- }
5544
- };
5545
- var dark = {
5546
- vms: {
5547
- brand: {
5548
- primary: '#4C9EEB',
5549
- secondary: '#E1E8ED',
5550
- light: '#1A1A1A'
5551
- },
5552
- accent: {
5553
- light_1: '#2A2E33',
5554
- light_2: '#1F2327',
5555
- light_3: '#0F1214',
5556
- light_4: '#101417',
5557
- light_5: '#0F0F0C',
5558
- light_6: '#0D3B66',
5559
- softBlue: '#2C3E50',
5560
- extraSoftBlue: '#34495E',
5561
- boldTransparent: '#D3D3D380',
5562
- transparent: '#D3D3D34D',
5563
- lightTransparent: '#D3D3D323'
5564
- },
5565
- "default": {
5566
- primary: '#78B6F0',
5567
- secondary: '#4F4F4F',
5568
- tertiary: 'transparent',
5569
- error: '#EF5350',
5570
- success: '#66BB6A',
5571
- warning: '#FFB74D',
5572
- info: '#42A5F5',
5573
- critical: '#FF7518'
5574
- },
5575
- disabled: {
5576
- primary: '#3B4A58',
5577
- secondary: '#3E3E3E',
5578
- error: '#5B1B1B',
5579
- success: '#1B3C1B',
5580
- warning: '#5A3C1B',
5581
- info: '#1A3C5A',
5582
- critical: '#FFF5DA'
5583
- },
5584
- hover: {
5585
- primary: '#5CA6F0',
5586
- secondary: '#7A7A7A',
5587
- tertiary: 'transparent',
5588
- error: '#D32F2F',
5589
- success: '#388E3C',
5590
- warning: '#F57C00',
5591
- info: '#1976D2',
5592
- critical: '#CC5500'
5593
- },
5594
- border: {
5595
- extraBold: '#8899A6',
5596
- bold: '#5E5E5E',
5597
- medium: '#4A4A4A',
5598
- light: '#3A3A3A',
5599
- extraLight: '#2B2B2B'
5600
- },
5601
- text: {
5602
- dark: '#FFFFFF',
5603
- medium: '#FFFFFF',
5604
- light: '#8899A6',
5605
- white: '#14171A',
5606
- success: '#81C784',
5607
- error: '#E57373',
5608
- info: '#64B5F6',
5609
- warning: '#FFB74D'
5610
- },
5611
- badge: {
5612
- lavender: '#7B5FA1',
5613
- papayaWhip: '#A46A3E',
5614
- water: '#5CA6F0',
5615
- paleBlue: '#4BC9BC',
5616
- teaGreen: '#7FBF7F',
5617
- lightBlue: '#5DADE2'
5618
- }
5619
- },
5620
- AiProtectWebsite: {
5621
- primary: {
5622
- 50: '#F5FAFF',
5623
- 100: '#EFF8FF',
5624
- 200: '#D1E9FF',
5625
- 300: '#B2DDFF',
5626
- 400: '#84CAFF',
5627
- 500: '#53B1FD',
5628
- 600: '#2E90FA',
5629
- 700: '#1570EF',
5630
- 800: '#175CD3',
5631
- 900: '#1849A9',
5632
- 950: '#194185'
5633
- },
5634
- secondary: {
5635
- 50: '#F3F7FA',
5636
- 100: '#E8F3F7',
5637
- 200: '#D6E7EF',
5638
- 300: '#BCD7E5',
5639
- 400: '#A1C1D8',
5640
- 500: '#89ABCB',
5641
- 600: '#7393BC',
5642
- 700: '#5F7CA3',
5643
- 800: '#4F6684',
5644
- 900: '#44566B',
5645
- 950: '#28323E'
5646
- },
5647
- gray: {
5648
- 50: '#FFFFFF',
5649
- 100: '#FAFAFA',
5650
- 200: '#F5F5F5',
5651
- 300: '#E5E5E5',
5652
- 400: '#D6D6D6',
5653
- 500: '#A3A3A3',
5654
- 600: '#737373',
5655
- 700: '#525252',
5656
- 800: '#424242',
5657
- 900: '#292929',
5658
- 950: '#141414'
5659
- },
5660
- error: {
5661
- 50: '#FFF0F0',
5662
- 100: '#FFDDDD',
5663
- 200: '#FFC0C0',
5664
- 300: '#FF9494',
5665
- 400: '#FF5757',
5666
- 500: '#FF2323',
5667
- 600: '#FF0000',
5668
- 700: '#D70000',
5669
- 800: '#B10303',
5670
- 900: '#920A0A',
5671
- 950: '#500000'
5672
- },
5673
- success: {
5674
- 50: '#F3FAF3',
5675
- 100: '#E3F5E3',
5676
- 200: '#C8EAC9',
5677
- 300: '#9DD89F',
5678
- 400: '#6ABE6E',
5679
- 500: '#45A249',
5680
- 600: '#388E3C',
5681
- 700: '#2C692F',
5682
- 800: '#275429',
5683
- 900: '#224525',
5684
- 950: '#0E2511'
5685
- },
5686
- warning: {
5687
- 50: '#FFFBEC',
5688
- 100: '#FFF7D3',
5689
- 200: '#FFEBA5',
5690
- 300: '#FFDB6D',
5691
- 400: '#FFBF32',
5692
- 500: '#FFA80A',
5693
- 600: '#FA8E00',
5694
- 700: '#CC6B02',
5695
- 800: '#A1520B',
5696
- 900: '#82450C',
5697
- 950: '#462104'
5698
- },
5699
- info: {
5700
- 50: '#F0F0FF',
5701
- 100: '#E4E4FF',
5702
- 200: '#CDCEFF',
5703
- 300: '#A7A6FF',
5704
- 400: '#7B73FF',
5705
- 500: '#513BFF',
5706
- 600: '#3C14FF',
5707
- 700: '#2800FA',
5708
- 800: '#2301D6',
5709
- 900: '#1E03AF',
5710
- 950: '#0E0077'
5711
- },
5712
- transparent: {
5713
- white10: 'rgba(255,255,255,0.1)',
5714
- white20: 'rgba(255,255,255,0.2)',
5715
- white30: 'rgba(255,255,255,0.3)',
5716
- white40: 'rgba(229, 229, 229, 0.4)',
5717
- white50: 'rgba(255, 255, 255, 0.5)',
5718
- black10: 'rgba(0,0,0,0.1)',
5719
- black20: 'rgba(0,0,0,0.2)',
5720
- black30: 'rgba(0,0,0,0.3)'
5721
- }
5722
- },
5723
- SNetLabsWebsite: {
5724
- primary: {
5725
- 50: '#F5FAFF',
5726
- 100: '#EFF8FF',
5727
- 200: '#D1E9FF',
5728
- 300: '#B2DDFF',
5729
- 400: '#84CAFF',
5730
- 500: '#53B1FD',
5731
- 600: '#2E90FA',
5732
- 700: '#1570EF',
5733
- 800: '#175CD3',
5734
- 900: '#1849A9',
5735
- 950: '#194185'
5736
- },
5737
- secondary: {
5738
- 50: '#F3F7FA',
5739
- 100: '#E8F3F7',
5740
- 200: '#D6E7EF',
5741
- 300: '#BCD7E5',
5742
- 400: '#A1C1D8',
5743
- 500: '#89ABCB',
5744
- 600: '#7393BC',
5745
- 700: '#5F7CA3',
5746
- 800: '#4F6684',
5747
- 900: '#44566B',
5748
- 950: '#28323E'
5749
- },
5750
- gray: {
5751
- 50: '#FFFFFF',
5752
- 100: '#FAFAFA',
5753
- 200: '#F5F5F5',
5754
- 300: '#E5E5E5',
5755
- 400: '#D6D6D6',
5756
- 500: '#A3A3A3',
5757
- 600: '#737373',
5758
- 700: '#525252',
5759
- 800: '#424242',
5760
- 900: '#292929',
5761
- 950: '#141414'
5762
- },
5763
- error: {
5764
- 50: '#FFF0F0',
5765
- 100: '#FFDDDD',
5766
- 200: '#FFC0C0',
5767
- 300: '#FF9494',
5768
- 400: '#FF5757',
5769
- 500: '#FF2323',
5770
- 600: '#FF0000',
5771
- 700: '#D70000',
5772
- 800: '#B10303',
5773
- 900: '#920A0A',
5774
- 950: '#500000'
5775
- },
5776
- success: {
5777
- 50: '#F3FAF3',
5778
- 100: '#E3F5E3',
5779
- 200: '#C8EAC9',
5780
- 300: '#9DD89F',
5781
- 400: '#6ABE6E',
5782
- 500: '#45A249',
5783
- 600: '#388E3C',
5784
- 700: '#2C692F',
5785
- 800: '#275429',
5786
- 900: '#224525',
5787
- 950: '#0E2511'
5788
- },
5789
- warning: {
5790
- 50: '#FFF4E6',
5791
- 100: '#FEE8CC',
5792
- 200: '#FEDDB3',
5793
- 300: '#FDD199',
5794
- 400: '#FDBA66',
5795
- 500: '#FCA333',
5796
- 600: '#FB8C00',
5797
- 700: '#C96000',
5798
- 800: '#950300',
5799
- 900: '#643700',
5800
- 950: '#4B2A00'
5801
- },
5802
- info: {
5803
- 50: '#F0F0FF',
5804
- 100: '#E4E4FF',
5805
- 200: '#CDCEFF',
5806
- 300: '#A7A6FF',
5807
- 400: '#7B73FF',
5808
- 500: '#513BFF',
5809
- 600: '#3C14FF',
5810
- 700: '#2800FA',
5811
- 800: '#2301D6',
5812
- 900: '#1E03AF',
5813
- 950: '#0E0077'
5814
- },
5815
- tertiary: {
5816
- 50: '#ECFCFA',
5817
- 100: '#D9F9F6',
5818
- 200: '#C6F6F1',
5819
- 300: '#B3F3EC',
5820
- 400: '#8CECE3',
5821
- 500: '#66E6D9',
5822
- 600: '#40E0D0',
5823
- 700: '#33B3A6',
5824
- 800: '#26867D',
5825
- 900: '#1A5A53',
5826
- 950: '#13433E'
5827
- },
5828
- purple: {
5829
- 50: '#F3EEFB',
5830
- 100: '#E7DEF7',
5831
- 200: '#DBCDF3',
5832
- 300: '#CFBCEF',
5833
- 400: '#B89BE6',
5834
- 500: '#A079DE',
5835
- 600: '#8858D6',
5836
- 700: '#6D47AC',
5837
- 800: '#533582',
5838
- 900: '#382459',
5839
- 950: '#2B1B44'
5840
- },
5841
- yellow: {
5842
- 50: '#FFFBE7',
5843
- 100: '#FFF7CE',
5844
- 200: '#FFF3B5',
5845
- 300: '#FFEF9D',
5846
- 400: '#FFE66C',
5847
- 500: '#FFDE3B',
5848
- 600: '#FFD60A',
5849
- 700: '#CCAB08',
5850
- 800: '#997006',
5851
- 900: '#665604',
5852
- 950: '#4D3003'
5853
- },
5854
- transparent: {
5855
- white10: '#FFFFFF1A',
5856
- white20: '#FFFFFF33',
5857
- white30: '#FFFFFF4D',
5858
- white100: '#FFF7CE',
5859
- white200: '#FFF3B5',
5860
- white300: '#FFEF9D',
5861
- black100: '#0000001A',
5862
- black200: '#00000033',
5863
- black300: '#0000004D'
5864
- }
5865
- }
5866
- };
5867
- var getCurrentTheme = function getCurrentTheme() {
5868
- if (typeof document !== 'undefined') {
5869
- var isDarkClass = document.documentElement.classList.contains('dark');
5870
- return isDarkClass ? 'dark' : 'light';
5871
- }
5872
- return 'light';
5873
- };
5874
- var colorVariables = new Proxy({}, {
5875
- get: function get(_, prop) {
5876
- var currentThemeName = getCurrentTheme();
5877
- var currentTheme = themes[currentThemeName];
5878
- return currentTheme[prop];
5879
- }
5880
- });
5881
- var themes = {
5882
- light: light,
5883
- dark: dark
5884
- };
5885
-
5886
- var useNotification = function useNotification() {
5887
- var sendNotification = function sendNotification(_ref) {
5888
- var type = _ref.type,
5889
- message = _ref.message,
5890
- promiseConfig = _ref.promiseConfig,
5891
- customStyle = _ref.customStyle,
5892
- _ref$clearCurrent = _ref.clearCurrent,
5893
- clearCurrent = _ref$clearCurrent === void 0 ? false : _ref$clearCurrent;
5894
- if (clearCurrent) {
5895
- toast.dismiss();
5896
- }
5897
- switch (type) {
5898
- case 'success':
5899
- toast.success(message);
5900
- break;
5901
- case 'error':
5902
- toast.error(message);
5903
- break;
5904
- case 'info':
5905
- toast(message, {
5906
- icon: React.createElement(Container, {
5907
- "$minWidth": '20px',
5908
- "$height": '20px',
5909
- "$width": '20px',
5910
- "$alignItems": 'center',
5911
- "$justifyContent": 'center',
5912
- "$borderRadius": '100%',
5913
- "$background": colorVariables.vms.disabled.info
5914
- }, React.createElement(Icon, {
5915
- icon: 'InformationFilled',
5916
- weight: '0px',
5917
- size: 20,
5918
- color: colorVariables.vms["default"].info
5919
- })),
5920
- style: {
5921
- borderRadius: '8px',
5922
- background: colorVariables.vms.text.white,
5923
- color: '#363636',
5924
- maxWidth: '648px'
5925
- }
5926
- });
5927
- break;
5928
- case 'promise':
5929
- if (promiseConfig) {
5930
- toast.promise(promiseConfig.promise, {
5931
- loading: promiseConfig.loading,
5932
- success: promiseConfig.success,
5933
- error: promiseConfig.error
5934
- }, {
5935
- style: {
5936
- minWidth: '300px'
5937
- }
5938
- });
5939
- }
5940
- break;
5941
- case 'custom':
5942
- toast(message, {
5943
- icon: React.createElement(Icon, {
5944
- icon: (customStyle === null || customStyle === void 0 ? void 0 : customStyle.icon) || 'Add_1',
5945
- size: customStyle === null || customStyle === void 0 ? void 0 : customStyle.iconSize,
5946
- weight: customStyle === null || customStyle === void 0 ? void 0 : customStyle.iconWeight
5947
- }),
5948
- style: {
5949
- background: customStyle === null || customStyle === void 0 ? void 0 : customStyle.background,
5950
- color: customStyle === null || customStyle === void 0 ? void 0 : customStyle.color
5951
- }
5952
- });
5953
- break;
5954
- default:
5955
- console.error('Invalid notification type or missing configuration!');
5239
+ switch (type) {
5240
+ case 'success':
5241
+ toast.success(message);
5242
+ break;
5243
+ case 'error':
5244
+ toast.error(message);
5245
+ break;
5246
+ case 'info':
5247
+ toast(message, {
5248
+ icon: React.createElement(Container, {
5249
+ "$minWidth": '20px',
5250
+ "$height": '20px',
5251
+ "$width": '20px',
5252
+ "$alignItems": 'center',
5253
+ "$justifyContent": 'center',
5254
+ "$borderRadius": '100%',
5255
+ "$background": themeColors.vms.disabled.info
5256
+ }, React.createElement(Icon, {
5257
+ icon: 'InformationFilled',
5258
+ weight: '0px',
5259
+ size: 20,
5260
+ color: themeColors.vms["default"].info
5261
+ })),
5262
+ style: {
5263
+ borderRadius: '8px',
5264
+ background: themeColors.vms.text.white,
5265
+ color: themeColors.vms.text.dark,
5266
+ maxWidth: '648px'
5267
+ }
5268
+ });
5269
+ break;
5270
+ case 'promise':
5271
+ if (promiseConfig) {
5272
+ toast.promise(promiseConfig.promise, {
5273
+ loading: promiseConfig.loading,
5274
+ success: promiseConfig.success,
5275
+ error: promiseConfig.error
5276
+ }, {
5277
+ style: {
5278
+ minWidth: '300px'
5279
+ }
5280
+ });
5281
+ }
5282
+ break;
5283
+ case 'custom':
5284
+ toast(message, {
5285
+ icon: React.createElement(Icon, {
5286
+ icon: (customStyle === null || customStyle === void 0 ? void 0 : customStyle.icon) || 'Add_1',
5287
+ size: customStyle === null || customStyle === void 0 ? void 0 : customStyle.iconSize,
5288
+ weight: customStyle === null || customStyle === void 0 ? void 0 : customStyle.iconWeight
5289
+ }),
5290
+ style: {
5291
+ background: customStyle === null || customStyle === void 0 ? void 0 : customStyle.background,
5292
+ color: customStyle === null || customStyle === void 0 ? void 0 : customStyle.color
5293
+ }
5294
+ });
5295
+ break;
5296
+ default:
5297
+ console.error('Invalid notification type or missing configuration!');
5956
5298
  }
5957
5299
  };
5958
5300
  return {
@@ -5960,10 +5302,6 @@ var useNotification = function useNotification() {
5960
5302
  };
5961
5303
  };
5962
5304
 
5963
- var useTheme = function useTheme() {
5964
- return useTheme$1();
5965
- };
5966
-
5967
5305
  var _templateObject$2, _templateObject2$2, _templateObject3;
5968
5306
  var wrapperCss = css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n svg {\n overflow: visible;\n vector-effect: non-scaling-stroke;\n line,\n path,\n circle,\n ellipse,\n foreignObject,\n polygon,\n polyline,\n rect,\n text,\n textPath,\n tspan {\n vector-effect: non-scaling-stroke;\n }\n }\n"])));
5969
5307
  var IconWrapper = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n width: max-content;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: ", ";\n ", ";\n"])), function (_ref) {
@@ -9134,1019 +8472,1697 @@ var Loader = function Loader(_ref4) {
9134
8472
  titleSize = _ref4.titleSize;
9135
8473
  var themeColors = useTheme();
9136
8474
  return React.createElement(Container, {
9137
- "$alignItems": 'center',
9138
- "$justifyContent": 'center',
8475
+ "$alignItems": 'center',
8476
+ "$justifyContent": 'center',
8477
+ "$width": '100%',
8478
+ "$height": '100%',
8479
+ "$flexDirection": 'column',
8480
+ "$gap": '12px'
8481
+ }, React.createElement(Container, null, React.createElement(Spinner$1, {
8482
+ "$size": size,
8483
+ "$color": color || themeColors.vms["default"].primary
8484
+ })), title && React.createElement(Container, {
8485
+ "$flexDirection": 'column',
8486
+ "$gap": '12px'
8487
+ }, React.createElement(Container, {
8488
+ "$alignItems": 'center',
8489
+ "$justifyContent": 'center'
8490
+ }, React.createElement(Span, {
8491
+ "$fontWeight": '400',
8492
+ "$color": titleColor,
8493
+ "$fontSize": titleSize
8494
+ }, title))));
8495
+ };
8496
+
8497
+ var _templateObject$l;
8498
+ var PageInput = styled.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) {
8499
+ var theme = _ref.theme;
8500
+ return theme.vms.accent.light_2;
8501
+ }, function (_ref2) {
8502
+ var theme = _ref2.theme;
8503
+ return "1px solid " + theme.vms.border.light;
8504
+ }, function (_ref3) {
8505
+ var theme = _ref3.theme;
8506
+ return theme.vms.text.dark;
8507
+ });
8508
+ var Pagination = function Pagination(_ref4) {
8509
+ var totalPages = _ref4.totalPages,
8510
+ currentPage = _ref4.currentPage,
8511
+ itemsPerPage = _ref4.itemsPerPage,
8512
+ onPageChange = _ref4.onPageChange,
8513
+ onItemsPerPageChange = _ref4.onItemsPerPageChange;
8514
+ var themeColors = useTheme();
8515
+ var _useTranslation = useTranslation(),
8516
+ t = _useTranslation.t;
8517
+ var _useNotification = useNotification(),
8518
+ sendNotification = _useNotification.sendNotification;
8519
+ var _useState = useState(currentPage.toString()),
8520
+ inputPage = _useState[0],
8521
+ setInputPage = _useState[1];
8522
+ React.useEffect(function () {
8523
+ setInputPage(currentPage.toString());
8524
+ }, [currentPage]);
8525
+ var handlePageChange = function handlePageChange(page) {
8526
+ if (page < 1 || page > totalPages) return;
8527
+ onPageChange(page);
8528
+ };
8529
+ var handleInputChange = function handleInputChange(e) {
8530
+ var value = e.target.value;
8531
+ if (/^(?:[1-9][0-9]*|0)?$/.test(value)) {
8532
+ setInputPage(value);
8533
+ }
8534
+ };
8535
+ var handleGoClick = function handleGoClick() {
8536
+ var page = Math.floor(Number(inputPage));
8537
+ if (!isNaN(page) && page >= 1 && page <= totalPages) {
8538
+ handlePageChange(page);
8539
+ } else {
8540
+ setInputPage(currentPage.toString());
8541
+ sendNotification({
8542
+ type: 'error',
8543
+ message: 'Invalid page number'
8544
+ });
8545
+ }
8546
+ };
8547
+ var containerRef = useRef(null);
8548
+ return React.createElement(Container, {
8549
+ "$gap": '40px',
8550
+ "$height": '100%',
8551
+ "$alignItems": 'flex-start',
8552
+ ref: containerRef
8553
+ }, React.createElement(Container, {
8554
+ "$gap": '16px',
8555
+ "$alignItems": 'center'
8556
+ }, React.createElement(Span, {
8557
+ "$fontWeight": '400',
8558
+ "$fontSize": '14px',
8559
+ "$lineHeight": '100%'
8560
+ }, t('Page')), React.createElement(Container, {
8561
+ "$gap": '12px',
8562
+ "$alignItems": 'center'
8563
+ }, React.createElement(Container, {
8564
+ "$gap": '4px',
8565
+ "$alignItems": 'center'
8566
+ }, React.createElement(PageInput, {
8567
+ type: 'number',
8568
+ value: inputPage,
8569
+ onChange: handleInputChange,
8570
+ min: 1,
8571
+ max: totalPages,
8572
+ onKeyDown: function onKeyDown(e) {
8573
+ if (e.key === 'Enter') handleGoClick();
8574
+ }
8575
+ }), React.createElement(Span, {
8576
+ "$fontWeight": '400',
8577
+ "$fontSize": '14px'
8578
+ }, "/ ", totalPages)), React.createElement(ButtonComponent, {
8579
+ variant: 'primary',
8580
+ disabled: inputPage.trim() === '' || isNaN(Number(inputPage)),
8581
+ onClick: handleGoClick,
8582
+ text: t('Go'),
8583
+ size: 'small'
8584
+ })), React.createElement(Container, {
8585
+ "$gap": '12px'
8586
+ }, React.createElement(ButtonComponent, {
8587
+ onClick: function onClick() {
8588
+ return handlePageChange(currentPage - 1);
8589
+ },
8590
+ disabled: currentPage === 1,
8591
+ icon: 'LeftArrow',
8592
+ iconSize: 12,
8593
+ size: 'custom',
8594
+ padding: '7px',
8595
+ variant: 'secondary',
8596
+ borderRadius: '4px',
8597
+ color: themeColors.vms.text.white
8598
+ }), React.createElement(ButtonComponent, {
8599
+ onClick: function onClick() {
8600
+ return handlePageChange(currentPage + 1);
8601
+ },
8602
+ disabled: currentPage === totalPages,
8603
+ icon: 'RightArrow',
8604
+ iconSize: 12,
8605
+ size: 'custom',
8606
+ padding: '7px',
8607
+ variant: 'secondary',
8608
+ borderRadius: '4px',
8609
+ color: themeColors.vms.text.white
8610
+ }))), React.createElement(Container, {
8611
+ "$gap": '16px',
8612
+ "$justifyContent": 'center',
8613
+ "$alignItems": 'center'
8614
+ }, React.createElement(Span, {
8615
+ "$fontWeight": '400',
8616
+ "$fontSize": '14px'
8617
+ }, t('Item_Per_Page')), React.createElement(Container, null, React.createElement(SelectOption, {
8618
+ width: '54px',
8619
+ size: 'small',
8620
+ value: itemsPerPage.toString(),
8621
+ onChange: function onChange(e) {
8622
+ var val = parseInt(e.target.value, 10);
8623
+ if (!isNaN(val)) {
8624
+ onItemsPerPageChange(val);
8625
+ }
8626
+ },
8627
+ options: [{
8628
+ label: '5',
8629
+ value: '5'
8630
+ }, {
8631
+ label: '10',
8632
+ value: '10'
8633
+ }, {
8634
+ label: '20',
8635
+ value: '20'
8636
+ }],
8637
+ positionRef: containerRef,
8638
+ allowDeselect: false
8639
+ }))));
8640
+ };
8641
+
8642
+ var strokeWidth = 6.5;
8643
+ var viewBoxSize = 44;
8644
+ var CircularProgress = function CircularProgress(_ref) {
8645
+ var threshold = _ref.threshold,
8646
+ totalCapacity = _ref.totalCapacity,
8647
+ usedCapacity = _ref.usedCapacity,
8648
+ progressColor = _ref.progressColor,
8649
+ _ref$thresholdColor = _ref.thresholdColor,
8650
+ thresholdColor = _ref$thresholdColor === void 0 ? 'rgba(255, 0, 0, 0.2)' : _ref$thresholdColor,
8651
+ trackColor = _ref.trackColor;
8652
+ var themeColors = useTheme();
8653
+ var radius = (viewBoxSize - strokeWidth) / 2;
8654
+ var circumference = 2 * Math.PI * radius;
8655
+ var parseVolumeData = function parseVolumeData(threshold, totalCapacity, usedCapacity) {
8656
+ var thresholdValue = threshold != null ? threshold : 100;
8657
+ var progress = usedCapacity / totalCapacity * 100;
8658
+ return {
8659
+ progress: Math.min(Math.max(Math.round(progress), 0), 100),
8660
+ processedThreshold: Math.min(Math.max(thresholdValue, 0), 100)
8661
+ };
8662
+ };
8663
+ var _parseVolumeData = parseVolumeData(threshold, totalCapacity, usedCapacity),
8664
+ progress = _parseVolumeData.progress,
8665
+ processedThreshold = _parseVolumeData.processedThreshold;
8666
+ var progressOffset = circumference * (1 - progress / 100);
8667
+ var thresholdOffset = circumference * (1 - processedThreshold / 100);
8668
+ return React.createElement(Container, {
8669
+ "$width": '100%',
8670
+ "$height": '100%',
8671
+ "$position": 'relative',
8672
+ "$alignItems": 'center',
8673
+ "$justifyContent": 'center'
8674
+ }, React.createElement("svg", {
8675
+ width: '100%',
8676
+ height: '100%',
8677
+ viewBox: "0 0 " + viewBoxSize + " " + viewBoxSize
8678
+ }, React.createElement("circle", {
8679
+ cx: viewBoxSize / 2,
8680
+ cy: viewBoxSize / 2,
8681
+ r: radius,
8682
+ stroke: trackColor || themeColors.vms.accent.softBlue,
8683
+ strokeWidth: strokeWidth,
8684
+ fill: 'none'
8685
+ }), processedThreshold > progress && React.createElement("circle", {
8686
+ cx: viewBoxSize / 2,
8687
+ cy: viewBoxSize / 2,
8688
+ r: radius,
8689
+ stroke: thresholdColor,
8690
+ strokeWidth: strokeWidth,
8691
+ fill: 'none',
8692
+ strokeDasharray: circumference,
8693
+ strokeDashoffset: thresholdOffset,
8694
+ strokeLinecap: 'round',
8695
+ transform: "rotate(-90 " + viewBoxSize / 2 + " " + viewBoxSize / 2 + ")"
8696
+ }), React.createElement("circle", {
8697
+ cx: viewBoxSize / 2,
8698
+ cy: viewBoxSize / 2,
8699
+ r: radius,
8700
+ stroke: progressColor || themeColors.vms["default"].primary,
8701
+ strokeWidth: strokeWidth,
8702
+ fill: 'none',
8703
+ strokeDasharray: circumference,
8704
+ strokeDashoffset: progressOffset,
8705
+ strokeLinecap: 'round',
8706
+ transform: "rotate(-90 " + viewBoxSize / 2 + " " + viewBoxSize / 2 + ")"
8707
+ })), React.createElement(Container, {
8708
+ "$position": 'absolute',
8709
+ "$fontSize": '12px',
8710
+ "$fontWeight": '500',
8711
+ "$color": progressColor || themeColors.vms["default"].primary
8712
+ }, progress + "%"));
8713
+ };
8714
+
8715
+ var _templateObject$m, _templateObject2$i;
8716
+ var shimmer = keyframes(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n 0% { background-position: 200% 0; }\n 100% { background-position: -100% 0; }\n"])));
8717
+ var AnimatedProgress = styled.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) {
8718
+ var width = _ref.width;
8719
+ return width;
8720
+ }, function (_ref2) {
8721
+ var color = _ref2.color;
8722
+ return color;
8723
+ }, shimmer);
8724
+ var ProgressBar = function ProgressBar(_ref3) {
8725
+ var threshold = _ref3.threshold,
8726
+ totalCapacity = _ref3.totalCapacity,
8727
+ usedCapacity = _ref3.usedCapacity,
8728
+ progressColor = _ref3.progressColor,
8729
+ thresholdColor = _ref3.thresholdColor,
8730
+ trackColor = _ref3.trackColor,
8731
+ animate = _ref3.animate;
8732
+ var themeColors = useTheme$1();
8733
+ var parseVolumeData = function parseVolumeData(threshold, totalCapacity, usedCapacity) {
8734
+ var totalCapacityGB = totalCapacity;
8735
+ var usedCapacityGB = usedCapacity;
8736
+ var thresholdPercent = threshold != null ? threshold : 100;
8737
+ var progress = usedCapacityGB / totalCapacityGB * 100;
8738
+ return {
8739
+ progress: Math.round(progress),
8740
+ Processed_threshold: thresholdPercent
8741
+ };
8742
+ };
8743
+ var _parseVolumeData = parseVolumeData(threshold, totalCapacity, usedCapacity),
8744
+ progress = _parseVolumeData.progress,
8745
+ Processed_threshold = _parseVolumeData.Processed_threshold;
8746
+ var thresholdWidth = Math.max((Processed_threshold != null ? Processed_threshold : 100) - progress, 0);
8747
+ return React.createElement(Container, {
9139
8748
  "$width": '100%',
9140
8749
  "$height": '100%',
9141
- "$flexDirection": 'column',
9142
- "$gap": '12px'
9143
- }, React.createElement(Container, null, React.createElement(Spinner$1, {
9144
- "$size": size,
9145
- "$color": color || themeColors.vms["default"].primary
9146
- })), title && React.createElement(Container, {
9147
- "$flexDirection": 'column',
9148
- "$gap": '12px'
9149
- }, React.createElement(Container, {
9150
- "$alignItems": 'center',
9151
- "$justifyContent": 'center'
9152
- }, React.createElement(Span, {
9153
- "$fontWeight": '400',
9154
- "$color": titleColor,
9155
- "$fontSize": titleSize
9156
- }, title))));
8750
+ "$borderRadius": '100px',
8751
+ "$background": trackColor != null ? trackColor : themeColors.vms.accent.softBlue,
8752
+ "$overflow": 'hidden',
8753
+ "$position": 'relative'
8754
+ }, animate ? React.createElement(AnimatedProgress, {
8755
+ width: progress + "%",
8756
+ color: progressColor != null ? progressColor : themeColors.vms["default"].primary
8757
+ }) : React.createElement(Container, {
8758
+ "$width": progress + "%",
8759
+ "$height": '100%',
8760
+ "$background": progressColor != null ? progressColor : themeColors.vms["default"].primary,
8761
+ "$transition": 'width 0.5s ease-in-out'
8762
+ }), Processed_threshold !== undefined && Processed_threshold > progress && React.createElement(Container, {
8763
+ "$width": thresholdWidth + "%",
8764
+ "$height": '100%',
8765
+ "$background": thresholdColor != null ? thresholdColor : 'rgba(255, 0, 0, 0.2)'
8766
+ }));
9157
8767
  };
9158
8768
 
9159
- var _templateObject$l;
9160
- var PageInput = styled.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) {
9161
- var theme = _ref.theme;
9162
- return theme.vms.accent.light_2;
8769
+ var _templateObject$n, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$8, _templateObject6$7;
8770
+ var SidebarContainer = styled.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) {
8771
+ var $isExpanded = _ref.$isExpanded;
8772
+ return $isExpanded ? 'max-content' : '68px';
9163
8773
  }, function (_ref2) {
9164
- var theme = _ref2.theme;
9165
- return "1px solid " + theme.vms.border.light;
8774
+ var $isExpanded = _ref2.$isExpanded;
8775
+ return $isExpanded ? '400px' : '68px';
9166
8776
  }, function (_ref3) {
9167
- var theme = _ref3.theme;
9168
- return theme.vms.text.dark;
8777
+ var $background = _ref3.$background,
8778
+ theme = _ref3.theme;
8779
+ return $background || theme.vms.accent.softBlue;
9169
8780
  });
9170
- var Pagination = function Pagination(_ref4) {
9171
- var totalPages = _ref4.totalPages,
9172
- currentPage = _ref4.currentPage,
9173
- itemsPerPage = _ref4.itemsPerPage,
9174
- onPageChange = _ref4.onPageChange,
9175
- onItemsPerPageChange = _ref4.onItemsPerPageChange;
9176
- var themeColors = useTheme();
9177
- var _useTranslation = useTranslation(),
9178
- t = _useTranslation.t;
9179
- var _useNotification = useNotification(),
9180
- sendNotification = _useNotification.sendNotification;
9181
- var _useState = useState(currentPage.toString()),
9182
- inputPage = _useState[0],
9183
- setInputPage = _useState[1];
9184
- React.useEffect(function () {
9185
- setInputPage(currentPage.toString());
9186
- }, [currentPage]);
9187
- var handlePageChange = function handlePageChange(page) {
9188
- if (page < 1 || page > totalPages) return;
9189
- onPageChange(page);
8781
+ var SidebarLink = styled(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) {
8782
+ var $padding = _ref4.$padding;
8783
+ return $padding;
8784
+ }, function (_ref5) {
8785
+ var theme = _ref5.theme;
8786
+ return theme.vms.text.medium;
8787
+ }, function (_ref6) {
8788
+ var theme = _ref6.theme;
8789
+ return theme.vms.text.white;
8790
+ }, function (_ref7) {
8791
+ var theme = _ref7.theme;
8792
+ return theme.vms["default"].primary;
8793
+ }, function (_ref8) {
8794
+ var theme = _ref8.theme;
8795
+ return theme.vms.text.white;
8796
+ }, function (_ref9) {
8797
+ var theme = _ref9.theme;
8798
+ return theme.vms["default"].primary;
8799
+ });
8800
+ var IconWrapper$2 = styled.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) {
8801
+ var $selected = _ref10.$selected,
8802
+ theme = _ref10.theme;
8803
+ return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
8804
+ });
8805
+ var Logo = styled.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"])));
8806
+ var TextContainer = styled.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) {
8807
+ var $padding = _ref11.$padding;
8808
+ return $padding;
8809
+ }, function (_ref12) {
8810
+ var $fontSize = _ref12.$fontSize;
8811
+ return $fontSize || '20px';
8812
+ }, function (_ref13) {
8813
+ var $fontWeight = _ref13.$fontWeight;
8814
+ return $fontWeight || '500';
8815
+ }, function (_ref14) {
8816
+ var $isExpanded = _ref14.$isExpanded;
8817
+ return $isExpanded ? 1 : 0;
8818
+ }, function (_ref15) {
8819
+ var $isExpanded = _ref15.$isExpanded;
8820
+ return $isExpanded ? 'visible' : 'hidden';
8821
+ }, function (_ref16) {
8822
+ var $isExpanded = _ref16.$isExpanded;
8823
+ return $isExpanded ? 'translateX(0)' : 'translateX(-10px)';
8824
+ });
8825
+ var NotificationBadge = styled.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) {
8826
+ var $position = _ref17.$position;
8827
+ return $position || 'absolute';
8828
+ });
8829
+ var Sidebar = function Sidebar(_ref18) {
8830
+ var logo = _ref18.logo,
8831
+ content = _ref18.content,
8832
+ background = _ref18.background,
8833
+ ProfileContent = _ref18.ProfileContent,
8834
+ _ref18$isExpanded = _ref18.isExpanded,
8835
+ isExpanded = _ref18$isExpanded === void 0 ? false : _ref18$isExpanded,
8836
+ setIsExpanded = _ref18.setIsExpanded;
8837
+ var location = useLocation();
8838
+ var _useState = useState({}),
8839
+ openMenus = _useState[0],
8840
+ setOpenMenus = _useState[1];
8841
+ useEffect(function () {
8842
+ if (!isExpanded) setOpenMenus({});
8843
+ }, [isExpanded]);
8844
+ var toggleMenu = function toggleMenu(id) {
8845
+ setOpenMenus(function (prev) {
8846
+ var _extends2;
8847
+ return _extends({}, prev, (_extends2 = {}, _extends2[id] = !prev[id], _extends2));
8848
+ });
9190
8849
  };
9191
- var handleInputChange = function handleInputChange(e) {
9192
- var value = e.target.value;
9193
- if (/^(?:[1-9][0-9]*|0)?$/.test(value)) {
9194
- setInputPage(value);
8850
+ var _getTotalNotifications = function getTotalNotifications(item) {
8851
+ var _item$children;
8852
+ if ((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
8853
+ return (item.notificationCount || 0) + item.children.reduce(function (sum, child) {
8854
+ return sum + _getTotalNotifications(child);
8855
+ }, 0);
9195
8856
  }
8857
+ return item.notificationCount || 0;
8858
+ };
8859
+ var getBasePath = function getBasePath(path) {
8860
+ if (!path) return '';
8861
+ var parts = path.split('/').filter(Boolean);
8862
+ return parts.length > 0 ? "/" + parts[0] : '';
8863
+ };
8864
+ var isRouteActive = function isRouteActive(item) {
8865
+ var _item$children2;
8866
+ var currentBase = getBasePath(location.pathname);
8867
+ var itemBase = item.activeUrl ? getBasePath(item.activeUrl) : getBasePath(item.url);
8868
+ return currentBase === itemBase || ((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.some(function (child) {
8869
+ return currentBase === getBasePath(child.activeUrl) || currentBase === getBasePath(child.url);
8870
+ }));
8871
+ };
8872
+ var ChildLink = React.memo(function (_ref19) {
8873
+ var child = _ref19.child,
8874
+ isExpanded = _ref19.isExpanded;
8875
+ var themeColors = useTheme$1();
8876
+ var location = useLocation();
8877
+ var active = getBasePath(location.pathname) === getBasePath(child.activeUrl) || getBasePath(location.pathname) === getBasePath(child.url);
8878
+ var _useState2 = useState(false),
8879
+ isHovered = _useState2[0],
8880
+ setIsHovered = _useState2[1];
8881
+ return React.createElement(SidebarLink, {
8882
+ to: child.url || '#',
8883
+ key: child.id,
8884
+ "$padding": '0px 10px 0px 0px',
8885
+ onClick: function onClick(e) {
8886
+ if (child.url && child.url === location.pathname) {
8887
+ e.preventDefault();
8888
+ }
8889
+ },
8890
+ onMouseEnter: function onMouseEnter() {
8891
+ return setIsHovered(true);
8892
+ },
8893
+ onMouseLeave: function onMouseLeave() {
8894
+ return setIsHovered(false);
8895
+ }
8896
+ }, React.createElement(IconWrapper$2, {
8897
+ "$selected": active
8898
+ }, React.createElement(Icon, {
8899
+ icon: child.icon,
8900
+ size: 18,
8901
+ weight: child.iconWeight,
8902
+ color: active || isHovered ? themeColors.vms.text.white : themeColors.vms.text.medium
8903
+ })), React.createElement(Container, {
8904
+ "$width": '100%',
8905
+ "$justifyContent": 'space-between',
8906
+ "$gap": '5px'
8907
+ }, React.createElement(TextContainer, {
8908
+ "$isExpanded": isExpanded,
8909
+ "$fontSize": '12px'
8910
+ }, child.label), _getTotalNotifications(child) > 0 && React.createElement(NotificationBadge, {
8911
+ "$position": 'unset'
8912
+ }, _getTotalNotifications(child) > 99 ? '99+' : _getTotalNotifications(child))));
8913
+ });
8914
+ var renderChildLinks = function renderChildLinks(children) {
8915
+ return React.createElement(Container, {
8916
+ "$padding": '0px 0px 0px 16px',
8917
+ "$flexDirection": 'column',
8918
+ "$gap": '10px'
8919
+ }, children.map(function (child) {
8920
+ return React.createElement(ChildLink, {
8921
+ key: child.id,
8922
+ child: child,
8923
+ isExpanded: isExpanded
8924
+ });
8925
+ }));
8926
+ };
8927
+ var SidebarItem = function SidebarItem(_ref20) {
8928
+ var item = _ref20.item,
8929
+ isActive = _ref20.isActive,
8930
+ isOpen = _ref20.isOpen,
8931
+ hasChildren = _ref20.hasChildren,
8932
+ isExpanded = _ref20.isExpanded,
8933
+ onToggle = _ref20.onToggle,
8934
+ renderChildLinks = _ref20.renderChildLinks;
8935
+ var themeColors = useTheme$1();
8936
+ var _useState3 = useState(false),
8937
+ isHovered = _useState3[0],
8938
+ setIsHovered = _useState3[1];
8939
+ var ContentLayout = React.createElement(Container, {
8940
+ onMouseEnter: function onMouseEnter() {
8941
+ return setIsHovered(true);
8942
+ },
8943
+ onMouseLeave: function onMouseLeave() {
8944
+ return setIsHovered(false);
8945
+ },
8946
+ "$alignItems": 'center',
8947
+ "$gap": '8px',
8948
+ "$width": '100%',
8949
+ "$cursor": 'pointer',
8950
+ "$borderRadius": '4px',
8951
+ "$justifyContent": 'space-between',
8952
+ "$hoverBackground": themeColors.vms["default"].primary,
8953
+ onClick: function onClick() {
8954
+ return hasChildren && onToggle();
8955
+ }
8956
+ }, React.createElement(Container, {
8957
+ "$alignItems": 'center',
8958
+ "$gap": '8px',
8959
+ "$width": '100%',
8960
+ "$cursor": 'pointer',
8961
+ "$borderRadius": '4px'
8962
+ }, React.createElement(Container, {
8963
+ "$position": 'relative'
8964
+ }, React.createElement(IconWrapper$2, {
8965
+ "$selected": !!isActive
8966
+ }, React.createElement(Icon, {
8967
+ icon: item.icon,
8968
+ size: 20,
8969
+ weight: item.iconWeight,
8970
+ color: isHovered || isActive ? themeColors.vms.text.white : themeColors.vms.text.medium
8971
+ })), _getTotalNotifications(item) > 0 && React.createElement(NotificationBadge, null, _getTotalNotifications(item) > 99 ? '99+' : _getTotalNotifications(item))), React.createElement(TextContainer, {
8972
+ "$isExpanded": isExpanded,
8973
+ "$fontSize": '14px'
8974
+ }, item.label)), hasChildren && React.createElement(Container, {
8975
+ "$padding": '9px',
8976
+ "$opacity": isExpanded ? 1 : 0
8977
+ }, React.createElement(Icon, {
8978
+ icon: isOpen ? 'UpArrow' : 'DownArrow',
8979
+ size: 10,
8980
+ color: isHovered ? themeColors.vms.text.white : themeColors.vms.text.medium,
8981
+ cursor: 'pointer'
8982
+ })));
8983
+ return item.url ? React.createElement(SidebarLink, {
8984
+ to: item.url,
8985
+ onClick: function onClick(e) {
8986
+ if (item.url === location.pathname) {
8987
+ e.preventDefault();
8988
+ }
8989
+ }
8990
+ }, ContentLayout) : React.createElement(Container, {
8991
+ "$flexDirection": 'column',
8992
+ "$alignItems": 'start',
8993
+ "$gap": '8px',
8994
+ "$width": '100%'
8995
+ }, React.createElement(Container, {
8996
+ "$color": themeColors.vms.text.medium,
8997
+ "$hoverColor": themeColors.vms.text.white,
8998
+ "$width": '100%'
8999
+ }, ContentLayout), hasChildren && isExpanded && isOpen && renderChildLinks && React.createElement(Container, null, renderChildLinks(item.children)));
9196
9000
  };
9197
- var handleGoClick = function handleGoClick() {
9198
- var page = Math.floor(Number(inputPage));
9199
- if (!isNaN(page) && page >= 1 && page <= totalPages) {
9200
- handlePageChange(page);
9201
- } else {
9202
- setInputPage(currentPage.toString());
9203
- sendNotification({
9204
- type: 'error',
9205
- message: 'Invalid page number'
9206
- });
9001
+ return React.createElement(SidebarContainer, {
9002
+ "$background": background,
9003
+ "$isExpanded": isExpanded,
9004
+ onMouseEnter: function onMouseEnter() {
9005
+ return setIsExpanded(true);
9006
+ },
9007
+ onMouseLeave: function onMouseLeave() {
9008
+ return setIsExpanded(false);
9207
9009
  }
9208
- };
9209
- var containerRef = useRef(null);
9210
- return React.createElement(Container, {
9211
- "$gap": '40px',
9212
- "$height": '100%',
9213
- "$alignItems": 'flex-start',
9214
- ref: containerRef
9215
- }, React.createElement(Container, {
9216
- "$gap": '16px',
9217
- "$alignItems": 'center'
9218
- }, React.createElement(Span, {
9219
- "$fontWeight": '400',
9220
- "$fontSize": '14px',
9221
- "$lineHeight": '100%'
9222
- }, t('Page')), React.createElement(Container, {
9223
- "$gap": '12px',
9224
- "$alignItems": 'center'
9225
9010
  }, React.createElement(Container, {
9226
- "$gap": '4px',
9227
- "$alignItems": 'center'
9228
- }, React.createElement(PageInput, {
9229
- type: 'number',
9230
- value: inputPage,
9231
- onChange: handleInputChange,
9232
- min: 1,
9233
- max: totalPages,
9234
- onKeyDown: function onKeyDown(e) {
9235
- if (e.key === 'Enter') handleGoClick();
9236
- }
9237
- }), React.createElement(Span, {
9238
- "$fontWeight": '400',
9239
- "$fontSize": '14px'
9240
- }, "/ ", totalPages)), React.createElement(ButtonComponent, {
9241
- variant: 'primary',
9242
- disabled: inputPage.trim() === '' || isNaN(Number(inputPage)),
9243
- onClick: handleGoClick,
9244
- text: t('Go'),
9245
- size: 'small'
9246
- })), React.createElement(Container, {
9247
- "$gap": '12px'
9248
- }, React.createElement(ButtonComponent, {
9249
- onClick: function onClick() {
9250
- return handlePageChange(currentPage - 1);
9251
- },
9252
- disabled: currentPage === 1,
9253
- icon: 'LeftArrow',
9254
- iconSize: 12,
9255
- size: 'custom',
9256
- padding: '7px',
9257
- variant: 'secondary',
9258
- borderRadius: '4px',
9259
- color: themeColors.vms.text.white
9260
- }), React.createElement(ButtonComponent, {
9261
- onClick: function onClick() {
9262
- return handlePageChange(currentPage + 1);
9263
- },
9264
- disabled: currentPage === totalPages,
9265
- icon: 'RightArrow',
9266
- iconSize: 12,
9267
- size: 'custom',
9268
- padding: '7px',
9269
- variant: 'secondary',
9270
- borderRadius: '4px',
9271
- color: themeColors.vms.text.white
9011
+ "$flexDirection": 'column',
9012
+ "$gap": '28px',
9013
+ "$width": '100%'
9014
+ }, logo && (logo.icon ? React.createElement(Logo, null, React.createElement(Icon, {
9015
+ icon: logo.icon,
9016
+ color: logo.iconColor
9017
+ }), React.createElement(TextContainer, {
9018
+ "$isExpanded": isExpanded,
9019
+ "$fontWeight": '700'
9020
+ }, logo.name)) : logo.imageDetails && React.createElement(Logo, null, React.createElement("img", {
9021
+ src: logo.imageDetails.url,
9022
+ alt: logo.imageDetails.altText,
9023
+ width: logo.imageDetails.width,
9024
+ height: logo.imageDetails.height
9272
9025
  }))), React.createElement(Container, {
9026
+ "$flexDirection": 'column',
9273
9027
  "$gap": '16px',
9274
- "$justifyContent": 'center',
9275
- "$alignItems": 'center'
9276
- }, React.createElement(Span, {
9277
- "$fontWeight": '400',
9278
- "$fontSize": '14px'
9279
- }, t('Item_Per_Page')), React.createElement(Container, null, React.createElement(SelectOption, {
9280
- width: '54px',
9281
- size: 'small',
9282
- value: itemsPerPage.toString(),
9283
- onChange: function onChange(e) {
9284
- var val = parseInt(e.target.value, 10);
9285
- if (!isNaN(val)) {
9286
- onItemsPerPageChange(val);
9287
- }
9288
- },
9289
- options: [{
9290
- label: '5',
9291
- value: '5'
9292
- }, {
9293
- label: '10',
9294
- value: '10'
9295
- }, {
9296
- label: '20',
9297
- value: '20'
9298
- }],
9299
- positionRef: containerRef,
9300
- allowDeselect: false
9301
- }))));
9028
+ "$width": '100%'
9029
+ }, content.map(function (item) {
9030
+ var _item$children3;
9031
+ var active = isRouteActive(item) || false;
9032
+ var hasChildren = !!((_item$children3 = item.children) !== null && _item$children3 !== void 0 && _item$children3.length);
9033
+ var isOpen = openMenus[item.id];
9034
+ return React.createElement(SidebarItem, {
9035
+ key: item.id,
9036
+ item: item,
9037
+ isActive: active,
9038
+ isOpen: isOpen,
9039
+ hasChildren: hasChildren,
9040
+ isExpanded: isExpanded,
9041
+ onToggle: function onToggle() {
9042
+ return toggleMenu(item.id);
9043
+ },
9044
+ renderChildLinks: renderChildLinks
9045
+ });
9046
+ }))), ProfileContent);
9047
+ };
9048
+
9049
+ var _templateObject$o, _templateObject2$k, _templateObject3$d, _templateObject4$a;
9050
+ var ContainerWrapper = styled.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) {
9051
+ return props.$width || 'auto';
9052
+ }, function (_ref) {
9053
+ var $minHeight = _ref.$minHeight;
9054
+ return $minHeight;
9055
+ });
9056
+ var CellContainer = styled.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) {
9057
+ return props.$align;
9058
+ }, function (props) {
9059
+ return props.$width || 'auto';
9060
+ }, function (props) {
9061
+ return props.$minWidth;
9062
+ }, function (props) {
9063
+ return props.$background || 'inherit';
9064
+ }, function (props) {
9065
+ return props.$padding;
9066
+ });
9067
+ var MainText = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-size:", ";\n font-weight:", ";\n line-height: 100%;\n"])), function (props) {
9068
+ return props.$mtc;
9069
+ }, function (props) {
9070
+ return props.$mtfs;
9071
+ }, function (props) {
9072
+ return props.$mtw;
9073
+ });
9074
+ var SubText = styled.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-size:", ";\n font-weight:", ";\n line-height: 100%;\n"])), function (props) {
9075
+ return props.$stc;
9076
+ }, function (props) {
9077
+ return props.$stfs;
9078
+ }, function (props) {
9079
+ return props.$stw;
9080
+ });
9081
+ var TableCell = function TableCell(_ref2) {
9082
+ var maintext = _ref2.maintext,
9083
+ _ref2$maintextcolor = _ref2.maintextcolor,
9084
+ maintextcolor = _ref2$maintextcolor === void 0 ? 'inherit' : _ref2$maintextcolor,
9085
+ _ref2$maintextfontsiz = _ref2.maintextfontsize,
9086
+ maintextfontsize = _ref2$maintextfontsiz === void 0 ? '14px' : _ref2$maintextfontsiz,
9087
+ _ref2$maintextweight = _ref2.maintextweight,
9088
+ maintextweight = _ref2$maintextweight === void 0 ? '500' : _ref2$maintextweight,
9089
+ subtext = _ref2.subtext,
9090
+ _ref2$subtextcolor = _ref2.subtextcolor,
9091
+ subtextcolor = _ref2$subtextcolor === void 0 ? 'inherit' : _ref2$subtextcolor,
9092
+ _ref2$subtextfontsize = _ref2.subtextfontsize,
9093
+ subtextfontsize = _ref2$subtextfontsize === void 0 ? '10px' : _ref2$subtextfontsize,
9094
+ _ref2$subtextweight = _ref2.subtextweight,
9095
+ subtextweight = _ref2$subtextweight === void 0 ? '400' : _ref2$subtextweight,
9096
+ _ref2$alignment = _ref2.alignment,
9097
+ alignment = _ref2$alignment === void 0 ? 'center' : _ref2$alignment,
9098
+ width = _ref2.width,
9099
+ minWidth = _ref2.minWidth,
9100
+ CustomFunction = _ref2.CustomFunction,
9101
+ padding = _ref2.padding,
9102
+ minHeight = _ref2.minHeight;
9103
+ return React.createElement(ContainerWrapper, {
9104
+ "$width": width,
9105
+ "$minHeight": minHeight
9106
+ }, CustomFunction ? React.createElement(CellContainer, {
9107
+ "$align": alignment,
9108
+ "$width": width,
9109
+ "$minWidth": minWidth
9110
+ }, CustomFunction) : React.createElement(CellContainer, {
9111
+ "$align": alignment,
9112
+ "$width": width,
9113
+ "$minWidth": minWidth,
9114
+ "$padding": padding
9115
+ }, React.createElement(MainText, {
9116
+ "$mtc": maintextcolor,
9117
+ "$mtfs": maintextfontsize,
9118
+ "$mtw": maintextweight
9119
+ }, maintext), subtext && React.createElement(SubText, {
9120
+ "$stc": subtextcolor,
9121
+ "$stfs": subtextfontsize,
9122
+ "$stw": subtextweight
9123
+ }, subtext)));
9124
+ };
9125
+
9126
+ var _templateObject$p;
9127
+ var TableRowContainer = styled$1.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"])));
9128
+ var TableRow = function TableRow(_ref) {
9129
+ var rowconfig = _ref.rowconfig,
9130
+ tableheaderconfig = _ref.tableheaderconfig,
9131
+ selectCallback = _ref.selectCallback;
9132
+ var toggleChecked = function toggleChecked(index) {
9133
+ var currentRow = rowconfig[index];
9134
+ var newChecked = !currentRow._checked;
9135
+ if (selectCallback && currentRow.id !== undefined) {
9136
+ selectCallback(newChecked, currentRow.id);
9137
+ }
9138
+ };
9139
+ return React.createElement(Container, null, rowconfig.map(function (data, Index) {
9140
+ return React.createElement(TableRowContainer, {
9141
+ key: Index
9142
+ }, tableheaderconfig.isAllSelectable && React.createElement(Container, {
9143
+ "$padding": '0px 16px 0px 0px',
9144
+ "$alignItems": 'center'
9145
+ }, React.createElement(StyledCheckBox, {
9146
+ type: 'checkbox',
9147
+ "$checkboxSize": 13.5,
9148
+ checked: data._checked,
9149
+ "$checked": data._checked,
9150
+ onChange: function onChange() {
9151
+ return toggleChecked(Index);
9152
+ },
9153
+ disabled: data === null || data === void 0 ? void 0 : data._selectable,
9154
+ "$borderSize": 2
9155
+ })), data.rowData.map(function (cellData, cellkey) {
9156
+ var _tableheaderconfig$he;
9157
+ return React.createElement(TableCell, {
9158
+ key: cellkey,
9159
+ maintext: cellData.maintext,
9160
+ width: (_tableheaderconfig$he = tableheaderconfig.headerdata[cellkey]) === null || _tableheaderconfig$he === void 0 ? void 0 : _tableheaderconfig$he.width,
9161
+ background: cellData.background,
9162
+ maintextcolor: cellData.maintextcolor,
9163
+ maintextfontsize: cellData.maintextfontsize,
9164
+ maintextweight: cellData.maintextweight,
9165
+ subtext: cellData.subtext,
9166
+ subtextcolor: cellData.subtextcolor,
9167
+ subtextfontsize: cellData.subtextfontsize,
9168
+ subtextweight: cellData.subtextweight,
9169
+ alignment: cellData.alignment,
9170
+ CustomFunction: cellData.CustomFunction,
9171
+ minHeight: '30px'
9172
+ });
9173
+ }));
9174
+ }));
9302
9175
  };
9303
9176
 
9304
- var strokeWidth = 6.5;
9305
- var viewBoxSize = 44;
9306
- var CircularProgress = function CircularProgress(_ref) {
9307
- var threshold = _ref.threshold,
9308
- totalCapacity = _ref.totalCapacity,
9309
- usedCapacity = _ref.usedCapacity,
9310
- progressColor = _ref.progressColor,
9311
- _ref$thresholdColor = _ref.thresholdColor,
9312
- thresholdColor = _ref$thresholdColor === void 0 ? 'rgba(255, 0, 0, 0.2)' : _ref$thresholdColor,
9313
- trackColor = _ref.trackColor;
9177
+ var _templateObject$q, _templateObject2$l, _templateObject3$e, _templateObject4$b, _templateObject5$9, _templateObject6$8;
9178
+ var TableContainer = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n background: ", ";\n width: 100%;\n display: flex;\n overflow: hidden;\n border-radius: 8px;\n"])), function (_ref) {
9179
+ var theme = _ref.theme;
9180
+ return theme.vms.brand.light;
9181
+ });
9182
+ var TableHeader = styled.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) {
9183
+ var $hbcolor = _ref2.$hbcolor,
9184
+ theme = _ref2.theme;
9185
+ return $hbcolor || theme.vms["default"].tertiary;
9186
+ }, function (_ref3) {
9187
+ var $tcolor = _ref3.$tcolor,
9188
+ theme = _ref3.theme;
9189
+ return $tcolor || theme.vms.text.white;
9190
+ });
9191
+ var TableContent = styled.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n width: 100%;\n svg {\n cursor: pointer;\n }\n"])));
9192
+ var TableData = styled.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n overflow: auto;\n scrollbar-width: thin;\n height: 100%;\n max-height: ", ";\n"])), function (_ref4) {
9193
+ var $isLegends = _ref4.$isLegends;
9194
+ return $isLegends ? 'calc(100% - 56px)' : 'calc(100% - 36px)';
9195
+ });
9196
+ var LegendDivider = styled.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background: ", ";\n margin-right: ", ";\n"])), function (_ref5) {
9197
+ var theme = _ref5.theme;
9198
+ return theme.vms.border.extraLight;
9199
+ }, function (_ref6) {
9200
+ var $marginRight = _ref6.$marginRight;
9201
+ return $marginRight != null ? $marginRight : '0px';
9202
+ });
9203
+ var Divider = styled.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n height: 2px;\n background: ", ";\n"])), function (_ref7) {
9204
+ var theme = _ref7.theme;
9205
+ return theme.vms.border.extraLight;
9206
+ });
9207
+ var Table = function Table(_ref8) {
9208
+ var tableObject = _ref8.tableObject,
9209
+ _ref8$filter = _ref8.filter,
9210
+ filter = _ref8$filter === void 0 ? false : _ref8$filter,
9211
+ loading = _ref8.loading,
9212
+ _ref8$noDataText = _ref8.noDataText,
9213
+ noDataText = _ref8$noDataText === void 0 ? 'No Data Found!' : _ref8$noDataText;
9314
9214
  var themeColors = useTheme();
9315
- var radius = (viewBoxSize - strokeWidth) / 2;
9316
- var circumference = 2 * Math.PI * radius;
9317
- var parseVolumeData = function parseVolumeData(threshold, totalCapacity, usedCapacity) {
9318
- var thresholdValue = threshold != null ? threshold : 100;
9319
- var progress = usedCapacity / totalCapacity * 100;
9320
- return {
9321
- progress: Math.min(Math.max(Math.round(progress), 0), 100),
9322
- processedThreshold: Math.min(Math.max(thresholdValue, 0), 100)
9323
- };
9215
+ var rowconfig = tableObject.rowconfig,
9216
+ tableheaderconfig = tableObject.tableheaderconfig;
9217
+ var _useState = useState(new Set()),
9218
+ collapsedRoles = _useState[0],
9219
+ setCollapsedRoles = _useState[1];
9220
+ var _useState2 = useState(false),
9221
+ isAllSelected = _useState2[0],
9222
+ setIsAllSelected = _useState2[1];
9223
+ var getRole = function getRole(row) {
9224
+ var _row$rowData, _row$rowData$, _row$rowData$$CustomF, _row$rowData$$CustomF2, _row$rowData2, _row$rowData2$, _row$rowData2$$Custom, _row$rowData2$$Custom2;
9225
+ 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';
9324
9226
  };
9325
- var _parseVolumeData = parseVolumeData(threshold, totalCapacity, usedCapacity),
9326
- progress = _parseVolumeData.progress,
9327
- processedThreshold = _parseVolumeData.processedThreshold;
9328
- var progressOffset = circumference * (1 - progress / 100);
9329
- var thresholdOffset = circumference * (1 - processedThreshold / 100);
9330
- return React.createElement(Container, {
9331
- "$width": '100%',
9332
- "$height": '100%',
9333
- "$position": 'relative',
9334
- "$alignItems": 'center',
9335
- "$justifyContent": 'center'
9336
- }, React.createElement("svg", {
9337
- width: '100%',
9338
- height: '100%',
9339
- viewBox: "0 0 " + viewBoxSize + " " + viewBoxSize
9340
- }, React.createElement("circle", {
9341
- cx: viewBoxSize / 2,
9342
- cy: viewBoxSize / 2,
9343
- r: radius,
9344
- stroke: trackColor || themeColors.vms.accent.softBlue,
9345
- strokeWidth: strokeWidth,
9346
- fill: 'none'
9347
- }), processedThreshold > progress && React.createElement("circle", {
9348
- cx: viewBoxSize / 2,
9349
- cy: viewBoxSize / 2,
9350
- r: radius,
9351
- stroke: thresholdColor,
9352
- strokeWidth: strokeWidth,
9353
- fill: 'none',
9354
- strokeDasharray: circumference,
9355
- strokeDashoffset: thresholdOffset,
9356
- strokeLinecap: 'round',
9357
- transform: "rotate(-90 " + viewBoxSize / 2 + " " + viewBoxSize / 2 + ")"
9358
- }), React.createElement("circle", {
9359
- cx: viewBoxSize / 2,
9360
- cy: viewBoxSize / 2,
9361
- r: radius,
9362
- stroke: progressColor || themeColors.vms["default"].primary,
9363
- strokeWidth: strokeWidth,
9364
- fill: 'none',
9365
- strokeDasharray: circumference,
9366
- strokeDashoffset: progressOffset,
9367
- strokeLinecap: 'round',
9368
- transform: "rotate(-90 " + viewBoxSize / 2 + " " + viewBoxSize / 2 + ")"
9369
- })), React.createElement(Container, {
9370
- "$position": 'absolute',
9371
- "$fontSize": '12px',
9372
- "$fontWeight": '500',
9373
- "$color": progressColor || themeColors.vms["default"].primary
9374
- }, progress + "%"));
9375
- };
9376
-
9377
- var _templateObject$m, _templateObject2$i;
9378
- var shimmer = keyframes(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n 0% { background-position: 200% 0; }\n 100% { background-position: -100% 0; }\n"])));
9379
- var AnimatedProgress = styled.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) {
9380
- var width = _ref.width;
9381
- return width;
9382
- }, function (_ref2) {
9383
- var color = _ref2.color;
9384
- return color;
9385
- }, shimmer);
9386
- var ProgressBar = function ProgressBar(_ref3) {
9387
- var threshold = _ref3.threshold,
9388
- totalCapacity = _ref3.totalCapacity,
9389
- usedCapacity = _ref3.usedCapacity,
9390
- progressColor = _ref3.progressColor,
9391
- thresholdColor = _ref3.thresholdColor,
9392
- trackColor = _ref3.trackColor,
9393
- animate = _ref3.animate;
9394
- var themeColors = useTheme$1();
9395
- var parseVolumeData = function parseVolumeData(threshold, totalCapacity, usedCapacity) {
9396
- var totalCapacityGB = totalCapacity;
9397
- var usedCapacityGB = usedCapacity;
9398
- var thresholdPercent = threshold != null ? threshold : 100;
9399
- var progress = usedCapacityGB / totalCapacityGB * 100;
9400
- return {
9401
- progress: Math.round(progress),
9402
- Processed_threshold: thresholdPercent
9403
- };
9227
+ var filteredRows = filter ? rowconfig.filter(function (row) {
9228
+ return getRole(row);
9229
+ }) : rowconfig;
9230
+ var roleGroups = {};
9231
+ filteredRows.forEach(function (row) {
9232
+ var role = getRole(row);
9233
+ if (!roleGroups[role]) roleGroups[role] = [];
9234
+ roleGroups[role].push(row);
9235
+ });
9236
+ var toggleRoleVisibility = function toggleRoleVisibility(role) {
9237
+ setCollapsedRoles(function (prev) {
9238
+ var newSet = new Set(prev);
9239
+ if (newSet.has(role)) {
9240
+ newSet["delete"](role);
9241
+ } else {
9242
+ newSet.add(role);
9243
+ }
9244
+ return newSet;
9245
+ });
9404
9246
  };
9405
- var _parseVolumeData = parseVolumeData(threshold, totalCapacity, usedCapacity),
9406
- progress = _parseVolumeData.progress,
9407
- Processed_threshold = _parseVolumeData.Processed_threshold;
9408
- var thresholdWidth = Math.max((Processed_threshold != null ? Processed_threshold : 100) - progress, 0);
9409
- return React.createElement(Container, {
9410
- "$width": '100%',
9411
- "$height": '100%',
9412
- "$borderRadius": '100px',
9413
- "$background": trackColor != null ? trackColor : themeColors.vms.accent.softBlue,
9414
- "$overflow": 'hidden',
9415
- "$position": 'relative'
9416
- }, animate ? React.createElement(AnimatedProgress, {
9417
- width: progress + "%",
9418
- color: progressColor != null ? progressColor : themeColors.vms["default"].primary
9419
- }) : React.createElement(Container, {
9420
- "$width": progress + "%",
9421
- "$height": '100%',
9422
- "$background": progressColor != null ? progressColor : themeColors.vms["default"].primary,
9423
- "$transition": 'width 0.5s ease-in-out'
9424
- }), Processed_threshold !== undefined && Processed_threshold > progress && React.createElement(Container, {
9425
- "$width": thresholdWidth + "%",
9426
- "$height": '100%',
9427
- "$background": thresholdColor != null ? thresholdColor : 'rgba(255, 0, 0, 0.2)'
9428
- }));
9247
+ var toggleSelectAll = function toggleSelectAll() {
9248
+ var _tableObject$toggleAl;
9249
+ var newState = !isAllSelected;
9250
+ (_tableObject$toggleAl = tableObject.toggleAllCallback) === null || _tableObject$toggleAl === void 0 ? void 0 : _tableObject$toggleAl.call(tableObject, newState);
9251
+ };
9252
+ useEffect(function () {
9253
+ if (!(rowconfig !== null && rowconfig !== void 0 && rowconfig.length)) {
9254
+ setIsAllSelected(false);
9255
+ return;
9256
+ }
9257
+ var allChecked = rowconfig.every(function (row) {
9258
+ return row._checked;
9259
+ });
9260
+ setIsAllSelected(allChecked);
9261
+ }, [rowconfig]);
9262
+ return React.createElement(TableContainer, null, React.createElement(TableContent, null, React.createElement(TableHeader, {
9263
+ "$hbcolor": tableheaderconfig.headercolor,
9264
+ "$tcolor": tableheaderconfig.textcolor
9265
+ }, tableheaderconfig.isAllSelectable && React.createElement(Container, {
9266
+ "$padding": '0px 16px 0px 0px',
9267
+ "$alignItems": 'end',
9268
+ "$height": '-webkit-fill-available'
9269
+ }, React.createElement(StyledCheckBox, {
9270
+ type: 'checkbox',
9271
+ "$checkboxSize": 13.5,
9272
+ checked: isAllSelected,
9273
+ "$checked": isAllSelected,
9274
+ onChange: toggleSelectAll,
9275
+ "$borderSize": 2
9276
+ })), tableheaderconfig.headerdata.map(function (columndata, index, allCols) {
9277
+ var _allCols, _columndata$maintext;
9278
+ var currentGroupTitle = columndata.groupTitle || '';
9279
+ var prevGroupTitle = index > 0 ? allCols[index - 1].groupTitle || '' : '';
9280
+ var isFirstOfGroup = currentGroupTitle && currentGroupTitle !== prevGroupTitle;
9281
+ var isInLegendGroup = !!currentGroupTitle;
9282
+ return React.createElement(Container, {
9283
+ key: index,
9284
+ "$flexDirection": 'column',
9285
+ "$width": columndata.width || '100px',
9286
+ "$gap": '8px'
9287
+ }, tableheaderconfig.headerdata.some(function (col) {
9288
+ return !!col.groupTitle;
9289
+ }) && React.createElement(Container, {
9290
+ "$alignItems": 'center',
9291
+ "$height": '16px'
9292
+ }, isInLegendGroup ? React.createElement(Container, {
9293
+ "$width": '100%'
9294
+ }, isFirstOfGroup ? React.createElement(Container, {
9295
+ "$width": '100%',
9296
+ "$alignItems": 'center',
9297
+ "$gap": '4px'
9298
+ }, React.createElement(Span, {
9299
+ "$fontSize": '12px',
9300
+ "$fontWeight": '400',
9301
+ "$width": 'max-content',
9302
+ "$lineHeight": 'normal'
9303
+ }, currentGroupTitle), React.createElement(LegendDivider, null)) : React.createElement(LegendDivider, {
9304
+ "$marginRight": currentGroupTitle !== (((_allCols = allCols[index + 1]) === null || _allCols === void 0 ? void 0 : _allCols.groupTitle) || '') ? '8px' : '0px'
9305
+ })) : null), React.createElement(TableCell, {
9306
+ maintext: (_columndata$maintext = columndata.maintext) != null ? _columndata$maintext : '',
9307
+ width: columndata.width,
9308
+ alignment: columndata.alignment
9309
+ }));
9310
+ })), React.createElement(Divider, null), loading ? React.createElement(Container, {
9311
+ "$flexDirection": 'column',
9312
+ "$alignItems": 'center',
9313
+ "$justifyContent": 'center',
9314
+ "$padding": '24px 24px'
9315
+ }, React.createElement(Loader, {
9316
+ title: 'Loading users'
9317
+ })) : rowconfig.length === 0 ? React.createElement(Container, {
9318
+ "$flexDirection": 'column',
9319
+ "$alignItems": 'center',
9320
+ "$padding": '24px 24px',
9321
+ "$justifyContent": 'center'
9322
+ }, React.createElement(Span, null, noDataText)) : filter ? React.createElement(TableData, {
9323
+ "$isLegends": tableheaderconfig.headerdata.some(function (col) {
9324
+ return !!col.groupTitle;
9325
+ })
9326
+ }, Object.entries(roleGroups).map(function (_ref9) {
9327
+ var role = _ref9[0],
9328
+ rows = _ref9[1];
9329
+ return React.createElement(React.Fragment, {
9330
+ key: role
9331
+ }, React.createElement(Container, {
9332
+ "$justifyContent": 'space-between',
9333
+ "$padding": '9px 12px',
9334
+ "$minHeight": '30px',
9335
+ "$alignItems": 'center',
9336
+ "$background": themeColors.vms.accent.light_1,
9337
+ onClick: function onClick() {
9338
+ return toggleRoleVisibility(role);
9339
+ },
9340
+ "$cursor": 'pointer',
9341
+ "$border": "1px solid " + themeColors.vms.border.extraLight
9342
+ }, React.createElement(Span, {
9343
+ "$color": themeColors.vms.text.medium,
9344
+ "$fontSize": '12px',
9345
+ "$lineHeight": '100%'
9346
+ }, role, " (", rows.length, ")"), React.createElement(Icon, {
9347
+ size: 12,
9348
+ icon: collapsedRoles.has(role) ? 'UpArrow' : 'DownArrow'
9349
+ })), !collapsedRoles.has(role) && rows.map(function (row, index) {
9350
+ return React.createElement(Container, {
9351
+ key: index,
9352
+ "$flexDirection": 'column'
9353
+ }, React.createElement(TableRow, {
9354
+ rowconfig: [row],
9355
+ tableheaderconfig: tableheaderconfig,
9356
+ selectCallback: tableObject.selectCallback
9357
+ }), rows.length > 1 && index < rows.length - 1 && React.createElement(Divider, null));
9358
+ }));
9359
+ })) : React.createElement(TableData, {
9360
+ "$isLegends": tableheaderconfig.headerdata.some(function (col) {
9361
+ return !!col.groupTitle;
9362
+ })
9363
+ }, filteredRows.map(function (row, index) {
9364
+ return React.createElement(React.Fragment, {
9365
+ key: index
9366
+ }, React.createElement(TableRow, {
9367
+ rowconfig: [row],
9368
+ tableheaderconfig: tableheaderconfig,
9369
+ selectCallback: tableObject.selectCallback
9370
+ }), filteredRows.length > 1 && index < filteredRows.length - 1 && React.createElement(Divider, null));
9371
+ }))));
9429
9372
  };
9430
9373
 
9431
- var _templateObject$n, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$8, _templateObject6$7;
9432
- var SidebarContainer = styled.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) {
9433
- var $isExpanded = _ref.$isExpanded;
9434
- return $isExpanded ? 'max-content' : '68px';
9374
+ var _templateObject$r, _templateObject2$m, _templateObject3$f, _templateObject4$c, _templateObject5$a, _templateObject6$9;
9375
+ var Container$4 = styled.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) {
9376
+ var $overflow = _ref.$overflow;
9377
+ return $overflow || 'visible';
9435
9378
  }, function (_ref2) {
9436
- var $isExpanded = _ref2.$isExpanded;
9437
- return $isExpanded ? '400px' : '68px';
9379
+ var $gap = _ref2.$gap;
9380
+ return $gap;
9438
9381
  }, function (_ref3) {
9439
- var $background = _ref3.$background,
9440
- theme = _ref3.theme;
9441
- return $background || theme.vms.accent.softBlue;
9382
+ var $border = _ref3.$border;
9383
+ return $border;
9442
9384
  });
9443
- var SidebarLink = styled(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) {
9444
- var $padding = _ref4.$padding;
9445
- return $padding;
9385
+ var FirstContainer = styled.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) {
9386
+ var $bordeBottom = _ref4.$bordeBottom,
9387
+ theme = _ref4.theme;
9388
+ return $bordeBottom != null ? $bordeBottom : "1px solid " + theme.vms.border.light;
9446
9389
  }, function (_ref5) {
9447
- var theme = _ref5.theme;
9448
- return theme.vms.text.medium;
9449
- }, function (_ref6) {
9450
- var theme = _ref6.theme;
9451
- return theme.vms.text.white;
9452
- }, function (_ref7) {
9453
- var theme = _ref7.theme;
9454
- return theme.vms["default"].primary;
9455
- });
9456
- var IconWrapper$2 = styled.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) {
9457
- var $selected = _ref8.$selected,
9458
- theme = _ref8.theme;
9459
- return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
9390
+ var $headerPadding = _ref5.$headerPadding;
9391
+ return $headerPadding ? $headerPadding : '0px';
9460
9392
  });
9461
- var Logo = styled.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"])));
9462
- var TextContainer = styled.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) {
9463
- var $padding = _ref9.$padding;
9464
- return $padding;
9393
+ var TabContainer = styled.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) {
9394
+ var $disabled = _ref6.$disabled;
9395
+ return $disabled ? 'not-allowed' : 'pointer';
9396
+ }, function (_ref7) {
9397
+ var $disabled = _ref7.$disabled;
9398
+ return $disabled ? '0.6' : '1';
9399
+ }, function (_ref8) {
9400
+ var theme = _ref8.theme;
9401
+ return theme.vms.text.medium;
9402
+ }, function (_ref9) {
9403
+ var $headerHeight = _ref9.$headerHeight;
9404
+ return $headerHeight ? $headerHeight : '34px';
9465
9405
  }, function (_ref10) {
9466
- var $fontSize = _ref10.$fontSize;
9467
- return $fontSize || '20px';
9468
- }, function (_ref11) {
9469
- var $fontWeight = _ref11.$fontWeight;
9470
- return $fontWeight || '500';
9471
- }, function (_ref12) {
9472
- var $isExpanded = _ref12.$isExpanded;
9473
- return $isExpanded ? 1 : 0;
9474
- }, function (_ref13) {
9475
- var $isExpanded = _ref13.$isExpanded;
9476
- return $isExpanded ? 'visible' : 'hidden';
9477
- }, function (_ref14) {
9478
- var $isExpanded = _ref14.$isExpanded;
9479
- return $isExpanded ? 'translateX(0)' : 'translateX(-10px)';
9406
+ var $disabled = _ref10.$disabled;
9407
+ return $disabled ? 'not-allowed' : 'pointer';
9480
9408
  });
9481
- var NotificationBadge = styled.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) {
9482
- var $position = _ref15.$position;
9483
- return $position || 'absolute';
9409
+ var TabItemContainer = styled.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) {
9410
+ var $headerHeight = _ref11.$headerHeight;
9411
+ return $headerHeight ? $headerHeight : '34px';
9412
+ }, function (props) {
9413
+ return props.$active ? 'block' : 'none';
9414
+ }, function (_ref12) {
9415
+ var theme = _ref12.theme;
9416
+ return theme.vms["default"].primary;
9484
9417
  });
9485
- var Sidebar = function Sidebar(_ref16) {
9486
- var logo = _ref16.logo,
9487
- content = _ref16.content,
9488
- background = _ref16.background,
9489
- ProfileContent = _ref16.ProfileContent,
9490
- _ref16$isExpanded = _ref16.isExpanded,
9491
- isExpanded = _ref16$isExpanded === void 0 ? false : _ref16$isExpanded,
9492
- setIsExpanded = _ref16.setIsExpanded;
9493
- var location = useLocation();
9494
- var _useState = useState({}),
9495
- openMenus = _useState[0],
9496
- setOpenMenus = _useState[1];
9497
- useEffect(function () {
9498
- if (!isExpanded) setOpenMenus({});
9499
- }, [isExpanded]);
9500
- var toggleMenu = function toggleMenu(id) {
9501
- setOpenMenus(function (prev) {
9502
- var _extends2;
9503
- return _extends({}, prev, (_extends2 = {}, _extends2[id] = !prev[id], _extends2));
9504
- });
9505
- };
9506
- var _getTotalNotifications = function getTotalNotifications(item) {
9507
- var _item$children;
9508
- if ((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
9509
- return (item.notificationCount || 0) + item.children.reduce(function (sum, child) {
9510
- return sum + _getTotalNotifications(child);
9511
- }, 0);
9512
- }
9513
- return item.notificationCount || 0;
9514
- };
9515
- var getBasePath = function getBasePath(path) {
9516
- if (!path) return '';
9517
- var parts = path.split('/').filter(Boolean);
9518
- return parts.length > 0 ? "/" + parts[0] : '';
9519
- };
9520
- var isRouteActive = function isRouteActive(item) {
9521
- var _item$children2;
9522
- var currentBase = getBasePath(location.pathname);
9523
- var itemBase = item.activeUrl ? getBasePath(item.activeUrl) : getBasePath(item.url);
9524
- return currentBase === itemBase || ((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.some(function (child) {
9525
- return currentBase === getBasePath(child.activeUrl) || currentBase === getBasePath(child.url);
9526
- }));
9527
- };
9528
- var ChildLink = React.memo(function (_ref17) {
9529
- var child = _ref17.child,
9530
- isExpanded = _ref17.isExpanded;
9531
- var themeColors = useTheme$1();
9532
- var location = useLocation();
9533
- var active = getBasePath(location.pathname) === getBasePath(child.activeUrl) || getBasePath(location.pathname) === getBasePath(child.url);
9534
- var _useState2 = useState(false),
9535
- isHovered = _useState2[0],
9536
- setIsHovered = _useState2[1];
9537
- return React.createElement(SidebarLink, {
9538
- to: child.url || '#',
9539
- key: child.id,
9540
- onMouseEnter: function onMouseEnter() {
9541
- return setIsHovered(true);
9542
- },
9543
- onMouseLeave: function onMouseLeave() {
9544
- return setIsHovered(false);
9545
- },
9546
- "$padding": '0px 10px 0px 0px'
9547
- }, React.createElement(IconWrapper$2, {
9548
- "$selected": active
9549
- }, React.createElement(Icon, {
9550
- icon: child.icon,
9551
- size: 18,
9552
- weight: child.iconWeight,
9553
- color: isHovered || active ? themeColors.vms.text.white : themeColors.vms.text.medium
9554
- })), React.createElement(Container, {
9555
- "$width": '100%',
9556
- "$justifyContent": 'space-between',
9557
- "$gap": '5px'
9558
- }, React.createElement(TextContainer, {
9559
- "$isExpanded": isExpanded,
9560
- "$fontSize": '12px',
9561
- "$color": themeColors.vms.text.medium
9562
- }, child.label), _getTotalNotifications(child) > 0 && React.createElement(NotificationBadge, {
9563
- "$position": 'unset'
9564
- }, _getTotalNotifications(child) > 99 ? '99+' : _getTotalNotifications(child))));
9565
- });
9566
- var renderChildLinks = function renderChildLinks(children) {
9567
- return React.createElement(Container, {
9568
- "$padding": '0px 0px 0px 16px',
9569
- "$flexDirection": 'column',
9570
- "$gap": '10px'
9571
- }, children.map(function (child) {
9572
- return React.createElement(ChildLink, {
9573
- key: child.id,
9574
- child: child,
9575
- isExpanded: isExpanded
9576
- });
9577
- }));
9578
- };
9579
- var SidebarItem = React.memo(function (_ref18) {
9580
- var item = _ref18.item,
9581
- isActive = _ref18.isActive,
9582
- isOpen = _ref18.isOpen,
9583
- hasChildren = _ref18.hasChildren,
9584
- isExpanded = _ref18.isExpanded,
9585
- onToggle = _ref18.onToggle,
9586
- renderChildLinks = _ref18.renderChildLinks;
9587
- var themeColors = useTheme$1();
9588
- var _useState3 = useState(false),
9589
- isHovered = _useState3[0],
9590
- setIsHovered = _useState3[1];
9591
- var ContentLayout = React.createElement(Container, {
9592
- onMouseEnter: function onMouseEnter() {
9593
- return setIsHovered(true);
9594
- },
9595
- onMouseLeave: function onMouseLeave() {
9596
- return setIsHovered(false);
9418
+ var DetailsFirstContainer = styled.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) {
9419
+ var $active = _ref13.$active,
9420
+ theme = _ref13.theme;
9421
+ return $active ? theme.vms["default"].primary : theme.vms.text.medium;
9422
+ });
9423
+ var TabItemsWrapper = styled.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"])));
9424
+ var Tabs = function Tabs(_ref14) {
9425
+ var tabItems = _ref14.tabItems,
9426
+ _ref14$disabled = _ref14.disabled,
9427
+ disabled = _ref14$disabled === void 0 ? false : _ref14$disabled,
9428
+ headerHeight = _ref14.headerHeight,
9429
+ headerPadding = _ref14.headerPadding,
9430
+ activeTab = _ref14.activeTab,
9431
+ border = _ref14.border,
9432
+ _ref14$gap = _ref14.gap,
9433
+ gap = _ref14$gap === void 0 ? '24px' : _ref14$gap,
9434
+ overflow = _ref14.overflow,
9435
+ bordeBottom = _ref14.bordeBottom,
9436
+ tabRightNode = _ref14.tabRightNode;
9437
+ var themeColors = useTheme();
9438
+ return React.createElement(Container$4, {
9439
+ "$gap": gap,
9440
+ "$border": border,
9441
+ "$overflow": overflow
9442
+ }, React.createElement(FirstContainer, {
9443
+ "$headerPadding": headerPadding,
9444
+ "$bordeBottom": bordeBottom
9445
+ }, React.createElement(TabItemsWrapper, null, tabItems.map(function (tab, index) {
9446
+ return React.createElement(TabContainer, {
9447
+ key: index,
9448
+ onClick: function onClick() {
9449
+ if (!disabled && tab.onClick) tab.onClick();
9597
9450
  },
9598
- "$alignItems": 'center',
9599
- "$gap": '8px',
9600
- "$width": '100%',
9601
- "$cursor": 'pointer',
9451
+ "$disabled": disabled,
9452
+ "$headerHeight": headerHeight
9453
+ }, React.createElement(TabItemContainer, {
9454
+ "$active": activeTab === tab.title,
9455
+ "$headerHeight": headerHeight
9456
+ }, tab.icon && React.createElement(Icon, {
9457
+ color: activeTab === tab.title ? tab.activeColor : themeColors.vms.text.medium,
9458
+ icon: tab.icon,
9459
+ size: tab.iconSize,
9460
+ weight: tab.iconWeight
9461
+ }), React.createElement(DetailsFirstContainer, {
9462
+ "$active": activeTab === tab.title
9463
+ }, tab.title)));
9464
+ })), tabRightNode === null || tabRightNode === void 0 ? void 0 : tabRightNode.node), tabItems.map(function (tab, index) {
9465
+ return activeTab === tab.title && React.createElement(Container$4, {
9466
+ key: index,
9467
+ "$overflow": overflow
9468
+ }, tab.content);
9469
+ }));
9470
+ };
9471
+
9472
+ var InternalTabs = function InternalTabs(_ref) {
9473
+ var tabs = _ref.tabs,
9474
+ activeTab = _ref.activeTab,
9475
+ backgroundColor = _ref.backgroundColor,
9476
+ activeTabBg = _ref.activeTabBg,
9477
+ textColor = _ref.textColor,
9478
+ _ref$disabled = _ref.disabled,
9479
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled;
9480
+ var themeColors = useTheme();
9481
+ return React.createElement(Container, {
9482
+ "$background": backgroundColor || themeColors.vms.text.white,
9483
+ "$padding": '3px',
9484
+ "$borderRadius": '4px',
9485
+ "$justifyContent": 'space-between',
9486
+ "$opacity": disabled ? 0.6 : 1
9487
+ }, tabs.map(function (tab) {
9488
+ return React.createElement(Container, {
9489
+ key: tab.value,
9602
9490
  "$borderRadius": '4px',
9603
- "$justifyContent": 'space-between',
9604
- "$hoverBackground": themeColors.vms["default"].primary,
9605
- onClick: function onClick() {
9606
- return hasChildren && onToggle();
9607
- }
9608
- }, React.createElement(Container, {
9491
+ "$width": '126px',
9492
+ "$justifyContent": 'center',
9609
9493
  "$alignItems": 'center',
9610
- "$gap": '8px',
9611
- "$width": '100%',
9612
- "$cursor": 'pointer',
9613
- "$borderRadius": '4px'
9614
- }, React.createElement(Container, {
9615
- "$position": 'relative'
9616
- }, React.createElement(IconWrapper$2, {
9617
- "$selected": !!isActive
9618
- }, React.createElement(Icon, {
9619
- icon: item.icon,
9620
- size: 20,
9621
- weight: item.iconWeight,
9622
- color: isHovered || isActive ? themeColors.vms.text.white : themeColors.vms.text.medium
9623
- })), _getTotalNotifications(item) > 0 && React.createElement(NotificationBadge, null, _getTotalNotifications(item) > 99 ? '99+' : _getTotalNotifications(item))), React.createElement(TextContainer, {
9624
- "$isExpanded": isExpanded,
9625
- "$fontSize": '14px'
9626
- }, item.label)), hasChildren && React.createElement(Container, {
9627
- "$padding": '9px',
9628
- "$opacity": isExpanded ? 1 : 0
9629
- }, React.createElement(Icon, {
9630
- icon: isOpen ? 'UpArrow' : 'DownArrow',
9631
- size: 10,
9632
- color: isHovered ? themeColors.vms.text.white : themeColors.vms.text.medium,
9633
- cursor: 'pointer'
9634
- })));
9635
- return item.url ? React.createElement(SidebarLink, {
9636
- to: item.url
9637
- }, ContentLayout) : React.createElement(Container, {
9638
- "$flexDirection": 'column',
9639
- "$alignItems": 'start',
9640
- "$gap": '8px',
9641
- "$width": '100%'
9642
- }, React.createElement(Container, {
9643
- "$color": themeColors.vms.text.medium,
9644
- "$hoverColor": themeColors.vms.text.white,
9645
- "$width": '100%'
9646
- }, ContentLayout), hasChildren && isExpanded && isOpen && renderChildLinks && React.createElement(Container, null, renderChildLinks(item.children)));
9647
- });
9648
- return React.createElement(SidebarContainer, {
9649
- "$background": background,
9650
- "$isExpanded": isExpanded,
9651
- onMouseEnter: function onMouseEnter() {
9652
- return setIsExpanded(true);
9494
+ "$cursor": disabled ? 'not-allowed' : 'pointer',
9495
+ onClick: disabled ? undefined : tab.onClick,
9496
+ "$background": activeTab === tab.value ? activeTabBg || themeColors.vms.accent.softBlue : themeColors.vms["default"].tertiary,
9497
+ "$color": activeTab === tab.value ? textColor || themeColors.vms["default"].primary : themeColors.vms.text.medium
9498
+ }, React.createElement(Span, {
9499
+ "$fontSize": '14px',
9500
+ "$color": activeTab === tab.value ? textColor || themeColors.vms["default"].primary : themeColors.vms.text.medium
9501
+ }, tab.title));
9502
+ }));
9503
+ };
9504
+
9505
+ var light = {
9506
+ vms: {
9507
+ brand: {
9508
+ primary: '#4C9EEB',
9509
+ secondary: '#14171A',
9510
+ light: '#FFFFFF'
9511
+ },
9512
+ accent: {
9513
+ light_1: '#E1E8ED',
9514
+ light_2: '#F5F8FA',
9515
+ light_3: '#F0F3F5',
9516
+ light_4: '#ECF0F4',
9517
+ light_5: '#F0F0F3',
9518
+ light_6: '#EFF8FF',
9519
+ softBlue: '#D4EEFF',
9520
+ extraSoftBlue: '#E4F4FF',
9521
+ boldTransparent: '#5E5E5E80',
9522
+ transparent: '#5E5E5E4D',
9523
+ lightTransparent: '#5E5E5E23'
9524
+ },
9525
+ "default": {
9526
+ primary: '#78B6F0',
9527
+ secondary: '#C2C2C2',
9528
+ tertiary: 'transparent',
9529
+ error: '#F44336',
9530
+ success: '#4CAF50',
9531
+ warning: '#FF9800',
9532
+ info: '#2159F3',
9533
+ critical: '#FF7518'
9534
+ },
9535
+ disabled: {
9536
+ primary: '#B9DCF7',
9537
+ secondary: '#DADADA',
9538
+ error: '#FFEBEE',
9539
+ success: '#E8F5E9',
9540
+ warning: '#FFF3E0',
9541
+ info: '#E3F2FD',
9542
+ critical: '#FFF5DA'
9543
+ },
9544
+ hover: {
9545
+ primary: '#4C9EEB',
9546
+ secondary: '#A3A3A3',
9547
+ tertiary: 'transparent',
9548
+ error: '#D32F2F',
9549
+ success: '#388E3C',
9550
+ warning: '#F57C00',
9551
+ info: '#193ED2',
9552
+ critical: '#CC5500'
9553
+ },
9554
+ border: {
9555
+ extraBold: '#657786',
9556
+ bold: '#BFBFBF',
9557
+ medium: '#CBCED0',
9558
+ light: '#DCDCDC',
9559
+ extraLight: '#E6E3E3'
9560
+ },
9561
+ text: {
9562
+ dark: '#14171A',
9563
+ medium: '#657786',
9564
+ light: '#98A2AA',
9565
+ white: '#FFFFFF',
9566
+ success: '#1B5E20',
9567
+ error: '#B71C1C',
9568
+ info: '#0D30A1',
9569
+ warning: '#E65100'
9570
+ },
9571
+ badge: {
9572
+ lavender: '#E8DAFF',
9573
+ papayaWhip: '#FFEDD5',
9574
+ water: '#C7E3FF',
9575
+ paleBlue: '#B0F0E4',
9576
+ teaGreen: '#D5F7C2',
9577
+ lightBlue: '#ADD8E6'
9578
+ }
9579
+ },
9580
+ AiProtectWebsite: {
9581
+ primary: {
9582
+ 50: '#F5FAFF',
9583
+ 100: '#EFF8FF',
9584
+ 200: '#D1E9FF',
9585
+ 300: '#B2DDFF',
9586
+ 400: '#84CAFF',
9587
+ 500: '#53B1FD',
9588
+ 600: '#2E90FA',
9589
+ 700: '#1570EF',
9590
+ 800: '#175CD3',
9591
+ 900: '#1849A9',
9592
+ 950: '#194185'
9593
+ },
9594
+ secondary: {
9595
+ 50: '#F3F7FA',
9596
+ 100: '#E8F3F7',
9597
+ 200: '#D6E7EF',
9598
+ 300: '#BCD7E5',
9599
+ 400: '#A1C1D8',
9600
+ 500: '#89ABCB',
9601
+ 600: '#7393BC',
9602
+ 700: '#5F7CA3',
9603
+ 800: '#4F6684',
9604
+ 900: '#44566B',
9605
+ 950: '#28323E'
9606
+ },
9607
+ gray: {
9608
+ 50: '#FFFFFF',
9609
+ 100: '#FAFAFA',
9610
+ 200: '#F5F5F5',
9611
+ 300: '#E5E5E5',
9612
+ 400: '#D6D6D6',
9613
+ 500: '#A3A3A3',
9614
+ 600: '#737373',
9615
+ 700: '#525252',
9616
+ 800: '#424242',
9617
+ 900: '#292929',
9618
+ 950: '#141414'
9619
+ },
9620
+ error: {
9621
+ 50: '#FFF0F0',
9622
+ 100: '#FFDDDD',
9623
+ 200: '#FFC0C0',
9624
+ 300: '#FF9494',
9625
+ 400: '#FF5757',
9626
+ 500: '#FF2323',
9627
+ 600: '#FF0000',
9628
+ 700: '#D70000',
9629
+ 800: '#B10303',
9630
+ 900: '#920A0A',
9631
+ 950: '#500000'
9653
9632
  },
9654
- onMouseLeave: function onMouseLeave() {
9655
- return setIsExpanded(false);
9633
+ success: {
9634
+ 50: '#F3FAF3',
9635
+ 100: '#E3F5E3',
9636
+ 200: '#C8EAC9',
9637
+ 300: '#9DD89F',
9638
+ 400: '#6ABE6E',
9639
+ 500: '#45A249',
9640
+ 600: '#388E3C',
9641
+ 700: '#2C692F',
9642
+ 800: '#275429',
9643
+ 900: '#224525',
9644
+ 950: '#0E2511'
9645
+ },
9646
+ warning: {
9647
+ 50: '#FFFBEC',
9648
+ 100: '#FFF7D3',
9649
+ 200: '#FFEBA5',
9650
+ 300: '#FFDB6D',
9651
+ 400: '#FFBF32',
9652
+ 500: '#FFA80A',
9653
+ 600: '#FA8E00',
9654
+ 700: '#CC6B02',
9655
+ 800: '#A1520B',
9656
+ 900: '#82450C',
9657
+ 950: '#462104'
9658
+ },
9659
+ info: {
9660
+ 50: '#F0F0FF',
9661
+ 100: '#E4E4FF',
9662
+ 200: '#CDCEFF',
9663
+ 300: '#A7A6FF',
9664
+ 400: '#7B73FF',
9665
+ 500: '#513BFF',
9666
+ 600: '#3C14FF',
9667
+ 700: '#2800FA',
9668
+ 800: '#2301D6',
9669
+ 900: '#1E03AF',
9670
+ 950: '#0E0077'
9671
+ },
9672
+ transparent: {
9673
+ white10: 'rgba(255,255,255,0.1)',
9674
+ white20: 'rgba(255,255,255,0.2)',
9675
+ white30: 'rgba(255,255,255,0.3)',
9676
+ white40: 'rgba(229, 229, 229, 0.4)',
9677
+ white50: 'rgba(255, 255, 255, 0.5)',
9678
+ black10: 'rgba(0,0,0,0.1)',
9679
+ black20: 'rgba(0,0,0,0.2)',
9680
+ black30: 'rgba(0,0,0,0.3)'
9656
9681
  }
9657
- }, React.createElement(Container, {
9658
- "$flexDirection": 'column',
9659
- "$gap": '28px',
9660
- "$width": '100%'
9661
- }, logo && (logo.icon ? React.createElement(Logo, null, React.createElement(Icon, {
9662
- icon: logo.icon,
9663
- color: logo.iconColor
9664
- }), React.createElement(TextContainer, {
9665
- "$isExpanded": isExpanded,
9666
- "$fontWeight": '700'
9667
- }, logo.name)) : logo.imageDetails && React.createElement(Logo, null, React.createElement("img", {
9668
- src: logo.imageDetails.url,
9669
- alt: logo.imageDetails.altText,
9670
- width: logo.imageDetails.width,
9671
- height: logo.imageDetails.height
9672
- }))), React.createElement(Container, {
9673
- "$flexDirection": 'column',
9674
- "$gap": '16px',
9675
- "$width": '100%'
9676
- }, content.map(function (item) {
9677
- var _item$children3;
9678
- var active = isRouteActive(item) || false;
9679
- var hasChildren = !!((_item$children3 = item.children) !== null && _item$children3 !== void 0 && _item$children3.length);
9680
- var isOpen = openMenus[item.id];
9681
- return React.createElement(SidebarItem, {
9682
- key: item.id,
9683
- item: item,
9684
- isActive: active,
9685
- isOpen: isOpen,
9686
- hasChildren: hasChildren,
9687
- isExpanded: isExpanded,
9688
- onToggle: function onToggle() {
9689
- return toggleMenu(item.id);
9690
- },
9691
- renderChildLinks: renderChildLinks
9692
- });
9693
- }))), ProfileContent);
9694
- };
9695
-
9696
- var _templateObject$o, _templateObject2$k, _templateObject3$d, _templateObject4$a;
9697
- var ContainerWrapper = styled.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) {
9698
- return props.$width || 'auto';
9699
- }, function (_ref) {
9700
- var $minHeight = _ref.$minHeight;
9701
- return $minHeight;
9702
- });
9703
- var CellContainer = styled.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) {
9704
- return props.$align;
9705
- }, function (props) {
9706
- return props.$width || 'auto';
9707
- }, function (props) {
9708
- return props.$minWidth;
9709
- }, function (props) {
9710
- return props.$background || 'inherit';
9711
- }, function (props) {
9712
- return props.$padding;
9713
- });
9714
- var MainText = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-size:", ";\n font-weight:", ";\n line-height: 100%;\n"])), function (props) {
9715
- return props.$mtc;
9716
- }, function (props) {
9717
- return props.$mtfs;
9718
- }, function (props) {
9719
- return props.$mtw;
9720
- });
9721
- var SubText = styled.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-size:", ";\n font-weight:", ";\n line-height: 100%;\n"])), function (props) {
9722
- return props.$stc;
9723
- }, function (props) {
9724
- return props.$stfs;
9725
- }, function (props) {
9726
- return props.$stw;
9727
- });
9728
- var TableCell = function TableCell(_ref2) {
9729
- var maintext = _ref2.maintext,
9730
- _ref2$maintextcolor = _ref2.maintextcolor,
9731
- maintextcolor = _ref2$maintextcolor === void 0 ? 'inherit' : _ref2$maintextcolor,
9732
- _ref2$maintextfontsiz = _ref2.maintextfontsize,
9733
- maintextfontsize = _ref2$maintextfontsiz === void 0 ? '14px' : _ref2$maintextfontsiz,
9734
- _ref2$maintextweight = _ref2.maintextweight,
9735
- maintextweight = _ref2$maintextweight === void 0 ? '500' : _ref2$maintextweight,
9736
- subtext = _ref2.subtext,
9737
- _ref2$subtextcolor = _ref2.subtextcolor,
9738
- subtextcolor = _ref2$subtextcolor === void 0 ? 'inherit' : _ref2$subtextcolor,
9739
- _ref2$subtextfontsize = _ref2.subtextfontsize,
9740
- subtextfontsize = _ref2$subtextfontsize === void 0 ? '10px' : _ref2$subtextfontsize,
9741
- _ref2$subtextweight = _ref2.subtextweight,
9742
- subtextweight = _ref2$subtextweight === void 0 ? '400' : _ref2$subtextweight,
9743
- _ref2$alignment = _ref2.alignment,
9744
- alignment = _ref2$alignment === void 0 ? 'center' : _ref2$alignment,
9745
- width = _ref2.width,
9746
- minWidth = _ref2.minWidth,
9747
- CustomFunction = _ref2.CustomFunction,
9748
- padding = _ref2.padding,
9749
- minHeight = _ref2.minHeight;
9750
- return React.createElement(ContainerWrapper, {
9751
- "$width": width,
9752
- "$minHeight": minHeight
9753
- }, CustomFunction ? React.createElement(CellContainer, {
9754
- "$align": alignment,
9755
- "$width": width,
9756
- "$minWidth": minWidth
9757
- }, CustomFunction) : React.createElement(CellContainer, {
9758
- "$align": alignment,
9759
- "$width": width,
9760
- "$minWidth": minWidth,
9761
- "$padding": padding
9762
- }, React.createElement(MainText, {
9763
- "$mtc": maintextcolor,
9764
- "$mtfs": maintextfontsize,
9765
- "$mtw": maintextweight
9766
- }, maintext), subtext && React.createElement(SubText, {
9767
- "$stc": subtextcolor,
9768
- "$stfs": subtextfontsize,
9769
- "$stw": subtextweight
9770
- }, subtext)));
9771
- };
9772
-
9773
- var _templateObject$p;
9774
- var TableRowContainer = styled$1.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"])));
9775
- var TableRow = function TableRow(_ref) {
9776
- var rowconfig = _ref.rowconfig,
9777
- tableheaderconfig = _ref.tableheaderconfig,
9778
- selectCallback = _ref.selectCallback;
9779
- var toggleChecked = function toggleChecked(index) {
9780
- var currentRow = rowconfig[index];
9781
- var newChecked = !currentRow._checked;
9782
- if (selectCallback && currentRow.id !== undefined) {
9783
- selectCallback(newChecked, currentRow.id);
9682
+ },
9683
+ SNetLabsWebsite: {
9684
+ primary: {
9685
+ 50: '#F5FAFF',
9686
+ 100: '#EFF8FF',
9687
+ 200: '#D1E9FF',
9688
+ 300: '#B2DDFF',
9689
+ 400: '#84CAFF',
9690
+ 500: '#53B1FD',
9691
+ 600: '#2E90FA',
9692
+ 700: '#1570EF',
9693
+ 800: '#175CD3',
9694
+ 900: '#1849A9',
9695
+ 950: '#194185'
9696
+ },
9697
+ secondary: {
9698
+ 50: '#F3F7FA',
9699
+ 100: '#E8F3F7',
9700
+ 200: '#D6E7EF',
9701
+ 300: '#BCD7E5',
9702
+ 400: '#A1C1D8',
9703
+ 500: '#89ABCB',
9704
+ 600: '#7393BC',
9705
+ 700: '#5F7CA3',
9706
+ 800: '#4F6684',
9707
+ 900: '#44566B',
9708
+ 950: '#28323E'
9709
+ },
9710
+ gray: {
9711
+ 50: '#FFFFFF',
9712
+ 100: '#FAFAFA',
9713
+ 200: '#F5F5F5',
9714
+ 300: '#E5E5E5',
9715
+ 400: '#D6D6D6',
9716
+ 500: '#A3A3A3',
9717
+ 600: '#737373',
9718
+ 700: '#525252',
9719
+ 800: '#424242',
9720
+ 900: '#292929',
9721
+ 950: '#141414'
9722
+ },
9723
+ error: {
9724
+ 50: '#FFF0F0',
9725
+ 100: '#FFDDDD',
9726
+ 200: '#FFC0C0',
9727
+ 300: '#FF9494',
9728
+ 400: '#FF5757',
9729
+ 500: '#FF2323',
9730
+ 600: '#FF0000',
9731
+ 700: '#D70000',
9732
+ 800: '#B10303',
9733
+ 900: '#920A0A',
9734
+ 950: '#500000'
9735
+ },
9736
+ success: {
9737
+ 50: '#F3FAF3',
9738
+ 100: '#E3F5E3',
9739
+ 200: '#C8EAC9',
9740
+ 300: '#9DD89F',
9741
+ 400: '#6ABE6E',
9742
+ 500: '#45A249',
9743
+ 600: '#388E3C',
9744
+ 700: '#2C692F',
9745
+ 800: '#275429',
9746
+ 900: '#224525',
9747
+ 950: '#0E2511'
9748
+ },
9749
+ warning: {
9750
+ 50: '#FFF4E6',
9751
+ 100: '#FEE8CC',
9752
+ 200: '#FEDDB3',
9753
+ 300: '#FDD199',
9754
+ 400: '#FDBA66',
9755
+ 500: '#FCA333',
9756
+ 600: '#FB8C00',
9757
+ 700: '#C96000',
9758
+ 800: '#950300',
9759
+ 900: '#643700',
9760
+ 950: '#4B2A00'
9761
+ },
9762
+ info: {
9763
+ 50: '#F0F0FF',
9764
+ 100: '#E4E4FF',
9765
+ 200: '#CDCEFF',
9766
+ 300: '#A7A6FF',
9767
+ 400: '#7B73FF',
9768
+ 500: '#513BFF',
9769
+ 600: '#3C14FF',
9770
+ 700: '#2800FA',
9771
+ 800: '#2301D6',
9772
+ 900: '#1E03AF',
9773
+ 950: '#0E0077'
9774
+ },
9775
+ tertiary: {
9776
+ 50: '#ECFCFA',
9777
+ 100: '#D9F9F6',
9778
+ 200: '#C6F6F1',
9779
+ 300: '#B3F3EC',
9780
+ 400: '#8CECE3',
9781
+ 500: '#66E6D9',
9782
+ 600: '#40E0D0',
9783
+ 700: '#33B3A6',
9784
+ 800: '#26867D',
9785
+ 900: '#1A5A53',
9786
+ 950: '#13433E'
9787
+ },
9788
+ purple: {
9789
+ 50: '#F3EEFB',
9790
+ 100: '#E7DEF7',
9791
+ 200: '#DBCDF3',
9792
+ 300: '#CFBCEF',
9793
+ 400: '#B89BE6',
9794
+ 500: '#A079DE',
9795
+ 600: '#8858D6',
9796
+ 700: '#6D47AC',
9797
+ 800: '#533582',
9798
+ 900: '#382459',
9799
+ 950: '#2B1B44'
9800
+ },
9801
+ yellow: {
9802
+ 50: '#FFFBE7',
9803
+ 100: '#FFF7CE',
9804
+ 200: '#FFF3B5',
9805
+ 300: '#FFEF9D',
9806
+ 400: '#FFE66C',
9807
+ 500: '#FFDE3B',
9808
+ 600: '#FFD60A',
9809
+ 700: '#CCAB08',
9810
+ 800: '#997006',
9811
+ 900: '#665604',
9812
+ 950: '#4D3003'
9813
+ },
9814
+ transparent: {
9815
+ white10: '#FFFFFF1A',
9816
+ white20: '#FFFFFF33',
9817
+ white30: '#FFFFFF4D',
9818
+ white100: '#FFF7CE',
9819
+ white200: '#FFF3B5',
9820
+ white300: '#FFEF9D',
9821
+ black100: '#0000001A',
9822
+ black200: '#00000033',
9823
+ black300: '#0000004D'
9784
9824
  }
9785
- };
9786
- return React.createElement(Container, null, rowconfig.map(function (data, Index) {
9787
- return React.createElement(TableRowContainer, {
9788
- key: Index
9789
- }, tableheaderconfig.isAllSelectable && React.createElement(Container, {
9790
- "$padding": '0px 16px 0px 0px',
9791
- "$alignItems": 'center'
9792
- }, React.createElement(StyledCheckBox, {
9793
- type: 'checkbox',
9794
- "$checkboxSize": 13.5,
9795
- checked: data._checked,
9796
- "$checked": data._checked,
9797
- onChange: function onChange() {
9798
- return toggleChecked(Index);
9799
- },
9800
- disabled: data === null || data === void 0 ? void 0 : data._selectable,
9801
- "$borderSize": 2
9802
- })), data.rowData.map(function (cellData, cellkey) {
9803
- var _tableheaderconfig$he;
9804
- return React.createElement(TableCell, {
9805
- key: cellkey,
9806
- maintext: cellData.maintext,
9807
- width: (_tableheaderconfig$he = tableheaderconfig.headerdata[cellkey]) === null || _tableheaderconfig$he === void 0 ? void 0 : _tableheaderconfig$he.width,
9808
- background: cellData.background,
9809
- maintextcolor: cellData.maintextcolor,
9810
- maintextfontsize: cellData.maintextfontsize,
9811
- maintextweight: cellData.maintextweight,
9812
- subtext: cellData.subtext,
9813
- subtextcolor: cellData.subtextcolor,
9814
- subtextfontsize: cellData.subtextfontsize,
9815
- subtextweight: cellData.subtextweight,
9816
- alignment: cellData.alignment,
9817
- CustomFunction: cellData.CustomFunction,
9818
- minHeight: '30px'
9819
- });
9820
- }));
9821
- }));
9825
+ }
9822
9826
  };
9823
-
9824
- var _templateObject$q, _templateObject2$l, _templateObject3$e, _templateObject4$b, _templateObject5$9, _templateObject6$8;
9825
- var TableContainer = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n background: ", ";\n width: 100%;\n display: flex;\n overflow: hidden;\n border-radius: 8px;\n"])), function (_ref) {
9826
- var theme = _ref.theme;
9827
- return theme.vms.brand.light;
9828
- });
9829
- var TableHeader = styled.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) {
9830
- var $hbcolor = _ref2.$hbcolor,
9831
- theme = _ref2.theme;
9832
- return $hbcolor || theme.vms["default"].tertiary;
9833
- }, function (_ref3) {
9834
- var $tcolor = _ref3.$tcolor,
9835
- theme = _ref3.theme;
9836
- return $tcolor || theme.vms.text.white;
9837
- });
9838
- var TableContent = styled.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n width: 100%;\n svg {\n cursor: pointer;\n }\n"])));
9839
- var TableData = styled.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n overflow: auto;\n scrollbar-width: thin;\n height: 100%;\n max-height: ", ";\n"])), function (_ref4) {
9840
- var $isLegends = _ref4.$isLegends;
9841
- return $isLegends ? 'calc(100% - 56px)' : 'calc(100% - 36px)';
9842
- });
9843
- var LegendDivider = styled.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background: ", ";\n margin-right: ", ";\n"])), function (_ref5) {
9844
- var theme = _ref5.theme;
9845
- return theme.vms.border.extraLight;
9846
- }, function (_ref6) {
9847
- var $marginRight = _ref6.$marginRight;
9848
- return $marginRight != null ? $marginRight : '0px';
9849
- });
9850
- var Divider = styled.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n height: 2px;\n background: ", ";\n"])), function (_ref7) {
9851
- var theme = _ref7.theme;
9852
- return theme.vms.border.extraLight;
9853
- });
9854
- var Table = function Table(_ref8) {
9855
- var tableObject = _ref8.tableObject,
9856
- _ref8$filter = _ref8.filter,
9857
- filter = _ref8$filter === void 0 ? false : _ref8$filter,
9858
- loading = _ref8.loading,
9859
- _ref8$noDataText = _ref8.noDataText,
9860
- noDataText = _ref8$noDataText === void 0 ? 'No Data Found!' : _ref8$noDataText;
9861
- var themeColors = useTheme();
9862
- var rowconfig = tableObject.rowconfig,
9863
- tableheaderconfig = tableObject.tableheaderconfig;
9864
- var _useState = useState(new Set()),
9865
- collapsedRoles = _useState[0],
9866
- setCollapsedRoles = _useState[1];
9867
- var _useState2 = useState(false),
9868
- isAllSelected = _useState2[0],
9869
- setIsAllSelected = _useState2[1];
9870
- var getRole = function getRole(row) {
9871
- var _row$rowData, _row$rowData$, _row$rowData$$CustomF, _row$rowData$$CustomF2, _row$rowData2, _row$rowData2$, _row$rowData2$$Custom, _row$rowData2$$Custom2;
9872
- 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';
9873
- };
9874
- var filteredRows = filter ? rowconfig.filter(function (row) {
9875
- return getRole(row);
9876
- }) : rowconfig;
9877
- var roleGroups = {};
9878
- filteredRows.forEach(function (row) {
9879
- var role = getRole(row);
9880
- if (!roleGroups[role]) roleGroups[role] = [];
9881
- roleGroups[role].push(row);
9882
- });
9883
- var toggleRoleVisibility = function toggleRoleVisibility(role) {
9884
- setCollapsedRoles(function (prev) {
9885
- var newSet = new Set(prev);
9886
- if (newSet.has(role)) {
9887
- newSet["delete"](role);
9888
- } else {
9889
- newSet.add(role);
9890
- }
9891
- return newSet;
9892
- });
9893
- };
9894
- var toggleSelectAll = function toggleSelectAll() {
9895
- var _tableObject$toggleAl;
9896
- var newState = !isAllSelected;
9897
- (_tableObject$toggleAl = tableObject.toggleAllCallback) === null || _tableObject$toggleAl === void 0 ? void 0 : _tableObject$toggleAl.call(tableObject, newState);
9898
- };
9899
- useEffect(function () {
9900
- if (!(rowconfig !== null && rowconfig !== void 0 && rowconfig.length)) {
9901
- setIsAllSelected(false);
9902
- return;
9827
+ var dark = {
9828
+ vms: {
9829
+ brand: {
9830
+ primary: '#4C9EEB',
9831
+ secondary: '#E1E8ED',
9832
+ light: '#1A1A1A'
9833
+ },
9834
+ accent: {
9835
+ light_1: '#2A2E33',
9836
+ light_2: '#1F2327',
9837
+ light_3: '#0F1214',
9838
+ light_4: '#101417',
9839
+ light_5: '#0F0F0C',
9840
+ light_6: '#0D3B66',
9841
+ softBlue: '#2C3E50',
9842
+ extraSoftBlue: '#34495E',
9843
+ boldTransparent: '#D3D3D380',
9844
+ transparent: '#D3D3D34D',
9845
+ lightTransparent: '#D3D3D323'
9846
+ },
9847
+ "default": {
9848
+ primary: '#78B6F0',
9849
+ secondary: '#4F4F4F',
9850
+ tertiary: 'transparent',
9851
+ error: '#EF5350',
9852
+ success: '#66BB6A',
9853
+ warning: '#FFB74D',
9854
+ info: '#42A5F5',
9855
+ critical: '#FF7518'
9856
+ },
9857
+ disabled: {
9858
+ primary: '#3B4A58',
9859
+ secondary: '#3E3E3E',
9860
+ error: '#5B1B1B',
9861
+ success: '#1B3C1B',
9862
+ warning: '#5A3C1B',
9863
+ info: '#1A3C5A',
9864
+ critical: '#FFF5DA'
9865
+ },
9866
+ hover: {
9867
+ primary: '#5CA6F0',
9868
+ secondary: '#7A7A7A',
9869
+ tertiary: 'transparent',
9870
+ error: '#D32F2F',
9871
+ success: '#388E3C',
9872
+ warning: '#F57C00',
9873
+ info: '#1976D2',
9874
+ critical: '#CC5500'
9875
+ },
9876
+ border: {
9877
+ extraBold: '#8899A6',
9878
+ bold: '#5E5E5E',
9879
+ medium: '#4A4A4A',
9880
+ light: '#3A3A3A',
9881
+ extraLight: '#2B2B2B'
9882
+ },
9883
+ text: {
9884
+ dark: '#FFFFFF',
9885
+ medium: '#FFFFFF',
9886
+ light: '#8899A6',
9887
+ white: '#14171A',
9888
+ success: '#81C784',
9889
+ error: '#E57373',
9890
+ info: '#64B5F6',
9891
+ warning: '#FFB74D'
9892
+ },
9893
+ badge: {
9894
+ lavender: '#7B5FA1',
9895
+ papayaWhip: '#A46A3E',
9896
+ water: '#5CA6F0',
9897
+ paleBlue: '#4BC9BC',
9898
+ teaGreen: '#7FBF7F',
9899
+ lightBlue: '#5DADE2'
9903
9900
  }
9904
- var allChecked = rowconfig.every(function (row) {
9905
- return row._checked;
9906
- });
9907
- setIsAllSelected(allChecked);
9908
- }, [rowconfig]);
9909
- return React.createElement(TableContainer, null, React.createElement(TableContent, null, React.createElement(TableHeader, {
9910
- "$hbcolor": tableheaderconfig.headercolor,
9911
- "$tcolor": tableheaderconfig.textcolor
9912
- }, tableheaderconfig.isAllSelectable && React.createElement(Container, {
9913
- "$padding": '0px 16px 0px 0px',
9914
- "$alignItems": 'end',
9915
- "$height": '-webkit-fill-available'
9916
- }, React.createElement(StyledCheckBox, {
9917
- type: 'checkbox',
9918
- "$checkboxSize": 13.5,
9919
- checked: isAllSelected,
9920
- "$checked": isAllSelected,
9921
- onChange: toggleSelectAll,
9922
- "$borderSize": 2
9923
- })), tableheaderconfig.headerdata.map(function (columndata, index, allCols) {
9924
- var _allCols, _columndata$maintext;
9925
- var currentGroupTitle = columndata.groupTitle || '';
9926
- var prevGroupTitle = index > 0 ? allCols[index - 1].groupTitle || '' : '';
9927
- var isFirstOfGroup = currentGroupTitle && currentGroupTitle !== prevGroupTitle;
9928
- var isInLegendGroup = !!currentGroupTitle;
9929
- return React.createElement(Container, {
9930
- key: index,
9931
- "$flexDirection": 'column',
9932
- "$width": columndata.width || '100px',
9933
- "$gap": '8px'
9934
- }, tableheaderconfig.headerdata.some(function (col) {
9935
- return !!col.groupTitle;
9936
- }) && React.createElement(Container, {
9937
- "$alignItems": 'center',
9938
- "$height": '16px'
9939
- }, isInLegendGroup ? React.createElement(Container, {
9940
- "$width": '100%'
9941
- }, isFirstOfGroup ? React.createElement(Container, {
9942
- "$width": '100%',
9943
- "$alignItems": 'center',
9944
- "$gap": '4px'
9945
- }, React.createElement(Span, {
9946
- "$fontSize": '12px',
9947
- "$fontWeight": '400',
9948
- "$width": 'max-content',
9949
- "$lineHeight": 'normal'
9950
- }, currentGroupTitle), React.createElement(LegendDivider, null)) : React.createElement(LegendDivider, {
9951
- "$marginRight": currentGroupTitle !== (((_allCols = allCols[index + 1]) === null || _allCols === void 0 ? void 0 : _allCols.groupTitle) || '') ? '8px' : '0px'
9952
- })) : null), React.createElement(TableCell, {
9953
- maintext: (_columndata$maintext = columndata.maintext) != null ? _columndata$maintext : '',
9954
- width: columndata.width,
9955
- alignment: columndata.alignment
9956
- }));
9957
- })), React.createElement(Divider, null), loading ? React.createElement(Container, {
9958
- "$flexDirection": 'column',
9959
- "$alignItems": 'center',
9960
- "$justifyContent": 'center',
9961
- "$padding": '24px 24px'
9962
- }, React.createElement(Loader, {
9963
- title: 'Loading users'
9964
- })) : rowconfig.length === 0 ? React.createElement(Container, {
9965
- "$flexDirection": 'column',
9966
- "$alignItems": 'center',
9967
- "$padding": '24px 24px',
9968
- "$justifyContent": 'center'
9969
- }, React.createElement(Span, null, noDataText)) : filter ? React.createElement(TableData, {
9970
- "$isLegends": tableheaderconfig.headerdata.some(function (col) {
9971
- return !!col.groupTitle;
9972
- })
9973
- }, Object.entries(roleGroups).map(function (_ref9) {
9974
- var role = _ref9[0],
9975
- rows = _ref9[1];
9976
- return React.createElement(React.Fragment, {
9977
- key: role
9978
- }, React.createElement(Container, {
9979
- "$justifyContent": 'space-between',
9980
- "$padding": '9px 12px',
9981
- "$minHeight": '30px',
9982
- "$alignItems": 'center',
9983
- "$background": themeColors.vms.accent.light_1,
9984
- onClick: function onClick() {
9985
- return toggleRoleVisibility(role);
9986
- },
9987
- "$cursor": 'pointer',
9988
- "$border": "1px solid " + themeColors.vms.border.extraLight
9989
- }, React.createElement(Span, {
9990
- "$color": themeColors.vms.text.medium,
9991
- "$fontSize": '12px',
9992
- "$lineHeight": '100%'
9993
- }, role, " (", rows.length, ")"), React.createElement(Icon, {
9994
- size: 12,
9995
- icon: collapsedRoles.has(role) ? 'UpArrow' : 'DownArrow'
9996
- })), !collapsedRoles.has(role) && rows.map(function (row, index) {
9997
- return React.createElement(Container, {
9998
- key: index,
9999
- "$flexDirection": 'column'
10000
- }, React.createElement(TableRow, {
10001
- rowconfig: [row],
10002
- tableheaderconfig: tableheaderconfig,
10003
- selectCallback: tableObject.selectCallback
10004
- }), rows.length > 1 && index < rows.length - 1 && React.createElement(Divider, null));
10005
- }));
10006
- })) : React.createElement(TableData, {
10007
- "$isLegends": tableheaderconfig.headerdata.some(function (col) {
10008
- return !!col.groupTitle;
10009
- })
10010
- }, filteredRows.map(function (row, index) {
10011
- return React.createElement(React.Fragment, {
10012
- key: index
10013
- }, React.createElement(TableRow, {
10014
- rowconfig: [row],
10015
- tableheaderconfig: tableheaderconfig,
10016
- selectCallback: tableObject.selectCallback
10017
- }), filteredRows.length > 1 && index < filteredRows.length - 1 && React.createElement(Divider, null));
10018
- }))));
9901
+ },
9902
+ AiProtectWebsite: {
9903
+ primary: {
9904
+ 50: '#F5FAFF',
9905
+ 100: '#EFF8FF',
9906
+ 200: '#D1E9FF',
9907
+ 300: '#B2DDFF',
9908
+ 400: '#84CAFF',
9909
+ 500: '#53B1FD',
9910
+ 600: '#2E90FA',
9911
+ 700: '#1570EF',
9912
+ 800: '#175CD3',
9913
+ 900: '#1849A9',
9914
+ 950: '#194185'
9915
+ },
9916
+ secondary: {
9917
+ 50: '#F3F7FA',
9918
+ 100: '#E8F3F7',
9919
+ 200: '#D6E7EF',
9920
+ 300: '#BCD7E5',
9921
+ 400: '#A1C1D8',
9922
+ 500: '#89ABCB',
9923
+ 600: '#7393BC',
9924
+ 700: '#5F7CA3',
9925
+ 800: '#4F6684',
9926
+ 900: '#44566B',
9927
+ 950: '#28323E'
9928
+ },
9929
+ gray: {
9930
+ 50: '#FFFFFF',
9931
+ 100: '#FAFAFA',
9932
+ 200: '#F5F5F5',
9933
+ 300: '#E5E5E5',
9934
+ 400: '#D6D6D6',
9935
+ 500: '#A3A3A3',
9936
+ 600: '#737373',
9937
+ 700: '#525252',
9938
+ 800: '#424242',
9939
+ 900: '#292929',
9940
+ 950: '#141414'
9941
+ },
9942
+ error: {
9943
+ 50: '#FFF0F0',
9944
+ 100: '#FFDDDD',
9945
+ 200: '#FFC0C0',
9946
+ 300: '#FF9494',
9947
+ 400: '#FF5757',
9948
+ 500: '#FF2323',
9949
+ 600: '#FF0000',
9950
+ 700: '#D70000',
9951
+ 800: '#B10303',
9952
+ 900: '#920A0A',
9953
+ 950: '#500000'
9954
+ },
9955
+ success: {
9956
+ 50: '#F3FAF3',
9957
+ 100: '#E3F5E3',
9958
+ 200: '#C8EAC9',
9959
+ 300: '#9DD89F',
9960
+ 400: '#6ABE6E',
9961
+ 500: '#45A249',
9962
+ 600: '#388E3C',
9963
+ 700: '#2C692F',
9964
+ 800: '#275429',
9965
+ 900: '#224525',
9966
+ 950: '#0E2511'
9967
+ },
9968
+ warning: {
9969
+ 50: '#FFFBEC',
9970
+ 100: '#FFF7D3',
9971
+ 200: '#FFEBA5',
9972
+ 300: '#FFDB6D',
9973
+ 400: '#FFBF32',
9974
+ 500: '#FFA80A',
9975
+ 600: '#FA8E00',
9976
+ 700: '#CC6B02',
9977
+ 800: '#A1520B',
9978
+ 900: '#82450C',
9979
+ 950: '#462104'
9980
+ },
9981
+ info: {
9982
+ 50: '#F0F0FF',
9983
+ 100: '#E4E4FF',
9984
+ 200: '#CDCEFF',
9985
+ 300: '#A7A6FF',
9986
+ 400: '#7B73FF',
9987
+ 500: '#513BFF',
9988
+ 600: '#3C14FF',
9989
+ 700: '#2800FA',
9990
+ 800: '#2301D6',
9991
+ 900: '#1E03AF',
9992
+ 950: '#0E0077'
9993
+ },
9994
+ transparent: {
9995
+ white10: 'rgba(255,255,255,0.1)',
9996
+ white20: 'rgba(255,255,255,0.2)',
9997
+ white30: 'rgba(255,255,255,0.3)',
9998
+ white40: 'rgba(229, 229, 229, 0.4)',
9999
+ white50: 'rgba(255, 255, 255, 0.5)',
10000
+ black10: 'rgba(0,0,0,0.1)',
10001
+ black20: 'rgba(0,0,0,0.2)',
10002
+ black30: 'rgba(0,0,0,0.3)'
10003
+ }
10004
+ },
10005
+ SNetLabsWebsite: {
10006
+ primary: {
10007
+ 50: '#F5FAFF',
10008
+ 100: '#EFF8FF',
10009
+ 200: '#D1E9FF',
10010
+ 300: '#B2DDFF',
10011
+ 400: '#84CAFF',
10012
+ 500: '#53B1FD',
10013
+ 600: '#2E90FA',
10014
+ 700: '#1570EF',
10015
+ 800: '#175CD3',
10016
+ 900: '#1849A9',
10017
+ 950: '#194185'
10018
+ },
10019
+ secondary: {
10020
+ 50: '#F3F7FA',
10021
+ 100: '#E8F3F7',
10022
+ 200: '#D6E7EF',
10023
+ 300: '#BCD7E5',
10024
+ 400: '#A1C1D8',
10025
+ 500: '#89ABCB',
10026
+ 600: '#7393BC',
10027
+ 700: '#5F7CA3',
10028
+ 800: '#4F6684',
10029
+ 900: '#44566B',
10030
+ 950: '#28323E'
10031
+ },
10032
+ gray: {
10033
+ 50: '#FFFFFF',
10034
+ 100: '#FAFAFA',
10035
+ 200: '#F5F5F5',
10036
+ 300: '#E5E5E5',
10037
+ 400: '#D6D6D6',
10038
+ 500: '#A3A3A3',
10039
+ 600: '#737373',
10040
+ 700: '#525252',
10041
+ 800: '#424242',
10042
+ 900: '#292929',
10043
+ 950: '#141414'
10044
+ },
10045
+ error: {
10046
+ 50: '#FFF0F0',
10047
+ 100: '#FFDDDD',
10048
+ 200: '#FFC0C0',
10049
+ 300: '#FF9494',
10050
+ 400: '#FF5757',
10051
+ 500: '#FF2323',
10052
+ 600: '#FF0000',
10053
+ 700: '#D70000',
10054
+ 800: '#B10303',
10055
+ 900: '#920A0A',
10056
+ 950: '#500000'
10057
+ },
10058
+ success: {
10059
+ 50: '#F3FAF3',
10060
+ 100: '#E3F5E3',
10061
+ 200: '#C8EAC9',
10062
+ 300: '#9DD89F',
10063
+ 400: '#6ABE6E',
10064
+ 500: '#45A249',
10065
+ 600: '#388E3C',
10066
+ 700: '#2C692F',
10067
+ 800: '#275429',
10068
+ 900: '#224525',
10069
+ 950: '#0E2511'
10070
+ },
10071
+ warning: {
10072
+ 50: '#FFF4E6',
10073
+ 100: '#FEE8CC',
10074
+ 200: '#FEDDB3',
10075
+ 300: '#FDD199',
10076
+ 400: '#FDBA66',
10077
+ 500: '#FCA333',
10078
+ 600: '#FB8C00',
10079
+ 700: '#C96000',
10080
+ 800: '#950300',
10081
+ 900: '#643700',
10082
+ 950: '#4B2A00'
10083
+ },
10084
+ info: {
10085
+ 50: '#F0F0FF',
10086
+ 100: '#E4E4FF',
10087
+ 200: '#CDCEFF',
10088
+ 300: '#A7A6FF',
10089
+ 400: '#7B73FF',
10090
+ 500: '#513BFF',
10091
+ 600: '#3C14FF',
10092
+ 700: '#2800FA',
10093
+ 800: '#2301D6',
10094
+ 900: '#1E03AF',
10095
+ 950: '#0E0077'
10096
+ },
10097
+ tertiary: {
10098
+ 50: '#ECFCFA',
10099
+ 100: '#D9F9F6',
10100
+ 200: '#C6F6F1',
10101
+ 300: '#B3F3EC',
10102
+ 400: '#8CECE3',
10103
+ 500: '#66E6D9',
10104
+ 600: '#40E0D0',
10105
+ 700: '#33B3A6',
10106
+ 800: '#26867D',
10107
+ 900: '#1A5A53',
10108
+ 950: '#13433E'
10109
+ },
10110
+ purple: {
10111
+ 50: '#F3EEFB',
10112
+ 100: '#E7DEF7',
10113
+ 200: '#DBCDF3',
10114
+ 300: '#CFBCEF',
10115
+ 400: '#B89BE6',
10116
+ 500: '#A079DE',
10117
+ 600: '#8858D6',
10118
+ 700: '#6D47AC',
10119
+ 800: '#533582',
10120
+ 900: '#382459',
10121
+ 950: '#2B1B44'
10122
+ },
10123
+ yellow: {
10124
+ 50: '#FFFBE7',
10125
+ 100: '#FFF7CE',
10126
+ 200: '#FFF3B5',
10127
+ 300: '#FFEF9D',
10128
+ 400: '#FFE66C',
10129
+ 500: '#FFDE3B',
10130
+ 600: '#FFD60A',
10131
+ 700: '#CCAB08',
10132
+ 800: '#997006',
10133
+ 900: '#665604',
10134
+ 950: '#4D3003'
10135
+ },
10136
+ transparent: {
10137
+ white10: '#FFFFFF1A',
10138
+ white20: '#FFFFFF33',
10139
+ white30: '#FFFFFF4D',
10140
+ white100: '#FFF7CE',
10141
+ white200: '#FFF3B5',
10142
+ white300: '#FFEF9D',
10143
+ black100: '#0000001A',
10144
+ black200: '#00000033',
10145
+ black300: '#0000004D'
10146
+ }
10147
+ }
10019
10148
  };
10020
-
10021
- var _templateObject$r, _templateObject2$m, _templateObject3$f, _templateObject4$c, _templateObject5$a, _templateObject6$9;
10022
- var Container$4 = styled.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) {
10023
- var $overflow = _ref.$overflow;
10024
- return $overflow || 'visible';
10025
- }, function (_ref2) {
10026
- var $gap = _ref2.$gap;
10027
- return $gap;
10028
- }, function (_ref3) {
10029
- var $border = _ref3.$border;
10030
- return $border;
10031
- });
10032
- var FirstContainer = styled.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) {
10033
- var $bordeBottom = _ref4.$bordeBottom,
10034
- theme = _ref4.theme;
10035
- return $bordeBottom != null ? $bordeBottom : "1px solid " + theme.vms.border.light;
10036
- }, function (_ref5) {
10037
- var $headerPadding = _ref5.$headerPadding;
10038
- return $headerPadding ? $headerPadding : '0px';
10039
- });
10040
- var TabContainer = styled.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) {
10041
- var $disabled = _ref6.$disabled;
10042
- return $disabled ? 'not-allowed' : 'pointer';
10043
- }, function (_ref7) {
10044
- var $disabled = _ref7.$disabled;
10045
- return $disabled ? '0.6' : '1';
10046
- }, function (_ref8) {
10047
- var theme = _ref8.theme;
10048
- return theme.vms.text.medium;
10049
- }, function (_ref9) {
10050
- var $headerHeight = _ref9.$headerHeight;
10051
- return $headerHeight ? $headerHeight : '34px';
10052
- }, function (_ref10) {
10053
- var $disabled = _ref10.$disabled;
10054
- return $disabled ? 'not-allowed' : 'pointer';
10055
- });
10056
- var TabItemContainer = styled.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) {
10057
- var $headerHeight = _ref11.$headerHeight;
10058
- return $headerHeight ? $headerHeight : '34px';
10059
- }, function (props) {
10060
- return props.$active ? 'block' : 'none';
10061
- }, function (_ref12) {
10062
- var theme = _ref12.theme;
10063
- return theme.vms["default"].primary;
10064
- });
10065
- var DetailsFirstContainer = styled.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) {
10066
- var $active = _ref13.$active,
10067
- theme = _ref13.theme;
10068
- return $active ? theme.vms["default"].primary : theme.vms.text.medium;
10069
- });
10070
- var TabItemsWrapper = styled.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"])));
10071
- var Tabs = function Tabs(_ref14) {
10072
- var tabItems = _ref14.tabItems,
10073
- _ref14$disabled = _ref14.disabled,
10074
- disabled = _ref14$disabled === void 0 ? false : _ref14$disabled,
10075
- headerHeight = _ref14.headerHeight,
10076
- headerPadding = _ref14.headerPadding,
10077
- activeTab = _ref14.activeTab,
10078
- border = _ref14.border,
10079
- _ref14$gap = _ref14.gap,
10080
- gap = _ref14$gap === void 0 ? '24px' : _ref14$gap,
10081
- overflow = _ref14.overflow,
10082
- bordeBottom = _ref14.bordeBottom,
10083
- tabRightNode = _ref14.tabRightNode;
10084
- var themeColors = useTheme();
10085
- return React.createElement(Container$4, {
10086
- "$gap": gap,
10087
- "$border": border,
10088
- "$overflow": overflow
10089
- }, React.createElement(FirstContainer, {
10090
- "$headerPadding": headerPadding,
10091
- "$bordeBottom": bordeBottom
10092
- }, React.createElement(TabItemsWrapper, null, tabItems.map(function (tab, index) {
10093
- return React.createElement(TabContainer, {
10094
- key: index,
10095
- onClick: function onClick() {
10096
- if (!disabled && tab.onClick) tab.onClick();
10097
- },
10098
- "$disabled": disabled,
10099
- "$headerHeight": headerHeight
10100
- }, React.createElement(TabItemContainer, {
10101
- "$active": activeTab === tab.title,
10102
- "$headerHeight": headerHeight
10103
- }, tab.icon && React.createElement(Icon, {
10104
- color: activeTab === tab.title ? tab.activeColor : themeColors.vms.text.medium,
10105
- icon: tab.icon,
10106
- size: tab.iconSize,
10107
- weight: tab.iconWeight
10108
- }), React.createElement(DetailsFirstContainer, {
10109
- "$active": activeTab === tab.title
10110
- }, tab.title)));
10111
- })), tabRightNode === null || tabRightNode === void 0 ? void 0 : tabRightNode.node), tabItems.map(function (tab, index) {
10112
- return activeTab === tab.title && React.createElement(Container$4, {
10113
- key: index,
10114
- "$overflow": overflow
10115
- }, tab.content);
10116
- }));
10149
+ var getCurrentTheme = function getCurrentTheme() {
10150
+ if (typeof document !== 'undefined') {
10151
+ var isDarkClass = document.documentElement.classList.contains('dark');
10152
+ return isDarkClass ? 'dark' : 'light';
10153
+ }
10154
+ return 'light';
10117
10155
  };
10118
-
10119
- var InternalTabs = function InternalTabs(_ref) {
10120
- var tabs = _ref.tabs,
10121
- activeTab = _ref.activeTab,
10122
- backgroundColor = _ref.backgroundColor,
10123
- activeTabBg = _ref.activeTabBg,
10124
- textColor = _ref.textColor,
10125
- _ref$disabled = _ref.disabled,
10126
- disabled = _ref$disabled === void 0 ? false : _ref$disabled;
10127
- var themeColors = useTheme();
10128
- return React.createElement(Container, {
10129
- "$background": backgroundColor || themeColors.vms.text.white,
10130
- "$padding": '3px',
10131
- "$borderRadius": '4px',
10132
- "$justifyContent": 'space-between',
10133
- "$opacity": disabled ? 0.6 : 1
10134
- }, tabs.map(function (tab) {
10135
- return React.createElement(Container, {
10136
- key: tab.value,
10137
- "$borderRadius": '4px',
10138
- "$width": '126px',
10139
- "$justifyContent": 'center',
10140
- "$alignItems": 'center',
10141
- "$cursor": disabled ? 'not-allowed' : 'pointer',
10142
- onClick: disabled ? undefined : tab.onClick,
10143
- "$background": activeTab === tab.value ? activeTabBg || themeColors.vms.accent.softBlue : themeColors.vms["default"].tertiary,
10144
- "$color": activeTab === tab.value ? textColor || themeColors.vms["default"].primary : themeColors.vms.text.medium
10145
- }, React.createElement(Span, {
10146
- "$fontSize": '14px',
10147
- "$color": activeTab === tab.value ? textColor || themeColors.vms["default"].primary : themeColors.vms.text.medium
10148
- }, tab.title));
10149
- }));
10156
+ var colorVariables = new Proxy({}, {
10157
+ get: function get(_, prop) {
10158
+ var currentThemeName = getCurrentTheme();
10159
+ var currentTheme = themes[currentThemeName];
10160
+ return currentTheme[prop];
10161
+ }
10162
+ });
10163
+ var themes = {
10164
+ light: light,
10165
+ dark: dark
10150
10166
  };
10151
10167
 
10152
10168
  export { Badge, Breadcrumbs, ButtonComponent as Button, ButtonCarousel, ButtonDropdown, CheckBox, CircularLoader, CircularProgress, Container, DatePicker, DropdownMenu$1 as DropdownMenu, Icon, IconTooltip, InternalTabs, Loader, MultiSelectDropdown, OptionComponent, Options, Pagination, ProgressBar, SearchBox, SelectOption, SelectedOption, Sidebar, Span, Table, TableCell, TableRow, Tabs, TextArea, TextField, TextFieldWithDropdown, convertEpochToDateString, convertEpochToOnlyDate, convertToEpoch, formatCalendarDateTime, formatDate, formatEpochToIST, formatTimestamp, getCurrentTheme, getSystemTimezoneAbbreviation, themes, timeAgo, timeStringToSeconds, useClickOutside, useCopyToClipboard, useCustomModal, useNotification, useTheme };