@activecollab/components 1.0.150 → 1.0.153

package/dist/index.js

@@ -314,7 +314,7 @@
   })(["display:inline-flex;svg{margin:0 4px;}"]);
   StyledButtonElement.displayName = "StyledButtonElement";
 
-  var _excluded$13 = ["children", "variant", "size", "disabled", "className"];
+  var _excluded$16 = ["children", "variant", "size", "disabled", "className"];
 
   /**
    * Button component
@@ -328,7 +328,7 @@
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$13);
+        args = _objectWithoutProperties(_ref, _excluded$16);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledButton$2, _extends({
       disabled: disabled,
@@ -381,12 +381,12 @@
   })(["svg{fill:var(--color-theme-100);}&:hover svg{transform:rotate(90deg);transition:ease 0.3s;}"]);
   StyledGlobalAddButton.displayName = "StyledGlobalAddButton";
 
-  var _excluded$12 = ["className", "disabled"];
+  var _excluded$15 = ["className", "disabled"];
   var GlobalAddButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-        rest = _objectWithoutProperties(_ref, _excluded$12);
+        rest = _objectWithoutProperties(_ref, _excluded$15);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledGlobalAddButton, _extends({
       ref: ref,
@@ -419,11 +419,11 @@
   });
   StyledButtonGroup$1.displayName = "StyledButtonGroup";
 
-  var _excluded$11 = ["children", "className"];
+  var _excluded$14 = ["children", "className"];
   var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$11);
+        rest = _objectWithoutProperties(_ref, _excluded$14);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup$1, _extends({
       ref: ref,
@@ -486,7 +486,7 @@
     return React.useContext(MenuContext);
   };
 
-  var _excluded$10 = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy"];
+  var _excluded$13 = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy"];
   var Popper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         anchorEl = _ref.anchorEl,
@@ -499,7 +499,7 @@
         initialPlacement = _ref$placement === void 0 ? "bottom" : _ref$placement,
         _ref$strategy = _ref.strategy,
         strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
-        rest = _objectWithoutProperties(_ref, _excluded$10);
+        rest = _objectWithoutProperties(_ref, _excluded$13);
 
     var _useState = React.useState(true),
         _useState2 = _slicedToArray(_useState, 2),
@@ -605,12 +605,12 @@
   });
   StyledOverlay.displayName = "StyledOverlay";
 
-  var _excluded$$ = ["className", "disableBackgroundColor"];
+  var _excluded$12 = ["className", "disableBackgroundColor"];
   var Overlay = function Overlay(_ref) {
     var className = _ref.className,
         _ref$disableBackgroun = _ref.disableBackgroundColor,
         disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
-        rest = _objectWithoutProperties(_ref, _excluded$$);
+        rest = _objectWithoutProperties(_ref, _excluded$12);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledOverlay, _extends({
       className: classNames__default["default"]("c-overlay", className),
@@ -654,7 +654,7 @@
   })(["", " ", " position:fixed;top:0;right:0;bottom:0;left:0;"], FontStyle, BoxSizingStyle);
   StyledWindow.displayName = "StyledWindow";
 
-  var _excluded$_ = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "preventClickEventBubbling", "onClick"];
+  var _excluded$11 = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "preventClickEventBubbling", "onClick"];
   var returnFocus = {
     preventScroll: true
   };
@@ -671,7 +671,7 @@
         _ref$preventClickEven = _ref.preventClickEventBubbling,
         preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven,
         onClick = _ref.onClick,
-        rest = _objectWithoutProperties(_ref, _excluded$_);
+        rest = _objectWithoutProperties(_ref, _excluded$11);
 
     var innerRef = React.useRef(null);
     var handleRef = useForkRef(innerRef, ref);
@@ -745,7 +745,7 @@
   }, FontStyle, BoxSizingStyle);
   StyledBubble.displayName = "StyledBubble";
 
-  var _excluded$Z = ["children", "className", "innerRef", "style"];
+  var _excluded$10 = ["children", "className", "innerRef", "style"];
   var Bubble = function Bubble(_ref) {
     var children = _ref.children,
         className = _ref.className,
@@ -753,7 +753,7 @@
         innerRef = _ref$innerRef === void 0 ? null : _ref$innerRef,
         _ref$style = _ref.style,
         style = _ref$style === void 0 ? {} : _ref$style,
-        rest = _objectWithoutProperties(_ref, _excluded$Z);
+        rest = _objectWithoutProperties(_ref, _excluded$10);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledBubble, _extends({}, rest, {
       ref: innerRef,
@@ -763,7 +763,7 @@
   };
   Bubble.displayName = "Bubble";
 
-  var StyledMenu$1 = styled__default["default"](Bubble).withConfig({
+  var StyledMenu$2 = styled__default["default"](Bubble).withConfig({
     displayName: "Styles__StyledMenu",
     componentId: "sc-8fhkp-0"
   })(["", " ", " ", " color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", ""], {
@@ -779,8 +779,8 @@
   }, function (props) {
     return props.$mode === "tiny" && styled.css(["width:180px;"]);
   });
-  StyledMenu$1.displayName = "StyledMenu";
-  var StyledMenuFooter = styled__default["default"].div.withConfig({
+  StyledMenu$2.displayName = "StyledMenu";
+  var StyledMenuFooter$1 = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledMenuFooter",
     componentId: "sc-8fhkp-1"
   })(["", " display:flex;border-top:1px solid var(--border-primary);height:32px;align-items:center;"], {
@@ -790,7 +790,7 @@
     "paddingTop": "0.25rem",
     "paddingBottom": "0.25rem"
   });
-  StyledMenuFooter.displayName = "StyledMenuFooter";
+  StyledMenuFooter$1.displayName = "StyledMenuFooter";
   var StyledMenuHeader = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledMenuHeader",
     componentId: "sc-8fhkp-2"
@@ -895,7 +895,7 @@
       placement: position,
       className: popperClassName,
       tabIndex: -1
-    }, /*#__PURE__*/React__default["default"].createElement(StyledMenu$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledMenu$2, {
       className: classNames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName, className),
       $mode: mode,
       onMouseDown: onMenuClick
@@ -1072,7 +1072,7 @@
   });
   StyledTypography.displayName = "StyledTypography";
 
-  var _excluded$Y = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
+  var _excluded$$ = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
   var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$variant = _ref.variant,
         variant = _ref$variant === void 0 ? "Title 1" : _ref$variant,
@@ -1103,7 +1103,7 @@
         weight = _ref$weight === void 0 ? "regular" : _ref$weight,
         className = _ref.className,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$Y);
+        props = _objectWithoutProperties(_ref, _excluded$$);
 
     var Component = as || "div";
     return /*#__PURE__*/React__default["default"].createElement(StyledTypography, _extends({
@@ -1127,13 +1127,13 @@
   });
   Typography.displayName = "Typography";
 
-  var _excluded$X = ["title", "className", "leftElement", "rightElement"];
+  var _excluded$_ = ["title", "className", "leftElement", "rightElement"];
   var MenuHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var title = _ref.title,
         className = _ref.className,
         leftElement = _ref.leftElement,
         rightElement = _ref.rightElement,
-        props = _objectWithoutProperties(_ref, _excluded$X);
+        props = _objectWithoutProperties(_ref, _excluded$_);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuHeader, _extends({}, props, {
       className: classNames__default["default"]("c-menu-header", className),
@@ -1159,13 +1159,13 @@
   });
   MenuHeader.displayName = "MenuHeader";
 
-  var _excluded$W = ["children", "className"];
+  var _excluded$Z = ["children", "className"];
   var MenuFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$W);
+        props = _objectWithoutProperties(_ref, _excluded$Z);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter, _extends({}, props, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter$1, _extends({}, props, {
       className: classNames__default["default"]("c-menu-footer", className),
       ref: ref
     }), children);
