@dfds-ui/experiences 1.1.7 → 1.1.9

package/dynamic-table/Body/TableBody.js

@@ -0,0 +1,52 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import React, { useCallback } from 'react';
+import TableRow from './TableRow';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TableBody = /*#__PURE__*/React.memo(function (_ref) {
+  var activeRow = _ref.activeRow,
+      headerRow = _ref.headerRow,
+      onClickRow = _ref.onClickRow,
+      onSelectRow = _ref.onSelectRow,
+      rows = _ref.rows,
+      selectableRows = _ref.selectableRows,
+      selectedRows = _ref.selectedRows;
+  // update state and callback functions
+  var updateSelectedRows = useCallback(function (id) {
+    if (onSelectRow && selectableRows) {
+      var selection = _toConsumableArray(selectedRows);
+
+      if (selectedRows.includes(id)) {
+        var index = selectedRows.indexOf(id);
+        if (index !== -1) selection.splice(index, 1);
+        onSelectRow(selection);
+      } else {
+        selection.push(id);
+        onSelectRow(selection);
+      }
+    }
+  }, [selectableRows, selectedRows]);
+  return ___EmotionJSX("tbody", null, rows.map(function (row, index) {
+    return ___EmotionJSX(TableRow, {
+      headerRow: headerRow,
+      isActive: activeRow ? row.id === activeRow : false,
+      key: index,
+      onClickRow: onClickRow,
+      onSelectRow: updateSelectedRows,
+      row: row,
+      selectableRows: selectableRows,
+      selectedRows: selectedRows
+    });
+  }));
+});
+export default TableBody;

package/dynamic-table/Body/TableBody.types.d.ts

@@ -0,0 +1,10 @@
+import { Header, Row } from '../DynamicTable.types';
+export declare type TableBodyProps = {
+    activeRow?: string;
+    headerRow: Header[];
+    onClickRow?: (id: string) => void;
+    onSelectRow?: (list: string[]) => void;
+    rows: Row[];
+    selectableRows: boolean;
+    selectedRows: string[];
+};

package/dynamic-table/Body/TableBody.types.js

@@ -0,0 +1 @@
+export {};

package/dynamic-table/Body/TableCell.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TableCellProps } from './TableCell.types';
+declare const TableCell: React.MemoExoticComponent<({ children, headerCell }: TableCellProps) => JSX.Element>;
+export default TableCell;

package/dynamic-table/Body/TableCell.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { tableCellStyles } from './TableCell.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TableCell = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children,
+      headerCell = _ref.headerCell;
+  return ___EmotionJSX("td", {
+    css: tableCellStyles({
+      align: headerCell === null || headerCell === void 0 ? void 0 : headerCell.textAlign,
+      customWidth: headerCell === null || headerCell === void 0 ? void 0 : headerCell.width
+    }),
+    "data-cy": "dynamic-table-cell-".concat(headerCell === null || headerCell === void 0 ? void 0 : headerCell.key)
+  }, children);
+});
+export default TableCell;

package/dynamic-table/Body/TableCell.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const genericTableCellStyles: import("@emotion/react").SerializedStyles;
+declare type TableCellProps = {
+    align?: 'center' | 'left' | 'right';
+    customWidth?: string;
+};
+export declare const tableCellStyles: ({ align, customWidth }: TableCellProps) => import("@emotion/react").SerializedStyles;
+export declare const tableCellCheckboxStyles: import("@emotion/react").SerializedStyles;
+export {};

package/dynamic-table/Body/TableCell.styles.js

@@ -0,0 +1,15 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { theme } from '@dfds-ui/theme';
+import { css } from '@emotion/react';
+export var genericTableCellStyles = /*#__PURE__*/css("padding:0 ", theme.spacing.xs, ";&:first-of-type{padding-left:", theme.spacing.s, ";}&:last-of-type{padding-right:", theme.spacing.s, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:genericTableCellStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR3lDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmV4cG9ydCBjb25zdCBnZW5lcmljVGFibGVDZWxsU3R5bGVzID0gY3NzYFxuICBwYWRkaW5nOiAwICR7dGhlbWUuc3BhY2luZy54c307XG5cbiAgJjpmaXJzdC1vZi10eXBlIHtcbiAgICBwYWRkaW5nLWxlZnQ6ICR7dGhlbWUuc3BhY2luZy5zfTtcbiAgfVxuXG4gICY6bGFzdC1vZi10eXBlIHtcbiAgICBwYWRkaW5nLXJpZ2h0OiAke3RoZW1lLnNwYWNpbmcuc307XG4gIH1cbmBcblxudHlwZSBUYWJsZUNlbGxQcm9wcyA9IHtcbiAgYWxpZ24/OiAnY2VudGVyJyB8ICdsZWZ0JyB8ICdyaWdodCdcbiAgY3VzdG9tV2lkdGg/OiBzdHJpbmdcbn1cblxuZXhwb3J0IGNvbnN0IHRhYmxlQ2VsbFN0eWxlcyA9ICh7IGFsaWduLCBjdXN0b21XaWR0aCB9OiBUYWJsZUNlbGxQcm9wcykgPT4gY3NzYFxuICAke3sgLi4uZ2VuZXJpY1RhYmxlQ2VsbFN0eWxlcyB9fVxuXG4gIG1pbi13aWR0aDogJHtjdXN0b21XaWR0aCB8fCAnYXV0byd9O1xuICB0ZXh0LWFsaWduOiAke2FsaWduIHx8ICdsZWZ0J307XG4gIHdpZHRoOiAke2N1c3RvbVdpZHRoIHx8ICdhdXRvJ307XG5gXG5cbmV4cG9ydCBjb25zdCB0YWJsZUNlbGxDaGVja2JveFN0eWxlcyA9IGNzc2BcbiAgJHt7IC4uLmdlbmVyaWNUYWJsZUNlbGxTdHlsZXMgfX1cblxuICBtYXgtd2lkdGg6IDQwcHg7XG4gIHdpZHRoOiA0MHB4O1xuYFxuIl19 */");
+export var tableCellStyles = function tableCellStyles(_ref) {
+  var align = _ref.align,
+      customWidth = _ref.customWidth;
+  return /*#__PURE__*/css(_objectSpread({}, genericTableCellStyles), " min-width:", customWidth || 'auto', ";text-align:", align || 'left', ";width:", customWidth || 'auto', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:tableCellStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0I4RSIsImZpbGUiOiIuLi8uLi8uLi9zcmMvZHluYW1pYy10YWJsZS9Cb2R5L1RhYmxlQ2VsbC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgY29uc3QgZ2VuZXJpY1RhYmxlQ2VsbFN0eWxlcyA9IGNzc2BcbiAgcGFkZGluZzogMCAke3RoZW1lLnNwYWNpbmcueHN9O1xuXG4gICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1sZWZ0OiAke3RoZW1lLnNwYWNpbmcuc307XG4gIH1cblxuICAmOmxhc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuICB9XG5gXG5cbnR5cGUgVGFibGVDZWxsUHJvcHMgPSB7XG4gIGFsaWduPzogJ2NlbnRlcicgfCAnbGVmdCcgfCAncmlnaHQnXG4gIGN1c3RvbVdpZHRoPzogc3RyaW5nXG59XG5cbmV4cG9ydCBjb25zdCB0YWJsZUNlbGxTdHlsZXMgPSAoeyBhbGlnbiwgY3VzdG9tV2lkdGggfTogVGFibGVDZWxsUHJvcHMpID0+IGNzc2BcbiAgJHt7IC4uLmdlbmVyaWNUYWJsZUNlbGxTdHlsZXMgfX1cblxuICBtaW4td2lkdGg6ICR7Y3VzdG9tV2lkdGggfHwgJ2F1dG8nfTtcbiAgdGV4dC1hbGlnbjogJHthbGlnbiB8fCAnbGVmdCd9O1xuICB3aWR0aDogJHtjdXN0b21XaWR0aCB8fCAnYXV0byd9O1xuYFxuXG5leHBvcnQgY29uc3QgdGFibGVDZWxsQ2hlY2tib3hTdHlsZXMgPSBjc3NgXG4gICR7eyAuLi5nZW5lcmljVGFibGVDZWxsU3R5bGVzIH19XG5cbiAgbWF4LXdpZHRoOiA0MHB4O1xuICB3aWR0aDogNDBweDtcbmBcbiJdfQ== */");
+};
+export var tableCellCheckboxStyles = /*#__PURE__*/css(_objectSpread({}, genericTableCellStyles), " max-width:40px;width:40px;" + (process.env.NODE_ENV === "production" ? "" : ";label:tableCellCheckboxStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEIwQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvZHluYW1pYy10YWJsZS9Cb2R5L1RhYmxlQ2VsbC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgY29uc3QgZ2VuZXJpY1RhYmxlQ2VsbFN0eWxlcyA9IGNzc2BcbiAgcGFkZGluZzogMCAke3RoZW1lLnNwYWNpbmcueHN9O1xuXG4gICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1sZWZ0OiAke3RoZW1lLnNwYWNpbmcuc307XG4gIH1cblxuICAmOmxhc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuICB9XG5gXG5cbnR5cGUgVGFibGVDZWxsUHJvcHMgPSB7XG4gIGFsaWduPzogJ2NlbnRlcicgfCAnbGVmdCcgfCAncmlnaHQnXG4gIGN1c3RvbVdpZHRoPzogc3RyaW5nXG59XG5cbmV4cG9ydCBjb25zdCB0YWJsZUNlbGxTdHlsZXMgPSAoeyBhbGlnbiwgY3VzdG9tV2lkdGggfTogVGFibGVDZWxsUHJvcHMpID0+IGNzc2BcbiAgJHt7IC4uLmdlbmVyaWNUYWJsZUNlbGxTdHlsZXMgfX1cblxuICBtaW4td2lkdGg6ICR7Y3VzdG9tV2lkdGggfHwgJ2F1dG8nfTtcbiAgdGV4dC1hbGlnbjogJHthbGlnbiB8fCAnbGVmdCd9O1xuICB3aWR0aDogJHtjdXN0b21XaWR0aCB8fCAnYXV0byd9O1xuYFxuXG5leHBvcnQgY29uc3QgdGFibGVDZWxsQ2hlY2tib3hTdHlsZXMgPSBjc3NgXG4gICR7eyAuLi5nZW5lcmljVGFibGVDZWxsU3R5bGVzIH19XG5cbiAgbWF4LXdpZHRoOiA0MHB4O1xuICB3aWR0aDogNDBweDtcbmBcbiJdfQ== */");

package/dynamic-table/Body/TableCell.types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Header } from '../DynamicTable.types';
+export declare type TableCellProps = {
+    children: React.ReactNode;
+    headerCell?: Header;
+};

package/dynamic-table/Body/TableCell.types.js

@@ -0,0 +1 @@
+export {};

package/dynamic-table/Body/TableRow.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TableRowProps } from './TableRow.types';
+declare const TableRow: React.MemoExoticComponent<({ headerRow, isActive, onClickRow, onSelectRow, row, selectableRows, selectedRows }: TableRowProps) => JSX.Element>;
+export default TableRow;

package/dynamic-table/Body/TableRow.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Checkbox } from '@dfds-ui/forms';
+import TableCell from './TableCell';
+import { tableCellCheckboxStyles } from './TableCell.styles';
+import { tableRowStyles } from './TableRow.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TableRow = /*#__PURE__*/React.memo(function (_ref) {
+  var headerRow = _ref.headerRow,
+      isActive = _ref.isActive,
+      onClickRow = _ref.onClickRow,
+      onSelectRow = _ref.onSelectRow,
+      row = _ref.row,
+      selectableRows = _ref.selectableRows,
+      selectedRows = _ref.selectedRows;
+  return ___EmotionJSX("tr", {
+    css: tableRowStyles({
+      active: isActive,
+      hoverColor: !!onClickRow
+    }),
+    className: row.className,
+    onClick: function onClick() {
+      return onClickRow && onClickRow(row.id ? String(row.id) : '');
+    }
+  }, selectableRows && row.id && ___EmotionJSX("td", {
+    css: tableCellCheckboxStyles
+  }, ___EmotionJSX(Checkbox, {
+    checked: selectedRows.includes(row.id),
+    name: row.id,
+    onChange: function onChange() {
+      if (!row.id) return;
+      onSelectRow(row.id);
+    },
+    onLabelClick: function onLabelClick(e) {
+      e.stopPropagation();
+    },
+    visualSize: "small"
+  })), headerRow.map(function (headerCell, index) {
+    return ___EmotionJSX(TableCell, {
+      headerCell: headerRow === null || headerRow === void 0 ? void 0 : headerRow[index],
+      key: index
+    }, row[headerCell.key] || '-');
+  }));
+});
+export default TableRow;

