@activecollab/components 1.0.347 → 1.0.349

package/dist/index.js

@@ -269,7 +269,7 @@
   })(["display:inline-flex;svg{margin:0 4px;}"]);
   StyledButtonElement.displayName = "StyledButtonElement";
 
-  var _excluded$1m = ["children", "active", "variant", "size", "className"];
+  var _excluded$1n = ["children", "active", "variant", "size", "className"];
   /**
    * @component Button
    * @description
@@ -299,7 +299,7 @@
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$1m);
+      args = _objectWithoutProperties(_ref, _excluded$1n);
     return /*#__PURE__*/React__default["default"].createElement(StyledButton$2, _extends({
       className: classNames__default["default"]("c-btn", className, {
         "c-btn--contained": variant === "primary" || variant === "contained",
@@ -373,12 +373,12 @@
   })(["svg{fill:var(--color-theme-100);}&:hover svg{transform:rotate(90deg);transition:ease 0.3s;}"]);
   StyledGlobalAddButton.displayName = "StyledGlobalAddButton";
 
-  var _excluded$1l = ["className", "disabled"];
+  var _excluded$1m = ["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$1l);
+      rest = _objectWithoutProperties(_ref, _excluded$1m);
     return /*#__PURE__*/React__default["default"].createElement(StyledGlobalAddButton, _extends({
       ref: ref,
       variant: "contained",
@@ -410,11 +410,11 @@
   });
   StyledButtonGroup$1.displayName = "StyledButtonGroup";
 
-  var _excluded$1k = ["children", "className"];
+  var _excluded$1l = ["children", "className"];
   var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$1k);
+      rest = _objectWithoutProperties(_ref, _excluded$1l);
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup$1, _extends({
       ref: ref,
       className: classNames__default["default"]("c-btn-group", className)
@@ -474,7 +474,7 @@
     return React.useContext(MenuContext);
   };
 
-  var _excluded$1j = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy", "afterWrite"];
+  var _excluded$1k = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy", "afterWrite"];
   var Popper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       anchorEl = _ref.anchorEl,
@@ -488,7 +488,7 @@
       _ref$strategy = _ref.strategy,
       strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
       afterWrite = _ref.afterWrite,
-      rest = _objectWithoutProperties(_ref, _excluded$1j);
+      rest = _objectWithoutProperties(_ref, _excluded$1k);
     var _useState = React.useState(true),
       _useState2 = _slicedToArray(_useState, 2),
       exited = _useState2[0],
@@ -587,12 +587,12 @@
   });
   StyledOverlay.displayName = "StyledOverlay";
 
-  var _excluded$1i = ["className", "disableBackgroundColor"];
+  var _excluded$1j = ["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$1i);
+      rest = _objectWithoutProperties(_ref, _excluded$1j);
     return /*#__PURE__*/React__default["default"].createElement(StyledOverlay, _extends({
       className: classNames__default["default"]("c-overlay", className),
       $disableBackgroundColor: disableBackgroundColor
@@ -632,7 +632,7 @@
   })(["", " ", " position:fixed;top:0;right:0;bottom:0;left:0;"], FontStyle, BoxSizingStyle);
   StyledWindow.displayName = "StyledWindow";
 
-  var _excluded$1h = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "disableCloseOnEsc", "onClick"];
+  var _excluded$1i = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "disableCloseOnEsc", "onClick"];
   var returnFocus = {
     preventScroll: true
   };
@@ -649,7 +649,7 @@
       _ref$disableCloseOnEs = _ref.disableCloseOnEsc,
       disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
       onClick = _ref.onClick,
-      rest = _objectWithoutProperties(_ref, _excluded$1h);
+      rest = _objectWithoutProperties(_ref, _excluded$1i);
     var innerRef = React.useRef(null);
     var handleRef = useForkRef(innerRef, ref);
     var _useLayerContext = useLayerContext(),
@@ -709,7 +709,7 @@
   }, FontStyle, BoxSizingStyle);
   StyledBubble.displayName = "StyledBubble";
 
-  var _excluded$1g = ["children", "className", "innerRef", "style"];
+  var _excluded$1h = ["children", "className", "innerRef", "style"];
   var Bubble = function Bubble(_ref) {
     var children = _ref.children,
       className = _ref.className,
@@ -717,7 +717,7 @@
       innerRef = _ref$innerRef === void 0 ? null : _ref$innerRef,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style,
-      rest = _objectWithoutProperties(_ref, _excluded$1g);
+      rest = _objectWithoutProperties(_ref, _excluded$1h);
     return /*#__PURE__*/React__default["default"].createElement(StyledBubble, _extends({}, rest, {
       ref: innerRef,
       className: classNames__default["default"]("c-bubble", className),
@@ -1037,7 +1037,7 @@
   });
   StyledTypography.displayName = "StyledTypography";
 
-  var _excluded$1f = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
+  var _excluded$1g = ["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,
@@ -1068,7 +1068,7 @@
       weight = _ref$weight === void 0 ? "regular" : _ref$weight,
       className = _ref.className,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1f);
+      props = _objectWithoutProperties(_ref, _excluded$1g);
     var Component = as || "div";
     return /*#__PURE__*/React__default["default"].createElement(StyledTypography, _extends({
       as: Component,
@@ -1091,13 +1091,13 @@
   });
   Typography.displayName = "Typography";
 
-  var _excluded$1e = ["title", "className", "leftElement", "rightElement"];
+  var _excluded$1f = ["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$1e);
+      props = _objectWithoutProperties(_ref, _excluded$1f);
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuHeader, _extends({}, props, {
       className: classNames__default["default"]("c-menu-header", className),
       ref: ref
@@ -1122,11 +1122,11 @@
   });
   MenuHeader.displayName = "MenuHeader";
 
-  var _excluded$1d = ["children", "className"];
+  var _excluded$1e = ["children", "className"];
   var MenuFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$1d);
+      props = _objectWithoutProperties(_ref, _excluded$1e);
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter$1, _extends({}, props, {
       className: classNames__default["default"]("c-menu-footer", className),
       ref: ref
@@ -1150,11 +1150,11 @@
   })(["border-top:1px solid var(--border-primary);margin:12px 16px;height:1px;"]);
   StyledListSeparator.displayName = "StyledListSeparator";
 
-  var _excluded$1c = ["children", "className"];
+  var _excluded$1d = ["children", "className"];
   var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$1c);
+      props = _objectWithoutProperties(_ref, _excluded$1d);
     return /*#__PURE__*/React__default["default"].createElement(StyledListItem, _extends({
       className: classNames__default["default"]("c-list-item", className),
       ref: ref,
@@ -1163,21 +1163,21 @@
   });
   ListItem.displayName = "ListItem";
 
-  var _excluded$1b = ["className"];
+  var _excluded$1c = ["className"];
   var ListSeparator = function ListSeparator(_ref) {
     var className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$1b);
+      props = _objectWithoutProperties(_ref, _excluded$1c);
     return /*#__PURE__*/React__default["default"].createElement(StyledListSeparator, _extends({
       className: classNames__default["default"]("c-list-separator", className)
     }, props));
   };
   ListSeparator.displayName = "ListSeparator";
 
-  var _excluded$1a = ["children", "className"];
+  var _excluded$1b = ["children", "className"];
   var _List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$1a);
+      props = _objectWithoutProperties(_ref, _excluded$1b);
     return /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({
       className: className,
       ref: ref,
@@ -1203,7 +1203,7 @@
     return size === "big" && styled.css(["width:40px;"]);
   });
 
-  var _excluded$19 = ["children", "className", "variant", "size", "active"];
+  var _excluded$1a = ["children", "className", "variant", "size", "active"];
 
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
@@ -1233,7 +1233,7 @@
       variant = _ref.variant,
       size = _ref.size,
       active = _ref.active,
-      args = _objectWithoutProperties(_ref, _excluded$19);
+      args = _objectWithoutProperties(_ref, _excluded$1a);
     return /*#__PURE__*/React__default["default"].createElement(StyledIconButton, _extends({
       className: className,
       variant: variant,
@@ -7522,14 +7522,14 @@
   });
   StyledBreadcrumbListItem.displayName = "StyledBreadcrumbListItem";
 
-  var _excluded$18 = ["children", "className", "separator"];
+  var _excluded$19 = ["children", "className", "separator"];
   var Breadcrumbs = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _dimensions$width, _childDimensions$widt;
     var children = _ref.children,
       className = _ref.className,
       _ref$separator = _ref.separator,
       separator = _ref$separator === void 0 ? "/" : _ref$separator,
-      rest = _objectWithoutProperties(_ref, _excluded$18);
+      rest = _objectWithoutProperties(_ref, _excluded$19);
     var internalRef = React.useRef(null);
     var listWrapperRef = React.useRef(null);
     var olRef = React.useRef(null);
@@ -7696,10 +7696,10 @@
     return props.$isLight && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);color:var(--color-theme-700);"]);
   });
 