@@ -1204,11 +1204,11 @@
   })(["border-top:1px solid var(--border-primary);margin:12px 16px;height:1px;"]);
   StyledListSeparator.displayName = "StyledListSeparator";
 
-  var _excluded$V = ["children", "className"];
+  var _excluded$Y = ["children", "className"];
   var List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$V);
+        props = _objectWithoutProperties(_ref, _excluded$Y);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({}, props, {
       className: className,
@@ -1217,11 +1217,11 @@
   });
   List.displayName = "List";
 
-  var _excluded$U = ["children", "className"];
+  var _excluded$X = ["children", "className"];
   var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$U);
+        props = _objectWithoutProperties(_ref, _excluded$X);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledListItem, _extends({}, props, {
       className: classNames__default["default"]("c-list-item", className),
@@ -3713,7 +3713,7 @@
   });
   StyledBreadcrumbListItem.displayName = "StyledBreadcrumbListItem";
 
-  var _excluded$T = ["children", "className", "separator"];
+  var _excluded$W = ["children", "className", "separator"];
   var Breadcrumbs = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _dimensions$width, _childDimensions$widt;
 
@@ -3721,7 +3721,7 @@
         className = _ref.className,
         _ref$separator = _ref.separator,
         separator = _ref$separator === void 0 ? "/" : _ref$separator,
-        rest = _objectWithoutProperties(_ref, _excluded$T);
+        rest = _objectWithoutProperties(_ref, _excluded$W);
 
     var internalRef = React.useRef(null);
     var listWrapperRef = React.useRef(null);
@@ -3908,11 +3908,11 @@
     return props.$isLight && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);color:var(--color-theme-700);"]);
   });
 
-  var _excluded$S = ["children"];
+  var _excluded$V = ["children"];
 
   var TooltipAnimation = function TooltipAnimation(_ref) {
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$S);
+        props = _objectWithoutProperties(_ref, _excluded$V);
 
     return /*#__PURE__*/React__default["default"].createElement(FromElement, _extends({
       timeout: 0
@@ -3999,12 +3999,12 @@
   });
   Tooltip.displayName = "Tooltip";
 
-  var _excluded$R = ["weight", "children"];
+  var _excluded$U = ["weight", "children"];
   var Body2 = /*#__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$R);
+        props = _objectWithoutProperties(_ref, _excluded$U);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Body 2",
@@ -4052,7 +4052,7 @@
   });
   StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
 
-  var _excluded$Q = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className"];
+  var _excluded$T = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className"];
   var CounterButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var label = _ref.label,
         icon = _ref.icon,
@@ -4062,7 +4062,7 @@
         tooltipText = _ref.tooltipText,
         onClearAll = _ref.onClearAll,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$Q);
+        args = _objectWithoutProperties(_ref, _excluded$T);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonWrapper, {
       className: className
@@ -4377,7 +4377,7 @@
   StyledDatePicker.displayName = "StyledDatePicker";
   StyledDayPicker.displayName = "StyledDayPicker";
 
-  var _excluded$P = ["className", "onChange", "onDayClick", "selectedDays", "disabledDays", "selectionMode", "month", "onMonthChange", "dateRequired", "firstDayOfWeek", "fixedWeeks", "modifiers"];
+  var _excluded$S = ["className", "onChange", "onDayClick", "selectedDays", "disabledDays", "selectionMode", "month", "onMonthChange", "dateRequired", "firstDayOfWeek", "fixedWeeks", "modifiers"];
   var DatePicker = function DatePicker(_ref) {
     var className = _ref.className,
         onChange = _ref.onChange,
@@ -4399,7 +4399,7 @@
         _ref$fixedWeeks = _ref.fixedWeeks,
         fixedWeeks = _ref$fixedWeeks === void 0 ? true : _ref$fixedWeeks,
         defaultModifiers = _ref.modifiers,
-        rest = _objectWithoutProperties(_ref, _excluded$P);
+        rest = _objectWithoutProperties(_ref, _excluded$S);
 
     var _useState = React.useState(),
         _useState2 = _slicedToArray(_useState, 2),
@@ -4747,7 +4747,7 @@
     "cursor": "pointer",
     "textAlign": "center"
   });
-  var StyledMenu = styled__default["default"](Menu).withConfig({
+  var StyledMenu$1 = styled__default["default"](Menu).withConfig({
     displayName: "Styles__StyledMenu",
     componentId: "sc-1v8h7mt-1"
   })(["", ""], {
@@ -4796,7 +4796,7 @@
   StyledButtonGroup.displayName = "StyledButtonGroup";
   StyledSpan.displayName = "StyledSpan";
   StyledDiv.displayName = "StyledDiv";
-  StyledMenu.displayName = "StyledMenu";
+  StyledMenu$1.displayName = "StyledMenu";
   StyledButton$1.displayName = "StyledButton";
 
   /**
@@ -5052,7 +5052,7 @@
       $isTargetable: step === "yearly" || !withDatePicker,
       $isRounded: step === "custom",
       style: dateStepperWidth(fromDate, toDate, step)
-    }, withDatePicker ? /*#__PURE__*/React__default["default"].createElement(StyledMenu, {
+    }, withDatePicker ? /*#__PURE__*/React__default["default"].createElement(StyledMenu$1, {
       target: /*#__PURE__*/React__default["default"].createElement(StyledButton$1, {
         type: "button"
       }, /*#__PURE__*/React__default["default"].createElement("span", null, getDateFormatted)),
@@ -5324,7 +5324,7 @@
   };
   Tbody.displayName = "Tbody";
 
-  var _excluded$O = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue"];
+  var _excluded$R = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue"];
   exports.SortDirection = void 0;
 
   (function (SortDirection) {
@@ -5374,7 +5374,7 @@
     } : _ref$groupHead,
         isCollapsible = _ref.isCollapsible,
         emptyValue = _ref.emptyValue,
-        args = _objectWithoutProperties(_ref, _excluded$O);
+        args = _objectWithoutProperties(_ref, _excluded$R);
 
     var _useState = React.useState(sortDirection),
         _useState2 = _slicedToArray(_useState, 2),
@@ -5784,17 +5784,18 @@
   };
   CompleteCheckbox.displayName = "CompleteCheckbox";
 
+  var PaperStyles = styled.css(["", " border-radius:var(--ac-br-8);", " ", ""], {
+    "backgroundColor": "var(--page-paper-main)"
+  }, FontStyle, BoxSizingStyle);
   var StyledPaper = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledPaper",
     componentId: "sc-1ld1e2o-0"
-  })(["", " border-radius:var(--ac-br-8);", " ", " ", ""], {
-    "backgroundColor": "var(--page-paper-main)"
-  }, FontStyle, BoxSizingStyle, function (props) {
+  })(["", " ", ""], PaperStyles, function (props) {
     return props.type === "paper-3" && styled.css(["border:solid 1px var(--border-primary);"]);
   });
   StyledPaper.displayName = "StyledPaper";
 
-  var _excluded$N = ["children", "className", "type", "hover", "useOptimizedShadow"];
+  var _excluded$Q = ["children", "className", "type", "hover", "useOptimizedShadow"];
 
   /**
    * This is a component description and should sit directly above your component
@@ -5808,7 +5809,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$N);
+        rest = _objectWithoutProperties(_ref, _excluded$Q);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledPaper, _extends({
       className: classNames__default["default"](className, {
@@ -5862,7 +5863,7 @@
   });
   StyledCard.displayName = "StyledCard";
 
-  var _excluded$M = ["children", "className", "hoverable", "paperType"];
+  var _excluded$P = ["children", "className", "hoverable", "paperType"];
   var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
@@ -5870,7 +5871,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$M);
+        rest = _objectWithoutProperties(_ref, _excluded$P);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends({}, rest, {
       type: paperType,
@@ -5882,7 +5883,7 @@
   });
   Card.displayName = "Card";
 
-  var StyledEntityCard = styled__default["default"](Card).withConfig({
+  var StyledEntityCard$1 = styled__default["default"](Card).withConfig({
     displayName: "Styles__StyledEntityCard",
     componentId: "sc-3vmxf-0"
   })(["padding:12px;line-height:1.375;", " ", ""], function (props) {
@@ -5890,9 +5891,9 @@
   }, function (props) {
     return props.$renderAs === "grid-item" && styled.css(["display:flex;flex-direction:column;height:250px;width:250px;.card-body{flex-grow:1;}"]);
   });
-  StyledEntityCard.displayName = "StyledEntityCard";
+  StyledEntityCard$1.displayName = "StyledEntityCard";
 
-  var EntityCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var EntityCard$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$renderAs = _ref.renderAs,
         renderAs = _ref$renderAs === void 0 ? "list-item" : _ref$renderAs,
         properties = _ref.properties,
@@ -5939,7 +5940,7 @@
         return renderProperty(p);
       })));
     }, []);
-    return /*#__PURE__*/React__default["default"].createElement(StyledEntityCard, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledEntityCard$1, {
       ref: ref,
       hoverable: true,
       className: classNames__default["default"]("entity-card-wrapper", {
@@ -5950,14 +5951,14 @@
       $renderAs: renderAs
     }, renderAs === "list-item" ? renderAsListItem(properties) : null, renderAs === "grid-item" ? renderAsGridItem(properties) : null);
   });
-  EntityCard.displayName = "EntityCard";
+  EntityCard$1.displayName = "EntityCard";
 
-  var _excluded$L = ["weight", "children"];
+  var _excluded$O = ["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$L);
+        props = _objectWithoutProperties(_ref, _excluded$O);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: weight,
@@ -5967,12 +5968,12 @@
   });
   Title1.displayName = "Title1";
 
