@alaarab/ogrid-react-fluent 2.1.9 → 2.1.10

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.
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
 
3
- /* src/ColumnHeaderFilter/ColumnHeaderFilter.module.scss */
4
- .ColumnHeaderFilter_module_columnHeader {
3
+ /* esbuild-sass-plugin:css-chunksrc/ColumnHeaderFilter/ColumnHeaderFilter.module.scss */
4
+ .ogrid-fluent__ColumnHeaderFilter-module__columnHeader {
5
5
  display: flex;
6
6
  align-items: center;
7
7
  gap: 4px;
@@ -17,7 +17,7 @@
17
17
  --dt-header-action-button: 24px;
18
18
  --dt-header-action-gap: 2px;
19
19
  }
20
- .ColumnHeaderFilter_module_headerContent {
20
+ .ogrid-fluent__ColumnHeaderFilter-module__headerContent {
21
21
  display: flex;
22
22
  align-items: center;
23
23
  gap: 4px;
@@ -29,7 +29,7 @@
29
29
  box-sizing: border-box;
30
30
  overflow: hidden;
31
31
  }
32
- .ColumnHeaderFilter_module_columnName {
32
+ .ogrid-fluent__ColumnHeaderFilter-module__columnName {
33
33
  display: block;
34
34
  min-width: 0;
35
35
  max-width: 100%;
@@ -40,14 +40,14 @@
40
40
  font-size: 14px;
41
41
  color: var(--colorNeutralForeground1, #242424);
42
42
  }
43
- .ColumnHeaderFilter_module_headerActions {
43
+ .ogrid-fluent__ColumnHeaderFilter-module__headerActions {
44
44
  display: flex;
45
45
  align-items: center;
46
46
  gap: var(--dt-header-action-gap);
47
47
  margin-left: auto;
48
48
  flex-shrink: 0;
49
49
  }
50
- .ColumnHeaderFilter_module_filterIcon {
50
+ .ogrid-fluent__ColumnHeaderFilter-module__filterIcon {
51
51
  display: flex;
52
52
  align-items: center;
53
53
  justify-content: center;
@@ -64,25 +64,25 @@
64
64
  position: relative;
65
65
  transition: all 0.15s ease;
66
66
  }
67
- .ColumnHeaderFilter_module_filterIcon svg {
67
+ .ogrid-fluent__ColumnHeaderFilter-module__filterIcon svg {
68
68
  font-size: 14px;
69
69
  }
70
- .ColumnHeaderFilter_module_filterIcon:hover {
70
+ .ogrid-fluent__ColumnHeaderFilter-module__filterIcon:hover {
71
71
  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
72
72
  color: var(--colorNeutralForeground2Hover, #424242);
73
73
  }
74
- .ColumnHeaderFilter_module_filterIcon.ColumnHeaderFilter_module_filterActive {
74
+ .ogrid-fluent__ColumnHeaderFilter-module__filterIcon.ogrid-fluent__ColumnHeaderFilter-module__filterActive {
75
75
  background-color: var(--colorSubtleBackgroundSelected, #e0e0e0);
76
76
  color: var(--colorNeutralForeground2, #616161);
77
77
  }
78
- .ColumnHeaderFilter_module_filterIcon.ColumnHeaderFilter_module_filterActive:hover {
78
+ .ogrid-fluent__ColumnHeaderFilter-module__filterIcon.ogrid-fluent__ColumnHeaderFilter-module__filterActive:hover {
79
79
  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
80
80
  }
81
- .ColumnHeaderFilter_module_filterIcon.ColumnHeaderFilter_module_filterOpen {
81
+ .ogrid-fluent__ColumnHeaderFilter-module__filterIcon.ogrid-fluent__ColumnHeaderFilter-module__filterOpen {
82
82
  background-color: var(--colorSubtleBackgroundPressed, #ebebeb);
83
83
  color: var(--colorNeutralForeground2, #616161);
84
84
  }
85
- .ColumnHeaderFilter_module_filterBadge {
85
+ .ogrid-fluent__ColumnHeaderFilter-module__filterBadge {
86
86
  position: absolute;
87
87
  top: 2px;
88
88
  right: 2px;
@@ -92,7 +92,7 @@
92
92
  border-radius: 50%;
93
93
  border: 1px solid var(--colorNeutralBackground1, #ffffff);
94
94
  }
95
- .ColumnHeaderFilter_module_filterPopover {
95
+ .ogrid-fluent__ColumnHeaderFilter-module__filterPopover {
96
96
  min-width: 280px;
97
97
  max-width: 320px;
98
98
  overflow: hidden;
@@ -105,7 +105,7 @@
105
105
  font-size: 14px;
106
106
  color: var(--colorNeutralForeground1, #242424);
107
107
  }
108
- .ColumnHeaderFilter_module_popoverHeader {
108
+ .ogrid-fluent__ColumnHeaderFilter-module__popoverHeader {
109
109
  padding: 10px 14px;
110
110
  font-size: 12px;
111
111
  font-weight: 600;
@@ -113,11 +113,11 @@
113
113
  border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
114
114
  background-color: var(--colorNeutralBackground2, #fafafa);
115
115
  }
116
- .ColumnHeaderFilter_module_popoverSearch {
116
+ .ogrid-fluent__ColumnHeaderFilter-module__popoverSearch {
117
117
  padding: 10px 12px;
118
118
  border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
119
119
  }
120
- .ColumnHeaderFilter_module_nativeInputWrapper {
120
+ .ogrid-fluent__ColumnHeaderFilter-module__nativeInputWrapper {
121
121
  display: flex;
122
122
  align-items: center;
123
123
  gap: 8px;
@@ -129,16 +129,16 @@
129
129
  min-height: 36px;
130
130
  box-sizing: border-box;
131
131
  }
132
- .ColumnHeaderFilter_module_nativeInputWrapper:focus-within {
132
+ .ogrid-fluent__ColumnHeaderFilter-module__nativeInputWrapper:focus-within {
133
133
  border-color: var(--colorBrandStroke1, #0f6cbd);
134
134
  outline: none;
135
135
  }
136
- .ColumnHeaderFilter_module_nativeInputIcon {
136
+ .ogrid-fluent__ColumnHeaderFilter-module__nativeInputIcon {
137
137
  color: var(--colorNeutralForeground3, #616161);
138
138
  font-size: 16px;
139
139
  flex-shrink: 0;
140
140
  }
141
- .ColumnHeaderFilter_module_nativeInput {
141
+ .ogrid-fluent__ColumnHeaderFilter-module__nativeInput {
142
142
  flex: 1;
143
143
  min-width: 0;
144
144
  border: none;
@@ -149,22 +149,22 @@
149
149
  background: transparent;
150
150
  color: var(--colorNeutralForeground1, #242424);
151
151
  }
152
- .ColumnHeaderFilter_module_nativeInput::placeholder {
152
+ .ogrid-fluent__ColumnHeaderFilter-module__nativeInput::placeholder {
153
153
  color: var(--colorNeutralForeground4, #707070);
154
154
  }
155
- .ColumnHeaderFilter_module_resultCount {
155
+ .ogrid-fluent__ColumnHeaderFilter-module__resultCount {
156
156
  margin-top: 6px;
157
157
  font-size: 11px;
158
158
  color: var(--colorNeutralForeground2, #616161);
159
159
  }
160
- .ColumnHeaderFilter_module_selectAllRow {
160
+ .ogrid-fluent__ColumnHeaderFilter-module__selectAllRow {
161
161
  display: flex;
162
162
  gap: 8px;
163
163
  padding: 6px 12px;
164
164
  border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
165
165
  background-color: var(--colorNeutralBackground2, #fafafa);
166
166
  }
167
- .ColumnHeaderFilter_module_selectAllButton {
167
+ .ogrid-fluent__ColumnHeaderFilter-module__selectAllButton {
168
168
  background: none;
169
169
  border: none;
170
170
  color: var(--colorBrandForeground1, #0f6cbd);
@@ -175,36 +175,36 @@
175
175
  border-radius: var(--borderRadiusSmall, 4px);
176
176
  transition: background-color 0.15s ease;
177
177
  }
178
- .ColumnHeaderFilter_module_selectAllButton:hover {
178
+ .ogrid-fluent__ColumnHeaderFilter-module__selectAllButton:hover {
179
179
  background-color: var(--colorBrandBackground2, #ebf3fc);
180
180
  }
181
- .ColumnHeaderFilter_module_popoverOptions {
181
+ .ogrid-fluent__ColumnHeaderFilter-module__popoverOptions {
182
182
  overflow-y: auto;
183
183
  max-height: 250px;
184
184
  padding: 6px 0;
185
185
  }
186
- .ColumnHeaderFilter_module_popoverOptions::-webkit-scrollbar {
186
+ .ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar {
187
187
  width: 6px;
188
188
  }
189
- .ColumnHeaderFilter_module_popoverOptions::-webkit-scrollbar-track {
189
+ .ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar-track {
190
190
  background: var(--colorNeutralBackground3, #f5f5f5);
191
191
  }
192
- .ColumnHeaderFilter_module_popoverOptions::-webkit-scrollbar-thumb {
192
+ .ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar-thumb {
193
193
  background: var(--colorNeutralStroke1, #d1d1d1);
194
194
  border-radius: 3px;
195
195
  }
196
- .ColumnHeaderFilter_module_popoverOptions::-webkit-scrollbar-thumb:hover {
196
+ .ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar-thumb:hover {
197
197
  background: var(--colorNeutralForeground2, #616161);
198
198
  }
199
- .ColumnHeaderFilter_module_popoverOption {
199
+ .ogrid-fluent__ColumnHeaderFilter-module__popoverOption {
200
200
  padding: 4px 12px;
201
201
  transition: background-color 0.1s ease;
202
202
  cursor: pointer;
203
203
  }
204
- .ColumnHeaderFilter_module_popoverOption:hover {
204
+ .ogrid-fluent__ColumnHeaderFilter-module__popoverOption:hover {
205
205
  background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
206
206
  }
207
- .ColumnHeaderFilter_module_nativeCheckbox {
207
+ .ogrid-fluent__ColumnHeaderFilter-module__nativeCheckbox {
208
208
  width: 16px;
209
209
  height: 16px;
210
210
  margin: 0;
@@ -212,7 +212,7 @@
212
212
  accent-color: var(--colorBrandBackground, #0f6cbd);
213
213
  flex-shrink: 0;
214
214
  }
215
- .ColumnHeaderFilter_module_checkboxLabel {
215
+ .ogrid-fluent__ColumnHeaderFilter-module__checkboxLabel {
216
216
  margin-left: 8px;
217
217
  font-size: 14px;
218
218
  color: var(--colorNeutralForeground1, #242424);
@@ -222,62 +222,62 @@
222
222
  min-width: 0;
223
223
  cursor: pointer;
224
224
  }
225
- .ColumnHeaderFilter_module_personOption {
225
+ .ogrid-fluent__ColumnHeaderFilter-module__personOption {
226
226
  padding: 8px 12px;
227
227
  cursor: pointer;
228
228
  transition: background-color 0.1s ease;
229
229
  }
230
- .ColumnHeaderFilter_module_personOption:hover {
230
+ .ogrid-fluent__ColumnHeaderFilter-module__personOption:hover {
231
231
  background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
232
232
  }
233
- .ColumnHeaderFilter_module_loadingContainer {
233
+ .ogrid-fluent__ColumnHeaderFilter-module__loadingContainer {
234
234
  display: flex;
235
235
  align-items: center;
236
236
  justify-content: center;
237
237
  gap: 8px;
238
238
  padding: 20px;
239
239
  }
240
- .ColumnHeaderFilter_module_filterSpinner {
240
+ .ogrid-fluent__ColumnHeaderFilter-module__filterSpinner {
241
241
  width: 20px;
242
242
  height: 20px;
243
243
  border: 2px solid var(--colorNeutralStroke1, #d1d1d1);
244
244
  border-top-color: var(--colorBrandBackground, #0f6cbd);
245
245
  border-radius: 50%;
246
- animation: ColumnHeaderFilter_module_ogrid-filter-spin 0.8s linear infinite;
246
+ animation: ogrid-fluent__ColumnHeaderFilter-module__ogrid-filter-spin 0.8s linear infinite;
247
247
  }
248
- @keyframes ColumnHeaderFilter_module_ogrid-filter-spin {
248
+ @keyframes ogrid-fluent__ColumnHeaderFilter-module__ogrid-filter-spin {
249
249
  to {
250
250
  transform: rotate(360deg);
251
251
  }
252
252
  }
253
- .ColumnHeaderFilter_module_noResults {
253
+ .ogrid-fluent__ColumnHeaderFilter-module__noResults {
254
254
  padding: 16px;
255
255
  text-align: center;
256
256
  font-size: 12px;
257
257
  color: var(--colorNeutralForeground2, #616161);
258
258
  }
259
- .ColumnHeaderFilter_module_selectedUserSection {
259
+ .ogrid-fluent__ColumnHeaderFilter-module__selectedUserSection {
260
260
  padding: 10px 12px;
261
261
  border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
262
262
  background-color: var(--colorSubtleBackgroundSelected, #e0e0e0);
263
263
  }
264
- .ColumnHeaderFilter_module_selectedUserLabel {
264
+ .ogrid-fluent__ColumnHeaderFilter-module__selectedUserLabel {
265
265
  font-size: 11px;
266
266
  color: var(--colorNeutralForeground2, #616161);
267
267
  margin-bottom: 6px;
268
268
  }
269
- .ColumnHeaderFilter_module_selectedUser {
269
+ .ogrid-fluent__ColumnHeaderFilter-module__selectedUser {
270
270
  display: flex;
271
271
  align-items: center;
272
272
  justify-content: space-between;
273
273
  gap: 8px;
274
274
  }
275
- .ColumnHeaderFilter_module_userInfo {
275
+ .ogrid-fluent__ColumnHeaderFilter-module__userInfo {
276
276
  display: flex;
277
277
  align-items: center;
278
278
  gap: 8px;
279
279
  }
280
- .ColumnHeaderFilter_module_avatar {
280
+ .ogrid-fluent__ColumnHeaderFilter-module__avatar {
281
281
  width: 32px;
282
282
  height: 32px;
283
283
  border-radius: 50%;
@@ -288,27 +288,27 @@
288
288
  flex-shrink: 0;
289
289
  overflow: hidden;
290
290
  }
291
- .ColumnHeaderFilter_module_avatarImg {
291
+ .ogrid-fluent__ColumnHeaderFilter-module__avatarImg {
292
292
  width: 100%;
293
293
  height: 100%;
294
294
  object-fit: cover;
295
295
  border-radius: 50%;
296
296
  }
297
- .ColumnHeaderFilter_module_avatarInitials {
297
+ .ogrid-fluent__ColumnHeaderFilter-module__avatarInitials {
298
298
  color: var(--colorNeutralForegroundOnBrand, #ffffff);
299
299
  font-size: 12px;
300
300
  font-weight: 600;
301
301
  line-height: 1;
302
302
  }
303
- .ColumnHeaderFilter_module_userText {
303
+ .ogrid-fluent__ColumnHeaderFilter-module__userText {
304
304
  display: flex;
305
305
  flex-direction: column;
306
306
  }
307
- .ColumnHeaderFilter_module_userSecondary {
307
+ .ogrid-fluent__ColumnHeaderFilter-module__userSecondary {
308
308
  font-size: 12px;
309
309
  color: var(--colorNeutralForeground2, #616161);
310
310
  }
311
- .ColumnHeaderFilter_module_removeUserButton {
311
+ .ogrid-fluent__ColumnHeaderFilter-module__removeUserButton {
312
312
  display: flex;
313
313
  align-items: center;
314
314
  justify-content: center;
@@ -322,11 +322,11 @@
322
322
  cursor: pointer;
323
323
  transition: all 0.15s ease;
324
324
  }
325
- .ColumnHeaderFilter_module_removeUserButton:hover {
325
+ .ogrid-fluent__ColumnHeaderFilter-module__removeUserButton:hover {
326
326
  background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
327
327
  color: var(--colorPaletteRedForeground1, #c4314b);
328
328
  }
329
- .ColumnHeaderFilter_module_popoverActions {
329
+ .ogrid-fluent__ColumnHeaderFilter-module__popoverActions {
330
330
  display: flex;
331
331
  justify-content: flex-end;
332
332
  gap: 8px;
@@ -334,7 +334,7 @@
334
334
  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
335
335
  background-color: var(--colorNeutralBackground2, #fafafa);
336
336
  }
337
- .ColumnHeaderFilter_module_clearButton {
337
+ .ogrid-fluent__ColumnHeaderFilter-module__clearButton {
338
338
  padding: 6px 12px;
339
339
  border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
340
340
  border-radius: var(--borderRadiusMedium, 4px);
@@ -345,15 +345,15 @@
345
345
  cursor: pointer;
346
346
  transition: all 0.15s ease;
347
347
  }
348
- .ColumnHeaderFilter_module_clearButton:hover:not(:disabled) {
348
+ .ogrid-fluent__ColumnHeaderFilter-module__clearButton:hover:not(:disabled) {
349
349
  background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
350
350
  border-color: var(--colorNeutralStroke1Hover, #c7c7c7);
351
351
  }
352
- .ColumnHeaderFilter_module_clearButton:disabled {
352
+ .ogrid-fluent__ColumnHeaderFilter-module__clearButton:disabled {
353
353
  opacity: 0.5;
354
354
  cursor: not-allowed;
355
355
  }
356
- .ColumnHeaderFilter_module_applyButton {
356
+ .ogrid-fluent__ColumnHeaderFilter-module__applyButton {
357
357
  padding: 6px 12px;
358
358
  border: 1px solid var(--colorBrandBackground, #0f6cbd);
359
359
  border-radius: var(--borderRadiusMedium, 4px);
@@ -364,13 +364,13 @@
364
364
  cursor: pointer;
365
365
  transition: all 0.15s ease;
366
366
  }
367
- .ColumnHeaderFilter_module_applyButton:hover {
367
+ .ogrid-fluent__ColumnHeaderFilter-module__applyButton:hover {
368
368
  background-color: var(--colorBrandBackgroundHover, #115ea3);
369
369
  border-color: var(--colorBrandBackgroundHover, #115ea3);
370
370
  }
371
371
 
372
- /* src/ColumnHeaderMenu/ColumnHeaderMenu.module.scss */
373
- .ColumnHeaderMenu_module_content {
372
+ /* esbuild-sass-plugin:css-chunksrc/ColumnHeaderMenu/ColumnHeaderMenu.module.scss */
373
+ .ogrid-fluent__ColumnHeaderMenu-module__content {
374
374
  min-width: 140px;
375
375
  background: var(--ogrid-bg, #ffffff);
376
376
  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
@@ -382,7 +382,7 @@
382
382
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
383
383
  will-change: transform, opacity;
384
384
  }
385
- .ColumnHeaderMenu_module_item {
385
+ .ogrid-fluent__ColumnHeaderMenu-module__item {
386
386
  font-size: 13px;
387
387
  line-height: 1;
388
388
  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
@@ -400,36 +400,36 @@
400
400
  width: 100%;
401
401
  text-align: left;
402
402
  }
403
- .ColumnHeaderMenu_module_item:disabled {
403
+ .ogrid-fluent__ColumnHeaderMenu-module__item:disabled {
404
404
  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
405
405
  pointer-events: none;
406
406
  cursor: not-allowed;
407
407
  }
408
- .ColumnHeaderMenu_module_item:hover:not(:disabled) {
408
+ .ogrid-fluent__ColumnHeaderMenu-module__item:hover:not(:disabled) {
409
409
  background-color: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
410
410
  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
411
411
  }
412
- .ColumnHeaderMenu_module_separator {
412
+ .ogrid-fluent__ColumnHeaderMenu-module__separator {
413
413
  height: 1px;
414
414
  background-color: var(--ogrid-border, rgba(0, 0, 0, 0.12));
415
415
  margin: 4px 0;
416
416
  }
417
417
 
418
- /* src/DataGridTable/DataGridTable.module.scss */
419
- .DataGridTable_module_tableScrollContent {
418
+ /* esbuild-sass-plugin:css-chunksrc/DataGridTable/DataGridTable.module.scss */
419
+ .ogrid-fluent__DataGridTable-module__tableScrollContent {
420
420
  display: flex;
421
421
  flex-direction: column;
422
422
  width: 100%;
423
423
  min-width: 0;
424
424
  background: var(--ogrid-bg, #fff);
425
425
  }
426
- .DataGridTable_module_tableWidthAnchor {
426
+ .ogrid-fluent__DataGridTable-module__tableWidthAnchor {
427
427
  position: relative;
428
428
  width: max-content;
429
429
  min-width: var(--data-table-min-width, max-content);
430
430
  background: var(--ogrid-bg, #fff);
431
431
  }
432
- .DataGridTable_module_tableWrapper {
432
+ .ogrid-fluent__DataGridTable-module__tableWrapper {
433
433
  position: relative;
434
434
  flex: 1;
435
435
  min-height: 0;
@@ -442,16 +442,16 @@
442
442
  background: var(--ogrid-bg, #fff);
443
443
  will-change: scroll-position;
444
444
  }
445
- .DataGridTable_module_tableWrapper[data-overflow-x=true] {
445
+ .ogrid-fluent__DataGridTable-module__tableWrapper[data-overflow-x=true] {
446
446
  overflow-x: auto;
447
447
  }
448
- .DataGridTable_module_tableWrapper[data-empty=true] {
448
+ .ogrid-fluent__DataGridTable-module__tableWrapper[data-empty=true] {
449
449
  overflow-x: hidden;
450
450
  }
451
- .DataGridTable_module_tableWrapper[data-loading=true] {
451
+ .ogrid-fluent__DataGridTable-module__tableWrapper[data-loading=true] {
452
452
  min-height: 200px;
453
453
  }
454
- .DataGridTable_module_dataTable {
454
+ .ogrid-fluent__DataGridTable-module__dataTable {
455
455
  width: var(--data-table-width, fit-content);
456
456
  max-width: 100%;
457
457
  min-width: var(--data-table-min-width, max-content);
@@ -462,22 +462,22 @@
462
462
  background-color: var(--ogrid-bg, #fff);
463
463
  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
464
464
  }
465
- .DataGridTable_module_dataTable tbody tr {
465
+ .ogrid-fluent__DataGridTable-module__dataTable tbody tr {
466
466
  height: var(--ogrid-row-height, auto);
467
467
  }
468
- .DataGridTable_module_groupHeaderCell {
468
+ .ogrid-fluent__DataGridTable-module__groupHeaderCell {
469
469
  text-align: center;
470
470
  font-weight: 600;
471
471
  border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
472
472
  padding: 6px 10px;
473
473
  background: var(--ogrid-header-bg, #f5f5f5);
474
474
  }
475
- .DataGridTable_module_headerCellContent {
475
+ .ogrid-fluent__DataGridTable-module__headerCellContent {
476
476
  display: flex;
477
477
  align-items: center;
478
478
  gap: 4px;
479
479
  }
480
- .DataGridTable_module_headerMenuTrigger {
480
+ .ogrid-fluent__DataGridTable-module__headerMenuTrigger {
481
481
  background: transparent;
482
482
  border: none;
483
483
  cursor: pointer;
@@ -494,17 +494,17 @@
494
494
  min-width: 20px;
495
495
  height: 20px;
496
496
  }
497
- .DataGridTable_module_headerMenuTrigger:hover {
497
+ .ogrid-fluent__DataGridTable-module__headerMenuTrigger:hover {
498
498
  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
499
499
  }
500
- .DataGridTable_module_headerMenuTrigger:active {
500
+ .ogrid-fluent__DataGridTable-module__headerMenuTrigger:active {
501
501
  background: var(--ogrid-active-bg, rgba(0, 0, 0, 0.08));
502
502
  }
503
- .DataGridTable_module_headerMenuTrigger:focus-visible {
503
+ .ogrid-fluent__DataGridTable-module__headerMenuTrigger:focus-visible {
504
504
  outline: 2px solid var(--ogrid-accent, #0078d4);
505
505
  outline-offset: 2px;
506
506
  }
507
- .DataGridTable_module_dropIndicator {
507
+ .ogrid-fluent__DataGridTable-module__dropIndicator {
508
508
  position: absolute;
509
509
  top: 0;
510
510
  bottom: 0;
@@ -514,7 +514,7 @@
514
514
  z-index: 100;
515
515
  transition: left 0.05s;
516
516
  }
517
- .DataGridTable_module_resizeHandle {
517
+ .ogrid-fluent__DataGridTable-module__resizeHandle {
518
518
  position: absolute;
519
519
  top: 0;
520
520
  right: -3px;
@@ -524,7 +524,7 @@
524
524
  user-select: none;
525
525
  z-index: 1;
526
526
  }
527
- .DataGridTable_module_resizeHandle::after {
527
+ .ogrid-fluent__DataGridTable-module__resizeHandle::after {
528
528
  content: "";
529
529
  position: absolute;
530
530
  top: 0;
@@ -532,18 +532,18 @@
532
532
  bottom: 0;
533
533
  width: 2px;
534
534
  }
535
- .DataGridTable_module_resizeHandle:hover::after {
535
+ .ogrid-fluent__DataGridTable-module__resizeHandle:hover::after {
536
536
  background-color: var(--ogrid-accent, #0078d4);
537
537
  }
538
- .DataGridTable_module_resizeHandle:active::after {
538
+ .ogrid-fluent__DataGridTable-module__resizeHandle:active::after {
539
539
  background-color: var(--ogrid-accent-dark, #005a9e);
540
540
  }
541
- .DataGridTable_module_pinnedColLeft {
541
+ .ogrid-fluent__DataGridTable-module__pinnedColLeft {
542
542
  position: sticky;
543
543
  z-index: 6;
544
544
  background: var(--ogrid-bg, #ffffff);
545
545
  }
546
- .DataGridTable_module_pinnedColLeft::after {
546
+ .ogrid-fluent__DataGridTable-module__pinnedColLeft::after {
547
547
  content: "";
548
548
  position: absolute;
549
549
  top: -1px;
@@ -557,12 +557,12 @@
557
557
  transparent);
558
558
  pointer-events: none;
559
559
  }
560
- .DataGridTable_module_pinnedColRight {
560
+ .ogrid-fluent__DataGridTable-module__pinnedColRight {
561
561
  position: sticky;
562
562
  z-index: 6;
563
563
  background: var(--ogrid-bg, #ffffff);
564
564
  }
565
- .DataGridTable_module_pinnedColRight::before {
565
+ .ogrid-fluent__DataGridTable-module__pinnedColRight::before {
566
566
  content: "";
567
567
  position: absolute;
568
568
  top: -1px;
@@ -576,7 +576,7 @@
576
576
  transparent);
577
577
  pointer-events: none;
578
578
  }
579
- .DataGridTable_module_cellContent {
579
+ .ogrid-fluent__DataGridTable-module__cellContent {
580
580
  width: 100%;
581
581
  height: 100%;
582
582
  display: flex;
@@ -589,10 +589,10 @@
589
589
  user-select: none;
590
590
  outline: none;
591
591
  }
592
- .DataGridTable_module_cellContent:focus-visible {
592
+ .ogrid-fluent__DataGridTable-module__cellContent:focus-visible {
593
593
  outline: none;
594
594
  }
595
- .DataGridTable_module_activeCellContent {
595
+ .ogrid-fluent__DataGridTable-module__activeCellContent {
596
596
  outline: 2px solid var(--ogrid-selection-color, #217346);
597
597
  outline-offset: -1px;
598
598
  z-index: 2;
@@ -600,7 +600,7 @@
600
600
  overflow: visible;
601
601
  background: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02));
602
602
  }
603
- .DataGridTable_module_editingCellContent {
603
+ .ogrid-fluent__DataGridTable-module__editingCellContent {
604
604
  width: 100%;
605
605
  height: 100%;
606
606
  display: flex;
@@ -614,7 +614,7 @@
614
614
  overflow: visible;
615
615
  padding: 0;
616
616
  }
617
- .DataGridTable_module_cellInRange {
617
+ .ogrid-fluent__DataGridTable-module__cellInRange {
618
618
  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
619
619
  }
620
620
  [data-drag-range] {
@@ -623,15 +623,15 @@
623
623
  [data-drag-anchor] {
624
624
  background: var(--ogrid-bg, #fff) !important;
625
625
  }
626
- .DataGridTable_module_activeCellContent[data-drag-anchor],
627
- .DataGridTable_module_activeCellContent[data-drag-range] {
626
+ .ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-anchor],
627
+ .ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-range] {
628
628
  outline: none;
629
629
  }
630
- .DataGridTable_module_cellCut {
630
+ .ogrid-fluent__DataGridTable-module__cellCut {
631
631
  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
632
632
  opacity: 0.7;
633
633
  }
634
- .DataGridTable_module_fillHandle {
634
+ .ogrid-fluent__DataGridTable-module__fillHandle {
635
635
  position: absolute;
636
636
  right: -3px;
637
637
  bottom: -3px;
@@ -644,22 +644,22 @@
644
644
  pointer-events: auto;
645
645
  z-index: 3;
646
646
  }
647
- .DataGridTable_module_selectionHeaderCellInner,
648
- .DataGridTable_module_selectionCellInner {
647
+ .ogrid-fluent__DataGridTable-module__selectionHeaderCellInner,
648
+ .ogrid-fluent__DataGridTable-module__selectionCellInner {
649
649
  display: flex;
650
650
  align-items: center;
651
651
  justify-content: center;
652
652
  width: 100%;
653
653
  }
654
- .DataGridTable_module_rowNumberHeaderCellInner,
655
- .DataGridTable_module_rowNumberCellInner {
654
+ .ogrid-fluent__DataGridTable-module__rowNumberHeaderCellInner,
655
+ .ogrid-fluent__DataGridTable-module__rowNumberCellInner {
656
656
  display: flex;
657
657
  align-items: center;
658
658
  justify-content: center;
659
659
  width: 100%;
660
660
  font-variant-numeric: tabular-nums;
661
661
  }
662
- .DataGridTable_module_statusBar {
662
+ .ogrid-fluent__DataGridTable-module__statusBar {
663
663
  display: flex;
664
664
  align-items: center;
665
665
  gap: 16px;
@@ -672,26 +672,26 @@
672
672
  border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
673
673
  min-height: 28px;
674
674
  }
675
- .DataGridTable_module_statusBarItem {
675
+ .ogrid-fluent__DataGridTable-module__statusBarItem {
676
676
  display: inline-flex;
677
677
  align-items: center;
678
678
  gap: 4px;
679
679
  }
680
- .DataGridTable_module_statusBarItem:not(:last-child)::after {
680
+ .ogrid-fluent__DataGridTable-module__statusBarItem:not(:last-child)::after {
681
681
  content: "";
682
682
  width: 1px;
683
683
  height: 14px;
684
684
  background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
685
685
  margin-left: 12px;
686
686
  }
687
- .DataGridTable_module_statusBarLabel {
687
+ .ogrid-fluent__DataGridTable-module__statusBarLabel {
688
688
  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
689
689
  }
690
- .DataGridTable_module_statusBarValue {
690
+ .ogrid-fluent__DataGridTable-module__statusBarValue {
691
691
  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
692
692
  font-weight: 600;
693
693
  }
694
- .DataGridTable_module_contextMenu {
694
+ .ogrid-fluent__DataGridTable-module__contextMenu {
695
695
  position: fixed;
696
696
  z-index: 10000;
697
697
  min-width: 160px;
@@ -701,7 +701,7 @@
701
701
  border-radius: 6px;
702
702
  box-shadow: var(--ogrid-shadow, 0 4px 16px rgba(0, 0, 0, 0.12));
703
703
  }
704
- .DataGridTable_module_contextMenuItem {
704
+ .ogrid-fluent__DataGridTable-module__contextMenuItem {
705
705
  display: flex;
706
706
  align-items: center;
707
707
  justify-content: space-between;
@@ -715,26 +715,26 @@
715
715
  cursor: pointer;
716
716
  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
717
717
  }
718
- .DataGridTable_module_contextMenuItem:hover:not(:disabled) {
718
+ .ogrid-fluent__DataGridTable-module__contextMenuItem:hover:not(:disabled) {
719
719
  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
720
720
  }
721
- .DataGridTable_module_contextMenuItem:disabled {
721
+ .ogrid-fluent__DataGridTable-module__contextMenuItem:disabled {
722
722
  opacity: 0.5;
723
723
  cursor: not-allowed;
724
724
  }
725
- .DataGridTable_module_contextMenuItemLabel {
725
+ .ogrid-fluent__DataGridTable-module__contextMenuItemLabel {
726
726
  flex: 1;
727
727
  }
728
- .DataGridTable_module_contextMenuItemShortcut {
728
+ .ogrid-fluent__DataGridTable-module__contextMenuItemShortcut {
729
729
  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
730
730
  font-size: 0.85em;
731
731
  }
732
- .DataGridTable_module_contextMenuDivider {
732
+ .ogrid-fluent__DataGridTable-module__contextMenuDivider {
733
733
  height: 1px;
734
734
  margin: 4px 0;
735
735
  background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
736
736
  }
737
- .DataGridTable_module_loadingOverlay {
737
+ .ogrid-fluent__DataGridTable-module__loadingOverlay {
738
738
  position: absolute;
739
739
  inset: 0;
740
740
  z-index: 2;
@@ -745,7 +745,7 @@
745
745
  backdrop-filter: blur(1px);
746
746
  pointer-events: all;
747
747
  }
748
- .DataGridTable_module_loadingOverlayContent {
748
+ .ogrid-fluent__DataGridTable-module__loadingOverlayContent {
749
749
  display: flex;
750
750
  flex-direction: column;
751
751
  align-items: center;
@@ -756,16 +756,16 @@
756
756
  border-radius: 6px;
757
757
  box-shadow: var(--ogrid-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
758
758
  }
759
- .DataGridTable_module_loadingOverlayText {
759
+ .ogrid-fluent__DataGridTable-module__loadingOverlayText {
760
760
  font-size: 13px;
761
761
  font-weight: 500;
762
762
  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
763
763
  }
764
- .DataGridTable_module_loadingDimmed {
764
+ .ogrid-fluent__DataGridTable-module__loadingDimmed {
765
765
  opacity: 0.6;
766
766
  pointer-events: none;
767
767
  }
768
- .DataGridTable_module_emptyStateInGrid {
768
+ .ogrid-fluent__DataGridTable-module__emptyStateInGrid {
769
769
  display: flex;
770
770
  flex-direction: column;
771
771
  align-items: center;
@@ -778,18 +778,18 @@
778
778
  border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
779
779
  background: var(--ogrid-header-bg, #f5f5f5);
780
780
  }
781
- .DataGridTable_module_emptyStateInGridTitle {
781
+ .ogrid-fluent__DataGridTable-module__emptyStateInGridTitle {
782
782
  font-size: 14px;
783
783
  font-weight: 600;
784
784
  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
785
785
  margin-bottom: 4px;
786
786
  }
787
- .DataGridTable_module_emptyStateInGridMessage {
787
+ .ogrid-fluent__DataGridTable-module__emptyStateInGridMessage {
788
788
  font-size: 13px;
789
789
  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
790
790
  line-height: 1.5;
791
791
  }
792
- .DataGridTable_module_emptyStateInGridLink {
792
+ .ogrid-fluent__DataGridTable-module__emptyStateInGridLink {
793
793
  background: none;
794
794
  border: none;
795
795
  color: var(--ogrid-accent, #0078d4);
@@ -799,18 +799,18 @@
799
799
  font-size: inherit;
800
800
  font-family: inherit;
801
801
  }
802
- .DataGridTable_module_emptyStateInGridLink:hover {
802
+ .ogrid-fluent__DataGridTable-module__emptyStateInGridLink:hover {
803
803
  color: var(--ogrid-accent-dark, #005a9e);
804
804
  }
805
- .DataGridTable_module_spinner {
805
+ .ogrid-fluent__DataGridTable-module__spinner {
806
806
  width: 24px;
807
807
  height: 24px;
808
808
  border: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
809
809
  border-top-color: var(--ogrid-accent, #0078d4);
810
810
  border-radius: 50%;
811
- animation: DataGridTable_module_ogrid-spin 0.8s linear infinite;
811
+ animation: ogrid-fluent__DataGridTable-module__ogrid-spin 0.8s linear infinite;
812
812
  }
813
- @keyframes DataGridTable_module_ogrid-spin {
813
+ @keyframes ogrid-fluent__DataGridTable-module__ogrid-spin {
814
814
  to {
815
815
  transform: rotate(360deg);
816
816
  }
@@ -931,32 +931,32 @@
931
931
  --ogrid-selection-color: #217346;
932
932
  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
933
933
  }
934
- .DataGridTable_module_tableScrollContent {
934
+ .ogrid-fluent__DataGridTable-module__tableScrollContent {
935
935
  min-height: 100%;
936
936
  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
937
937
  }
938
- .DataGridTable_module_tableWidthAnchor {
938
+ .ogrid-fluent__DataGridTable-module__tableWidthAnchor {
939
939
  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
940
940
  }
941
- .DataGridTable_module_tableWrapper {
941
+ .ogrid-fluent__DataGridTable-module__tableWrapper {
942
942
  border: none;
943
943
  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
944
944
  -webkit-overflow-scrolling: touch;
945
945
  outline: none;
946
946
  }
947
- .DataGridTable_module_dataTable {
947
+ .ogrid-fluent__DataGridTable-module__dataTable {
948
948
  table-layout: auto !important;
949
949
  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
950
950
  }
951
- .DataGridTable_module_dataTable .fui-TableHeaderCell,
952
- .DataGridTable_module_dataTable .fui-TableCell {
951
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell,
952
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell {
953
953
  min-width: 80px;
954
954
  box-sizing: border-box;
955
955
  border-right: 1px solid var(--colorNeutralStroke1, #c4c4c4);
956
956
  font-size: 13px;
957
957
  vertical-align: middle;
958
958
  }
959
- .DataGridTable_module_dataTable .fui-TableHeaderCell {
959
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell {
960
960
  padding: 6px 10px;
961
961
  font-weight: 600;
962
962
  font-size: 14px;
@@ -966,15 +966,15 @@
966
966
  z-index: 8;
967
967
  border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
968
968
  }
969
- .DataGridTable_module_dataTable .fui-TableHeaderCell > .fui-TableHeaderCell__button {
969
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell > .fui-TableHeaderCell__button {
970
970
  position: static !important;
971
971
  }
972
- .DataGridTable_module_dataTable .fui-TableHeaderCell:focus-visible {
972
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell:focus-visible {
973
973
  outline: 2px solid var(--colorBrandStroke1, var(--ogrid-accent, #0078d4));
974
974
  outline-offset: -2px;
975
975
  z-index: 11;
976
976
  }
977
- .DataGridTable_module_dataTable .fui-TableCell {
977
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell {
978
978
  padding: 0;
979
979
  overflow: hidden;
980
980
  text-overflow: ellipsis;
@@ -985,42 +985,42 @@
985
985
  position: relative;
986
986
  border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
987
987
  }
988
- .DataGridTable_module_dataTable .fui-TableCell > * {
988
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell > * {
989
989
  min-width: 0;
990
990
  }
991
- .DataGridTable_module_dataTable .fui-TableCell:focus-visible {
991
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell:focus-visible {
992
992
  outline: none;
993
993
  }
994
- .DataGridTable_module_dataTable .fui-TableHeaderCell:last-of-type,
995
- .DataGridTable_module_dataTable .fui-TableCell:last-of-type {
994
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell:last-of-type,
995
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell:last-of-type {
996
996
  border-right: none;
997
997
  }
998
- .DataGridTable_module_dataTable .fui-TableBody .fui-TableRow:last-child .fui-TableCell {
998
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow:last-child .fui-TableCell {
999
999
  border-bottom: none;
1000
1000
  }
1001
- .DataGridTable_module_dataTable .fui-TableBody .fui-TableRow:hover .fui-TableCell {
1001
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow:hover .fui-TableCell {
1002
1002
  background-color: var(--colorSubtleBackgroundHover, var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)));
1003
1003
  }
1004
- .DataGridTable_module_leafHeaderCellSpan {
1004
+ .ogrid-fluent__DataGridTable-module__leafHeaderCellSpan {
1005
1005
  font-weight: 600;
1006
1006
  padding: 6px 10px;
1007
1007
  background: var(--ogrid-header-bg, #f3f2f1);
1008
1008
  }
1009
- .DataGridTable_module_selectionHeaderCellWrapper {
1009
+ .ogrid-fluent__DataGridTable-module__selectionHeaderCellWrapper {
1010
1010
  width: 48px;
1011
1011
  min-width: 48px;
1012
1012
  max-width: 48px;
1013
1013
  padding: 4px !important;
1014
1014
  text-align: center;
1015
1015
  }
1016
- .DataGridTable_module_selectionCellWrapper {
1016
+ .ogrid-fluent__DataGridTable-module__selectionCellWrapper {
1017
1017
  width: 48px;
1018
1018
  min-width: 48px;
1019
1019
  max-width: 48px;
1020
1020
  padding: 4px !important;
1021
1021
  text-align: center;
1022
1022
  }
1023
- .DataGridTable_module_rowNumberHeaderCellWrapper {
1023
+ .ogrid-fluent__DataGridTable-module__rowNumberHeaderCellWrapper {
1024
1024
  width: 50px;
1025
1025
  min-width: 50px;
1026
1026
  max-width: 50px;
@@ -1031,7 +1031,7 @@
1031
1031
  color: var(--colorNeutralForeground3, #666);
1032
1032
  border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
1033
1033
  }
1034
- .DataGridTable_module_rowNumberCellWrapper {
1034
+ .ogrid-fluent__DataGridTable-module__rowNumberCellWrapper {
1035
1035
  width: 50px;
1036
1036
  min-width: 50px;
1037
1037
  max-width: 50px;
@@ -1042,27 +1042,27 @@
1042
1042
  color: var(--colorNeutralForeground3, #666);
1043
1043
  border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
1044
1044
  }
1045
- .DataGridTable_module_dataTable .fui-TableBody .DataGridTable_module_selectedRow .fui-TableCell {
1045
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .ogrid-fluent__DataGridTable-module__selectedRow .fui-TableCell {
1046
1046
  background-color: var(--colorNeutralBackground1Selected, var(--ogrid-selected-row-bg, #e6f0fb));
1047
1047
  }
1048
- .DataGridTable_module_selectableGrid .DataGridTable_module_dataTable .fui-TableBody .fui-TableRow:hover .fui-TableCell {
1048
+ .ogrid-fluent__DataGridTable-module__selectableGrid .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow:hover .fui-TableCell {
1049
1049
  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
1050
1050
  cursor: pointer;
1051
1051
  }
1052
- .DataGridTable_module_selectableGrid .DataGridTable_module_dataTable .fui-TableBody .DataGridTable_module_selectedRow:hover .fui-TableCell {
1052
+ .ogrid-fluent__DataGridTable-module__selectableGrid .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .ogrid-fluent__DataGridTable-module__selectedRow:hover .fui-TableCell {
1053
1053
  background-color: var(--colorNeutralBackground1Hover, #dae8f8);
1054
1054
  }
1055
- .DataGridTable_module_selectableGrid .DataGridTable_module_dataTable .fui-TableBody .fui-TableRow {
1055
+ .ogrid-fluent__DataGridTable-module__selectableGrid .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow {
1056
1056
  cursor: pointer;
1057
1057
  }
1058
- .DataGridTable_module_cellContent {
1058
+ .ogrid-fluent__DataGridTable-module__cellContent {
1059
1059
  padding: 4px 8px;
1060
1060
  }
1061
- .DataGridTable_module_activeCellContent {
1061
+ .ogrid-fluent__DataGridTable-module__activeCellContent {
1062
1062
  outline: 2px solid var(--ogrid-selection-color, #217346) !important;
1063
1063
  background-color: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02)) !important;
1064
1064
  }
1065
- .DataGridTable_module_cellInRange {
1065
+ .ogrid-fluent__DataGridTable-module__cellInRange {
1066
1066
  background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
1067
1067
  }
1068
1068
  [data-drag-range] {
@@ -1071,111 +1071,111 @@
1071
1071
  [data-drag-anchor] {
1072
1072
  background-color: var(--ogrid-bg, #ffffff) !important;
1073
1073
  }
1074
- .DataGridTable_module_cellCut {
1074
+ .ogrid-fluent__DataGridTable-module__cellCut {
1075
1075
  background-color: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
1076
1076
  }
1077
- .DataGridTable_module_stickyHeader {
1077
+ .ogrid-fluent__DataGridTable-module__stickyHeader {
1078
1078
  z-index: 8;
1079
1079
  background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
1080
1080
  }
1081
- .DataGridTable_module_stickyHeader .fui-TableHeaderCell {
1081
+ .ogrid-fluent__DataGridTable-module__stickyHeader .fui-TableHeaderCell {
1082
1082
  position: sticky;
1083
1083
  top: 0;
1084
1084
  }
1085
- .DataGridTable_module_stickyHeader .DataGridTable_module_pinnedColLeft,
1086
- .DataGridTable_module_stickyHeader .DataGridTable_module_pinnedColRight {
1085
+ .ogrid-fluent__DataGridTable-module__stickyHeader .ogrid-fluent__DataGridTable-module__pinnedColLeft,
1086
+ .ogrid-fluent__DataGridTable-module__stickyHeader .ogrid-fluent__DataGridTable-module__pinnedColRight {
1087
1087
  top: 0;
1088
1088
  z-index: 10;
1089
1089
  }
1090
- .DataGridTable_module_dataTable .DataGridTable_module_pinnedColLeft {
1090
+ .ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__pinnedColLeft {
1091
1091
  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
1092
1092
  border-right: 1px solid var(--colorNeutralStroke1, var(--ogrid-border, rgba(0, 0, 0, 0.12)));
1093
1093
  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
1094
1094
  }
1095
- .DataGridTable_module_dataTable .fui-TableHeader .DataGridTable_module_pinnedColLeft {
1095
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeader .ogrid-fluent__DataGridTable-module__pinnedColLeft {
1096
1096
  background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
1097
1097
  }
1098
- .DataGridTable_module_dataTable .DataGridTable_module_pinnedColRight {
1098
+ .ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__pinnedColRight {
1099
1099
  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
1100
1100
  border-left: 1px solid var(--colorNeutralStroke1, var(--ogrid-border, rgba(0, 0, 0, 0.12)));
1101
1101
  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
1102
1102
  }
1103
- .DataGridTable_module_dataTable .fui-TableHeader .DataGridTable_module_pinnedColRight {
1103
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeader .ogrid-fluent__DataGridTable-module__pinnedColRight {
1104
1104
  background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
1105
1105
  }
1106
- .DataGridTable_module_headerMenuTrigger {
1106
+ .ogrid-fluent__DataGridTable-module__headerMenuTrigger {
1107
1107
  color: var(--colorNeutralForeground3, #666);
1108
1108
  }
1109
- .DataGridTable_module_headerMenuTrigger:hover {
1109
+ .ogrid-fluent__DataGridTable-module__headerMenuTrigger:hover {
1110
1110
  background: var(--colorNeutralBackground1Hover, #f3f2f1);
1111
1111
  }
1112
- .DataGridTable_module_headerMenuTrigger:active {
1112
+ .ogrid-fluent__DataGridTable-module__headerMenuTrigger:active {
1113
1113
  background: var(--colorNeutralBackground1Pressed, #e1dfdd);
1114
1114
  }
1115
- .DataGridTable_module_headerMenuTrigger:focus-visible {
1115
+ .ogrid-fluent__DataGridTable-module__headerMenuTrigger:focus-visible {
1116
1116
  outline: 2px solid var(--colorBrandStroke1, var(--ogrid-accent, #0078d4));
1117
1117
  }
1118
- .DataGridTable_module_resizeHandle:hover::after {
1118
+ .ogrid-fluent__DataGridTable-module__resizeHandle:hover::after {
1119
1119
  background-color: var(--colorBrandForeground1, var(--ogrid-accent, #0078d4));
1120
1120
  }
1121
- .DataGridTable_module_resizeHandle:active::after {
1121
+ .ogrid-fluent__DataGridTable-module__resizeHandle:active::after {
1122
1122
  background-color: var(--colorBrandForeground1Pressed, #005a9e);
1123
1123
  }
1124
- .DataGridTable_module_statusBar {
1124
+ .ogrid-fluent__DataGridTable-module__statusBar {
1125
1125
  min-width: 0;
1126
1126
  color: var(--colorNeutralForeground2, #616161);
1127
1127
  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
1128
1128
  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
1129
1129
  user-select: none;
1130
1130
  }
1131
- .DataGridTable_module_statusBarItem:not(:last-child)::after {
1131
+ .ogrid-fluent__DataGridTable-module__statusBarItem:not(:last-child)::after {
1132
1132
  display: inline-block;
1133
1133
  background-color: var(--colorNeutralStroke1, #c4c4c4);
1134
1134
  }
1135
- .DataGridTable_module_statusBarLabel {
1135
+ .ogrid-fluent__DataGridTable-module__statusBarLabel {
1136
1136
  color: var(--colorNeutralForeground3, #707070);
1137
1137
  font-weight: 400;
1138
1138
  }
1139
- .DataGridTable_module_statusBarValue {
1139
+ .ogrid-fluent__DataGridTable-module__statusBarValue {
1140
1140
  color: var(--colorNeutralForeground1, #242424);
1141
1141
  }
1142
- .DataGridTable_module_contextMenu {
1142
+ .ogrid-fluent__DataGridTable-module__contextMenu {
1143
1143
  background: var(--colorNeutralBackground1, #fff);
1144
1144
  border: 1px solid var(--colorNeutralStroke1, #e0e0e0);
1145
1145
  border-radius: var(--borderRadiusMedium, 4px);
1146
1146
  box-shadow: var(--shadow16, 0 4px 16px rgba(0, 0, 0, 0.12));
1147
1147
  outline: none;
1148
1148
  }
1149
- .DataGridTable_module_contextMenuItem {
1149
+ .ogrid-fluent__DataGridTable-module__contextMenuItem {
1150
1150
  color: var(--colorNeutralForeground1, #242424);
1151
1151
  }
1152
- .DataGridTable_module_contextMenuItem:hover:not(:disabled) {
1152
+ .ogrid-fluent__DataGridTable-module__contextMenuItem:hover:not(:disabled) {
1153
1153
  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
1154
1154
  }
1155
- .DataGridTable_module_contextMenuItemShortcut {
1155
+ .ogrid-fluent__DataGridTable-module__contextMenuItemShortcut {
1156
1156
  color: var(--colorNeutralForeground3, rgba(0, 0, 0, 0.4));
1157
1157
  }
1158
- .DataGridTable_module_contextMenuDivider {
1158
+ .ogrid-fluent__DataGridTable-module__contextMenuDivider {
1159
1159
  background-color: var(--colorNeutralStroke2, #e0e0e0);
1160
1160
  }
1161
- .DataGridTable_module_loadingOverlayContent {
1161
+ .ogrid-fluent__DataGridTable-module__loadingOverlayContent {
1162
1162
  background: var(--colorNeutralBackground1, #ffffff);
1163
1163
  border: 1px solid var(--colorNeutralStroke1, #c4c4c4);
1164
1164
  border-radius: var(--borderRadiusMedium, 4px);
1165
1165
  box-shadow: var(--shadow4, 0 2px 4px rgba(0, 0, 0, 0.14));
1166
1166
  }
1167
- .DataGridTable_module_loadingOverlayText {
1167
+ .ogrid-fluent__DataGridTable-module__loadingOverlayText {
1168
1168
  color: var(--colorNeutralForeground2, #616161);
1169
1169
  }
1170
- .DataGridTable_module_loadingDimmed {
1170
+ .ogrid-fluent__DataGridTable-module__loadingDimmed {
1171
1171
  transition: opacity 0.15s ease;
1172
1172
  }
1173
- .DataGridTable_module_emptyStateInGrid {
1173
+ .ogrid-fluent__DataGridTable-module__emptyStateInGrid {
1174
1174
  min-width: 0;
1175
1175
  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
1176
1176
  background-color: var(--colorNeutralBackground2, #fafafa);
1177
1177
  }
1178
- .DataGridTable_module_emptyStateInGridMessageSticky {
1178
+ .ogrid-fluent__DataGridTable-module__emptyStateInGridMessageSticky {
1179
1179
  position: sticky;
1180
1180
  left: 50%;
1181
1181
  transform: translateX(-50%);
@@ -1184,64 +1184,64 @@
1184
1184
  align-items: center;
1185
1185
  text-align: center;
1186
1186
  }
1187
- .DataGridTable_module_emptyStateInGridIcon {
1187
+ .ogrid-fluent__DataGridTable-module__emptyStateInGridIcon {
1188
1188
  font-size: 24px;
1189
1189
  margin-bottom: 8px;
1190
1190
  opacity: 0.6;
1191
1191
  }
1192
- .DataGridTable_module_emptyStateInGridTitle {
1192
+ .ogrid-fluent__DataGridTable-module__emptyStateInGridTitle {
1193
1193
  color: var(--colorNeutralForeground1, #242424);
1194
1194
  }
1195
- .DataGridTable_module_emptyStateInGridMessage {
1195
+ .ogrid-fluent__DataGridTable-module__emptyStateInGridMessage {
1196
1196
  color: var(--colorNeutralForeground2, #616161);
1197
1197
  max-width: 100%;
1198
1198
  }
1199
- .DataGridTable_module_emptyStateInGridLink {
1199
+ .ogrid-fluent__DataGridTable-module__emptyStateInGridLink {
1200
1200
  color: var(--colorBrandForeground1, #0f6cbd);
1201
1201
  }
1202
- .DataGridTable_module_emptyStateInGridLink:hover {
1202
+ .ogrid-fluent__DataGridTable-module__emptyStateInGridLink:hover {
1203
1203
  color: var(--colorBrandForeground1Hover, #115ea3);
1204
1204
  }
1205
- .DataGridTable_module_dataTable .fui-Link {
1205
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-Link {
1206
1206
  color: var(--colorBrandForeground1, #0f6cbd);
1207
1207
  font-weight: 600;
1208
1208
  text-decoration: none;
1209
1209
  }
1210
- .DataGridTable_module_dataTable .fui-Link:hover {
1210
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-Link:hover {
1211
1211
  text-decoration: underline;
1212
1212
  color: var(--colorBrandForeground1Hover, #115ea3);
1213
1213
  }
1214
- .DataGridTable_module_dataTable .fui-Link:active {
1214
+ .ogrid-fluent__DataGridTable-module__dataTable .fui-Link:active {
1215
1215
  color: var(--colorBrandForeground1Pressed, #0c3b5e);
1216
1216
  }
1217
- .DataGridTable_module_density-compact .DataGridTable_module_dataTable .fui-TableHeaderCell {
1217
+ .ogrid-fluent__DataGridTable-module__density-compact .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell {
1218
1218
  padding: 4px 8px;
1219
1219
  }
1220
- .DataGridTable_module_density-compact .DataGridTable_module_cellContent {
1220
+ .ogrid-fluent__DataGridTable-module__density-compact .ogrid-fluent__DataGridTable-module__cellContent {
1221
1221
  padding: 4px 8px;
1222
1222
  }
1223
- .DataGridTable_module_density-comfortable .DataGridTable_module_dataTable .fui-TableHeaderCell {
1223
+ .ogrid-fluent__DataGridTable-module__density-comfortable .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell {
1224
1224
  padding: 12px 16px;
1225
1225
  }
1226
- .DataGridTable_module_density-comfortable .DataGridTable_module_cellContent {
1226
+ .ogrid-fluent__DataGridTable-module__density-comfortable .ogrid-fluent__DataGridTable-module__cellContent {
1227
1227
  padding: 12px 16px;
1228
1228
  }
1229
- .DataGridTable_module_tableWrapper .fui-Button:focus-visible,
1230
- .tableWrapper .fui-MenuButton:focus-visible {
1229
+ .ogrid-fluent__DataGridTable-module__tableWrapper .fui-Button:focus-visible,
1230
+ .ogrid-fluent__DataGridTable-module__tableWrapper .fui-MenuButton:focus-visible {
1231
1231
  outline: 2px solid var(--colorBrandStroke1, #0078d4);
1232
1232
  outline-offset: 2px;
1233
1233
  }
1234
- .DataGridTable_module_tableWrapper .fui-Checkbox:focus-visible {
1234
+ .ogrid-fluent__DataGridTable-module__tableWrapper .fui-Checkbox:focus-visible {
1235
1235
  outline: 2px solid var(--colorBrandStroke1, #0078d4);
1236
1236
  outline-offset: 2px;
1237
1237
  }
1238
1238
 
1239
- /* src/ColumnChooser/ColumnChooser.module.scss */
1240
- .ColumnChooser_module_container {
1239
+ /* esbuild-sass-plugin:css-chunksrc/ColumnChooser/ColumnChooser.module.scss */
1240
+ .ogrid-fluent__ColumnChooser-module__container {
1241
1241
  position: relative;
1242
1242
  display: inline-flex;
1243
1243
  }
1244
- .ColumnChooser_module_dropdown {
1244
+ .ogrid-fluent__ColumnChooser-module__dropdown {
1245
1245
  position: absolute;
1246
1246
  top: calc(100% + 4px);
1247
1247
  right: 0;
@@ -1255,27 +1255,27 @@
1255
1255
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
1256
1256
  padding: 0;
1257
1257
  }
1258
- .ColumnChooser_module_header {
1258
+ .ogrid-fluent__ColumnChooser-module__header {
1259
1259
  padding: 8px 12px;
1260
1260
  border-bottom: 1px solid var(--colorNeutralStroke2, #edebe9);
1261
1261
  font-weight: 600;
1262
1262
  font-size: 13px;
1263
1263
  }
1264
- .ColumnChooser_module_optionsList {
1264
+ .ogrid-fluent__ColumnChooser-module__optionsList {
1265
1265
  max-height: 320px;
1266
1266
  overflow-y: auto;
1267
1267
  padding: 0;
1268
1268
  }
1269
- .ColumnChooser_module_optionItem {
1269
+ .ogrid-fluent__ColumnChooser-module__optionItem {
1270
1270
  padding: 4px 12px;
1271
1271
  display: flex;
1272
1272
  align-items: center;
1273
1273
  min-height: 32px;
1274
1274
  }
1275
- .ColumnChooser_module_optionItem:hover {
1275
+ .ogrid-fluent__ColumnChooser-module__optionItem:hover {
1276
1276
  background: var(--colorNeutralBackground1Hover, #f5f5f5);
1277
1277
  }
1278
- .ColumnChooser_module_actions {
1278
+ .ogrid-fluent__ColumnChooser-module__actions {
1279
1279
  display: flex;
1280
1280
  justify-content: flex-end;
1281
1281
  gap: 8px;
@@ -1283,8 +1283,8 @@
1283
1283
  border-top: 1px solid var(--colorNeutralStroke2, #edebe9);
1284
1284
  }
1285
1285
 
1286
- /* src/PaginationControls/PaginationControls.module.scss */
1287
- .PaginationControls_module_pagination {
1286
+ /* esbuild-sass-plugin:css-chunksrc/PaginationControls/PaginationControls.module.scss */
1287
+ .ogrid-fluent__PaginationControls-module__pagination {
1288
1288
  display: flex;
1289
1289
  flex-wrap: wrap;
1290
1290
  align-items: center;
@@ -1295,13 +1295,13 @@
1295
1295
  box-sizing: border-box;
1296
1296
  padding: 0;
1297
1297
  }
1298
- .PaginationControls_module_paginationInfo {
1298
+ .ogrid-fluent__PaginationControls-module__paginationInfo {
1299
1299
  font-size: 13px;
1300
1300
  color: var(--colorNeutralForeground2, #605e5c);
1301
1301
  flex-shrink: 0;
1302
1302
  font-variant-numeric: tabular-nums;
1303
1303
  }
1304
- .PaginationControls_module_paginationControls {
1304
+ .ogrid-fluent__PaginationControls-module__paginationControls {
1305
1305
  display: flex;
1306
1306
  align-items: center;
1307
1307
  gap: 4px;
@@ -1310,22 +1310,22 @@
1310
1310
  justify-content: center;
1311
1311
  min-width: 0;
1312
1312
  }
1313
- .PaginationControls_module_navBtn {
1313
+ .ogrid-fluent__PaginationControls-module__navBtn {
1314
1314
  min-width: 28px;
1315
1315
  min-height: 28px;
1316
1316
  }
1317
- .PaginationControls_module_pageNumbers {
1317
+ .ogrid-fluent__PaginationControls-module__pageNumbers {
1318
1318
  display: inline-flex;
1319
1319
  align-items: center;
1320
1320
  gap: 4px;
1321
1321
  margin: 0 8px;
1322
1322
  }
1323
- .PaginationControls_module_pageBtn {
1323
+ .ogrid-fluent__PaginationControls-module__pageBtn {
1324
1324
  min-width: 28px;
1325
1325
  min-height: 28px;
1326
1326
  font-variant-numeric: tabular-nums;
1327
1327
  }
1328
- .PaginationControls_module_ellipsis {
1328
+ .ogrid-fluent__PaginationControls-module__ellipsis {
1329
1329
  display: inline-flex;
1330
1330
  align-items: center;
1331
1331
  justify-content: center;
@@ -1336,18 +1336,18 @@
1336
1336
  pointer-events: none;
1337
1337
  letter-spacing: 0.02em;
1338
1338
  }
1339
- .PaginationControls_module_pageSizeSelector {
1339
+ .ogrid-fluent__PaginationControls-module__pageSizeSelector {
1340
1340
  display: inline-flex;
1341
1341
  align-items: center;
1342
1342
  gap: 8px;
1343
1343
  flex-shrink: 0;
1344
1344
  }
1345
- .PaginationControls_module_pageSizeSelector .PaginationControls_module_pageSizeLabel {
1345
+ .ogrid-fluent__PaginationControls-module__pageSizeSelector .ogrid-fluent__PaginationControls-module__pageSizeLabel {
1346
1346
  font-size: 13px;
1347
1347
  color: var(--colorNeutralForeground2, #605e5c);
1348
1348
  user-select: none;
1349
1349
  white-space: nowrap;
1350
1350
  }
1351
- .PaginationControls_module_pageSizeSelector .PaginationControls_module_pageSizeSelect {
1351
+ .ogrid-fluent__PaginationControls-module__pageSizeSelector .ogrid-fluent__PaginationControls-module__pageSizeSelect {
1352
1352
  min-width: 72px;
1353
1353
  }