@activecollab/components 1.0.165 → 1.0.168

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", {
@@ -657,7 +656,7 @@
   })(["", " ", " position:fixed;top:0;right:0;bottom:0;left:0;"], FontStyle, BoxSizingStyle);
   StyledWindow.displayName = "StyledWindow";
 
-  var _excluded$12 = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "preventClickEventBubbling", "onClick"];
+  var _excluded$12 = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "onClick"];
   var returnFocus = {
     preventScroll: true
   };
@@ -671,8 +670,6 @@
         disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
         _ref$disableScrollLoc = _ref.disableScrollLock,
         disableScrollLock = _ref$disableScrollLoc === void 0 ? false : _ref$disableScrollLoc,
-        _ref$preventClickEven = _ref.preventClickEventBubbling,
-        preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven,
         onClick = _ref.onClick,
         rest = _objectWithoutProperties(_ref, _excluded$12);
 
@@ -703,12 +700,9 @@
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var handleClick = React.useCallback(function (event) {
-      if (preventClickEventBubbling) {
-        event === null || event === void 0 ? void 0 : event.stopPropagation();
-      }
-
+      event === null || event === void 0 ? void 0 : event.stopPropagation();
       typeof onClick === "function" && onClick(event);
-    }, [onClick, preventClickEventBubbling]);
+    }, [onClick]);
     return /*#__PURE__*/React__default["default"].createElement(Portal, null, /*#__PURE__*/React__default["default"].createElement(FocusLock__default["default"], {
       returnFocus: returnFocus,
       disabled: disableFocusLock
@@ -830,9 +824,7 @@
         popperClassName = _ref.popperClassName,
         backgroundElementClass = _ref.backgroundElementClass,
         _ref$windowAbsolutely = _ref.windowAbsolutelyPositioned,
-        windowAbsolutelyPositioned = _ref$windowAbsolutely === void 0 ? false : _ref$windowAbsolutely,
-        _ref$preventClickEven = _ref.preventClickEventBubbling,
-        preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven;
+        windowAbsolutelyPositioned = _ref$windowAbsolutely === void 0 ? false : _ref$windowAbsolutely;
 
     var _useState = React.useState(defaultOpen),
         _useState2 = _slicedToArray(_useState, 2),
@@ -853,16 +845,12 @@
     var handleOpen = React.useCallback(function (event) {
       var _target$props;
 
-      event && event.preventDefault();
-
-      if (preventClickEventBubbling) {
-        event === null || event === void 0 ? void 0 : event.stopPropagation();
-      }
-
+      event === null || event === void 0 ? void 0 : event.preventDefault();
+      event === null || event === void 0 ? void 0 : event.stopPropagation();
       setOpen(true);
       typeof onOpen === "function" && onOpen();
       typeof (target === null || target === void 0 ? void 0 : (_target$props = target.props) === null || _target$props === void 0 ? void 0 : _target$props.onClick) === "function" && target.props.onClick(event);
-    }, [onOpen, preventClickEventBubbling, target === null || target === void 0 ? void 0 : target.props]);
+    }, [onOpen, target === null || target === void 0 ? void 0 : target.props]);
     var handleClose = React.useCallback(function () {
       if (typeof onBeforeClose === "function" && !onBeforeClose()) {
         return;
@@ -885,8 +873,7 @@
       disableFocusLock: disableFocusLock,
       style: {
         position: windowAbsolutelyPositioned ? "absolute" : "fixed"
-      },
-      preventClickEventBubbling: preventClickEventBubbling
+      }
     }, /*#__PURE__*/React__default["default"].createElement(Overlay, {
       className: backgroundElementClass,
       onClick: handleClose,
@@ -1249,7 +1236,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 +1258,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 +1276,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 +1294,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 +1312,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 +1330,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 +1348,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 +1365,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 +1383,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 +1401,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 +1419,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 +1437,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 +1455,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 +1473,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 +1491,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 +1510,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 +1528,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 +1546,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 +1564,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 +1582,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 +1600,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 +1618,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 +1636,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 +1654,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 +1672,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 +1700,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 +1718,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 +1736,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 +1754,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 +1772,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 +1790,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 +1808,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 +1826,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 +1844,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 +1862,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 +1880,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 +1898,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 +1916,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 +1934,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 +1952,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 +1970,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 +1988,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 +2006,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 +2024,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 +2042,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 +2060,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 +2078,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 +2096,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 +2114,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 +2132,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 +2150,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 +2168,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 +2186,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 +2204,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 +2222,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 +2240,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 +2258,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 +2276,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 +2294,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 +2316,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 +2334,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 +2352,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 +2370,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 +2388,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 +2406,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 +2424,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 +2442,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 +2460,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 +2478,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 +2496,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 +2514,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 +2532,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 +2550,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 +2568,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 +2590,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 +2612,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 +2630,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 +2648,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 +2666,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 +2683,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 +2701,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 +2719,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 +2737,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 +2755,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 +2777,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 +2795,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 +2817,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 +2835,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 +2853,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 +2870,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 +2888,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 +2906,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 +2924,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 +2942,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 +2960,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 +2977,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 +2994,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 +3012,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 +3030,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 +3052,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 +3070,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 +3088,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 +3106,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 +3124,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 +3142,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 +3160,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 +3178,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 +3196,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 +3214,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 +3232,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 +3250,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 +3272,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 +3290,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 +3316,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 +3334,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 +3352,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 +3370,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 +3388,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 +3406,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 +3428,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 +3444,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 +3461,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 +3479,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 +3497,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 +3515,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 +3533,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 +3551,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 +3569,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 +3588,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 +3606,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 +3624,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 +3642,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 +3664,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 +3682,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 +3700,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 +3718,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 +3736,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 +3754,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 +3772,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 +3790,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 +3808,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 +3826,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 +5502,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 +5617,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 +5633,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 +5843,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 +5989,7 @@
           "c-table__icon--desc": columnDirection === exports.SortDirection.Desc && h.key === active
         })
       })));
