diff --git a/packages/pl-fe/package.json b/packages/pl-fe/package.json
index 75bc3e7b2..d68a9d27c 100644
--- a/packages/pl-fe/package.json
+++ b/packages/pl-fe/package.json
@@ -116,7 +116,7 @@
     "query-string": "^9.1.0",
     "react": "^18.0.0",
     "react-color": "^2.19.3",
-    "react-datepicker": "^4.8.0",
+    "react-datepicker": "^7.4.0",
     "react-dom": "^18.0.0",
     "react-error-boundary": "^4.0.11",
     "react-helmet": "^6.1.0",
@@ -125,7 +125,6 @@
     "react-inlinesvg": "^4.0.0",
     "react-intl": "^6.0.0",
     "react-motion": "^0.5.2",
-    "react-overlays": "^0.9.0",
     "react-popper": "^2.3.0",
     "react-redux": "^9.0.4",
     "react-router-dom": "^5.3.4",
@@ -176,7 +175,6 @@
     "@types/path-browserify": "^1.0.0",
     "@types/react": "^18.0.26",
     "@types/react-color": "^3.0.6",
-    "@types/react-datepicker": "^4.4.2",
     "@types/react-dom": "^18.0.10",
     "@types/react-helmet": "^6.1.5",
     "@types/react-motion": "^0.0.40",
diff --git a/packages/pl-fe/src/components/ui/popover/popover.tsx b/packages/pl-fe/src/components/ui/popover/popover.tsx
index 74c6400b7..f004f8a84 100644
--- a/packages/pl-fe/src/components/ui/popover/popover.tsx
+++ b/packages/pl-fe/src/components/ui/popover/popover.tsx
@@ -3,12 +3,14 @@ import {
   autoPlacement,
   FloatingArrow,
   offset,
+  shift,
   useClick,
   useDismiss,
   useFloating,
   useHover,
   useInteractions,
   useTransitionStyles,
+  type OffsetOptions,
 } from '@floating-ui/react';
 import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
@@ -25,6 +27,7 @@ interface IPopover {
   interaction?: 'click' | 'hover';
   /** Add a class to the reference (trigger) element */
   referenceElementClassName?: string;
+  offsetOptions?: OffsetOptions;
 }
 
 /**
@@ -33,14 +36,12 @@ interface IPopover {
  * Similar to tooltip, but requires a click and is used for larger blocks
  * of information.
  */