-  var _excluded$K = ["weight", "children"];
+  var _excluded$N = ["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$K);
+        props = _objectWithoutProperties(_ref, _excluded$N);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: weight,
@@ -5982,10 +5983,10 @@
   });
   Title2.displayName = "Title2";
 
-  var _excluded$J = ["children"];
+  var _excluded$M = ["children"];
   var Header2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$J);
+        props = _objectWithoutProperties(_ref, _excluded$M);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
@@ -5995,10 +5996,10 @@
   });
   Header2.displayName = "Header2";
 
-  var _excluded$I = ["children"];
+  var _excluded$L = ["children"];
   var Header3 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$I);
+        props = _objectWithoutProperties(_ref, _excluded$L);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
@@ -6008,12 +6009,12 @@
   });
   Header3.displayName = "Header3";
 
-  var _excluded$H = ["weight", "children"];
+  var _excluded$K = ["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$H);
+        props = _objectWithoutProperties(_ref, _excluded$K);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Body 1",
@@ -6023,12 +6024,12 @@
   });
   Body1.displayName = "Body1";
 
-  var _excluded$G = ["weight", "children"];
+  var _excluded$J = ["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$G);
+        props = _objectWithoutProperties(_ref, _excluded$J);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 1",
@@ -6038,12 +6039,12 @@
   });
   Caption1.displayName = "Caption1";
 
-  var _excluded$F = ["weight", "children"];
+  var _excluded$I = ["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$F);
+        props = _objectWithoutProperties(_ref, _excluded$I);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 2",
@@ -6162,7 +6163,7 @@
     "borderRadius": "9999px"
   });
 
-  var _excluded$E = ["url", "alt", "size", "className"];
+  var _excluded$H = ["url", "alt", "size", "className"];
   var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var url = _ref.url,
         _ref$alt = _ref.alt,
@@ -6170,7 +6171,7 @@
         _ref$size = _ref.size,
         size = _ref$size === void 0 ? 24 : _ref$size,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$E);
+        rest = _objectWithoutProperties(_ref, _excluded$H);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({}, rest, {
       ref: ref,
@@ -6192,13 +6193,13 @@
     return props.$color && styled.css(["background-color:", ";"], props.$color);
   });
 
-  var _excluded$D = ["color", "size", "className"];
+  var _excluded$G = ["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$D);
+        rest = _objectWithoutProperties(_ref, _excluded$G);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDot, _extends({
       className: classNames__default["default"]("c-dot", className),
@@ -6236,7 +6237,7 @@
   });
   StyledTagText.displayName = "StyledTagText";
 
-  var _excluded$C = ["name", "color", "showText", "showDot", "className"];
+  var _excluded$F = ["name", "color", "showText", "showDot", "className"];
   var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var name = _ref.name,
         color = _ref.color,
@@ -6245,7 +6246,7 @@
         _ref$showDot = _ref.showDot,
         showDot = _ref$showDot === void 0 ? true : _ref$showDot,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$C);
+        rest = _objectWithoutProperties(_ref, _excluded$F);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledTag, _extends({
       className: classNames__default["default"]("c-tag", className),
@@ -6265,10 +6266,10 @@
     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$B = ["className"];
+  var _excluded$E = ["className"];
   var LinearLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$B);
+        rest = _objectWithoutProperties(_ref, _excluded$E);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
       ref: ref,
@@ -6283,10 +6284,10 @@
     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$A = ["className"];
+  var _excluded$D = ["className"];
   var DotsLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$A);
+        rest = _objectWithoutProperties(_ref, _excluded$D);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
       ref: ref,
@@ -6309,7 +6310,7 @@
     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$z = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
+  var _excluded$C = ["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,
@@ -6324,7 +6325,7 @@
         _ref$rotateDurationIn = _ref.rotateDurationInSeconds,
         rotateDurationInSeconds = _ref$rotateDurationIn === void 0 ? 0.75 : _ref$rotateDurationIn,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$z);
+        rest = _objectWithoutProperties(_ref, _excluded$C);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader, _extends({
       ref: ref,
@@ -6454,7 +6455,7 @@
   }, StyledInput$1, StyledLabel);
   StyledCheckbox$1.displayName = "StyledCheckbox";
 
