@activecollab/components 1.0.10 → 1.0.14

package/dist/index.js

@@ -312,7 +312,7 @@
   })(["display:inline-flex;svg{margin:0 4px;}"]);
   StyledButtonElement.displayName = "StyledButtonElement";
 
-  var _excluded$S = ["children", "variant", "size", "disabled", "className"];
+  var _excluded$R = ["children", "variant", "size", "disabled", "className"];
 
   /**
    * Button component
@@ -325,7 +325,7 @@
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$S);
+        args = _objectWithoutProperties(_ref, _excluded$R);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledButton$1, _extends({
       disabled: disabled,
@@ -377,12 +377,12 @@
   })(["svg{fill:var(--color-theme-100);}&:hover svg{transform:rotate(90deg);transition:ease 0.3s;}"]);
   StyledGlobalAddButton.displayName = "StyledGlobalAddButton";
 
-  var _excluded$R = ["className", "disabled"];
+  var _excluded$Q = ["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$R);
+        rest = _objectWithoutProperties(_ref, _excluded$Q);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledGlobalAddButton, _extends({
       ref: ref,
@@ -415,11 +415,11 @@
   });
   StyledButtonGroup$1.displayName = "StyledButtonGroup";
 
-  var _excluded$Q = ["children", "className"];
+  var _excluded$P = ["children", "className"];
   var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$Q);
+        rest = _objectWithoutProperties(_ref, _excluded$P);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup$1, _extends({
       ref: ref,
@@ -445,7 +445,7 @@
     }, [refA, refB]);
   }
 
-  var _excluded$P = ["children", "anchorEl", "open", "style", "transition", "placement"];
+  var _excluded$O = ["children", "anchorEl", "open", "style", "transition", "placement"];
   var Popper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         anchorEl = _ref.anchorEl,
@@ -456,7 +456,7 @@
         transition = _ref$transition === void 0 ? false : _ref$transition,
         _ref$placement = _ref.placement,
         initialPlacement = _ref$placement === void 0 ? "bottom" : _ref$placement,
-        rest = _objectWithoutProperties(_ref, _excluded$P);
+        rest = _objectWithoutProperties(_ref, _excluded$O);
 
     var _useState = React.useState(true),
         _useState2 = _slicedToArray(_useState, 2),
@@ -628,11 +628,11 @@
     return props.$isLight && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);color:var(--color-theme-700);"]);
   });
 
-  var _excluded$O = ["children"];
+  var _excluded$N = ["children"];
 
   var TooltipAnimation = function TooltipAnimation(_ref) {
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$O);
+        props = _objectWithoutProperties(_ref, _excluded$N);
 
     return /*#__PURE__*/React__default["default"].createElement(FromElement, _extends({
       timeout: 0
@@ -852,7 +852,7 @@
   });
   StyledTypography.displayName = "StyledTypography";
 
-  var _excluded$N = ["variant", "Tag", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
+  var _excluded$M = ["variant", "Tag", "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,
@@ -884,7 +884,7 @@
         weight = _ref$weight === void 0 ? "regular" : _ref$weight,
         className = _ref.className,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$N);
+        props = _objectWithoutProperties(_ref, _excluded$M);
 
     var innerRef = React.useRef(null);
     var handleRef = useForkRef(ref, innerRef);
@@ -909,12 +909,12 @@
   });
   Typography.displayName = "Typography";
 
-  var _excluded$M = ["weight", "children"];
+  var _excluded$L = ["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$M);
+        props = _objectWithoutProperties(_ref, _excluded$L);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Body 2",
@@ -955,7 +955,7 @@
   });
   StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
 
-  var _excluded$L = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className"];
+  var _excluded$K = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className"];
   var CounterButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var label = _ref.label,
         icon = _ref.icon,
@@ -965,7 +965,7 @@
         tooltipText = _ref.tooltipText,
         onClearAll = _ref.onClearAll,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$L);
+        args = _objectWithoutProperties(_ref, _excluded$K);
 
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: classnames__default["default"]("tw-flex ac-font box-sizing", className)
@@ -1106,7 +1106,7 @@
   var StyledMonth = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledMonth",
     componentId: "sc-1owijsg-3"
-  })(["width:26%;transition-duration:0.3s;", " ", " ", " ", ""], {
+  })(["width:26%;transition-duration:0.3s;", " ", " ", " ", " ", ""], {
     "margin": "auto",
     "cursor": "pointer",
     "borderRadius": "1rem",
@@ -1118,9 +1118,11 @@
       "color": "var(--color-theme-100)"
     });
   }, function (props) {
-    return props.$isCurrent && styled.css(["", ""], {
+    return props.$isCurrent && !props.$isSelected && styled.css(["", ""], {
       "color": "var(--color-primary)"
     });
+  }, function (props) {
+    return props.$isCurrent && props.$isSelected && styled.css(["color:var(--color-theme-100);"]);
   }, function (props) {
     return props.$isCurrentQuarter && styled.css(["background-color:var(--color-primary-300);"]);
   });
@@ -1138,7 +1140,7 @@
   var StyledYearMonthPickerNavBarItem = styled__default["default"].span.withConfig({
     displayName: "Styles__StyledYearMonthPickerNavBarItem",
     componentId: "sc-1owijsg-6"
-  })(["", " transition-duration:0.3s;&:hover{background-color:var(--color-primary-300);border-radius:15px;}"], {
+  })(["", " transition-duration:0.3s;margin-top:1px;display:inline-block;height:24px;&:hover{background-color:var(--color-primary-300);border-radius:15px;}"], {
     "paddingLeft": "1rem",
     "paddingRight": "1rem",
     "cursor": "pointer"
@@ -1333,7 +1335,7 @@
   StyledDatePicker.displayName = "StyledDatePicker";
   StyledDayPicker.displayName = "StyledDayPicker";
 
-  var _excluded$K = ["className", "onChange", "onDayClick", "selectedDays", "disabledDays", "selectionMode", "month", "onMonthChange", "dateRequired", "firstDayOfWeek", "fixedWeeks", "modifiers"];
+  var _excluded$J = ["className", "onChange", "onDayClick", "selectedDays", "disabledDays", "selectionMode", "month", "onMonthChange", "dateRequired", "firstDayOfWeek", "fixedWeeks", "modifiers"];
   var DatePicker = function DatePicker(_ref) {
     var className = _ref.className,
         onChange = _ref.onChange,
@@ -1355,7 +1357,7 @@
         _ref$fixedWeeks = _ref.fixedWeeks,
         fixedWeeks = _ref$fixedWeeks === void 0 ? true : _ref$fixedWeeks,
         defaultModifiers = _ref.modifiers,
-        rest = _objectWithoutProperties(_ref, _excluded$K);
+        rest = _objectWithoutProperties(_ref, _excluded$J);
 
     var _useState = React.useState(),
         _useState2 = _slicedToArray(_useState, 2),
@@ -1698,10 +1700,10 @@
   })(["position:fixed;top:0;right:0;bottom:0;left:0;"]);
   StyledOverlay.displayName = "StyledOverlay";
 
-  var _excluded$J = ["className"];
+  var _excluded$I = ["className"];
   var Overlay = function Overlay(_ref) {
     var className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$J);
+        rest = _objectWithoutProperties(_ref, _excluded$I);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledOverlay, _extends({
       className: classnames__default["default"]("c-overlay", className)
@@ -1715,7 +1717,7 @@
   })(["", " ", " position:fixed;top:0;right:0;bottom:0;left:0;"], FontStyle, BoxSizingStyle);
   StyledWindow.displayName = "StyledWindow";
 
-  var _excluded$I = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock"];
+  var _excluded$H = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock"];
   var returnFocus = {
     preventScroll: true
   };
@@ -1729,7 +1731,7 @@
         disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
         _ref$disableScrollLoc = _ref.disableScrollLock,
         disableScrollLock = _ref$disableScrollLoc === void 0 ? false : _ref$disableScrollLoc,
-        rest = _objectWithoutProperties(_ref, _excluded$I);
+        rest = _objectWithoutProperties(_ref, _excluded$H);
 
     var innerRef = React.useRef(null);
     var handleRef = useForkRef(innerRef, ref);
@@ -1795,7 +1797,7 @@
   }, FontStyle, BoxSizingStyle);
   StyledBubble.displayName = "StyledBubble";
 
