@dfds-ui/experiences 0.10.0-alpha.192ac9d0 → 0.10.0-alpha.2d2ac3e0

package/dynamic-table/Body/TableRow.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Checkbox } from '@dfds-ui/forms';
+import TableCell from './TableCell';
+import { TableCellCheckboxStyled } from './TableCell.styles';
+import { TableRowStyled } 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(TableRowStyled, {
+    active: isActive,
+    hoverColor: !!onClickRow,
+    onClick: function onClick() {
+      return onClickRow && onClickRow(row.id ? String(row.id) : '');
+    }
+  }, selectableRows && row.id && ___EmotionJSX(TableCellCheckboxStyled, null, ___EmotionJSX(Checkbox, {
+    checked: selectedRows.includes(row.id),
+    name: row.id,
+    onChange: function onChange() {
+      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,10 @@
+export declare const genericTableRowStyle: import("@emotion/react").SerializedStyles;
+declare type TableRowProps = {
+    active?: boolean;
+    hoverColor: boolean;
+};
+export declare const TableRowStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TableRowProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+export {};

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

@@ -0,0 +1,23 @@
+import _styled from "@emotion/styled/base";
+
+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 genericTableRowStyle = /*#__PURE__*/css("border-bottom:1px solid ", theme.colors.surface.secondary, ";border-collapse:collapse;height:48px;" + (process.env.NODE_ENV === "production" ? "" : ";label:genericTableRowStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVSb3cuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJdUMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2R5bmFtaWMtdGFibGUvQm9keS9UYWJsZVJvdy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBnZW5lcmljVGFibGVSb3dTdHlsZSA9IGNzc2BcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5fTtcbiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTtcbiAgaGVpZ2h0OiA0OHB4O1xuYFxuXG50eXBlIFRhYmxlUm93UHJvcHMgPSB7XG4gIGFjdGl2ZT86IGJvb2xlYW5cbiAgaG92ZXJDb2xvcjogYm9vbGVhblxufVxuXG5leHBvcnQgY29uc3QgVGFibGVSb3dTdHlsZWQgPSBzdHlsZWQudHI8VGFibGVSb3dQcm9wcz5gXG4gICR7eyAuLi5nZW5lcmljVGFibGVSb3dTdHlsZSB9fVxuXG4gICY6aG92ZXIge1xuICAgICR7KHsgaG92ZXJDb2xvciB9KSA9PlxuICAgICAgaG92ZXJDb2xvciAmJlxuICAgICAgYFxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnNlY29uZGFyeX07XG4gICAgICAgIGN1cnNvcjogJHtob3ZlckNvbG9yICYmICdwb2ludGVyJ307XG4gICAgICBgfTtcbiAgfVxuXG4gICR7KHsgYWN0aXZlIH0pID0+XG4gICAgYWN0aXZlICYmXG4gICAgYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCA0MywgNjksIDAuMTIpO1xuICAgIGB9O1xuYFxuIl19 */");
+export var TableRowStyled = _styled("tr", process.env.NODE_ENV === "production" ? {
+  target: "e1ozhs4m0"
+} : {
+  target: "e1ozhs4m0",
+  label: "TableRowStyled"
+})(_objectSpread({}, genericTableRowStyle), " &:hover{", function (_ref) {
+  var hoverColor = _ref.hoverColor;
+  return hoverColor && "\n        background-color: ".concat(theme.colors.surface.secondary, ";\n        cursor: ").concat(hoverColor && 'pointer', ";\n      ");
+}, ";}", function (_ref2) {
+  var active = _ref2.active;
+  return active && "\n      background-color: rgba(0, 43, 69, 0.12);\n    ";
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVSb3cuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlc0QiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2R5bmFtaWMtdGFibGUvQm9keS9UYWJsZVJvdy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBnZW5lcmljVGFibGVSb3dTdHlsZSA9IGNzc2BcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5fTtcbiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTtcbiAgaGVpZ2h0OiA0OHB4O1xuYFxuXG50eXBlIFRhYmxlUm93UHJvcHMgPSB7XG4gIGFjdGl2ZT86IGJvb2xlYW5cbiAgaG92ZXJDb2xvcjogYm9vbGVhblxufVxuXG5leHBvcnQgY29uc3QgVGFibGVSb3dTdHlsZWQgPSBzdHlsZWQudHI8VGFibGVSb3dQcm9wcz5gXG4gICR7eyAuLi5nZW5lcmljVGFibGVSb3dTdHlsZSB9fVxuXG4gICY6aG92ZXIge1xuICAgICR7KHsgaG92ZXJDb2xvciB9KSA9PlxuICAgICAgaG92ZXJDb2xvciAmJlxuICAgICAgYFxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnNlY29uZGFyeX07XG4gICAgICAgIGN1cnNvcjogJHtob3ZlckNvbG9yICYmICdwb2ludGVyJ307XG4gICAgICBgfTtcbiAgfVxuXG4gICR7KHsgYWN0aXZlIH0pID0+XG4gICAgYWN0aXZlICYmXG4gICAgYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCA0MywgNjksIDAuMTIpO1xuICAgIGB9O1xuYFxuIl19 */"));

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,72 @@ 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 { TableStyled, TableWrapperStyled } from './DynamicTable.styles';
+import TableHead from './Head/TableHead';
+import createSkeletonRows from './Skeleton/helpers/createSkeletonRows';
+import { Fade } 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);
-      }
-    }
-  };
-
-  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]);
-  return ___EmotionJSX("div", {
-    css: dynamicTableWrapperStyle({
-      stickyHeader: stickyHeader,
-      fixedHeight: fixedHeight,
-      columns: keys.length,
-      onSelectFunction: onSelectFunction,
-      onSortByKey: onSortByKey
-    })
-  }, ___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();
+    if (onSort) {
+      onSort(sortByKeyValue, sortDescending);
     }
-  })), 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 || '-'));
-    }));
-  }))));
+  }, [sortDescending, onSort, sortByKeyValue]);
+  return ___EmotionJSX(TableWrapperStyled, {
+    height: height
+  }, ___EmotionJSX(TableStyled, null, 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(Fade, null));
 };
 