-  var _excluded$y = ["className", "hover", "id"];
+  var _excluded$B = ["className", "hover", "id"];
 
   /**
    * Checkbox component
@@ -6464,7 +6465,7 @@
         hover = _ref.hover,
         _ref$id = _ref.id,
         id = _ref$id === void 0 ? "checkbox" : _ref$id,
-        rest = _objectWithoutProperties(_ref, _excluded$y);
+        rest = _objectWithoutProperties(_ref, _excluded$B);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox$1, {
       className: classNames__default["default"]("c-checkbox", {
@@ -6654,7 +6655,7 @@
   StyledScrollShadowLeft.displayName = "StyledScrollShadowLeft";
   StyledScrollShadowRight.displayName = "StyledScrollShadowRight";
 
-  var _excluded$x = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical", "innerColor", "outerColor"];
+  var _excluded$A = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical", "innerColor", "outerColor"];
   var ScrollShadow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
@@ -6668,7 +6669,7 @@
         invertVertical = _ref$invertVertical === void 0 ? false : _ref$invertVertical,
         innerColor = _ref.innerColor,
         outerColor = _ref.outerColor,
-        rest = _objectWithoutProperties(_ref, _excluded$x);
+        rest = _objectWithoutProperties(_ref, _excluded$A);
 
     var _useState = React.useState({
       top: 0,
@@ -6798,7 +6799,7 @@
     return height;
   };
 
-  var _excluded$w = ["as", "className", "invert", "style"];
+  var _excluded$z = ["as", "className", "invert", "style"];
   var ScrollElement = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$as = _ref.as,
         as = _ref$as === void 0 ? "div" : _ref$as,
@@ -6806,7 +6807,7 @@
         _ref$invert = _ref.invert,
         invert = _ref$invert === void 0 ? false : _ref$invert,
         style = _ref.style,
-        rest = _objectWithoutProperties(_ref, _excluded$w);
+        rest = _objectWithoutProperties(_ref, _excluded$z);
 
     var internalRef = useInitScrollRef(null, invert);
     var handleRef = useForkRef(internalRef, ref);
@@ -7313,7 +7314,7 @@
   });
   StyledInput.displayName = "StyledInput";
 
-  var _excluded$v = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef"];
+  var _excluded$y = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef"];
   var Input = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _ref$className = _ref.className,
         className = _ref$className === void 0 ? "" : _ref$className,
@@ -7329,7 +7330,7 @@
         startAdornment = _ref.startAdornment,
         endAdornment = _ref.endAdornment,
         wrapRef = _ref.wrapRef,
-        rest = _objectWithoutProperties(_ref, _excluded$v);
+        rest = _objectWithoutProperties(_ref, _excluded$y);
 
     var intInputRef = React.useRef(null);
     var handleRef = useForkRef(ref, intInputRef);
@@ -7382,14 +7383,14 @@
   }, StyledRadioLabel);
   StyledRadioButton$1.displayName = "StyledRadioButton";
 
-  var _excluded$u = ["className", "id", "hover"];
+  var _excluded$x = ["className", "id", "hover"];
   var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$className = _ref.className,
         className = _ref$className === void 0 ? "" : _ref$className,
         _ref$id = _ref.id,
         id = _ref$id === void 0 ? "radio" : _ref$id,
         hover = _ref.hover,
-        props = _objectWithoutProperties(_ref, _excluded$u);
+        props = _objectWithoutProperties(_ref, _excluded$x);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledRadioButton$1, {
       className: classNames__default["default"]("c-radio-btn", {
@@ -7437,7 +7438,7 @@
   var StyledOptionContentWrapper = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledOptionContentWrapper",
     componentId: "sc-6fiqyy-0"
-  })(["display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;height:100%;"]);
+  })(["display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;height:100%;flex-grow:1;"]);
   StyledOptionContentWrapper.displayName = "StyledOptionContentWrapper";
   var StyledOptionIndicator = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledOptionIndicator",
@@ -7482,7 +7483,7 @@
   };
   OptionContent.displayName = "OptionContent";
 
-  var _excluded$t = ["type", "mode", "target", "options", "selected", "position", "onChange", "actionIcon", "actionLabel", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose", "renderOption", "handleDefaultOptionChange", "preselectDefaultValue"];
+  var _excluded$w = ["type", "mode", "target", "options", "selected", "position", "onChange", "actionIcon", "actionLabel", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose", "renderOption", "handleDefaultOptionChange", "preselectDefaultValue"];
   var Select = function Select(_ref) {
     var _ref$type = _ref.type,
         type = _ref$type === void 0 ? "single" : _ref$type,
@@ -7516,7 +7517,7 @@
         handleDefaultOptionChange = _ref.handleDefaultOptionChange,
         _ref$preselectDefault = _ref.preselectDefaultValue,
         preselectDefaultValue = _ref$preselectDefault === void 0 ? type === "single" : _ref$preselectDefault,
-        prop = _objectWithoutProperties(_ref, _excluded$t);
+        prop = _objectWithoutProperties(_ref, _excluded$w);
 
     var _useState = React.useState(),
         _useState2 = _slicedToArray(_useState, 2),
@@ -7775,7 +7776,7 @@
   });
   StyledNavAsMoreTarget.displayName = "StyledNavAsMoreTarget";
 
-  var _excluded$s = ["children", "active", "disabled", "className", "role"];
+  var _excluded$v = ["children", "active", "disabled", "className", "role"];
   var Item = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var children = _ref.children,
         _ref$active = _ref.active,
@@ -7784,7 +7785,7 @@
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
         className = _ref.className,
         role = _ref.role,
-        rest = _objectWithoutProperties(_ref, _excluded$s);
+        rest = _objectWithoutProperties(_ref, _excluded$v);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledNavListItem, _extends({
       className: classNames__default["default"]("c-nav__item", {
@@ -7826,11 +7827,11 @@
   });
   StyledExpandSingle.displayName = "StyledExpandSingle";
 
-  var _excluded$r = ["expanded"];
+  var _excluded$u = ["expanded"];
   var ExpandSingle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$expanded = _ref.expanded,
         expanded = _ref$expanded === void 0 ? false : _ref$expanded,
-        rest = _objectWithoutProperties(_ref, _excluded$r);
+        rest = _objectWithoutProperties(_ref, _excluded$u);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledExpandSingle, _extends({
       ref: ref,
@@ -8143,7 +8144,7 @@
   };
   Nav.displayName = "Nav";
 
-  var _excluded$q = ["children", "as", "disablePointerEvents"];
+  var _excluded$t = ["children", "as", "disablePointerEvents"];
   var InputAdornmentBase = styled__default["default"].div.withConfig({
     displayName: "InputAdornment__InputAdornmentBase",
     componentId: "sc-1xfjx1z-0"
@@ -8160,7 +8161,7 @@
     var children = _ref.children,
         as = _ref.as,
         disablePointerEvents = _ref.disablePointerEvents,
-        rest = _objectWithoutProperties(_ref, _excluded$q);
+        rest = _objectWithoutProperties(_ref, _excluded$t);
 
     var Component = as || "div";
     return /*#__PURE__*/React__default["default"].createElement(InputAdornmentBase, _extends({}, rest, {
@@ -8171,11 +8172,11 @@
   });
   InputAdornment.displayName = "InputAdornment";
 
-  var _excluded$p = ["expanded"];
+  var _excluded$s = ["expanded"];
   var ExpandAll = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$expanded = _ref.expanded,
         expanded = _ref$expanded === void 0 ? false : _ref$expanded,
-        rest = _objectWithoutProperties(_ref, _excluded$p);
+        rest = _objectWithoutProperties(_ref, _excluded$s);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledExpand, _extends({
       ref: ref,
@@ -8382,14 +8383,14 @@
   });
   StyledTextarea.displayName = "StyledTextarea";
 
-  var _excluded$o = ["className", "disabled", "invalid"];
+  var _excluded$r = ["className", "disabled", "invalid"];
   var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
         _ref$invalid = _ref.invalid,
         invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-        rest = _objectWithoutProperties(_ref, _excluded$o);
+        rest = _objectWithoutProperties(_ref, _excluded$r);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledTextarea, _extends({}, rest, {
       $invalid: invalid,
@@ -8424,7 +8425,7 @@
     function () {});
   }
 
-  var _excluded$n = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "preventClickEventBubbling", "open", "onClose"];
+  var _excluded$q = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "preventClickEventBubbling", "open", "onClose"];
 
   var getHasTransition = function getHasTransition(children) {
     return children.props ? Object.prototype.hasOwnProperty.call(children.props, "in") : false;
@@ -8445,7 +8446,7 @@
         _ref$open = _ref.open,
         defaultOpen = _ref$open === void 0 ? false : _ref$open,
         onClose = _ref.onClose,
-        rest = _objectWithoutProperties(_ref, _excluded$n);
+        rest = _objectWithoutProperties(_ref, _excluded$q);
 
     var _useState = React.useState(defaultOpen),
         _useState2 = _slicedToArray(_useState, 2),
@@ -8585,7 +8586,7 @@
   });
   StyledCssTransition.displayName = "StyledCssTransition";
 
