@activecollab/components 1.0.167 → 1.0.170

package/dist/index.js

@@ -1,14 +1,14 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('classnames'), require('resize-observer-polyfill'), require('react-focus-lock'), require('react-remove-scroll'), require('react-dom'), require('@popperjs/core'), require('react-transition-group'), require('moment'), require('react-day-picker/moment'), require('react-day-picker'), require('lodash.debounce'), require('react-custom-scrollbars')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'classnames', 'resize-observer-polyfill', 'react-focus-lock', 'react-remove-scroll', 'react-dom', '@popperjs/core', 'react-transition-group', 'moment', 'react-day-picker/moment', 'react-day-picker', 'lodash.debounce', 'react-custom-scrollbars'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.components = {}, global.React, global.styled, global.classnames, global.ResizeObserver, global.FocusLock, global.reactRemoveScroll, global.ReactDOM, global.core, global.reactTransitionGroup, global.moment, global.MomentLocaleUtils, global.DayPicker, global.debounce, global.reactCustomScrollbars));
-})(this, (function (exports, React, styled, classnames, ResizeObserver, FocusLock, reactRemoveScroll, ReactDOM, core, reactTransitionGroup, moment, MomentLocaleUtils, DayPicker, debounce, reactCustomScrollbars) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.components = {}, global.React, global.styled, global.classNames, global.ResizeObserver, global.FocusLock, global.reactRemoveScroll, global.ReactDOM, global.core, global.reactTransitionGroup, global.moment, global.MomentLocaleUtils, global.DayPicker, global.debounce, global.reactCustomScrollbars));
+})(this, (function (exports, React, styled, classNames, ResizeObserver, FocusLock, reactRemoveScroll, ReactDOM, core, reactTransitionGroup, moment, MomentLocaleUtils, DayPicker, debounce, reactCustomScrollbars) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-  var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
   var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
   var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
@@ -332,7 +332,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledButton$2, _extends({
       disabled: disabled,
-      className: classnames__default["default"]("c-btn", className, {
+      className: classNames__default["default"]("c-btn", className, {
         "c-btn--contained": variant === "primary" || variant === "contained",
         "c-btn--outlined": variant === "secondary" || variant === "outlined",
         "c-btn--text_colored": variant === "tertiary" || variant === "text colored",
@@ -394,7 +394,7 @@
       ref: ref,
       variant: "contained",
       disabled: disabled,
-      className: classnames__default["default"]("c-global-add-btn", className)
+      className: classNames__default["default"]("c-global-add-btn", className)
     }, rest), /*#__PURE__*/React__default["default"].createElement(AddCrossTinyIcon$1, null));
   });
   GlobalAddButton.displayName = "GlobalAddButton";
@@ -429,7 +429,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup$1, _extends({
       ref: ref,
-      className: classnames__default["default"]("c-btn-group", className)
+      className: classNames__default["default"]("c-btn-group", className)
     }, rest), children);
   });
   ButtonGroup.displayName = "ButtonGroup";
@@ -615,7 +615,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$13);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledOverlay, _extends({
-      className: classnames__default["default"]("c-overlay", className),
+      className: classNames__default["default"]("c-overlay", className),
       $disableBackgroundColor: disableBackgroundColor
     }, rest));
   };
@@ -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
@@ -722,7 +717,7 @@
       }, style),
       onKeyDown: handleKeyDown,
       tabIndex: 0,
-      className: classnames__default["default"]("c-window", className),
+      className: classNames__default["default"]("c-window", className),
       onClick: handleClick
     }), children))));
   });
@@ -759,7 +754,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledBubble, _extends({}, rest, {
       ref: innerRef,
-      className: classnames__default["default"]("c-bubble", className),
+      className: classNames__default["default"]("c-bubble", className),
       style: style
     }), children);
   };