-  var _excluded$17 = ["children"];
+  var _excluded$18 = ["children"];
   var TooltipAnimation = function TooltipAnimation(_ref) {
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$17);
+      props = _objectWithoutProperties(_ref, _excluded$18);
     return /*#__PURE__*/React__default["default"].createElement(FromElement, _extends({
       timeout: 0
     }, props), children);
@@ -7774,12 +7774,12 @@
   });
   Tooltip.displayName = "Tooltip";
 
-  var _excluded$16 = ["weight", "children"];
+  var _excluded$17 = ["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$16);
+      props = _objectWithoutProperties(_ref, _excluded$17);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Body 2",
       weight: weight,
@@ -7828,7 +7828,7 @@
   });
   StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
 
-  var _excluded$15 = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className", "disabled"];
+  var _excluded$16 = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className", "disabled"];
   var CounterButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var label = _ref.label,
       icon = _ref.icon,
@@ -7840,7 +7840,7 @@
       className = _ref.className,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      args = _objectWithoutProperties(_ref, _excluded$15);
+      args = _objectWithoutProperties(_ref, _excluded$16);
     return /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonWrapper, {
       ref: ref,
       className: className
@@ -8151,7 +8151,7 @@
   StyledDatePicker.displayName = "StyledDatePicker";
   StyledDayPicker.displayName = "StyledDayPicker";
 
-  var _excluded$14 = ["className", "onChange", "onDayClick", "selectedDays", "disabledDays", "selectionMode", "month", "onMonthChange", "dateRequired", "firstDayOfWeek", "fixedWeeks", "modifiers"];
+  var _excluded$15 = ["className", "onChange", "onDayClick", "selectedDays", "disabledDays", "selectionMode", "month", "onMonthChange", "dateRequired", "firstDayOfWeek", "fixedWeeks", "modifiers"];
   var DatePicker = function DatePicker(_ref) {
     var className = _ref.className,
       onChange = _ref.onChange,
@@ -8173,7 +8173,7 @@
       _ref$fixedWeeks = _ref.fixedWeeks,
       fixedWeeks = _ref$fixedWeeks === void 0 ? true : _ref$fixedWeeks,
       defaultModifiers = _ref.modifiers,
-      rest = _objectWithoutProperties(_ref, _excluded$14);
+      rest = _objectWithoutProperties(_ref, _excluded$15);
     var _useState = React.useState(),
       _useState2 = _slicedToArray(_useState, 2),
       enteredTo = _useState2[0],
@@ -9065,10 +9065,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$13 = ["className"];
+  var _excluded$14 = ["className"];
   var LinearLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$13);
+      rest = _objectWithoutProperties(_ref, _excluded$14);
     return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
       ref: ref,
       className: classNames__default["default"]("c-loader c-loader--linear", className)
@@ -9082,10 +9082,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$12 = ["className"];
+  var _excluded$13 = ["className"];
   var DotsLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$12);