package/dynamic-table/Body/TableRow.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const genericTableRowStyles: import("@emotion/react").SerializedStyles;
+declare type TableRowProps = {
+    active?: boolean;
+    hoverColor: boolean;
+};
+export declare const tableRowStyles: ({ active, hoverColor }: TableRowProps) => import("@emotion/react").SerializedStyles;
+export {};

package/dynamic-table/Body/TableRow.styles.js

@@ -0,0 +1,14 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { theme } from '@dfds-ui/theme';
+import { css } from '@emotion/react';
+export var genericTableRowStyles = /*#__PURE__*/css("border-bottom:1px solid ", theme.colors.surface.secondary, ";border-collapse:collapse;height:48px;" + (process.env.NODE_ENV === "production" ? "" : ";label:genericTableRowStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVSb3cuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHd0MiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2R5bmFtaWMtdGFibGUvQm9keS9UYWJsZVJvdy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgY29uc3QgZ2VuZXJpY1RhYmxlUm93U3R5bGVzID0gY3NzYFxuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuc3VyZmFjZS5zZWNvbmRhcnl9O1xuICBib3JkZXItY29sbGFwc2U6IGNvbGxhcHNlO1xuICBoZWlnaHQ6IDQ4cHg7XG5gXG5cbnR5cGUgVGFibGVSb3dQcm9wcyA9IHtcbiAgYWN0aXZlPzogYm9vbGVhblxuICBob3ZlckNvbG9yOiBib29sZWFuXG59XG5cbmV4cG9ydCBjb25zdCB0YWJsZVJvd1N0eWxlcyA9ICh7IGFjdGl2ZSwgaG92ZXJDb2xvciB9OiBUYWJsZVJvd1Byb3BzKSA9PiBjc3NgXG4gICR7eyAuLi5nZW5lcmljVGFibGVSb3dTdHlsZXMgfX1cblxuICAmOmhvdmVyIHtcbiAgICAke2hvdmVyQ29sb3IgJiZcbiAgICBgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnNlY29uZGFyeX07XG4gICAgICBjdXJzb3I6ICR7aG92ZXJDb2xvciAmJiAncG9pbnRlcid9O1xuICAgIGB9O1xuICB9XG5cbiAgJHthY3RpdmUgJiZcbiAgYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLmRpdmlkZXIuZGFya307XG4gIGB9O1xuYFxuIl19 */");
+export var tableRowStyles = function tableRowStyles(_ref) {
+  var active = _ref.active,
+      hoverColor = _ref.hoverColor;
+  return /*#__PURE__*/css(_objectSpread({}, genericTableRowStyles), " &:hover{", hoverColor && "\n      background-color: ".concat(theme.colors.surface.secondary, ";\n      cursor: ").concat(hoverColor && 'pointer', ";\n    "), ";}", active && "\n    background-color: ".concat(theme.colors.divider.dark, ";\n  "), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:tableRowStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVSb3cuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjNEUiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2R5bmFtaWMtdGFibGUvQm9keS9UYWJsZVJvdy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgY29uc3QgZ2VuZXJpY1RhYmxlUm93U3R5bGVzID0gY3NzYFxuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuc3VyZmFjZS5zZWNvbmRhcnl9O1xuICBib3JkZXItY29sbGFwc2U6IGNvbGxhcHNlO1xuICBoZWlnaHQ6IDQ4cHg7XG5gXG5cbnR5cGUgVGFibGVSb3dQcm9wcyA9IHtcbiAgYWN0aXZlPzogYm9vbGVhblxuICBob3ZlckNvbG9yOiBib29sZWFuXG59XG5cbmV4cG9ydCBjb25zdCB0YWJsZVJvd1N0eWxlcyA9ICh7IGFjdGl2ZSwgaG92ZXJDb2xvciB9OiBUYWJsZVJvd1Byb3BzKSA9PiBjc3NgXG4gICR7eyAuLi5nZW5lcmljVGFibGVSb3dTdHlsZXMgfX1cblxuICAmOmhvdmVyIHtcbiAgICAke2hvdmVyQ29sb3IgJiZcbiAgICBgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnNlY29uZGFyeX07XG4gICAgICBjdXJzb3I6ICR7aG92ZXJDb2xvciAmJiAncG9pbnRlcid9O1xuICAgIGB9O1xuICB9XG5cbiAgJHthY3RpdmUgJiZcbiAgYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLmRpdmlkZXIuZGFya307XG4gIGB9O1xuYFxuIl19 */");
+};

package/dynamic-table/Body/TableRow.types.d.ts

@@ -0,0 +1,10 @@
+import { Header, Row } from '../DynamicTable.types';
+export declare type TableRowProps = {
+    headerRow: Header[];
+    isActive: boolean;
+    onClickRow?: (id: string) => void;
+    onSelectRow: (id: string) => void;
+    row: Row;
+    selectableRows: boolean;
+    selectedRows: string[];
+};

package/dynamic-table/Body/TableRow.types.js

@@ -0,0 +1 @@
+export {};

package/dynamic-table/DynamicTable.d.ts

@@ -1,29 +1,4 @@
-import { FunctionComponent } from 'react';
-declare type DataKey = {
-    displayName: string;
-    key: string;
-    rightAlign?: boolean;
-    customColumnWidth?: string;
-    bold?: boolean;
-};
-declare type DynamicTableProps = {
-    data: any[];
-    dataKeys?: DataKey[];
-    className?: string;
-    hasHeader?: boolean;
-    colorScheme?: {
-        valueKey: string;
-        colors: any;
-    };
-    badgesScheme?: {
-        valueKey: string;
-        intentMapping: any;
-    };
-    fixedHeight?: string;
-    stickyHeader?: boolean;
-    onSortByKey?: (value: string, sortByDescending: boolean) => void;
-    onSelectFunction?: (list: string[]) => void;
-    onSelectRow?: (id: string) => void;
-};
-declare const DynamicTable: FunctionComponent<DynamicTableProps>;
-export default DynamicTable;
+import React from 'react';
+import { DynamicTableProps } from './DynamicTable.types';
+declare const _default: React.NamedExoticComponent<DynamicTableProps>;
+export default _default;

package/dynamic-table/DynamicTable.js

@@ -1,11 +1,3 @@
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -18,198 +10,79 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useState, useEffect } from 'react';
-import { Badge, Checkbox } from '@dfds-ui/react-components';
-import { dynamicTableWrapperStyle, downStyle, cellStyle, thStyle, rowStyle } from './DynamicTable.styles';
-import { ChevronDown } from '@dfds-ui/icons/system';
+import React, { useEffect, useMemo, useState } from 'react';
+import TableBody from './Body/TableBody';
+import { tableStyles, tableWrapperStyles } from './DynamicTable.styles';
+import TableHead from './Head/TableHead';
+import createSkeletonRows from './Skeleton/helpers/createSkeletonRows';
+import { fadeStyles } from './Skeleton/SkeletonTable.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 var DynamicTable = function DynamicTable(_ref) {
-  var data = _ref.data,
-      dataKeys = _ref.dataKeys,
-      className = _ref.className,
-      hasHeader = _ref.hasHeader,
-      onSortByKey = _ref.onSortByKey,
-      onSelectFunction = _ref.onSelectFunction,
+  var activeRow = _ref.activeRow,
+      descending = _ref.descending,
+      height = _ref.height,
+      headerRow = _ref.headerRow,
+      isLoading = _ref.isLoading,
+      onClickRow = _ref.onClickRow,
       onSelectRow = _ref.onSelectRow,
-      colorScheme = _ref.colorScheme,
-      badgesScheme = _ref.badgesScheme,
-      fixedHeight = _ref.fixedHeight,
+      onSort = _ref.onSort,
+      rows = _ref.rows,
+      _ref$selectedRows = _ref.selectedRows,
+      selectedRows = _ref$selectedRows === void 0 ? [] : _ref$selectedRows,
+      sortingBy = _ref.sortingBy,
       stickyHeader = _ref.stickyHeader;
-  var keys = dataKeys || [];
-
-  if (!dataKeys) {
-    var newKeys = Object.keys(data[0]);
-
-    for (var i = 0; i < newKeys.length; i++) {
-      keys.push({
-        displayName: newKeys[i],
-        key: newKeys[i],
-        rightAlign: false
-      });
-    }
-
-    keys = dataKeys || keys;
-  }
-
-  var itemsAreSelectable = onSelectFunction && keys.some(function (key) {
-    return key.key === 'id';
-  }); // states
 
-  var _useState = useState([]),
+  // states
+  var _useState = useState(sortingBy || ''),
       _useState2 = _slicedToArray(_useState, 2),
-      selectedRows = _useState2[0],
-      setSelectedRows = _useState2[1];
+      sortByKeyValue = _useState2[0],
+      setSortByKeyValue = _useState2[1];
 
-  var _useState3 = useState(''),
+  var _useState3 = useState(sortingBy && descending || false),
       _useState4 = _slicedToArray(_useState3, 2),
-      sortByKeyValue = _useState4[0],
-      setSortByKeyValue = _useState4[1];
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      sortByDescending = _useState6[0],
-      setSortByDescending = _useState6[1];
+      sortDescending = _useState4[0],
+      setSortDescending = _useState4[1];
 
+  var selectableRows = !!onSelectRow;
+  var skeletonRows = useMemo(function () {
+    return createSkeletonRows(headerRow);
+  }, [headerRow]);
   useEffect(function () {
-    onSelectFunction && onSelectFunction(selectedRows);
-  }, [onSelectFunction, selectedRows]); // update state and callback functions
-
-  var updateSelectedRows = function updateSelectedRows(id) {
-    if (itemsAreSelectable) {
-      var selection = _toConsumableArray(selectedRows);
-
-      if (selectedRows.includes(id)) {
-        var index = selectedRows.indexOf(id);
-        if (index !== -1) selection.splice(index, 1);
-        setSelectedRows(selection);
-      } else {
-        selection.push(id);
-        setSelectedRows(selection);
-      }
+    if (onSort) {
+      onSort(sortByKeyValue, sortDescending);
     }
-  };
-
-  var toggleAll = function toggleAll() {
-    if (onSelectFunction) {
-      if (selectedRows.length === 0) {
-        var newArray = [];
-
-        for (var _i2 = 0; _i2 < data.length; _i2++) {
-          newArray.push(data[_i2].id);
-        }
-
-        setSelectedRows(newArray);
-        onSelectFunction(selectedRows);
-      } else {
-        setSelectedRows([]);
-        onSelectFunction(selectedRows);
-      }
-    }
-  };
-
-  var sort = function sort(oldKey, newKey) {
-    if (onSortByKey) {
-      if (oldKey !== newKey) {
-        setSortByKeyValue(newKey);
-        setSortByDescending(false);
-      } else {
-        setSortByDescending(!sortByDescending);
-      }
-    }
-  };
-
-  var selectRow = function selectRow(id) {
-    onSelectRow && onSelectRow(id);
-  };
-
-  useEffect(function () {
-    if (onSortByKey) {
-      onSortByKey(sortByKeyValue, sortByDescending);
-    }
-  }, [sortByDescending, sortByKeyValue, onSortByKey]);
+  }, [sortDescending, onSort, sortByKeyValue]);
   return ___EmotionJSX("div", {
-    css: dynamicTableWrapperStyle({
-      stickyHeader: stickyHeader,
-      fixedHeight: fixedHeight,
-      columns: keys.length,
-      onSelectFunction: onSelectFunction,
-      onSortByKey: onSortByKey
+    css: tableWrapperStyles({
+      height: height
     })
   }, ___EmotionJSX("table", {
-    className: className
-  }, hasHeader && ___EmotionJSX("thead", null, ___EmotionJSX("tr", null, itemsAreSelectable && ___EmotionJSX("th", {
-    className: "checkboxColumn"
-  }, ___EmotionJSX(Checkbox, {
-    indeterminate: true,
-    size: "small",
-    name: "all",
-    checked: selectedRows.length > 0,
-    onChange: function onChange() {
-      toggleAll();
-    }
-  })), keys.map(function (key, i) {
-    return ___EmotionJSX("th", {
-      css: thStyle({
-        onSelectFunction: !!onSelectFunction,
-        columns: keys.length,
-        align: key.rightAlign ? 'right' : 'left',
-        customColumnWidth: key.customColumnWidth
-      }),
-      onClick: function onClick() {
-        return sort(sortByKeyValue, key.key);
-      },
-      key: i,
-      align: key.rightAlign ? 'right' : 'left'
-    }, onSortByKey && key.rightAlign && ___EmotionJSX(ChevronDown, {
-      css: downStyle({
-        showArrow: sortByKeyValue === key.key,
-        descending: sortByDescending
-      })
-    }), key.displayName, onSortByKey && !key.rightAlign && ___EmotionJSX(ChevronDown, {
-      css: downStyle({
-        showArrow: sortByKeyValue === key.key,
-        descending: sortByDescending
-      })
-    }));
-  }))), ___EmotionJSX("tbody", null, data.map(function (row, i) {
-    return ___EmotionJSX("tr", {
-      className: "dynamicTableRow-".concat(i),
-      css: rowStyle({
-        hoverColor: !!onSelectRow
-      }),
-      key: i
-    }, itemsAreSelectable && ___EmotionJSX("td", {
-      className: "checkboxColumn"
-    }, ___EmotionJSX(Checkbox, {
-      size: "small",
-      name: row.id,
-      checked: selectedRows.includes(row.id),
-      onChange: function onChange() {
-        updateSelectedRows(row.id);
-      }
-    })), keys.map(function (cell, index) {
-      var cellElement = row[cell.key];
-      return ___EmotionJSX("td", {
-        className: "dynamicTableColumn-".concat(cell.key),
-        onClick: function onClick() {
-          return onSelectRow && row.id ? selectRow(row.id) : null;
-        },
-        css: cellStyle({
-          onSelectFunction: !!onSelectFunction,
-          columns: keys.length,
-          bold: cell.bold,
-          customColumnWidth: cell.customColumnWidth,
-          color: !badgesScheme && colorScheme && colorScheme.colors && colorScheme.colors[cellElement] || null
-        }),
-        align: cell.rightAlign ? 'right' : 'left',
-        key: index
-      }, !(badgesScheme !== null && badgesScheme !== void 0 && badgesScheme.intentMapping[cellElement]) && ___EmotionJSX("span", null, cellElement || '-'), (badgesScheme === null || badgesScheme === void 0 ? void 0 : badgesScheme.intentMapping[cellElement]) && ___EmotionJSX(Badge, {
-        intent: badgesScheme.intentMapping[cellElement]
-      }, cellElement || '-'));
-    }));
-  }))));
+    css: tableStyles,
+    "data-cy": !isLoading ? "dynamic-table-isLoaded" : ''
+  }, headerRow && ___EmotionJSX(TableHead, {
+    headerRow: headerRow,
+    onSelectRow: onSelectRow,
+    onSort: onSort,
+    rows: rows,
+    selectableRows: selectableRows,
+    selectedRows: selectedRows,
+    setSortDescending: setSortDescending,
+    setSortByKeyValue: setSortByKeyValue,
+    sortDescending: sortDescending,
+    sortByKeyValue: sortByKeyValue,
+    stickyHeader: stickyHeader
+  }), ___EmotionJSX(TableBody, {
+    activeRow: activeRow,
+    headerRow: headerRow,
+    onClickRow: onClickRow,
+    onSelectRow: onSelectRow,
+    rows: !isLoading ? rows : skeletonRows,
+    selectableRows: selectableRows,
+    selectedRows: selectedRows
+  })), isLoading && ___EmotionJSX("div", {
+    css: fadeStyles
+  }));
 };
 
