@activecollab/components 1.0.9 → 1.0.13

package/dist/index.js

@@ -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"
@@ -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, {
@@ -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"
     });
@@ -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$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 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$n = ["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$n);
+
+    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$m = ["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$m);
 
     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$l = ["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$l);
 
     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$k = ["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$k);
 
     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$j = ["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$j);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledExpandSingle, _extends({
       ref: ref,
@@ -5253,11 +5299,11 @@
   };
   Nav.displayName = "Nav";
 
-  var _excluded$j = ["expanded"];
+  var _excluded$i = ["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$i);
 
     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$h = ["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$h);
 
     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$g = ["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$g);
 
     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,
@@ -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, {