-const Popover: React.FC<IPopover> = (props) => {
-  const { children, content, referenceElementClassName, interaction = 'hover', isFlush = false } = props;
-
+const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassName, interaction = 'hover', isFlush = false, offsetOptions = 10 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const arrowRef = useRef<SVGSVGElement>(null);
 
-  const { x, y, strategy, refs, context } = useFloating({
+  const { x, y, strategy, refs, context, placement } = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
     placement: 'top',
@@ -48,7 +49,10 @@ const Popover: React.FC<IPopover> = (props) => {
       autoPlacement({
         allowedPlacements: ['top', 'bottom'],
       }),
-      offset(10),
+      offset(offsetOptions),
+      shift({
+        padding: 8,
+      }),
       arrow({
         element: arrowRef,
       }),
@@ -59,10 +63,11 @@ const Popover: React.FC<IPopover> = (props) => {
     initial: {
       opacity: 0,
       transform: 'scale(0.8)',
+      transformOrigin: placement === 'bottom' ? 'top' : 'bottom',
     },
     duration: {
-      open: 200,
-      close: 200,
+      open: 100,
+      close: 100,
     },
   });
 
@@ -82,6 +87,7 @@ const Popover: React.FC<IPopover> = (props) => {
         ref: refs.setReference,
         ...getReferenceProps(),
         className: clsx(children.props.className, referenceElementClassName),
+        'aria-expanded': isOpen,
       })}
 
       {(isMounted) && (
@@ -94,20 +100,23 @@ const Popover: React.FC<IPopover> = (props) => {
               left: x ?? 0,
               ...styles,
             }}
-            className={
-              clsx({
-                'z-40 rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700': true,
-                'p-6': !isFlush,
-              })
-            }
-            {...getFloatingProps()}
           >
-            {content}
+            <div
+              className={
+                clsx(
+                  'z-40 overflow-hidden rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700',
+                  { 'p-6': !isFlush },
+                )
+              }
+              {...getFloatingProps()}
+            >
+              {content}
 
+            </div>
             <FloatingArrow
               ref={arrowRef}
               context={context}
-              className='-ml-2 fill-white dark:hidden' /** -ml-2 to fix offcenter arrow */
+              className='fill-white dark:fill-primary-700'
               tipRadius={3}
             />
           </div>
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/color-picker.tsx b/packages/pl-fe/src/features/pl-fe-config/components/color-picker.tsx
index 5e09b3ae3..87545c76a 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/color-picker.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/color-picker.tsx
@@ -1,49 +1,31 @@
-import { supportsPassiveEvents } from 'detect-passive-events';
-import React, { useEffect, useRef } from 'react';
-import { SketchPicker, ColorChangeHandler } from 'react-color';
+import React from 'react';
+import { SketchPicker, type ColorChangeHandler } from 'react-color';
 
-import { isMobile } from 'pl-fe/is-mobile';
-
-const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
+import { Popover } from 'pl-fe/components/ui';
 
 interface IColorPicker {
-  style?: React.CSSProperties;
   value: string;
   onChange: ColorChangeHandler;
-  onClose: () => void;
+  className?: string;
 }
 
-const ColorPicker: React.FC<IColorPicker> = ({ style, value, onClose, onChange }) => {
-  const node = useRef<HTMLDivElement>(null);
-
-  const handleDocumentClick = (e: MouseEvent | TouchEvent) => {
-    if (node.current && !node.current.contains(e.target as HTMLElement)) {
-      onClose();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('click', handleDocumentClick, false);
-    document.addEventListener('touchend', handleDocumentClick, listenerOptions);
-
-    return () => {
-      document.removeEventListener('click', handleDocumentClick, false);
-      document.removeEventListener('touchend', handleDocumentClick);
-    };
-  }, []);
-
-  const pickerStyle: React.CSSProperties = {
-    ...style,
-    marginLeft: isMobile(window.innerWidth) ? '20px' : '12px',
-    position: 'absolute',
-    zIndex: 1000,
-  };
-
-  return (
-    <div id='SketchPickerContainer' ref={node} style={pickerStyle}>
-      <SketchPicker color={value} disableAlpha onChange={onChange} />
-    </div>
-  );
-};
+const ColorPicker: React.FC<IColorPicker> = ({ value, onChange, className }) => (
+  <div className={className}>
+    <Popover
+      interaction='click'
+      content={
+        <SketchPicker color={value} disableAlpha onChange={onChange} />
+      }
+      isFlush
+    >
+      <div
+        className='size-full'
+        role='presentation'
+        style={{ background: value }}
+        title={value}
+      />
+    </Popover>
+  </div>
+);
 
 export { ColorPicker as default };
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/color-with-picker.tsx b/packages/pl-fe/src/features/pl-fe-config/components/color-with-picker.tsx
deleted file mode 100644
index 1783f3a32..000000000
--- a/packages/pl-fe/src/features/pl-fe-config/components/color-with-picker.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { useState, useRef } from 'react';
-// @ts-ignore: TODO: upgrade react-overlays. v3.1 and above have TS definitions
-import Overlay from 'react-overlays/lib/Overlay';
-
-import { isMobile } from 'pl-fe/is-mobile';
-
-import ColorPicker from './color-picker';
-
-import type { ColorChangeHandler } from 'react-color';
-
-interface IColorWithPicker {
-  value: string;
-  onChange: ColorChangeHandler;
-  className?: string;
-}
-
-const ColorWithPicker: React.FC<IColorWithPicker> = ({ value, onChange, className }) => {
-  const node = useRef<HTMLDivElement>(null);
-  const [active, setActive] = useState(false);
-  const [placement, setPlacement] = useState<string | null>(null);
-
-  const hidePicker = () => {
-    setActive(false);
-  };
-
-  const showPicker = () => {
-    setActive(true);
-    setPlacement(isMobile(window.innerWidth) ? 'bottom' : 'right');
-  };
-
-  const onToggle: React.MouseEventHandler = (e) => {
-    if (active) {
-      hidePicker();
-    } else {
-      showPicker();
-    }
-
-    e.stopPropagation();
-  };
-
-  return (
-    <div className={className}>
-      <div
-        ref={node}
-        className='size-full'
-        role='presentation'
-        style={{ background: value }}
-        title={value}
-        onClick={onToggle}
-      />
-
-      <Overlay show={active} placement={placement} target={node.current}>
-        <ColorPicker value={value} onChange={onChange} onClose={hidePicker} />
-      </Overlay>
-    </div>
-  );
-};
-
-export { ColorWithPicker as default };
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-dropdown.tsx b/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-dropdown.tsx
index c63e078ed..e8b5c3c69 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-dropdown.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-dropdown.tsx
@@ -1,9 +1,8 @@
-import React, { useRef, useState } from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-// @ts-ignore
-import Overlay from 'react-overlays/lib/Overlay';
 
 import ForkAwesomeIcon from 'pl-fe/components/fork-awesome-icon';
+import { Popover } from 'pl-fe/components/ui';
 
 import IconPickerMenu from './icon-picker-menu';
 
@@ -19,65 +18,32 @@ interface IIconPickerDropdown {
 const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickIcon }) => {
   const intl = useIntl();
 
-  const [active, setActive] = useState(false);
-  const [placement, setPlacement] = useState<'bottom' | 'top'>();
-
-  const target = useRef(null);
-
-  const onShowDropdown: React.KeyboardEventHandler<HTMLDivElement> = ({ target }) => {
-    setActive(true);
-
-    const { top } = (target as any).getBoundingClientRect();
-    setPlacement(top * 2 < innerHeight ? 'bottom' : 'top');
-  };
-
-  const onHideDropdown = () => {
-    setActive(false);
-  };
-
-  const onToggle: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
-    e.stopPropagation();
-    if (!e.key || e.key === 'Enter') {
-      if (active) {
-        onHideDropdown();
-      } else {
-        onShowDropdown(e);
-      }
-    }
-  };
-
-  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
-    if (e.key === 'Escape') {
-      onHideDropdown();
-    }
-  };
-
   const title = intl.formatMessage(messages.emoji);
   const forkAwesomeIcons = require('../forkawesome.json');
 
   return (
-    <div onKeyDown={handleKeyDown}>
-      <div
-        ref={target}
-        className='flex size-[38px] cursor-pointer items-center justify-center text-lg'
-        title={title}
-        aria-label={title}
-        aria-expanded={active}
-        role='button'
-        onClick={onToggle as any as React.MouseEventHandler<HTMLDivElement>}
-        onKeyDown={onToggle}
-        tabIndex={0}
+    <div>
+      <Popover
+        interaction='click'
+        content={
+          <IconPickerMenu
+            icons={forkAwesomeIcons}
+            onPick={onPickIcon}
+          />
+        }
+        isFlush
       >
-        <ForkAwesomeIcon id={value} />
-      </div>
+        <div
+          className='flex size-[38px] cursor-pointer items-center justify-center text-lg'
+          title={title}
+          aria-label={title}
+          role='button'
+          tabIndex={0}
+        >
+          <ForkAwesomeIcon id={value} />
+        </div>
 
-      <Overlay show={active} placement={placement} target={target.current}>
-        <IconPickerMenu
-          icons={forkAwesomeIcons}
-          onClose={onHideDropdown}
-          onPick={onPickIcon}
-        />
-      </Overlay>
+      </Popover>
     </div>
   );
 };
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-menu.tsx b/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-menu.tsx
index f6c114548..bf3a6a4d0 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-menu.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-menu.tsx
@@ -1,6 +1,5 @@
 import clsx from 'clsx';
