ods-component-lib 1.21.2 → 1.22.1

package/dist/components/devextreme/DataGrid/styles/styles.js

@@ -1,1236 +0,0 @@
-import { getColors as io } from "./theme/colors/index.js";
-import { getSizes as xo } from "./theme/sizes/index.js";
-import { createStyles as lo } from "../../../../node_modules/antd-style/es/functions/index.js";
-const so = lo(
-  ({ css: h, cx: T, token: L }, n) => {
-    const A = n.compact ? "compact" : "default", D = "default", {
-      whiteColor: e,
-      primaryColor: d,
-      primaryColorActive: a,
-      primaryColorHover: p,
-      primaryColorBg: F,
-      primaryColorBorder: O,
-      colorErrorText: $,
-      colorErrorTextActive: m,
-      colorErrorTextHover: f,
-      colorErrorBg: E,
-      colorErrorBgActive: V,
-      colorSuccessText: w,
-      colorSuccessTextActive: v,
-      colorSuccessTextHover: k,
-      colorSuccessBg: N,
-      colorSuccessBorder: Y,
-      solidColorBgHover: q,
-      solidColorBgActive: J,
-      colorFillTertiary: H,
-      boxShadowColor: R,
-      columnTextColor: i,
-      textDescriptionColor: K,
-      borderColor: o,
-      iconColor: u,
-      headerBorderColor: j,
-      checkboxBorderColor: G,
-      toolbarBorderColor: P,
-      controlItemBgActive: S,
-      headerCommandSelectBg: y
-    } = io(D, L), {
-      dxDataGridBorderRadius: Q,
-      dxWidgetFontSize: z,
-      dxHeaderFilterFontSize: U,
-      dxSelectionColumnWidth: C,
-      dxDataColumnsHeight: X,
-      dxDataColumnsPaddingInline: Z,
-      dxIconFilterFontSize: _,
-      // dxIconFilterlineHeight,
-      dxTextEditorInputMinHeight: oo,
-      dxCheckboxSize: M,
-      dxCheckboxBorderRadiusSize: to,
-      dxCheckboxCheckIconSize: B,
-      dxIconFontSize: l,
-      dxLoadPanelContentWrapperGap: eo,
-      dxButton: s,
-      dxFilterMenu: b,
-      dxToolbarSettings: c,
-      dxToolbar: x,
-      dxSearchBoxSizes: t,
-      dxSummarySizes: g,
-      dxColumnTagSizes: I,
-      dxPager: r
-    } = xo(A), ro = h`
-      width: ${C}px;
-      min-width: ${C}px;
-      max-width: ${C}px;
-    `, W = h`
-      color: ${i};
-      background-color: transparent;
-    `, no = n.dataGridBorderRadius ? typeof n.dataGridBorderRadius == "number" ? `${n.dataGridBorderRadius}px` : n.dataGridBorderRadius : `${Q}px`, ao = typeof n.height == "function" ? n.height() : typeof n.height == "number" ? `${n.height}px` : n.height;
-    return {
-      gridWrapper: T(
-        "ods-datagrid",
-        h`
-          &.ods-datagrid {
-            background-color: ${e};
-            box-shadow: none;
-            border: 1px solid ${o};
-            border-radius: ${no};
-            overflow: hidden;
-            height: ${ao};
-          }
-
-          .ods-datagrid-with-summary-wrapper > & {
-            &.ods-datagrid {
-              border-radius: 0;
-              border: none;
-              height: 100%;
-            }
-          }
-        `
-      ),
-      grid: T(
-        "ods-datagrid-grid",
-        h`
-          &.ods-datagrid-grid {
-            height: 100%;
-
-            &.dx-widget {
-              font-family: "Manrope", sans-serif;
-              font-size: ${z}px;
-            }
-
-            & .dx-datagrid {
-              ${W};
-              line-height: 1;
-
-              .dx-datagrid-content-fixed {
-                .dx-datagrid-table {
-                  .dx-col-fixed {
-                    background-color: transparent;
-                  }
-                }
-              }
-
-              & .dx-datagrid-header-panel {
-                border-bottom: 0.5px solid ${o};
-                background-color: transparent;
-                padding: ${x.dxToolbarPaddingVertical}px ${x.dxToolbarPaddingHorizontal}px ${x.dxToolbarPaddingVertical - 1}px;
-
-                .dx-toolbar {
-                  background-color: transparent;
-                  margin-bottom: 0;
-
-                  .dx-toolbar-items-container {
-                    display: flex;
-                    justify-content: space-between;
-                    gap: ${x.dxToolbarTtemsContainerGap}px;
-                    height: unset;
-
-                    .dx-toolbar-before,
-                    .dx-toolbar-after {
-                      display: flex;
-                      align-items: center;
-                      gap: ${x.dxToolbarTtemsContainerBeforeAfterGap}px;
-                      margin: 0;
-                      padding: 0;
-                      position: relative;
-                      left: unset;
-                      right: unset;
-                      top: unset;
-                      bottom: unset;
-                      flex: 0 1 auto;
-                      max-width: 100%;
-                      overflow: hidden;
-                      white-space: nowrap;
-                    }
-
-                    .dx-toolbar-before {
-                      .dx-item.dx-toolbar-item {
-                        display: flex;
-                        justify-content: flex-end;
-                        align-items: center;
-                        margin: 0;
-                        padding: 0;
-
-                        &.ods-toolbar-title {
-                          font-size: ${x.dxToolbarTitleFontSize}px;
-                          line-height: 1;
-                          color: ${i};
-                          font-weight: 600;
-                          max-width: unset !important;
-
-                          & > div {
-                            margin: 0;
-                            padding: 0;
-                          }
-                        }
-
-                        &.ods-toolbar-left-item-menu {
-                          &.dx-toolbar-item {
-                            .ods-toolbar-left-menu {
-                              &.dx-menu {
-                                &.dx-menu-base .dx-menu-item {
-                                  &.dx-state-hover,
-                                  &:hover {
-                                    background-color: ${H};
-                                    border-radius: ${s.dxButtonBorderRadius}px;
-                                  }
-                                }
-                                &.dx-menu-base .dx-menu-item .dx-menu-item-content {
-                                  padding-block: ${x.dxToolbarPaddingVertical}px;
-                                  padding-inline: ${x.dxToolbarPaddingVertical}px;
-                                  border: none;
-
-                                  .dx-menu-item-popout-container {
-                                    display: none;
-                                  }
-                                }
-                                .dx-menu-item-has-icon.dx-menu-item-has-submenu .dx-icon {
-                                  padding: 0;
-                                  margin: 0;
-                                  width: auto;
-                                  height: auto;
-                                  font-size: unset;
-                                  line-height: unset;
-                                }
-
-                                .dx-context-menu-container-border {
-                                  display: none;
-                                }
-                              }
-                            }
-                          }
-                        }
-
-                        &.ods-toolbar-left-item {
-                          height: 100%;
-                          .ods-toolbar-left-menu-dropdown {
-                            display: inline-flex;
-                            vertical-align: unset;
-                          }
-                        }
-                      }
-
-                      .dx-button {
-                        border-radius: ${s.dxButtonBorderRadius}px;
-
-                        .dx-button-content {
-                          font-size: ${s.dxButtonFontSize}px;
-                          padding-inline: ${s.dxButtonPaddingInline}px;
-                          padding-block: ${s.dxButtonPaddingBlock}px;
-
-                          .dx-button-text {
-                            line-height: ${s.dxButtonLineHeight}px;
-                          }
-                        }
-
-                        &.dx-button-mode-outlined {
-                          background-color: ${e};
-                          box-shadow: 0px 2px 0px 0px ${R};
-
-                          &.dx-button-default {
-                            background-color: ${e};
-                            border-color: ${d};
-                            color: ${d};
-
-                            &.dx-state-hover,
-                            &:hover {
-                              background-color: ${e};
-                              border-color: ${p};
-                              color: ${p};
-                            }
-
-                            &.dx-state-focused,
-                            &:focus,
-                            &:active {
-                              background-color: ${e};
-                              border-color: ${a};
-                              color: ${a};
-                            }
-                          }
-
-                          &.dx-button-danger {
-                            background-color: ${e};
-                            border-color: ${$};
-                            color: ${$};
-
-                            &.dx-state-hover,
-                            &:hover {
-                              background-color: ${e};
-                              border-color: ${f};
-                              color: ${f};
-                            }
-
-                            &.dx-state-focused,
-                            &:focus,
-                            &:active {
-                              background-color: ${e};
-                              border-color: ${m};
-                              color: ${m};
-                            }
-                          }
-
-                          &.dx-button-success {
-                            background-color: ${e};
-                            border-color: ${w};
-                            color: ${w};
-
-                            &.dx-state-hover,
-                            &:hover {
-                              background-color: ${e};
-                              border-color: ${k};
-                              color: ${k};
-                            }
-
-                            &.dx-state-focused,
-                            &:focus,
-                            &:active {
-                              background-color: ${e};
-                              border-color: ${v};
-                              color: ${v};
-                            }
-                          }
-
-                          &.dx-button-normal {
-                            color: ${i};
-                            border-color: ${P};
-                            background-color: ${e};
-
-                            &.dx-state-hover,
-                            &:hover {
-                              color: ${p};
-                              border-color: ${p};
-                              background-color: ${e};
-                            }
-
-                            &.dx-state-focused,
-                            &:focus,
-                            &:active {
-                              color: ${a};
-                              border-color: ${a};
-                              background-color: ${e};
-                            }
-                          }
-                        }
-
-                        &.dx-button-mode-text {
-                          background-color: transparent;
-
-                          &.dx-button-default {
-                            background-color: transparent;
-                            color: ${d};
-
-                            &.dx-state-hover,
-                            &:hover {
-                              background-color: ${F};
-                              color: ${p};
-                            }
-
-                            &.dx-state-focused,
-                            &:focus,
-                            &:active {
-                              background-color: ${O};
-                              color: ${a};
-                            }
-                          }
-
-                          &.dx-button-danger {
-                            background-color: transparent;
-                            color: ${$};
-
-                            &.dx-state-hover,
-                            &:hover {
-                              background-color: ${E};
-                              color: ${f};
-                            }
-
-                            &.dx-state-focused,
-                            &:focus,
-                            &:active {
-                              background-color: ${V};
-                              color: ${m};
-                            }
-                          }
-
-                          &.dx-button-success {
-                            background-color: transparent;
-                            color: ${w};
-
-                            &.dx-state-hover,
-                            &:hover {
-                              background-color: ${N};
-                              color: ${k};
-                            }
-
-                            &.dx-state-focused,
-                            &:focus,
-                            &:active {
-                              background-color: ${Y};
-                              color: ${v};
-                            }
-                          }
-
-                          &.dx-button-normal {
-                            background-color: transparent;
-                            color: ${i};
-
-                            &.dx-state-hover,
-                            &:hover {
-                              background-color: ${H};
-                            }
-
-                            &.dx-state-focused,
-                            &:focus,
-                            &:active {
-                              background-color: ${G};
-                            }
-                          }
-                        }
-
-                        &.dx-button-mode-contained {
-                          box-shadow: 0px 2px 0px 0px ${R};
-
-                          &.dx-button-default {
-                            background-color: ${d};
-
-                            &.dx-state-hover,
-                            &:hover {
-                              background-color: ${p};
-                            }
-
-                            &.dx-state-focused,
-                            &:focus,
-                            &:active {
-                              background-color: ${a};
-                            }
-                          }
-
-                          &.dx-button-danger {
-                            background-color: ${$};
-
-                            &.dx-state-hover,
-                            &:hover {
-                              background-color: ${f};
-                            }
-
-                            &.dx-state-focused,
-                            &:focus,
-                            &:active {
-                              background-color: ${m};
-                            }
-                          }
-
-                          &.dx-button-success {
-                            background-color: ${w};
-
-                            &.dx-state-hover,
-                            &:hover {
-                              background-color: ${k};
-                            }
-
-                            &.dx-state-focused,
-                            &:focus,
-                            &:active {
-                              background-color: ${v};
-                            }
-                          }
-
-                          &.dx-button-normal {
-                            background-color: ${i};
-                            color: ${e};
-
-                            &.dx-state-hover,
-                            &:hover {
-                              background-color: ${q};
-                            }
-
-                            &.dx-state-focused,
-                            &:focus,
-                            &:active {
-                              background-color: ${J};
-                            }
-                          }
-                        }
-                      }
-                    }
-
-                    .dx-toolbar-after {
-                      flex: 0 0 auto;
-                      overflow: unset;
-
-                      .dx-item.dx-toolbar-item {
-                        display: flex;
-                        justify-content: flex-end;
-                        align-items: center;
-                        margin: 0;
-                        padding: 0;
-
-                        &.ods-toolbar-after-settings-button {
-                          .ods-toolbar-after-settings-dropdown {
-                            &.dx-dropdownbutton-popup-wrapper .dx-popup-content {
-                              padding: 0;
-
-                              .dx-scrollable-container {
-                                height: auto;
-                              }
-
-                              .dx-list:not(.dx-list-select-decorator-enabled) {
-                                min-height: unset;
-                                padding-block: ${c.dxPopupOverlayPopupPaddingVertical}px;
-                                padding-inline: ${c.dxPopupOverlayPopupPaddingHorizontal}px;
-
-                                .dx-list-item {
-                                  &.dx-state-hover {
-                                    background-color: transparent;
-                                    color: ${d};
-
-                                    .dx-list-item-content {
-                                      color: ${d};
-                                    }
-                                  }
-                                  &.dx-state-focused {
-                                    background-color: transparent;
-                                    color: ${a};
-
-                                    .dx-list-item-content {
-                                      color: ${d};
-                                    }
-                                  }
-                                }
-
-                                .dx-list-item-content {
-                                  padding-block: ${c.dxPopupOverlayPopupItemPaddingVertical}px;
-                                  padding-inline: ${c.dxPopupOverlayPopupItemPaddingHorizontal}px;
-
-                                  display: flex;
-                                  justify-content: flex-start;
-                                  align-items: center;
-                                  gap: ${c.dxPopupOverlayPopupItemGap}px;
-
-                                  font-size: ${z}px;
-                                  line-height: 1;
-                                  color: ${i};
-
-                                  .dx-list-item-icon-container {
-                                    width: ${l}px;
-                                    height: ${l}px;
-
-                                    .dx-list-item-icon {
-                                      font-size: ${l}px;
-                                      line-height: 1;
-                                      width: ${l}px;
-                                      height: ${l}px;
-                                      display: inline-flex;
-                                      justify-content: center;
-                                      align-items: center;
-                                    }
-                                  }
-
-                                  &::before {
-                                    display: none;
-                                  }
-                                }
-                              }
-                            }
-                            &.dx-popup-wrapper > .dx-overlay-content {
-                              background-color: ${e};
-                              box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 6px -1px rgba(0, 0, 0, 0.04), 0px 6px 8px 0px rgba(0, 0, 0, 0.04);
-                              border: none;
-                              border-radius: ${c.dxPopupOverlayBorderRadius}px;
-                              top: ${c.dxPopupOverlayMarginTop * 2}px;
-                            }
-                          }
-                        }
-                      }
-
-                      .dx-searchbox {
-                        &.dx-texteditor {
-                          &.dx-editor-outlined {
-                            margin: 0;
-                            border-radius: ${x.dxToolbarItemBorderRadius}px;
-                            border-color: ${P};
-                          }
-                        }
-                        .dx-icon-search {
-                          color: ${u};
-                          font-size: ${l}px;
-                          line-height: 1;
-                          position: absolute;
-                          top: 50%;
-                          left: 0;
-                          margin: unset;
-                          transform: translateY(-50%);
-                          width: ${t.dxSearchBoxIconWidth}px;
-                          height: ${t.dxSearchBoxIconHeight}px;
-                          background-position: unset;
-                          background-size: unset;
-                          padding: 0;
-                          display: flex;
-                          justify-content: center;
-                          align-items: center;
-
-                          &::before {
-                            color: ${u};
-                          }
-                        }
-
-                        .dx-texteditor-input {
-                          min-height: ${t.dxSearchBoxInputMinHeight}px;
-                          padding-top: ${t.dxSearchBoxInputPaddingTop}px;
-                          padding-right: ${t.dxSearchBoxInputPaddingRight}px;
-                          padding-bottom: ${t.dxSearchBoxInputPaddingBottom}px;
-                          padding-left: ${t.dxSearchBoxInputPaddingLeft}px;
-                          font-size: ${t.dxSearchBoxInputFontSize}px;
-                          line-height: ${t.dxSearchBoxInputLineHeight}px;
-                          color: ${i};
-                        }
-
-                        .dx-placeholder {
-                          &::before {
-                            padding-top: ${t.dxSearchBoxInputPaddingTop}px;
-                            padding-right: ${t.dxSearchBoxInputPaddingRight}px;
-                            padding-bottom: ${t.dxSearchBoxInputPaddingBottom}px;
-                            padding-left: ${t.dxSearchBoxInputPaddingLeft}px;
-                            font-size: ${t.dxSearchBoxInputFontSize}px;
-                            line-height: ${t.dxSearchBoxInputLineHeight + 1}px;
-                            color: ${K};
-                          }
-                        }
-
-                        &.dx-show-clear-button {
-                          .dx-clear-button-area {
-                            width: ${t.dxSearchBoxClearButtonWidth}px;
-                            min-width: ${t.dxSearchBoxClearButtonWidth}px;
-
-                            .dx-icon-clear {
-                              color: ${u};
-                              margin-top: 0;
-                              transform: translateY(-50%);
-                              padding: ${t.dxSearchBoxClearButtonPadding}px;
-                              width: ${t.dxSearchBoxClearButtonWidth}px;
-                              height: ${t.dxSearchBoxClearButtonHeight}px;
-                              background-position: ${t.dxSearchBoxClearButtonBackgroundPosition}px ${t.dxSearchBoxClearButtonBackgroundPosition}px;
-                              background-size: ${t.dxSearchBoxClearButtonBackgroundSize}px ${t.dxSearchBoxClearButtonBackgroundSize}px;
-                              font-size: ${t.dxSearchBoxClearButtonFontSize}px;
-                              line-height: 1;
-                            }
-                          }
-                        }
-                      }
-
-                      .dx-button {
-                        border-radius: ${x.dxToolbarItemBorderRadius}px;
-                        border-color: ${P};
-
-                        .dx-icon {
-                          font-size: ${l}px;
-                          line-height: 1;
-                          width: ${l}px;
-                          height: ${l}px;
-                          color: ${u};
-
-                          &.dx-svg-icon {
-                            font-size: unset;
-                            line-height: 1;
-                            width: ${c.dxSettingsIconSize}px;
-                            height: ${c.dxSettingsIconSize}px;
-                            color: unset;
-                          }
-                        }
-
-                        .dx-button-content {
-                          padding: ${x.dxToolbarButtonsPadding}px;
-                        }
-
-                        &.dx-state-hover,
-                        &.dx-state-focused {
-                          background-color: ${e};
-                          border-color: ${d};
-
-                          .dx-icon {
-                            color: ${d};
-
-                            &.dx-svg-icon svg.ods-toolbar-after-settings-icon {
-                              & > path {
-                                fill: ${d};
-                              }
-
-                              & > circle {
-                                stroke: ${d};
-                              }
-                            }
-                          }
-                        }
-
-                        &.dx-state-active {
-                          background-color: ${e};
-                          border-color: ${a};
-
-                          .dx-icon {
-                            color: ${a};
-
-                            &.dx-svg-icon svg.ods-toolbar-after-settings-icon {
-                              & > path {
-                                fill: ${a};
-                              }
-
-                              & > circle {
-                                stroke: ${a};
-                              }
-                            }
-                          }
-                        }
-                      }
-
-                      .dx-texteditor.dx-state-active.dx-editor-filled,
-                      .dx-texteditor.dx-state-active.dx-editor-outlined,
-                      .dx-texteditor.dx-state-active.dx-editor-underlined,
-                      .dx-texteditor.dx-state-focused.dx-editor-filled,
-                      .dx-texteditor.dx-state-focused.dx-editor-outlined,
-                      .dx-texteditor.dx-state-focused.dx-editor-underlined {
-                        border-color: ${d};
-                      }
-                    }
-                  }
-                }
-              }
-
-              & .dx-datagrid-headers {
-                border-bottom: none;
-                ${W};
-                font-weight: 600;
-
-                &.dx-datagrid-nowrap {
-                }
-
-                .dx-datagrid-content {
-                  margin-bottom: unset;
-
-                  &.dx-datagrid-scrollable-simulated:not(.dx-empty).dx-datagrid-content-fixed {
-                    .dx-datagrid-table {
-                      &.dx-pointer-events-none {
-                        .dx-row {
-                          &.dx-header-row {
-                            & > td {
-                              border-bottom-width: 0.5px;
-                              border-bottom-color: transparent;
-                              border-left-color: ${o};
-                              border-right-color: ${o};
-                              border-left-width: 0.5px;
-                              border-right-width: 0.5px;
-                              background-color: ${S};
-
-                              &.dx-command-select {
-                                background-color: ${y};
-                                border-bottom-color: ${o};
-                              }
-                              &.dx-command-edit {
-                                background-color: ${S};
-                                border-bottom-color: ${o};
-                              }
-
-                              .dx-datagrid-text-content {
-                                white-space: nowrap;
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-
-                  &.dx-datagrid-scrollable-simulated:not(.dx-empty) {
-                    .dx-datagrid-table {
-                      .dx-row {
-                        &.dx-header-row {
-                          & > td {
-                            border-bottom-width: 0.5px;
-                            border-bottom-color: ${o};
-                            border-left-color: ${j};
-                            border-right-color: ${j};
-
-                            &:not(.dx-command-select):not(.dx-command-edit) {
-                              background-color: ${S};
-                            }
-
-                            &.dx-command-select {
-                              border-bottom-color: transparent;
-                            }
-
-                            &.dx-command-edit {
-                              border-bottom-color: transparent;
-                            }
-
-                            .dx-datagrid-text-content {
-                              white-space: nowrap;
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-
-                & .dx-datagrid-table {
-                  & .dx-row {
-                    &.dx-datagrid-filter-row {
-                      .dx-editor-cell {
-                        .dx-editor-with-menu {
-                          padding: 0 1px;
-                        }
-                      }
-
-                      & > td {
-                        border-bottom: none;
-                        border-left-color: transparent;
-                        border-right-color: transparent;
-                        padding: 0;
-                        background-color: ${e};
-
-                        .dx-editor-with-menu .dx-filter-menu .dx-menu-item-content .dx-icon.dx-icon-filter-operation-default,
-                        .dx-filter-menu .dx-menu-item-content .dx-icon.dx-icon-filter-operation-default {
-                          margin-top: 1px;
-                        }
-
-                        .dx-menu-item-content {
-                          .dx-icon {
-                            width: ${b.dxMenuItemIconSize}px;
-                            height: ${b.dxMenuItemIconSize}px;
-                            font-size: ${b.dxMenuItemIconSize}px;
-                            line-height: ${b.dxMenuItemIconSize}px;
-                            color: ${u};
-                            margin: 0 2px;
-                          }
-
-                          .dx-menu-item-popout-container {
-                            width: ${b.dxMenuItemPopoutContainerWidth}px;
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-
-                & + .dx-datagrid-rowsview {
-                  border-top: 0.5px solid ${o};
-                }
-
-                .dx-texteditor-input {
-                  min-height: ${oo}px;
-                  padding-top: 0;
-                  padding-bottom: 0;
-                }
-
-                .dx-datagrid-focus-overlay {
-                  border-color: transparent;
-                }
-              }
-
-              & .dx-datagrid-rowsview:not(.dx-empty) {
-                &.dx-datagrid-after-headers {
-                  border-top: 0.5px solid ${o};
-                }
-
-                .dx-scrollable-wrapper {
-                  .dx-scrollable-container {
-                    .dx-scrollable-content {
-                      .dx-datagrid-content {
-                        .dx-datagrid-table {
-                          .dx-row {
-                            &.dx-row-lines,
-                            &.dx-freespace-row {
-                              & > td {
-                                border-bottom-color: ${o};
-                                border-left-color: ${o};
-                                border-right-color: ${o};
-
-                                & > .ant-tag {
-                                  font-size: ${I.dxColumnTagFontSize}px;
-                                  line-height: ${I.dxColumnTagLineHeight}px;
-                                  padding-inline: ${I.dxColumnTagPaddingInline}px;
-                                  margin: 0;
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-
-                .dx-datagrid-content {
-                  &.dx-datagrid-content-fixed {
-                    .dx-datagrid-table {
-                      &.dx-pointer-events-none {
-                        .dx-row {
-                          &.dx-row-lines,
-                          &.dx-freespace-row {
-                            & > td {
-                              border-bottom-color: transparent;
-                              border-left-color: ${o};
-                              border-right-color: ${o};
-                              border-left-width: 0.5px;
-                              border-right-width: 0.5px;
-                              background-color: ${e};
-
-                              &.dx-command-edit {
-                                padding: 0;
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-
-              & .dx-datagrid-rowsview.dx-empty {
-                &.dx-datagrid-after-headers {
-                  border-top: 0.5px solid ${o};
-                }
-
-                .dx-scrollable-wrapper {
-                  .dx-scrollable-container {
-                    .dx-scrollable-content {
-                      .dx-datagrid-content {
-                        .dx-datagrid-table {
-                          .dx-row {
-                            &.dx-row-lines,
-                            &.dx-freespace-row {
-                              & > td {
-                                border-bottom-color: transparent;
-                                border-left-color: transparent;
-                                border-right-color: transparent;
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-
-                .dx-datagrid-content {
-                  &.dx-datagrid-content-fixed {
-                    .dx-datagrid-table {
-                      &.dx-pointer-events-none {
-                        .dx-row {
-                          &.dx-row-lines,
-                          &.dx-freespace-row {
-                            & > td {
-                              border-bottom-color: transparent;
-                              border-left-color: transparent;
-                              border-right-color: transparent;
-
-                              &.dx-command-edit {
-                                padding: 0;
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-
-              & .dx-datagrid-filter-panel {
-                padding-left: ${g.dxFiltersPanelPaddingLeft}px;
-                padding-top: ${g.dxFiltersPanelPaddingTop}px;
-                padding-bottom: ${g.dxFiltersPanelPaddingBottom}px;
-                padding-right: ${n.hasSummaryButton ? g.dxFiltersPanelPaddingRight : g.dxFiltersPanelPaddingRightDefault}px;
-
-                border-top-color: ${o};
-
-                .dx-datagrid-filter-panel-left {
-                  display: flex;
-                  justify-content: flex-start;
-                  align-items: center;
-                  gap: ${g.dxFiltersPanelLeftGap}px;
-                  min-height: ${g.dxFilterPanelMinHeight}px;
-
-                  .dx-datagrid-filter-panel-checkbox {
-                    padding-right: 0;
-                  }
-                }
-                .dx-datagrid-filter-panel-clear-filter,
-                .dx-datagrid-filter-panel-text,
-                .dx-icon-filter {
-                  display: inline-flex;
-                  align-items: center;
-                  color: ${d};
-                  font-size: ${_}px;
-                  line-height: ${g.dxFiltersPanelTextLineHeight}px;
-                  margin: 0;
-                }
-              }
-
-              & .dx-datagrid-pager {
-                border-top: 0.5px solid ${o};
-                padding: ${r.dxPagerPaddingBlock}px ${r.dxPagerPaddingInline}px;
-
-                .dx-pages .dx-page-indexes {
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  gap: ${r.dxPagerPageIndexesGap}px;
-                }
-
-                .dx-pages .dx-page {
-                  display: inline-flex;
-                  justify-content: center;
-                  align-items: center;
-                  width: ${r.dxPagerPageButtonWidth}px;
-                  height: ${r.dxPagerPageButtonHeight}px;
-                  border-radius: ${r.dxPagerPageButtonBorderRadius}px;
-                  border: 0.5px solid transparent;
-                  font-size: ${r.dxPagerPageButtonFontSize}px;
-                  line-height: 1;
-                  font-weight: 400;
-                  color: ${i};
-                  margin: 0;
-                  padding: 0;
-
-                  &:hover {
-                    background-color: ${F};
-                    color: ${p};
-                  }
-
-                  &.dx-selection {
-                    background-color: transparent;
-                    color: ${d};
-                    border-color: ${d};
-                    font-weight: 600;
-                  }
-                }
-
-                .dx-pages .dx-separator {
-                  padding: 0;
-                  font-size: ${r.dxPagerPageButtonFontSize}px;
-                  color: ${i};
-                  line-height: 1;
-                }
-
-                .dx-pages .dx-navigate-button {
-                  width: ${r.dxPagerNavigationButtonWidth}px;
-                  height: ${r.dxPagerNavigationButtonHeight}px;
-                  padding: 0;
-
-                  &.dx-next-button,
-                  &.dx-prev-button {
-                    font-size: ${r.dxPagerNavigationButtonFontSize}px;
-                    line-height: 1;
-                    display: inline-flex;
-                    justify-content: center;
-                    align-items: center;
-
-                    &::before {
-                      width: ${r.dxPagerNavigationButtonBeforeWidth}px;
-                      height: ${r.dxPagerNavigationButtonBeforeHeight}px;
-                      line-height: 1;
-                      display: inline-flex;
-                      justify-content: center;
-                      align-items: center;
-                      position: relative;
-                      top: unset;
-                      left: unset;
-                      margin: 0;
-                    }
-                  }
-                }
-              }
-
-              & .dx-row > td {
-                padding: 0 ${Z}px;
-                height: ${X}px;
-                vertical-align: middle;
-              }
-
-              .dx-column-lines {
-                & > td {
-                  border-bottom-color: ${o};
-                  border-left-color: ${o};
-                  border-right-color: ${o};
-                }
-              }
-
-              .dx-header-filter {
-                font-size: ${U}px;
-              }
-
-              .dx-datagrid-total-footer {
-                border-top: 0.5px solid ${o};
-
-                & > .dx-datagrid-content {
-                  padding-top: 0;
-                  padding-bottom: 0;
-
-                  &.dx-datagrid-content-fixed {
-                    .dx-datagrid-table {
-                      &.dx-pointer-events-none {
-                        .dx-row {
-                          &.dx-footer-row {
-                            & > td {
-                              border-left-color: ${o};
-                              border-right-color: ${o};
-                              border-left-width: 0.5px;
-                              border-right-width: 0.5px;
-                              background-color: ${y};
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-
-                  .dx-datagrid-table {
-                    .dx-row {
-                      & > td {
-                        border-left: 1px solid ${o};
-                        border-right: 1px solid ${o};
-                        background-color: ${y};
-
-                        .dx-datagrid-summary-item {
-                          font-weight: 400;
-                          color: ${i};
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-
-              .dx-overlay-wrapper {
-                &.dx-loadpanel-wrapper {
-                  .dx-loadindicator-wrapper {
-                    .dx-loadindicator-icon {
-                      .dx-loadindicator-segment {
-                        background-color: ${d};
-                      }
-                    }
-                  }
-                  .dx-overlay-content {
-                    &.dx-loadpanel-content {
-                      .dx-loadpanel-content-wrapper {
-                        display: inline-flex;
-                        justify-content: center;
-                        align-items: center;
-                        position: relative;
-                        gap: ${eo}px;
-                      }
-
-                      .dx-loadpanel-message {
-                        color: ${i};
-                        font-size: ${z}px;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-
-            & .dx-datagrid-rowsview {
-              & > div:not(.dx-scrollable-wrapper) {
-                &.dx-datagrid-content.dx-datagrid-content-fixed {
-                  .dx-datagrid-table {
-                    .dx-row.dx-virtual-row.dx-column-lines {
-                      & > td {
-                        border-bottom-color: transparent;
-                        border-left-color: ${o};
-                        border-right-color: ${o};
-                        border-left-width: 0.5px;
-                        border-right-width: 0.5px;
-                      }
-                    }
-                  }
-                }
-              }
-
-              &.dx-empty {
-                .dx-datagrid-content {
-                  .dx-datagrid-table {
-                    .dx-row {
-                      & > td {
-                        border-bottom-color: transparent;
-                        border-left-color: transparent;
-                        border-right-color: transparent;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-
-            & .dx-datagrid-table {
-              .dx-datagrid-content &,
-              & {
-                .dx-row {
-                  .dx-command-select {
-                    ${ro};
-                  }
-                }
-              }
-            }
-
-            & .grid-cell-disable-text-selection {
-              user-select: none;
-            }
-
-            .dx-checkbox {
-              &.dx-datagrid-checkbox-size {
-                padding-bottom: 0;
-              }
-
-              .dx-checkbox-container {
-                .dx-checkbox-icon {
-                  border-color: ${G};
-                  width: ${M}px;
-                  height: ${M}px;
-                  border-radius: ${to}px;
-                }
-              }
-
-              &.dx-state-focused,
-              &.dx-state-hover {
-                .dx-checkbox-container {
-                  .dx-checkbox-icon {
-                    border-color: ${d};
-                  }
-                }
-              }
-
-              &.dx-checkbox-checked {
-                .dx-checkbox-container {
-                  .dx-checkbox-icon {
-                    background-color: ${d};
-                    border-color: ${d};
-                    display: inline-flex;
-                    justify-content: center;
-                    align-items: center;
-
-                    &::before {
-                      color: ${e};
-                      display: inline-flex;
-                      width: ${B}px;
-                      font-size: ${B}px;
-                      height: ${B}px;
-                      line-height: ${B}px;
-                      position: relative;
-                      top: unset;
-                      left: unset;
-                      margin: 0;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        `
-      )
-    };
-  }
-);
-export {
-  so as useStyles
-};
-//# sourceMappingURL=styles.js.map