-  var _excluded$m = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick", "preventClickEventBubbling"];
+  var _excluded$p = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick", "preventClickEventBubbling"];
   var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         onClose = _ref.onClose,
@@ -8611,7 +8612,7 @@
         disableBackgroundClick = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
         _ref$preventClickEven = _ref.preventClickEventBubbling,
         preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven,
-        rest = _objectWithoutProperties(_ref, _excluded$m);
+        rest = _objectWithoutProperties(_ref, _excluded$p);
 
     var _useState = React.useState(defaultOpen),
         _useState2 = _slicedToArray(_useState, 2),
@@ -8710,13 +8711,13 @@
   });
   StyledHeader.displayName = "StyledHeader";
 
-  var _excluded$l = ["className", "size", "children"];
+  var _excluded$o = ["className", "size", "children"];
   var Header = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
         _ref$size = _ref.size,
         size = _ref$size === void 0 ? "small" : _ref$size,
         children = _ref.children,
-        rest = _objectWithoutProperties(_ref, _excluded$l);
+        rest = _objectWithoutProperties(_ref, _excluded$o);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledHeader, _extends({
       type: "paper-2",
@@ -8733,7 +8734,7 @@
   })(["white-space:pre-wrap;overflow-wrap:break-word;resize:none;"]);
   StyledAutoResizeTextarea.displayName = "StyledAutoResizeTextarea";
 
-  var _excluded$k = ["minRows", "maxRows", "lineHeight", "onChange", "className", "preventNewRowOnEnter", "cursorAtTextEnd", "onKeyDown", "value"];
+  var _excluded$n = ["minRows", "maxRows", "lineHeight", "onChange", "className", "preventNewRowOnEnter", "cursorAtTextEnd", "onKeyDown", "value"];
   var AutoResizeTextarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$minRows = _ref.minRows,
         minRows = _ref$minRows === void 0 ? 1 : _ref$minRows,
@@ -8749,7 +8750,7 @@
         cursorAtTextEnd = _ref$cursorAtTextEnd === void 0 ? false : _ref$cursorAtTextEnd,
         onKeyDown = _ref.onKeyDown,
         value = _ref.value,
-        rest = _objectWithoutProperties(_ref, _excluded$k);
+        rest = _objectWithoutProperties(_ref, _excluded$n);
 
     var innerRef = React.useRef(null);
 
@@ -9040,7 +9041,7 @@
   });
   StyledChoose.displayName = "StyledChoose";
 