-import { supportsPassiveEvents } from 'detect-passive-events';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Text } from 'pl-fe/components/ui';
@@ -9,40 +8,16 @@ const messages = defineMessages({
   emoji: { id: 'icon_button.label', defaultMessage: 'Select icon' },
 });
 
-const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
-
 interface IIconPickerMenu {
   icons: Record<string, Array<string>>;
-  onClose: () => void;
   onPick: (icon: string) => void;
   style?: React.CSSProperties;
 }
 
-const IconPickerMenu: React.FC<IIconPickerMenu> = ({ icons, onClose, onPick, style }) => {
+const IconPickerMenu: React.FC<IIconPickerMenu> = ({ icons, onPick, style }) => {
   const intl = useIntl();
 
-  const node = useRef<HTMLDivElement | null>(null);
-
-  const handleDocumentClick = useCallback((e: MouseEvent | TouchEvent) => {
-    if (node.current && !node.current.contains(e.target as Node)) {
-      onClose();
-    }
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener('click', handleDocumentClick, false);
-    document.addEventListener('touchend', handleDocumentClick, listenerOptions);
-
-    return () => {
-      document.removeEventListener('click', handleDocumentClick, false);
-      document.removeEventListener('touchend', handleDocumentClick, listenerOptions as any);
-
-    };
-  }, []);
-
   const setRef = (c: HTMLDivElement) => {
-    node.current = c;
-
     if (!c) return;
 
     // Nice and dirty hack to display the icons
@@ -54,7 +29,6 @@ const IconPickerMenu: React.FC<IIconPickerMenu> = ({ icons, onClose, onPick, sty
   };
 
   const handleClick = (icon: string) => {
-    onClose();
     onPick(icon);
   };
 
@@ -79,16 +53,14 @@ const IconPickerMenu: React.FC<IIconPickerMenu> = ({ icons, onClose, onPick, sty
 
   return (
     <div
-      className='absolute z-[101] -my-0.5'
-      style={{ transform: 'translateX(calc(-1 * env(safe-area-inset-right)))', ...style }}
+      className='h-[270px] overflow-x-hidden overflow-y-scroll rounded bg-white p-1.5 text-gray-900 dark:bg-primary-900 dark:text-gray-100'
+      aria-label={title}
       ref={setRef}
     >
-      <div className='h-[270px] overflow-x-hidden overflow-y-scroll rounded bg-white p-1.5 text-gray-900 dark:bg-primary-900 dark:text-gray-100' aria-label={title}>
-        <Text className='px-1.5 py-1'><FormattedMessage id='icon_button.icons' defaultMessage='Icons' /></Text>
-        <ul className='grid grid-cols-8'>
-          {Object.values(icons).flat().map(icon => renderIcon(icon))}
-        </ul>
-      </div>
+      <Text className='px-1.5 py-1'><FormattedMessage id='icon_button.icons' defaultMessage='Icons' /></Text>
+      <ul className='grid grid-cols-8'>
+        {Object.values(icons).flat().map(icon => renderIcon(icon))}
+      </ul>
     </div>
   );
 };
diff --git a/packages/pl-fe/src/features/theme-editor/components/color.tsx b/packages/pl-fe/src/features/theme-editor/components/color.tsx
index 1e7dc61dc..2739f5bc5 100644
--- a/packages/pl-fe/src/features/theme-editor/components/color.tsx
+++ b/packages/pl-fe/src/features/theme-editor/components/color.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import ColorWithPicker from 'pl-fe/features/pl-fe-config/components/color-with-picker';
+import ColorPicker from 'pl-fe/features/pl-fe-config/components/color-picker';
 
 import type { ColorChangeHandler } from 'react-color';
 
@@ -17,7 +17,7 @@ const Color: React.FC<IColor> = ({ color, onChange }) => {
   };
 
   return (
-    <ColorWithPicker
+    <ColorPicker
       className='size-full'
       value={color}
       onChange={handleChange}
diff --git a/packages/pl-fe/src/features/theme-editor/index.tsx b/packages/pl-fe/src/features/theme-editor/index.tsx
index 6cd1dae47..e7d3482bb 100644
--- a/packages/pl-fe/src/features/theme-editor/index.tsx
+++ b/packages/pl-fe/src/features/theme-editor/index.tsx
@@ -8,7 +8,7 @@ import { fetchPlFeConfig } from 'pl-fe/actions/pl-fe';
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
 import List, { ListItem } from 'pl-fe/components/list';
 import { Button, Column, Form, FormActions } from 'pl-fe/components/ui';
-import ColorWithPicker from 'pl-fe/features/pl-fe-config/components/color-with-picker';
+import ColorPicker from 'pl-fe/features/pl-fe-config/components/color-picker';
 import { useAppDispatch, useAppSelector, usePlFeConfig } from 'pl-fe/hooks';
 import { normalizePlFeConfig } from 'pl-fe/normalizers';
 import toast from 'pl-fe/toast';
@@ -265,7 +265,7 @@ const ColorListItem: React.FC<IColorListItem> = ({ label, value, onChange }) =>
 
   return (
     <ListItem label={label}>
-      <ColorWithPicker
+      <ColorPicker
         value={value}
         onChange={handleChange}
         className='h-8 w-10 overflow-hidden rounded-md'
diff --git a/packages/pl-fe/yarn.lock b/packages/pl-fe/yarn.lock
index e938c48af..2502c4c96 100644
--- a/packages/pl-fe/yarn.lock
+++ b/packages/pl-fe/yarn.lock
@@ -1454,7 +1454,7 @@
   dependencies:
     "@floating-ui/dom" "^1.0.0"
 
-"@floating-ui/react@^0.26.24":
+"@floating-ui/react@^0.26.23", "@floating-ui/react@^0.26.24":
   version "0.26.24"
   resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.24.tgz#072b9dfeca4e79ef4e3000ef1c28e0ffc86f4ed4"
   integrity sha512-2ly0pCkZIGEQUq5H8bBK0XJmc1xIK/RM3tvVzY3GBER7IOD1UgmC2Y2tjj4AuS+TC+vTE1KJv2053290jua0Sw==
@@ -2103,7 +2103,7 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
   integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
 
-"@popperjs/core@^2.11.5", "@popperjs/core@^2.9.2":
+"@popperjs/core@^2.11.5":
   version "2.11.5"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
   integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
@@ -2909,16 +2909,6 @@
     "@types/react" "*"
     "@types/reactcss" "*"
 
-"@types/react-datepicker@^4.4.2":
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.4.2.tgz#13ab25a5fff7f3da4c5380c471efd8b38f53010e"
-  integrity sha512-g8DhWvYmaIMLzVrIEVLXncylyImyBaoPsEUr3yR13JDaaHoebhDorqnVv4tLkNGa8SjBB8SAOQvxD5jaPNBX8A==
-  dependencies:
-    "@popperjs/core" "^2.9.2"
-    "@types/react" "*"
-    date-fns "^2.0.1"
-    react-popper "^2.2.5"
-
 "@types/react-dom@^18.0.0", "@types/react-dom@^18.0.10":
   version "18.0.10"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.10.tgz#3b66dec56aa0f16a6cc26da9e9ca96c35c0b4352"
@@ -4409,11 +4399,6 @@ chrome-trace-event@^1.0.2:
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
   integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
 
-classnames@^2.2.5, classnames@^2.2.6:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
-  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
-
 clean-css@^5.2.2:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.0.tgz#ad3d8238d5f3549e83d5f87205189494bc7cbb59"
@@ -4471,6 +4456,11 @@ clsx@^2.0.0:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -4894,10 +4884,10 @@ datasette@1.0.1:
     eventemitter2 "5.0.1"
     lodash "4.17.5"
 
-date-fns@^2.0.1, date-fns@^2.24.0:
-  version "2.28.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
-  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
+date-fns@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
+  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
 
 debug@2.6.9:
   version "2.6.9"
@@ -5122,7 +5112,7 @@ dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
-dom-helpers@^3.2.1, dom-helpers@^3.4.0:
+dom-helpers@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
   integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
@@ -9538,14 +9528,6 @@ processenv@1.1.0:
   dependencies:
     babel-runtime "6.26.0"
 
-prop-types-extra@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.1.tgz#58c3b74cbfbb95d304625975aa2f0848329a010b"
-  integrity sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==
-  dependencies:
-    react-is "^16.3.2"
-    warning "^4.0.0"
-
 prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -9679,17 +9661,15 @@ react-color@^2.19.3:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-datepicker@^4.8.0:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.8.0.tgz#11b8918d085a1ce4781eee4c8e4641b3cd592010"
-  integrity sha512-u69zXGHMpxAa4LeYR83vucQoUCJQ6m/WBsSxmUMu/M8ahTSVMMyiyQzauHgZA2NUr9y0FUgOAix71hGYUb6tvg==
+react-datepicker@^7.4.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-7.4.0.tgz#127a9c3ce24260f6e21cf4211c910f3eb6d83383"
+  integrity sha512-vSSok4DTZ9/Os8O4HjZLxh4SZVFU6dQvoCX6mfbNdBqMsBBdzftrvMz0Nb4UUVVbgj9o8PfX84K3/31oPrTqmg==
   dependencies:
-    "@popperjs/core" "^2.9.2"
-    classnames "^2.2.6"
-    date-fns "^2.24.0"
-    prop-types "^15.7.2"
-    react-onclickoutside "^6.12.0"
-    react-popper "^2.2.5"
+    "@floating-ui/react" "^0.26.23"
+    clsx "^2.1.1"
+    date-fns "^3.6.0"
+    prop-types "^15.8.1"
 
 react-dom@^18.0.0:
   version "18.2.0"
@@ -9777,7 +9757,7 @@ react-intl@^6.0.0:
     intl-messageformat "10.5.3"
     tslib "^2.4.0"
 
-react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0:
+react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9787,11 +9767,6 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-lifecycles-compat@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
 react-motion@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
@@ -9801,24 +9776,7 @@ react-motion@^0.5.2:
     prop-types "^15.5.8"
     raf "^3.1.0"
 
-react-onclickoutside@^6.12.0:
-  version "6.12.1"
-  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.12.1.tgz#92dddd28f55e483a1838c5c2930e051168c1e96b"
-  integrity sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q==
-
-react-overlays@^0.9.0:
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.9.3.tgz#5bac8c1e9e7e057a125181dee2d784864dd62902"
-  integrity sha512-u2T7nOLnK+Hrntho4p0Nxh+BsJl0bl4Xuwj/Y0a56xywLMetgAfyjnDVrudLXsNcKGaspoC+t3C1V80W9QQTdQ==
-  dependencies:
-    classnames "^2.2.5"
-    dom-helpers "^3.2.1"
-    prop-types "^15.5.10"
-    prop-types-extra "^1.0.1"
-    react-transition-group "^2.2.1"
-    warning "^3.0.0"
-
-react-popper@^2.2.5, react-popper@^2.3.0:
+react-popper@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
   integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
@@ -9949,16 +9907,6 @@ react-swipeable-views@^0.14.0:
     react-swipeable-views-utils "^0.14.0"
     warning "^4.0.1"
 
-react-transition-group@^2.2.1:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
-  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
-  dependencies:
-    dom-helpers "^3.4.0"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-    react-lifecycles-compat "^3.0.4"
-
 react@^18.0.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -12119,7 +12067,7 @@ warning@^3.0.0:
   dependencies:
     loose-envify "^1.0.0"
 
-warning@^4.0.0, warning@^4.0.1, warning@^4.0.2:
+warning@^4.0.1, warning@^4.0.2:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==