@@ -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,
@@ -898,7 +886,7 @@
       className: popperClassName,
       tabIndex: -1
     }, /*#__PURE__*/React__default["default"].createElement(StyledMenu$2, {
-      className: classnames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName, className),
+      className: classNames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName, className),
       $mode: mode,
       onMouseDown: onMenuClick
     }, /*#__PURE__*/React__default["default"].createElement(MenuContextProvider, {
@@ -1110,7 +1098,7 @@
     var Component = as || "div";
     return /*#__PURE__*/React__default["default"].createElement(StyledTypography, _extends({
       as: Component,
-      className: classnames__default["default"]("typography", className),
+      className: classNames__default["default"]("typography", className),
       $italic: italic,
       $tabularNums: tabularNums,
       $letterSpacing: letterSpacing,
@@ -1138,7 +1126,7 @@
         props = _objectWithoutProperties(_ref, _excluded$$);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuHeader, _extends({}, props, {
-      className: classnames__default["default"]("c-menu-header", className),
+      className: classNames__default["default"]("c-menu-header", className),
       ref: ref
     }), leftElement || /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
@@ -1168,7 +1156,7 @@
         props = _objectWithoutProperties(_ref, _excluded$_);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter$1, _extends({}, props, {
-      className: classnames__default["default"]("c-menu-footer", className),
+      className: classNames__default["default"]("c-menu-footer", className),
       ref: ref
     }), children);
   });
@@ -1226,7 +1214,7 @@
         props = _objectWithoutProperties(_ref, _excluded$Y);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledListItem, _extends({}, props, {
-      className: classnames__default["default"]("c-list-item", className),
+      className: classNames__default["default"]("c-list-item", className),
       ref: ref
     }), children);
   });
@@ -1235,7 +1223,7 @@
   var ListSeparator = function ListSeparator(_ref) {
     var className = _ref.className;
     return /*#__PURE__*/React__default["default"].createElement(StyledListSeparator, {
-      className: classnames__default["default"]("c-list-separator", className)
+      className: classNames__default["default"]("c-list-separator", className)
     });
   };
   ListSeparator.displayName = "ListSeparator";
@@ -4182,7 +4170,7 @@
       return /*#__PURE__*/React__default["default"].createElement(TransitionComponent, _extends({}, transitionProps, {
         style: style
       }), /*#__PURE__*/React__default["default"].createElement(StyledTooltip, {
-        className: classnames__default["default"]("c-tooltip-ds", className),
+        className: classNames__default["default"]("c-tooltip-ds", className),
         $isLight: isLight
       }, title));
     })));
@@ -4258,7 +4246,7 @@
       ref: ref,
       className: className
     }, /*#__PURE__*/React__default["default"].createElement(StyledCounterButton, _extends({
-      className: classnames__default["default"]("c-counter-button", {
+      className: classNames__default["default"]("c-counter-button", {
         "c-counter-button__selected": counter
       })
     }, args, {
@@ -4266,7 +4254,7 @@
       $active: counter > 0 || active,
       $selected: counter > 0
     }), icon && /*#__PURE__*/React__default["default"].cloneElement(icon, {
-      className: classnames__default["default"]("c-counter-button__icon")
+      className: classNames__default["default"]("c-counter-button__icon")
     }), label && /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonLabel, {
       color: "secondary",
       weight: "medium",
@@ -5232,7 +5220,7 @@
       }), _ref2;
     }, [isDisabled]);
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup, {
-      className: classnames__default["default"]("c-date-stepper", className)
+      className: classNames__default["default"]("c-date-stepper", className)
     }, renderLeftRightButtons ? /*#__PURE__*/React__default["default"].createElement(Button, {
       type: "button",
       variant: "secondary",
@@ -5316,7 +5304,7 @@
       });
     }, [activeStep, progressive, steps]);
     return /*#__PURE__*/React__default["default"].createElement(StyledSteps, {
-      className: classnames__default["default"]("c-steps-wrapper", wrapperClassName),
+      className: classNames__default["default"]("c-steps-wrapper", wrapperClassName),
       ref: ref
     }, steps.map(function (step) {
       return /*#__PURE__*/React__default["default"].createElement(StyledStep, {
@@ -5492,7 +5480,7 @@
       className: "c-table__wrap"
     }, /*#__PURE__*/React__default["default"].createElement(StyledTable, {
       ref: innerRef,
-      className: classnames__default["default"]("c-table", className),
+      className: classNames__default["default"]("c-table", className),
       $striped: striped
     }, children));
   };
@@ -5501,7 +5489,7 @@
     var children = _ref2.children,
         className = _ref2.className;
     return /*#__PURE__*/React__default["default"].createElement(StyledTableHead, {
-      className: classnames__default["default"]("c-table__head", className)
+      className: classNames__default["default"]("c-table__head", className)
     }, children);
   };
   Thead.displayName = "Thead";
@@ -5509,7 +5497,7 @@
     var children = _ref3.children,
         className = _ref3.className;
     return /*#__PURE__*/React__default["default"].createElement(StyledTableBody, {
-      className: classnames__default["default"]("c-table__body", className)
+      className: classNames__default["default"]("c-table__body", className)
     }, children);
   };
   Tbody.displayName = "Tbody";
