plataforma-fundacao-componentes 2.22.7 → 2.22.8

package/dist/components/table/components/TableUpperHeader/TableUpperHeader.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './TableUpperHeader.scss';
+declare type upperHeaderButtonType = {
+    id?: string;
+    onClick?: () => void;
+    label?: string;
+    leftIcon?: JSX.Element | React.ReactNode;
+    rightIcon?: JSX.Element | React.ReactNode;
+    disabled?: boolean;
+};
+export interface TableUpperHeaderProps {
+    active?: boolean;
+    leftContent?: upperHeaderButtonType[];
+    rightContent?: upperHeaderButtonType[];
+}
+declare function TableUpperHeader(props: TableUpperHeaderProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TableUpperHeader>;
+export default _default;

package/dist/components/table/components/leftCheckboxWithLabel/LeftCheckboxWithLabel.d.ts

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes } from 'react';
+import { TooltipPosition } from '../../../../libraries/Tooltips';
 import { CheckboxProps } from '../../../checkbox/Checkbox';
 import './LeftCheckboxWithLabel.scss';
 export interface LeftCheckboxWithLabelElement extends CheckboxProps {
@@ -7,12 +8,18 @@ export interface LeftCheckboxWithLabelElement extends CheckboxProps {
     spanProps?: never;
     anchorLabelToCheckbox?: never;
     removeUserSelect?: never;
+    w100?: boolean;
+}
+export interface SpanPropsExtended extends HTMLAttributes<HTMLSpanElement> {
+    'tooltip-position'?: TooltipPosition;
+    'tooltip-text'?: string;
 }
 export interface LeftCheckboxWithLabelString extends CheckboxProps {
     label?: string;
     justifyContent?: string;
-    spanProps?: HTMLAttributes<HTMLSpanElement>;
+    spanProps?: SpanPropsExtended;
     anchorLabelToCheckbox?: boolean;
     removeUserSelect?: boolean;
+    w100?: boolean;
 }
 export declare const LeftCheckboxWithLabel: (props: LeftCheckboxWithLabelElement | LeftCheckboxWithLabelString) => JSX.Element;

package/dist/components/tableWithOverflow/TableWithOverflow.d.ts

@@ -1,13 +1,33 @@
 import React from 'react';
-import { TableProps } from '../table/Table';
+import { TableUpperHeaderProps } from '../table/components/TableUpperHeader/TableUpperHeader';
 import './TableWithOverflow.scss';
-interface TableWithOverflowProps extends TableProps {
+interface TableCell extends React.HTMLAttributes<HTMLTableCellElement> {
+    align?: 'left' | 'center' | 'right' | 'justify' | 'char';
+}
+declare type ColumnObject = {
+    key: string;
+    props?: TableCell;
+    value: any;
+    absolute?: {
+        left?: string;
+        right?: string;
+        width: string;
+    };
+};
+interface TableWithOverflowProps {
+    upperHeader?: TableUpperHeaderProps;
     showArrowControl?: boolean;
+    hasActionsCol?: boolean;
+    showTopNavigator?: boolean;
+    columns: ColumnObject[];
+    lines?: any[];
 }
 declare function TableWithOverflow(props: TableWithOverflowProps): JSX.Element;
 declare namespace TableWithOverflow {
     var defaultProps: {
         showArrowControl: boolean;
+        hasActionsCol: boolean;
+        showTopNavigator: boolean;
     };
 }
 declare const _default: React.MemoExoticComponent<typeof TableWithOverflow>;

package/dist/hooks/useDraggableScroll/useDraggableScroll.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function useDraggableScroll<T extends HTMLElement>(reference: React.RefObject<T>): void;

package/dist/index.css

@@ -14394,16 +14394,21 @@ h5 {
 .component-table-left-checkbox-with-label {
   display: flex;
   align-items: center;
-  width: 100%; }
+  width: 100%;
+  overflow: hidden; }
   .component-table-left-checkbox-with-label .component-table-left-checkbox-with-label-checkbox-wrapper {
     display: flex;
     align-items: center;
     justify-content: center; }
   .component-table-left-checkbox-with-label .component-table-left-checkbox-with-label-label-wrapper {
-    display: flex;
-    align-items: center;
+    display: block;
     margin-left: 8px;
-    width: calc(100% - 24px); }
+    max-width: calc(100% - 24px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; }
+  .component-table-left-checkbox-with-label.w-100 .component-table-left-checkbox-with-label-label-wrapper {
+    width: 100%; }
 
 @import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");
@@ -15076,200 +15081,291 @@ h5 {
   .scroll-white::-webkit-scrollbar-thumb:hover {
     background-color: #bfc7bf; }
 
-.component-table-with-overflow {
+.component-upper-header-table {
+  width: 100%;
+  border-radius: 8px 8px 0 0;
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  border-bottom: 1px solid;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  background-color: #cdd3cd;
+  color: #828a82;
+  border-color: #828a82; }
+  .component-upper-header-table button {
+    font-size: 16px;
+    color: #828a82;
+    border-color: #828a82;
+    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
+    outline: none;
+    -webkit-appearance: none;
+    border: none;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: rgba(0, 0, 0, 0); }
+    .component-upper-header-table button:not(:disabled) {
+      cursor: pointer; }
+      .component-upper-header-table button:not(:disabled):active {
+        transform: scale(0.95, 0.9); }
+    .component-upper-header-table button span {
+      display: flex;
+      align-items: center;
+      justify-content: center; }
+      .component-upper-header-table button span:first-child {
+        padding-right: 8px; }
+      .component-upper-header-table button span:last-child {
+        padding-left: 8px; }
+      .component-upper-header-table button span svg {
+        max-width: 20px !important;
+        max-height: 20px !important; }
+  .component-upper-header-table.active {
+    background-color: #d7e6c8;
+    color: #3fa110;
+    border-color: #3fa110; }
+    .component-upper-header-table.active button {
+      background-color: #d7e6c8;
+      color: #3fa110; }
+  .component-upper-header-table .component-upper-header-table-left {
+    display: flex;
+    flex-wrap: wrap; }
+  .component-upper-header-table .component-upper-header-table-right {
+    display: flex;
+    flex-wrap: wrap; }
+
+@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");
+:export {
+  white: #fefefe;
+  darkenWhite: #efefef;
+  black: #121212;
+  transparent: rgba(0, 0, 0, 0);
+  primary: #3fa110;
+  primaryDark: #33820d;
+  primaryLight: #d7e6c8;
+  secondaryDarker: #323c32;
+  secondaryDark: #5a645a;
+  secondary: #828a82;
+  secondaryLight: #cdd3cd;
+  secondaryLighter: #f8f9f7;
+  danger: #e60000;
+  dangerLight: #ffb4b4;
+  dangerDark: #ab4745;
+  warning: #ffcd00;
+  warningLight: #ffeb98;
+  warningDark: #765f00; }
+
+:root {
+  --rowPadding: 0;
+  --colPadding: 8px; }
+
+:export {
+  widthXs: 575.98px;
+  widthSm: 767.98px;
+  widthMd: 991.98px;
+  widthLg: 1199.98px; }
+
+body.sb-show-main.sb-main-padded {
+  padding: 15px; }
+
+*.nunito {
+  font-family: "Nunito", sans-serif; }
+
+*:not(.nunito) {
+  font-family: "Exo 2", sans-serif; }
+
+.document-grabbing {
+  cursor: -webkit-grabbing !important;
+  cursor: grabbing !important; }
+
+h1 {
+  font-size: 36px;
+  font-weight: 600;
+  margin: 0; }
+
+h2 {
+  font-size: 32px;
+  font-weight: 500;
+  margin: 0; }
+
+h3 {
+  font-size: 24px;
+  font-weight: 500;
+  margin: 0; }
+
+h4 {
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0; }
+
+h5 {
   font-family: "Nunito", sans-serif;
-  position: relative;
+  font-size: 24px;
+  font-weight: 400;
+  margin: 0; }
+
+.fade-enter {
+  transition: opacity 0.2s ease;
+  position: absolute;
+  opacity: 0; }
+
+.fade-enter-active {
+  position: absolute;
+  opacity: 1; }
+
+.fade-exit {
+  transition: opacity 0.15s ease;
+  position: absolute;
+  opacity: 1; }
+
+.fade-exit-active {
+  position: absolute;
+  opacity: 0; }
+
+.fade-exit-done {
+  position: absolute;
+  opacity: 0; }
+
+* {
+  box-sizing: border-box; }
+  *::-webkit-scrollbar-track {
+    background-color: #f8f9f7; }
+  *::-webkit-scrollbar {
+    width: 12px;
+    height: 12px; }
+  *::-webkit-scrollbar-thumb {
+    -webkit-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+    border-radius: 10px;
+    background-color: #cdd3cd;
+    border-width: 3px;
+    border-style: solid;
+    border-color: #f8f9f7; }
+    *::-webkit-scrollbar-thumb:hover {
+      border-width: 2px;
+      background-color: #bfc7bf; }
+  *::-webkit-scrollbar-button {
+    display: none; }
+
+.scroll-white::-webkit-scrollbar-track {
+  background-color: #fefefe; }
+
+.scroll-white::-webkit-scrollbar-thumb {
+  background-color: #cdd3cd;
+  border-color: #fefefe; }
+  .scroll-white::-webkit-scrollbar-thumb:hover {
+    background-color: #bfc7bf; }
+
+.component-table-with-overflow {
   width: 100%; }
-  .component-table-with-overflow * {
-    font-family: "Nunito", sans-serif !important; }
-  .component-table-with-overflow .component-table-with-overflow-outer-table {
+  .component-table-with-overflow .component-table-with-overflow-wrapper {
     width: 100%;
-    overflow-x: auto; }
-    .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table {
-      display: flex;
-      width: 100%; }
-      .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-left .component-table-with-overflow-body,
-      .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-left .component-table-with-overflow-header {
-        border-radius: 8px 0 0 8px;
-        padding: 0 0 0 8px; }
-        .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-left .component-table-with-overflow-body .component-table-with-overflow-cell,
-        .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-left .component-table-with-overflow-header .component-table-with-overflow-cell {
-          justify-content: center; }
-          .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-left .component-table-with-overflow-body .component-table-with-overflow-cell:first-child,
-          .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-left .component-table-with-overflow-header .component-table-with-overflow-cell:first-child {
-            justify-content: flex-start; }
-        .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-left .component-table-with-overflow-body .component-table-with-overflow-row.disabled,
-        .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-left .component-table-with-overflow-header .component-table-with-overflow-row.disabled {
-          position: relative; }
-          .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-left .component-table-with-overflow-body .component-table-with-overflow-row.disabled:first-child::after,
-          .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-left .component-table-with-overflow-header .component-table-with-overflow-row.disabled:first-child::after {
-            border-radius: 8px 0 0 0; }
-          .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-left .component-table-with-overflow-body .component-table-with-overflow-row.disabled:last-child::after,
-          .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-left .component-table-with-overflow-header .component-table-with-overflow-row.disabled:last-child::after {
-            border-radius: 0 0 0 8px; }
-          .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-left .component-table-with-overflow-body .component-table-with-overflow-row.disabled::after,
-          .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-left .component-table-with-overflow-header .component-table-with-overflow-row.disabled::after {
-            background-color: #efefef;
-            content: '';
-            position: absolute;
-            height: 100%;
-            width: 8px;
-            left: -8px;
-            top: 0; }
-      .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-mid {
-        width: 1000%; }
-        .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-mid.over {
-          overflow-x: auto;
-          cursor: grab;
-          cursor: -webkit-grab;
-          -webkit-user-select: none;
-             -moz-user-select: none;
-              -ms-user-select: none;
-                  user-select: none; }
-          .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-mid.over:active {
-            cursor: grabbing !important;
-            cursor: -webkit-grabbing !important; }
-        .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-mid:not(.over) {
-          cursor: inherit;
-          overflow-x: visible; }
-        .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-mid .component-table-with-overflow-cell {
-          justify-content: center;
+    position: relative; }
+    @media screen and (max-width: 767.98px) {
+      .component-table-with-overflow .component-table-with-overflow-wrapper {
+        padding: 0 !important; } }
+    .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table {
+      overflow-x: auto;
+      overflow-y: visible; }
+      .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table {
+        width: 100%;
+        border-spacing: 0; }
+        .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table thead {
           background-color: #fefefe; }
-          .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-mid .component-table-with-overflow-cell:last-child {
-            width: 100%; }
-      .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-right .component-table-with-overflow-body,
-      .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-right .component-table-with-overflow-header {
-        position: relative;
-        border-radius: 0 8px 8px 0;
-        padding: 0 8px 0 0; }
-      .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-right .component-table-with-overflow-body .component-table-with-overflow-cell {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end; }
-      .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-right .component-table-with-overflow-body .component-table-with-overflow-row.disabled {
-        position: relative; }
-        .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-right .component-table-with-overflow-body .component-table-with-overflow-row.disabled:first-child::after {
+          .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table thead tr:first-child th {
+            height: 44px; }
+            .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table thead tr:first-child th:first-child {
+              padding: 0 4px;
+              border-radius: 8px 0 0 8px; }
+            .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table thead tr:first-child th:last-child {
+              padding: 0 4px;
+              border-radius: 0 8px 8px 0; }
+          .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table thead tr th {
+            background-color: #fefefe;
+            padding: 12px 8px;
+            white-space: nowrap; }
+          .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table thead tr:nth-child(2) {
+            height: 12px; }
+        .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table tbody tr td {
+          background-color: #fefefe;
+          padding: 12px 8px;
+          white-space: nowrap; }
+          .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table tbody tr td:first-child, .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table tbody tr td:last-child {
+            padding: 0 4px; }
+        .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table tbody tr[aria-disabled='true'] td {
+          background-color: #efefef; }
+        .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table tbody tr:first-child td:first-child {
+          border-radius: 8px 0 0 0; }
+        .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table tbody tr:first-child td:last-child {
           border-radius: 0 8px 0 0; }
-        .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-right .component-table-with-overflow-body .component-table-with-overflow-row.disabled:last-child::after {
+        .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table tbody tr:last-child td:first-child {
+          border-radius: 0 0 0 8px; }
+        .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table tbody tr:last-child td:last-child {
           border-radius: 0 0 8px 0; }
-        .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-right .component-table-with-overflow-body .component-table-with-overflow-row.disabled::after {
-          background-color: #efefef;
-          content: '';
-          position: absolute;
-          height: 100%;
-          width: 8px;
-          right: -8px;
-          top: 0; }
-      .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-header {
-        display: flex;
-        margin-bottom: 16px;
-        background-color: #fefefe; }
-        .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-header .component-table-with-overflow-cell {
-          color: #323c32;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          text-align: center;
-          font-weight: 800;
-          padding: 8px; }
-      .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-body {
-        background-color: #fefefe;
-        width: 100%; }
-        .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-body .component-table-with-overflow-row {
-          display: flex; }
-          .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-body .component-table-with-overflow-row.disabled .component-table-with-overflow-cell {
-            color: #828a82;
-            background-color: #efefef; }
-          .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-body .component-table-with-overflow-row:not(:last-child) .component-table-with-overflow-cell {
-            border-bottom: 1px solid #cdd3cd; }
-          .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table .component-table-with-overflow-body .component-table-with-overflow-row .component-table-with-overflow-cell {
-            color: #323c32;
-            text-align: center;
-            vertical-align: middle;
-            display: flex;
-            align-items: center;
-            padding: 8px; }
-      .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table.has-upper-header .component-table-with-overflow-left .component-table-with-overflow-header {
-        border-radius: 0 0 0 8px !important; }
-      .component-table-with-overflow .component-table-with-overflow-outer-table .component-table-with-overflow-table.has-upper-header .component-table-with-overflow-right .component-table-with-overflow-header {
-        border-radius: 0 0 8px 0 !important; }
-  .component-table-with-overflow .component-table-with-overflow-upper-header {
-    width: 100%;
-    border-radius: 8px 8px 0 0;
-    padding: 0 8px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    border-bottom: 1px solid;
-    transition: background-color 0.3s ease, color 0.3s ease;
-    background-color: #cdd3cd;
-    color: #828a82;
-    border-color: #828a82; }
-    .component-table-with-overflow .component-table-with-overflow-upper-header button {
-      font-size: 16px;
-      color: #828a82;
-      border-color: #828a82;
-      transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
-      outline: none;
-      -webkit-appearance: none;
-      border: none;
-      padding: 8px;
+        .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table tbody tr:not(:last-child) td:not(:first-child):not(:last-child) {
+          border-bottom: 1px solid #cdd3cd; }
+        .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table tbody tr:last-child td:not(:first-child):not(:last-child) {
+          height: 44px; }
+    .component-table-with-overflow .component-table-with-overflow-wrapper.has-upper-header .component-table-with-overflow-outer-table
+table
+thead
+tr:first-child th:first-child {
+      border-radius: 0 0 0 8px; }
+    .component-table-with-overflow .component-table-with-overflow-wrapper.has-upper-header .component-table-with-overflow-outer-table
+table
+thead
+tr:first-child th:last-child {
+      border-radius: 0 0 8px 0; }
+    .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-table-arrows {
+      position: absolute;
+      right: 8px;
+      z-index: +1;
+      display: flex;
+      height: 44px;
       display: flex;
       align-items: center;
-      justify-content: flex-start;
-      background-color: rgba(0, 0, 0, 0); }
-      .component-table-with-overflow .component-table-with-overflow-upper-header button:not(:disabled) {
-        cursor: pointer; }
-        .component-table-with-overflow .component-table-with-overflow-upper-header button:not(:disabled):active {
-          transform: scale(0.95, 0.9); }
-      .component-table-with-overflow .component-table-with-overflow-upper-header button span {
+      background-color: #fefefe; }
+      @media screen and (max-width: 767.98px) {
+        .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-table-arrows {
+          display: none; } }
+      .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-table-arrows button:first-child {
+        margin-right: 2px; }
+      .component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-table-arrows svg {
+        width: 16px;
+        height: 16px; }
+    .component-table-with-overflow .component-table-with-overflow-wrapper .actions-cell {
+      width: 40px;
+      height: 44px;
+      padding: 6px 8px !important; }
+      .component-table-with-overflow .component-table-with-overflow-wrapper .actions-cell.absolute {
+        padding: 0 !important;
         display: flex;
         align-items: center;
-        justify-content: center;
-        padding-right: 8px; }
-        .component-table-with-overflow .component-table-with-overflow-upper-header button span svg {
-          max-width: 20px !important;
-          max-height: 20px !important; }
-    .component-table-with-overflow .component-table-with-overflow-upper-header.active {
-      background-color: #d7e6c8;
-      color: #3fa110;
-      border-color: #3fa110; }
-      .component-table-with-overflow .component-table-with-overflow-upper-header.active button {
-        background-color: #d7e6c8;
-        color: #3fa110; }
-
-.component-table-with-overflow-fake-table {
-  min-width: 1000px;
-  z-index: -1000;
-  bottom: -10000px;
-  opacity: 0;
-  position: fixed;
-  width: 1000px;
-  left: 0;
-  border-spacing: 0;
-  background-color: red; }
-  .component-table-with-overflow-fake-table th,
-  .component-table-with-overflow-fake-table td {
-    white-space: nowrap !important;
-    padding: 14px;
-    border: 1px solid black; }
-
-.component-table-with-overflow-arrow-control {
-  background-color: #fefefe;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 45px;
-  position: absolute;
-  top: 0;
-  right: 8px; }
-  .component-table-with-overflow-arrow-control button:last-child {
-    margin-left: 2px; }
-  .component-table-with-overflow-arrow-control svg {
-    width: 18px;
-    height: 18px; }
+        justify-content: center; }
+    @media screen and (min-width: 767.98px) {
+      .component-table-with-overflow .component-table-with-overflow-wrapper td[data-draggable='true'] {
+        -webkit-user-select: none;
+           -moz-user-select: none;
+            -ms-user-select: none;
+                user-select: none;
+        cursor: -webkit-grab;
+        cursor: grab; }
+      .component-table-with-overflow .component-table-with-overflow-wrapper table:active td[data-draggable='true'] {
+        cursor: -webkit-grabbing !important;
+        cursor: grabbing !important; }
+      .component-table-with-overflow .component-table-with-overflow-wrapper .absolute {
+        position: absolute; }
+      .component-table-with-overflow .component-table-with-overflow-wrapper .left-0 {
+        left: 0;
+        width: 8px;
+        height: 44px; }
+      .component-table-with-overflow .component-table-with-overflow-wrapper .right-0 {
+        right: 0;
+        width: 8px;
+        height: 44px; } }
 
 @import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");