@activecollab/components 1.0.164 → 1.0.167

package/dist/index.js

@@ -367,7 +367,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "AddCrossTinyIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1249,7 +1248,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ActivityIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1272,7 +1270,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "AddCrossIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1291,7 +1288,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ArrowCollapseMultipleIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1310,7 +1306,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ArrowDownLongIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1329,7 +1324,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ArrowExpandeMultipleIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1348,7 +1342,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ArrowLeftBoxIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1367,7 +1360,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ArrowLeftIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1385,7 +1377,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ArrowRefreshIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1404,7 +1395,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ArrowRightIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1423,7 +1413,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ArrowUpLongIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1442,7 +1431,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "AssignIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1461,7 +1449,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "AttachmentIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1480,7 +1467,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "BellOffSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1499,7 +1485,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "BellOffIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1518,7 +1503,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "BillingIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1538,7 +1522,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "BudgetAlertIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1557,7 +1540,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "CalendarAddXIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1576,7 +1558,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "CalendarIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1595,7 +1576,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "CancelCrossIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1614,7 +1594,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "CaretLeftIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1633,7 +1612,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "CaretRightIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1652,7 +1630,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ChatIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1671,7 +1648,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "CheckIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1690,7 +1666,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "CheckboxBlankTogglerIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1709,7 +1684,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "CheckboxIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("g", {
@@ -1738,7 +1712,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ChecklistSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1757,7 +1730,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ChecklistIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1776,7 +1748,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "CircleMultipleIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1795,7 +1766,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ClockAddIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1814,7 +1784,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ClockSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1833,7 +1802,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ClockStopwatchSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1852,7 +1820,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ClockStopwatchIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1871,7 +1838,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ClockIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1890,7 +1856,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "CloseSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1909,7 +1874,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "CollapsIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1928,7 +1892,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "CollapseAllIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1947,7 +1910,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "CollapseExpandSingleIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1966,7 +1928,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ComputerIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1985,7 +1946,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "CrownBlankIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2004,7 +1964,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "CrownSelectedIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2023,7 +1982,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "DependencySmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2042,7 +2000,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "DependencyIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2061,7 +2018,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "DiscussionAddIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2080,7 +2036,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "DollarCheckmarkSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2099,7 +2054,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "DollarCheckmarkIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2118,7 +2072,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "DollarClockSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2137,7 +2090,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "DollarClockIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2156,7 +2108,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "DollarOffSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2175,7 +2126,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "DollarOffIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2194,7 +2144,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "DollarSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2213,7 +2162,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "DollarIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2232,7 +2180,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "DownloadIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2251,7 +2198,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "DriveIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2270,7 +2216,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "DropboxIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2289,7 +2234,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "DuplicateIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2308,7 +2252,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "EditMultipleIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2327,7 +2270,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "EditIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2346,7 +2288,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "EmojiIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2365,7 +2306,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "EstimatesIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2388,7 +2328,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ExpandAllIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2407,7 +2346,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ExpenseAddIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2426,7 +2364,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "EyeOffSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2445,7 +2382,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "EyeOffIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2464,7 +2400,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "EyeSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2483,7 +2418,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "EyeIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2502,7 +2436,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "FilterIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2521,7 +2454,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "FolderMoveIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2540,7 +2472,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "FolderOutlineIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2559,7 +2490,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "HelpIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2578,7 +2508,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ImageIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2597,7 +2526,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "InfoSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2616,7 +2544,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "InfoIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2635,7 +2562,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "InsertLinkIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2654,7 +2580,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "IntegrationsIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2677,7 +2602,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "InvoicesIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2700,7 +2624,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "LabelsIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2719,7 +2642,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "LockSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2738,7 +2660,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "LockIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2757,7 +2678,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "MarkerIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2775,7 +2695,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "MessageAddIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2794,7 +2713,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "MessageEmptyIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2813,7 +2731,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "MessageSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2832,7 +2749,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "MessageIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2851,7 +2767,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "MinusIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("rect", {
@@ -2874,7 +2789,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "MoveTriggerIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2893,7 +2807,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "MyWorkIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2916,7 +2829,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "NoteAddIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2935,7 +2847,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "NoteIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2954,7 +2865,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "NotificationBellIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2972,7 +2882,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "OpenExpandedIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -2991,7 +2900,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "OrderFirstIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3010,7 +2918,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "PaidSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3029,7 +2936,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "PauseCircleOutlineIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3048,7 +2954,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "PauseIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3067,7 +2972,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "PauseSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3085,7 +2989,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "PencilSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3103,7 +3006,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "PencilIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3122,7 +3024,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "PendingPaymentSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3141,7 +3042,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "PeopleIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3164,7 +3064,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "PersonCircleOffIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3183,7 +3082,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "PersonCircleIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3202,7 +3100,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "PersonPlusIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3221,7 +3118,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "PersonIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3240,7 +3136,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "PlayCircleOutlineIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3259,7 +3154,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "PlayIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3278,7 +3172,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "PlaySmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3297,7 +3190,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ProjectAddIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3316,7 +3208,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ProjectTemplateAddIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3335,7 +3226,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ProjectTemplateConvertIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3354,7 +3244,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ProjectTemplateIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3373,7 +3262,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ProjectsIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3396,7 +3284,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "RadioBlankIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3415,7 +3302,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "RadioButtonIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("g", {
@@ -3442,7 +3328,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "RearangeIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3461,7 +3346,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "RearrangeSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3480,7 +3364,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "RecurringCheckmarkSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3499,7 +3382,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "RecurringCheckmarkIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3518,7 +3400,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ReportTimeIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3537,7 +3418,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ReportsIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3560,7 +3440,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "SearchIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3577,7 +3456,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "SendBlankIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3595,7 +3473,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "SendFilledIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3614,7 +3491,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "SettingsIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3633,7 +3509,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "SortGeneralIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3652,7 +3527,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "SortIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3671,7 +3545,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "StarOutlineIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3690,7 +3563,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "StarIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3709,7 +3581,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "SystemSettingsIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3729,7 +3600,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "TaskAddIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3748,7 +3618,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "TaskListAddIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3767,7 +3636,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ThumbUpOutlineIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3786,7 +3654,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "TrashIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3809,7 +3676,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "TreeDotsIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3828,7 +3694,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "UploadIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3847,7 +3712,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ViewGridIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3866,7 +3730,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ViewListIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3885,7 +3748,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "ViewTimelineIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3904,7 +3766,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "VolumeHighIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3923,7 +3784,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "WarningTriangleSmallIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3942,7 +3802,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "WarningTriangleIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3961,7 +3820,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "WarningIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -3980,7 +3838,6 @@
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "WorkloadIcon",
       fill: "var(--color-theme-600)",
-      tabIndex: -1,
       focusable: false,
       ref: svgRef
     }, props), /*#__PURE__*/React__default["default"].createElement("path", {
@@ -5657,7 +5514,87 @@
   };
   Tbody.displayName = "Tbody";
 
-  var _excluded$S = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue"];
+  var linearAnimation = styled.keyframes(["0%{background-position:left;}100%{background-position:right;}"]);
+  var StyledLinearLoader = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledLinearLoader",
+    componentId: "sc-x4ge7a-0"
+  })(["width:70%;background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.05) 50%,rgba(255,255,255,0) 60% );background-size:400%;height:16px;border-radius:8px;.neon &{background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0) 60% );background-size:500%;}animation-duration:1s;animation-iteration-count:infinite;animation-name:", ";animation-timing-function:linear;animation-direction:reverse;"], linearAnimation);
+
+  var _excluded$S = ["className"];
+  var LinearLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var className = _ref.className,
+        rest = _objectWithoutProperties(_ref, _excluded$S);
+
+    return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
+      ref: ref,
+      className: classnames__default["default"]("c-loader c-loader--linear", className)
+    }, rest));
+  });
+  LinearLoader.displayName = "LinearLoader";
+
+  var dotAnimation = styled.keyframes(["0%,80%,100%{transform:scale(0);}40%{transform:scale(1);}"]);
+  var StyledDotsLoader = styled__default["default"].span.withConfig({
+    displayName: "Styles__StyledDotsLoader",
+    componentId: "sc-1f35d5h-0"
+  })(["display:inline-block;text-align:center;& > span{display:inline-block;width:18px;height:18px;background-color:#777;border-radius:100%;animation:", " 1.4s infinite ease-in-out both;}span:nth-child(1){animation-delay:-0.32s;}span:nth-child(2){animation-delay:-0.16s;}"], dotAnimation);
+
+  var _excluded$R = ["className"];
+  var DotsLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var className = _ref.className,
+        rest = _objectWithoutProperties(_ref, _excluded$R);
+
+    return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
+      ref: ref,
+      className: classnames__default["default"]("c-loader c-loader--dots", className)
+    }, rest), /*#__PURE__*/React__default["default"].createElement("span", null), /*#__PURE__*/React__default["default"].createElement("span", null), /*#__PURE__*/React__default["default"].createElement("span", null));
+  });
+  DotsLoader.displayName = "DotsLoader";
+
+  var rotateAnimation = styled.keyframes(["from{transform:rotate(0deg);}to{transform:rotate(359deg);}"]);
+  var StyledSpinnerLoader = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledSpinnerLoader",
+    componentId: "sc-1ht53g9-0"
+  })(["", " border-radius:100%;flex-shrink:0;", " ", " ", " ", ""], BoxSizingStyle, function (props) {
+    return styled.css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$diameter, props.$diameter, rotateAnimation, props.$rotateDurationInSeconds);
+  }, function (props) {
+    return props.$activeColorPercentage === "25%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
+  }, function (props) {
+    return props.$activeColorPercentage === "50%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
+  }, function (props) {
+    return props.$activeColorPercentage === "75%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
+  });
+
+  var _excluded$Q = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
+  var SpinnerLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var _ref$radius = _ref.radius,
+        radius = _ref$radius === void 0 ? 10 : _ref$radius,
+        _ref$stroke = _ref.stroke,
+        stroke = _ref$stroke === void 0 ? 2 : _ref$stroke,
+        _ref$activeStrokeColo = _ref.activeStrokeColor,
+        activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-secondary)" : _ref$activeStrokeColo,
+        _ref$inactiveStrokeCo = _ref.inactiveStrokeColor,
+        inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-transparent-300)" : _ref$inactiveStrokeCo,
+        _ref$activeColorPerce = _ref.activeColorPercentage,
+        activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
+        _ref$rotateDurationIn = _ref.rotateDurationInSeconds,
+        rotateDurationInSeconds = _ref$rotateDurationIn === void 0 ? 0.75 : _ref$rotateDurationIn,
+        className = _ref.className,
+        rest = _objectWithoutProperties(_ref, _excluded$Q);
+
+    return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader, _extends({
+      ref: ref,
+      className: className,
+      $diameter: radius * 2,
+      $stroke: stroke,
+      $activeStrokeColor: activeStrokeColor,
+      $inactiveStrokeColor: inactiveStrokeColor,
+      $activeColorPercentage: activeColorPercentage,
+      $rotateDurationInSeconds: rotateDurationInSeconds
+    }, rest));
+  });
+  SpinnerLoader.displayName = "SpinnerLoader";
+
+  var _excluded$P = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue", "loading", "loadingRows"];
   exports.SortDirection = void 0;
 
   (function (SortDirection) {
@@ -5692,7 +5629,8 @@
 
   var DataTable = function DataTable(_ref) {
     var header = _ref.header,
-        rows = _ref.rows,
+        _ref$rows = _ref.rows,
+        rows = _ref$rows === void 0 ? [] : _ref$rows,
         className = _ref.className,
         sortBy = _ref.sortBy,
         _ref$sortDirection = _ref.sortDirection,
@@ -5707,7 +5645,10 @@
     } : _ref$groupHead,
         isCollapsible = _ref.isCollapsible,
         emptyValue = _ref.emptyValue,
-        args = _objectWithoutProperties(_ref, _excluded$S);
+        loading = _ref.loading,
+        _ref$loadingRows = _ref.loadingRows,
+        loadingRows = _ref$loadingRows === void 0 ? 7 : _ref$loadingRows,
+        args = _objectWithoutProperties(_ref, _excluded$P);
 
     var _useState = React.useState(sortDirection),
         _useState2 = _slicedToArray(_useState, 2),
@@ -5914,6 +5855,25 @@
         return newState;
       });
     }, []);
