@dfds-ui/experiences 0.10.0 → 1.0.0-alpha.8d4fd23a

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;

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

@@ -0,0 +1,24 @@
+import { ChevronProps, GenericTableHeadCellProps, TableHeadCellCheckboxProps, TableHeadCellProps } from './TableHead.types';
+export declare const TableHeadRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+export declare const TableHeadCellStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericTableHeadCellProps & import("react").ClassAttributes<HTMLTableHeaderCellElement> & import("react").ThHTMLAttributes<HTMLTableHeaderCellElement> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & TableHeadCellProps, {}, {}>;
+export declare const TableHeadCellCheckboxStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericTableHeadCellProps & import("react").ClassAttributes<HTMLTableHeaderCellElement> & import("react").ThHTMLAttributes<HTMLTableHeaderCellElement> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & TableHeadCellCheckboxProps, {}, {}>;
+export declare const ChevronStyled: import("@emotion/styled").StyledComponent<Pick<import("react").SVGProps<SVGSVGElement>, "string" | "filter" | "values" | "fill" | "max" | "type" | "accumulate" | "offset" | "key" | "id" | "media" | "origin" | "height" | "width" | "end" | "name" | "alignmentBaseline" | "baselineShift" | "clip" | "clipPath" | "clipRule" | "color" | "colorInterpolation" | "colorInterpolationFilters" | "cursor" | "direction" | "display" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "imageRendering" | "letterSpacing" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "mask" | "opacity" | "order" | "overflow" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "textDecoration" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "wordSpacing" | "writingMode" | "alphabetic" | "hanging" | "ideographic" | "style" | "path" | "method" | "target" | "lang" | "className" | "children" | "tabIndex" | "orientation" | "local" | "x" | "y" | "mathematical" | "azimuth" | "colorRendering" | "glyphOrientationVertical" | "vectorEffect" | "additive" | "unicodeRange" | "crossOrigin" | "href" | "min" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accentHeight" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "operator" | "orient" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unitsPerEm" | "vAlphabetic" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css"> & import("react").RefAttributes<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & ChevronProps, {}, {}>;