+      rest = _objectWithoutProperties(_ref, _excluded$13);
     return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
       ref: ref,
       className: classNames__default["default"]("c-loader c-loader--dots", className)
@@ -9107,7 +9107,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$11 = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
+  var _excluded$12 = ["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,
@@ -9122,7 +9122,7 @@
       _ref$rotateDurationIn = _ref.rotateDurationInSeconds,
       rotateDurationInSeconds = _ref$rotateDurationIn === void 0 ? 0.75 : _ref$rotateDurationIn,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$11);
+      rest = _objectWithoutProperties(_ref, _excluded$12);
     return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader$1, _extends({
       ref: ref,
       className: className,
@@ -9136,7 +9136,7 @@
   });
   SpinnerLoader.displayName = "SpinnerLoader";
 
-  var _excluded$10 = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue", "loading", "loadingRows"];
+  var _excluded$11 = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue", "loading", "loadingRows"];
   exports.SortDirection = void 0;
   (function (SortDirection) {
     SortDirection["None"] = "none";
@@ -9184,7 +9184,7 @@
       loading = _ref.loading,
       _ref$loadingRows = _ref.loadingRows,
       loadingRows = _ref$loadingRows === void 0 ? 7 : _ref$loadingRows,
-      args = _objectWithoutProperties(_ref, _excluded$10);
+      args = _objectWithoutProperties(_ref, _excluded$11);
     var _useState = React.useState(sortDirection),
       _useState2 = _slicedToArray(_useState, 2),
       columnDirection = _useState2[0],
@@ -9544,7 +9544,7 @@
   });
   StyledCompleteCheckbox.displayName = "StyledCompleteCheckbox";
 