+    var renderPlaceholders = React.useMemo(function () {
+      var placeholders = Array(loadingRows).fill({}).map(function (_, index) {
+        return /*#__PURE__*/React__default["default"].createElement("tr", {
+          key: index,
+          className: "c-table__row",
+          onMouseOver: cellMouseOver,
+          onMouseLeave: cellMouseOut
+        }, header.map(function (col, colIndex) {
+          return /*#__PURE__*/React__default["default"].createElement("td", {
+            key: colIndex,
+            className: classnames__default["default"]("c-table__cell c-data-table__item", {
+              hovered: hovered === col.key
+            }),
+            "data-key": col.key
+          }, /*#__PURE__*/React__default["default"].createElement(LinearLoader, null));
+        }));
+      });
+      return /*#__PURE__*/React__default["default"].createElement(Tbody, null, placeholders);
+    }, [cellMouseOut, cellMouseOver, header, hovered, loadingRows]);
     var renderRows = React.useMemo(function () {
       if (data && data instanceof Array && data.length > 0 || _typeof(data) === "object" && Object.keys(data).length > 0) {
         if (groupBy) {
@@ -6041,7 +6001,7 @@
           "c-table__icon--desc": columnDirection === exports.SortDirection.Desc && h.key === active
         })
       })));
-    }))), renderRows);
+    }))), loading ? renderPlaceholders : renderRows);
   };
   DataTable.displayName = "DataTable";
 