@@ -5527,7 +5515,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
       ref: ref,
-      className: classnames__default["default"]("c-loader c-loader--linear", className)
+      className: classNames__default["default"]("c-loader c-loader--linear", className)
     }, rest));
   });
   LinearLoader.displayName = "LinearLoader";
@@ -5545,7 +5533,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
       ref: ref,
-      className: classnames__default["default"]("c-loader c-loader--dots", className)
+      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";
@@ -5801,7 +5789,7 @@
     var renderNoResults = React.useCallback(function () {
       return /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
         colSpan: header.length,
-        className: classnames__default["default"]({
+        className: classNames__default["default"]({
           "text-center": !noResultsCallback
         })
       }, noResultsCallback ? noResultsCallback() : "There is no data."));
@@ -5838,7 +5826,7 @@
       }, header.map(function (h, colIndex) {
         return /*#__PURE__*/React__default["default"].createElement("td", {
           key: colIndex,
-          className: classnames__default["default"]("c-table__cell c-data-table__item", {
+          className: classNames__default["default"]("c-table__cell c-data-table__item", {
             hovered: hovered === h.key
           }),
           "data-key": h.key,
@@ -5865,7 +5853,7 @@
         }, 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", {
+            className: classNames__default["default"]("c-table__cell c-data-table__item", {
               hovered: hovered === col.key
             }),
             "data-key": col.key
@@ -5888,19 +5876,19 @@
               onClick: toggleCollapse,
               className: "c-table__body__icon c-table--toggle-collapsed"
             }, /*#__PURE__*/React__default["default"].createElement(CollapseExpandSingleIcon$1, {
-              className: classnames__default["default"]({
+              className: classNames__default["default"]({
                 "c-table__collapse_icon--expanded": !collapsed[key],
                 "c-table__collapse_icon--collapsed": collapsed[key]
               })
             })))), /*#__PURE__*/React__default["default"].createElement(Tbody, {
-              className: classnames__default["default"]("c-table__grouped__head", "head_".concat(i), {
+              className: classNames__default["default"]("c-table__grouped__head", "head_".concat(i), {
                 "c-table__grouped__head--expanded": isCollapsible && !collapsed[key],
                 "c-table__grouped__head--collapsed": isCollapsible && collapsed[key],
                 last: i === keys.length - 1,
                 first: i === 0
               })
             }, groupHead(data[key], keys[i] !== "null" ? keys[i].trim() : null)), /*#__PURE__*/React__default["default"].createElement(Tbody, {
-              className: classnames__default["default"]("c-table__group c-table_group_".concat(i), {
+              className: classNames__default["default"]("c-table__group c-table_group_".concat(i), {
                 hidden: collapsed[key]
               })
             }, data[key].map(function (row, index) {
@@ -5950,7 +5938,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledDataTable, _extends({
       as: Table,
       innerRef: tableRef,
-      className: classnames__default["default"]("c-data-table", className, {
+      className: classNames__default["default"]("c-data-table", className, {
         "c-table__grouped": groupBy,
         "c-table__collapsible": isCollapsible,
         "padding-b-0": groupBy && collapsed[Object.keys(data).slice(-1)[0]]
@@ -5962,7 +5950,7 @@
     }, header.map(function (h, index) {
       return /*#__PURE__*/React__default["default"].createElement("th", {
         key: h.key,
-        className: classnames__default["default"]("c-table__cell", {
+        className: classNames__default["default"]("c-table__cell", {
           "c-table__cell--hovered": hovered === h.key,
           "c-table__head--hidden": groupBy && allGroupsCollapsed && h.hideCollapsed
         }),
@@ -5986,7 +5974,7 @@
       }), /*#__PURE__*/React__default["default"].createElement("div", {
         onClick: sortColumn,
         "data-index": index,
-        className: classnames__default["default"]("c-table__icon-wrapper", {
+        className: classNames__default["default"]("c-table__icon-wrapper", {
           "cursor-pointer": h.sortable === true
         })
       }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -5994,7 +5982,7 @@
       }, h.label), h.sortable && /*#__PURE__*/React__default["default"].createElement(SortIcon$1, {
         width: "10px",
         height: "10px",
-        className: classnames__default["default"]("c-table__icon", {
+        className: classNames__default["default"]("c-table__icon", {
           "c-table__icon--inactive": h.key !== active,
           "c-table__icon--active": h.key === active,
           "c-table__icon--asc": columnDirection === exports.SortDirection.Asc && h.key === active,
@@ -6060,7 +6048,7 @@
         checkMarkClassName = _ref.checkMarkClassName;
     return /*#__PURE__*/React__default["default"].createElement(StyledCompleteCheckbox, {
       onClick: onClick,
-      className: classnames__default["default"]("c-complete-checkbox", className),
+      className: classNames__default["default"]("c-complete-checkbox", className),
       $primary: primary,
       $completed: completed,
       $disabled: disabled,
@@ -6105,7 +6093,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$O);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledPaper, _extends({
-      className: classnames__default["default"](className, {
+      className: classNames__default["default"](className, {
         "ac-shadow--raised--lg": !useOptimizedShadow && hover && type === "paper-1",
         "ac-shadow-optimized--lg": useOptimizedShadow && hover && type === "paper-1",
         "ac-shadow--lg": !hover && type === "paper-1",
@@ -6140,7 +6128,7 @@
     var width = _ref.width,
         className = _ref.className;
     return /*#__PURE__*/React__default["default"].createElement(StyledScaleBar, {
-      className: classnames__default["default"]("c-scale-bar", className)
+      className: classNames__default["default"]("c-scale-bar", className)
     }, /*#__PURE__*/React__default["default"].createElement(StyledScaleBarInner, {
       className: "c-scale-bar__progress",
       $width: width
@@ -6168,7 +6156,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends({}, rest, {
       type: paperType,
-      className: classnames__default["default"]("c-card", className),
+      className: classNames__default["default"]("c-card", className),
       hover: hoverable,
       useOptimizedShadow: true,
       ref: ref
@@ -6236,7 +6224,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledEntityCard$1, {
       ref: ref,
       hoverable: true,
-      className: classnames__default["default"]("entity-card-wrapper", {
+      className: classNames__default["default"]("entity-card-wrapper", {
         "grid-item": renderAs === "grid-item",
         "list-item": renderAs === "list-item"
       }, className),
@@ -6424,7 +6412,7 @@
     }, [value]);
     var renderSignifier = React.useMemo(function () {
       return /*#__PURE__*/React__default["default"].createElement(StyledSignifier, {
-        className: classnames__default["default"]("c-signifier", className),
+        className: classNames__default["default"]("c-signifier", className),
         $direction: direction
       }, /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
         as: Component
@@ -6495,7 +6483,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$E);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDot, _extends({
-      className: classnames__default["default"]("c-dot", className),
+      className: classNames__default["default"]("c-dot", className),
       ref: ref,
       $color: color,
       $size: size
@@ -6542,7 +6530,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$D);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledTag, _extends({
-      className: classnames__default["default"]("c-tag", className),
+      className: classNames__default["default"]("c-tag", className),
       ref: ref
     }, rest), showDot ? /*#__PURE__*/React__default["default"].createElement(StyledTagDot, {
       $showText: showText,
@@ -6643,7 +6631,7 @@
       ref: hover ? ref : null,
       title: name,
       onMouseEnter: handleOnMouseEnter,
-      className: classnames__default["default"]("c-option", className),
+      className: classNames__default["default"]("c-option", className),
       hover: hover,
       onClick: onClick
     }, renderOption ? renderOption : name);
@@ -6681,7 +6669,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$C);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox$1, {
-      className: classnames__default["default"]("c-checkbox", {
+      className: classNames__default["default"]("c-checkbox", {
         "c-checkbox__hover": hover,
         "c-checkbox__controlled": typeof hover === "boolean"
       }, className),
@@ -6783,7 +6771,7 @@
     }, [allOptionValues, checked, isAllOptionsChecked, onChange]);
     return /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupLi, {
       key: id,
-      className: classnames__default["default"]("c-option-group", optionGroupClassName)
+      className: classNames__default["default"]("c-option-group", optionGroupClassName)
     }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroup, {
       key: id
     }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupOption, {
@@ -6945,7 +6933,7 @@
     }, [invertHorizontal, invertVertical, disableVertical, disableHorizontal]);
     return /*#__PURE__*/React__default["default"].createElement(StyledScrollShadow, _extends({}, rest, {
       ref: ref,
-      className: classnames__default["default"]("c-scroll-shadow", className)
+      className: classNames__default["default"]("c-scroll-shadow", className)
     }), children({
       onScroll: handleScroll
     }), !disableVertical ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledScrollShadowTop, {
@@ -7027,7 +7015,7 @@
 
     var props = _objectSpread2(_objectSpread2({}, rest), {}, {
       ref: handleRef,
-      className: classnames__default["default"]("c-scroll-element", className),
+      className: classNames__default["default"]("c-scroll-element", className),
       style: _objectSpread2({
         overflow: "auto"
       }, style)
@@ -7557,7 +7545,7 @@
       $invalid: invalid,
       $disabled: disabled,
       style: style,
-      className: classnames__default["default"]("c-input-wrapper", className),
+      className: classNames__default["default"]("c-input-wrapper", className),
       onClick: handleWrapperClick,
       ref: wrapRef
     }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
@@ -7606,7 +7594,7 @@
         props = _objectWithoutProperties(_ref, _excluded$y);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledRadioButton$1, {
-      className: classnames__default["default"]("c-radio-btn", {
+      className: classNames__default["default"]("c-radio-btn", {
         "c-radio-btn__hover": hover,
         "c-radio-btn__controlled": typeof hover === "boolean"
       }, className),
@@ -7801,7 +7789,7 @@
     var props = React.useMemo(function () {
       if (target) {
         return {
-          menuClassName: classnames__default["default"]("c-select", selectClassName),
+          menuClassName: classNames__default["default"]("c-select", selectClassName),
           onClose: onClose,
           onOpen: onOpen,
           target: target,
@@ -7812,7 +7800,7 @@
       }
 
       return {
-        className: classnames__default["default"]("c-select", selectClassName)
+        className: classNames__default["default"]("c-select", selectClassName)
       };
     }, [target, selectClassName, onClose, onOpen, mode, open, position]);
     var handleEmptyAction = React.useCallback(function (value) {
@@ -8001,7 +7989,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$w);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledNavListItem, _extends({
-      className: classnames__default["default"]("c-nav__item", {
+      className: classNames__default["default"]("c-nav__item", {
         "c-nav__item--active": active
       }, className),
       ref: ref
@@ -8299,7 +8287,7 @@
       return setMoreOpened(false);
     }, []);
     return /*#__PURE__*/React__default["default"].createElement(StyledNav, {
-      className: classnames__default["default"]("c-nav", className),
+      className: classNames__default["default"]("c-nav", className),
       $align: alignment,
       $role: role
     }, /*#__PURE__*/React__default["default"].createElement(StyledNavList, {
@@ -8456,7 +8444,7 @@
       }
     }, [onChange]);
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuSelector, {
-      className: classnames__default["default"]("c-menu-selector", className)
+      className: classNames__default["default"]("c-menu-selector", className)
     }, /*#__PURE__*/React__default["default"].createElement(StyledMenuSelectorInner, null, typeof onBack === "function" ? /*#__PURE__*/React__default["default"].createElement(StyledMenuSelectorBack, {
       onClick: onBack,
       width: "16px",
@@ -8609,7 +8597,7 @@
       $invalid: invalid,
       ref: ref,
       disabled: disabled,
-      className: classnames__default["default"]("c-textarea", {
+      className: classNames__default["default"]("c-textarea", {
         "c-textarea__disabled": disabled
       }, className)
     }));
@@ -8638,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;
@@ -8654,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,
@@ -8721,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
@@ -8799,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,
@@ -8823,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),
@@ -8867,13 +8850,12 @@
       ref: handleRef,
       onClose: handleClose,
       disableFocusLock: disableFocusLock,
-      disableScrollLock: disableScrollLock,
-      preventClickEventBubbling: preventClickEventBubbling
+      disableScrollLock: disableScrollLock
     }), open ? /*#__PURE__*/React__default["default"].createElement(Overlay, {
       onClick: handleBackgroundClick,
       disableBackgroundColor: disableBackgroundColor
     }) : null, /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapper, {
-      className: classnames__default["default"]("c-sheet__wrapper", bodyClassName),
+      className: classNames__default["default"]("c-sheet__wrapper", bodyClassName),
       style: bodyStyle,
       $position: position,
       $mode: mode
@@ -8934,7 +8916,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledHeader, _extends({
       type: "paper-2",
-      className: classnames__default["default"]("c-header", className),
+      className: classNames__default["default"]("c-header", className),
       size: size,
       ref: ref
     }, rest), children);
@@ -9017,7 +8999,7 @@
       onKeyDown: handleTextAreaKeyDown,
       onFocus: handleFocus,
       rows: rows,
-      className: classnames__default["default"]("c-autoresizetextarea", className),
+      className: classNames__default["default"]("c-autoresizetextarea", className),
       style: {
         minHeight: "".concat(lineHeight, "px"),
         lineHeight: "".concat(lineHeight, "px")
@@ -9115,7 +9097,7 @@
         customToggleIcon: customToggleIcon
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledAccordion, {
-      className: classnames__default["default"]("accordion", className)
+      className: classNames__default["default"]("accordion", className)
     }, children));
   };
   Accordion.displayName = "Accordion";
@@ -9140,7 +9122,7 @@
         id: itemId
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledAccordionItem, {
-      className: classnames__default["default"]("accordionItem", className)
+      className: classNames__default["default"]("accordionItem", className)
     }, children));
   };
   AccordionItem.displayName = "AccordionItem";
@@ -9179,7 +9161,7 @@
     }, [customToggleIcon]);
     return /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemHead, {
       onClick: onClickCallback,
-      className: classnames__default["default"]("accordionItemHead", className)
+      className: classNames__default["default"]("accordionItemHead", className)
     }, /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemHeadText, {
       className: "accordionItemHead__text"
     }, children), /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemHeadIcon, {
@@ -9219,7 +9201,7 @@
     }, function (state) {
       return /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemBody, {
         ref: divRef,
-        className: classnames__default["default"]("accordionItemBody", className),
+        className: classNames__default["default"]("accordionItemBody", className),
         style: _objectSpread2(_objectSpread2({}, defaultStyle), transitionStyles[state])
       }, children);
     });
@@ -9270,7 +9252,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledChoose, _extends({
       disabled: disabled,
-      className: classnames__default["default"]("c-choose", className),
+      className: classNames__default["default"]("c-choose", className),
       active: active
     }, args), children);
   };
@@ -9370,7 +9352,7 @@
         args = _objectWithoutProperties(_ref, _excluded$m);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledBackLink, _extends({
-      className: classnames__default["default"]("c-back-link", className)
+      className: classNames__default["default"]("c-back-link", className)
     }, args), children);
   };
   BackLink.displayName = "BackLink";
@@ -9392,7 +9374,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledLink, _extends({
       disabled: disabled,
-      className: classnames__default["default"]("c-link", className, {
+      className: classNames__default["default"]("c-link", className, {
         "c-link--contained": variant === "primary" || variant === "contained",
         "c-link--outlined": variant === "secondary" || variant === "outlined",
         "c-link--text_colored": variant === "tertiary" || variant === "text colored",
@@ -9528,7 +9510,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(SlideFromTop, {
       in: open
     }, /*#__PURE__*/React__default["default"].createElement(StyledDialog, {
-      className: classnames__default["default"]("c-dialog", className)
+      className: classNames__default["default"]("c-dialog", className)
     }, children)));
   });
   Dialog.displayName = "Dialog";
@@ -9540,7 +9522,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$k);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogContent, _extends({
-      className: classnames__default["default"]("c-dialog-content", className)
+      className: classNames__default["default"]("c-dialog-content", className)
     }, rest), children);
   };
   DialogContent.displayName = "DialogContent";
@@ -9548,7 +9530,7 @@
   var DialogContentDivider = function DialogContentDivider(_ref) {
     var className = _ref.className;
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogContentDivider, {
-      className: classnames__default["default"]("c-dialog-content-divider", className)
+      className: classNames__default["default"]("c-dialog-content-divider", className)
     });
   };
   DialogContentDivider.displayName = "DialogContentDivider";
@@ -9562,7 +9544,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$j);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogTitle, _extends({
-      className: classnames__default["default"]("c-dialog-title-wrapper", className)
+      className: classNames__default["default"]("c-dialog-title-wrapper", className)
     }, rest), disableDefaultHeading ? children : /*#__PURE__*/React__default["default"].createElement(Header3, null, children));
   };
   DialogTitle.displayName = "DialogTitle";
@@ -9574,7 +9556,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$i);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogActions, _extends({
-      className: classnames__default["default"]("c-dialog-actions", className)
+      className: classNames__default["default"]("c-dialog-actions", className)
     }, rest), children);
   };
   DialogActions.displayName = "DialogActions";
@@ -9599,7 +9581,7 @@
       ref: ref,
       open: open,
       onClose: onCancel,
-      className: classnames__default["default"]("c-confirm-dialog", className)
+      className: classNames__default["default"]("c-confirm-dialog", className)
     }, /*#__PURE__*/React__default["default"].createElement(DialogTitle, null, dialogTitle), /*#__PURE__*/React__default["default"].createElement(DialogContentDivider, null), /*#__PURE__*/React__default["default"].createElement(DialogContent, null, /*#__PURE__*/React__default["default"].createElement(Body2, {
       lineHeight: "loose",
       color: "secondary",
@@ -9796,7 +9778,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledPressed, _extends({
       active: active,
       ref: ref,
-      className: classnames__default["default"]({
+      className: classNames__default["default"]({
         "c-pressed__active": active
       }, className)
     }, args), children);
@@ -9829,7 +9811,7 @@
       type: "button"
     }, /*#__PURE__*/React__default["default"].createElement(StyledIconComponent, {
       as: IconComponent,
-      className: classnames__default["default"]("date-picker-target", targetIconClassName)
+      className: classNames__default["default"]("date-picker-target", targetIconClassName)
     })));
   });
   SelectDateTarget.displayName = "SelectDateTarget";
@@ -10214,7 +10196,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(StyledSelectDateButton, {
         type: "button",
-        className: classnames__default["default"]("date-picker-target", targetClassName)
+        className: classNames__default["default"]("date-picker-target", targetClassName)
       }, /*#__PURE__*/React__default["default"].createElement("span", {
         className: targetTextClassName
       }, labelText));
@@ -10740,7 +10722,7 @@
         args = _objectWithoutProperties(_ref, _excluded$8);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledToggle, {
-      className: classnames__default["default"]("c-toggle", className),
+      className: classNames__default["default"]("c-toggle", className),
       $isHovered: hovered,
       tabIndex: 0
     }, /*#__PURE__*/React__default["default"].createElement(StyledToggleCheckbox, _extends({
@@ -10942,9 +10924,16 @@
     [ref, handler]);
   }
 
-  var _excluded$6 = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText"];
+  var ConditionalWrapper = function ConditionalWrapper(_ref) {
+    var condition = _ref.condition,
+        wrap = _ref.wrap,
+        children = _ref.children;
+    return condition ? wrap(children) : children;
+  };
+
+  var _excluded$6 = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName"];
   var ComboBox = function ComboBox(_ref) {
-    var _comboBoxRef$current;
+    var _comboBoxRef$current2, _comboBoxRef$current3;
 
     var _ref$options = _ref.options,
         options = _ref$options === void 0 ? [] : _ref$options,
@@ -10970,6 +10959,9 @@
         _ref$limitChips = _ref.limitChips,
         limitChips = _ref$limitChips === void 0 ? 2 : _ref$limitChips,
         hiddenNumberText = _ref.hiddenNumberText,
+        _ref$inPortal = _ref.inPortal,
+        inPortal = _ref$inPortal === void 0 ? false : _ref$inPortal,
+        inputWrapperClassName = _ref.inputWrapperClassName,
         prop = _objectWithoutProperties(_ref, _excluded$6);
 
     var selectedName = React.useMemo(function () {
@@ -11015,14 +11007,21 @@
     var handleRef = useForkRef(setChildNode, elementRef);
     var wrapperRef = React.useRef(null);
     var chipWrapper = React.useRef(null);
+    var comboBoxRef = React.useRef(null);
 
     var _useState5 = React.useState(false),
         _useState6 = _slicedToArray(_useState5, 2),
         open = _useState6[0],
         setOpen = _useState6[1];
 
-    useOnClickOutside(wrapperRef, function () {
-      return setOpen(false);
+    useOnClickOutside(wrapperRef, function (e) {
+      var _comboBoxRef$current;
+
+      if (e.target && (_comboBoxRef$current = comboBoxRef.current) !== null && _comboBoxRef$current !== void 0 && _comboBoxRef$current.contains(e.target)) {
+        return;
+      }
+
+      setOpen(false);
     });
     var handleOnKeyDown = React.useCallback(function (e) {
       if (e.key === "Escape" && open) {
@@ -11093,7 +11092,6 @@
     var handleMouseDown = React.useCallback(function (e) {
       e.preventDefault();
     }, []);
-    var comboBoxRef = React.useRef(null);
     var handleBlur = React.useCallback(function () {
       setValue(selectedName);
     }, [selectedName]);
@@ -11194,12 +11192,12 @@
     var showXIcon = Array.isArray(selected) && type === "multiple" && selected.length > 0;
     var hasSelected = type === "multiple" && Array.isArray(selected) && selected.length > 0;
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "c-combo-box",
-      ref: wrapperRef
+      className: "c-combo-box"
     }, type === "multiple" ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(_StyledStyledInputWrapper, {
       $size: size,
       $invalid: invalid,
-      className: "c-combo-box-input-wrapper",
+      ref: comboBoxRef,
+      className: classNames__default["default"]("c-combo-box-input-wrapper", inputWrapperClassName),
       onClick: function onClick() {
         var _elementRef$current;
 
@@ -11235,7 +11233,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)), /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
       $open: open
     }))))) : /*#__PURE__*/React__default["default"].createElement(StyledComboBoxInput, {
-      className: "c-combo-box-input",
+      className: classNames__default["default"]("c-combo-box-input", inputWrapperClassName),
       onBlur: handleBlur,
       onFocus: onOpen,
       wrapRef: comboBoxRef,
@@ -11259,19 +11257,26 @@
       }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
         $open: open
       })) : null
-    }), !disabled ? /*#__PURE__*/React__default["default"].createElement(Popper, {
+    }), !disabled ? /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
+      condition: inPortal,
+      wrap: function wrap(children) {
+        return /*#__PURE__*/React__default["default"].createElement(Portal, null, children);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Popper, {
       anchorEl: comboBoxRef.current,
       open: open,
       placement: "bottom",
       style: {
-        zIndex: 10
+        zIndex: 10,
+        width: (_comboBoxRef$current2 = comboBoxRef.current) === null || _comboBoxRef$current2 === void 0 ? void 0 : _comboBoxRef$current2.clientWidth
       },
+      ref: wrapperRef,
       strategy: "fixed"
     }, /*#__PURE__*/React__default["default"].createElement(reactRemoveScroll.RemoveScroll, {
       noIsolation: true,
       allowPinchZoom: true
     }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxList, {
-      $width: (_comboBoxRef$current = comboBoxRef.current) === null || _comboBoxRef$current === void 0 ? void 0 : _comboBoxRef$current.clientWidth
+      $width: (_comboBoxRef$current3 = comboBoxRef.current) === null || _comboBoxRef$current3 === void 0 ? void 0 : _comboBoxRef$current3.clientWidth
     }, /*#__PURE__*/React__default["default"].createElement(Autocomplete, _extends({}, prop, {
       inputEl: childNode,
       selected: selected,
@@ -11280,7 +11285,7 @@
       options: options,
       type: type,
       handleEmptyAction: emptyAction
-    }))))) : null);
+    })))))) : null);
   };
   ComboBox.displayName = "ComboBox";
 
@@ -11334,7 +11339,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledAddToListButton, _extends({
       ref: ref,
-      className: classnames__default["default"]("c--add-to-list-btn", className)
+      className: classNames__default["default"]("c--add-to-list-btn", className)
     }, rest), /*#__PURE__*/React__default["default"].createElement(StyledAddCrossIcon, null), /*#__PURE__*/React__default["default"].createElement(StyledText, {
       weight: "medium"
     }, text));
@@ -11753,7 +11758,7 @@
     var variant = size === "regular" ? "Body 2" : "Caption 1";
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       as: "label",
-      className: classnames__default["default"]("c-label", className),
+      className: classNames__default["default"]("c-label", className),
       variant: variant,
       color: color,
       weight: weight,
@@ -11838,7 +11843,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledSvg, {
       height: radius * 2,
       width: radius * 2,
-      className: classnames__default["default"](className)
+      className: classNames__default["default"](className)
     }, /*#__PURE__*/React__default["default"].createElement(StyledBackgroundCircle, {
       $color: backgroundColor,
       $strokeDashOffset: -strokeDashoffsetOuter,
@@ -11925,14 +11930,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) {
@@ -11997,17 +12000,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) {
@@ -12018,92 +12019,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,