-  var _excluded$$ = ["completed", "disabled", "animate", "onClick", "className", "primary", "checkMarkClassName"];
+  var _excluded$10 = ["completed", "disabled", "animate", "onClick", "className", "primary", "checkMarkClassName"];
   var CompleteCheckbox = function CompleteCheckbox(_ref) {
     var _ref$completed = _ref.completed,
       completed = _ref$completed === void 0 ? false : _ref$completed,
@@ -9557,7 +9557,7 @@
       _ref$primary = _ref.primary,
       primary = _ref$primary === void 0 ? false : _ref$primary,
       checkMarkClassName = _ref.checkMarkClassName,
-      rest = _objectWithoutProperties(_ref, _excluded$$);
+      rest = _objectWithoutProperties(_ref, _excluded$10);
     return /*#__PURE__*/React__default["default"].createElement(StyledCompleteCheckbox, _extends({
       onClick: onClick,
       className: classNames__default["default"]("c-complete-checkbox", className),
@@ -9588,7 +9588,7 @@
   });
   StyledPaper.displayName = "StyledPaper";
 
-  var _excluded$_ = ["children", "className", "type", "hover", "useOptimizedShadow"];
+  var _excluded$$ = ["children", "className", "type", "hover", "useOptimizedShadow"];
   /**
    * This is a component description and should sit directly above your component
    */
@@ -9601,7 +9601,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$_);
+      rest = _objectWithoutProperties(_ref, _excluded$$);
     return /*#__PURE__*/React__default["default"].createElement(StyledPaper, _extends({
       className: classNames__default["default"](className, {
         "ac-shadow--raised--lg": !useOptimizedShadow && hover && type === "paper-1",
@@ -9654,7 +9654,7 @@
   });
   StyledCard.displayName = "StyledCard";
 
-  var _excluded$Z = ["children", "className", "hoverable", "paperType"];
+  var _excluded$_ = ["children", "className", "hoverable", "paperType"];
   var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
@@ -9662,7 +9662,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$Z);
+      rest = _objectWithoutProperties(_ref, _excluded$_);
     return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends({}, rest, {
       type: paperType,
       className: classNames__default["default"]("c-card", className),
@@ -9741,12 +9741,12 @@
   });
   EntityCard$1.displayName = "EntityCard";
 
-  var _excluded$Y = ["weight", "children"];
+  var _excluded$Z = ["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$Y);
+      props = _objectWithoutProperties(_ref, _excluded$Z);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: weight,
       variant: "Title 1",
@@ -9755,12 +9755,12 @@
   });
   Title1.displayName = "Title1";
 
-  var _excluded$X = ["weight", "children"];
+  var _excluded$Y = ["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$X);
+      props = _objectWithoutProperties(_ref, _excluded$Y);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: weight,
       variant: "Title 2",
@@ -9769,10 +9769,10 @@
   });
   Title2.displayName = "Title2";
 
-  var _excluded$W = ["children"];
+  var _excluded$X = ["children"];
   var Header2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$W);
+      props = _objectWithoutProperties(_ref, _excluded$X);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
       variant: "Header 2",
@@ -9781,10 +9781,10 @@
   });
   Header2.displayName = "Header2";
 
-  var _excluded$V = ["children"];
+  var _excluded$W = ["children"];
   var Header3 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$V);
+      props = _objectWithoutProperties(_ref, _excluded$W);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
       variant: "Header 3",
@@ -9793,12 +9793,12 @@
   });
   Header3.displayName = "Header3";
 
-  var _excluded$U = ["weight", "children"];
+  var _excluded$V = ["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$U);
+      props = _objectWithoutProperties(_ref, _excluded$V);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Body 1",
       weight: weight,
@@ -9807,12 +9807,12 @@
   });
   Body1.displayName = "Body1";
 
-  var _excluded$T = ["weight", "children"];
+  var _excluded$U = ["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$T);
+      props = _objectWithoutProperties(_ref, _excluded$U);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 1",
       weight: weight,
@@ -9821,12 +9821,12 @@
   });
   Caption1.displayName = "Caption1";
 
-  var _excluded$S = ["weight", "children"];
+  var _excluded$T = ["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$S);
+      props = _objectWithoutProperties(_ref, _excluded$T);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 2",
       weight: weight,
@@ -9938,7 +9938,7 @@
     componentId: "sc-5x2tyd-1"
   })(["border-radius:100%;object-fit:cover;"]);
 
-  var _excluded$R = ["url", "alt", "size", "className", "imgClassName", "children"];
+  var _excluded$S = ["url", "alt", "size", "className", "imgClassName", "children"];
   /**
    * @component Avatar
    * @description
@@ -9973,7 +9973,7 @@
       className = _ref.className,
       imgClassName = _ref.imgClassName,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$R);
+      rest = _objectWithoutProperties(_ref, _excluded$S);
     var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       imageLoaded = _useState2[0],
@@ -10014,13 +10014,13 @@
     return props.$color && styled.css(["background-color:", ";"], props.$color);
   });
 
-  var _excluded$Q = ["color", "size", "className"];
+  var _excluded$R = ["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$Q);
+      rest = _objectWithoutProperties(_ref, _excluded$R);
     return /*#__PURE__*/React__default["default"].createElement(StyledDot, _extends({
       className: classNames__default["default"]("c-dot", className),
       ref: ref,
@@ -10057,7 +10057,7 @@
   });
   StyledTagText.displayName = "StyledTagText";
 
-  var _excluded$P = ["name", "color", "showText", "showDot", "className"];
+  var _excluded$Q = ["name", "color", "showText", "showDot", "className"];
   var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var name = _ref.name,
       color = _ref.color,
@@ -10066,7 +10066,7 @@
       _ref$showDot = _ref.showDot,
       showDot = _ref$showDot === void 0 ? true : _ref$showDot,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$P);
