@alaarab/ogrid-react-fluent 2.1.9 → 2.1.11

package/dist/esm/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
-/* src/ColumnHeaderFilter/ColumnHeaderFilter.module.scss */
-.ColumnHeaderFilter_module_columnHeader {
+/* esbuild-sass-plugin:css-chunksrc/ColumnHeaderFilter/ColumnHeaderFilter.module.scss */
+.ogrid-fluent__ColumnHeaderFilter-module__columnHeader {
   display: flex;
   align-items: center;
   gap: 4px;
@@ -17,7 +17,7 @@
   --dt-header-action-button: 24px;
   --dt-header-action-gap: 2px;
 }
-.ColumnHeaderFilter_module_headerContent {
+.ogrid-fluent__ColumnHeaderFilter-module__headerContent {
   display: flex;
   align-items: center;
   gap: 4px;
@@ -29,7 +29,7 @@
   box-sizing: border-box;
   overflow: hidden;
 }
-.ColumnHeaderFilter_module_columnName {
+.ogrid-fluent__ColumnHeaderFilter-module__columnName {
   display: block;
   min-width: 0;
   max-width: 100%;
@@ -40,14 +40,14 @@
   font-size: 14px;
   color: var(--colorNeutralForeground1, #242424);
 }
-.ColumnHeaderFilter_module_headerActions {
+.ogrid-fluent__ColumnHeaderFilter-module__headerActions {
   display: flex;
   align-items: center;
   gap: var(--dt-header-action-gap);
   margin-left: auto;
   flex-shrink: 0;
 }
-.ColumnHeaderFilter_module_filterIcon {
+.ogrid-fluent__ColumnHeaderFilter-module__filterIcon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -64,25 +64,25 @@
   position: relative;
   transition: all 0.15s ease;
 }
-.ColumnHeaderFilter_module_filterIcon svg {
+.ogrid-fluent__ColumnHeaderFilter-module__filterIcon svg {
   font-size: 14px;
 }
-.ColumnHeaderFilter_module_filterIcon:hover {
+.ogrid-fluent__ColumnHeaderFilter-module__filterIcon:hover {
   background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
   color: var(--colorNeutralForeground2Hover, #424242);
 }
-.ColumnHeaderFilter_module_filterIcon.ColumnHeaderFilter_module_filterActive {
+.ogrid-fluent__ColumnHeaderFilter-module__filterIcon.ogrid-fluent__ColumnHeaderFilter-module__filterActive {
   background-color: var(--colorSubtleBackgroundSelected, #e0e0e0);
   color: var(--colorNeutralForeground2, #616161);
 }
-.ColumnHeaderFilter_module_filterIcon.ColumnHeaderFilter_module_filterActive:hover {
+.ogrid-fluent__ColumnHeaderFilter-module__filterIcon.ogrid-fluent__ColumnHeaderFilter-module__filterActive:hover {
   background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
 }
-.ColumnHeaderFilter_module_filterIcon.ColumnHeaderFilter_module_filterOpen {
+.ogrid-fluent__ColumnHeaderFilter-module__filterIcon.ogrid-fluent__ColumnHeaderFilter-module__filterOpen {
   background-color: var(--colorSubtleBackgroundPressed, #ebebeb);
   color: var(--colorNeutralForeground2, #616161);
 }
-.ColumnHeaderFilter_module_filterBadge {
+.ogrid-fluent__ColumnHeaderFilter-module__filterBadge {
   position: absolute;
   top: 2px;
   right: 2px;
@@ -92,7 +92,7 @@
   border-radius: 50%;
   border: 1px solid var(--colorNeutralBackground1, #ffffff);
 }
-.ColumnHeaderFilter_module_filterPopover {
+.ogrid-fluent__ColumnHeaderFilter-module__filterPopover {
   min-width: 280px;
   max-width: 320px;
   overflow: hidden;
@@ -105,7 +105,7 @@
   font-size: 14px;
   color: var(--colorNeutralForeground1, #242424);
 }
-.ColumnHeaderFilter_module_popoverHeader {
+.ogrid-fluent__ColumnHeaderFilter-module__popoverHeader {
   padding: 10px 14px;
   font-size: 12px;
   font-weight: 600;
@@ -113,11 +113,11 @@
   border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
   background-color: var(--colorNeutralBackground2, #fafafa);
 }
-.ColumnHeaderFilter_module_popoverSearch {
+.ogrid-fluent__ColumnHeaderFilter-module__popoverSearch {
   padding: 10px 12px;
   border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
 }
-.ColumnHeaderFilter_module_nativeInputWrapper {
+.ogrid-fluent__ColumnHeaderFilter-module__nativeInputWrapper {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -129,16 +129,16 @@
   min-height: 36px;
   box-sizing: border-box;
 }
-.ColumnHeaderFilter_module_nativeInputWrapper:focus-within {
+.ogrid-fluent__ColumnHeaderFilter-module__nativeInputWrapper:focus-within {
   border-color: var(--colorBrandStroke1, #0f6cbd);
   outline: none;
 }
-.ColumnHeaderFilter_module_nativeInputIcon {
+.ogrid-fluent__ColumnHeaderFilter-module__nativeInputIcon {
   color: var(--colorNeutralForeground3, #616161);
   font-size: 16px;
   flex-shrink: 0;
 }
-.ColumnHeaderFilter_module_nativeInput {
+.ogrid-fluent__ColumnHeaderFilter-module__nativeInput {
   flex: 1;
   min-width: 0;
   border: none;
@@ -149,22 +149,22 @@
   background: transparent;
   color: var(--colorNeutralForeground1, #242424);
 }
-.ColumnHeaderFilter_module_nativeInput::placeholder {
+.ogrid-fluent__ColumnHeaderFilter-module__nativeInput::placeholder {
   color: var(--colorNeutralForeground4, #707070);
 }
-.ColumnHeaderFilter_module_resultCount {
+.ogrid-fluent__ColumnHeaderFilter-module__resultCount {
   margin-top: 6px;
   font-size: 11px;
   color: var(--colorNeutralForeground2, #616161);
 }
-.ColumnHeaderFilter_module_selectAllRow {
+.ogrid-fluent__ColumnHeaderFilter-module__selectAllRow {
   display: flex;
   gap: 8px;
   padding: 6px 12px;
   border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
   background-color: var(--colorNeutralBackground2, #fafafa);
 }
-.ColumnHeaderFilter_module_selectAllButton {
+.ogrid-fluent__ColumnHeaderFilter-module__selectAllButton {
   background: none;
   border: none;
   color: var(--colorBrandForeground1, #0f6cbd);
@@ -175,36 +175,36 @@
   border-radius: var(--borderRadiusSmall, 4px);
   transition: background-color 0.15s ease;
 }
-.ColumnHeaderFilter_module_selectAllButton:hover {
+.ogrid-fluent__ColumnHeaderFilter-module__selectAllButton:hover {
   background-color: var(--colorBrandBackground2, #ebf3fc);
 }
-.ColumnHeaderFilter_module_popoverOptions {
+.ogrid-fluent__ColumnHeaderFilter-module__popoverOptions {
   overflow-y: auto;
   max-height: 250px;
   padding: 6px 0;
 }
-.ColumnHeaderFilter_module_popoverOptions::-webkit-scrollbar {
+.ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar {
   width: 6px;
 }
-.ColumnHeaderFilter_module_popoverOptions::-webkit-scrollbar-track {
+.ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar-track {
   background: var(--colorNeutralBackground3, #f5f5f5);
 }
-.ColumnHeaderFilter_module_popoverOptions::-webkit-scrollbar-thumb {
+.ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar-thumb {
   background: var(--colorNeutralStroke1, #d1d1d1);
   border-radius: 3px;
 }
-.ColumnHeaderFilter_module_popoverOptions::-webkit-scrollbar-thumb:hover {
+.ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar-thumb:hover {
   background: var(--colorNeutralForeground2, #616161);
 }
-.ColumnHeaderFilter_module_popoverOption {
+.ogrid-fluent__ColumnHeaderFilter-module__popoverOption {
   padding: 4px 12px;
   transition: background-color 0.1s ease;
   cursor: pointer;
 }
-.ColumnHeaderFilter_module_popoverOption:hover {
+.ogrid-fluent__ColumnHeaderFilter-module__popoverOption:hover {
   background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
 }
-.ColumnHeaderFilter_module_nativeCheckbox {
+.ogrid-fluent__ColumnHeaderFilter-module__nativeCheckbox {
   width: 16px;
   height: 16px;
   margin: 0;
@@ -212,7 +212,7 @@
   accent-color: var(--colorBrandBackground, #0f6cbd);
   flex-shrink: 0;
 }
-.ColumnHeaderFilter_module_checkboxLabel {
+.ogrid-fluent__ColumnHeaderFilter-module__checkboxLabel {
   margin-left: 8px;
   font-size: 14px;
   color: var(--colorNeutralForeground1, #242424);
@@ -222,62 +222,62 @@
   min-width: 0;
   cursor: pointer;
 }
-.ColumnHeaderFilter_module_personOption {
+.ogrid-fluent__ColumnHeaderFilter-module__personOption {
   padding: 8px 12px;
   cursor: pointer;
   transition: background-color 0.1s ease;
 }
-.ColumnHeaderFilter_module_personOption:hover {
+.ogrid-fluent__ColumnHeaderFilter-module__personOption:hover {
   background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
 }
-.ColumnHeaderFilter_module_loadingContainer {
+.ogrid-fluent__ColumnHeaderFilter-module__loadingContainer {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 20px;
 }
-.ColumnHeaderFilter_module_filterSpinner {
+.ogrid-fluent__ColumnHeaderFilter-module__filterSpinner {
   width: 20px;
   height: 20px;
   border: 2px solid var(--colorNeutralStroke1, #d1d1d1);
   border-top-color: var(--colorBrandBackground, #0f6cbd);
   border-radius: 50%;
-  animation: ColumnHeaderFilter_module_ogrid-filter-spin 0.8s linear infinite;
+  animation: ogrid-fluent__ColumnHeaderFilter-module__ogrid-filter-spin 0.8s linear infinite;
 }
-@keyframes ColumnHeaderFilter_module_ogrid-filter-spin {
+@keyframes ogrid-fluent__ColumnHeaderFilter-module__ogrid-filter-spin {
   to {
     transform: rotate(360deg);
   }
 }
-.ColumnHeaderFilter_module_noResults {
+.ogrid-fluent__ColumnHeaderFilter-module__noResults {
   padding: 16px;
   text-align: center;
   font-size: 12px;
   color: var(--colorNeutralForeground2, #616161);
 }
-.ColumnHeaderFilter_module_selectedUserSection {
+.ogrid-fluent__ColumnHeaderFilter-module__selectedUserSection {
   padding: 10px 12px;
   border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
   background-color: var(--colorSubtleBackgroundSelected, #e0e0e0);
 }
-.ColumnHeaderFilter_module_selectedUserLabel {
+.ogrid-fluent__ColumnHeaderFilter-module__selectedUserLabel {
   font-size: 11px;
   color: var(--colorNeutralForeground2, #616161);
   margin-bottom: 6px;
 }
-.ColumnHeaderFilter_module_selectedUser {
+.ogrid-fluent__ColumnHeaderFilter-module__selectedUser {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
 }
-.ColumnHeaderFilter_module_userInfo {
+.ogrid-fluent__ColumnHeaderFilter-module__userInfo {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.ColumnHeaderFilter_module_avatar {
+.ogrid-fluent__ColumnHeaderFilter-module__avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -288,27 +288,27 @@
   flex-shrink: 0;
   overflow: hidden;
 }
-.ColumnHeaderFilter_module_avatarImg {
+.ogrid-fluent__ColumnHeaderFilter-module__avatarImg {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
 }
-.ColumnHeaderFilter_module_avatarInitials {
+.ogrid-fluent__ColumnHeaderFilter-module__avatarInitials {
   color: var(--colorNeutralForegroundOnBrand, #ffffff);
   font-size: 12px;
   font-weight: 600;
   line-height: 1;
 }
-.ColumnHeaderFilter_module_userText {
+.ogrid-fluent__ColumnHeaderFilter-module__userText {
   display: flex;
   flex-direction: column;
 }
-.ColumnHeaderFilter_module_userSecondary {
+.ogrid-fluent__ColumnHeaderFilter-module__userSecondary {
   font-size: 12px;
   color: var(--colorNeutralForeground2, #616161);
 }
-.ColumnHeaderFilter_module_removeUserButton {
+.ogrid-fluent__ColumnHeaderFilter-module__removeUserButton {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -322,11 +322,11 @@
   cursor: pointer;
   transition: all 0.15s ease;
 }
-.ColumnHeaderFilter_module_removeUserButton:hover {
+.ogrid-fluent__ColumnHeaderFilter-module__removeUserButton:hover {
   background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
   color: var(--colorPaletteRedForeground1, #c4314b);
 }
-.ColumnHeaderFilter_module_popoverActions {
+.ogrid-fluent__ColumnHeaderFilter-module__popoverActions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
@@ -334,7 +334,7 @@
   border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
   background-color: var(--colorNeutralBackground2, #fafafa);
 }
-.ColumnHeaderFilter_module_clearButton {
+.ogrid-fluent__ColumnHeaderFilter-module__clearButton {
   padding: 6px 12px;
   border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
   border-radius: var(--borderRadiusMedium, 4px);
@@ -345,15 +345,15 @@
   cursor: pointer;
   transition: all 0.15s ease;
 }
-.ColumnHeaderFilter_module_clearButton:hover:not(:disabled) {
+.ogrid-fluent__ColumnHeaderFilter-module__clearButton:hover:not(:disabled) {
   background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
   border-color: var(--colorNeutralStroke1Hover, #c7c7c7);
 }
-.ColumnHeaderFilter_module_clearButton:disabled {
+.ogrid-fluent__ColumnHeaderFilter-module__clearButton:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.ColumnHeaderFilter_module_applyButton {
+.ogrid-fluent__ColumnHeaderFilter-module__applyButton {
   padding: 6px 12px;
   border: 1px solid var(--colorBrandBackground, #0f6cbd);
   border-radius: var(--borderRadiusMedium, 4px);
@@ -364,13 +364,13 @@
   cursor: pointer;
   transition: all 0.15s ease;
 }
-.ColumnHeaderFilter_module_applyButton:hover {
+.ogrid-fluent__ColumnHeaderFilter-module__applyButton:hover {
   background-color: var(--colorBrandBackgroundHover, #115ea3);
   border-color: var(--colorBrandBackgroundHover, #115ea3);
 }
 
-/* src/ColumnHeaderMenu/ColumnHeaderMenu.module.scss */
-.ColumnHeaderMenu_module_content {
+/* esbuild-sass-plugin:css-chunksrc/ColumnHeaderMenu/ColumnHeaderMenu.module.scss */
+.ogrid-fluent__ColumnHeaderMenu-module__content {
   min-width: 140px;
   background: var(--ogrid-bg, #ffffff);
   border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
@@ -382,7 +382,7 @@
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform, opacity;
 }
-.ColumnHeaderMenu_module_item {
+.ogrid-fluent__ColumnHeaderMenu-module__item {
   font-size: 13px;
   line-height: 1;
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
@@ -400,40 +400,41 @@
   width: 100%;
   text-align: left;
 }
-.ColumnHeaderMenu_module_item:disabled {
+.ogrid-fluent__ColumnHeaderMenu-module__item:disabled {
   color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
   pointer-events: none;
   cursor: not-allowed;
 }
-.ColumnHeaderMenu_module_item:hover:not(:disabled) {
+.ogrid-fluent__ColumnHeaderMenu-module__item:hover:not(:disabled) {
   background-color: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
 }
-.ColumnHeaderMenu_module_separator {
+.ogrid-fluent__ColumnHeaderMenu-module__separator {
   height: 1px;
   background-color: var(--ogrid-border, rgba(0, 0, 0, 0.12));
   margin: 4px 0;
 }
 
-/* src/DataGridTable/DataGridTable.module.scss */
-.DataGridTable_module_tableScrollContent {
+/* esbuild-sass-plugin:css-chunksrc/DataGridTable/DataGridTable.module.scss */
+.ogrid-fluent__DataGridTable-module__tableScrollContent {
   display: flex;
   flex-direction: column;
   width: 100%;
   min-width: 0;
   background: var(--ogrid-bg, #fff);
 }
-.DataGridTable_module_tableWidthAnchor {
+.ogrid-fluent__DataGridTable-module__tableWidthAnchor {
   position: relative;
   width: max-content;
-  min-width: var(--data-table-min-width, max-content);
+  min-width: 100%;
+  overflow: clip;
   background: var(--ogrid-bg, #fff);
 }
-.DataGridTable_module_tableWrapper {
+.ogrid-fluent__DataGridTable-module__tableWrapper {
   position: relative;
   flex: 1;
   min-height: 0;
-  overflow-x: hidden;
+  overflow-x: auto;
   overflow-y: auto;
   width: 100%;
   min-width: 0;
@@ -442,19 +443,18 @@
   background: var(--ogrid-bg, #fff);
   will-change: scroll-position;
 }
-.DataGridTable_module_tableWrapper[data-overflow-x=true] {
-  overflow-x: auto;
+.ogrid-fluent__DataGridTable-module__tableWrapper[data-suppress-scroll=true] {
+  overflow-x: hidden;
 }
-.DataGridTable_module_tableWrapper[data-empty=true] {
+.ogrid-fluent__DataGridTable-module__tableWrapper[data-empty=true] {
   overflow-x: hidden;
 }
-.DataGridTable_module_tableWrapper[data-loading=true] {
+.ogrid-fluent__DataGridTable-module__tableWrapper[data-loading=true] {
   min-height: 200px;
 }
-.DataGridTable_module_dataTable {
-  width: var(--data-table-width, fit-content);
-  max-width: 100%;
-  min-width: var(--data-table-min-width, max-content);
+.ogrid-fluent__DataGridTable-module__dataTable {
+  width: var(--data-table-width, 100%);
+  min-width: max-content;
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -462,22 +462,22 @@
   background-color: var(--ogrid-bg, #fff);
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
 }
-.DataGridTable_module_dataTable tbody tr {
+.ogrid-fluent__DataGridTable-module__dataTable tbody tr {
   height: var(--ogrid-row-height, auto);
 }
-.DataGridTable_module_groupHeaderCell {
+.ogrid-fluent__DataGridTable-module__groupHeaderCell {
   text-align: center;
   font-weight: 600;
   border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-  padding: 6px 10px;
+  padding: var(--ogrid-cell-padding, 6px 10px);
   background: var(--ogrid-header-bg, #f5f5f5);
 }
-.DataGridTable_module_headerCellContent {
+.ogrid-fluent__DataGridTable-module__headerCellContent {
   display: flex;
   align-items: center;
   gap: 4px;
 }
-.DataGridTable_module_headerMenuTrigger {
+.ogrid-fluent__DataGridTable-module__headerMenuTrigger {
   background: transparent;
   border: none;
   cursor: pointer;
@@ -494,27 +494,27 @@
   min-width: 20px;
   height: 20px;
 }
-.DataGridTable_module_headerMenuTrigger:hover {
+.ogrid-fluent__DataGridTable-module__headerMenuTrigger:hover {
   background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
 }
-.DataGridTable_module_headerMenuTrigger:active {
+.ogrid-fluent__DataGridTable-module__headerMenuTrigger:active {
   background: var(--ogrid-active-bg, rgba(0, 0, 0, 0.08));
 }
-.DataGridTable_module_headerMenuTrigger:focus-visible {
+.ogrid-fluent__DataGridTable-module__headerMenuTrigger:focus-visible {
   outline: 2px solid var(--ogrid-accent, #0078d4);
   outline-offset: 2px;
 }
-.DataGridTable_module_dropIndicator {
+.ogrid-fluent__DataGridTable-module__dropIndicator {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 3px;
   background: var(--ogrid-selection-color, #217346);
   pointer-events: none;
-  z-index: 100;
+  z-index: var(--ogrid-z-drop-indicator, 100);
   transition: left 0.05s;
 }
-.DataGridTable_module_resizeHandle {
+.ogrid-fluent__DataGridTable-module__resizeHandle {
   position: absolute;
   top: 0;
   right: -3px;
@@ -522,9 +522,9 @@
   width: 8px;
   cursor: col-resize;
   user-select: none;
-  z-index: 1;
+  z-index: var(--ogrid-z-resize-handle, 1);
 }
-.DataGridTable_module_resizeHandle::after {
+.ogrid-fluent__DataGridTable-module__resizeHandle::after {
   content: "";
   position: absolute;
   top: 0;
@@ -532,18 +532,18 @@
   bottom: 0;
   width: 2px;
 }
-.DataGridTable_module_resizeHandle:hover::after {
+.ogrid-fluent__DataGridTable-module__resizeHandle:hover::after {
   background-color: var(--ogrid-accent, #0078d4);
 }
-.DataGridTable_module_resizeHandle:active::after {
+.ogrid-fluent__DataGridTable-module__resizeHandle:active::after {
   background-color: var(--ogrid-accent-dark, #005a9e);
 }
-.DataGridTable_module_pinnedColLeft {
+.ogrid-fluent__DataGridTable-module__pinnedColLeft {
   position: sticky;
-  z-index: 6;
+  z-index: var(--ogrid-z-pinned, 6);
   background: var(--ogrid-bg, #ffffff);
 }
-.DataGridTable_module_pinnedColLeft::after {
+.ogrid-fluent__DataGridTable-module__pinnedColLeft::after {
   content: "";
   position: absolute;
   top: -1px;
@@ -557,12 +557,12 @@
       transparent);
   pointer-events: none;
 }
-.DataGridTable_module_pinnedColRight {
+.ogrid-fluent__DataGridTable-module__pinnedColRight {
   position: sticky;
-  z-index: 6;
+  z-index: var(--ogrid-z-pinned, 6);
   background: var(--ogrid-bg, #ffffff);
 }
-.DataGridTable_module_pinnedColRight::before {
+.ogrid-fluent__DataGridTable-module__pinnedColRight::before {
   content: "";
   position: absolute;
   top: -1px;
@@ -576,7 +576,7 @@
       transparent);
   pointer-events: none;
 }
-.DataGridTable_module_cellContent {
+.ogrid-fluent__DataGridTable-module__cellContent {
   width: 100%;
   height: 100%;
   display: flex;
@@ -589,18 +589,18 @@
   user-select: none;
   outline: none;
 }
-.DataGridTable_module_cellContent:focus-visible {
+.ogrid-fluent__DataGridTable-module__cellContent:focus-visible {
   outline: none;
 }
-.DataGridTable_module_activeCellContent {
+.ogrid-fluent__DataGridTable-module__activeCellContent {
   outline: 2px solid var(--ogrid-selection-color, #217346);
   outline-offset: -1px;
-  z-index: 2;
+  z-index: var(--ogrid-z-active-cell, 2);
   position: relative;
   overflow: visible;
   background: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02));
 }
-.DataGridTable_module_editingCellContent {
+.ogrid-fluent__DataGridTable-module__editingCellContent {
   width: 100%;
   height: 100%;
   display: flex;
@@ -608,30 +608,30 @@
   box-sizing: border-box;
   outline: 2px solid var(--ogrid-selection-color, #217346);
   outline-offset: -1px;
-  z-index: 2;
+  z-index: var(--ogrid-z-active-cell, 2);
   position: relative;
   background: var(--ogrid-bg, #fff);
   overflow: visible;
   padding: 0;
 }
-.DataGridTable_module_cellInRange {
-  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellInRange {
+  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12));
 }
-[data-drag-range] {
-  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-range] {
+  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12));
 }
-[data-drag-anchor] {
-  background: var(--ogrid-bg, #fff) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-anchor] {
+  background: var(--ogrid-bg, #fff);
 }
-.DataGridTable_module_activeCellContent[data-drag-anchor],
-.DataGridTable_module_activeCellContent[data-drag-range] {
+.ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-anchor],
+.ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-range] {
   outline: none;
 }
-.DataGridTable_module_cellCut {
-  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellCut {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
   opacity: 0.7;
 }
-.DataGridTable_module_fillHandle {
+.ogrid-fluent__DataGridTable-module__fillHandle {
   position: absolute;
   right: -3px;
   bottom: -3px;
@@ -642,24 +642,24 @@
   border-radius: 1px;
   cursor: crosshair;
   pointer-events: auto;
-  z-index: 3;
+  z-index: var(--ogrid-z-fill-handle, 3);
 }
-.DataGridTable_module_selectionHeaderCellInner,
-.DataGridTable_module_selectionCellInner {
+.ogrid-fluent__DataGridTable-module__selectionHeaderCellInner,
+.ogrid-fluent__DataGridTable-module__selectionCellInner {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
 }
-.DataGridTable_module_rowNumberHeaderCellInner,
-.DataGridTable_module_rowNumberCellInner {
+.ogrid-fluent__DataGridTable-module__rowNumberHeaderCellInner,
+.ogrid-fluent__DataGridTable-module__rowNumberCellInner {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   font-variant-numeric: tabular-nums;
 }
-.DataGridTable_module_statusBar {
+.ogrid-fluent__DataGridTable-module__statusBar {
   display: flex;
   align-items: center;
   gap: 16px;
@@ -672,28 +672,28 @@
   border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
   min-height: 28px;
 }
-.DataGridTable_module_statusBarItem {
+.ogrid-fluent__DataGridTable-module__statusBarItem {
   display: inline-flex;
   align-items: center;
   gap: 4px;
 }
-.DataGridTable_module_statusBarItem:not(:last-child)::after {
+.ogrid-fluent__DataGridTable-module__statusBarItem:not(:last-child)::after {
   content: "";
   width: 1px;
   height: 14px;
   background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
   margin-left: 12px;
 }
-.DataGridTable_module_statusBarLabel {
+.ogrid-fluent__DataGridTable-module__statusBarLabel {
   color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
 }
-.DataGridTable_module_statusBarValue {
+.ogrid-fluent__DataGridTable-module__statusBarValue {
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
   font-weight: 600;
 }
-.DataGridTable_module_contextMenu {
+.ogrid-fluent__DataGridTable-module__contextMenu {
   position: fixed;
-  z-index: 10000;
+  z-index: var(--ogrid-z-context-menu, 10000);
   min-width: 160px;
   padding: 4px 0;
   background: var(--ogrid-bg, #fff);
@@ -701,7 +701,7 @@
   border-radius: 6px;
   box-shadow: var(--ogrid-shadow, 0 4px 16px rgba(0, 0, 0, 0.12));
 }
-.DataGridTable_module_contextMenuItem {
+.ogrid-fluent__DataGridTable-module__contextMenuItem {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -715,29 +715,29 @@
   cursor: pointer;
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
 }
-.DataGridTable_module_contextMenuItem:hover:not(:disabled) {
+.ogrid-fluent__DataGridTable-module__contextMenuItem:hover:not(:disabled) {
   background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
 }
-.DataGridTable_module_contextMenuItem:disabled {
+.ogrid-fluent__DataGridTable-module__contextMenuItem:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.DataGridTable_module_contextMenuItemLabel {
+.ogrid-fluent__DataGridTable-module__contextMenuItemLabel {
   flex: 1;
 }
-.DataGridTable_module_contextMenuItemShortcut {
+.ogrid-fluent__DataGridTable-module__contextMenuItemShortcut {
   color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
   font-size: 0.85em;
 }
-.DataGridTable_module_contextMenuDivider {
+.ogrid-fluent__DataGridTable-module__contextMenuDivider {
   height: 1px;
   margin: 4px 0;
   background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
 }
-.DataGridTable_module_loadingOverlay {
+.ogrid-fluent__DataGridTable-module__loadingOverlay {
   position: absolute;
   inset: 0;
-  z-index: 2;
+  z-index: var(--ogrid-z-loading, 2);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -745,7 +745,7 @@
   backdrop-filter: blur(1px);
   pointer-events: all;
 }
-.DataGridTable_module_loadingOverlayContent {
+.ogrid-fluent__DataGridTable-module__loadingOverlayContent {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -756,16 +756,16 @@
   border-radius: 6px;
   box-shadow: var(--ogrid-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
 }
-.DataGridTable_module_loadingOverlayText {
+.ogrid-fluent__DataGridTable-module__loadingOverlayText {
   font-size: 13px;
   font-weight: 500;
   color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
 }
-.DataGridTable_module_loadingDimmed {
+.ogrid-fluent__DataGridTable-module__loadingDimmed {
   opacity: 0.6;
   pointer-events: none;
 }
-.DataGridTable_module_emptyStateInGrid {
+.ogrid-fluent__DataGridTable-module__emptyStateInGrid {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -778,18 +778,18 @@
   border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
   background: var(--ogrid-header-bg, #f5f5f5);
 }
-.DataGridTable_module_emptyStateInGridTitle {
+.ogrid-fluent__DataGridTable-module__emptyStateInGridTitle {
   font-size: 14px;
   font-weight: 600;
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
   margin-bottom: 4px;
 }
-.DataGridTable_module_emptyStateInGridMessage {
+.ogrid-fluent__DataGridTable-module__emptyStateInGridMessage {
   font-size: 13px;
   color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
   line-height: 1.5;
 }
-.DataGridTable_module_emptyStateInGridLink {
+.ogrid-fluent__DataGridTable-module__emptyStateInGridLink {
   background: none;
   border: none;
   color: var(--ogrid-accent, #0078d4);
@@ -799,23 +799,43 @@
   font-size: inherit;
   font-family: inherit;
 }
-.DataGridTable_module_emptyStateInGridLink:hover {
+.ogrid-fluent__DataGridTable-module__emptyStateInGridLink:hover {
   color: var(--ogrid-accent-dark, #005a9e);
 }
-.DataGridTable_module_spinner {
+.ogrid-fluent__DataGridTable-module__spinner {
   width: 24px;
   height: 24px;
   border: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
   border-top-color: var(--ogrid-accent, #0078d4);
   border-radius: 50%;
-  animation: DataGridTable_module_ogrid-spin 0.8s linear infinite;
+  animation: ogrid-fluent__DataGridTable-module__ogrid-spin 0.8s linear infinite;
 }
-@keyframes DataGridTable_module_ogrid-spin {
+@keyframes ogrid-fluent__DataGridTable-module__ogrid-spin {
   to {
     transform: rotate(360deg);
   }
 }
 :where(:root) {
+  --ogrid-cell-padding: 6px 10px;
+  --ogrid-cell-padding-vertical: 6px;
+  --ogrid-cell-padding-horizontal: 10px;
+  --ogrid-z-resize-handle: 1;
+  --ogrid-z-active-cell: 2;
+  --ogrid-z-fill-handle: 3;
+  --ogrid-z-row-number: 5;
+  --ogrid-z-pinned: 6;
+  --ogrid-z-selection-cell: 7;
+  --ogrid-z-thead: 8;
+  --ogrid-z-pinned-header: 10;
+  --ogrid-z-header-focus: 11;
+  --ogrid-z-selection-header-pinned: 12;
+  --ogrid-z-checkbox: 12;
+  --ogrid-z-loading: 2;
+  --ogrid-z-drop-indicator: 100;
+  --ogrid-z-filter-popover: 1000;
+  --ogrid-z-popover: 1000;
+  --ogrid-z-fullscreen: 9999;
+  --ogrid-z-context-menu: 10000;
   --ogrid-bg: #ffffff;
   --ogrid-fg: rgba(0, 0, 0, 0.87);
   --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
@@ -931,50 +951,52 @@
   --ogrid-selection-color: #217346;
   --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
 }
-.DataGridTable_module_tableScrollContent {
+.ogrid-fluent__DataGridTable-module__tableScrollContent {
   min-height: 100%;
   background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
 }
-.DataGridTable_module_tableWidthAnchor {
+.ogrid-fluent__DataGridTable-module__tableWidthAnchor {
   background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
 }
-.DataGridTable_module_tableWrapper {
+.ogrid-fluent__DataGridTable-module__tableWrapper {
   border: none;
   background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
   -webkit-overflow-scrolling: touch;
   outline: none;
 }
-.DataGridTable_module_dataTable {
-  table-layout: auto !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__dataTable {
+  table-layout: auto;
+}
+.ogrid-fluent__DataGridTable-module__dataTable {
   background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
 }
-.DataGridTable_module_dataTable .fui-TableHeaderCell,
-.DataGridTable_module_dataTable .fui-TableCell {
+.ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell,
+.ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell {
   min-width: 80px;
   box-sizing: border-box;
   border-right: 1px solid var(--colorNeutralStroke1, #c4c4c4);
   font-size: 13px;
   vertical-align: middle;
 }
-.DataGridTable_module_dataTable .fui-TableHeaderCell {
+.ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell {
   padding: 6px 10px;
   font-weight: 600;
   font-size: 14px;
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
   white-space: nowrap;
   background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
-  z-index: 8;
+  z-index: var(--ogrid-z-thead, 8);
   border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
 }
-.DataGridTable_module_dataTable .fui-TableHeaderCell > .fui-TableHeaderCell__button {
-  position: static !important;
+.ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell > .fui-TableHeaderCell__button {
+  position: static;
 }
-.DataGridTable_module_dataTable .fui-TableHeaderCell:focus-visible {
+.ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell:focus-visible {
   outline: 2px solid var(--colorBrandStroke1, var(--ogrid-accent, #0078d4));
   outline-offset: -2px;
-  z-index: 11;
+  z-index: var(--ogrid-z-header-focus, 11);
 }
-.DataGridTable_module_dataTable .fui-TableCell {
+.ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell {
   padding: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -985,197 +1007,197 @@
   position: relative;
   border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
 }
-.DataGridTable_module_dataTable .fui-TableCell > * {
+.ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell > * {
   min-width: 0;
 }
-.DataGridTable_module_dataTable .fui-TableCell:focus-visible {
+.ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell:focus-visible {
   outline: none;
 }
-.DataGridTable_module_dataTable .fui-TableHeaderCell:last-of-type,
-.DataGridTable_module_dataTable .fui-TableCell:last-of-type {
+.ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell:last-of-type,
+.ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell:last-of-type {
   border-right: none;
 }
-.DataGridTable_module_dataTable .fui-TableBody .fui-TableRow:last-child .fui-TableCell {
+.ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow:last-child .fui-TableCell {
   border-bottom: none;
 }
-.DataGridTable_module_dataTable .fui-TableBody .fui-TableRow:hover .fui-TableCell {
+.ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow:hover .fui-TableCell {
   background-color: var(--colorSubtleBackgroundHover, var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)));
 }
-.DataGridTable_module_leafHeaderCellSpan {
+.ogrid-fluent__DataGridTable-module__leafHeaderCellSpan {
   font-weight: 600;
   padding: 6px 10px;
   background: var(--ogrid-header-bg, #f3f2f1);
 }
-.DataGridTable_module_selectionHeaderCellWrapper {
+.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__selectionHeaderCellWrapper {
   width: 48px;
   min-width: 48px;
   max-width: 48px;
-  padding: 4px !important;
+  padding: 4px;
   text-align: center;
 }
-.DataGridTable_module_selectionCellWrapper {
+.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__selectionCellWrapper {
   width: 48px;
   min-width: 48px;
   max-width: 48px;
-  padding: 4px !important;
+  padding: 4px;
   text-align: center;
 }
-.DataGridTable_module_rowNumberHeaderCellWrapper {
+.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__rowNumberHeaderCellWrapper {
   width: 50px;
   min-width: 50px;
   max-width: 50px;
-  padding: 4px 8px !important;
+  padding: 4px 8px;
   text-align: center;
   background: var(--ogrid-header-bg, #f5f5f5);
   font-weight: 600;
   color: var(--colorNeutralForeground3, #666);
   border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
 }
-.DataGridTable_module_rowNumberCellWrapper {
+.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__rowNumberCellWrapper {
   width: 50px;
   min-width: 50px;
   max-width: 50px;
-  padding: 4px 8px !important;
+  padding: 4px 8px;
   text-align: center;
   background: var(--colorNeutralBackground3, #f5f5f5);
   font-weight: 600;
   color: var(--colorNeutralForeground3, #666);
   border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
 }
-.DataGridTable_module_dataTable .fui-TableBody .DataGridTable_module_selectedRow .fui-TableCell {
+.ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .ogrid-fluent__DataGridTable-module__selectedRow .fui-TableCell {
   background-color: var(--colorNeutralBackground1Selected, var(--ogrid-selected-row-bg, #e6f0fb));
 }
-.DataGridTable_module_selectableGrid .DataGridTable_module_dataTable .fui-TableBody .fui-TableRow:hover .fui-TableCell {
+.ogrid-fluent__DataGridTable-module__selectableGrid .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow:hover .fui-TableCell {
   background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
   cursor: pointer;
 }
-.DataGridTable_module_selectableGrid .DataGridTable_module_dataTable .fui-TableBody .DataGridTable_module_selectedRow:hover .fui-TableCell {
+.ogrid-fluent__DataGridTable-module__selectableGrid .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .ogrid-fluent__DataGridTable-module__selectedRow:hover .fui-TableCell {
   background-color: var(--colorNeutralBackground1Hover, #dae8f8);
 }
-.DataGridTable_module_selectableGrid .DataGridTable_module_dataTable .fui-TableBody .fui-TableRow {
+.ogrid-fluent__DataGridTable-module__selectableGrid .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow {
   cursor: pointer;
 }
-.DataGridTable_module_cellContent {
-  padding: 4px 8px;
+.ogrid-fluent__DataGridTable-module__cellContent {
+  padding: var(--ogrid-cell-padding, 4px 8px);
 }
-.DataGridTable_module_activeCellContent {
-  outline: 2px solid var(--ogrid-selection-color, #217346) !important;
-  background-color: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02)) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent {
+  outline: 2px solid var(--ogrid-selection-color, #217346);
+  background-color: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02));
 }
-.DataGridTable_module_cellInRange {
-  background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellInRange {
+  background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12));
 }
-[data-drag-range] {
-  background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-range] {
+  background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12));
 }
-[data-drag-anchor] {
-  background-color: var(--ogrid-bg, #ffffff) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-anchor] {
+  background-color: var(--ogrid-bg, #ffffff);
 }
-.DataGridTable_module_cellCut {
-  background-color: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellCut {
+  background-color: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
 }
-.DataGridTable_module_stickyHeader {
-  z-index: 8;
+.ogrid-fluent__DataGridTable-module__stickyHeader {
+  z-index: var(--ogrid-z-thead, 8);
   background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
 }
-.DataGridTable_module_stickyHeader .fui-TableHeaderCell {
+.ogrid-fluent__DataGridTable-module__stickyHeader .fui-TableHeaderCell {
   position: sticky;
   top: 0;
 }
-.DataGridTable_module_stickyHeader .DataGridTable_module_pinnedColLeft,
-.DataGridTable_module_stickyHeader .DataGridTable_module_pinnedColRight {
+.ogrid-fluent__DataGridTable-module__stickyHeader .ogrid-fluent__DataGridTable-module__pinnedColLeft,
+.ogrid-fluent__DataGridTable-module__stickyHeader .ogrid-fluent__DataGridTable-module__pinnedColRight {
   top: 0;
-  z-index: 10;
+  z-index: var(--ogrid-z-pinned-header, 10);
 }
-.DataGridTable_module_dataTable .DataGridTable_module_pinnedColLeft {
+.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__pinnedColLeft {
   background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
   border-right: 1px solid var(--colorNeutralStroke1, var(--ogrid-border, rgba(0, 0, 0, 0.12)));
   box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
 }
-.DataGridTable_module_dataTable .fui-TableHeader .DataGridTable_module_pinnedColLeft {
+.ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeader .ogrid-fluent__DataGridTable-module__pinnedColLeft {
   background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
 }
-.DataGridTable_module_dataTable .DataGridTable_module_pinnedColRight {
+.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__pinnedColRight {
   background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
   border-left: 1px solid var(--colorNeutralStroke1, var(--ogrid-border, rgba(0, 0, 0, 0.12)));
   box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
 }
-.DataGridTable_module_dataTable .fui-TableHeader .DataGridTable_module_pinnedColRight {
+.ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeader .ogrid-fluent__DataGridTable-module__pinnedColRight {
   background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
 }
-.DataGridTable_module_headerMenuTrigger {
+.ogrid-fluent__DataGridTable-module__headerMenuTrigger {
   color: var(--colorNeutralForeground3, #666);
 }
-.DataGridTable_module_headerMenuTrigger:hover {
+.ogrid-fluent__DataGridTable-module__headerMenuTrigger:hover {
   background: var(--colorNeutralBackground1Hover, #f3f2f1);
 }
-.DataGridTable_module_headerMenuTrigger:active {
+.ogrid-fluent__DataGridTable-module__headerMenuTrigger:active {
   background: var(--colorNeutralBackground1Pressed, #e1dfdd);
 }
-.DataGridTable_module_headerMenuTrigger:focus-visible {
+.ogrid-fluent__DataGridTable-module__headerMenuTrigger:focus-visible {
   outline: 2px solid var(--colorBrandStroke1, var(--ogrid-accent, #0078d4));
 }
-.DataGridTable_module_resizeHandle:hover::after {
+.ogrid-fluent__DataGridTable-module__resizeHandle:hover::after {
   background-color: var(--colorBrandForeground1, var(--ogrid-accent, #0078d4));
 }
-.DataGridTable_module_resizeHandle:active::after {
+.ogrid-fluent__DataGridTable-module__resizeHandle:active::after {
   background-color: var(--colorBrandForeground1Pressed, #005a9e);
 }
-.DataGridTable_module_statusBar {
+.ogrid-fluent__DataGridTable-module__statusBar {
   min-width: 0;
   color: var(--colorNeutralForeground2, #616161);
   background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
   border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
   user-select: none;
 }
-.DataGridTable_module_statusBarItem:not(:last-child)::after {
+.ogrid-fluent__DataGridTable-module__statusBarItem:not(:last-child)::after {
   display: inline-block;
   background-color: var(--colorNeutralStroke1, #c4c4c4);
 }
-.DataGridTable_module_statusBarLabel {
+.ogrid-fluent__DataGridTable-module__statusBarLabel {
   color: var(--colorNeutralForeground3, #707070);
   font-weight: 400;
 }
-.DataGridTable_module_statusBarValue {
+.ogrid-fluent__DataGridTable-module__statusBarValue {
   color: var(--colorNeutralForeground1, #242424);
 }
-.DataGridTable_module_contextMenu {
+.ogrid-fluent__DataGridTable-module__contextMenu {
   background: var(--colorNeutralBackground1, #fff);
   border: 1px solid var(--colorNeutralStroke1, #e0e0e0);
   border-radius: var(--borderRadiusMedium, 4px);
   box-shadow: var(--shadow16, 0 4px 16px rgba(0, 0, 0, 0.12));
   outline: none;
 }
-.DataGridTable_module_contextMenuItem {
+.ogrid-fluent__DataGridTable-module__contextMenuItem {
   color: var(--colorNeutralForeground1, #242424);
 }
-.DataGridTable_module_contextMenuItem:hover:not(:disabled) {
+.ogrid-fluent__DataGridTable-module__contextMenuItem:hover:not(:disabled) {
   background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
 }
-.DataGridTable_module_contextMenuItemShortcut {
+.ogrid-fluent__DataGridTable-module__contextMenuItemShortcut {
   color: var(--colorNeutralForeground3, rgba(0, 0, 0, 0.4));
 }
-.DataGridTable_module_contextMenuDivider {
+.ogrid-fluent__DataGridTable-module__contextMenuDivider {
   background-color: var(--colorNeutralStroke2, #e0e0e0);
 }
-.DataGridTable_module_loadingOverlayContent {
+.ogrid-fluent__DataGridTable-module__loadingOverlayContent {
   background: var(--colorNeutralBackground1, #ffffff);
   border: 1px solid var(--colorNeutralStroke1, #c4c4c4);
   border-radius: var(--borderRadiusMedium, 4px);
   box-shadow: var(--shadow4, 0 2px 4px rgba(0, 0, 0, 0.14));
 }
-.DataGridTable_module_loadingOverlayText {
+.ogrid-fluent__DataGridTable-module__loadingOverlayText {
   color: var(--colorNeutralForeground2, #616161);
 }
-.DataGridTable_module_loadingDimmed {
+.ogrid-fluent__DataGridTable-module__loadingDimmed {
   transition: opacity 0.15s ease;
 }
-.DataGridTable_module_emptyStateInGrid {
+.ogrid-fluent__DataGridTable-module__emptyStateInGrid {
   min-width: 0;
   border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
   background-color: var(--colorNeutralBackground2, #fafafa);
 }
-.DataGridTable_module_emptyStateInGridMessageSticky {
+.ogrid-fluent__DataGridTable-module__emptyStateInGridMessageSticky {
   position: sticky;
   left: 50%;
   transform: translateX(-50%);
@@ -1184,64 +1206,64 @@
   align-items: center;
   text-align: center;
 }
-.DataGridTable_module_emptyStateInGridIcon {
+.ogrid-fluent__DataGridTable-module__emptyStateInGridIcon {
   font-size: 24px;
   margin-bottom: 8px;
   opacity: 0.6;
 }
-.DataGridTable_module_emptyStateInGridTitle {
+.ogrid-fluent__DataGridTable-module__emptyStateInGridTitle {
   color: var(--colorNeutralForeground1, #242424);
 }
-.DataGridTable_module_emptyStateInGridMessage {
+.ogrid-fluent__DataGridTable-module__emptyStateInGridMessage {
   color: var(--colorNeutralForeground2, #616161);
   max-width: 100%;
 }
-.DataGridTable_module_emptyStateInGridLink {
+.ogrid-fluent__DataGridTable-module__emptyStateInGridLink {
   color: var(--colorBrandForeground1, #0f6cbd);
 }
-.DataGridTable_module_emptyStateInGridLink:hover {
+.ogrid-fluent__DataGridTable-module__emptyStateInGridLink:hover {
   color: var(--colorBrandForeground1Hover, #115ea3);
 }
-.DataGridTable_module_dataTable .fui-Link {
+.ogrid-fluent__DataGridTable-module__dataTable .fui-Link {
   color: var(--colorBrandForeground1, #0f6cbd);
   font-weight: 600;
   text-decoration: none;
 }
-.DataGridTable_module_dataTable .fui-Link:hover {
+.ogrid-fluent__DataGridTable-module__dataTable .fui-Link:hover {
   text-decoration: underline;
   color: var(--colorBrandForeground1Hover, #115ea3);
 }
-.DataGridTable_module_dataTable .fui-Link:active {
+.ogrid-fluent__DataGridTable-module__dataTable .fui-Link:active {
   color: var(--colorBrandForeground1Pressed, #0c3b5e);
 }
-.DataGridTable_module_density-compact .DataGridTable_module_dataTable .fui-TableHeaderCell {
+.ogrid-fluent__DataGridTable-module__density-compact .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell {
   padding: 4px 8px;
 }
-.DataGridTable_module_density-compact .DataGridTable_module_cellContent {
+.ogrid-fluent__DataGridTable-module__density-compact .ogrid-fluent__DataGridTable-module__cellContent {
   padding: 4px 8px;
 }
-.DataGridTable_module_density-comfortable .DataGridTable_module_dataTable .fui-TableHeaderCell {
+.ogrid-fluent__DataGridTable-module__density-comfortable .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell {
   padding: 12px 16px;
 }
-.DataGridTable_module_density-comfortable .DataGridTable_module_cellContent {
+.ogrid-fluent__DataGridTable-module__density-comfortable .ogrid-fluent__DataGridTable-module__cellContent {
   padding: 12px 16px;
 }
-.DataGridTable_module_tableWrapper .fui-Button:focus-visible,
-.tableWrapper .fui-MenuButton:focus-visible {
+.ogrid-fluent__DataGridTable-module__tableWrapper .fui-Button:focus-visible,
+.ogrid-fluent__DataGridTable-module__tableWrapper .fui-MenuButton:focus-visible {
   outline: 2px solid var(--colorBrandStroke1, #0078d4);
   outline-offset: 2px;
 }
-.DataGridTable_module_tableWrapper .fui-Checkbox:focus-visible {
+.ogrid-fluent__DataGridTable-module__tableWrapper .fui-Checkbox:focus-visible {
   outline: 2px solid var(--colorBrandStroke1, #0078d4);
   outline-offset: 2px;
 }
 
-/* src/ColumnChooser/ColumnChooser.module.scss */
-.ColumnChooser_module_container {
+/* esbuild-sass-plugin:css-chunksrc/ColumnChooser/ColumnChooser.module.scss */
+.ogrid-fluent__ColumnChooser-module__container {
   position: relative;
   display: inline-flex;
 }
-.ColumnChooser_module_dropdown {
+.ogrid-fluent__ColumnChooser-module__dropdown {
   position: absolute;
   top: calc(100% + 4px);
   right: 0;
@@ -1255,27 +1277,27 @@
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   padding: 0;
 }
-.ColumnChooser_module_header {
+.ogrid-fluent__ColumnChooser-module__header {
   padding: 8px 12px;
   border-bottom: 1px solid var(--colorNeutralStroke2, #edebe9);
   font-weight: 600;
   font-size: 13px;
 }
-.ColumnChooser_module_optionsList {
+.ogrid-fluent__ColumnChooser-module__optionsList {
   max-height: 320px;
   overflow-y: auto;
   padding: 0;
 }
-.ColumnChooser_module_optionItem {
+.ogrid-fluent__ColumnChooser-module__optionItem {
   padding: 4px 12px;
   display: flex;
   align-items: center;
   min-height: 32px;
 }
-.ColumnChooser_module_optionItem:hover {
+.ogrid-fluent__ColumnChooser-module__optionItem:hover {
   background: var(--colorNeutralBackground1Hover, #f5f5f5);
 }
-.ColumnChooser_module_actions {
+.ogrid-fluent__ColumnChooser-module__actions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
@@ -1283,8 +1305,8 @@
   border-top: 1px solid var(--colorNeutralStroke2, #edebe9);
 }
 
-/* src/PaginationControls/PaginationControls.module.scss */
-.PaginationControls_module_pagination {
+/* esbuild-sass-plugin:css-chunksrc/PaginationControls/PaginationControls.module.scss */
+.ogrid-fluent__PaginationControls-module__pagination {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -1295,13 +1317,13 @@
   box-sizing: border-box;
   padding: 0;
 }
-.PaginationControls_module_paginationInfo {
+.ogrid-fluent__PaginationControls-module__paginationInfo {
   font-size: 13px;
   color: var(--colorNeutralForeground2, #605e5c);
   flex-shrink: 0;
   font-variant-numeric: tabular-nums;
 }
-.PaginationControls_module_paginationControls {
+.ogrid-fluent__PaginationControls-module__paginationControls {
   display: flex;
   align-items: center;
   gap: 4px;
@@ -1310,22 +1332,22 @@
   justify-content: center;
   min-width: 0;
 }
-.PaginationControls_module_navBtn {
+.ogrid-fluent__PaginationControls-module__navBtn {
   min-width: 28px;
   min-height: 28px;
 }
-.PaginationControls_module_pageNumbers {
+.ogrid-fluent__PaginationControls-module__pageNumbers {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   margin: 0 8px;
 }
-.PaginationControls_module_pageBtn {
+.ogrid-fluent__PaginationControls-module__pageBtn {
   min-width: 28px;
   min-height: 28px;
   font-variant-numeric: tabular-nums;
 }
-.PaginationControls_module_ellipsis {
+.ogrid-fluent__PaginationControls-module__ellipsis {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1336,18 +1358,18 @@
   pointer-events: none;
   letter-spacing: 0.02em;
 }
-.PaginationControls_module_pageSizeSelector {
+.ogrid-fluent__PaginationControls-module__pageSizeSelector {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
 }
-.PaginationControls_module_pageSizeSelector .PaginationControls_module_pageSizeLabel {
+.ogrid-fluent__PaginationControls-module__pageSizeSelector .ogrid-fluent__PaginationControls-module__pageSizeLabel {
   font-size: 13px;
   color: var(--colorNeutralForeground2, #605e5c);
   user-select: none;
   white-space: nowrap;
 }
-.PaginationControls_module_pageSizeSelector .PaginationControls_module_pageSizeSelect {
+.ogrid-fluent__PaginationControls-module__pageSizeSelector .ogrid-fluent__PaginationControls-module__pageSizeSelect {
   min-width: 72px;
 }