-  var _excluded$H = ["children", "className", "innerRef", "style"];
+  var _excluded$G = ["children", "className", "innerRef", "style"];
   var Bubble = function Bubble(_ref) {
     var children = _ref.children,
         className = _ref.className,
@@ -1803,7 +1805,7 @@
         innerRef = _ref$innerRef === void 0 ? null : _ref$innerRef,
         _ref$style = _ref.style,
         style = _ref$style === void 0 ? {} : _ref$style,
-        rest = _objectWithoutProperties(_ref, _excluded$H);
+        rest = _objectWithoutProperties(_ref, _excluded$G);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledBubble, _extends({}, rest, {
       ref: innerRef,
@@ -1872,6 +1874,7 @@
         _ref$position = _ref.position,
         position = _ref$position === void 0 ? "bottom-start" : _ref$position,
         target = _ref.target,
+        className = _ref.className,
         menuClassName = _ref.menuClassName,
         popperClassName = _ref.popperClassName,
         backgroundElementClass = _ref.backgroundElementClass,
@@ -1933,7 +1936,7 @@
       className: popperClassName,
       tabIndex: -1
     }, /*#__PURE__*/React__default["default"].createElement(StyledMenu$1, {
-      className: classnames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName),
+      className: classnames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName, className),
       $mode: mode,
       onMouseDown: onMenuClick
     }, /*#__PURE__*/React__default["default"].createElement(MenuContextProvider, {
@@ -1945,13 +1948,13 @@
   };
   Menu.displayName = "Menu";
 
-  var _excluded$G = ["title", "className", "leftElement", "rightElement"];
+  var _excluded$F = ["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$G);
+        props = _objectWithoutProperties(_ref, _excluded$F);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuHeader, _extends({}, props, {
       className: classnames__default["default"]("c-menu-header", className),
@@ -1974,11 +1977,11 @@
   });
   MenuHeader.displayName = "MenuHeader";
 
-  var _excluded$F = ["children", "className"];
+  var _excluded$E = ["children", "className"];
   var MenuFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$F);
+        props = _objectWithoutProperties(_ref, _excluded$E);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter, _extends({}, props, {
       className: classnames__default["default"]("c-menu-footer", className),
@@ -1990,7 +1993,7 @@
   var StyledButton = styled__default["default"].button.withConfig({
     displayName: "Styles__StyledButton",
     componentId: "sc-1v8h7mt-0"
-  })(["", " ", " color:var(--color-theme-700);margin:0;padding:0;background:none;width:auto;height:auto;border:none;height:32px;transition:all 0.3s ease;", " svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}"], FontStyle, BoxSizingStyle, {
+  })(["", " ", " color:var(--color-theme-700);margin:0;padding:0;background:none;width:100%;height:auto;border:none;height:30px;transition:all 0.3s ease;", " svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}"], FontStyle, BoxSizingStyle, {
     "position": "relative",
     "WebkitFontSmoothing": "antialiased",
     "MozOsxFontSmoothing": "grayscale",
@@ -2027,7 +2030,7 @@
   var StyledDiv = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDiv",
     componentId: "sc-1v8h7mt-4"
-  })(["", " ", " ", " height:32px;transition:all 0.3s ease;padding:0 16px;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
+  })(["", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
     return props.$isTargetable && styled.css(["", ""], {
       "pointerEvents": "none"
     });
@@ -2647,7 +2650,7 @@
   SortIcon.displayName = "SortIcon";
   var SortIcon$1 = SortIcon;
 
-  var _excluded$E = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue"];
+  var _excluded$D = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue"];
   exports.SortDirection = void 0;
 
   (function (SortDirection) {
@@ -2697,7 +2700,7 @@
     } : _ref$groupHead,
         isCollapsible = _ref.isCollapsible,
         emptyValue = _ref.emptyValue,
-        args = _objectWithoutProperties(_ref, _excluded$E);
+        args = _objectWithoutProperties(_ref, _excluded$D);
 
     var _useState = React.useState(sortDirection),
         _useState2 = _slicedToArray(_useState, 2),
@@ -3111,7 +3114,7 @@
   });
   StyledPaper.displayName = "StyledPaper";
 
-  var _excluded$D = ["children", "className", "type", "hover", "useOptimizedShadow"];
+  var _excluded$C = ["children", "className", "type", "hover", "useOptimizedShadow"];
 
   /**
    * This is a component description and should sit directly above your component
@@ -3125,7 +3128,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$D);
+        rest = _objectWithoutProperties(_ref, _excluded$C);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledPaper, _extends({
       className: classnames__default["default"](className, {
@@ -3179,7 +3182,7 @@
   });
   StyledCard.displayName = "StyledCard";
 
-  var _excluded$C = ["children", "className", "hoverable", "paperType"];
+  var _excluded$B = ["children", "className", "hoverable", "paperType"];
   var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
@@ -3187,7 +3190,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$C);
+        rest = _objectWithoutProperties(_ref, _excluded$B);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends({}, rest, {
       type: paperType,
@@ -3280,12 +3283,12 @@
   });
   EntityCard.displayName = "EntityCard";
 
-  var _excluded$B = ["weight", "children"];
+  var _excluded$A = ["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$B);
+        props = _objectWithoutProperties(_ref, _excluded$A);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: weight,
@@ -3295,10 +3298,10 @@
   });
   Title1.displayName = "Title1";
 
-  var _excluded$A = ["children"];
+  var _excluded$z = ["children"];
   var Header2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$A);
+        props = _objectWithoutProperties(_ref, _excluded$z);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
@@ -3308,10 +3311,10 @@
   });
   Header2.displayName = "Header2";
 
-  var _excluded$z = ["children"];
+  var _excluded$y = ["children"];
   var Header3 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$z);
+        props = _objectWithoutProperties(_ref, _excluded$y);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
@@ -3321,12 +3324,12 @@
   });
   Header3.displayName = "Header3";
 
-  var _excluded$y = ["weight", "children"];
+  var _excluded$x = ["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$y);
+        props = _objectWithoutProperties(_ref, _excluded$x);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Body 1",
@@ -3336,12 +3339,12 @@
   });
   Body1.displayName = "Body1";
 
-  var _excluded$x = ["weight", "children"];
+  var _excluded$w = ["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$x);
+        props = _objectWithoutProperties(_ref, _excluded$w);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 1",
@@ -3351,12 +3354,12 @@
   });
   Caption1.displayName = "Caption1";
 
-  var _excluded$w = ["weight", "children"];
+  var _excluded$v = ["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$w);
+        props = _objectWithoutProperties(_ref, _excluded$v);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 2",
@@ -3475,7 +3478,7 @@
     "borderRadius": "9999px"
   });
 
-  var _excluded$v = ["url", "alt", "size", "className"];
+  var _excluded$u = ["url", "alt", "size", "className"];
   var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var url = _ref.url,
         _ref$alt = _ref.alt,
@@ -3483,7 +3486,7 @@
         _ref$size = _ref.size,
         size = _ref$size === void 0 ? 24 : _ref$size,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$v);
+        rest = _objectWithoutProperties(_ref, _excluded$u);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({}, rest, {
       ref: ref,
@@ -3530,7 +3533,7 @@
   });
   StyledLabelText.displayName = "StyledLabelText";
 
-  var _excluded$u = ["name", "color", "showText", "showDot", "className"];
+  var _excluded$t = ["name", "color", "showText", "showDot", "className"];
   var Label = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var name = _ref.name,
         color = _ref.color,
@@ -3539,7 +3542,7 @@
         _ref$showDot = _ref.showDot,
         showDot = _ref$showDot === void 0 ? true : _ref$showDot,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$u);
+        rest = _objectWithoutProperties(_ref, _excluded$t);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledLabel$1, _extends({
       className: classnames__default["default"]("c-label", className),
@@ -3559,10 +3562,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$t = ["className"];
+  var _excluded$s = ["className"];
   var LinearLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$t);
+        rest = _objectWithoutProperties(_ref, _excluded$s);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
       ref: ref,
@@ -3577,10 +3580,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$s = ["className"];
+  var _excluded$r = ["className"];
   var DotsLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$s);
+        rest = _objectWithoutProperties(_ref, _excluded$r);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
       ref: ref,
@@ -3596,10 +3599,10 @@
     componentId: "sc-1ht53g9-0"
   })(["position:relative;width:20px;&:before{content:\"\";display:block;padding-top:100%;}svg{animation:", " 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;circle{stroke-dasharray:1,200;stroke-dashoffset:0;stroke:var(--color-theme-600);animation:", " 1.5s ease-in-out infinite;stroke-linecap:round;}}"], rotateAnimation, dashAnimation);
 
-  var _excluded$r = ["className"];
+  var _excluded$q = ["className"];
   var SpinnerLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$r);
+        rest = _objectWithoutProperties(_ref, _excluded$q);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader, _extends({
       ref: ref,
@@ -3661,7 +3664,7 @@
   }, StyledInput$1, StyledLabel);
   StyledCheckbox.displayName = "StyledCheckbox";
 
-  var _excluded$q = ["className", "hover", "id"];
+  var _excluded$p = ["className", "hover", "id"];
 
   /**
    * Checkbox component
@@ -3671,7 +3674,7 @@
         hover = _ref.hover,
         _ref$id = _ref.id,
         id = _ref$id === void 0 ? "checkbox" : _ref$id,
-        rest = _objectWithoutProperties(_ref, _excluded$q);
+        rest = _objectWithoutProperties(_ref, _excluded$p);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, {
       className: classnames__default["default"]("c-checkbox", {
@@ -3744,14 +3747,14 @@
   }, StyledRadioLabel);
   StyledRadioButton.displayName = "StyledRadioButton";
 
-  var _excluded$p = ["className", "id", "hover"];
+  var _excluded$o = ["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$p);
+        props = _objectWithoutProperties(_ref, _excluded$o);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledRadioButton, {
       className: classnames__default["default"]("c-radio-btn", {
@@ -3775,156 +3778,6 @@
   });
   RadioButton.displayName = "RadioButton";
 
-  var StyledScrollShadow = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledScrollShadow",
-    componentId: "sc-17pcaqo-0"
-  })(["", ""], {
-    "position": "relative"
-  });
-  var StyledScrollShadowTop = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledScrollShadowTop",
-    componentId: "sc-17pcaqo-1"
-  })(["", " background-image:linear-gradient( to top,var(--page-paper-main-shadow),var(--page-paper-main) );"], {
-    "position": "absolute",
-    "top": "0px",
-    "left": "0px",
-    "right": "0px",
-    "height": "0.5rem"
-  });
-  var StyledScrollShadowBottom = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledScrollShadowBottom",
-    componentId: "sc-17pcaqo-2"
-  })(["", " background-image:linear-gradient( to top,var(--page-paper-main),var(--page-paper-main-shadow) );"], {
-    "position": "absolute",
-    "bottom": "0px",
-    "left": "0px",
-    "right": "0px",
-    "height": "0.5rem"
-  });
-  var StyledScrollShadowLeft = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledScrollShadowLeft",
-    componentId: "sc-17pcaqo-3"
-  })(["", " background-image:linear-gradient( to left,var(--page-paper-main-shadow),var(--page-paper-main) );"], {
-    "position": "absolute",
-    "left": "0px",
-    "top": "0px",
-    "bottom": "0px",
-    "width": "0.5rem"
-  });
-  var StyledScrollShadowRight = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledScrollShadowRight",
-    componentId: "sc-17pcaqo-4"
-  })(["", " background-image:linear-gradient( to right,var(--page-paper-main-shadow),var(--page-paper-main) );"], {
-    "position": "absolute",
-    "right": "0px",
-    "top": "0px",
-    "bottom": "0px",
-    "width": "0.5rem"
-  });
-  StyledScrollShadow.displayName = "StyledScrollShadow";
-  StyledScrollShadowTop.displayName = "StyledScrollShadowTop";
-  StyledScrollShadowBottom.displayName = "StyledScrollShadowBottom";
-  StyledScrollShadowLeft.displayName = "StyledScrollShadowLeft";
-  StyledScrollShadowRight.displayName = "StyledScrollShadowRight";
-
-  var _excluded$o = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical"];
-  var ScrollShadow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var children = _ref.children,
-        className = _ref.className,
-        _ref$disableVertical = _ref.disableVertical,
-        disableVertical = _ref$disableVertical === void 0 ? false : _ref$disableVertical,
-        _ref$disableHorizonta = _ref.disableHorizontal,
-        disableHorizontal = _ref$disableHorizonta === void 0 ? false : _ref$disableHorizonta,
-        _ref$invertHorizontal = _ref.invertHorizontal,
-        invertHorizontal = _ref$invertHorizontal === void 0 ? false : _ref$invertHorizontal,
-        _ref$invertVertical = _ref.invertVertical,
-        invertVertical = _ref$invertVertical === void 0 ? false : _ref$invertVertical,
-        rest = _objectWithoutProperties(_ref, _excluded$o);
-
-    var _useState = React.useState({
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0
-    }),
-        _useState2 = _slicedToArray(_useState, 2),
-        opacity = _useState2[0],
-        setOpacity = _useState2[1];
-
-    var handleScroll = React.useCallback(function (event) {
-      var _ref2 = event.target,
-          scrollHeight = _ref2.scrollHeight,
-          clientHeight = _ref2.clientHeight,
-          scrollWidth = _ref2.scrollWidth,
-          clientWidth = _ref2.clientWidth;
-      var _ref3 = event.target,
-          scrollTop = _ref3.scrollTop,
-          scrollLeft = _ref3.scrollLeft;
-
-      if (scrollLeft < 0) {
-        scrollLeft *= -1;
-      }
-
-      if (scrollTop < 0) {
-        scrollTop *= -1;
-      }
-
-      setOpacity(function (prevState) {
-        var top = 1 / 20 * Math.min(scrollTop, 20);
-        var bottomScrollTop = scrollHeight - clientHeight;
-        var bottom = 1 / 20 * (bottomScrollTop - Math.max(scrollTop, bottomScrollTop - 20));
-        var left = 1 / 20 * Math.min(scrollLeft, 20);
-        var offset = scrollWidth - clientWidth;
-        var right = 1 / 20 * (offset - Math.max(scrollLeft, offset - 20));
-        var newState = {
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0
-        };
-
-        if (!disableVertical) {
-          newState.top = invertVertical ? bottom : top;
-          newState.bottom = invertVertical ? top : bottom;
-        }
-
-        if (!disableHorizontal) {
-          newState.left = invertHorizontal ? right : left;
-          newState.right = invertHorizontal ? left : right;
-        }
-
-        if (newState.top !== prevState.top || newState.bottom !== prevState.bottom || newState.left !== prevState.left || newState.right !== prevState.right) {
-          return newState;
-        }
-
-        return prevState;
-      });
-    }, [invertHorizontal, invertVertical, disableVertical, disableHorizontal]);
-    return /*#__PURE__*/React__default["default"].createElement(StyledScrollShadow, _extends({}, rest, {
-      ref: ref,
-      className: classnames__default["default"]("c-scroll-shadow", className)
-    }), children({
-      onScroll: handleScroll
-    }), !disableVertical ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledScrollShadowTop, {
-      style: {
-        opacity: opacity.top
-      }
-    }), /*#__PURE__*/React__default["default"].createElement(StyledScrollShadowBottom, {
-      style: {
-        opacity: opacity.bottom
-      }
-    })) : null, !disableHorizontal ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledScrollShadowLeft, {
-      style: {
-        opacity: opacity.left
-      }
-    }), /*#__PURE__*/React__default["default"].createElement(StyledScrollShadowRight, {
-      style: {
-        opacity: opacity.right
-      }
-    })) : null);
-  });
-  ScrollShadow.displayName = "ScrollShadow";
-
   var StyledHiglightedText = styled__default["default"].span.withConfig({
     displayName: "useHighlightText__StyledHiglightedText",
     componentId: "sc-13agf6o-0"
@@ -4101,14 +3954,208 @@
   };
   OptionGroup.displayName = "OptionGroup";
 
+  var StyledScrollShadow = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledScrollShadow",
+    componentId: "sc-17pcaqo-0"
+  })(["", ""], {
+    "position": "relative"
+  });
+  var StyledScrollShadowTop = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledScrollShadowTop",
+    componentId: "sc-17pcaqo-1"
+  })(["", " background-image:linear-gradient( to top,var(--page-paper-main-shadow),var(--page-paper-main) );"], {
+    "position": "absolute",
+    "top": "0px",
+    "left": "0px",
+    "right": "0px",
+    "height": "0.5rem"
+  });
+  var StyledScrollShadowBottom = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledScrollShadowBottom",
+    componentId: "sc-17pcaqo-2"
+  })(["", " background-image:linear-gradient( to top,var(--page-paper-main),var(--page-paper-main-shadow) );"], {
+    "position": "absolute",
+    "bottom": "0px",
+    "left": "0px",
+    "right": "0px",
+    "height": "0.5rem"
+  });
+  var StyledScrollShadowLeft = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledScrollShadowLeft",
+    componentId: "sc-17pcaqo-3"
+  })(["", " background-image:linear-gradient( to left,var(--page-paper-main-shadow),var(--page-paper-main) );"], {
+    "position": "absolute",
+    "left": "0px",
+    "top": "0px",
+    "bottom": "0px",
+    "width": "0.5rem"
+  });
+  var StyledScrollShadowRight = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledScrollShadowRight",
+    componentId: "sc-17pcaqo-4"
+  })(["", " background-image:linear-gradient( to right,var(--page-paper-main-shadow),var(--page-paper-main) );"], {
+    "position": "absolute",
+    "right": "0px",
+    "top": "0px",
+    "bottom": "0px",
+    "width": "0.5rem"
+  });
+  StyledScrollShadow.displayName = "StyledScrollShadow";
+  StyledScrollShadowTop.displayName = "StyledScrollShadowTop";
+  StyledScrollShadowBottom.displayName = "StyledScrollShadowBottom";
+  StyledScrollShadowLeft.displayName = "StyledScrollShadowLeft";
+  StyledScrollShadowRight.displayName = "StyledScrollShadowRight";
+
+  var _excluded$n = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical"];
+  var ScrollShadow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var children = _ref.children,
+        className = _ref.className,
+        _ref$disableVertical = _ref.disableVertical,
+        disableVertical = _ref$disableVertical === void 0 ? false : _ref$disableVertical,
+        _ref$disableHorizonta = _ref.disableHorizontal,
+        disableHorizontal = _ref$disableHorizonta === void 0 ? false : _ref$disableHorizonta,
+        _ref$invertHorizontal = _ref.invertHorizontal,
+        invertHorizontal = _ref$invertHorizontal === void 0 ? false : _ref$invertHorizontal,
+        _ref$invertVertical = _ref.invertVertical,
+        invertVertical = _ref$invertVertical === void 0 ? false : _ref$invertVertical,
+        rest = _objectWithoutProperties(_ref, _excluded$n);
+
+    var _useState = React.useState({
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    }),
+        _useState2 = _slicedToArray(_useState, 2),
+        opacity = _useState2[0],
+        setOpacity = _useState2[1];
+
+    var handleScroll = React.useCallback(function (event) {
+      var _ref2 = event.target,
+          scrollHeight = _ref2.scrollHeight,
+          clientHeight = _ref2.clientHeight,
+          scrollWidth = _ref2.scrollWidth,
+          clientWidth = _ref2.clientWidth;
+      var _ref3 = event.target,
+          scrollTop = _ref3.scrollTop,
+          scrollLeft = _ref3.scrollLeft;
+
+      if (scrollLeft < 0) {
+        scrollLeft *= -1;
+      }
+
+      if (scrollTop < 0) {
+        scrollTop *= -1;
+      }
+
+      setOpacity(function (prevState) {
+        var top = 1 / 20 * Math.min(scrollTop, 20);
+        var bottomScrollTop = scrollHeight - clientHeight;
+        var bottom = 1 / 20 * (bottomScrollTop - Math.max(scrollTop, bottomScrollTop - 20));
+        var left = 1 / 20 * Math.min(scrollLeft, 20);
+        var offset = scrollWidth - clientWidth;
+        var right = 1 / 20 * (offset - Math.max(scrollLeft, offset - 20));
+        var newState = {
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0
+        };
+
+        if (!disableVertical) {
+          newState.top = invertVertical ? bottom : top;
+          newState.bottom = invertVertical ? top : bottom;
+        }
+
+        if (!disableHorizontal) {
+          newState.left = invertHorizontal ? right : left;
+          newState.right = invertHorizontal ? left : right;
+        }
+
+        if (newState.top !== prevState.top || newState.bottom !== prevState.bottom || newState.left !== prevState.left || newState.right !== prevState.right) {
+          return newState;
+        }
+
+        return prevState;
+      });
+    }, [invertHorizontal, invertVertical, disableVertical, disableHorizontal]);
+    return /*#__PURE__*/React__default["default"].createElement(StyledScrollShadow, _extends({}, rest, {
+      ref: ref,
+      className: classnames__default["default"]("c-scroll-shadow", className)
+    }), children({
+      onScroll: handleScroll
+    }), !disableVertical ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledScrollShadowTop, {
+      style: {
+        opacity: opacity.top
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(StyledScrollShadowBottom, {
+      style: {
+        opacity: opacity.bottom
+      }
+    })) : null, !disableHorizontal ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledScrollShadowLeft, {
+      style: {
+        opacity: opacity.left
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(StyledScrollShadowRight, {
+      style: {
+        opacity: opacity.right
+      }
+    })) : null);
+  });
+  ScrollShadow.displayName = "ScrollShadow";
+
+  var useInitScrollRef = function useInitScrollRef(element) {
+    var invert = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var ref = React.useRef(element);
+    React.useEffect(function () {
+      if (ref.current) {
+        ref.current.scrollTop = invert ? -1 : 1;
+        ref.current.scrollTop = 0;
+        ref.current.scrollLeft = invert ? -1 : 1;
+        ref.current.scrollLeft = 0;
+      }
+    }, [invert]);
+    return ref;
+  };
+
+  var _excluded$m = ["as", "className", "invert"];
+  var ScrollElement = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var _ref$as = _ref.as,
+        as = _ref$as === void 0 ? "div" : _ref$as,
+        className = _ref.className,
+        _ref$invert = _ref.invert,
+        invert = _ref$invert === void 0 ? false : _ref$invert,
+        rest = _objectWithoutProperties(_ref, _excluded$m);
+
+    var internalRef = useInitScrollRef(null, invert);
+    var handleRef = useForkRef(internalRef, ref);
+
+    var props = _objectSpread2(_objectSpread2({}, rest), {}, {
+      ref: handleRef,
+      className: classnames__default["default"]("c-scroll-element tw-overflow-auto", className)
+    });
+
+    return /*#__PURE__*/React__default["default"].createElement(as, props);
+  });
+  ScrollElement.displayName = "ScrollElement";
+
+  var StyledAutocompleteScrollShadow = styled__default["default"](ScrollShadow).withConfig({
+    displayName: "Styles__StyledAutocompleteScrollShadow",
+    componentId: "sc-1bc1vz9-0"
+  })(["margin-top:4px;", ""], function (props) {
+    return props.$isHidden && styled.css(["", ";"], {
+      "display": "none"
+    });
+  });
+  StyledAutocompleteScrollShadow.displayName = "StyledAutocompleteScrollShadow";
   var StyledAutocompleteBody = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledAutocompleteBody",