-export default DynamicTable;
+export default /*#__PURE__*/React.memo(DynamicTable);

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

@@ -1,5 +1,12 @@
-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 TableWrapperStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TableWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TableStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export {};

package/dynamic-table/DynamicTable.styles.js

@@ -1,18 +1,17 @@
-import { css } from '@emotion/react';
+import _styled from "@emotion/styled/base";
 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 */");
-};
-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 TableWrapperStyled = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1dds0xk1"
+} : {
+  target: "e1dds0xk1",
+  label: "TableWrapperStyled"
+})("color:", theme.colors.text.primary, ";display:flex;flex-direction:column;overflow-x:auto;width:100%;", function (_ref) {
+  var height = _ref.height;
+  return height && "\n      height: ".concat(height, ";\n      overflow-y: ").concat(height && 'auto', ";\n    ");
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0R5bmFtaWNUYWJsZS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU8rRCIsImZpbGUiOiIuLi8uLi9zcmMvZHluYW1pYy10YWJsZS9EeW5hbWljVGFibGUuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxudHlwZSBUYWJsZVdyYXBwZXJQcm9wcyA9IHtcbiAgaGVpZ2h0Pzogc3RyaW5nXG59XG5cbmV4cG9ydCBjb25zdCBUYWJsZVdyYXBwZXJTdHlsZWQgPSBzdHlsZWQuZGl2PFRhYmxlV3JhcHBlclByb3BzPmBcbiAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnRleHQucHJpbWFyeX07XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIG92ZXJmbG93LXg6IGF1dG87XG4gIHdpZHRoOiAxMDAlO1xuXG4gICR7KHsgaGVpZ2h0IH0pID0+XG4gICAgaGVpZ2h0ICYmXG4gICAgYFxuICAgICAgaGVpZ2h0OiAke2hlaWdodH07XG4gICAgICBvdmVyZmxvdy15OiAke2hlaWdodCAmJiAnYXV0byd9O1xuICAgIGB9O1xuYFxuXG5leHBvcnQgY29uc3QgVGFibGVTdHlsZWQgPSBzdHlsZWQudGFibGVgXG4gIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLnN1cmZhY2UucHJpbWFyeX07XG4gIGZvbnQtZmFtaWx5OiBWZXJkYW5hLCBzYW5zLXNlcmlmO1xuICBmb250LXNpemU6IDEycHg7XG4gIGxpbmUtaGVpZ2h0OiAxNnB4O1xuICB3aWR0aDogMTAwJTtcbmBcbiJdfQ== */"));
+export var TableStyled = _styled("table", process.env.NODE_ENV === "production" ? {
+  target: "e1dds0xk0"
+} : {
+  target: "e1dds0xk0",
+  label: "TableStyled"
+})("background-color:", theme.colors.surface.primary, ";font-family:Verdana,sans-serif;font-size:12px;line-height:16px;width:100%;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0R5bmFtaWNUYWJsZS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCdUMiLCJmaWxlIjoiLi4vLi4vc3JjL2R5bmFtaWMtdGFibGUvRHluYW1pY1RhYmxlLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbnR5cGUgVGFibGVXcmFwcGVyUHJvcHMgPSB7XG4gIGhlaWdodD86IHN0cmluZ1xufVxuXG5leHBvcnQgY29uc3QgVGFibGVXcmFwcGVyU3R5bGVkID0gc3R5bGVkLmRpdjxUYWJsZVdyYXBwZXJQcm9wcz5gXG4gIGNvbG9yOiAke3RoZW1lLmNvbG9ycy50ZXh0LnByaW1hcnl9O1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBvdmVyZmxvdy14OiBhdXRvO1xuICB3aWR0aDogMTAwJTtcblxuICAkeyh7IGhlaWdodCB9KSA9PlxuICAgIGhlaWdodCAmJlxuICAgIGBcbiAgICAgIGhlaWdodDogJHtoZWlnaHR9O1xuICAgICAgb3ZlcmZsb3cteTogJHtoZWlnaHQgJiYgJ2F1dG8nfTtcbiAgICBgfTtcbmBcblxuZXhwb3J0IGNvbnN0IFRhYmxlU3R5bGVkID0gc3R5bGVkLnRhYmxlYFxuICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnByaW1hcnl9O1xuICBmb250LWZhbWlseTogVmVyZGFuYSwgc2Fucy1zZXJpZjtcbiAgZm9udC1zaXplOiAxMnB4O1xuICBsaW5lLWhlaWdodDogMTZweDtcbiAgd2lkdGg6IDEwMCU7XG5gXG4iXX0= */"));

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

@@ -0,0 +1,26 @@
+export declare type Header = {
+    displayName: string;
+    key: string;
+    sortKey?: string;
+    sortable?: boolean;
+    textAlign?: 'center' | 'left' | 'right';
+    width?: string;
+};
+export declare type Row = {
+    id?: string;
+    [name: string]: any;
+};
+export declare type DynamicTableProps = {
+    activeRow?: string;
+    descending?: boolean;
+    headerRow: Header[];
+    height?: string;
+    isLoading?: boolean;
+    onClickRow?: (id: string) => void;
+    onSelectRow?: (list: string[]) => void;
+    onSort?: (value: string, sortDescending: boolean) => void;
+    rows: Row[];
+    selectedRows?: string[];
+    sortingBy?: string;
+    stickyHeader?: boolean;
+};

package/dynamic-table/DynamicTable.types.js

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

package/dynamic-table/Head/TableHead.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TableHeadProps } from './TableHead.types';
+declare const TableHead: React.MemoExoticComponent<({ headerRow, onSelectRow, onSort, rows, selectableRows, selectedRows, setSortDescending, setSortByKeyValue, sortDescending, sortByKeyValue, stickyHeader, }: TableHeadProps) => JSX.Element>;
+export default TableHead;

