@activecollab/components 1.0.166 → 1.0.169

package/dist/index.js

@@ -656,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
   };
@@ -670,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);
 
@@ -702,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
@@ -829,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),
@@ -852,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;
@@ -884,8 +873,7 @@
       disableFocusLock: disableFocusLock,
       style: {
         position: windowAbsolutelyPositioned ? "absolute" : "fixed"
-      },
-      preventClickEventBubbling: preventClickEventBubbling
+      }
     }, /*#__PURE__*/React__default["default"].createElement(Overlay, {
       className: backgroundElementClass,
       onClick: handleClose,
@@ -5514,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) {
@@ -5549,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,
@@ -5564,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),
@@ -5771,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) {
@@ -5898,7 +5989,7 @@
           "c-table__icon--desc": columnDirection === exports.SortDirection.Desc && h.key === active
         })
       })));
-    }))), renderRows);
+    }))), loading ? renderPlaceholders : renderRows);
   };
   DataTable.displayName = "DataTable";
 
@@ -5985,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
@@ -5999,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, {
@@ -6053,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,
@@ -6061,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,
@@ -6143,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,
@@ -6158,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,
@@ -6173,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",
@@ -6186,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",
@@ -6199,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",
@@ -6214,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",
@@ -6229,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",
@@ -6353,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,
@@ -6361,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,
@@ -6383,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),
@@ -6427,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,
@@ -6436,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),
@@ -6450,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"
@@ -8615,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;
@@ -8631,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,
@@ -8698,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
@@ -8776,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,
@@ -8800,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),
@@ -8844,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
@@ -11902,14 +11907,12 @@
   var StyledEntityCard = styled__default["default"](Card).withConfig({
     displayName: "Styles__StyledEntityCard",
     componentId: "sc-bjeea8-0"
-  })(["line-height:1.375;", " ", " ", " ", " ", ""], function (_ref) {
+  })(["line-height:1.375;", " ", " ", " ", ""], function (_ref) {
     var $renderAs = _ref.$renderAs;
     return $renderAs === "list" && styled.css(["display:flex;flex-direction:row;align-items:center;min-height:48px;margin-bottom:4px;justify-content:space-between;padding:0 16px 0 16px;"]);
   }, function (_ref2) {
     var $renderAs = _ref2.$renderAs;
     return $renderAs === "grid" && styled.css(["display:flex;flex-direction:column;position:relative;padding:20px 24px;height:280px;"]);
-  }, function (props) {
-    return props.$gap && styled.css(["gap:", "px;"], props.$gap);
   }, function (props) {
     return props.$background && styled.css(["background-color:", ";"], props.$background);
   }, function (_ref3) {
@@ -11974,17 +11977,15 @@
   var StyledEntityGroup = styled__default["default"]("div").withConfig({
     displayName: "Styles__StyledEntityGroup",
     componentId: "sc-bjeea8-2"
-  })(["", " ", " ", ""], function (_ref11) {
+  })(["", " ", ""], function (_ref11) {
     var $renderAs = _ref11.$renderAs,
         $gap = _ref11.$gap;
     return $renderAs === "grid" && styled.css(["display:grid;grid-gap:", ";grid-template-columns:repeat(auto-fill,minmax(260px,1fr));"], $gap ? "".concat($gap, "px") : "initial");
   }, function (props) {
     return props.$renderAs === "list" && styled.css(["display:flex;flex-direction:column;"]);
-  }, function (props) {
-    return props.$gap && props.$renderAs === "list" && styled.css(["", "{gap:", "px;}"], StyledEntityCard, props.$gap);
   });
   StyledEntityGroup.displayName = "StyledEntityGroup";
-  var StyledEntityActions = styled__default["default"]("div").withConfig({
+  styled__default["default"]("div").withConfig({
     displayName: "Styles__StyledEntityActions",
     componentId: "sc-bjeea8-3"
   })(["display:flex;flex-direction:column;align-items:center;", " ", ""], function (_ref12) {
@@ -11995,92 +11996,76 @@
     return $renderAs === "list" && styled.css(["justify-self:flex-end;"]);
   });
 
-  var _excluded$2 = ["listOrder", "listWidth", "visibleFromBreakpoint", "className"];
-  var EntityProperty = function EntityProperty(_ref) {
-    var listOrder = _ref.listOrder,
-        listWidth = _ref.listWidth,
-        visibleFromBreakpoint = _ref.visibleFromBreakpoint,
-        className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$2);
-
-    return /*#__PURE__*/React__default["default"].createElement(StyledEntityProperty, _extends({
-      className: classnames__default["default"]("c-entity-property", className)
-    }, props, {
-      $order: listOrder,
-      $width: listWidth,
-      $visibleFromBreakpoint: visibleFromBreakpoint
-    }));
-  };
-  EntityProperty.displayName = "EntityProperty";
+  var _excluded$2 = ["children", "gap", "renderAs"];
+  var EntityGroupContext = /*#__PURE__*/React__default["default"].createContext({
+    renderAs: "grid"
+  });
+  var EntityGroup = function EntityGroup(_ref) {
+    var children = _ref.children,
+        gap = _ref.gap,
+        _ref$renderAs = _ref.renderAs,
+        renderAs = _ref$renderAs === void 0 ? "grid" : _ref$renderAs,
+        rest = _objectWithoutProperties(_ref, _excluded$2);
 
-  var ConditionalWrapper = function ConditionalWrapper(_ref) {
-    var condition = _ref.condition,
-        wrap = _ref.wrap,
-        children = _ref.children;
-    return condition ? wrap(children) : children;
+    return /*#__PURE__*/React__default["default"].createElement(EntityGroupContext.Provider, {
+      value: {
+        renderAs: renderAs
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(StyledEntityGroup, _extends({
+      $renderAs: renderAs,
+      $gap: gap
+    }, rest), children));
   };
+  EntityGroup.displayName = "EntityGroup";
 
-  var _excluded$1 = ["children", "actions", "renderAs", "isCollection", "background", "className", "component"];
-  var EntityCard = function EntityCard(_ref) {
+  var _excluded$1 = ["children", "isCollection", "background", "className", "as"];
+  var EntityCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-        actions = _ref.actions,
-        _ref$renderAs = _ref.renderAs,
-        renderAs = _ref$renderAs === void 0 ? "grid" : _ref$renderAs,
         isCollection = _ref.isCollection,
         background = _ref.background,
         className = _ref.className,
-        component = _ref.component,
+        as = _ref.as,
         rest = _objectWithoutProperties(_ref, _excluded$1);
 
+    var _useContext = React.useContext(EntityGroupContext),
+        renderAs = _useContext.renderAs;
+
     var paperType = renderAs === "grid" ? "paper-1" : "paper-2";
-    var WrapperElement = component ? component : React.Fragment;
-    return /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
-      condition: typeof component !== "undefined",
-      wrap: function wrap(children) {
-        return /*#__PURE__*/React__default["default"].createElement(WrapperElement, rest, children);
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(StyledEntityCard, _extends({
+    var Component = as || Card;
+    return /*#__PURE__*/React__default["default"].createElement(StyledEntityCard, _extends({
+      as: Component,
       $renderAs: renderAs,
       $background: background,
       paperType: paperType,
       className: className,
       $isCollection: isCollection
-    }, rest), React__default["default"].Children.map(children, function (child) {
-      if ( /*#__PURE__*/React__default["default"].isValidElement(child) && child.type === EntityProperty) {
-        return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          $renderAs: renderAs
-        });
-      }
-
-      return null;
-    }), actions && /*#__PURE__*/React__default["default"].createElement(StyledEntityActions, {
-      $renderAs: renderAs
-    }, actions)));
-  };
+    }, rest, {
+      ref: ref
+    }), children);
+  });
   EntityCard.displayName = "EntityCard";
 
-  var _excluded = ["children", "gap", "renderAs"];
-  var EntityGroup = function EntityGroup(_ref) {
-    var children = _ref.children,
-        gap = _ref.gap,
-        _ref$renderAs = _ref.renderAs,
-        renderAs = _ref$renderAs === void 0 ? "grid" : _ref$renderAs,
-        rest = _objectWithoutProperties(_ref, _excluded);
+  var _excluded = ["listOrder", "listWidth", "visibleFromBreakpoint", "className"];
+  var EntityProperty = function EntityProperty(_ref) {
+    var listOrder = _ref.listOrder,
+        listWidth = _ref.listWidth,
+        visibleFromBreakpoint = _ref.visibleFromBreakpoint,
+        className = _ref.className,
+        props = _objectWithoutProperties(_ref, _excluded);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledEntityGroup, _extends({
-      $renderAs: renderAs,
-      $gap: gap
-    }, rest), React__default["default"].Children.map(children, function (child) {
-      if ( /*#__PURE__*/React__default["default"].isValidElement(child) && child.type === EntityCard) {
-        return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          renderAs: renderAs
-        });
-      }
+    var _useContext = React.useContext(EntityGroupContext),
+        renderAs = _useContext.renderAs;
 
-      return null;
+    return /*#__PURE__*/React__default["default"].createElement(StyledEntityProperty, _extends({
+      className: classnames__default["default"]("c-entity-property", className)
+    }, props, {
+      $order: listOrder,
+      $width: listWidth,
+      $visibleFromBreakpoint: visibleFromBreakpoint,
+      $renderAs: renderAs
     }));
   };
-  EntityGroup.displayName = "EntityGroup";
+  EntityProperty.displayName = "EntityProperty";
 
   var Entity = {
     Group: EntityGroup,