-    componentId: "sc-1bc1vz9-0"
+    componentId: "sc-1bc1vz9-1"
   })(["max-height:340px;overflow:auto;margin-bottom:6px;"]);
   StyledAutocompleteBody.displayName = "StyledAutocompleteBody";
   var StyledAutocompleteNoResult = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledAutocompleteNoResult",
-    componentId: "sc-1bc1vz9-1"
+    componentId: "sc-1bc1vz9-2"
   })(["", ";padding:6px 16px;margin:4px 0;&:hover{background-color:var(--color-theme-200);}color:var(--color-theme-600);"], {
     "cursor": "pointer",
     "userSelect": "none"
@@ -4116,7 +4163,7 @@
   StyledAutocompleteNoResult.displayName = "StyledAutocompleteNoResult";
   var StyledAutocompleteNewItem = styled__default["default"].label.withConfig({
     displayName: "Styles__StyledAutocompleteNewItem",
-    componentId: "sc-1bc1vz9-2"
+    componentId: "sc-1bc1vz9-3"
   })(["", ";padding:6px 16px;margin:4px 0;font-weight:normal;color:var(--color-primary);&:before{content:\"+ \";}", ""], {
     "cursor": "pointer",
     "userSelect": "none"
@@ -4457,10 +4504,9 @@
     var renderNoResult = React.useMemo(function () {
       return /*#__PURE__*/React__default["default"].createElement(StyledAutocompleteNoResult, null, noResultText);
     }, [noResultText]);
-    return /*#__PURE__*/React__default["default"].createElement(ScrollShadow, {
-      className: classnames__default["default"]("c-select--list", {
-        "tw-hidden": !defaultValue && !emptyValue && !noResultText && list.length < 1
-      }, AutocompleteClassName)
+    return /*#__PURE__*/React__default["default"].createElement(StyledAutocompleteScrollShadow, {
+      className: AutocompleteClassName,
+      $isHidden: !defaultValue && !emptyValue && !noResultText && list.length < 1
     }, function (_ref2) {
       var onScroll = _ref2.onScroll;
       return /*#__PURE__*/React__default["default"].createElement(StyledAutocompleteBody, {
@@ -4513,7 +4559,7 @@
   });
   StyledInput.displayName = "StyledInput";
 
-  var _excluded$n = ["className", "type", "disabled"];
+  var _excluded$l = ["className", "type", "disabled"];
   var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$className = _ref.className,
         className = _ref$className === void 0 ? "" : _ref$className,
@@ -4521,7 +4567,7 @@
         type = _ref$type === void 0 ? "text" : _ref$type,
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-        rest = _objectWithoutProperties(_ref, _excluded$n);
+        rest = _objectWithoutProperties(_ref, _excluded$l);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
       ref: ref,
@@ -4580,7 +4626,7 @@
   };
   OptionContent.displayName = "OptionContent";
 
-  var _excluded$m = ["type", "mode", "target", "options", "selected", "position", "onChange", "actionIcon", "actionLabel", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose"];
+  var _excluded$k = ["type", "mode", "target", "options", "selected", "position", "onChange", "actionIcon", "actionLabel", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose"];
   var Select = function Select(_ref) {
     var _ref$type = _ref.type,
         type = _ref$type === void 0 ? "single" : _ref$type,
@@ -4610,7 +4656,7 @@
         keepSameOptionsOrder = _ref$keepSameOptionsO === void 0 ? false : _ref$keepSameOptionsO,
         onSelectOpen = _ref.onSelectOpen,
         onSelectClose = _ref.onSelectClose,
-        prop = _objectWithoutProperties(_ref, _excluded$m);
+        prop = _objectWithoutProperties(_ref, _excluded$k);
 
     var _useState = React.useState(),
         _useState2 = _slicedToArray(_useState, 2),
@@ -4885,7 +4931,7 @@
   });
   StyledNavAsMoreTarget.displayName = "StyledNavAsMoreTarget";
 
-  var _excluded$l = ["children", "active", "disabled", "className", "role"];
+  var _excluded$j = ["children", "active", "disabled", "className", "role"];
   var Item = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var children = _ref.children,
         _ref$active = _ref.active,
@@ -4894,7 +4940,7 @@
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
         className = _ref.className,
         role = _ref.role,
-        rest = _objectWithoutProperties(_ref, _excluded$l);
+        rest = _objectWithoutProperties(_ref, _excluded$j);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledNavListItem, _extends({
       className: classnames__default["default"]("c-nav__item", {
@@ -4936,11 +4982,11 @@
   });
   StyledExpandSingle.displayName = "StyledExpandSingle";
 
-  var _excluded$k = ["expanded"];
+  var _excluded$i = ["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$k);
+        rest = _objectWithoutProperties(_ref, _excluded$i);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledExpandSingle, _extends({
       ref: ref,
@@ -5253,11 +5299,11 @@
   };
   Nav.displayName = "Nav";
 
-  var _excluded$j = ["expanded"];
+  var _excluded$h = ["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$j);
+        rest = _objectWithoutProperties(_ref, _excluded$h);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledExpand, _extends({
       ref: ref,
@@ -5302,11 +5348,11 @@
   })(["border-top:1px solid var(--border-primary);margin:12px 16px;height:1px;"]);
   StyledListSeparator.displayName = "StyledListSeparator";
 
-  var _excluded$i = ["children", "className"];
+  var _excluded$g = ["children", "className"];
   var List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$i);
+        props = _objectWithoutProperties(_ref, _excluded$g);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({}, props, {
       className: className,
@@ -5315,11 +5361,11 @@
   });
   List.displayName = "List";
 
-  var _excluded$h = ["children", "className"];
+  var _excluded$f = ["children", "className"];
   var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$h);
+        props = _objectWithoutProperties(_ref, _excluded$f);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledListItem, _extends({}, props, {
       className: classnames__default["default"]("c-list-item", className),
@@ -5529,41 +5575,6 @@
   };
   MultiAvatar.displayName = "MultiAvatar";
 
-  var useInitScrollRef = function useInitScrollRef(element) {
-    var invert = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var ref = React.useRef(element);
-    React.useEffect(function () {
-      if (ref.current) {
-        ref.current.scrollTop = invert ? -1 : 1;
-        ref.current.scrollTop = 0;
-        ref.current.scrollLeft = invert ? -1 : 1;
-        ref.current.scrollLeft = 0;
-      }
-    }, [invert]);
-    return ref;
-  };
-
-  var _excluded$g = ["as", "className", "invert"];
-  var ScrollElement = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var _ref$as = _ref.as,
-        as = _ref$as === void 0 ? "div" : _ref$as,
-        className = _ref.className,
-        _ref$invert = _ref.invert,
-        invert = _ref$invert === void 0 ? false : _ref$invert,
-        rest = _objectWithoutProperties(_ref, _excluded$g);
-
-    var internalRef = useInitScrollRef(null, invert);
-    var handleRef = useForkRef(internalRef, ref);
-
-    var props = _objectSpread2(_objectSpread2({}, rest), {}, {
-      ref: handleRef,
-      className: classnames__default["default"]("c-scroll-element tw-overflow-auto", className)
-    });
-
-    return /*#__PURE__*/React__default["default"].createElement(as, props);
-  });
-  ScrollElement.displayName = "ScrollElement";
-
   var ActivityIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
@@ -7308,12 +7319,12 @@
   });
   StyledTextarea.displayName = "StyledTextarea";
 
-  var _excluded$f = ["className", "disabled"];
+  var _excluded$e = ["className", "disabled"];
   var Textarea = /*#__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$f);
+        rest = _objectWithoutProperties(_ref, _excluded$e);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledTextarea, _extends({}, rest, {
       ref: ref,
@@ -7359,7 +7370,7 @@
   });
   StyledModalOverlay.displayName = "StyledModalOverlay";
 
-  var _excluded$e = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "open", "onClose"];
+  var _excluded$d = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "open", "onClose"];
 
   var getHasTransition = function getHasTransition(children) {
     return children.props ? Object.prototype.hasOwnProperty.call(children.props, "in") : false;
@@ -7378,7 +7389,7 @@
         _ref$open = _ref.open,
         defaultOpen = _ref$open === void 0 ? false : _ref$open,
         onClose = _ref.onClose,
-        rest = _objectWithoutProperties(_ref, _excluded$e);
+        rest = _objectWithoutProperties(_ref, _excluded$d);
 
     var _useState = React.useState(defaultOpen),
         _useState2 = _slicedToArray(_useState, 2),
@@ -7525,7 +7536,7 @@
   });
   StyledCssTransition.displayName = "StyledCssTransition";
 
-  var _excluded$d = ["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,
@@ -7549,7 +7560,7 @@
         bodyClassName = _ref.bodyClassName,
         _ref$disableBackgroun2 = _ref.disableBackgroundClick,
         disableBackgroundClick = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
-        rest = _objectWithoutProperties(_ref, _excluded$d);
+        rest = _objectWithoutProperties(_ref, _excluded$c);
 
     var _useState = React.useState(defaultOpen),
         _useState2 = _slicedToArray(_useState, 2),
@@ -7643,11 +7654,11 @@
   })(["height:4rem;padding:0 1rem;display:flex;overflow:hidden;min-width:350px;@media screen and (max-width:350px){overflow:auto;}"]);
   StyledHeader.displayName = "StyledHeader";
 
-  var _excluded$c = ["className", "children"];
+  var _excluded$b = ["className", "children"];
   var Header = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
         children = _ref.children,
-        rest = _objectWithoutProperties(_ref, _excluded$c);
+        rest = _objectWithoutProperties(_ref, _excluded$b);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledHeader, _extends({
       type: "paper-2",
@@ -7663,7 +7674,7 @@
   })(["white-space:pre-wrap;overflow-wrap:break-word;resize:none;"]);
   StyledAutoResizeTextarea.displayName = "StyledAutoResizeTextarea";
 
-  var _excluded$b = ["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,
@@ -7679,7 +7690,7 @@
         cursorAtTextEnd = _ref$cursorAtTextEnd === void 0 ? false : _ref$cursorAtTextEnd,
         onKeyDown = _ref.onKeyDown,
         value = _ref.value,
-        rest = _objectWithoutProperties(_ref, _excluded$b);
+        rest = _objectWithoutProperties(_ref, _excluded$a);
 
     var innerRef = React.useRef(null);
 
@@ -7994,7 +8005,7 @@
   });
   StyledChoose.displayName = "StyledChoose";
 
-  var _excluded$a = ["children", "disabled", "active", "className"];
+  var _excluded$9 = ["children", "disabled", "active", "className"];
 
   /**
    * Choose component
@@ -8006,7 +8017,7 @@
         _ref$active = _ref.active,
         active = _ref$active === void 0 ? false : _ref$active,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$a);
+        args = _objectWithoutProperties(_ref, _excluded$9);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledChoose, _extends({
       disabled: disabled,
@@ -8097,7 +8108,7 @@
   StyledLinkElements.displayName = "StyledLinkElements";
   StyledLink.displayName = "StyledLink";
 
-  var _excluded$9 = ["children", "className"];
+  var _excluded$8 = ["children", "className"];
 
   /**
    * Back link component
@@ -8105,7 +8116,7 @@
   var BackLink = function BackLink(_ref) {
     var children = _ref.children,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$9);
+        args = _objectWithoutProperties(_ref, _excluded$8);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledBackLink, _extends({
       className: classnames__default["default"]("c-back-link", className)
@@ -8113,7 +8124,7 @@
   };
   BackLink.displayName = "BackLink";
 
-  var _excluded$8 = ["children", "variant", "size", "disabled", "className"];
+  var _excluded$7 = ["children", "variant", "size", "disabled", "className"];
 
   /**
    * Link component
@@ -8126,7 +8137,7 @@
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$8);
+        args = _objectWithoutProperties(_ref, _excluded$7);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledLink, _extends({
       disabled: disabled,
@@ -8255,11 +8266,11 @@
   });
   Dialog.displayName = "Dialog";
 
-  var _excluded$7 = ["className", "children"];
+  var _excluded$6 = ["className", "children"];
   var DialogContent = function DialogContent(_ref) {
     var className = _ref.className,
         children = _ref.children,
-        rest = _objectWithoutProperties(_ref, _excluded$7);
+        rest = _objectWithoutProperties(_ref, _excluded$6);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogContent, _extends({
       className: classnames__default["default"]("c-dialog-content", className)
@@ -8275,13 +8286,13 @@
   };
   DialogContentDivider.displayName = "DialogContentDivider";
 
-  var _excluded$6 = ["children", "className", "disableDefaultHeading"];
+  var _excluded$5 = ["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$6);
+        rest = _objectWithoutProperties(_ref, _excluded$5);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogTitle, _extends({
       className: classnames__default["default"]("c-dialog-title-wrapper", className)
@@ -8289,11 +8300,11 @@
   };
   DialogTitle.displayName = "DialogTitle";
 
-  var _excluded$5 = ["className", "children"];
+  var _excluded$4 = ["className", "children"];
   var DialogActions = function DialogActions(_ref) {
     var className = _ref.className,
         children = _ref.children,
-        rest = _objectWithoutProperties(_ref, _excluded$5);
+        rest = _objectWithoutProperties(_ref, _excluded$4);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogActions, _extends({
       className: classnames__default["default"]("c-dialog-actions", className)
@@ -8355,10 +8366,10 @@
     componentId: "sc-1jkx994-2"
   })([".modal-header{padding:16px 30px;h1{margin:0;font-size:16px;}}.modal-body{padding:10px 30px;}.modal-divider{border-top:1px solid var(--border-primary);height:1px;}.modal-footer{padding:16px 30px;}"]);
   StyledConfirmDialog.displayName = "StyledConfirmDialog";
-  var StyledSelectDateDatePicker = styled__default["default"](DatePicker).withConfig({
+  var StyledSelectDateDatePicker = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledSelectDateDatePicker",
     componentId: "sc-1jkx994-3"
-  })(["", ""], {
+  })(["", " color:red;"], {
     "paddingTop": "1rem",
     "paddingBottom": "0.5rem"
   });
@@ -8449,7 +8460,7 @@
       onKeyDown: handleOnKeyDown,
       tabIndex: -1,
       className: "date-picker-form"
-    }, /*#__PURE__*/React__default["default"].createElement(StyledSelectDateDatePicker, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledSelectDateDatePicker, null, /*#__PURE__*/React__default["default"].createElement(DatePicker, {
       month: month,
       onMonthChange: onMonthChange,
       onChange: onChange,
@@ -8461,7 +8472,7 @@
       modifiers: modifiers,
       renderDay: renderDay,
       localeUtils: MomentLocaleUtils__default["default"]
-    }), mode === "atomic" || !dateRequired ? /*#__PURE__*/React__default["default"].createElement(StyledSelectDateFooter, {
+    })), mode === "atomic" || !dateRequired ? /*#__PURE__*/React__default["default"].createElement(StyledSelectDateFooter, {
       className: "date-picker-footer",
       $mode: mode
     }, mode === "atomic" ? /*#__PURE__*/React__default["default"].createElement(StyledSelectDateButtons, {
@@ -8502,7 +8513,7 @@
   });
   StyledPressed.displayName = "StyledPressed";
 
-  var _excluded$4 = ["children", "active", "className"];
+  var _excluded$3 = ["children", "active", "className"];
 
   /**
    * Pressed wrapper for button component
@@ -8512,7 +8523,7 @@
         _ref$active = _ref.active,
         active = _ref$active === void 0 ? false : _ref$active,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$4);
+        args = _objectWithoutProperties(_ref, _excluded$3);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledPressed, _extends({
       active: active,
@@ -9066,29 +9077,46 @@
   };
   Slide.displayName = "Slide";
 
-  var StyledSlideLeftRightTransition = styled__default["default"](reactTransitionGroup.CSSTransition).withConfig({
-    displayName: "Styles__StyledSlideLeftRightTransition",
-    componentId: "sc-ewkpq8-0"
-  })(["", " ", ""], function (props) {
-    return props.$direction === "left" && 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;}"]);
-  }, function (props) {
-    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;}"]);
-  });
-  StyledSlideLeftRightTransition.displayName = "StyledSlideLeftRightTransition";
-
-  var _excluded$3 = ["children", "direction"];
   var SlideLeftRightTransition = function SlideLeftRightTransition(_ref) {
-    var children = _ref.children,
+    var _ref$in = _ref.in,
+        inProp = _ref$in === void 0 ? false : _ref$in,
         _ref$direction = _ref.direction,
         direction = _ref$direction === void 0 ? "left" : _ref$direction,
-        props = _objectWithoutProperties(_ref, _excluded$3);
-
-    return /*#__PURE__*/React__default["default"].createElement(StyledSlideLeftRightTransition, _extends({
-      timeout: 200,
-      classNames: "c-slide",
-      unmountOnExit: true,
-      $direction: direction
-    }, props), children);
+        onEnter = _ref.onEnter,
+        onExited = _ref.onExited,
+        _ref$timeout = _ref.timeout,
+        timeout = _ref$timeout === void 0 ? 200 : _ref$timeout,
+        children = _ref.children,
+        style = _ref.style;
+    var transitionStyles = {
+      entering: {
+        position: "absolute",
+        transform: direction === "left" ? "translateX(100%)" : "translateX(-100%)"
+      },
+      entered: {
+        transform: "translateX(0%)",
+        transition: "all ".concat(timeout, "ms ease")
+      },
+      exiting: {
+        position: "absolute"
+      },
+      exited: {
+        transform: direction === "left" ? "translateX(-100%)" : "translateX(100%)",
+        transition: "all ".concat(timeout, "ms ease")
+      }
+    };
+    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
+      in: inProp,
+      timeout: 0,
+      onEnter: onEnter,
+      onExited: onExited
+    }, function (state) {
+      return /*#__PURE__*/React.cloneElement(children, {
+        style: _objectSpread2(_objectSpread2(_objectSpread2({
+          visibility: state === "exited" && !inProp ? "hidden" : undefined
+        }, transitionStyles[state]), style), children.props.style)
+      });
+    });
   };
   SlideLeftRightTransition.displayName = "SlideLeftRightTransition";