-  var _excluded$j = ["children", "disabled", "active", "className"];
+  var _excluded$m = ["children", "disabled", "active", "className"];
 
   /**
    * Choose component
@@ -9052,7 +9053,7 @@
         _ref$active = _ref.active,
         active = _ref$active === void 0 ? false : _ref$active,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$j);
+        args = _objectWithoutProperties(_ref, _excluded$m);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledChoose, _extends({
       disabled: disabled,
@@ -9145,7 +9146,7 @@
   StyledLinkElements.displayName = "StyledLinkElements";
   StyledLink.displayName = "StyledLink";
 
-  var _excluded$i = ["children", "className"];
+  var _excluded$l = ["children", "className"];
 
   /**
    * Back link component
@@ -9153,7 +9154,7 @@
   var BackLink = function BackLink(_ref) {
     var children = _ref.children,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$i);
+        args = _objectWithoutProperties(_ref, _excluded$l);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledBackLink, _extends({
       className: classNames__default["default"]("c-back-link", className)
@@ -9161,7 +9162,7 @@
   };
   BackLink.displayName = "BackLink";
 
-  var _excluded$h = ["children", "variant", "size", "disabled", "className"];
+  var _excluded$k = ["children", "variant", "size", "disabled", "className"];
 
   /**
    * Link component
@@ -9174,7 +9175,7 @@
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$h);
+        args = _objectWithoutProperties(_ref, _excluded$k);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledLink, _extends({
       disabled: disabled,
@@ -9319,11 +9320,11 @@
   });
   Dialog.displayName = "Dialog";
 
-  var _excluded$g = ["className", "children"];
+  var _excluded$j = ["className", "children"];
   var DialogContent = function DialogContent(_ref) {
     var className = _ref.className,
         children = _ref.children,
-        rest = _objectWithoutProperties(_ref, _excluded$g);
+        rest = _objectWithoutProperties(_ref, _excluded$j);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogContent, _extends({
       className: classNames__default["default"]("c-dialog-content", className)
@@ -9339,13 +9340,13 @@
   };
   DialogContentDivider.displayName = "DialogContentDivider";
 
-  var _excluded$f = ["children", "className", "disableDefaultHeading"];
+  var _excluded$i = ["children", "className", "disableDefaultHeading"];
   var DialogTitle = function DialogTitle(_ref) {
     var children = _ref.children,
         className = _ref.className,
         _ref$disableDefaultHe = _ref.disableDefaultHeading,
         disableDefaultHeading = _ref$disableDefaultHe === void 0 ? false : _ref$disableDefaultHe,
-        rest = _objectWithoutProperties(_ref, _excluded$f);
+        rest = _objectWithoutProperties(_ref, _excluded$i);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogTitle, _extends({
       className: classNames__default["default"]("c-dialog-title-wrapper", className)
@@ -9353,11 +9354,11 @@
   };
   DialogTitle.displayName = "DialogTitle";
 
-  var _excluded$e = ["className", "children"];
+  var _excluded$h = ["className", "children"];
   var DialogActions = function DialogActions(_ref) {
     var className = _ref.className,
         children = _ref.children,
-        rest = _objectWithoutProperties(_ref, _excluded$e);
+        rest = _objectWithoutProperties(_ref, _excluded$h);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogActions, _extends({
       className: classNames__default["default"]("c-dialog-actions", className)
@@ -9567,7 +9568,7 @@
   });
   StyledPressed.displayName = "StyledPressed";
 
-  var _excluded$d = ["children", "active", "className"];
+  var _excluded$g = ["children", "active", "className"];
 
   /**
    * Pressed wrapper for button component
@@ -9577,7 +9578,7 @@
         _ref$active = _ref.active,
         active = _ref$active === void 0 ? false : _ref$active,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$d);
+        args = _objectWithoutProperties(_ref, _excluded$g);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledPressed, _extends({
       active: active,
@@ -10063,7 +10064,7 @@
   StyledToastMessage.displayName = "StyledToastMessage";
   StyledCloseSmallIcon.displayName = "StyledCloseSmallIcon";
 
-  var _excluded$c = ["text", "type", "onClose", "dismissible", "dropShadow", "timeout"];
+  var _excluded$f = ["text", "type", "onClose", "dismissible", "dropShadow", "timeout"];
   var ToastMessage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var text = _ref.text,
         type = _ref.type,
@@ -10074,7 +10075,7 @@
         dropShadow = _ref$dropShadow === void 0 ? false : _ref$dropShadow,
         _ref$timeout = _ref.timeout,
         timeout = _ref$timeout === void 0 ? 0 : _ref$timeout,
-        rest = _objectWithoutProperties(_ref, _excluded$c);
+        rest = _objectWithoutProperties(_ref, _excluded$f);
 
     var handleOnClose = React.useCallback(function () {
       if (typeof onClose === "function") {
@@ -10099,7 +10100,7 @@
   });
   ToastMessage.displayName = "ToastMessage";
 
-  var _excluded$b = ["in", "children", "style", "timeout"];
+  var _excluded$e = ["in", "children", "style", "timeout"];
 
   var defaultStyle$1 = function defaultStyle(duration) {
     return {
@@ -10129,7 +10130,7 @@
         style = _ref.style,
         _ref$timeout = _ref.timeout,
         timeout = _ref$timeout === void 0 ? 500 : _ref$timeout,
-        rest = _objectWithoutProperties(_ref, _excluded$b);
+        rest = _objectWithoutProperties(_ref, _excluded$e);
 
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
       appear: true,
@@ -10145,7 +10146,7 @@
   };
   Fade.displayName = "Fade";
 
-  var _excluded$a = ["in", "children", "style", "timeout", "initialDirection"];
+  var _excluded$d = ["in", "children", "style", "timeout", "initialDirection"];
   var Slide = function Slide(_ref) {
     var _ref$in = _ref.in,
         inProp = _ref$in === void 0 ? false : _ref$in,
@@ -10155,7 +10156,7 @@
         timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
         _ref$initialDirection = _ref.initialDirection,
         initialDirection = _ref$initialDirection === void 0 ? "left" : _ref$initialDirection,
-        rest = _objectWithoutProperties(_ref, _excluded$a);
+        rest = _objectWithoutProperties(_ref, _excluded$d);
 
     var directionSign;
 
@@ -10215,12 +10216,12 @@
     return props.$direction === "right" && styled.css(["&.c-slide-enter{position:absolute;transform:translateX(-100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(100%);transition:all 200ms ease;}"]);
   });
 
-  var _excluded$9 = ["children", "direction"];
+  var _excluded$c = ["children", "direction"];
   var SlideLeftRightTransition = function SlideLeftRightTransition(_ref) {
     var children = _ref.children,
         _ref$direction = _ref.direction,
         direction = _ref$direction === void 0 ? "left" : _ref$direction,
-        props = _objectWithoutProperties(_ref, _excluded$9);
+        props = _objectWithoutProperties(_ref, _excluded$c);
 
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, _extends({
       timeout: 200,
@@ -10264,7 +10265,7 @@
   };
   ResizeTransition.displayName = "ResizeTransition";
 
-  var _excluded$8 = ["in", "children", "style", "timeout"];
+  var _excluded$b = ["in", "children", "style", "timeout"];
 
   var defaultStyle = function defaultStyle(duration) {
     return {
@@ -10300,7 +10301,7 @@
         style = _ref.style,
         _ref$timeout = _ref.timeout,
         timeout = _ref$timeout === void 0 ? 200 : _ref$timeout,
-        rest = _objectWithoutProperties(_ref, _excluded$8);
+        rest = _objectWithoutProperties(_ref, _excluded$b);
 
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
       appear: true,
@@ -10375,7 +10376,7 @@
   });
   StyledValueButton.displayName = "StyledValueButton";
 
-  var _excluded$7 = ["active", "alwaysShowIcon", "icon", "label", "value"];
+  var _excluded$a = ["active", "alwaysShowIcon", "icon", "label", "value"];
   var ValueButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$active = _ref.active,
         active = _ref$active === void 0 ? false : _ref$active,
@@ -10384,7 +10385,7 @@
         icon = _ref.icon,
         label = _ref.label,
         value = _ref.value,
-        args = _objectWithoutProperties(_ref, _excluded$7);
+        args = _objectWithoutProperties(_ref, _excluded$a);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledValueButton, _extends({
       className: "c-value-button"
@@ -10414,12 +10415,12 @@
   })(["border:none;margin:0;padding:0;width:auto;overflow:visible;cursor:pointer;background:transparent;outline:none;color:inherit;font:inherit;line-height:inherit;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;&::-moz-focus-inner{border:0;padding:0;}"]);
   StyledButton.displayName = "StyledButton";
 
-  var _excluded$6 = ["children", "type"];
+  var _excluded$9 = ["children", "type"];
   var Trigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         _ref$type = _ref.type,
         type = _ref$type === void 0 ? "button" : _ref$type,
-        rest = _objectWithoutProperties(_ref, _excluded$6);
+        rest = _objectWithoutProperties(_ref, _excluded$9);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledButton, _extends({
       ref: ref,
@@ -10463,7 +10464,7 @@
   })(["transform:rotate(180deg);margin-left:8px;flex-shrink:0;"]);
   StyledCaretIcon.displayName = "StyledCaretIcon";
 
-  var _excluded$5 = ["children", "type", "size", "invalid", "endAdornment"];
+  var _excluded$8 = ["children", "type", "size", "invalid", "endAdornment"];
   var SelectTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         _ref$type = _ref.type,
@@ -10473,7 +10474,7 @@
         _ref$invalid = _ref.invalid,
         invalid = _ref$invalid === void 0 ? false : _ref$invalid,
         endAdornment = _ref.endAdornment,
-        rest = _objectWithoutProperties(_ref, _excluded$5);
+        rest = _objectWithoutProperties(_ref, _excluded$8);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledSelectTrigger, _extends({
       ref: ref,
@@ -10519,11 +10520,11 @@
   });
   StyledToggle.displayName = "StyledToggle";
 
-  var _excluded$4 = ["hovered", "className"];
+  var _excluded$7 = ["hovered", "className"];
   var Toggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var hovered = _ref.hovered,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$4);
+        args = _objectWithoutProperties(_ref, _excluded$7);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledToggle, {
       className: classNames__default["default"]("c-toggle", className),
@@ -10639,14 +10640,14 @@
   });
   ChipCloseIcon.displayName = "ChipCloseIcon";
 
-  var _excluded$3 = ["leftAdornment", "label", "onClose", "size"];
+  var _excluded$6 = ["leftAdornment", "label", "onClose", "size"];
   var Chip = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var leftAdornment = _ref.leftAdornment,
         label = _ref.label,
         onClose = _ref.onClose,
         _ref$size = _ref.size,
         size = _ref$size === void 0 ? "regular" : _ref$size,
-        rest = _objectWithoutProperties(_ref, _excluded$3);
+        rest = _objectWithoutProperties(_ref, _excluded$6);
 
     var showClose = typeof onClose === "function";
     var variant = React.useMemo(function () {
@@ -10704,7 +10705,7 @@
     [ref, handler]);
   }
 
-  var _excluded$2 = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText"];
+  var _excluded$5 = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText"];
   var ComboBox = function ComboBox(_ref) {
     var _comboBoxRef$current;
 
@@ -10732,7 +10733,7 @@
         _ref$limitChips = _ref.limitChips,
         limitChips = _ref$limitChips === void 0 ? 2 : _ref$limitChips,
         hiddenNumberText = _ref.hiddenNumberText,
-        prop = _objectWithoutProperties(_ref, _excluded$2);
+        prop = _objectWithoutProperties(_ref, _excluded$5);
 
     var selectedName = React.useMemo(function () {
       var value = "";
@@ -11436,7 +11437,7 @@
   ThumbsDownIcon.displayName = "ThumbsDownIcon";
   var ThumbsDownIcon$1 = ThumbsDownIcon;
 
-  var _excluded$1 = ["invalid", "required", "size", "children", "className", "weight"];
+  var _excluded$4 = ["invalid", "required", "size", "children", "className", "weight"];
   var Label = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$invalid = _ref.invalid,
         invalid = _ref$invalid === void 0 ? false : _ref$invalid,
@@ -11448,7 +11449,7 @@
         className = _ref.className,
         _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "bold" : _ref$weight,
-        props = _objectWithoutProperties(_ref, _excluded$1);
+        props = _objectWithoutProperties(_ref, _excluded$4);
 
     var color = invalid ? "alert" : "primary";
     var variant = size === "regular" ? "Body 2" : "Caption 1";
@@ -11567,11 +11568,11 @@
   };
   ProgressRing.displayName = "ProgressRing";
 
-  var _excluded = ["withDocuments"];
+  var _excluded$3 = ["withDocuments"];
   var FolderIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var _ref$withDocuments = _ref.withDocuments,
         withDocuments = _ref$withDocuments === void 0 ? false : _ref$withDocuments,
-        props = _objectWithoutProperties(_ref, _excluded);
+        props = _objectWithoutProperties(_ref, _excluded$3);
 
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 100,
@@ -11623,6 +11624,430 @@
   FolderIcon.displayName = "FolderIcon";
   var FolderIcon$1 = FolderIcon;
 
+  var StyledEntityCard = styled__default["default"](Card).withConfig({
+    displayName: "Styles__StyledEntityCard",
+    componentId: "sc-bjeea8-0"
+  })(["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) {
+    var $isCollection = _ref3.$isCollection,
+        $background = _ref3.$background;
+    return $isCollection && styled.css(["&::after{display:block;content:\"\";position:absolute;top:0;bottom:0;right:0;left:0;transform:rotate(-3deg);z-index:-1;", ";background-color:", ";}"], PaperStyles, $background);
+  });
+  StyledEntityCard.displayName = "StyledEntityCard";
+  var StyledEntityProperty = styled__default["default"]("div").withConfig({
+    displayName: "Styles__StyledEntityProperty",
+    componentId: "sc-bjeea8-1"
+  })(["", " ", " ", ""], function (_ref4) {
+    var $renderAs = _ref4.$renderAs,
+        $width = _ref4.$width;
+    return $renderAs === "list" && styled.css(["display:flex;align-items:center;min-width:24px;flex:", ";"], $width ? "unset" : 1);
+  }, function (props) {
+    return props.$renderAs === "list" && props.$order && styled.css(["order:", ";"], props.$order);
+  }, function (props) {
+    return props.$renderAs === "list" && props.$width && styled.css(["width:", ";"], props.$width);
+  });
+  StyledEntityProperty.displayName = "StyledEntityProperty";
+  var StyledEntityGroup = styled__default["default"]("div").withConfig({
+    displayName: "Styles__StyledEntityGroup",
+    componentId: "sc-bjeea8-2"
+  })(["", " ", " ", ""], function (_ref5) {
+    var $renderAs = _ref5.$renderAs,
+        $gap = _ref5.$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({
+    displayName: "Styles__StyledEntityActions",
+    componentId: "sc-bjeea8-3"
+  })(["display:flex;flex-direction:column;align-items:center;", " ", ""], function (_ref6) {
+    var $renderAs = _ref6.$renderAs;
+    return $renderAs === "grid" && styled.css(["position:absolute;right:16px;top:20px;"]);
+  }, function (_ref7) {
+    var $renderAs = _ref7.$renderAs;
+    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_property", className, {
+        "tw-hidden": visibleFromBreakpoint,
+        "sm:tw-flex": visibleFromBreakpoint === "sm",
+        "md:tw-flex": visibleFromBreakpoint === "md",
+        "lg:tw-flex": visibleFromBreakpoint === "lg",
+        "xl:tw-flex": visibleFromBreakpoint === "xl",
+        "2xl:tw-flex": visibleFromBreakpoint === "2xl"
+      })
+    }, props, {
+      $order: listOrder,
+      $width: listWidth
+    }));
+  };
+  EntityProperty.displayName = "EntityProperty";
+
+  var _excluded$1 = ["children", "actions", "renderAs", "isCollection", "background", "className"];
+  var EntityCard = function EntityCard(_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,
+        rest = _objectWithoutProperties(_ref, _excluded$1);
+
+    var paperType = renderAs === "grid" ? "paper-1" : "paper-2";
+    return /*#__PURE__*/React__default["default"].createElement(StyledEntityCard, _extends({
+      $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));
+  };
+  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);
+
+    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
+        });
+      }
+
+      return null;
+    }));
+  };
+  EntityGroup.displayName = "EntityGroup";
+
+  var Entity = {
+    Group: EntityGroup,
+    Card: EntityCard,
+    Property: EntityProperty
+  };
+
+  var Submenu = function Submenu(_ref) {
+    var onBack = _ref.onBack,
+        onHeightChange = _ref.onHeightChange,
+        style = _ref.style,
+        children = _ref.children,
+        title = _ref.title;
+    var ref = React.useRef(null);
+    var dimensions = useResizeObserver$1(ref);
+    var height = dimensions === null || dimensions === void 0 ? void 0 : dimensions.height;
+    React.useEffect(function () {
+      if (height && height > 0) {
+        onHeightChange(height);
+      }
+    }, [height, onHeightChange]);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      style: style,
+      ref: ref
+    }, /*#__PURE__*/React__default["default"].createElement(MenuHeader, {
+      title: title,
+      leftElement: /*#__PURE__*/React__default["default"].createElement(Button, {
+        onClick: onBack,
+        variant: "text gray",
+        size: "small"
+      }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon$1, null))
+    }), children);
+  };
+
+  var StyledMenu = styled__default["default"](Menu).withConfig({
+    displayName: "Styles__StyledMenu",
+    componentId: "sc-lxuoiz-0"
+  })(["", " ", ""], {
+    "position": "relative"
+  }, {
+    "overflow": "hidden"
+  });
+  var StyledMenuFooter = styled__default["default"](MenuFooter).withConfig({
+    displayName: "Styles__StyledMenuFooter",
+    componentId: "sc-lxuoiz-1"
+  })(["", ""], {
+    "justifyContent": "center"
+  });
+  var StyledStartMenuList = styled__default["default"](List).withConfig({
+    displayName: "Styles__StyledStartMenuList",
+    componentId: "sc-lxuoiz-2"
+  })(["", ""], {
+    "paddingTop": "0.5rem",
+    "paddingBottom": "0.5rem"
+  });
+  var StyledStartMenuListItem = styled__default["default"](ListItem).withConfig({
+    displayName: "Styles__StyledStartMenuListItem",
+    componentId: "sc-lxuoiz-3"
+  })(["", ""], {
+    "paddingRight": "0.75rem"
+  });
+  var StyledStartMenuTitle = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledStartMenuTitle",
+    componentId: "sc-lxuoiz-4"
+  })(["", ""], {
+    "flex": "1 1 0%"
+  });
+  var StyledStartMenuDot = styled__default["default"].span.withConfig({
+    displayName: "Styles__StyledStartMenuDot",
+    componentId: "sc-lxuoiz-5"
+  })(["border-radius:50%;background-color:var(--color-primary);color:var(--page-paper-main);line-height:15px;width:15px;font-weight:bold;font-size:10px;text-align:center;margin-left:4px;"]);
+  StyledMenu.displayName = "StyledMenu";
+  StyledMenuFooter.displayName = "StyledMenuFooter";
+  StyledStartMenuList.displayName = "StyledStartMenuList";
+  StyledStartMenuListItem.displayName = "StyledStartMenuListItem";
+  StyledStartMenuTitle.displayName = "StyledStartMenuTitle";
+  StyledStartMenuDot.displayName = "StyledStartMenuDot";
+
+  var StartMenu = function StartMenu(_ref) {
+    var data = _ref.data,
+        selected = _ref.selected,
+        onItemClick = _ref.onItemClick,
+        style = _ref.style,
+        onHeightChange = _ref.onHeightChange,
+        children = _ref.children;
+    var ref = React.useRef(null);
+    var dimensions = useResizeObserver$1(ref);
+    var height = dimensions === null || dimensions === void 0 ? void 0 : dimensions.height;
+    React.useEffect(function () {
+      if (height && height > 0) {
+        onHeightChange(height);
+      }
+    }, [height, onHeightChange]);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      style: style,
+      ref: ref
+    }, /*#__PURE__*/React__default["default"].createElement(StyledStartMenuList, null, data.map(function (_ref2, index) {
+      var _selected$id;
+
+      var id = _ref2.id,
+          title = _ref2.title,
+          submenu = _ref2.submenu;
+      var count = (_selected$id = selected[id]) === null || _selected$id === void 0 ? void 0 : _selected$id.length;
+
+      if (submenu !== null && submenu !== void 0 && submenu.length) {
+        return /*#__PURE__*/React__default["default"].createElement(StyledStartMenuListItem, {
+          key: "filter-list-item-".concat(index),
+          onClick: function onClick() {
+            return onItemClick(id);
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(StyledStartMenuTitle, null, title), count > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledStartMenuDot, null, count) : null, /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon$1, null));
+      }
+    }), children));
+  };
+
+  var Filter = function Filter(_ref) {
+    var data = _ref.data,
+        selected = _ref.selected,
+        label = _ref.label,
+        clearAllText = _ref.clearAllText,
+        _ref$resetLabel = _ref.resetLabel,
+        resetLabel = _ref$resetLabel === void 0 ? "Reset" : _ref$resetLabel,
+        onChange = _ref.onChange,
+        _ref$width = _ref.width,
+        width = _ref$width === void 0 ? 260 : _ref$width,
+        noResultText = _ref.noResultText,
+        children = _ref.children;
+
+    var _useState = React.useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        open = _useState2[0],
+        setOpen = _useState2[1];
+
+    var _useState3 = React.useState("index"),
+        _useState4 = _slicedToArray(_useState3, 2),
+        menu = _useState4[0],
+        setMenu = _useState4[1];
+
+    var _useState5 = React.useState(true),
+        _useState6 = _slicedToArray(_useState5, 2),
+        isLeft = _useState6[0],
+        setIsLeft = _useState6[1];
+
+    var _useState7 = React.useState(0),
+        _useState8 = _slicedToArray(_useState7, 2),
+        height = _useState8[0],
+        setHeight = _useState8[1];
+
+    var _useState9 = React.useState("index"),
+        _useState10 = _slicedToArray(_useState9, 2),
+        enteredMenu = _useState10[0],
+        setEnteredMenu = _useState10[1];
+
+    var _useState11 = React.useState(function () {
+      return selected;
+    }),
+        _useState12 = _slicedToArray(_useState11, 2),
+        filter = _useState12[0],
+        setFilter = _useState12[1];
+
+    var handleOpen = React.useCallback(function () {
+      setOpen(true);
+    }, []);
+    var handleClose = React.useCallback(function () {
+      setOpen(false);
+      setMenu("index");
+      setHeight(0);
+    }, []);
+    var handleHeight = React.useCallback(function (element) {
+      var _element$offsetHeight;
+
+      setHeight((_element$offsetHeight = element === null || element === void 0 ? void 0 : element.offsetHeight) !== null && _element$offsetHeight !== void 0 ? _element$offsetHeight : 0);
+    }, []);
+    var handleItemClick = React.useCallback(function (value) {
+      setMenu(value);
+      setIsLeft(true);
+    }, []);
+    var setIndex = React.useCallback(function () {
+      setMenu("index");
+      setIsLeft(false);
+    }, []);
+    var handleChange = React.useCallback(function (selectedArray) {
+      var newFilters = {};
+
+      if (selectedArray.length) {
+        newFilters = _objectSpread2(_objectSpread2({}, filter), {}, _defineProperty({}, menu, selectedArray));
+      } else {
+        newFilters = _objectSpread2({}, filter);
+        delete newFilters[menu];
+      }
+
+      setFilter(newFilters);
+      onChange(newFilters);
+    }, [filter, menu, onChange]);
+    var handleClearAll = React.useCallback(function (event) {
+      event.stopPropagation();
+      setFilter({});
+      onChange({});
+    }, [onChange]);
+    var handleReset = React.useCallback(function () {
+      var newFilters = _objectSpread2({}, filter);
+
+      delete newFilters[menu];
+      setFilter(newFilters);
+      onChange(newFilters);
+    }, [filter, menu, onChange]);
+    var count = React.useMemo(function () {
+      var c = 0;
+      Object.values(filter).forEach(function (entry) {
+        return c += entry.length;
+      });
+      return c;
+    }, [filter]);
+    return /*#__PURE__*/React__default["default"].createElement(StyledMenu, {
+      open: open,
+      onOpen: handleOpen,
+      onClose: handleClose,
+      position: "bottom-end",
+      target: /*#__PURE__*/React__default["default"].createElement(CounterButton, {
+        active: open,
+        label: label,
+        icon: /*#__PURE__*/React__default["default"].createElement(FilterIcon$1, null),
+        counter: count,
+        tooltipText: clearAllText,
+        onClearAll: handleClearAll
+      })
+    }, /*#__PURE__*/React__default["default"].createElement(ResizeTransition, {
+      in: true
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        height: height,
+        width: width
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(SlideLeftRightTransition, {
+      in: menu === "index",
+      direction: isLeft ? "left" : "right",
+      onEnter: handleHeight,
+      onEntered: function onEntered() {
+        return setEnteredMenu("index");
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(FocusLock.MoveFocusInside, null, /*#__PURE__*/React__default["default"].createElement(StartMenu, {
+      data: data,
+      selected: filter,
+      style: {
+        width: width
+      },
+      onHeightChange: setHeight,
+      onItemClick: handleItemClick
+    }, children))), data.map(function (_ref2, index) {
+      var _filter$id;
+
+      var id = _ref2.id,
+          title = _ref2.title,
+          submenu = _ref2.submenu,
+          searchPlaceholder = _ref2.searchPlaceholder;
+      return /*#__PURE__*/React__default["default"].createElement(SlideLeftRightTransition, {
+        key: "filter-submenu-".concat(index),
+        in: menu === id,
+        direction: isLeft ? "left" : "right",
+        onEnter: handleHeight,
+        onEntered: function onEntered() {
+          return setEnteredMenu(id);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Submenu, {
+        title: title,
+        onBack: setIndex,
+        onHeightChange: setHeight,
+        style: {
+          width: width
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(FocusLock.MoveFocusInside, {
+        disabled: enteredMenu !== id
+      }, /*#__PURE__*/React__default["default"].createElement(Select, {
+        options: submenu,
+        selected: filter[id],
+        onChange: handleChange,
+        type: "multiple",
+        autoHeightMax: 255,
+        placeholder: searchPlaceholder,
+        noResultText: noResultText,
+        keepSameOptionsOrder: Boolean(submenu.length <= 7),
+        disableSearch: Boolean(submenu.length <= 7)
+      }), (_filter$id = filter[id]) !== null && _filter$id !== void 0 && _filter$id.length ? /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter, null, /*#__PURE__*/React__default["default"].createElement(Button, {
+        variant: "text colored",
+        size: "small",
+        onClick: handleReset
+      }, resetLabel)) : null)));
+    }))));
+  };
+
   exports.Accordion = Accordion;
   exports.AccordionContext = AccordionContext;
   exports.AccordionItem = AccordionItem;
@@ -11721,7 +12146,8 @@
   exports.EditIcon = EditIcon$1;
   exports.EditMultipleIcon = EditMultipleIcon$1;
   exports.EmojiIcon = EmojiIcon$1;
-  exports.EntityCard = EntityCard;
+  exports.Entity = Entity;
+  exports.EntityCard = EntityCard$1;
   exports.EstimatesIcon = EstimatesIcon$1;
   exports.ExpandAll = ExpandAll;
   exports.ExpandAllIcon = ExpandAllIcon$1;
@@ -11733,6 +12159,7 @@
   exports.EyeOffSmallIcon = EyeOffSmallIcon$1;
   exports.EyeSmallIcon = EyeSmallIcon$1;
   exports.Fade = Fade;
+  exports.Filter = Filter;
   exports.FilterIcon = FilterIcon$1;
   exports.FolderIcon = FolderIcon$1;
   exports.FolderMoveIcon = FolderMoveIcon$1;