+      rest = _objectWithoutProperties(_ref, _excluded$Q);
     return /*#__PURE__*/React__default["default"].createElement(StyledTag, _extends({
       className: classNames__default["default"]("c-tag", className),
       ref: ref
@@ -10196,7 +10196,7 @@
   });
   StyledCheckbox$1.displayName = "StyledCheckbox";
 
-  var _excluded$O = ["isIndeterminate", "data-testid"];
+  var _excluded$P = ["isIndeterminate", "data-testid"];
 
   /**
    * @component CheckboxIcon
@@ -10220,7 +10220,7 @@
   var CheckboxIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var isIndeterminate = _ref.isIndeterminate,
       testId = _ref["data-testid"],
-      props = _objectWithoutProperties(_ref, _excluded$O);
+      props = _objectWithoutProperties(_ref, _excluded$P);
     var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       animate = _useState2[0],
@@ -10242,8 +10242,8 @@
         xmlns: "http://www.w3.org/2000/svg",
         "data-testid": testId
       }, /*#__PURE__*/React__default["default"].createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M14.2222 0C15.2041 0 16 0.795938 16 1.77778V14.2222C16 15.2041 15.2041 16 14.2222 16H1.77778C0.795938 16 0 15.2041 0 14.2222V1.77778C0 0.795938 0.795938 0 1.77778 0H14.2222Z",
         fill: "var(--color-secondary)"
       }), /*#__PURE__*/React__default["default"].createElement("rect", {
@@ -10289,7 +10289,7 @@
   CheckboxIcon.displayName = "CheckboxIcon";
   var CheckboxIcon$1 = CheckboxIcon;
 
-  var _excluded$N = ["className", "hover", "id", "isIndeterminate"];
+  var _excluded$O = ["className", "hover", "id", "isIndeterminate"];
   /**
    * Checkbox component
    */
@@ -10299,7 +10299,7 @@
       _ref$id = _ref.id,
       id = _ref$id === void 0 ? "checkbox" : _ref$id,
       isIndeterminate = _ref.isIndeterminate,
-      rest = _objectWithoutProperties(_ref, _excluded$N);
+      rest = _objectWithoutProperties(_ref, _excluded$O);
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox$1, {
       className: classNames__default["default"]("c-checkbox", {
         "c-checkbox__hover": hover,
@@ -10504,7 +10504,7 @@
   StyledScrollShadowLeft.displayName = "StyledScrollShadowLeft";
   StyledScrollShadowRight.displayName = "StyledScrollShadowRight";
 
-  var _excluded$M = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical", "innerColor", "outerColor"];
+  var _excluded$N = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical", "innerColor", "outerColor"];
   var ScrollShadow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
@@ -10518,7 +10518,7 @@
       invertVertical = _ref$invertVertical === void 0 ? false : _ref$invertVertical,
       innerColor = _ref.innerColor,
       outerColor = _ref.outerColor,
-      rest = _objectWithoutProperties(_ref, _excluded$M);
+      rest = _objectWithoutProperties(_ref, _excluded$N);
     var _useState = React.useState({
         top: 0,
         right: 0,
@@ -10638,7 +10638,7 @@
     return height;
   };
 
-  var _excluded$L = ["as", "className", "invert", "style"];
+  var _excluded$M = ["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,
@@ -10646,7 +10646,7 @@
       _ref$invert = _ref.invert,
       invert = _ref$invert === void 0 ? false : _ref$invert,
       style = _ref.style,
-      rest = _objectWithoutProperties(_ref, _excluded$L);
+      rest = _objectWithoutProperties(_ref, _excluded$M);
     var internalRef = useInitScrollRef(null, invert);
     var handleRef = useForkRef(internalRef, ref);
     var props = _objectSpread2(_objectSpread2({}, rest), {}, {
@@ -11128,7 +11128,7 @@
   });
   StyledInput$2.displayName = "StyledInput";
 
-  var _excluded$K = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"];
+  var _excluded$L = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"];
   var Input = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className,
@@ -11145,7 +11145,7 @@
       endAdornment = _ref.endAdornment,
       wrapRef = _ref.wrapRef,
       wrapperClick = _ref.wrapperClick,
-      rest = _objectWithoutProperties(_ref, _excluded$K);
+      rest = _objectWithoutProperties(_ref, _excluded$L);
     var intInputRef = React.useRef(null);
     var handleRef = useForkRef(ref, intInputRef);
     var handleWrapperClick = React.useCallback(function () {
@@ -11199,14 +11199,14 @@
   }, StyledRadioLabel);
   StyledRadioButton$1.displayName = "StyledRadioButton";
 
-  var _excluded$J = ["className", "id", "hover"];
+  var _excluded$K = ["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$J);
+      props = _objectWithoutProperties(_ref, _excluded$K);
     return /*#__PURE__*/React__default["default"].createElement(StyledRadioButton$1, {
       className: classNames__default["default"]("c-radio-btn", {
         "c-radio-btn__hover": hover,
@@ -11414,7 +11414,7 @@
   };
   OptionContent.displayName = "OptionContent";
 
-  var _excluded$I = ["type", "mode", "target", "options", "selected", "position", "onChange", "actionIcon", "actionLabel", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose", "renderOption", "handleDefaultOptionChange", "preselectDefaultValue"];
+  var _excluded$J = ["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,
@@ -11448,7 +11448,7 @@
       handleDefaultOptionChange = _ref.handleDefaultOptionChange,
       _ref$preselectDefault = _ref.preselectDefaultValue,
       preselectDefaultValue = _ref$preselectDefault === void 0 ? type === "single" : _ref$preselectDefault,
-      prop = _objectWithoutProperties(_ref, _excluded$I);
+      prop = _objectWithoutProperties(_ref, _excluded$J);
     var childNode = React.useRef();
     var elementRef = React.useRef(null);
     var handleRef = useForkRef(childNode, elementRef);
@@ -11703,7 +11703,7 @@
   });
   StyledNavAsMoreTarget.displayName = "StyledNavAsMoreTarget";
 
-  var _excluded$H = ["children", "active", "disabled", "className", "role"];
+  var _excluded$I = ["children", "active", "disabled", "className", "role"];
   var Item = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var children = _ref.children,
       _ref$active = _ref.active,
@@ -11712,7 +11712,7 @@
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       className = _ref.className,
       role = _ref.role,
-      rest = _objectWithoutProperties(_ref, _excluded$H);
+      rest = _objectWithoutProperties(_ref, _excluded$I);
     return /*#__PURE__*/React__default["default"].createElement(StyledNavListItem, _extends({
       className: classNames__default["default"]("c-nav__item", {
         "c-nav__item--active": active
@@ -11753,11 +11753,11 @@
   });
   StyledExpandSingle.displayName = "StyledExpandSingle";
 
-  var _excluded$G = ["expanded"];
+  var _excluded$H = ["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$G);
+      rest = _objectWithoutProperties(_ref, _excluded$H);
     return /*#__PURE__*/React__default["default"].createElement(StyledExpandSingle, _extends({
       ref: ref,
       viewBox: "0 0 24 24",
@@ -12047,7 +12047,7 @@
   };
   Nav.displayName = "Nav";
 
-  var _excluded$F = ["children", "as", "disablePointerEvents"];
+  var _excluded$G = ["children", "as", "disablePointerEvents"];
   var InputAdornmentBase = styled__default["default"].div.withConfig({
     displayName: "InputAdornment__InputAdornmentBase",
     componentId: "sc-1xfjx1z-0"
@@ -12064,7 +12064,7 @@
     var children = _ref.children,
       as = _ref.as,
       disablePointerEvents = _ref.disablePointerEvents,
-      rest = _objectWithoutProperties(_ref, _excluded$F);
+      rest = _objectWithoutProperties(_ref, _excluded$G);
     var Component = as || "div";
     return /*#__PURE__*/React__default["default"].createElement(InputAdornmentBase, _extends({}, rest, {
       as: Component,
@@ -12074,11 +12074,11 @@
   });
   InputAdornment.displayName = "InputAdornment";
 
-  var _excluded$E = ["expanded"];
+  var _excluded$F = ["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$E);
+      rest = _objectWithoutProperties(_ref, _excluded$F);
     return /*#__PURE__*/React__default["default"].createElement(StyledExpand, _extends({
       ref: ref,
       viewBox: "0 0 24 24"
@@ -12196,14 +12196,14 @@
   });
   StyledTextarea.displayName = "StyledTextarea";
 
-  var _excluded$D = ["className", "disabled", "invalid"];
+  var _excluded$E = ["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$D);
+      rest = _objectWithoutProperties(_ref, _excluded$E);
     return /*#__PURE__*/React__default["default"].createElement(StyledTextarea, _extends({}, rest, {
       $invalid: invalid,
       ref: ref,
@@ -12235,7 +12235,7 @@
     function () {});
   }
 
-  var _excluded$C = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose"];
+  var _excluded$D = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose", "onClickOutside"];
   var getHasTransition = function getHasTransition(children) {
     return children.props ? Object.prototype.hasOwnProperty.call(children.props, "in") : false;
   };
@@ -12254,7 +12254,8 @@
       _ref$open = _ref.open,
       defaultOpen = _ref$open === void 0 ? false : _ref$open,
       onClose = _ref.onClose,
-      rest = _objectWithoutProperties(_ref, _excluded$C);
+      onClickOutside = _ref.onClickOutside,
+      rest = _objectWithoutProperties(_ref, _excluded$D);
     var _useState = React.useState(defaultOpen),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
@@ -12280,9 +12281,12 @@
     var handleBackgroundClick = React.useCallback(function (event) {
       if (!disableBackgroundClick) {
         event.preventDefault();
-        handleClose();
+        return handleClose();
       }
-    }, [disableBackgroundClick, handleClose]);
+      if (onClickOutside) {
+        onClickOutside(event);
+      }
+    }, [disableBackgroundClick, onClickOutside, handleClose]);
     var handleEnter = React.useCallback(function () {
       setExited(false);
     }, []);
@@ -12392,7 +12396,7 @@
   });
   StyledCssTransition.displayName = "StyledCssTransition";
 
-  var _excluded$B = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
+  var _excluded$C = ["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,
@@ -12416,7 +12420,7 @@
       bodyClassName = _ref.bodyClassName,
       _ref$disableBackgroun2 = _ref.disableBackgroundClick,
       disableBackgroundClick = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
-      rest = _objectWithoutProperties(_ref, _excluded$B);
+      rest = _objectWithoutProperties(_ref, _excluded$C);
     var _useState = React.useState(defaultOpen),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
@@ -12509,13 +12513,13 @@
   });
   StyledHeader.displayName = "StyledHeader";
 
-  var _excluded$A = ["className", "size", "children"];
+  var _excluded$B = ["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$A);
+      rest = _objectWithoutProperties(_ref, _excluded$B);
     return /*#__PURE__*/React__default["default"].createElement(StyledHeader, _extends({
       type: "paper-2",
       className: classNames__default["default"]("c-header", className),
@@ -12531,7 +12535,7 @@
   })(["white-space:pre-wrap;overflow-wrap:break-word;resize:none;"]);
   StyledAutoResizeTextarea.displayName = "StyledAutoResizeTextarea";
 
-  var _excluded$z = ["minRows", "maxRows", "lineHeight", "onChange", "className", "preventNewRowOnEnter", "cursorAtTextEnd", "onKeyDown", "value"];
+  var _excluded$A = ["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,
@@ -12547,7 +12551,7 @@
       cursorAtTextEnd = _ref$cursorAtTextEnd === void 0 ? false : _ref$cursorAtTextEnd,
       onKeyDown = _ref.onKeyDown,
       value = _ref.value,
-      rest = _objectWithoutProperties(_ref, _excluded$z);
+      rest = _objectWithoutProperties(_ref, _excluded$A);
     var innerRef = React.useRef(null);
     var _useState = React.useState(minRows),
       _useState2 = _slicedToArray(_useState, 2),
@@ -12823,7 +12827,7 @@
   });
   StyledChoose.displayName = "StyledChoose";
 
-  var _excluded$y = ["children", "disabled", "active", "className"];
+  var _excluded$z = ["children", "disabled", "active", "className"];
   /**
    * Choose component
    */
@@ -12834,7 +12838,7 @@
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$y);
+      args = _objectWithoutProperties(_ref, _excluded$z);
     return /*#__PURE__*/React__default["default"].createElement(StyledChoose, _extends({
       disabled: disabled,
       className: classNames__default["default"]("c-choose", className),
@@ -12930,21 +12934,21 @@
   StyledLinkElements.displayName = "StyledLinkElements";
   StyledLink.displayName = "StyledLink";
 
-  var _excluded$x = ["children", "className"];
+  var _excluded$y = ["children", "className"];
   /**
    * Back link component
    */
   var BackLink = function BackLink(_ref) {
     var children = _ref.children,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$x);
+      args = _objectWithoutProperties(_ref, _excluded$y);
     return /*#__PURE__*/React__default["default"].createElement(StyledBackLink, _extends({
       className: classNames__default["default"]("c-back-link", className)
     }, args), children);
   };
   BackLink.displayName = "BackLink";
 
-  var _excluded$w = ["as", "children", "variant", "size", "disabled", "className"];
+  var _excluded$x = ["as", "children", "variant", "size", "disabled", "className"];
   /**
    * Link component
    */
@@ -12957,7 +12961,7 @@
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$w);
+      args = _objectWithoutProperties(_ref, _excluded$x);
     var Component = as || "a";
     return /*#__PURE__*/React__default["default"].createElement(StyledLink, _extends({
       ref: ref,
@@ -13068,7 +13072,7 @@
   })(["padding:20px 30px;", " ", ""], FontStyle, BoxSizingStyle);
   StyledDialogActions.displayName = "StyledDialogActions";
 
-  var _excluded$v = ["in", "children", "style", "timeout"];
+  var _excluded$w = ["in", "children", "style", "timeout"];
   var defaultStyle$1 = function defaultStyle(duration) {
     return {
       transition: "all ".concat(duration, "ms ease-in-out"),
@@ -13096,7 +13100,7 @@
       style = _ref.style,
       _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 500 : _ref$timeout,
-      rest = _objectWithoutProperties(_ref, _excluded$v);
+      rest = _objectWithoutProperties(_ref, _excluded$w);
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
       appear: true,
       in: inProp,
@@ -13111,7 +13115,7 @@
   };
   Fade.displayName = "Fade";
 
-  var _excluded$u = ["in", "children", "style", "timeout", "initialDirection"];
+  var _excluded$v = ["in", "children", "style", "timeout", "initialDirection"];
   var Slide = function Slide(_ref) {
     var _ref$in = _ref.in,
       inProp = _ref$in === void 0 ? false : _ref$in,
@@ -13121,7 +13125,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$u);
+      rest = _objectWithoutProperties(_ref, _excluded$v);
     var directionSign;
     switch (initialDirection) {
       case "right":
@@ -13174,12 +13178,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$t = ["children", "direction"];
+  var _excluded$u = ["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$t);
+      props = _objectWithoutProperties(_ref, _excluded$u);
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, _extends({
       timeout: 200,
       classNames: "c-slide",
@@ -13222,7 +13226,7 @@
   };
   ResizeTransition.displayName = "ResizeTransition";
 
-  var _excluded$s = ["in", "children", "style", "timeout"];
+  var _excluded$t = ["in", "children", "style", "timeout"];
   var defaultStyle = function defaultStyle(duration) {
     return {
       transition: "all ".concat(duration, "ms ease-in"),
@@ -13256,7 +13260,7 @@
       style = _ref.style,
       _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 200 : _ref$timeout,
-      rest = _objectWithoutProperties(_ref, _excluded$s);
+      rest = _objectWithoutProperties(_ref, _excluded$t);
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
       appear: true,
       in: inProp,
@@ -13306,13 +13310,13 @@
   };
   Scale.displayName = "Scale";
 
-  var _excluded$r = ["className", "children"];
+  var _excluded$s = ["className", "children"];
   // import { useDialogContext } from "./DialogContext";
 
   var DialogActions = function DialogActions(_ref) {
     var className = _ref.className,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$r);
+      rest = _objectWithoutProperties(_ref, _excluded$s);
     // useDialogContext();
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogActions, _extends({
@@ -13321,13 +13325,13 @@
   };
   DialogActions.displayName = "DialogActions";
 
-  var _excluded$q = ["className", "children"];
+  var _excluded$r = ["className", "children"];
   // import { useDialogContext } from "./DialogContext";
 
   var DialogContent = function DialogContent(_ref) {
     var className = _ref.className,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$q);
+      rest = _objectWithoutProperties(_ref, _excluded$r);
     // useDialogContext();
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogContent, _extends({
@@ -13348,7 +13352,7 @@
   };
   DialogContentDivider.displayName = "DialogContentDivider";
 
-  var _excluded$p = ["children", "className", "disableDefaultHeading"];
+  var _excluded$q = ["children", "className", "disableDefaultHeading"];
   // import { useDialogContext } from "./DialogContext";
 
   var DialogTitle = function DialogTitle(_ref) {
@@ -13356,7 +13360,7 @@
       className = _ref.className,
       _ref$disableDefaultHe = _ref.disableDefaultHeading,
       disableDefaultHeading = _ref$disableDefaultHe === void 0 ? false : _ref$disableDefaultHe,
-      rest = _objectWithoutProperties(_ref, _excluded$p);
+      rest = _objectWithoutProperties(_ref, _excluded$q);
     // useDialogContext();
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogTitle, _extends({
@@ -13365,6 +13369,7 @@
   };
   DialogTitle.displayName = "DialogTitle";
 
+  var _excluded$p = ["children", "open", "onClose", "className", "enableBackgroundClick", "disableCloseOnEsc", "animate", "onClickOutside"];
   var _Dialog = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       _ref$open = _ref.open,
@@ -13376,7 +13381,9 @@
       _ref$disableCloseOnEs = _ref.disableCloseOnEsc,
       disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
       _ref$animate = _ref.animate,
-      animate = _ref$animate === void 0 ? "slide" : _ref$animate;
+      animate = _ref$animate === void 0 ? "slide" : _ref$animate,
+      onClickOutside = _ref.onClickOutside,
+      rest = _objectWithoutProperties(_ref, _excluded$p);
     var animateDialog = function animateDialog() {
       switch (animate) {
         case "fade":
@@ -13396,13 +13403,14 @@
     return (
       /*#__PURE__*/
       // <DialogContext.Provider value={{}}>
-      React__default["default"].createElement(Modal, {
+      React__default["default"].createElement(Modal, _extends({
         ref: ref,
         open: open,
         onClose: onClose,
         disableBackgroundClick: !enableBackgroundClick,
-        disableCloseOnEsc: disableCloseOnEsc
-      }, animateDialog())
+        disableCloseOnEsc: disableCloseOnEsc,
+        onClickOutside: onClickOutside
+      }, rest), animateDialog())
       // </DialogContext.Provider>
     );
   });