-export default DynamicTable;
+export default /*#__PURE__*/React.memo(DynamicTable);

package/dynamic-table/DynamicTable.styles.d.ts

@@ -1,5 +1,6 @@
-export declare const dynamicTableWrapperStyle: (props: any) => import("@emotion/react").SerializedStyles;
-export declare const thStyle: (props: any) => import("@emotion/react").SerializedStyles;
-export declare const rowStyle: (props: any) => import("@emotion/react").SerializedStyles;
-export declare const cellStyle: (props: any) => import("@emotion/react").SerializedStyles;
-export declare const downStyle: (props: any) => import("@emotion/react").SerializedStyles;
+declare type TableWrapperProps = {
+    height?: string;
+};
+export declare const tableWrapperStyles: ({ height }: TableWrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const tableStyles: import("@emotion/react").SerializedStyles;
+export {};

package/dynamic-table/DynamicTable.styles.js

@@ -1,18 +1,7 @@
-import { css } from '@emotion/react';
 import { theme } from '@dfds-ui/theme';
-import { dividerBorder } from '@dfds-ui/react-components/divider';
-export var dynamicTableWrapperStyle = function dynamicTableWrapperStyle(props) {
-  return /*#__PURE__*/css("width:100%;overflow-x:auto;overflow-y:", props.fixedHeight && 'auto', ";height:", props.fixedHeight, ";table{font-size:12px;line-height:16px;background-color:", theme.colors.surface.primary, ";tr{height:48px;border-collapse:collapse;td,th{color:", theme.colors.primary.main, ";padding:0 5px;", dividerBorder(false, 'bottom'), ";}th{position:", props.stickyHeader && 'sticky', ";background-color:", props.stickyHeader && theme.colors.surface.primary, ";z-index:", props.stickyHeader && '10', ";top:-1px;transition-duration:500ms;&:hover{background-color:", props.onSortByKey && theme.colors.surface.secondary, ";cursor:", props.onSortByKey && 'pointer', ";}}.checkboxColumn{width:36px;min-width:unset;&:hover{background-color:unset;}}}}" + (process.env.NODE_ENV === "production" ? "" : ";label:dynamicTableWrapperStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0R5bmFtaWNUYWJsZS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUkyRCIsImZpbGUiOiIuLi8uLi9zcmMvZHluYW1pYy10YWJsZS9EeW5hbWljVGFibGUuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGRpdmlkZXJCb3JkZXIgfSBmcm9tICdAZGZkcy11aS9yZWFjdC1jb21wb25lbnRzL2RpdmlkZXInXG5cbmV4cG9ydCBjb25zdCBkeW5hbWljVGFibGVXcmFwcGVyU3R5bGUgPSAocHJvcHM6IGFueSkgPT4gY3NzYFxuICB3aWR0aDogMTAwJTtcbiAgb3ZlcmZsb3cteDogYXV0bztcbiAgb3ZlcmZsb3cteTogJHtwcm9wcy5maXhlZEhlaWdodCAmJiAnYXV0byd9O1xuICBoZWlnaHQ6ICR7cHJvcHMuZml4ZWRIZWlnaHR9O1xuICB0YWJsZSB7XG4gICAgZm9udC1zaXplOiAxMnB4O1xuICAgIGxpbmUtaGVpZ2h0OiAxNnB4O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLnN1cmZhY2UucHJpbWFyeX07XG4gICAgdHIge1xuICAgICAgaGVpZ2h0OiA0OHB4O1xuICAgICAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTtcblxuICAgICAgdGQsXG4gICAgICB0aCB7XG4gICAgICAgIGNvbG9yOiAke3RoZW1lLmNvbG9ycy5wcmltYXJ5Lm1haW59O1xuICAgICAgICBwYWRkaW5nOiAwIDVweDtcbiAgICAgICAgJHtkaXZpZGVyQm9yZGVyKGZhbHNlLCAnYm90dG9tJyl9O1xuICAgICAgfVxuXG4gICAgICB0aCB7XG4gICAgICAgIHBvc2l0aW9uOiAke3Byb3BzLnN0aWNreUhlYWRlciAmJiAnc3RpY2t5J307XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMuc3RpY2t5SGVhZGVyICYmIHRoZW1lLmNvbG9ycy5zdXJmYWNlLnByaW1hcnl9O1xuICAgICAgICB6LWluZGV4OiAke3Byb3BzLnN0aWNreUhlYWRlciAmJiAnMTAnfTtcbiAgICAgICAgdG9wOiAtMXB4O1xuICAgICAgICB0cmFuc2l0aW9uLWR1cmF0aW9uOiA1MDBtcztcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5vblNvcnRCeUtleSAmJiB0aGVtZS5jb2xvcnMuc3VyZmFjZS5zZWNvbmRhcnl9O1xuICAgICAgICAgIGN1cnNvcjogJHtwcm9wcy5vblNvcnRCeUtleSAmJiAncG9pbnRlcid9O1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIC5jaGVja2JveENvbHVtbiB7XG4gICAgICAgIHdpZHRoOiAzNnB4O1xuICAgICAgICBtaW4td2lkdGg6IHVuc2V0O1xuICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB1bnNldDtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgdGhTdHlsZSA9IChwcm9wczogYW55KSA9PiBjc3NgXG4gIHRleHQtYWxpZ246ICR7cHJvcHMuYWxpZ259O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAke3Byb3BzLmN1c3RvbUNvbHVtbldpZHRoIHx8IGBjYWxjKCgxMDAlICR7cHJvcHMub25TZWxlY3RGdW5jdGlvbiAmJiAnLTM2cHgnfSkgLyAke3Byb3BzLmNvbHVtbnN9KWB9O1xuICBtaW4td2lkdGg6ICR7cHJvcHMuY3VzdG9tQ29sdW1uV2lkdGggfHwgJ2F1dG8nfTtcbiAgc3ZnIHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiBjYWxjKDUwJSAtIDEwcHgpO1xuICAgIGxlZnQ6ICR7cHJvcHMuYWxpZ24gPT09ICdyaWdodCcgJiYgJzVweCd9O1xuICAgIHJpZ2h0OiAke3Byb3BzLmFsaWduID09PSAnbGVmdCcgJiYgJzVweCd9O1xuICB9XG4gICY6aG92ZXIge1xuICAgIHN2ZyB7XG4gICAgICBjb2xvcjogJHt0aGVtZS5jb2xvcnMucHJpbWFyeS5kYXJrfTtcbiAgICB9XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IHJvd1N0eWxlID0gKHByb3BzOiBhbnkpID0+IGNzc2BcbiAgdHJhbnNpdGlvbi1kdXJhdGlvbjogMTAwbXM7XG4gICY6aG92ZXIge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMuaG92ZXJDb2xvciAmJiB0aGVtZS5jb2xvcnMuc3VyZmFjZS5zZWNvbmRhcnl9O1xuICAgIGN1cnNvcjogJHtwcm9wcy5ob3ZlckNvbG9yICYmICdwb2ludGVyJ307XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IGNlbGxTdHlsZSA9IChwcm9wczogYW55KSA9PiBjc3NgXG4gIGZvbnQtd2VpZ2h0OiAke3Byb3BzLmJvbGQgPyAnYm9sZCcgOiAnJ307XG4gIHdpZHRoOiAke3Byb3BzLmN1c3RvbUNvbHVtbldpZHRoIHx8IGBjYWxjKCgxMDAlICR7cHJvcHMub25TZWxlY3RGdW5jdGlvbiAmJiAnLTM2cHgnfSkgLyAke3Byb3BzLmNvbHVtbnN9KWB9O1xuICBtaW4td2lkdGg6ICR7cHJvcHMuY3VzdG9tQ29sdW1uV2lkdGggfHwgJ2F1dG8nfTtcbiAgJHtwcm9wcy5jb2xvciAmJlxuICBgc3BhbiB7XG4gICAgICBjb2xvcjogJHtwcm9wcy5jb2xvci50Y307XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzLmNvbG9yLmJnIHx8ICdub25lJ307XG4gICAgICBtYXJnaW46IDVweCAwO1xuICAgICAgcGFkZGluZzogMnB4IDhweDtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDEwcHg7XG4gICAgfWB9O1xuYFxuXG5leHBvcnQgY29uc3QgZG93blN0eWxlID0gKHByb3BzOiBhbnkpID0+IGNzc2BcbiAgY29sb3I6ICR7cHJvcHMuc2hvd0Fycm93ID8gdGhlbWUuY29sb3JzLnByaW1hcnkuZGFyayA6ICd0cmFuc3BhcmVudCd9O1xuICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAyNTBtcztcbiAgdHJhbnNmb3JtOiAkeyFwcm9wcy5kZXNjZW5kaW5nICYmICdyb3RhdGUoMTgwZGVnKSd9O1xuICBmb250LXNpemU6IDIwcHg7XG5gXG4iXX0= */");
-};
-export var thStyle = function thStyle(props) {
-  return /*#__PURE__*/css("text-align:", props.align, ";position:relative;width:", props.customColumnWidth || "calc((100% ".concat(props.onSelectFunction && '-36px', ") / ").concat(props.columns, ")"), ";min-width:", props.customColumnWidth || 'auto', ";svg{position:absolute;top:calc(50% - 10px);left:", props.align === 'right' && '5px', ";right:", props.align === 'left' && '5px', ";}&:hover{svg{color:", theme.colors.primary.dark, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:thStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0R5bmFtaWNUYWJsZS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStDMEMiLCJmaWxlIjoiLi4vLi4vc3JjL2R5bmFtaWMtdGFibGUvRHluYW1pY1RhYmxlLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyBkaXZpZGVyQm9yZGVyIH0gZnJvbSAnQGRmZHMtdWkvcmVhY3QtY29tcG9uZW50cy9kaXZpZGVyJ1xuXG5leHBvcnQgY29uc3QgZHluYW1pY1RhYmxlV3JhcHBlclN0eWxlID0gKHByb3BzOiBhbnkpID0+IGNzc2BcbiAgd2lkdGg6IDEwMCU7XG4gIG92ZXJmbG93LXg6IGF1dG87XG4gIG92ZXJmbG93LXk6ICR7cHJvcHMuZml4ZWRIZWlnaHQgJiYgJ2F1dG8nfTtcbiAgaGVpZ2h0OiAke3Byb3BzLmZpeGVkSGVpZ2h0fTtcbiAgdGFibGUge1xuICAgIGZvbnQtc2l6ZTogMTJweDtcbiAgICBsaW5lLWhlaWdodDogMTZweDtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnByaW1hcnl9O1xuICAgIHRyIHtcbiAgICAgIGhlaWdodDogNDhweDtcbiAgICAgIGJvcmRlci1jb2xsYXBzZTogY29sbGFwc2U7XG5cbiAgICAgIHRkLFxuICAgICAgdGgge1xuICAgICAgICBjb2xvcjogJHt0aGVtZS5jb2xvcnMucHJpbWFyeS5tYWlufTtcbiAgICAgICAgcGFkZGluZzogMCA1cHg7XG4gICAgICAgICR7ZGl2aWRlckJvcmRlcihmYWxzZSwgJ2JvdHRvbScpfTtcbiAgICAgIH1cblxuICAgICAgdGgge1xuICAgICAgICBwb3NpdGlvbjogJHtwcm9wcy5zdGlja3lIZWFkZXIgJiYgJ3N0aWNreSd9O1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzLnN0aWNreUhlYWRlciAmJiB0aGVtZS5jb2xvcnMuc3VyZmFjZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogJHtwcm9wcy5zdGlja3lIZWFkZXIgJiYgJzEwJ307XG4gICAgICAgIHRvcDogLTFweDtcbiAgICAgICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogNTAwbXM7XG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMub25Tb3J0QnlLZXkgJiYgdGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5fTtcbiAgICAgICAgICBjdXJzb3I6ICR7cHJvcHMub25Tb3J0QnlLZXkgJiYgJ3BvaW50ZXInfTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAuY2hlY2tib3hDb2x1bW4ge1xuICAgICAgICB3aWR0aDogMzZweDtcbiAgICAgICAgbWluLXdpZHRoOiB1bnNldDtcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdW5zZXQ7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IHRoU3R5bGUgPSAocHJvcHM6IGFueSkgPT4gY3NzYFxuICB0ZXh0LWFsaWduOiAke3Byb3BzLmFsaWdufTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogJHtwcm9wcy5jdXN0b21Db2x1bW5XaWR0aCB8fCBgY2FsYygoMTAwJSAke3Byb3BzLm9uU2VsZWN0RnVuY3Rpb24gJiYgJy0zNnB4J30pIC8gJHtwcm9wcy5jb2x1bW5zfSlgfTtcbiAgbWluLXdpZHRoOiAke3Byb3BzLmN1c3RvbUNvbHVtbldpZHRoIHx8ICdhdXRvJ307XG4gIHN2ZyB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogY2FsYyg1MCUgLSAxMHB4KTtcbiAgICBsZWZ0OiAke3Byb3BzLmFsaWduID09PSAncmlnaHQnICYmICc1cHgnfTtcbiAgICByaWdodDogJHtwcm9wcy5hbGlnbiA9PT0gJ2xlZnQnICYmICc1cHgnfTtcbiAgfVxuICAmOmhvdmVyIHtcbiAgICBzdmcge1xuICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnByaW1hcnkuZGFya307XG4gICAgfVxuICB9XG5gXG5cbmV4cG9ydCBjb25zdCByb3dTdHlsZSA9IChwcm9wczogYW55KSA9PiBjc3NgXG4gIHRyYW5zaXRpb24tZHVyYXRpb246IDEwMG1zO1xuICAmOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzLmhvdmVyQ29sb3IgJiYgdGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5fTtcbiAgICBjdXJzb3I6ICR7cHJvcHMuaG92ZXJDb2xvciAmJiAncG9pbnRlcid9O1xuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBjZWxsU3R5bGUgPSAocHJvcHM6IGFueSkgPT4gY3NzYFxuICBmb250LXdlaWdodDogJHtwcm9wcy5ib2xkID8gJ2JvbGQnIDogJyd9O1xuICB3aWR0aDogJHtwcm9wcy5jdXN0b21Db2x1bW5XaWR0aCB8fCBgY2FsYygoMTAwJSAke3Byb3BzLm9uU2VsZWN0RnVuY3Rpb24gJiYgJy0zNnB4J30pIC8gJHtwcm9wcy5jb2x1bW5zfSlgfTtcbiAgbWluLXdpZHRoOiAke3Byb3BzLmN1c3RvbUNvbHVtbldpZHRoIHx8ICdhdXRvJ307XG4gICR7cHJvcHMuY29sb3IgJiZcbiAgYHNwYW4ge1xuICAgICAgY29sb3I6ICR7cHJvcHMuY29sb3IudGN9O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5jb2xvci5iZyB8fCAnbm9uZSd9O1xuICAgICAgbWFyZ2luOiA1cHggMDtcbiAgICAgIHBhZGRpbmc6IDJweCA4cHg7XG4gICAgICBib3JkZXItcmFkaXVzOiAxMHB4O1xuICAgIH1gfTtcbmBcblxuZXhwb3J0IGNvbnN0IGRvd25TdHlsZSA9IChwcm9wczogYW55KSA9PiBjc3NgXG4gIGNvbG9yOiAke3Byb3BzLnNob3dBcnJvdyA/IHRoZW1lLmNvbG9ycy5wcmltYXJ5LmRhcmsgOiAndHJhbnNwYXJlbnQnfTtcbiAgdHJhbnNpdGlvbi1kdXJhdGlvbjogMjUwbXM7XG4gIHRyYW5zZm9ybTogJHshcHJvcHMuZGVzY2VuZGluZyAmJiAncm90YXRlKDE4MGRlZyknfTtcbiAgZm9udC1zaXplOiAyMHB4O1xuYFxuIl19 */");
-};
-export var rowStyle = function rowStyle(props) {
-  return /*#__PURE__*/css("transition-duration:100ms;&:hover{background-color:", props.hoverColor && theme.colors.surface.secondary, ";cursor:", props.hoverColor && 'pointer', ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:rowStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0R5bmFtaWNUYWJsZS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlFMkMiLCJmaWxlIjoiLi4vLi4vc3JjL2R5bmFtaWMtdGFibGUvRHluYW1pY1RhYmxlLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyBkaXZpZGVyQm9yZGVyIH0gZnJvbSAnQGRmZHMtdWkvcmVhY3QtY29tcG9uZW50cy9kaXZpZGVyJ1xuXG5leHBvcnQgY29uc3QgZHluYW1pY1RhYmxlV3JhcHBlclN0eWxlID0gKHByb3BzOiBhbnkpID0+IGNzc2BcbiAgd2lkdGg6IDEwMCU7XG4gIG92ZXJmbG93LXg6IGF1dG87XG4gIG92ZXJmbG93LXk6ICR7cHJvcHMuZml4ZWRIZWlnaHQgJiYgJ2F1dG8nfTtcbiAgaGVpZ2h0OiAke3Byb3BzLmZpeGVkSGVpZ2h0fTtcbiAgdGFibGUge1xuICAgIGZvbnQtc2l6ZTogMTJweDtcbiAgICBsaW5lLWhlaWdodDogMTZweDtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnByaW1hcnl9O1xuICAgIHRyIHtcbiAgICAgIGhlaWdodDogNDhweDtcbiAgICAgIGJvcmRlci1jb2xsYXBzZTogY29sbGFwc2U7XG5cbiAgICAgIHRkLFxuICAgICAgdGgge1xuICAgICAgICBjb2xvcjogJHt0aGVtZS5jb2xvcnMucHJpbWFyeS5tYWlufTtcbiAgICAgICAgcGFkZGluZzogMCA1cHg7XG4gICAgICAgICR7ZGl2aWRlckJvcmRlcihmYWxzZSwgJ2JvdHRvbScpfTtcbiAgICAgIH1cblxuICAgICAgdGgge1xuICAgICAgICBwb3NpdGlvbjogJHtwcm9wcy5zdGlja3lIZWFkZXIgJiYgJ3N0aWNreSd9O1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzLnN0aWNreUhlYWRlciAmJiB0aGVtZS5jb2xvcnMuc3VyZmFjZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogJHtwcm9wcy5zdGlja3lIZWFkZXIgJiYgJzEwJ307XG4gICAgICAgIHRvcDogLTFweDtcbiAgICAgICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogNTAwbXM7XG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMub25Tb3J0QnlLZXkgJiYgdGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5fTtcbiAgICAgICAgICBjdXJzb3I6ICR7cHJvcHMub25Tb3J0QnlLZXkgJiYgJ3BvaW50ZXInfTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAuY2hlY2tib3hDb2x1bW4ge1xuICAgICAgICB3aWR0aDogMzZweDtcbiAgICAgICAgbWluLXdpZHRoOiB1bnNldDtcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdW5zZXQ7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IHRoU3R5bGUgPSAocHJvcHM6IGFueSkgPT4gY3NzYFxuICB0ZXh0LWFsaWduOiAke3Byb3BzLmFsaWdufTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogJHtwcm9wcy5jdXN0b21Db2x1bW5XaWR0aCB8fCBgY2FsYygoMTAwJSAke3Byb3BzLm9uU2VsZWN0RnVuY3Rpb24gJiYgJy0zNnB4J30pIC8gJHtwcm9wcy5jb2x1bW5zfSlgfTtcbiAgbWluLXdpZHRoOiAke3Byb3BzLmN1c3RvbUNvbHVtbldpZHRoIHx8ICdhdXRvJ307XG4gIHN2ZyB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogY2FsYyg1MCUgLSAxMHB4KTtcbiAgICBsZWZ0OiAke3Byb3BzLmFsaWduID09PSAncmlnaHQnICYmICc1cHgnfTtcbiAgICByaWdodDogJHtwcm9wcy5hbGlnbiA9PT0gJ2xlZnQnICYmICc1cHgnfTtcbiAgfVxuICAmOmhvdmVyIHtcbiAgICBzdmcge1xuICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnByaW1hcnkuZGFya307XG4gICAgfVxuICB9XG5gXG5cbmV4cG9ydCBjb25zdCByb3dTdHlsZSA9IChwcm9wczogYW55KSA9PiBjc3NgXG4gIHRyYW5zaXRpb24tZHVyYXRpb246IDEwMG1zO1xuICAmOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzLmhvdmVyQ29sb3IgJiYgdGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5fTtcbiAgICBjdXJzb3I6ICR7cHJvcHMuaG92ZXJDb2xvciAmJiAncG9pbnRlcid9O1xuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBjZWxsU3R5bGUgPSAocHJvcHM6IGFueSkgPT4gY3NzYFxuICBmb250LXdlaWdodDogJHtwcm9wcy5ib2xkID8gJ2JvbGQnIDogJyd9O1xuICB3aWR0aDogJHtwcm9wcy5jdXN0b21Db2x1bW5XaWR0aCB8fCBgY2FsYygoMTAwJSAke3Byb3BzLm9uU2VsZWN0RnVuY3Rpb24gJiYgJy0zNnB4J30pIC8gJHtwcm9wcy5jb2x1bW5zfSlgfTtcbiAgbWluLXdpZHRoOiAke3Byb3BzLmN1c3RvbUNvbHVtbldpZHRoIHx8ICdhdXRvJ307XG4gICR7cHJvcHMuY29sb3IgJiZcbiAgYHNwYW4ge1xuICAgICAgY29sb3I6ICR7cHJvcHMuY29sb3IudGN9O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5jb2xvci5iZyB8fCAnbm9uZSd9O1xuICAgICAgbWFyZ2luOiA1cHggMDtcbiAgICAgIHBhZGRpbmc6IDJweCA4cHg7XG4gICAgICBib3JkZXItcmFkaXVzOiAxMHB4O1xuICAgIH1gfTtcbmBcblxuZXhwb3J0IGNvbnN0IGRvd25TdHlsZSA9IChwcm9wczogYW55KSA9PiBjc3NgXG4gIGNvbG9yOiAke3Byb3BzLnNob3dBcnJvdyA/IHRoZW1lLmNvbG9ycy5wcmltYXJ5LmRhcmsgOiAndHJhbnNwYXJlbnQnfTtcbiAgdHJhbnNpdGlvbi1kdXJhdGlvbjogMjUwbXM7XG4gIHRyYW5zZm9ybTogJHshcHJvcHMuZGVzY2VuZGluZyAmJiAncm90YXRlKDE4MGRlZyknfTtcbiAgZm9udC1zaXplOiAyMHB4O1xuYFxuIl19 */");
-};
-export var cellStyle = function cellStyle(props) {
-  return /*#__PURE__*/css("font-weight:", props.bold ? 'bold' : '', ";width:", props.customColumnWidth || "calc((100% ".concat(props.onSelectFunction && '-36px', ") / ").concat(props.columns, ")"), ";min-width:", props.customColumnWidth || 'auto', ";", props.color && "span {\n      color: ".concat(props.color.tc, ";\n      background-color: ").concat(props.color.bg || 'none', ";\n      margin: 5px 0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }"), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:cellStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0R5bmFtaWNUYWJsZS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlFNEMiLCJmaWxlIjoiLi4vLi4vc3JjL2R5bmFtaWMtdGFibGUvRHluYW1pY1RhYmxlLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyBkaXZpZGVyQm9yZGVyIH0gZnJvbSAnQGRmZHMtdWkvcmVhY3QtY29tcG9uZW50cy9kaXZpZGVyJ1xuXG5leHBvcnQgY29uc3QgZHluYW1pY1RhYmxlV3JhcHBlclN0eWxlID0gKHByb3BzOiBhbnkpID0+IGNzc2BcbiAgd2lkdGg6IDEwMCU7XG4gIG92ZXJmbG93LXg6IGF1dG87XG4gIG92ZXJmbG93LXk6ICR7cHJvcHMuZml4ZWRIZWlnaHQgJiYgJ2F1dG8nfTtcbiAgaGVpZ2h0OiAke3Byb3BzLmZpeGVkSGVpZ2h0fTtcbiAgdGFibGUge1xuICAgIGZvbnQtc2l6ZTogMTJweDtcbiAgICBsaW5lLWhlaWdodDogMTZweDtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnByaW1hcnl9O1xuICAgIHRyIHtcbiAgICAgIGhlaWdodDogNDhweDtcbiAgICAgIGJvcmRlci1jb2xsYXBzZTogY29sbGFwc2U7XG5cbiAgICAgIHRkLFxuICAgICAgdGgge1xuICAgICAgICBjb2xvcjogJHt0aGVtZS5jb2xvcnMucHJpbWFyeS5tYWlufTtcbiAgICAgICAgcGFkZGluZzogMCA1cHg7XG4gICAgICAgICR7ZGl2aWRlckJvcmRlcihmYWxzZSwgJ2JvdHRvbScpfTtcbiAgICAgIH1cblxuICAgICAgdGgge1xuICAgICAgICBwb3NpdGlvbjogJHtwcm9wcy5zdGlja3lIZWFkZXIgJiYgJ3N0aWNreSd9O1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzLnN0aWNreUhlYWRlciAmJiB0aGVtZS5jb2xvcnMuc3VyZmFjZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogJHtwcm9wcy5zdGlja3lIZWFkZXIgJiYgJzEwJ307XG4gICAgICAgIHRvcDogLTFweDtcbiAgICAgICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogNTAwbXM7XG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMub25Tb3J0QnlLZXkgJiYgdGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5fTtcbiAgICAgICAgICBjdXJzb3I6ICR7cHJvcHMub25Tb3J0QnlLZXkgJiYgJ3BvaW50ZXInfTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAuY2hlY2tib3hDb2x1bW4ge1xuICAgICAgICB3aWR0aDogMzZweDtcbiAgICAgICAgbWluLXdpZHRoOiB1bnNldDtcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdW5zZXQ7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IHRoU3R5bGUgPSAocHJvcHM6IGFueSkgPT4gY3NzYFxuICB0ZXh0LWFsaWduOiAke3Byb3BzLmFsaWdufTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogJHtwcm9wcy5jdXN0b21Db2x1bW5XaWR0aCB8fCBgY2FsYygoMTAwJSAke3Byb3BzLm9uU2VsZWN0RnVuY3Rpb24gJiYgJy0zNnB4J30pIC8gJHtwcm9wcy5jb2x1bW5zfSlgfTtcbiAgbWluLXdpZHRoOiAke3Byb3BzLmN1c3RvbUNvbHVtbldpZHRoIHx8ICdhdXRvJ307XG4gIHN2ZyB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogY2FsYyg1MCUgLSAxMHB4KTtcbiAgICBsZWZ0OiAke3Byb3BzLmFsaWduID09PSAncmlnaHQnICYmICc1cHgnfTtcbiAgICByaWdodDogJHtwcm9wcy5hbGlnbiA9PT0gJ2xlZnQnICYmICc1cHgnfTtcbiAgfVxuICAmOmhvdmVyIHtcbiAgICBzdmcge1xuICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnByaW1hcnkuZGFya307XG4gICAgfVxuICB9XG5gXG5cbmV4cG9ydCBjb25zdCByb3dTdHlsZSA9IChwcm9wczogYW55KSA9PiBjc3NgXG4gIHRyYW5zaXRpb24tZHVyYXRpb246IDEwMG1zO1xuICAmOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzLmhvdmVyQ29sb3IgJiYgdGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5fTtcbiAgICBjdXJzb3I6ICR7cHJvcHMuaG92ZXJDb2xvciAmJiAncG9pbnRlcid9O1xuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBjZWxsU3R5bGUgPSAocHJvcHM6IGFueSkgPT4gY3NzYFxuICBmb250LXdlaWdodDogJHtwcm9wcy5ib2xkID8gJ2JvbGQnIDogJyd9O1xuICB3aWR0aDogJHtwcm9wcy5jdXN0b21Db2x1bW5XaWR0aCB8fCBgY2FsYygoMTAwJSAke3Byb3BzLm9uU2VsZWN0RnVuY3Rpb24gJiYgJy0zNnB4J30pIC8gJHtwcm9wcy5jb2x1bW5zfSlgfTtcbiAgbWluLXdpZHRoOiAke3Byb3BzLmN1c3RvbUNvbHVtbldpZHRoIHx8ICdhdXRvJ307XG4gICR7cHJvcHMuY29sb3IgJiZcbiAgYHNwYW4ge1xuICAgICAgY29sb3I6ICR7cHJvcHMuY29sb3IudGN9O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5jb2xvci5iZyB8fCAnbm9uZSd9O1xuICAgICAgbWFyZ2luOiA1cHggMDtcbiAgICAgIHBhZGRpbmc6IDJweCA4cHg7XG4gICAgICBib3JkZXItcmFkaXVzOiAxMHB4O1xuICAgIH1gfTtcbmBcblxuZXhwb3J0IGNvbnN0IGRvd25TdHlsZSA9IChwcm9wczogYW55KSA9PiBjc3NgXG4gIGNvbG9yOiAke3Byb3BzLnNob3dBcnJvdyA/IHRoZW1lLmNvbG9ycy5wcmltYXJ5LmRhcmsgOiAndHJhbnNwYXJlbnQnfTtcbiAgdHJhbnNpdGlvbi1kdXJhdGlvbjogMjUwbXM7XG4gIHRyYW5zZm9ybTogJHshcHJvcHMuZGVzY2VuZGluZyAmJiAncm90YXRlKDE4MGRlZyknfTtcbiAgZm9udC1zaXplOiAyMHB4O1xuYFxuIl19 */");
+import { css } from '@emotion/react';
+export var tableWrapperStyles = function tableWrapperStyles(_ref) {
+  var height = _ref.height;
+  return /*#__PURE__*/css("color:", theme.colors.text.primary, ";display:flex;flex-direction:column;overflow-x:auto;width:100%;", height && "\n    height: ".concat(height, ";\n    overflow-y: auto;\n  "), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:tableWrapperStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0R5bmFtaWNUYWJsZS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU93RSIsImZpbGUiOiIuLi8uLi9zcmMvZHluYW1pYy10YWJsZS9EeW5hbWljVGFibGUuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxudHlwZSBUYWJsZVdyYXBwZXJQcm9wcyA9IHtcbiAgaGVpZ2h0Pzogc3RyaW5nXG59XG5cbmV4cG9ydCBjb25zdCB0YWJsZVdyYXBwZXJTdHlsZXMgPSAoeyBoZWlnaHQgfTogVGFibGVXcmFwcGVyUHJvcHMpID0+IGNzc2BcbiAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnRleHQucHJpbWFyeX07XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIG92ZXJmbG93LXg6IGF1dG87XG4gIHdpZHRoOiAxMDAlO1xuXG4gICR7aGVpZ2h0ICYmXG4gIGBcbiAgICBoZWlnaHQ6ICR7aGVpZ2h0fTtcbiAgICBvdmVyZmxvdy15OiBhdXRvO1xuICBgfTtcbmBcblxuZXhwb3J0IGNvbnN0IHRhYmxlU3R5bGVzID0gY3NzYFxuICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnByaW1hcnl9O1xuICBmb250LWZhbWlseTogVmVyZGFuYSwgc2Fucy1zZXJpZjtcbiAgZm9udC1zaXplOiAxMnB4O1xuICBsaW5lLWhlaWdodDogMTZweDtcbiAgd2lkdGg6IDEwMCU7XG5gXG4iXX0= */");
 };
-export var downStyle = function downStyle(props) {
-  return /*#__PURE__*/css("color:", props.showArrow ? theme.colors.primary.dark : 'transparent', ";transition-duration:250ms;transform:", !props.descending && 'rotate(180deg)', ";font-size:20px;" + (process.env.NODE_ENV === "production" ? "" : ";label:downStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0R5bmFtaWNUYWJsZS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVGNEMiLCJmaWxlIjoiLi4vLi4vc3JjL2R5bmFtaWMtdGFibGUvRHluYW1pY1RhYmxlLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyBkaXZpZGVyQm9yZGVyIH0gZnJvbSAnQGRmZHMtdWkvcmVhY3QtY29tcG9uZW50cy9kaXZpZGVyJ1xuXG5leHBvcnQgY29uc3QgZHluYW1pY1RhYmxlV3JhcHBlclN0eWxlID0gKHByb3BzOiBhbnkpID0+IGNzc2BcbiAgd2lkdGg6IDEwMCU7XG4gIG92ZXJmbG93LXg6IGF1dG87XG4gIG92ZXJmbG93LXk6ICR7cHJvcHMuZml4ZWRIZWlnaHQgJiYgJ2F1dG8nfTtcbiAgaGVpZ2h0OiAke3Byb3BzLmZpeGVkSGVpZ2h0fTtcbiAgdGFibGUge1xuICAgIGZvbnQtc2l6ZTogMTJweDtcbiAgICBsaW5lLWhlaWdodDogMTZweDtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnByaW1hcnl9O1xuICAgIHRyIHtcbiAgICAgIGhlaWdodDogNDhweDtcbiAgICAgIGJvcmRlci1jb2xsYXBzZTogY29sbGFwc2U7XG5cbiAgICAgIHRkLFxuICAgICAgdGgge1xuICAgICAgICBjb2xvcjogJHt0aGVtZS5jb2xvcnMucHJpbWFyeS5tYWlufTtcbiAgICAgICAgcGFkZGluZzogMCA1cHg7XG4gICAgICAgICR7ZGl2aWRlckJvcmRlcihmYWxzZSwgJ2JvdHRvbScpfTtcbiAgICAgIH1cblxuICAgICAgdGgge1xuICAgICAgICBwb3NpdGlvbjogJHtwcm9wcy5zdGlja3lIZWFkZXIgJiYgJ3N0aWNreSd9O1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzLnN0aWNreUhlYWRlciAmJiB0aGVtZS5jb2xvcnMuc3VyZmFjZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogJHtwcm9wcy5zdGlja3lIZWFkZXIgJiYgJzEwJ307XG4gICAgICAgIHRvcDogLTFweDtcbiAgICAgICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogNTAwbXM7XG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMub25Tb3J0QnlLZXkgJiYgdGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5fTtcbiAgICAgICAgICBjdXJzb3I6ICR7cHJvcHMub25Tb3J0QnlLZXkgJiYgJ3BvaW50ZXInfTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAuY2hlY2tib3hDb2x1bW4ge1xuICAgICAgICB3aWR0aDogMzZweDtcbiAgICAgICAgbWluLXdpZHRoOiB1bnNldDtcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdW5zZXQ7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IHRoU3R5bGUgPSAocHJvcHM6IGFueSkgPT4gY3NzYFxuICB0ZXh0LWFsaWduOiAke3Byb3BzLmFsaWdufTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogJHtwcm9wcy5jdXN0b21Db2x1bW5XaWR0aCB8fCBgY2FsYygoMTAwJSAke3Byb3BzLm9uU2VsZWN0RnVuY3Rpb24gJiYgJy0zNnB4J30pIC8gJHtwcm9wcy5jb2x1bW5zfSlgfTtcbiAgbWluLXdpZHRoOiAke3Byb3BzLmN1c3RvbUNvbHVtbldpZHRoIHx8ICdhdXRvJ307XG4gIHN2ZyB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogY2FsYyg1MCUgLSAxMHB4KTtcbiAgICBsZWZ0OiAke3Byb3BzLmFsaWduID09PSAncmlnaHQnICYmICc1cHgnfTtcbiAgICByaWdodDogJHtwcm9wcy5hbGlnbiA9PT0gJ2xlZnQnICYmICc1cHgnfTtcbiAgfVxuICAmOmhvdmVyIHtcbiAgICBzdmcge1xuICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnByaW1hcnkuZGFya307XG4gICAgfVxuICB9XG5gXG5cbmV4cG9ydCBjb25zdCByb3dTdHlsZSA9IChwcm9wczogYW55KSA9PiBjc3NgXG4gIHRyYW5zaXRpb24tZHVyYXRpb246IDEwMG1zO1xuICAmOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzLmhvdmVyQ29sb3IgJiYgdGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5fTtcbiAgICBjdXJzb3I6ICR7cHJvcHMuaG92ZXJDb2xvciAmJiAncG9pbnRlcid9O1xuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBjZWxsU3R5bGUgPSAocHJvcHM6IGFueSkgPT4gY3NzYFxuICBmb250LXdlaWdodDogJHtwcm9wcy5ib2xkID8gJ2JvbGQnIDogJyd9O1xuICB3aWR0aDogJHtwcm9wcy5jdXN0b21Db2x1bW5XaWR0aCB8fCBgY2FsYygoMTAwJSAke3Byb3BzLm9uU2VsZWN0RnVuY3Rpb24gJiYgJy0zNnB4J30pIC8gJHtwcm9wcy5jb2x1bW5zfSlgfTtcbiAgbWluLXdpZHRoOiAke3Byb3BzLmN1c3RvbUNvbHVtbldpZHRoIHx8ICdhdXRvJ307XG4gICR7cHJvcHMuY29sb3IgJiZcbiAgYHNwYW4ge1xuICAgICAgY29sb3I6ICR7cHJvcHMuY29sb3IudGN9O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5jb2xvci5iZyB8fCAnbm9uZSd9O1xuICAgICAgbWFyZ2luOiA1cHggMDtcbiAgICAgIHBhZGRpbmc6IDJweCA4cHg7XG4gICAgICBib3JkZXItcmFkaXVzOiAxMHB4O1xuICAgIH1gfTtcbmBcblxuZXhwb3J0IGNvbnN0IGRvd25TdHlsZSA9IChwcm9wczogYW55KSA9PiBjc3NgXG4gIGNvbG9yOiAke3Byb3BzLnNob3dBcnJvdyA/IHRoZW1lLmNvbG9ycy5wcmltYXJ5LmRhcmsgOiAndHJhbnNwYXJlbnQnfTtcbiAgdHJhbnNpdGlvbi1kdXJhdGlvbjogMjUwbXM7XG4gIHRyYW5zZm9ybTogJHshcHJvcHMuZGVzY2VuZGluZyAmJiAncm90YXRlKDE4MGRlZyknfTtcbiAgZm9udC1zaXplOiAyMHB4O1xuYFxuIl19 */");
-};
+export var tableStyles = /*#__PURE__*/css("background-color:", theme.colors.surface.primary, ";font-family:Verdana,sans-serif;font-size:12px;line-height:16px;width:100%;" + (process.env.NODE_ENV === "production" ? "" : ";label:tableStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0R5bmFtaWNUYWJsZS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCOEIiLCJmaWxlIjoiLi4vLi4vc3JjL2R5bmFtaWMtdGFibGUvRHluYW1pY1RhYmxlLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbnR5cGUgVGFibGVXcmFwcGVyUHJvcHMgPSB7XG4gIGhlaWdodD86IHN0cmluZ1xufVxuXG5leHBvcnQgY29uc3QgdGFibGVXcmFwcGVyU3R5bGVzID0gKHsgaGVpZ2h0IH06IFRhYmxlV3JhcHBlclByb3BzKSA9PiBjc3NgXG4gIGNvbG9yOiAke3RoZW1lLmNvbG9ycy50ZXh0LnByaW1hcnl9O1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBvdmVyZmxvdy14OiBhdXRvO1xuICB3aWR0aDogMTAwJTtcblxuICAke2hlaWdodCAmJlxuICBgXG4gICAgaGVpZ2h0OiAke2hlaWdodH07XG4gICAgb3ZlcmZsb3cteTogYXV0bztcbiAgYH07XG5gXG5cbmV4cG9ydCBjb25zdCB0YWJsZVN0eWxlcyA9IGNzc2BcbiAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5jb2xvcnMuc3VyZmFjZS5wcmltYXJ5fTtcbiAgZm9udC1mYW1pbHk6IFZlcmRhbmEsIHNhbnMtc2VyaWY7XG4gIGZvbnQtc2l6ZTogMTJweDtcbiAgbGluZS1oZWlnaHQ6IDE2cHg7XG4gIHdpZHRoOiAxMDAlO1xuYFxuIl19 */");