package/dynamic-table/Head/TableHead.js

@@ -0,0 +1,69 @@
+import React, { useCallback } from 'react';
+import { Checkbox } from '@dfds-ui/react-components';
+import { ChevronStyled, TableHeadCellCheckboxStyled, TableHeadCellStyled, TableHeadRow } from './TableHead.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TableHead = /*#__PURE__*/React.memo(function (_ref) {
+  var headerRow = _ref.headerRow,
+      onSelectRow = _ref.onSelectRow,
+      onSort = _ref.onSort,
+      rows = _ref.rows,
+      selectableRows = _ref.selectableRows,
+      selectedRows = _ref.selectedRows,
+      setSortDescending = _ref.setSortDescending,
+      setSortByKeyValue = _ref.setSortByKeyValue,
+      sortDescending = _ref.sortDescending,
+      sortByKeyValue = _ref.sortByKeyValue,
+      stickyHeader = _ref.stickyHeader;
+  var toggleAll = useCallback(function () {
+    if (!onSelectRow) return;
+    var newArray = [];
+
+    if (selectedRows.length === 0) {
+      for (var i = 0; i < rows.length; i++) {
+        newArray.push(rows[i].id || '');
+      }
+    }
+
+    onSelectRow(newArray);
+  }, [onSelectRow, rows, selectedRows]);
+  var sort = useCallback(function (oldKey, newKey) {
+    if (!onSort) return;
+
+    if (oldKey !== newKey) {
+      setSortByKeyValue(newKey);
+      setSortDescending(false);
+    } else {
+      setSortDescending(!sortDescending);
+    }
+  }, [onSort, setSortDescending, setSortByKeyValue, sortDescending]);
+  return ___EmotionJSX("thead", null, ___EmotionJSX(TableHeadRow, null, selectableRows && ___EmotionJSX(TableHeadCellCheckboxStyled, {
+    stickyHeader: stickyHeader
+  }, ___EmotionJSX(Checkbox, {
+    checked: selectedRows.length > 0,
+    indeterminate: true,
+    name: "all",
+    onChange: toggleAll,
+    size: "small"
+  })), headerRow.map(function (headerCell, i) {
+    var sortKey = headerCell.sortKey || headerCell.key;
+
+    var clickHandler = function clickHandler() {
+      return headerCell.sortable && sort(sortByKeyValue, sortKey);
+    };
+
+    var showChevron = String(sortByKeyValue === sortKey);
+    return ___EmotionJSX(TableHeadCellStyled, {
+      align: headerCell.textAlign,
+      key: i,
+      onClick: clickHandler,
+      sortByKey: onSort,
+      sortable: headerCell.sortable,
+      stickyHeader: stickyHeader,
+      customWidth: headerCell.width
+    }, ___EmotionJSX("div", null, ___EmotionJSX("span", null, headerCell.displayName), headerCell.sortable && onSort && ___EmotionJSX(ChevronStyled, {
+      descending: String(sortDescending),
+      show: showChevron
+    })));
+  })));
+});
+export default TableHead;