-    }))), renderRows);
+    }))), loading ? renderPlaceholders : renderRows);
   };
   DataTable.displayName = "DataTable";
 
@@ -6128,7 +6076,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 +6090,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 +6144,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 +6152,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 +6234,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 +6249,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 +6264,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 +6277,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 +6290,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 +6305,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 +6320,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 +6444,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 +6452,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 +6474,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 +6518,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 +6527,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 +6541,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"
@@ -8758,7 +8626,7 @@
     function () {});
   }
 
-  var _excluded$r = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "preventClickEventBubbling", "open", "onClose"];
+  var _excluded$r = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "open", "onClose"];
 
   var getHasTransition = function getHasTransition(children) {
     return children.props ? Object.prototype.hasOwnProperty.call(children.props, "in") : false;
@@ -8774,8 +8642,6 @@
         disableBackgroundClick = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
         _ref$disableBackgroun2 = _ref.disableBackgroundColor,
         disableBackgroundColor = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
-        _ref$preventClickEven = _ref.preventClickEventBubbling,
-        preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven,
         _ref$open = _ref.open,
         defaultOpen = _ref$open === void 0 ? false : _ref$open,
         onClose = _ref.onClose,
@@ -8841,8 +8707,7 @@
       ref: handleRef,
       onClose: handleClose,
       disableFocusLock: disableFocusLock,
-      disableScrollLock: disableScrollLock,
-      preventClickEventBubbling: preventClickEventBubbling
+      disableScrollLock: disableScrollLock
     }), open ? /*#__PURE__*/React__default["default"].createElement(Overlay, {
       onClick: handleBackgroundClick,
       disableBackgroundColor: disableBackgroundColor
@@ -8919,7 +8784,7 @@
   });
   StyledCssTransition.displayName = "StyledCssTransition";
 
-  var _excluded$q = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick", "preventClickEventBubbling"];
+  var _excluded$q = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
   var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         onClose = _ref.onClose,
@@ -8943,8 +8808,6 @@
         bodyClassName = _ref.bodyClassName,
         _ref$disableBackgroun2 = _ref.disableBackgroundClick,
         disableBackgroundClick = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
-        _ref$preventClickEven = _ref.preventClickEventBubbling,
-        preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven,
         rest = _objectWithoutProperties(_ref, _excluded$q);
 
     var _useState = React.useState(defaultOpen),
@@ -8987,8 +8850,7 @@
       ref: handleRef,
       onClose: handleClose,
       disableFocusLock: disableFocusLock,
-      disableScrollLock: disableScrollLock,
-      preventClickEventBubbling: preventClickEventBubbling
+      disableScrollLock: disableScrollLock
     }), open ? /*#__PURE__*/React__default["default"].createElement(Overlay, {
       onClick: handleBackgroundClick,
       disableBackgroundColor: disableBackgroundColor