@@ -6128,7 +6088,7 @@
   });
   StyledPaper.displayName = "StyledPaper";
 
-  var _excluded$R = ["children", "className", "type", "hover", "useOptimizedShadow"];
+  var _excluded$O = ["children", "className", "type", "hover", "useOptimizedShadow"];
 
   /**
    * This is a component description and should sit directly above your component
@@ -6142,7 +6102,7 @@
         hover = _ref$hover === void 0 ? false : _ref$hover,
         _ref$useOptimizedShad = _ref.useOptimizedShadow,
         useOptimizedShadow = _ref$useOptimizedShad === void 0 ? false : _ref$useOptimizedShad,
-        rest = _objectWithoutProperties(_ref, _excluded$R);
+        rest = _objectWithoutProperties(_ref, _excluded$O);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledPaper, _extends({
       className: classnames__default["default"](className, {
@@ -6196,7 +6156,7 @@
   });
   StyledCard.displayName = "StyledCard";
 
-  var _excluded$Q = ["children", "className", "hoverable", "paperType"];
+  var _excluded$N = ["children", "className", "hoverable", "paperType"];
   var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
@@ -6204,7 +6164,7 @@
         hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
         _ref$paperType = _ref.paperType,
         paperType = _ref$paperType === void 0 ? "paper-2" : _ref$paperType,
-        rest = _objectWithoutProperties(_ref, _excluded$Q);
+        rest = _objectWithoutProperties(_ref, _excluded$N);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends({}, rest, {
       type: paperType,
@@ -6286,12 +6246,12 @@
   });
   EntityCard$1.displayName = "EntityCard";
 
-  var _excluded$P = ["weight", "children"];
+  var _excluded$M = ["weight", "children"];
   var Title1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "light" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$P);
+        props = _objectWithoutProperties(_ref, _excluded$M);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: weight,
@@ -6301,12 +6261,12 @@
   });
   Title1.displayName = "Title1";
 
-  var _excluded$O = ["weight", "children"];
+  var _excluded$L = ["weight", "children"];
   var Title2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "light" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$O);
+        props = _objectWithoutProperties(_ref, _excluded$L);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: weight,
@@ -6316,10 +6276,10 @@
   });
   Title2.displayName = "Title2";
 
-  var _excluded$N = ["children"];
+  var _excluded$K = ["children"];
   var Header2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$N);
+        props = _objectWithoutProperties(_ref, _excluded$K);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
@@ -6329,10 +6289,10 @@
   });
   Header2.displayName = "Header2";
 
-  var _excluded$M = ["children"];
+  var _excluded$J = ["children"];
   var Header3 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$M);
+        props = _objectWithoutProperties(_ref, _excluded$J);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
@@ -6342,12 +6302,12 @@
   });
   Header3.displayName = "Header3";
 
-  var _excluded$L = ["weight", "children"];
+  var _excluded$I = ["weight", "children"];
   var Body1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "regular" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$L);
+        props = _objectWithoutProperties(_ref, _excluded$I);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Body 1",
@@ -6357,12 +6317,12 @@
   });
   Body1.displayName = "Body1";
 
-  var _excluded$K = ["weight", "children"];
+  var _excluded$H = ["weight", "children"];
   var Caption1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "regular" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$K);
+        props = _objectWithoutProperties(_ref, _excluded$H);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 1",
@@ -6372,12 +6332,12 @@
   });
   Caption1.displayName = "Caption1";
 
-  var _excluded$J = ["weight", "children"];
+  var _excluded$G = ["weight", "children"];
   var Caption2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "regular" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$J);
+        props = _objectWithoutProperties(_ref, _excluded$G);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 2",
@@ -6496,7 +6456,7 @@
     "borderRadius": "9999px"
   });
 
-  var _excluded$I = ["url", "alt", "size", "className"];
+  var _excluded$F = ["url", "alt", "size", "className"];
   var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var url = _ref.url,
         _ref$alt = _ref.alt,
@@ -6504,7 +6464,7 @@
         _ref$size = _ref.size,
         size = _ref$size === void 0 ? 24 : _ref$size,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$I);
+        rest = _objectWithoutProperties(_ref, _excluded$F);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({}, rest, {
       ref: ref,
@@ -6526,13 +6486,13 @@
     return props.$color && styled.css(["background-color:", ";"], props.$color);
   });
 
-  var _excluded$H = ["color", "size", "className"];
+  var _excluded$E = ["color", "size", "className"];
   var Dot = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var color = _ref.color,
         _ref$size = _ref.size,
         size = _ref$size === void 0 ? 8 : _ref$size,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$H);
+        rest = _objectWithoutProperties(_ref, _excluded$E);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDot, _extends({
       className: classnames__default["default"]("c-dot", className),
@@ -6570,7 +6530,7 @@
   });
   StyledTagText.displayName = "StyledTagText";
 
-  var _excluded$G = ["name", "color", "showText", "showDot", "className"];
+  var _excluded$D = ["name", "color", "showText", "showDot", "className"];
   var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var name = _ref.name,
         color = _ref.color,
@@ -6579,7 +6539,7 @@
         _ref$showDot = _ref.showDot,
         showDot = _ref$showDot === void 0 ? true : _ref$showDot,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$G);
+        rest = _objectWithoutProperties(_ref, _excluded$D);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledTag, _extends({
       className: classnames__default["default"]("c-tag", className),
@@ -6593,86 +6553,6 @@
   });
   Tag.displayName = "Tag";
 
-  var linearAnimation = styled.keyframes(["0%{background-position:left;}100%{background-position:right;}"]);
-  var StyledLinearLoader = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledLinearLoader",
-    componentId: "sc-x4ge7a-0"
-  })(["width:70%;background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.05) 50%,rgba(255,255,255,0) 60% );background-size:400%;height:16px;border-radius:8px;.neon &{background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0) 60% );background-size:500%;}animation-duration:1s;animation-iteration-count:infinite;animation-name:", ";animation-timing-function:linear;animation-direction:reverse;"], linearAnimation);
-
-  var _excluded$F = ["className"];
-  var LinearLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$F);
-
-    return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
-      ref: ref,
-      className: classnames__default["default"]("c-loader c-loader--linear", className)
-    }, rest));
-  });
-  LinearLoader.displayName = "LinearLoader";
-
-  var dotAnimation = styled.keyframes(["0%,80%,100%{transform:scale(0);}40%{transform:scale(1);}"]);
-  var StyledDotsLoader = styled__default["default"].span.withConfig({
-    displayName: "Styles__StyledDotsLoader",
-    componentId: "sc-1f35d5h-0"
-  })(["display:inline-block;text-align:center;& > span{display:inline-block;width:18px;height:18px;background-color:#777;border-radius:100%;animation:", " 1.4s infinite ease-in-out both;}span:nth-child(1){animation-delay:-0.32s;}span:nth-child(2){animation-delay:-0.16s;}"], dotAnimation);
-
-  var _excluded$E = ["className"];
-  var DotsLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$E);
-
-    return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
-      ref: ref,
-      className: classnames__default["default"]("c-loader c-loader--dots", className)
-    }, rest), /*#__PURE__*/React__default["default"].createElement("span", null), /*#__PURE__*/React__default["default"].createElement("span", null), /*#__PURE__*/React__default["default"].createElement("span", null));
-  });
-  DotsLoader.displayName = "DotsLoader";
-
-  var rotateAnimation = styled.keyframes(["from{transform:rotate(0deg);}to{transform:rotate(359deg);}"]);
-  var StyledSpinnerLoader = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledSpinnerLoader",
-    componentId: "sc-1ht53g9-0"
-  })(["", " border-radius:100%;flex-shrink:0;", " ", " ", " ", ""], BoxSizingStyle, function (props) {
-    return styled.css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$diameter, props.$diameter, rotateAnimation, props.$rotateDurationInSeconds);
-  }, function (props) {
-    return props.$activeColorPercentage === "25%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
-  }, function (props) {
-    return props.$activeColorPercentage === "50%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
-  }, function (props) {
-    return props.$activeColorPercentage === "75%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
-  });
-
-  var _excluded$D = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
-  var SpinnerLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var _ref$radius = _ref.radius,
-        radius = _ref$radius === void 0 ? 10 : _ref$radius,
-        _ref$stroke = _ref.stroke,
-        stroke = _ref$stroke === void 0 ? 2 : _ref$stroke,
-        _ref$activeStrokeColo = _ref.activeStrokeColor,
-        activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-secondary)" : _ref$activeStrokeColo,
-        _ref$inactiveStrokeCo = _ref.inactiveStrokeColor,
-        inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-transparent-300)" : _ref$inactiveStrokeCo,
-        _ref$activeColorPerce = _ref.activeColorPercentage,
-        activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
-        _ref$rotateDurationIn = _ref.rotateDurationInSeconds,
-        rotateDurationInSeconds = _ref$rotateDurationIn === void 0 ? 0.75 : _ref$rotateDurationIn,
-        className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$D);
-
-    return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader, _extends({
-      ref: ref,
-      className: className,
-      $diameter: radius * 2,
-      $stroke: stroke,
-      $activeStrokeColor: activeStrokeColor,
-      $inactiveStrokeColor: inactiveStrokeColor,
-      $activeColorPercentage: activeColorPercentage,
-      $rotateDurationInSeconds: rotateDurationInSeconds
-    }, rest));
-  });
-  SpinnerLoader.displayName = "SpinnerLoader";
-
   var StyledHiglightedText = styled__default["default"].span.withConfig({
     displayName: "useHighlightText__StyledHiglightedText",
     componentId: "sc-13agf6o-0"