diff --git a/.storybook/manager.ts b/.storybook/manager.ts
deleted file mode 100644
index 2d78890c1..000000000
--- a/.storybook/manager.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { addons } from "@storybook/addons";
-
-addons.setConfig({
-  panelPosition: "bottom",
-});
diff --git a/package.json b/package.json
index e03bd15dc..0d1a6a25b 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,6 @@
     "@storybook/addon-links": "^8.2.9",
     "@storybook/addon-mdx-gfm": "^8.2.9",
     "@storybook/addon-storysource": "^8.2.9",
-    "@storybook/addons": "^7.6.17",
     "@storybook/blocks": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
diff --git a/packages/calendar/src/components/calendar/CalendarMonth.tsx b/packages/calendar/src/components/calendar/CalendarMonth.tsx
index 169fff1b5..3fbfe9e24 100644
--- a/packages/calendar/src/components/calendar/CalendarMonth.tsx
+++ b/packages/calendar/src/components/calendar/CalendarMonth.tsx
@@ -1,5 +1,6 @@
 import { Box, Row, Text } from "@stenajs-webui/core";
 import * as React from "react";
+import { ReactNode } from "react";
 import {
   CalendarDayProps,
   CalendarOnClicks,
@@ -21,7 +22,6 @@ import { CalendarDay } from "./renderers/CalendarDay";
 import { FlatButton, stenaAngleDown } from "@stenajs-webui/elements";
 import { WeekNumberCell } from "./renderers/WeekNumberCell";
 import { DisabledDayWrapper } from "./DisabledDayWrapper";
-import { ReactNode } from "react";
 
 export interface CalendarMonthProps<T>
   extends CalendarOnClicks<T>,
@@ -106,48 +106,46 @@ export function CalendarMonth<T>({
               ))}
             </tr>
             {month.weeks.map((week: WeekData) => (
-              <>
-                <tr key={week.weekNumber}>
-                  {showWeekNumber && (
-                    <td>
-                      {renderWeekNumber ? (
-                        renderWeekNumber(week, theme, onClickWeek)
-                      ) : (
-                        <WeekNumberCell
-                          week={week}
-                          onClickWeek={onClickWeek}
-                          theme={theme}
-                        />
-                      )}
-                    </td>
-                  )}
-                  {week.days.map((day) => (
-                    <DisabledDayWrapper
-                      dayComponent={dayComponent}
-                      key={day.dateString}
-                      day={day}
-                      week={week}
-                      month={month}
-                      dayState={
-                        statePerWeek &&
-                        statePerWeek[week.weekNumber] &&
-                        statePerWeek[week.weekNumber][day.dayOfMonth]
-                      }
-                      userData={
-                        userDataPerWeek &&
-                        userDataPerWeek[week.weekNumber] &&
-                        userDataPerWeek[week.weekNumber][day.dayOfMonth]
-                      }
-                      onClickDay={onClickDay}
-                      theme={theme}
-                      extraDayContent={extraDayContent}
-                      defaultHighlights={defaultHighlights}
-                      minDate={minDate}
-                      maxDate={maxDate}
-                    />
-                  ))}
-                </tr>
-              </>
+              <tr key={week.weekNumber}>
+                {showWeekNumber && (
+                  <td>
+                    {renderWeekNumber ? (
+                      renderWeekNumber(week, theme, onClickWeek)
+                    ) : (
+                      <WeekNumberCell
+                        week={week}
+                        onClickWeek={onClickWeek}
+                        theme={theme}
+                      />
+                    )}
+                  </td>
+                )}
+                {week.days.map((day) => (
+                  <DisabledDayWrapper
+                    dayComponent={dayComponent}
+                    key={day.dateString}
+                    day={day}
+                    week={week}
+                    month={month}
+                    dayState={
+                      statePerWeek &&
+                      statePerWeek[week.weekNumber] &&
+                      statePerWeek[week.weekNumber][day.dayOfMonth]
+                    }
+                    userData={
+                      userDataPerWeek &&
+                      userDataPerWeek[week.weekNumber] &&
+                      userDataPerWeek[week.weekNumber][day.dayOfMonth]
+                    }
+                    onClickDay={onClickDay}
+                    theme={theme}
+                    extraDayContent={extraDayContent}
+                    defaultHighlights={defaultHighlights}
+                    minDate={minDate}
+                    maxDate={maxDate}
+                  />
+                ))}
+              </tr>
             ))}
           </tbody>
         </table>
diff --git a/packages/calendar/src/components/input-types/date-input/DateInput.tsx b/packages/calendar/src/components/input-types/date-input/DateInput.tsx
index f9c6bc55b..02415e6ae 100644
--- a/packages/calendar/src/components/input-types/date-input/DateInput.tsx
+++ b/packages/calendar/src/components/input-types/date-input/DateInput.tsx
@@ -1,11 +1,10 @@
 import { Box } from "@stenajs-webui/core";
 import { stenaCalendar, TextInputButton } from "@stenajs-webui/elements";
 import { TextInput, TextInputProps } from "@stenajs-webui/forms";
-import { Popover } from "@stenajs-webui/tooltip";
+import { ControlledPopover } from "@stenajs-webui/tooltip";
 import { format } from "date-fns";
 import * as React from "react";
 import { defaultPopoverPlacement } from "../../../config/DefaultPopoverPlacement";
-import { useCalendarPopoverUpdater } from "../../../features/internal-panel-state/UseCalendarPopoverUpdater";
 import { DateFormats } from "../../../util/date/DateFormats";
 import { SingleDateCalendar } from "../../calendar-types/single-date-calendar/SingleDateCalendar";
 import {
@@ -42,16 +41,6 @@ export interface DateInputProps<T = unknown>
   /**
    *  Portal target, HTML element. If not set, portal is not used.
    */
-  portalTarget?: HTMLElement | null;
-  /**
-   * Z-index of the calendar overlay.
-   * @default 100
-   */
-  zIndex?: number;
-  /**
-   * Width of the input element.
-   * * @default 125px
-   */
   width?: string;
   /**
    * The calendar theme to use.
@@ -69,13 +58,11 @@ export const DateInput: React.FC<DateInputProps> = ({
   displayFormat = DateFormats.fullDate,
   placeholder = "Enter date",
   value,
-  zIndex = 100,
   calendarTheme = defaultCalendarTheme,
   calendarProps,
   openOnMount,
   onClose,
   onChange,
-  portalTarget,
   variant,
   width,
   minDate,
@@ -85,48 +72,42 @@ export const DateInput: React.FC<DateInputProps> = ({
   const { hideCalendar, showingCalendar, onSelectDate, showCalendar } =
     useDateInput(onChange, onClose, openOnMount);
 
-  const { tippyRef, onChangePanel } = useCalendarPopoverUpdater();
-
   return (
     <Box width={width}>
-      <Popover
-        arrow={false}
-        lazy
-        visible={showingCalendar}
-        onClickOutside={hideCalendar}
+      <ControlledPopover
+        hideArrow
+        open={showingCalendar}
+        onRequestClose={hideCalendar}
+        renderTrigger={(props) => (
+          <Box {...props}>
+            <TextInput
+              type={"date"}
+              onFocus={showCalendar}
+              buttonRight={
+                <TextInputButton onClick={showCalendar} icon={stenaCalendar} />
+              }
+              value={value ? format(value, displayFormat) : ""}
+              placeholder={placeholder}
+              size={9}
+              disabled={disabled}
+              autoFocus={openOnMount}
+              variant={variant}
+              min={minDate}
+              max={maxDate}
+            />
+          </Box>
+        )}
         placement={defaultPopoverPlacement}
-        zIndex={zIndex}
-        appendTo={portalTarget ?? "parent"}
-        tippyRef={tippyRef}
-        disabled={disabled}
-        content={
-          <SingleDateCalendar
-            {...calendarProps}
-            onChange={onSelectDate}
-            value={value}
-            theme={calendarTheme}
-            onChangePanel={onChangePanel}
-            minDate={minDate}
-            maxDate={maxDate}
-          />
-        }
       >
-        <TextInput
-          type={"date"}
-          onFocus={showCalendar}
-          buttonRight={
-            <TextInputButton onClick={showCalendar} icon={stenaCalendar} />
-          }
-          value={value ? format(value, displayFormat) : ""}
-          placeholder={placeholder}
-          size={9}
-          disabled={disabled}
-          autoFocus={openOnMount}
-          variant={variant}
-          min={minDate}
-          max={maxDate}
+        <SingleDateCalendar
+          {...calendarProps}
+          onChange={onSelectDate}
+          value={value}
+          theme={calendarTheme}
+          minDate={minDate}
+          maxDate={maxDate}
         />
-      </Popover>
+      </ControlledPopover>
     </Box>
   );
 };
diff --git a/packages/calendar/src/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.tsx b/packages/calendar/src/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.tsx
index 940f9e249..19a8aba0b 100644
--- a/packages/calendar/src/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.tsx
+++ b/packages/calendar/src/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.tsx
@@ -1,10 +1,10 @@
-import { Box, useDelayedFalse } from "@stenajs-webui/core";
+import { Box } from "@stenajs-webui/core";
 import { stenaArrowRight } from "@stenajs-webui/elements";
 import {
   TextInputProps,
   ValueAndOnValueChangeProps,
 } from "@stenajs-webui/forms";
-import { Popover } from "@stenajs-webui/tooltip";
+import { ControlledPopover } from "@stenajs-webui/tooltip";
 import { isAfter } from "date-fns";
 import * as React from "react";
 import { useMemo, useRef } from "react";
@@ -115,63 +115,61 @@ export function DateRangeDualTextInput<TData>({
     [calendarProps?.statePerMonth, startDate, endDate, dateInFocus]
   );
 
-  const delayedIsCalendarVisible = useDelayedFalse(isCalendarVisible, 300);
-
   return (
     <Box onKeyDown={onKeyDownHandler}>
-      <Popover
-        arrow={false}
-        lazy
-        disabled={disabled}
-        placement={defaultPopoverPlacement}
-        onClickOutside={hideCalendar}
-        visible={isCalendarVisible}
-        content={
-          delayedIsCalendarVisible && (
-            <CalendarWithMonthSwitcher
-              onClickDay={onClickDay}
-              dateInFocus={dateInFocus}
-              setDateInFocus={setDateInFocus}
-              currentPanel={currentPanel}
-              setCurrentPanel={setCurrentPanel}
-              minDate={minDate}
-              maxDate={maxDate}
-              {...calendarProps}
-              statePerMonth={statePerMonth}
+      <ControlledPopover
+        hideArrow
+        restoreFocus={false}
+        returnFocus={false}
+        renderTrigger={(props) => (
+          <Box {...props}>
+            <DualTextInput
+              autoFocusLeft={autoFocus}
+              onEsc={onEsc}
+              onEnter={onEnter}
+              onBlur={onBlur}
+              disabled={disabled}
+              separatorIcon={stenaArrowRight}
+              typeLeft={"date"}
+              typeRight={"date"}
+              placeholderLeft={"Start date"}
+              placeholderRight={"End date"}
+              onChangeLeft={inputLeftChangeHandler}
+              onChangeRight={inputRightChangeHandler}
+              onClickArrowDown={onClickArrowButton}
+              onClickCalendar={onClickCalendarButton}
+              onFocusLeft={onFocusLeft}
+              onFocusRight={onFocusRight}
+              onClickLeft={onFocusLeft}
+              onClickRight={onFocusRight}
+              inputRefLeft={startDateInputRef}
+              inputRefRight={endDateInputRef}
+              variant={startDateIsAfterEnd ? "error" : variant}
+              widthLeft={widthLeft}
+              widthRight={widthRight}
+              minLeft={minDate}
+              maxLeft={maxDate}
+              minRight={minDate}
+              maxRight={maxDate}
             />
-          )
-        }
+          </Box>
+        )}
+        placement={defaultPopoverPlacement}
+        onRequestClose={hideCalendar}
+        open={isCalendarVisible}
       >
-        <DualTextInput
-          autoFocusLeft={autoFocus}
-          onEsc={onEsc}
-          onEnter={onEnter}
-          onBlur={onBlur}
-          disabled={disabled}
-          separatorIcon={stenaArrowRight}
-          typeLeft={"date"}
-          typeRight={"date"}
-          placeholderLeft={"Start date"}
-          placeholderRight={"End date"}
-          onChangeLeft={inputLeftChangeHandler}
-          onChangeRight={inputRightChangeHandler}
-          onClickArrowDown={onClickArrowButton}
-          onClickCalendar={onClickCalendarButton}
-          onFocusLeft={onFocusLeft}
-          onFocusRight={onFocusRight}
-          onClickLeft={onFocusLeft}
-          onClickRight={onFocusRight}
-          inputRefLeft={startDateInputRef}
-          inputRefRight={endDateInputRef}
-          variant={startDateIsAfterEnd ? "error" : variant}
-          widthLeft={widthLeft}
-          widthRight={widthRight}
-          minLeft={minDate}
-          maxLeft={maxDate}
-          minRight={minDate}
-          maxRight={maxDate}
+        <CalendarWithMonthSwitcher
+          onClickDay={onClickDay}
+          dateInFocus={dateInFocus}
+          setDateInFocus={setDateInFocus}
+          currentPanel={currentPanel}
+          setCurrentPanel={setCurrentPanel}
+          minDate={minDate}
+          maxDate={maxDate}
+          {...calendarProps}
+          statePerMonth={statePerMonth}
         />
-      </Popover>
+      </ControlledPopover>
     </Box>
   );
 }
diff --git a/packages/calendar/src/components/input-types/date-range-input/DateRangeInput.tsx b/packages/calendar/src/components/input-types/date-range-input/DateRangeInput.tsx
index fe826d65b..dc63c7f31 100644
--- a/packages/calendar/src/components/input-types/date-range-input/DateRangeInput.tsx
+++ b/packages/calendar/src/components/input-types/date-range-input/DateRangeInput.tsx
@@ -19,7 +19,7 @@ import {
 } from "@stenajs-webui/elements";
 import { CalendarWithMonthSwitcher } from "../../../features/month-switcher/CalendarWithMonthSwitcher";
 import { CalendarPanelType } from "../../../features/calendar-with-month-year-pickers/CalendarPanelType";
-import { Popover } from "@stenajs-webui/tooltip";
+import { ControlledPopover } from "@stenajs-webui/tooltip";
 import { buildDayStateForDateRange } from "../../../util/calendar/StateModifier";
 import { OptionalMinMaxDatesAsString } from "../../../types/CalendarTypes";
 import { DateRange } from "../../../types/DateRange";
@@ -45,16 +45,6 @@ export interface DateRangeInputProps<T>
    * @default End date
    */
   placeholderEndDate?: string;
-  /**
-   * Portal target, HTML element. If not set, portal is not used.
-   */
-  portalTarget?: HTMLElement | null;
-
-  /**
-   * Z-index of the calendar overlay.
-   * @default 100
-   */
-  zIndex?: number;
 
   /**
    * Width of the input element.
@@ -83,10 +73,8 @@ export function DateRangeInput<T>({
   displayFormat = DateFormats.fullDate,
   placeholderStartDate = "Start date",
   placeholderEndDate = "End date",
-  portalTarget,
   value,
   onValueChange,
-  zIndex = 100,
   width,
   calendarTheme = defaultCalendarTheme,
   calendarProps,
@@ -119,61 +107,59 @@ export function DateRangeInput<T>({
   );
 
   return (
-    <Popover
-      arrow={false}
-      lazy
-      disabled={disabled}
-      visible={showingCalendar}
-      zIndex={zIndex}
+    <ControlledPopover
+      hideArrow
+      renderTrigger={(props) => (
+        <Row alignItems={"center"} {...props}>
+          <TextInput
+            iconLeft={stenaCalendar}
+            onFocus={showCalendarStartDate}
+            value={
+              value?.startDate ? format(value.startDate, displayFormat) : ""
+            }
+            placeholder={placeholderStartDate}
+            width={width}
+            disabled={disabled}
+            inputRef={startDateInputRef}
+            size={9}
+            variant={startDateIsAfterEnd ? "error" : undefined}
+          />
+          <Space />
+          <Icon
+            icon={stenaArrowWideRight}
+            color={cssColor("--lhds-color-ui-500")}
+            size={14}
+          />
+          <Space />
+          <TextInput
+            iconLeft={stenaCalendar}
+            onFocus={showCalendarEndDate}
+            value={value?.endDate ? format(value.endDate, displayFormat) : ""}
+            placeholder={placeholderEndDate}
+            width={width}
+            disabled={disabled}
+            inputRef={endDateInputRef}
+            size={9}
+            variant={startDateIsAfterEnd ? "error" : undefined}
+          />
+        </Row>
+      )}
+      open={showingCalendar}
       placement={defaultPopoverPlacement}
-      appendTo={portalTarget ?? "parent"}
-      onClickOutside={hideCalendar}
-      content={
-        <CalendarWithMonthSwitcher
-          {...calendarProps}
-          dateInFocus={dateInFocus}
-          setDateInFocus={setDateInFocus}
-          statePerMonth={statePerMonth}
-          theme={calendarTheme}
-          onClickDay={onClickDay}
-          currentPanel={currentPanel}
-          setCurrentPanel={setCurrentPanel}
-          minDate={minDate}
-          maxDate={maxDate}
-        />
-      }
+      onRequestClose={hideCalendar}
     >
-      <Row alignItems={"center"}>
-        <TextInput
-          iconLeft={stenaCalendar}
-          onFocus={showCalendarStartDate}
-          value={value?.startDate ? format(value.startDate, displayFormat) : ""}
-          placeholder={placeholderStartDate}
-          width={width}
-          disabled={disabled}
-          inputRef={startDateInputRef}
-          size={9}
-          variant={startDateIsAfterEnd ? "error" : undefined}
-        />
-        <Space />
-        <Icon
-          icon={stenaArrowWideRight}
-          color={cssColor("--lhds-color-ui-500")}
-          size={14}
-        />
-        <Space />
-        <TextInput
-          iconLeft={stenaCalendar}
-          onFocus={showCalendarEndDate}
-          value={value?.endDate ? format(value.endDate, displayFormat) : ""}
-          placeholder={placeholderEndDate}
-          width={width}
-          disabled={disabled}
-          inputRef={endDateInputRef}
-          size={9}
-          variant={startDateIsAfterEnd ? "error" : undefined}
-        />
-      </Row>
-    </Popover>
+      <CalendarWithMonthSwitcher
+        {...calendarProps}
+        dateInFocus={dateInFocus}
+        setDateInFocus={setDateInFocus}
+        statePerMonth={statePerMonth}
+        theme={calendarTheme}
+        onClickDay={onClickDay}
+        currentPanel={currentPanel}
+        setCurrentPanel={setCurrentPanel}
+        minDate={minDate}
+        maxDate={maxDate}
+      />
+    </ControlledPopover>
   );
 }
diff --git a/packages/calendar/src/components/input-types/date-text-input/DateTextInput.tsx b/packages/calendar/src/components/input-types/date-text-input/DateTextInput.tsx
index fd83cce61..91373950a 100644
--- a/packages/calendar/src/components/input-types/date-text-input/DateTextInput.tsx
+++ b/packages/calendar/src/components/input-types/date-text-input/DateTextInput.tsx
@@ -1,12 +1,11 @@
 import { Box, Omit, Row } from "@stenajs-webui/core";
 import { FlatButton, stenaCalendar } from "@stenajs-webui/elements";
 import { TextInput, TextInputProps } from "@stenajs-webui/forms";
-import { Popover } from "@stenajs-webui/tooltip";
+import { ControlledPopover } from "@stenajs-webui/tooltip";
 import { format, isValid, parse } from "date-fns";
 import * as React from "react";
 import { useCallback, useState } from "react";
 import { defaultPopoverPlacement } from "../../../config/DefaultPopoverPlacement";
-import { useCalendarPopoverUpdater } from "../../../features/internal-panel-state/UseCalendarPopoverUpdater";
 import { DateFormats } from "../../../util/date/DateFormats";
 import {
   SingleDateCalendar,
@@ -39,10 +38,6 @@ export interface DateTextInputProps<T>
   hideCalenderIcon?: boolean;
   /** Placeholder for the input, @default YYYY-MM-DD */
   placeholder?: string;
-  /** Portal target, HTML element. If not set, portal is not used. */
-  portalTarget?: HTMLElement | null;
-  /**  Z-index of the calendar overlay, @default 100 */
-  zIndex?: number;
   /** The date text input theme to use. */
   calendarTheme?: CalendarTheme;
 }
@@ -54,10 +49,8 @@ export const DateTextInput: React.FC<DateTextInputProps<unknown>> = ({
   disableCalender = false,
   onValueChange,
   placeholder = "yyyy-mm-dd",
-  portalTarget,
   value,
   width = "130px",
-  zIndex = 100,
   calendarTheme = defaultCalendarTheme,
   hideCalenderIcon = false,
   minDate,
@@ -66,7 +59,6 @@ export const DateTextInput: React.FC<DateTextInputProps<unknown>> = ({
   ...props
 }) => {
   const [open, setOpen] = useState(false);
-  const { tippyRef, onChangePanel } = useCalendarPopoverUpdater();
 
   const toggleCalendar = useCallback(() => {
     setOpen(!open);
@@ -108,55 +100,51 @@ export const DateTextInput: React.FC<DateTextInputProps<unknown>> = ({
 
   return (
     <Box width={width}>
-      <Popover
-        arrow={false}
-        lazy
-        visible={open}
-        zIndex={zIndex}
-        appendTo={portalTarget ?? "parent"}
-        placement={defaultPopoverPlacement}
-        onClickOutside={hideCalendar}
-        tippyRef={tippyRef}
-        content={
-          <SingleDateCalendar
-            {...calendarProps}
-            onChange={onCalendarSelectDate}
-            onChangePanel={onChangePanel}
-            value={
-              value && dateIsValid
-                ? parse(value, dateFormat, new Date())
-                : undefined
+      <ControlledPopover
+        renderTrigger={(popoverProps) => (
+          <TextInput
+            {...props}
+            variant={invalid ? "error" : variant}
+            disableContentPaddingRight
+            contentRight={
+              !hideCalenderIcon ? (
+                <Row alignItems={"center"} indent={0.5}>
+                  <FlatButton
+                    size={"small"}
+                    disabled={props.disabled || disableCalender}
+                    leftIcon={stenaCalendar}
+                    onClick={toggleCalendar}
+                  />
+                </Row>
+              ) : undefined
             }
-            minDate={minDate}
-            maxDate={maxDate}
-            theme={calendarTheme}
+            onValueChange={onValueChangeHandler}
+            placeholder={placeholder}
+            value={value || ""}
+            min={minDate}
+            max={maxDate}
+            size={10}
+            {...popoverProps}
           />
-        }
+        )}
+        hideArrow
+        open={open}
+        placement={defaultPopoverPlacement}
+        onRequestClose={hideCalendar}
       >
-        <TextInput
-          {...props}
-          variant={invalid ? "error" : variant}
-          disableContentPaddingRight
-          contentRight={
-            !hideCalenderIcon ? (
-              <Row alignItems={"center"} indent={0.5}>
-                <FlatButton
-                  size={"small"}
-                  disabled={props.disabled || disableCalender}
-                  leftIcon={stenaCalendar}
-                  onClick={toggleCalendar}
-                />
-              </Row>
-            ) : undefined
+        <SingleDateCalendar
+          {...calendarProps}
+          onChange={onCalendarSelectDate}
+          value={
+            value && dateIsValid
+              ? parse(value, dateFormat, new Date())
+              : undefined
           }
-          onValueChange={onValueChangeHandler}
-          placeholder={placeholder}
-          value={value || ""}
-          min={minDate}
-          max={maxDate}
-          size={10}
+          minDate={minDate}
+          maxDate={maxDate}
+          theme={calendarTheme}
         />
-      </Popover>
+      </ControlledPopover>
     </Box>
   );
 };
diff --git a/packages/calendar/src/components/input-types/date-time-input/DateTimeInput.tsx b/packages/calendar/src/components/input-types/date-time-input/DateTimeInput.tsx
index bc8925a13..b13448072 100644
--- a/packages/calendar/src/components/input-types/date-time-input/DateTimeInput.tsx
+++ b/packages/calendar/src/components/input-types/date-time-input/DateTimeInput.tsx
@@ -1,10 +1,10 @@
 import { Box, Column, Row, Space, useDelayedFalse } from "@stenajs-webui/core";
-import { PrimaryButton } from "@stenajs-webui/elements";
+import { PrimaryButton, stenaClock } from "@stenajs-webui/elements";
 import {
   TextInputProps,
   ValueAndOnValueChangeProps,
 } from "@stenajs-webui/forms";
-import { Popover } from "@stenajs-webui/tooltip";
+import { ControlledPopover } from "@stenajs-webui/tooltip";
 import * as React from "react";
 import { useCallback, useMemo, useRef } from "react";
 import { defaultPopoverPlacement } from "../../../config/DefaultPopoverPlacement";
@@ -22,7 +22,6 @@ import { useInputStates } from "./hooks/UseInputStates";
 import { useUserInputHandlers } from "./hooks/UseUserInputHandlers";
 import { OptionalMinMaxDatesAsString } from "../../../types/CalendarTypes";
 import { defaultMaxDate } from "../../../config/DefaultMaxDate";
-import { stenaClock } from "@stenajs-webui/elements";
 
 export interface DateTimeInputProps
   extends ValueAndOnValueChangeProps<Date | null>,
@@ -118,74 +117,74 @@ export const DateTimeInput: React.FC<DateTimeInputProps> = ({
 
   return (
     <Box onKeyDown={onKeyDownHandler}>
-      <Popover
-        arrow={false}
-        lazy
-        disabled={disabled}
+      <ControlledPopover
+        hideArrow
+        renderTrigger={(props) => (
+          <Box {...props}>
+            <DualTextInput
+              autoFocusLeft={autoFocus}
+              onEsc={onEsc}
+              onEnter={onEnter}
+              onBlur={onBlur}
+              disabled={disabled}
+              separatorIcon={stenaClock}
+              typeLeft={"date"}
+              typeRight={"time"}
+              placeholderLeft={"yyyy-mm-dd"}
+              placeholderRight={"hh:mm"}
+              onChangeLeft={inputLeftChangeHandler}
+              onChangeRight={inputRightChangeHandler}
+              onClickArrowDown={onClickArrowButton}
+              onClickCalendar={onClickCalendarButton}
+              onFocusLeft={onFocusLeft}
+              onFocusRight={onFocusRight}
+              onClickLeft={onFocusLeft}
+              onClickRight={onFocusRight}
+              inputRefLeft={dateInputRef}
+              inputRefRight={timeInputRef}
+              valueRight={timeValue ?? ""}
+              widthLeft={widthLeft}
+              widthRight={widthRight}
+              minLeft={minDate}
+              maxLeft={maxDate}
+              variant={variant}
+            />
+          </Box>
+        )}
         placement={defaultPopoverPlacement}
-        visible={isCalendarVisible || isTimePickerVisible}
-        onClickOutside={hideAll}
-        content={
-          (delayedIsCalendarVisible || delayedIsTimePickerVisible) && (
-            <Column>
-              {delayedIsCalendarVisible ? (
-                <CalendarWithMonthSwitcher
-                  statePerMonth={statePerMonth}
-                  onClickDay={onClickDay}
-                  dateInFocus={dateInFocus}
-                  setDateInFocus={setDateInFocus}
-                  currentPanel={currentPanel}
-                  setCurrentPanel={setCurrentPanel}
-                  minDate={minDate}
-                  maxDate={maxDate}
-                />
-              ) : delayedIsTimePickerVisible ? (
-                <Column>
-                  <Column overflow={"hidden"} height={"250px"}>
-                    <TimePicker
-                      value={timeValue ?? ""}
-                      onValueChange={onChangeTime}
-                    />
-                  </Column>
-                  <Space />
-                  <Row justifyContent={"flex-end"}>
-                    <PrimaryButton label={"Done"} onClick={hideTimePicker} />
-                  </Row>
-                </Column>
-              ) : null}
-            </Column>
-          )
-        }
+        open={isCalendarVisible || isTimePickerVisible}
+        onRequestClose={hideAll}
       >
-        <DualTextInput
-          autoFocusLeft={autoFocus}
-          onEsc={onEsc}
-          onEnter={onEnter}
-          onBlur={onBlur}
-          disabled={disabled}
-          separatorIcon={stenaClock}
-          typeLeft={"date"}
-          typeRight={"time"}
-          placeholderLeft={"yyyy-mm-dd"}
-          placeholderRight={"hh:mm"}
-          onChangeLeft={inputLeftChangeHandler}
-          onChangeRight={inputRightChangeHandler}
-          onClickArrowDown={onClickArrowButton}
-          onClickCalendar={onClickCalendarButton}
-          onFocusLeft={onFocusLeft}
-          onFocusRight={onFocusRight}
-          onClickLeft={onFocusLeft}
-          onClickRight={onFocusRight}
-          inputRefLeft={dateInputRef}
-          inputRefRight={timeInputRef}
-          valueRight={timeValue ?? ""}
-          widthLeft={widthLeft}
-          widthRight={widthRight}
-          minLeft={minDate}
-          maxLeft={maxDate}
-          variant={variant}
-        />
-      </Popover>
+        {(delayedIsCalendarVisible || delayedIsTimePickerVisible) && (
+          <Column>
+            {delayedIsCalendarVisible ? (
+              <CalendarWithMonthSwitcher
+                statePerMonth={statePerMonth}
+                onClickDay={onClickDay}
+                dateInFocus={dateInFocus}
+                setDateInFocus={setDateInFocus}
+                currentPanel={currentPanel}
+                setCurrentPanel={setCurrentPanel}
+                minDate={minDate}
+                maxDate={maxDate}
+              />
+            ) : delayedIsTimePickerVisible ? (
+              <Column>
+                <Column overflow={"hidden"} height={"250px"}>
+                  <TimePicker
+                    value={timeValue ?? ""}
+                    onValueChange={onChangeTime}
+                  />
+                </Column>
+                <Space />
+                <Row justifyContent={"flex-end"}>
+                  <PrimaryButton label={"Done"} onClick={hideTimePicker} />
+                </Row>
+              </Column>
+            ) : null}
+          </Column>
+        )}
+      </ControlledPopover>
     </Box>
   );
 };
diff --git a/packages/calendar/src/config/DefaultPopoverPlacement.ts b/packages/calendar/src/config/DefaultPopoverPlacement.ts
index f19d603e4..052e62640 100644
--- a/packages/calendar/src/config/DefaultPopoverPlacement.ts
+++ b/packages/calendar/src/config/DefaultPopoverPlacement.ts
@@ -1,3 +1 @@
-import { PopoverPlacement } from "@stenajs-webui/tooltip";
-
-export const defaultPopoverPlacement: PopoverPlacement = "bottom";
+export const defaultPopoverPlacement = "bottom";
diff --git a/packages/calendar/src/features/internal-panel-state/UseCalendarPopoverUpdater.ts b/packages/calendar/src/features/internal-panel-state/UseCalendarPopoverUpdater.ts
deleted file mode 100644
index 75646f6ae..000000000
--- a/packages/calendar/src/features/internal-panel-state/UseCalendarPopoverUpdater.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useTippyInstance } from "@stenajs-webui/tooltip";
-import { useCallback } from "react";
-
-export const useCalendarPopoverUpdater = () => {
-  const [tippyRef, tippyInstanceRef] = useTippyInstance();
-
-  const onChangePanel = useCallback(() => {
-    tippyInstanceRef.current?.popperInstance?.update();
-  }, [tippyInstanceRef]);
-
-  return {
-    onChangePanel,
-    tippyRef,
-  };
-};
diff --git a/packages/grid/src/features/standard-table/components/StandardTable.tsx b/packages/grid/src/features/standard-table/components/StandardTable.tsx
index 96d6e142a..b10fbc781 100644
--- a/packages/grid/src/features/standard-table/components/StandardTable.tsx
+++ b/packages/grid/src/features/standard-table/components/StandardTable.tsx
@@ -39,7 +39,6 @@ import { ColGroups } from "./ColGroups";
 import styles from "./StandardTable.module.css";
 import { StandardTableContent } from "./StandardTableContent";
 import { StandardTableHeadRow } from "./StandardTableHeadRow";
-import { TableHeadProps } from "../../table-ui/components/table/TableHeadItem";
 
 export interface StandardTableProps<
   TItem extends object,
@@ -76,12 +75,6 @@ export interface StandardTableProps<
    */
   config: StandardTableConfig<TItem, TColumnKey, TColumnGroupKey>;
 
-  /**
-   * Append tooltip to HTML element. This prop is passed to Tippy.
-   * This is useful to solve z-index problems.
-   */
-  appendTooltipTo?: TableHeadProps["appendTooltipTo"];
-
   /**
    * Items to list in the table.
    */
@@ -182,7 +175,6 @@ export const StandardTable = function StandardTable<
   variant = "standard",
   onKeyDown,
   onSortOrderChange,
-  appendTooltipTo,
   ...props
 }: StandardTableProps<TItem, TColumnKey, TColumnGroupKey>) {
   const generatedTableId = useId();
@@ -320,7 +312,6 @@ export const StandardTable = function StandardTable<
                                   <StandardTableHeadRow
                                     items={props.items}
                                     height={"var(--current-row-height)"}
-                                    appendTooltipTo={appendTooltipTo}
                                   />
                                 </thead>
                                 <StandardTableContent
diff --git a/packages/grid/src/features/standard-table/components/StandardTableHeadItem.tsx b/packages/grid/src/features/standard-table/components/StandardTableHeadItem.tsx
index 4ad3d97d3..2831f4259 100644
--- a/packages/grid/src/features/standard-table/components/StandardTableHeadItem.tsx
+++ b/packages/grid/src/features/standard-table/components/StandardTableHeadItem.tsx
@@ -1,9 +1,6 @@
 import * as React from "react";
 import { CSSProperties } from "react";
-import {
-  TableHeadItem,
-  TableHeadProps,
-} from "../../table-ui/components/table/TableHeadItem";
+import { TableHeadItem } from "../../table-ui/components/table/TableHeadItem";
 import { useStickyPropsPerColumnContext } from "../context/StickyPropsPerColumnContext";
 import { useTableSortHeader } from "../features/sorting/UseTableSortHeader";
 import { useColumnConfigById } from "../hooks/UseColumnConfigById";
@@ -18,7 +15,6 @@ export interface StandardTableHeaderItemProps {
   borderFromGroup?: boolean | string;
   stickyHeader?: boolean;
   top?: string | number;
-  appendTooltipTo?: TableHeadProps["appendTooltipTo"];
 }
 
 export const StandardTableHeadItem = React.memo(
@@ -28,7 +24,6 @@ export const StandardTableHeadItem = React.memo(
     disableBorderLeft,
     stickyHeader,
     top,
-    appendTooltipTo,
   }: StandardTableHeaderItemProps) {
     const {
       justifyContentHeader,
@@ -108,7 +103,6 @@ export const StandardTableHeadItem = React.memo(
           sortOrderIconVariant={
             sortOrderIconVariant ?? defaultSortOrderIconVariant
           }
-          appendTooltipTo={appendTooltipTo}
           selected={selected}
           height={"100%"}
         />
diff --git a/packages/grid/src/features/standard-table/components/StandardTableHeadRow.tsx b/packages/grid/src/features/standard-table/components/StandardTableHeadRow.tsx
index a8949d9e5..1b727a54a 100644
--- a/packages/grid/src/features/standard-table/components/StandardTableHeadRow.tsx
+++ b/packages/grid/src/features/standard-table/components/StandardTableHeadRow.tsx
@@ -19,12 +19,10 @@ import { useStandardTableConfig } from "../hooks/UseStandardTableConfig";
 import { getCellBorderFromGroup } from "../util/CellBorderCalculator";
 import { StandardTableHeadItem } from "./StandardTableHeadItem";
 import { TrWithHoverBackground } from "./TrWithHoverBackground";
-import { TableHeadProps } from "../../table-ui/components/table/TableHeadItem";
 
 interface StandardTableHeaderProps<TItem> {
   items?: Array<TItem>;
   height?: string;
-  appendTooltipTo?: TableHeadProps["appendTooltipTo"];
 }
 
 const getTopPosition = (
@@ -47,11 +45,7 @@ const getTopPosition = (
 
 export const StandardTableHeadRow = React.memo(function StandardTableHeadRow<
   TItem
->({
-  items,
-  appendTooltipTo,
-  height = defaultTableRowHeight,
-}: StandardTableHeaderProps<TItem>) {
+>({ items, height = defaultTableRowHeight }: StandardTableHeaderProps<TItem>) {
   const groupConfigsAndIds = useGroupConfigsAndIdsForRows();
 
   const {
@@ -181,7 +175,6 @@ export const StandardTableHeadRow = React.memo(function StandardTableHeadRow<
                   disableBorderLeft={groupIndex === 0 && index === 0}
                   stickyHeader={stickyHeader}
                   top={stickyHeaderStyle.top}
-                  appendTooltipTo={appendTooltipTo}
                 />
               );
             })}
diff --git a/packages/grid/src/features/standard-table/features/column-groups/ColumnInGroup.tsx b/packages/grid/src/features/standard-table/features/column-groups/ColumnInGroup.tsx
index fc6a5631e..a1b626f01 100644
--- a/packages/grid/src/features/standard-table/features/column-groups/ColumnInGroup.tsx
+++ b/packages/grid/src/features/standard-table/features/column-groups/ColumnInGroup.tsx
@@ -110,11 +110,7 @@ export const ColumnInGroup = function ColumnGroupColumnItem<
             {loading ? (
               <InputSpinner />
             ) : error ? (
-              <Tooltip
-                label={error}
-                placement={"bottom"}
-                appendTo={document.body}
-              >
+              <Tooltip label={error} placement={"bottom"}>
                 <Icon
                   icon={stenaExclamationTriangle}
                   color={cssColor("--lhds-color-red-500")}
diff --git a/packages/grid/src/features/table-ui/components/CrudStatusIndicator.tsx b/packages/grid/src/features/table-ui/components/CrudStatusIndicator.tsx
index cfb4b48db..a9321375d 100644
--- a/packages/grid/src/features/table-ui/components/CrudStatusIndicator.tsx
+++ b/packages/grid/src/features/table-ui/components/CrudStatusIndicator.tsx
@@ -39,13 +39,7 @@ export const CrudStatusIndicator: React.FC<Props> = ({ crudStatus }) => {
     );
     return (
       <>
-        {errorMessage ? (
-          <Tooltip label={errorMessage} zIndex={100}>
-            {icon}
-          </Tooltip>
-        ) : (
-          icon
-        )}
+        {errorMessage ? <Tooltip label={errorMessage}>{icon}</Tooltip> : icon}
       </>
     );
   }
diff --git a/packages/grid/src/features/table-ui/components/ModifiedField.tsx b/packages/grid/src/features/table-ui/components/ModifiedField.tsx
index f8412f54d..7a5869128 100644
--- a/packages/grid/src/features/table-ui/components/ModifiedField.tsx
+++ b/packages/grid/src/features/table-ui/components/ModifiedField.tsx
@@ -55,7 +55,7 @@ export const ModifiedField: React.FC<Props> = ({
       )}
       {hasRightIcon && <Space />}
       {showEmptyFieldWarning ? (
-        <Tooltip label={warningOnEmpty!} zIndex={100}>
+        <Tooltip label={warningOnEmpty!}>
           <Icon
             icon={stenaExclamationTriangle}
             color={cssColor("--lhds-color-orange-600")}
diff --git a/packages/grid/src/features/table-ui/components/cells/EditableTextCellWithCrudAndModified.tsx b/packages/grid/src/features/table-ui/components/cells/EditableTextCellWithCrudAndModified.tsx
index c98e0929a..05ba772b5 100644
--- a/packages/grid/src/features/table-ui/components/cells/EditableTextCellWithCrudAndModified.tsx
+++ b/packages/grid/src/features/table-ui/components/cells/EditableTextCellWithCrudAndModified.tsx
@@ -194,7 +194,7 @@ export const EditableTextCellWithCrudAndModified =
                 {warningOnEmpty &&
                 modifiedField?.modified &&
                 modifiedField?.newValue === "" ? (
-                  <Tooltip label={warningOnEmpty} zIndex={100}>
+                  <Tooltip label={warningOnEmpty}>
                     <Icon
                       icon={stenaExclamationTriangle}
                       color={"var(--ui-alert1)"}
diff --git a/packages/grid/src/features/table-ui/components/table/TableHeadItem.tsx b/packages/grid/src/features/table-ui/components/table/TableHeadItem.tsx
index cf7828ecf..8ba42ea91 100644
--- a/packages/grid/src/features/table-ui/components/table/TableHeadItem.tsx
+++ b/packages/grid/src/features/table-ui/components/table/TableHeadItem.tsx
@@ -7,14 +7,9 @@ import {
   stenaInfoCircle,
 } from "@stenajs-webui/elements";
 import { cssColor } from "@stenajs-webui/theme";
-import {
-  ButtonWithPopoverProps,
-  Popover,
-  Tooltip,
-  TooltipProps,
-} from "@stenajs-webui/tooltip";
+import { Popover, Tooltip } from "@stenajs-webui/tooltip";
 import * as React from "react";
-import { CSSProperties, useRef } from "react";
+import { CSSProperties, ReactNode, useRef } from "react";
 import {
   SortOrderDirection,
   SortOrderIcon,
@@ -24,14 +19,13 @@ import {
 export interface TableHeadProps extends BoxProps {
   label?: string;
   infoIconTooltipText?: string;
-  popoverContent?: ButtonWithPopoverProps["children"];
+  popoverContent?: ReactNode;
   loading?: boolean;
   arrow?: SortOrderDirection;
   onClick?: () => void;
   selected?: boolean;
   alignRight?: boolean;
   sortOrderIconVariant?: SortOrderIconVariant;
-  appendTooltipTo?: TooltipProps["appendTo"];
 }
 
 export const TableHeadItem: React.FC<TableHeadProps> = React.memo(
@@ -47,7 +41,6 @@ export const TableHeadItem: React.FC<TableHeadProps> = React.memo(
     overflow = "hidden",
     alignRight,
     sortOrderIconVariant,
-    appendTooltipTo,
     ...boxProps
   }) => {
     const containerRef = useRef(null);
@@ -120,13 +113,7 @@ export const TableHeadItem: React.FC<TableHeadProps> = React.memo(
             <>
               <Space />
               <Row onClick={(ev) => ev.stopPropagation()}>
-                <Tooltip
-                  label={infoIconTooltipText}
-                  zIndex={
-                    "var(--swui-sticky-popover-z-index)" as unknown as number
-                  }
-                  appendTo={appendTooltipTo}
-                >
+                <Tooltip label={infoIconTooltipText}>
                   <Icon
                     icon={stenaInfoCircle}
                     size={14}
@@ -144,12 +131,17 @@ export const TableHeadItem: React.FC<TableHeadProps> = React.memo(
             <InputSpinner />
           ) : popoverContent ? (
             <Popover
-              content={popoverContent}
+              renderTrigger={(props) => (
+                <FlatButton
+                  leftIcon={stenaDotsVertical}
+                  size={"small"}
+                  {...props}
+                />
+              )}
               trigger={"click"}
-              zIndex={1000}
               disablePadding
             >
-              <FlatButton leftIcon={stenaDotsVertical} size={"small"} />
+              {popoverContent}
             </Popover>
           ) : null}
         </Row>
diff --git a/packages/panels/src/components/action-menu-button/ActionMenuButton.tsx b/packages/panels/src/components/action-menu-button/ActionMenuButton.tsx
index 3759a32f1..0cc0140e2 100644
--- a/packages/panels/src/components/action-menu-button/ActionMenuButton.tsx
+++ b/packages/panels/src/components/action-menu-button/ActionMenuButton.tsx
@@ -11,8 +11,7 @@ import {
   stenaAngleDown,
 } from "@stenajs-webui/elements";
 import { useBoolean } from "@stenajs-webui/core";
-import { Popover, PopoverProps } from "@stenajs-webui/tooltip";
-import { Plugin as TippyPlugin, Props as TippyProps } from "tippy.js";
+import { ControlledPopover, PopoverProps } from "@stenajs-webui/tooltip";
 
 export interface ActionMenuButtonProps
   extends Omit<
@@ -23,10 +22,6 @@ export interface ActionMenuButtonProps
   renderItems: (close: () => void) => ReactNode;
   /** The placement of the Action Menu. */
   placement?: PopoverProps["placement"];
-  /**  Z-index of the Action Menu */
-  zIndex?: number;
-  /** Portal target, HTML element. If not set, portal is not used. */
-  portalTarget?: PopoverProps["appendTo"];
   menuWidth?: ActionMenuProps["width"];
   menuTop?: ActionMenuProps["top"];
   buttonComponent:
@@ -42,8 +37,6 @@ export const ActionMenuButton: React.FC<ActionMenuButtonProps> = ({
   placement = "bottom",
   buttonComponent: Button,
   rightIcon = stenaAngleDown,
-  portalTarget = "parent",
-  zIndex,
   menuWidth,
   menuTop,
   onClick,
@@ -56,44 +49,6 @@ export const ActionMenuButton: React.FC<ActionMenuButtonProps> = ({
   const fallbackRef = useRef<HTMLButtonElement>(null);
   const ref = buttonRef ?? fallbackRef;
 
-  const focusManager: TippyPlugin<TippyProps> = {
-    name: "focusManager",
-    defaultValue: true,
-    fn({ popper }) {
-      let restoreFocus = false;
-
-      const closeOnEscape = (event: KeyboardEvent) => {
-        if (event.key === "Escape") {
-          restoreFocus = true;
-          close();
-        }
-        if (event.key === "Enter" || event.key === " ") {
-          restoreFocus = true;
-        }
-      };
-
-      return {
-        onCreate() {
-          popper.addEventListener("keydown", closeOnEscape);
-        },
-        onDestroy() {
-          popper.removeEventListener("keydown", closeOnEscape);
-        },
-        onMount() {
-          restoreFocus = false;
-          popper
-            .querySelector<HTMLElement>("button:not([disabled]), a[href]")
-            ?.focus();
-        },
-        onHide() {
-          if (ref.current && restoreFocus) {
-            ref.current.focus();
-          }
-        },
-      };
-    },
-  };
-
   const contextValue = useMemo(() => ({ open, close }), [open, close]);
 
   const handleClick = (
@@ -105,33 +60,30 @@ export const ActionMenuButton: React.FC<ActionMenuButtonProps> = ({
 
   return (
     <>
-      <Button
-        rightIcon={disableArrow ? undefined : rightIcon}
-        {...buttonProps}
-        ref={ref}
-        onClick={handleClick}
-      />
-      <Popover
+      <ControlledPopover
+        renderTrigger={(props) => (
+          <Button
+            rightIcon={disableArrow ? undefined : rightIcon}
+            {...buttonProps}
+            ref={ref}
+            onClick={handleClick}
+            {...props}
+          />
+        )}
+        hideArrow
         disablePadding
-        visible={isOpen}
-        onClickOutside={close}
+        open={isOpen}
+        onRequestClose={close}
         placement={placement}
-        content={
-          isOpen && (
-            <ActionMenu width={menuWidth} top={menuTop} trapFocus>
-              <ActionMenuContext.Provider value={contextValue}>
-                {renderItems(close)}
-              </ActionMenuContext.Provider>
-            </ActionMenu>
-          )
-        }
-        arrow={false}
-        appendTo={portalTarget}
-        zIndex={zIndex}
-        plugins={[focusManager]}
-        lazy
-        reference={ref}
-      />
+      >
+        {isOpen && (
+          <ActionMenu width={menuWidth} top={menuTop} trapFocus>
+            <ActionMenuContext.Provider value={contextValue}>
+              {renderItems(close)}
+            </ActionMenuContext.Provider>
+          </ActionMenu>
+        )}
+      </ControlledPopover>
     </>
   );
 };
diff --git a/packages/panels/src/components/checkbox-menu/CheckboxMenu.tsx b/packages/panels/src/components/checkbox-menu/CheckboxMenu.tsx
index b1dc56054..8c56dafb6 100644
--- a/packages/panels/src/components/checkbox-menu/CheckboxMenu.tsx
+++ b/packages/panels/src/components/checkbox-menu/CheckboxMenu.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { ReactNode } from "react";
-import { Box, Column, Indent, Row, useBoolean } from "@stenajs-webui/core";
+import { Column, Indent, Row } from "@stenajs-webui/core";
 import {
   ActionMenu,
   FlatButton,
@@ -19,35 +19,33 @@ export const CheckboxMenu: React.FC<CheckboxMenuProps> = ({
   renderMenu,
   ...checkboxProps
 }) => {
-  const [isOpen, open, close] = useBoolean(false);
   return (
     <Popover
-      onClickOutside={close}
-      arrow={false}
-      visible={isOpen}
+      trigger={"click"}
+      renderTrigger={(props) => (
+        <Row>
+          <Row
+            spacing={0.5}
+            indent
+            alignItems={"center"}
+            border={border}
+            borderRadius={"4px"}
+          >
+            <Checkbox {...checkboxProps} />
+            <Indent num={0.5} />
+            <FlatButton size={"small"} leftIcon={stenaAngleDown} {...props} />
+          </Row>
+        </Row>
+      )}
+      hideArrow
       disablePadding
-      content={
-        renderMenu ? (
-          <Column>
-            <ActionMenu>{renderMenu(close)}</ActionMenu>
-          </Column>
-        ) : undefined
-      }
       placement={"bottom-start"}
     >
-      <Box display={"inline-block"}>
-        <Row
-          spacing={0.5}
-          indent
-          alignItems={"center"}
-          border={border}
-          borderRadius={"4px"}
-        >
-          <Checkbox {...checkboxProps} />
-          <Indent num={0.5} />
-          <FlatButton size={"small"} onClick={open} leftIcon={stenaAngleDown} />
-        </Row>
-      </Box>
+      {({ onRequestClose }) => (
+        <Column>
+          <ActionMenu>{renderMenu(onRequestClose)}</ActionMenu>
+        </Column>
+      )}
     </Popover>
   );
 };
diff --git a/packages/panels/src/components/nav-bar/NavBarPopoverButton.tsx b/packages/panels/src/components/nav-bar/NavBarPopoverButton.tsx
index d127e1992..a911b7efa 100644
--- a/packages/panels/src/components/nav-bar/NavBarPopoverButton.tsx
+++ b/packages/panels/src/components/nav-bar/NavBarPopoverButton.tsx
@@ -1,8 +1,8 @@
-import { useBoolean } from "@stenajs-webui/core";
 import * as React from "react";
 import { ReactNode } from "react";
 import { NavBarButton, NavBarButtonProps } from "./NavBarButton";
 import { Popover } from "@stenajs-webui/tooltip";
+import { Box, Row } from "@stenajs-webui/core";
 
 type RenderProp = (args: RenderPropArgs) => ReactNode;
 
@@ -20,21 +20,21 @@ export const NavBarPopoverButton: React.FC<NavBarPopoverButtonProps> = ({
   children,
   ...navBarButtonProps
 }) => {
-  const [isOpen, , close, toggle] = useBoolean(false);
-
   return (
     <Popover
-      onClickOutside={close}
-      triggerTarget={document.body}
-      visible={isOpen}
-      content={
-        <>
-          {content && content({ close })}
-          {children}
-        </>
-      }
+      renderTrigger={(props) => (
+        <Row {...props}>
+          <NavBarButton {...navBarButtonProps} />
+        </Row>
+      )}
+      trigger={"click"}
     >
-      <NavBarButton {...navBarButtonProps} onClick={toggle} />
+      {({ onRequestClose }) => (
+        <Box>
+          {content && content({ close: onRequestClose })}
+          {children}
+        </Box>
+      )}
     </Popover>
   );
 };
diff --git a/packages/panels/src/components/sidebar-menu/items/RailMenuButton.tsx b/packages/panels/src/components/sidebar-menu/items/RailMenuButton.tsx
index 88c5b221a..e8d9e1e97 100644
--- a/packages/panels/src/components/sidebar-menu/items/RailMenuButton.tsx
+++ b/packages/panels/src/components/sidebar-menu/items/RailMenuButton.tsx
@@ -8,8 +8,13 @@ export const RailMenuButton: React.FC<RailMenuButtonProps> = ({
   label,
   ...menuButtonLinkProps
 }) => {
+  const label2 =
+    '    <Tooltip label={label2} placement={"right"} visible>\n' +
+    "      <IconMenuButton {...menuButtonLinkProps} />\n" +
+    "    </Tooltip>\n";
+
   return (
-    <Tooltip label={label} placement={"right"} appendTo={document.body}>
+    <Tooltip label={label + label2} placement={"right"} visible>
       <IconMenuButton {...menuButtonLinkProps} />
     </Tooltip>
   );
diff --git a/packages/panels/src/components/sidebar-menu/items/RailMenuCollapsible.tsx b/packages/panels/src/components/sidebar-menu/items/RailMenuCollapsible.tsx
index d15dcb3ba..3f8b8cc84 100644
--- a/packages/panels/src/components/sidebar-menu/items/RailMenuCollapsible.tsx
+++ b/packages/panels/src/components/sidebar-menu/items/RailMenuCollapsible.tsx
@@ -23,29 +23,23 @@ export const RailMenuCollapsible: React.FC<RailMenuCollapsibleProps> = ({
 }) => {
   return (
     <Popover
-      appendTo={"parent"}
-      arrow={false}
-      offset={[0, 0]}
+      renderTrigger={(props) => <IconMenuButton icon={icon} {...props} />}
       placement={"right-start"}
-      trigger={"focusin mouseenter click"}
+      trigger={["hover", "focus"]}
       disablePadding
-      lazy
-      content={
-        <Box
-          minWidth={popupMinWidth}
-          shadow={"popover"}
-          spacing={1}
-          indent={1}
-          gap={2}
-        >
-          <RailContext.Provider value={false}>
-            <SidebarMenuHeading label={label} />
-            {children}
-          </RailContext.Provider>
-        </Box>
-      }
     >
-      <IconMenuButton icon={icon} />
+      <Box
+        minWidth={popupMinWidth}
+        shadow={"popover"}
+        spacing={1}
+        indent={1}
+        gap={2}
+      >
+        <RailContext.Provider value={false}>
+          <SidebarMenuHeading label={label} />
+          {children}
+        </RailContext.Provider>
+      </Box>
     </Popover>
   );
 };
diff --git a/packages/panels/src/components/sidebar-menu/items/RailMenuLink.tsx b/packages/panels/src/components/sidebar-menu/items/RailMenuLink.tsx
index 5ace94622..0ccfbddfb 100644
--- a/packages/panels/src/components/sidebar-menu/items/RailMenuLink.tsx
+++ b/packages/panels/src/components/sidebar-menu/items/RailMenuLink.tsx
@@ -24,7 +24,7 @@ export const RailMenuLink: React.FC<RailMenuLinkProps> = ({
   }
 
   return (
-    <Tooltip label={label} placement={"right"} appendTo={document.body}>
+    <Tooltip label={label} placement={"right"}>
       <IconMenuButtonLink icon={leftIcon} {...menuButtonLinkProps} />
     </Tooltip>
   );
diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json
index 2e36bccc7..38a5b31c4 100644
--- a/packages/tooltip/package.json
+++ b/packages/tooltip/package.json
@@ -33,12 +33,11 @@
     "deploy": "gh-pages -d example/build"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.26.22",
     "@stenajs-webui/core": "20.17.4",
     "@stenajs-webui/elements": "20.17.4",
     "@stenajs-webui/theme": "20.17.4",
-    "@tippyjs/react": "^4.1.0",
-    "classnames": "^2.3.1",
-    "tippy.js": "^6.2.6"
+    "classnames": "^2.3.1"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11.4",
diff --git a/packages/tooltip/src/components/button-with-popover/ButtonWithPopover.tsx b/packages/tooltip/src/components/button-with-popover/ButtonWithPopover.tsx
deleted file mode 100644
index e3b575b5b..000000000
--- a/packages/tooltip/src/components/button-with-popover/ButtonWithPopover.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { FlatButton, FlatButtonProps } from "@stenajs-webui/elements";
-import * as React from "react";
-import { Popover, PopoverProps } from "../popover/Popover";
-
-export interface ButtonWithPopoverProps extends FlatButtonProps {
-  children?: PopoverProps["children"];
-  visible?: boolean;
-  onShow?: () => void;
-  onHide?: () => void;
-}
-
-export const ButtonWithPopover: React.FC<ButtonWithPopoverProps> = ({
-  children,
-  onShow,
-  onHide,
-  ...buttonProps
-}) => {
-  return (
-    <Popover
-      content={children}
-      trigger={"click"}
-      zIndex={1000}
-      onShow={onShow}
-      onHide={onHide}
-    >
-      <FlatButton {...buttonProps} />
-    </Popover>
-  );
-};
diff --git a/packages/tooltip/src/components/popover/ControlledPopover.tsx b/packages/tooltip/src/components/popover/ControlledPopover.tsx
new file mode 100644
index 000000000..1b26dfa79
--- /dev/null
+++ b/packages/tooltip/src/components/popover/ControlledPopover.tsx
@@ -0,0 +1,127 @@
+import * as React from "react";
+import { PropsWithChildren, ReactNode, useCallback, useRef } from "react";
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  FloatingArrow,
+  FloatingFocusManager,
+  FloatingPortal,
+  offset,
+  shift,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+  useTransitionStyles,
+} from "@floating-ui/react";
+import cx from "classnames";
+import moduleStyles from "./Popover.module.css";
+import { Placement } from "../../types/Placement";
+
+export interface ControlledPopoverProps extends PropsWithChildren {
+  open: boolean;
+  renderTrigger: (props: Record<string, unknown>) => ReactNode;
+  onRequestClose: () => void;
+  placement?: Placement;
+  hideArrow?: boolean;
+  disablePadding?: boolean;
+  restoreFocus?: boolean;
+  returnFocus?: boolean;
+}
+
+const ARROW_WIDTH = 12;
+const ARROW_HEIGHT = 8;
+const GAP = 2;
+
+export const ControlledPopover: React.FC<ControlledPopoverProps> = ({
+  children,
+  placement = "bottom",
+  hideArrow,
+  renderTrigger,
+  disablePadding,
+  open,
+  onRequestClose,
+  restoreFocus,
+  returnFocus,
+}) => {
+  const arrowRef = useRef(null);
+
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        onRequestClose();
+      }
+    },
+    [onRequestClose]
+  );
+
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange,
+    placement,
+    middleware: [
+      offset(ARROW_HEIGHT + GAP),
+      flip({ padding: 5 }),
+      shift({ padding: 5 }),
+      arrow({ element: arrowRef }),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+    initial: {
+      opacity: 0,
+    },
+  });
+
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    dismiss,
+    role,
+  ]);
+
+  return (
+    <>
+      {renderTrigger({ ref: refs.setReference, ...getReferenceProps() })}
+
+      {isMounted && (
+        <FloatingPortal>
+          <FloatingFocusManager
+            context={context}
+            modal={false}
+            restoreFocus={restoreFocus}
+            returnFocus={returnFocus}
+          >
+            <div
+              ref={refs.setFloating}
+              style={floatingStyles}
+              {...getFloatingProps}
+            >
+              <div
+                style={transitionStyles}
+                className={cx(
+                  moduleStyles.floating,
+                  disablePadding && moduleStyles.disablePadding
+                )}
+              >
+                {children}
+                {!hideArrow && (
+                  <FloatingArrow
+                    ref={arrowRef}
+                    context={context}
+                    width={ARROW_WIDTH}
+                    height={ARROW_HEIGHT}
+                    fill={"white"}
+                  />
+                )}
+              </div>
+            </div>
+          </FloatingFocusManager>
+        </FloatingPortal>
+      )}
+    </>
+  );
+};
diff --git a/packages/tooltip/src/components/popover/Popover.module.css b/packages/tooltip/src/components/popover/Popover.module.css
index 98627a216..02a1f3909 100644
--- a/packages/tooltip/src/components/popover/Popover.module.css
+++ b/packages/tooltip/src/components/popover/Popover.module.css
@@ -1,283 +1,53 @@
-.noPadding :global(.tippy-content) {
-  padding: 0;
-}
-
-:global(.tippy-box) {
-  position: relative;
-  background-color: #333;
-  color: #fff;
-  border-radius: 8px;
-  font-size: 14px;
-  line-height: 1.5;
-  outline: 0;
-  transition-property: transform, visibility, opacity;
-}
-
-:global(.tippy-box[data-theme~="light"]) {
+.floating {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: white;
+  color: white;
+  border-radius: var(--swui-border-radius);
+  padding: var(--swui-metrics-spacing) calc(var(--swui-metrics-indent) * 2);
   box-shadow: var(--swui-shadow-popover);
-  color: #26323d;
-  background-color: #fff;
-}
-
-:global(.tippy-box[data-theme~="outlined"]) {
-  border: 1px solid var(--lhds-color-blue-500);
-}
-
-:global(.tippy-box[data-theme~="info"]) {
-  background-color: var(--lhds-color-blue-50);
-  color: var(--swui-text-primary-color);
-
-  :global(.tippy-arrow) {
-    color: var(--lhds-color-blue-50);
-  }
-}
-
-:global(.tippy-box[data-theme~="warning"]) {
-  background-color: var(--lhds-color-orange-50);
-  color: var(--swui-text-primary-color);
 
-  :global(.tippy-arrow) {
-    color: var(--lhds-color-orange-50);
+  &.disablePadding {
+    padding: 0;
   }
 }
 
-:global(.tippy-box[data-theme~="error"]) {
-  background-color: var(--lhds-color-red-50);
-  color: var(--swui-text-primary-color);
-
-  :global(.tippy-arrow) {
-    color: var(--lhds-color-red-50);
-  }
-}
-
-:global(.tippy-box[data-theme~="info"][data-placement^="top"])
-  > :global(.tippy-arrow::before) {
-  border-top-color: var(--lhds-color-blue-50);
-}
-
-:global(.tippy-box[data-theme~="info"][data-placement^="bottom"])
-  > :global(.tippy-arrow::before) {
-  border-bottom-color: var(--lhds-color-blue-50);
-}
-
-:global(.tippy-box[data-theme~="info"][data-placement^="left"])
-  > :global(.tippy-arrow::before) {
-  border-left-color: var(--lhds-color-blue-50);
-}
-
-:global(.tippy-box[data-theme~="info"][data-placement^="right"])
-  > :global(.tippy-arrow::before) {
-  border-right-color: var(--lhds-color-blue-50);
-}
-
-:global(.tippy-box[data-theme~="warning"][data-placement^="top"])
-  > :global(.tippy-arrow::before) {
-  border-top-color: var(--lhds-color-orange-50);
-}
-
-:global(.tippy-box[data-theme~="warning"][data-placement^="bottom"])
-  > :global(.tippy-arrow::before) {
-  border-bottom-color: var(--lhds-color-orange-50);
-}
-
-:global(.tippy-box[data-theme~="warning"][data-placement^="left"])
-  > :global(.tippy-arrow::before) {
-  border-left-color: var(--lhds-color-orange-50);
-}
-
-:global(.tippy-box[data-theme~="warning"][data-placement^="right"])
-  > :global(.tippy-arrow::before) {
-  border-right-color: var(--lhds-color-orange-50);
-}
-
-:global(.tippy-box[data-theme~="error"][data-placement^="top"])
-  > :global(.tippy-arrow::before) {
-  border-top-color: var(--lhds-color-red-50);
-}
-
-:global(.tippy-box[data-theme~="error"][data-placement^="bottom"])
-  > :global(.tippy-arrow::before) {
-  border-bottom-color: var(--lhds-color-red-50);
-}
-
-:global(.tippy-box[data-theme~="error"][data-placement^="left"])
-  > :global(.tippy-arrow::before) {
-  border-left-color: var(--lhds-color-red-50);
-}
-
-:global(.tippy-box[data-theme~="error"][data-placement^="right"])
-  > :global(.tippy-arrow::before) {
-  border-right-color: var(--lhds-color-red-50);
-}
-
-/**
- * This file contains Tippy's internal CSS styles.
- * It has been copied from tippy.js. This is a CSS module since CSS modules are compiled and
- * bundled with the tooltip package.
- */
-:global {
-  /**
-   * tippy.js/dist/tippy.css
-   */
-  .tippy-box[data-animation="fade"][data-state="hidden"] {
-    opacity: 0;
-  }
-
-  [data-tippy-root] {
-    max-width: calc(100vw - 10px);
-  }
-
-  .tippy-box {
-    position: relative;
-    background-color: #333;
-    color: #fff;
-    border-radius: 8px;
-    font-size: 14px;
-    line-height: 1.5;
-    outline: 0;
-    transition-property: transform, visibility, opacity;
-  }
+.iconWrapper {
+  /* State vars */
+  --current-bg-color: transparent;
+  --current-border-color: var(--lhds-color-ui-50);
+  --current-icon-color: var(--lhds-color-ui-50);
 
-  .tippy-box[data-placement^="top"] > .tippy-arrow {
-    bottom: 0;
-  }
-
-  .tippy-box[data-placement^="top"] > .tippy-arrow:before {
-    bottom: -7px;
-    left: 0;
-    border-width: 8px 8px 0;
-    border-top-color: initial;
-    transform-origin: center top;
-  }
-
-  .tippy-box[data-placement^="bottom"] > .tippy-arrow {
-    top: 0;
-  }
-
-  .tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
-    top: -7px;
-    left: 0;
-    border-width: 0 8px 8px;
-    border-bottom-color: initial;
-    transform-origin: center bottom;
-  }
-
-  .tippy-box[data-placement^="left"] > .tippy-arrow {
-    right: 0;
-  }
-
-  .tippy-box[data-placement^="left"] > .tippy-arrow:before {
-    border-width: 8px 0 8px 8px;
-    border-left-color: initial;
-    right: -7px;
-    transform-origin: center left;
-  }
-
-  .tippy-box[data-placement^="right"] > .tippy-arrow {
-    left: 0;
-  }
-
-  .tippy-box[data-placement^="right"] > .tippy-arrow:before {
-    left: -7px;
-    border-width: 8px 8px 8px 0;
-    border-right-color: initial;
-    transform-origin: center right;
-  }
-
-  .tippy-box[data-inertia][data-state="visible"] {
-    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
-  }
-
-  .tippy-arrow {
-    width: 16px;
-    height: 16px;
-    color: #333;
-  }
-
-  .tippy-arrow:before {
-    content: "";
-    position: absolute;
-    border-color: transparent;
-    border-style: solid;
-  }
-
-  .tippy-content {
-    position: relative;
-    padding: 5px 9px;
-    z-index: 1;
-  }
-
-  /**
-   * tippy.js/theme/light.css
-   */
-
-  .tippy-box[data-theme~="light"] {
-    color: #26323d;
-    box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),
-      0 4px 80px -8px rgba(36, 40, 47, 0.25),
-      0 4px 4px -2px rgba(91, 94, 105, 0.15);
-    background-color: #fff;
-  }
-
-  .tippy-box[data-theme~="light"][data-placement^="top"] > .tippy-arrow:before {
-    border-top-color: #fff;
-  }
-
-  .tippy-box[data-theme~="light"][data-placement^="bottom"]
-    > .tippy-arrow:before {
-    border-bottom-color: #fff;
-  }
-
-  .tippy-box[data-theme~="light"][data-placement^="left"]
-    > .tippy-arrow:before {
-    border-left-color: #fff;
-  }
-
-  .tippy-box[data-theme~="light"][data-placement^="right"]
-    > .tippy-arrow:before {
-    border-right-color: #fff;
-  }
-
-  .tippy-box[data-theme~="light"] > .tippy-backdrop {
-    background-color: #fff;
-  }
-
-  .tippy-box[data-theme~="light"] > .tippy-svg-arrow {
-    fill: #fff;
-  }
-
-  /*Dark mode!*/
-  .tippy-box[data-theme~="dark"] {
-    color: var(--lhds-color-ui-50);
-    box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),
-      0 4px 80px -8px rgba(36, 40, 47, 0.25),
-      0 4px 4px -2px rgba(91, 94, 105, 0.15);
-    background-color: var(--lhds-color-ui-800);
-  }
-
-  .tippy-box[data-theme~="dark"][data-placement^="top"] > .tippy-arrow:before {
-    border-top-color: var(--lhds-color-ui-800);
-  }
-
-  .tippy-box[data-theme~="dark"][data-placement^="bottom"]
-    > .tippy-arrow:before {
-    border-bottom-color: var(--lhds-color-ui-800);
-  }
+  /* Styling */
+  display: inline-flex;
+  flex-direction: row;
+  white-space: nowrap;
+  background-color: var(--current-bg-color);
+  border: 1px solid var(--current-border-color);
+  border-radius: var(--swui-border-radius);
+  padding: calc(var(--swui-metrics-spacing) * 0.5);
+  align-items: flex-start;
 
-  .tippy-box[data-theme~="dark"][data-placement^="left"] > .tippy-arrow:before {
-    border-left-color: var(--lhds-color-ui-800);
+  svg {
+    color: var(--current-icon-color);
   }
 
-  .tippy-box[data-theme~="dark"][data-placement^="right"]
-    > .tippy-arrow:before {
-    border-right-color: var(--lhds-color-ui-800);
+  &.info {
+    --current-border-color: var(--lhds-color-blue-300);
+    --current-bg-color: var(--lhds-color-blue-100);
+    --current-icon-color: var(--lhds-color-blue-700);
   }
 
-  .tippy-box[data-theme~="dark"] > .tippy-backdrop {
-    background-color: var(--lhds-color-ui-800);
+  &.warning {
+    --current-border-color: var(--lhds-color-orange-300);
+    --current-bg-color: var(--lhds-color-orange-100);
+    --current-icon-color: var(--lhds-color-orange-700);
   }
 
-  .tippy-box[data-theme~="dark"] > .tippy-svg-arrow {
-    fill: var(--lhds-color-ui-800);
+  &.error {
+    --current-border-color: var(--lhds-color-red-300);
+    --current-bg-color: var(--lhds-color-red-100);
+    --current-icon-color: var(--lhds-color-red-700);
   }
 }
diff --git a/packages/tooltip/src/components/popover/Popover.stories.tsx b/packages/tooltip/src/components/popover/Popover.stories.tsx
index 177e4ee40..25c302323 100644
--- a/packages/tooltip/src/components/popover/Popover.stories.tsx
+++ b/packages/tooltip/src/components/popover/Popover.stories.tsx
@@ -9,8 +9,8 @@ import {
 } from "@stenajs-webui/core";
 import { FlatButton, Icon, stenaTrash } from "@stenajs-webui/elements";
 import * as React from "react";
-import { Popover } from "./Popover";
 import { ActionPrompt } from "./ActionPrompt";
+import { Popover } from "./Popover";
 
 export default {
   title: "tooltip/Popover",
@@ -20,24 +20,45 @@ export default {
 
 export const Standard = () => (
   <Box indent={10} spacing={10} display={"inline-block"}>
-    <Popover content={<ActionPrompt />}>
-      <FlatButton leftIcon={stenaTrash} />
+    <Popover
+      renderTrigger={(props) => <FlatButton leftIcon={stenaTrash} {...props} />}
+    >
+      <ActionPrompt />
+    </Popover>
+  </Box>
+);
+
+export const CloseAfterEvent = () => (
+  <Box indent={10} spacing={10} display={"inline-block"}>
+    <Popover
+      renderTrigger={(props) => <FlatButton leftIcon={stenaTrash} {...props} />}
+    >
+      {({ onRequestClose }) => (
+        <ActionPrompt onNo={onRequestClose} onYes={onRequestClose} />
+      )}
     </Popover>
   </Box>
 );
 
 export const OnClick = () => (
   <Box indent={10} spacing={10} display={"inline-block"}>
-    <Popover content={<ActionPrompt />} trigger={"click"}>
-      <FlatButton leftIcon={stenaTrash} />
+    <Popover
+      trigger={"click"}
+      renderTrigger={(props) => <FlatButton leftIcon={stenaTrash} {...props} />}
+    >
+      <ActionPrompt />
     </Popover>
   </Box>
 );
 
 export const NoArrow = () => (
   <Box indent={10} spacing={10} display={"inline-block"}>
-    <Popover content={<ActionPrompt />} trigger={"click"} arrow={false}>
-      <FlatButton leftIcon={stenaTrash} />
+    <Popover
+      trigger={"click"}
+      renderTrigger={(props) => <FlatButton leftIcon={stenaTrash} {...props} />}
+      hideArrow
+    >
+      <ActionPrompt />
     </Popover>
   </Box>
 );
@@ -46,82 +67,59 @@ export const NoPadding = () => (
   <Box indent={10} spacing={10} display={"inline-block"}>
     <Popover
       disablePadding
-      content={
-        <Column>
-          <Indent spacing>
-            <Text>The line has</Text>
-          </Indent>
-          <SeparatorLine />
-          <Indent spacing>
-            <Text>no padding</Text>
-          </Indent>
-        </Column>
-      }
       trigger={"click"}
+      renderTrigger={(props) => <FlatButton leftIcon={stenaTrash} {...props} />}
     >
-      <FlatButton leftIcon={stenaTrash} />
+      <Column>
+        <Indent spacing>
+          <Text>The line has</Text>
+        </Indent>
+        <SeparatorLine />
+        <Indent spacing>
+          <Text>no padding</Text>
+        </Indent>
+      </Column>
     </Popover>
   </Box>
 );
 
 export const Variants = () => (
   <Box indent={10} spacing={10} display={"inline-block"}>
-    <Popover content={<ActionPrompt />} trigger={"click"}>
-      <FlatButton label={"standard"} />
+    <Popover
+      renderTrigger={(props) => <FlatButton label={"standard"} {...props} />}
+    >
+      <ActionPrompt />
     </Popover>
 
     <Spacing />
 
-    <Popover content={<ActionPrompt />} trigger={"click"} variant={"info"}>
-      <FlatButton label={"info"} />
+    <Popover
+      renderTrigger={(props) => <FlatButton label={"info"} {...props} />}
+      variant={"info"}
+    >
+      <ActionPrompt />
     </Popover>
 
     <Spacing />
 
     <Popover
-      content={<Text>Some warning.</Text>}
       variant={"warning"}
-      trigger={"click"}
+      renderTrigger={(props) => <FlatButton label={"warning"} {...props} />}
     >
-      <FlatButton label={"warning"} />
+      <Text>Some warning.</Text>
     </Popover>
 
     <Spacing />
 
     <Popover
-      content={
-        <Row>
-          <Icon icon={stenaTrash} />
-          <Indent />
-          <Text>Something went wrong.</Text>
-        </Row>
-      }
-      trigger={"click"}
       variant={"error"}
+      renderTrigger={(props) => <FlatButton label={"error"} {...props} />}
     >
-      <FlatButton label={"error"} />
-    </Popover>
-  </Box>
-);
-
-export const ControlOpen = () => (
-  <Box indent={10} spacing={10} display={"inline-block"}>
-    <Popover content={<ActionPrompt />} visible>
-      <FlatButton leftIcon={stenaTrash} />
-    </Popover>
-  </Box>
-);
-
-const Alerter = () => {
-  alert("I was rendered.");
-
-  return <Text>I alert when I am rendered.</Text>;
-};
-
-export const Lazy = () => (
-  <Box indent={10} spacing={10} display={"inline-block"}>
-    <Popover content={<Alerter />} trigger={"click"} lazy>
-      <FlatButton leftIcon={stenaTrash} />
+      <Row>
+        <Icon icon={stenaTrash} />
+        <Indent />
+        <Text>Something went wrong.</Text>
+      </Row>
     </Popover>
   </Box>
 );
diff --git a/packages/tooltip/src/components/popover/Popover.tsx b/packages/tooltip/src/components/popover/Popover.tsx
index 4647d0587..a24e46094 100644
--- a/packages/tooltip/src/components/popover/Popover.tsx
+++ b/packages/tooltip/src/components/popover/Popover.tsx
@@ -1,11 +1,27 @@
-import TippyComponent, {
-  TippyProps as TippyComponentProps,
-} from "@tippyjs/react";
 import * as React from "react";
-import styles from "./Popover.module.css";
-import { TippyCallbackRef } from "../../hooks/UseTippyInstance";
-import { Box } from "@stenajs-webui/core";
-import { useLazyPopover } from "../../hooks/UseLazyPopover";
+import { ReactNode, useCallback, useRef, useState } from "react";
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  FloatingArrow,
+  FloatingFocusManager,
+  FloatingPortal,
+  offset,
+  safePolygon,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useRole,
+  useTransitionStyles,
+} from "@floating-ui/react";
+import cx from "classnames";
+import moduleStyles from "./Popover.module.css";
+import { Placement } from "../../types/Placement";
 
 export type PopoverVariant =
   | "standard"
@@ -15,67 +31,135 @@ export type PopoverVariant =
   | "outlined";
 
 export type PopoverTheme = "light" | "dark";
+export type PopoverTrigger = "click" | "hover" | "focus";
 
-export interface PopoverProps
-  extends Partial<Omit<TippyComponentProps, "theme" | "render">> {
-  tippyRef?: TippyCallbackRef<HTMLDivElement>;
+export type PopoverChildren =
+  | ReactNode
+  | ((args: PopoverChildrenArgs) => ReactNode);
+
+export interface PopoverChildrenArgs {
+  onRequestClose: () => void;
+}
+
+type TriggerProp = PopoverTrigger | Array<PopoverTrigger>;
+
+export interface PopoverProps {
+  children?: PopoverChildren;
+  onRequestClose?: () => void;
+  placement?: Placement;
+  trigger?: TriggerProp;
+  hideArrow?: boolean;
   disablePadding?: boolean;
-  lazy?: boolean;
   variant?: PopoverVariant;
   theme?: PopoverTheme;
+  renderTrigger: (props: Record<string, unknown>) => ReactNode;
 }
 
-export const tippyStyles = {
-  noPadding: styles.noPadding,
-};
-
-const variantToTheme: Record<PopoverVariant, string> = {
-  standard: "light",
-  info: "info",
-  warning: "warning",
-  error: "error",
-  outlined: "outlined",
-};
+const ARROW_WIDTH = 12;
+const ARROW_HEIGHT = 8;
+const GAP = 2;
 
 export const Popover: React.FC<PopoverProps> = ({
-  visible,
-  trigger = "mouseenter",
   children,
-  tippyRef,
-  delay = 0,
-  variant = "standard",
+  variant,
+  trigger = "hover",
+  placement = "bottom",
+  hideArrow,
+  renderTrigger,
   disablePadding,
-  content,
-  maxWidth = "500px",
-  plugins: propsPlugins,
-  lazy,
-  arrow = true,
-  theme = "light",
-  ...tippyProps
 }) => {
-  const { plugins, mounted } = useLazyPopover(propsPlugins);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const arrowRef = useRef(null);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement,
+    middleware: [
+      offset(ARROW_HEIGHT + GAP),
+      flip({ padding: 5 }),
+      shift({ padding: 5 }),
+      arrow({ element: arrowRef }),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+    initial: {
+      opacity: 0,
+    },
+  });
+
+  const onRequestClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+  const onFocus = useFocus(context, { enabled: hasTrigger(trigger, "focus") });
+  const onClick = useClick(context, { enabled: hasTrigger(trigger, "click") });
+  const onHover = useHover(context, {
+    enabled: hasTrigger(trigger, "hover"),
+    handleClose: safePolygon(),
+    restMs: 100,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    onFocus,
+    onClick,
+    onHover,
+    dismiss,
+    role,
+  ]);
 
   return (
-    <TippyComponent
-      interactive
-      className={tippyStyles.noPadding}
-      trigger={visible !== undefined ? undefined : trigger}
-      visible={visible}
-      theme={`${theme} ${variantToTheme[variant] ?? variantToTheme.standard}`}
-      delay={delay}
-      maxWidth={maxWidth}
-      arrow={arrow}
-      content={
-        (!lazy || mounted) && (
-          <Box spacing={!disablePadding && 1} indent={!disablePadding && 1}>
-            {content}
-          </Box>
-        )
-      }
-      plugins={plugins}
-      {...tippyProps}
-    >
-      {children && <div ref={tippyRef}>{children}</div>}
-    </TippyComponent>
+    <>
+      {renderTrigger({ ref: refs.setReference, ...getReferenceProps() })}
+
+      {isMounted && (
+        <FloatingPortal>
+          <FloatingFocusManager context={context} modal={false}>
+            <div
+              ref={refs.setFloating}
+              style={floatingStyles}
+              {...getFloatingProps}
+            >
+              <div
+                style={transitionStyles}
+                className={cx(
+                  moduleStyles.floating,
+                  disablePadding && moduleStyles.disablePadding,
+                  variant && moduleStyles.withIcon
+                )}
+              >
+                {typeof children === "function"
+                  ? children({ onRequestClose })
+                  : children}
+                {!hideArrow && (
+                  <FloatingArrow
+                    ref={arrowRef}
+                    context={context}
+                    width={ARROW_WIDTH}
+                    height={ARROW_HEIGHT}
+                    fill={"white"}
+                  />
+                )}
+              </div>
+            </div>
+          </FloatingFocusManager>
+        </FloatingPortal>
+      )}
+    </>
   );
 };
+
+const hasTrigger = (
+  triggerProp: TriggerProp,
+  triggerToCheck: PopoverTrigger
+): boolean => {
+  if (typeof triggerProp === "string") {
+    return triggerProp === triggerToCheck;
+  }
+  return triggerProp.includes(triggerToCheck);
+};
diff --git a/packages/tooltip/src/components/tooltip/Tooltip.module.css b/packages/tooltip/src/components/tooltip/Tooltip.module.css
index 0c8164c8f..2742b5756 100644
--- a/packages/tooltip/src/components/tooltip/Tooltip.module.css
+++ b/packages/tooltip/src/components/tooltip/Tooltip.module.css
@@ -1,9 +1,11 @@
-.tooltip {
+.floating {
   display: flex;
-  width: fit-content;
   align-items: center;
+  background: #333;
+  color: white;
   border-radius: var(--swui-border-radius);
   padding: var(--swui-metrics-spacing) calc(var(--swui-metrics-indent) * 2);
+  width: fit-content;
 
   &.withIcon {
     padding: calc(var(--swui-metrics-spacing) * 0.5);
diff --git a/packages/tooltip/src/components/tooltip/Tooltip.stories.tsx b/packages/tooltip/src/components/tooltip/Tooltip.stories.tsx
index 568148292..0e5cac0e9 100644
--- a/packages/tooltip/src/components/tooltip/Tooltip.stories.tsx
+++ b/packages/tooltip/src/components/tooltip/Tooltip.stories.tsx
@@ -1,8 +1,6 @@
-import { Column, Row, Spacing, Text, useBoolean } from "@stenajs-webui/core";
-import { PrimaryButton } from "@stenajs-webui/elements";
+import { Column, Row, Text } from "@stenajs-webui/core";
 import { cssColor } from "@stenajs-webui/theme";
 import * as React from "react";
-import { useEffect } from "react";
 import { Tooltip } from "./Tooltip";
 
 export default {
@@ -31,22 +29,6 @@ export const Standard = () => (
   </>
 );
 
-export const ClickTrigger = () => (
-  <Row justifyContent={"space-between"} spacing={10}>
-    <Tooltip label={"Way to go!"} trigger={"click"}>
-      <Text>Click me</Text>
-    </Tooltip>
-  </Row>
-);
-
-export const WithButton = () => (
-  <Column justifyContent={"flex-start"} width={"fit-content"} spacing={10}>
-    <Tooltip label={"Big success!"} trigger={"click"}>
-      <PrimaryButton label={"Click me"} />
-    </Tooltip>
-  </Column>
-);
-
 export const Variants = () => (
   <Column alignItems={"flex-start"} spacing={10} gap={5}>
     <Tooltip label={"Standard"}>
@@ -115,22 +97,3 @@ export const Variants = () => (
     </Tooltip>
   </Column>
 );
-
-export const Disabled = () => {
-  const [disabled, , , toggle] = useBoolean(false);
-
-  useEffect(() => {
-    const r = setInterval(toggle, 2000);
-    return () => clearInterval(r);
-  }, [toggle]);
-
-  return (
-    <Column justifyContent={"flex-start"} width={"fit-content"} spacing={10}>
-      <Tooltip label={"Big success!"} disabled={disabled}>
-        <PrimaryButton label={"Hover me"} />
-      </Tooltip>
-      <Spacing />
-      <Text>Disabled={disabled ? "true" : "false"}</Text>
-    </Column>
-  );
-};
diff --git a/packages/tooltip/src/components/tooltip/Tooltip.tsx b/packages/tooltip/src/components/tooltip/Tooltip.tsx
index 12ccd0582..c4042660b 100644
--- a/packages/tooltip/src/components/tooltip/Tooltip.tsx
+++ b/packages/tooltip/src/components/tooltip/Tooltip.tsx
@@ -1,15 +1,37 @@
-import { Text, Space } from "@stenajs-webui/core";
+import { Space, Text } from "@stenajs-webui/core";
+import * as React from "react";
+import { CSSProperties, PropsWithChildren, useRef, useState } from "react";
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  FloatingArrow,
+  FloatingPortal,
+  offset,
+  shift,
+  useFloating,
+  useHover,
+  useInteractions,
+  useTransitionStyles,
+} from "@floating-ui/react";
+import moduleStyles from "./Tooltip.module.css";
+import { cssColor } from "@stenajs-webui/theme";
+import cx from "classnames";
 import {
   Icon,
   stenaExclamationCircle,
   stenaExclamationTriangle,
   stenaInfoCircle,
 } from "@stenajs-webui/elements";
-import cx from "classnames";
-import * as React from "react";
-import styles from "./Tooltip.module.css";
-import { Popover, PopoverProps } from "../popover/Popover";
-import { cssColor } from "@stenajs-webui/theme";
+import { Placement } from "../../types/Placement";
+
+export interface TooltipProps extends PropsWithChildren {
+  placement?: Placement;
+  visible?: boolean;
+  label: string;
+  variant?: TooltipVariant;
+  maxWidth?: CSSProperties["maxWidth"];
+}
 
 type TooltipVariant = "info" | "warning" | "error";
 
@@ -19,44 +41,100 @@ const variantIcons = {
   error: stenaExclamationTriangle,
 };
 
-export interface TooltipProps extends Omit<PopoverProps, "theme" | "render"> {
-  label: string;
-  variant?: TooltipVariant;
-  children: JSX.Element;
-}
-
-const TooltipText: React.FC<{ label: string }> = ({ label }) => (
-  <Text color={cssColor("--lhds-color-ui-50")} size={"small"} variant="bold">
-    {label}
-  </Text>
-);
+const ARROW_WIDTH = 12;
+const ARROW_HEIGHT = 8;
+const GAP = 2;
 
 export const Tooltip: React.FC<TooltipProps> = ({
+  children,
+  visible,
+  placement,
   label,
   variant,
-  children,
-  ...popoverProps
-}) => (
-  <Popover
-    theme="dark"
-    {...popoverProps}
-    disablePadding
-    content={
-      <div className={cx(styles.tooltip, variant ? styles.withIcon : null)}>
-        {variant ? (
-          <>
-            <div className={cx(styles.iconWrapper, styles[variant])}>
-              <Icon icon={variantIcons[variant]} size={16} />
-            </div>
-            <Space />
-            <TooltipText label={label} />
-          </>
-        ) : (
-          <TooltipText label={label} />
-        )}
+  maxWidth = "500px",
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const arrowRef = useRef(null);
+
+  const { refs, floatingStyles, context } = useFloating({
+    placement: placement,
+    open: visible ?? isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [
+      offset(ARROW_HEIGHT + GAP),
+      flip({ padding: 5 }),
+      shift({ padding: 5 }),
+      arrow({ element: arrowRef }),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const { isMounted, styles } = useTransitionStyles(context, {
+    initial: {
+      opacity: 0,
+    },
+  });
+
+  const hover = useHover(context);
+
+  const { getReferenceProps } = useInteractions([hover]);
+
+  return (
+    <>
+      <div ref={refs.setReference} {...getReferenceProps()}>
+        {children}
       </div>
-    }
+
+      {isMounted && (
+        <FloatingPortal>
+          <div ref={refs.setFloating} style={floatingStyles}>
+            <div
+              style={{ maxWidth, ...styles }}
+              className={cx(
+                moduleStyles.floating,
+                variant && moduleStyles.withIcon
+              )}
+            >
+              {variant ? (
+                <>
+                  <div
+                    className={cx(
+                      moduleStyles.iconWrapper,
+                      moduleStyles[variant]
+                    )}
+                  >
+                    <Icon icon={variantIcons[variant]} size={16} />
+                  </div>
+                  <Space />
+                  <TooltipText label={label} />
+                </>
+              ) : (
+                <TooltipText label={label} />
+              )}
+
+              <FloatingArrow
+                ref={arrowRef}
+                context={context}
+                width={ARROW_WIDTH}
+                height={ARROW_HEIGHT}
+                fill={"#333"}
+              />
+            </div>
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+};
+
+const TooltipText: React.FC<{ label: string }> = ({ label }) => (
+  <Text
+    color={cssColor("--lhds-color-ui-50")}
+    size={"small"}
+    variant={"bold"}
+    whiteSpace={"nowrap"}
   >
-    {children}
-  </Popover>
+    {label}
+  </Text>
 );
diff --git a/packages/tooltip/src/hooks/UseLazyPopover.ts b/packages/tooltip/src/hooks/UseLazyPopover.ts
deleted file mode 100644
index 57a02ead4..000000000
--- a/packages/tooltip/src/hooks/UseLazyPopover.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useMemo, useState } from "react";
-import { Plugin } from "tippy.js";
-
-export const useLazyPopover = (plugins: Plugin<unknown>[] = []) => {
-  const [mounted, setMounted] = useState(false);
-
-  const lazyPlugin = useMemo(
-    () => ({
-      fn: () => ({
-        onShow: () => setMounted(true),
-        onHidden: () => setMounted(false),
-      }),
-    }),
-    [setMounted]
-  );
-
-  return {
-    plugins: [lazyPlugin, ...plugins],
-    mounted,
-  };
-};
diff --git a/packages/tooltip/src/hooks/UsePopoverVisibility.ts b/packages/tooltip/src/hooks/UsePopoverVisibility.ts
deleted file mode 100644
index 13508bcea..000000000
--- a/packages/tooltip/src/hooks/UsePopoverVisibility.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useBoolean, useDebounce } from "@stenajs-webui/core";
-
-export const usePopoverVisibility = (openInitially: boolean = false) => {
-  const [internalPopoverIsOpen, openPopover, closePopover] =
-    useBoolean(openInitially);
-
-  const debouncedPopoverIsOpen = useDebounce(internalPopoverIsOpen, 350);
-
-  const isPopoverOpen = debouncedPopoverIsOpen || internalPopoverIsOpen;
-
-  return {
-    isPopoverOpen,
-    openPopover,
-    closePopover,
-  };
-};
diff --git a/packages/tooltip/src/hooks/UseTippyInstance.ts b/packages/tooltip/src/hooks/UseTippyInstance.ts
deleted file mode 100644
index 3ac3c1fd1..000000000
--- a/packages/tooltip/src/hooks/UseTippyInstance.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Instance } from "tippy.js";
-import { MutableRefObject, useRef } from "react";
-
-export type TippyInstance = Instance;
-
-export type TippyElement<TElement extends HTMLElement> = TElement & {
-  _tippy: TippyInstance;
-};
-
-export type TippyCallbackRef<TElement extends HTMLElement> = (
-  element: TippyElement<TElement> | null
-) => void;
-
-export const useTippyInstance = <TElement extends HTMLElement>(): [
-  TippyCallbackRef<TElement>,
-  MutableRefObject<TippyInstance | undefined>
-] => {
-  const tippyRef = useRef<TippyInstance>();
-
-  return [
-    (element: TippyElement<TElement> | null) => {
-      tippyRef.current = element?._tippy ?? undefined;
-    },
-    tippyRef,
-  ];
-};
diff --git a/packages/tooltip/src/index.ts b/packages/tooltip/src/index.ts
index 604b1b646..1e1cc5bf2 100644
--- a/packages/tooltip/src/index.ts
+++ b/packages/tooltip/src/index.ts
@@ -1,6 +1,4 @@
 export * from "./components/popover/ActionPrompt";
+export * from "./components/popover/ControlledPopover";
 export * from "./components/popover/Popover";
-export * from "./components/button-with-popover/ButtonWithPopover";
 export * from "./components/tooltip/Tooltip";
-export * from "./hooks/UseTippyInstance";
-export * from "./types";
diff --git a/packages/tooltip/src/types.ts b/packages/tooltip/src/types.ts
deleted file mode 100644
index 74856ed33..000000000
--- a/packages/tooltip/src/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Placement } from "tippy.js";
-
-export type PopoverPlacement = Placement;
diff --git a/packages/tooltip/src/types/Placement.tsx b/packages/tooltip/src/types/Placement.tsx
new file mode 100644
index 000000000..a6c01ed50
--- /dev/null
+++ b/packages/tooltip/src/types/Placement.tsx
@@ -0,0 +1,4 @@
+export type Placement = Side | AlignedPlacement;
+export type AlignedPlacement = `${Side}-${Alignment}`;
+export type Alignment = "start" | "end";
+export type Side = "top" | "right" | "bottom" | "left";
diff --git a/yarn.lock b/yarn.lock
index df6661838..fab89c3d8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -109,7 +109,7 @@
     semver "^7.0.0"
     tslib "1.10.0"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.5":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244"
   integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==
@@ -117,7 +117,7 @@
     "@babel/highlight" "^7.23.4"
     chalk "^2.4.2"
 
-"@babel/code-frame@^7.24.7":
+"@babel/code-frame@^7.12.13", "@babel/code-frame@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.7.tgz#882fd9e09e8ee324e496bd040401c6f046ef4465"
   integrity sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==
@@ -156,17 +156,7 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
-"@babel/generator@^7.13.9", "@babel/generator@^7.23.6":
-  version "7.23.6"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e"
-  integrity sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==
-  dependencies:
-    "@babel/types" "^7.23.6"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    "@jridgewell/trace-mapping" "^0.3.17"
-    jsesc "^2.5.1"
-
-"@babel/generator@^7.25.0":
+"@babel/generator@^7.13.9", "@babel/generator@^7.25.0":
   version "7.25.0"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.0.tgz#f858ddfa984350bc3d3b7f125073c9af6988f18e"
   integrity sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==
@@ -176,6 +166,16 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e"
+  integrity sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==
+  dependencies:
+    "@babel/types" "^7.23.6"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
@@ -198,18 +198,7 @@
     "@babel/traverse" "^7.24.7"
     "@babel/types" "^7.24.7"
 
-"@babel/helper-compilation-targets@^7.13.13", "@babel/helper-compilation-targets@^7.22.6":
-  version "7.23.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991"
-  integrity sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==
-  dependencies:
-    "@babel/compat-data" "^7.23.5"
-    "@babel/helper-validator-option" "^7.23.5"
-    browserslist "^4.22.2"
-    lru-cache "^5.1.1"
-    semver "^6.3.1"
-
-"@babel/helper-compilation-targets@^7.24.7", "@babel/helper-compilation-targets@^7.24.8", "@babel/helper-compilation-targets@^7.25.2":
+"@babel/helper-compilation-targets@^7.13.13", "@babel/helper-compilation-targets@^7.24.7", "@babel/helper-compilation-targets@^7.24.8", "@babel/helper-compilation-targets@^7.25.2":
   version "7.25.2"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz#e1d9410a90974a3a5a66e84ff55ef62e3c02d06c"
   integrity sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==
@@ -220,6 +209,17 @@
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
+"@babel/helper-compilation-targets@^7.22.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991"
+  integrity sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==
+  dependencies:
+    "@babel/compat-data" "^7.23.5"
+    "@babel/helper-validator-option" "^7.23.5"
+    browserslist "^4.22.2"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
 "@babel/helper-create-class-features-plugin@^7.22.15", "@babel/helper-create-class-features-plugin@^7.23.6":
   version "7.23.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.7.tgz#b2e6826e0e20d337143655198b79d58fdc9bd43d"
@@ -334,7 +334,17 @@
     "@babel/traverse" "^7.24.7"
     "@babel/types" "^7.24.7"
 
-"@babel/helper-module-transforms@^7.13.14", "@babel/helper-module-transforms@^7.23.3":
+"@babel/helper-module-transforms@^7.13.14", "@babel/helper-module-transforms@^7.24.7", "@babel/helper-module-transforms@^7.24.8", "@babel/helper-module-transforms@^7.25.0":
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz#ee713c29768100f2776edf04d4eb23b8d27a66e6"
+  integrity sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.24.7"
+    "@babel/helper-simple-access" "^7.24.7"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    "@babel/traverse" "^7.25.2"
+
+"@babel/helper-module-transforms@^7.23.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1"
   integrity sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==
@@ -345,16 +355,6 @@
     "@babel/helper-split-export-declaration" "^7.22.6"
     "@babel/helper-validator-identifier" "^7.22.20"
 
-"@babel/helper-module-transforms@^7.24.7", "@babel/helper-module-transforms@^7.24.8", "@babel/helper-module-transforms@^7.25.0":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz#ee713c29768100f2776edf04d4eb23b8d27a66e6"
-  integrity sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==
-  dependencies:
-    "@babel/helper-module-imports" "^7.24.7"
-    "@babel/helper-simple-access" "^7.24.7"
-    "@babel/helper-validator-identifier" "^7.24.7"
-    "@babel/traverse" "^7.25.2"
-
 "@babel/helper-optimise-call-expression@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz#f21531a9ccbff644fdd156b4077c16ff0c3f609e"
@@ -483,13 +483,12 @@
     "@babel/types" "^7.25.0"
 
 "@babel/helpers@^7.13.10":
-  version "7.23.8"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.8.tgz#fc6b2d65b16847fd50adddbd4232c76378959e34"
-  integrity sha512-KDqYz4PiOWvDFrdHLPhKtCThtIcKVy6avWD2oG4GEvyQ+XDZwHD4YQd+H2vNMnq2rkdxsDkU82T+Vk8U/WXHRQ==
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.25.0.tgz#e69beb7841cb93a6505531ede34f34e6a073650a"
+  integrity sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==
   dependencies:
-    "@babel/template" "^7.22.15"
-    "@babel/traverse" "^7.23.7"
-    "@babel/types" "^7.23.6"
+    "@babel/template" "^7.25.0"
+    "@babel/types" "^7.25.0"
 
 "@babel/highlight@^7.23.4":
   version "7.23.4"
@@ -510,12 +509,12 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.13.15", "@babel/parser@^7.20.7", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0", "@babel/parser@^7.23.6", "@babel/parser@^7.7.0":
+"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0", "@babel/parser@^7.23.6", "@babel/parser@^7.7.0":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.6.tgz#ba1c9e512bda72a47e285ae42aff9d2a635a9e3b"
   integrity sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==
 
-"@babel/parser@^7.25.0", "@babel/parser@^7.25.3":
+"@babel/parser@^7.13.15", "@babel/parser@^7.25.0", "@babel/parser@^7.25.3":
   version "7.25.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.3.tgz#91fb126768d944966263f0657ab222a642b82065"
   integrity sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==
@@ -1336,7 +1335,16 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/template@^7.12.13", "@babel/template@^7.22.15":
+"@babel/template@^7.12.13", "@babel/template@^7.24.7", "@babel/template@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a"
+  integrity sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==
+  dependencies:
+    "@babel/code-frame" "^7.24.7"
+    "@babel/parser" "^7.25.0"
+    "@babel/types" "^7.25.0"
+
+"@babel/template@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
   integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
@@ -1345,16 +1353,20 @@
     "@babel/parser" "^7.22.15"
     "@babel/types" "^7.22.15"
 
-"@babel/template@^7.24.7", "@babel/template@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a"
-  integrity sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==
+"@babel/traverse@^7.13.15", "@babel/traverse@^7.24.7", "@babel/traverse@^7.24.8", "@babel/traverse@^7.25.0", "@babel/traverse@^7.25.1", "@babel/traverse@^7.25.2", "@babel/traverse@^7.25.3":
+  version "7.25.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.3.tgz#f1b901951c83eda2f3e29450ce92743783373490"
+  integrity sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==
   dependencies:
     "@babel/code-frame" "^7.24.7"
-    "@babel/parser" "^7.25.0"
-    "@babel/types" "^7.25.0"
+    "@babel/generator" "^7.25.0"
+    "@babel/parser" "^7.25.3"
+    "@babel/template" "^7.25.0"
+    "@babel/types" "^7.25.2"
+    debug "^4.3.1"
+    globals "^11.1.0"
 
-"@babel/traverse@^7.13.15", "@babel/traverse@^7.18.9", "@babel/traverse@^7.23.7", "@babel/traverse@^7.7.0":
+"@babel/traverse@^7.18.9", "@babel/traverse@^7.7.0":
   version "7.23.7"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.7.tgz#9a7bf285c928cb99b5ead19c3b1ce5b310c9c305"
   integrity sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==
@@ -1370,20 +1382,7 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/traverse@^7.24.7", "@babel/traverse@^7.24.8", "@babel/traverse@^7.25.0", "@babel/traverse@^7.25.1", "@babel/traverse@^7.25.2", "@babel/traverse@^7.25.3":
-  version "7.25.3"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.3.tgz#f1b901951c83eda2f3e29450ce92743783373490"
-  integrity sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==
-  dependencies:
-    "@babel/code-frame" "^7.24.7"
-    "@babel/generator" "^7.25.0"
-    "@babel/parser" "^7.25.3"
-    "@babel/template" "^7.25.0"
-    "@babel/types" "^7.25.2"
-    debug "^4.3.1"
-    globals "^11.1.0"
-
-"@babel/types@^7.0.0", "@babel/types@^7.13.14", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
+"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.6.tgz#be33fdb151e1f5a56877d704492c240fc71c7ccd"
   integrity sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==
@@ -1392,6 +1391,15 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.13.14", "@babel/types@^7.24.7", "@babel/types@^7.24.8", "@babel/types@^7.25.0", "@babel/types@^7.25.2":
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.2.tgz#55fb231f7dc958cd69ea141a4c2997e819646125"
+  integrity sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==
+  dependencies:
+    "@babel/helper-string-parser" "^7.24.8"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.24.0":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.0.tgz#3b951f435a92e7333eba05b7566fd297960ea1bf"
@@ -1401,15 +1409,6 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.24.7", "@babel/types@^7.24.8", "@babel/types@^7.25.0", "@babel/types@^7.25.2":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.2.tgz#55fb231f7dc958cd69ea141a4c2997e819646125"
-  integrity sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==
-  dependencies:
-    "@babel/helper-string-parser" "^7.24.8"
-    "@babel/helper-validator-identifier" "^7.24.7"
-    to-fast-properties "^2.0.0"
-
 "@base2/pretty-print-object@1.0.1":
   version "1.0.1"
   resolved "https://registry.npmjs.org/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz"
@@ -1843,7 +1842,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
   integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
 
-"@emotion/use-insertion-effect-with-fallbacks@^1.0.0", "@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
   integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
@@ -2269,6 +2268,42 @@
   resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.4.tgz#9e69f8bb4031e11df79e03db09f9dbbae1740843"
   integrity sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==
 
+"@floating-ui/core@^1.6.0":
+  version "1.6.7"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.7.tgz#7602367795a390ff0662efd1c7ae8ca74e75fb12"
+  integrity sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==
+  dependencies:
+    "@floating-ui/utils" "^0.2.7"
+
+"@floating-ui/dom@^1.0.0":
+  version "1.6.10"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.10.tgz#b74c32f34a50336c86dcf1f1c845cf3a39e26d6f"
+  integrity sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.7"
+
+"@floating-ui/react-dom@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.1.tgz#cca58b6b04fc92b4c39288252e285e0422291fb0"
+  integrity sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+
+"@floating-ui/react@^0.26.22":
+  version "0.26.22"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.22.tgz#b46f645f9cd19a591da706aed24608c23cdb89a2"
+  integrity sha512-LNv4azPt8SpT4WW7Kku5JNVjLk2GcS0bGGjFTAgqOONRFo9r/aaGHHPpdiIuQbB1t8shmWyWqTTUDmZ9fcNshg==
+  dependencies:
+    "@floating-ui/react-dom" "^2.1.1"
+    "@floating-ui/utils" "^0.2.7"
+    tabbable "^6.0.0"
+
+"@floating-ui/utils@^0.2.7":
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.7.tgz#d0ece53ce99ab5a8e37ebdfe5e32452a2bfc073e"
+  integrity sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==
+
 "@fortawesome/fontawesome-common-types@6.5.2":
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz#eaf2f5699f73cef198454ebc0c414e3688898179"
@@ -3351,15 +3386,6 @@
   dependencies:
     memoizerific "^1.11.3"
 
-"@storybook/addons@^7.6.17":
-  version "7.6.17"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-7.6.17.tgz#6fd78ae3a3419bd91fdacbebd40062eb94f92155"
-  integrity sha512-Ok18Y698Ccyg++MoUNJNHY0cXUvo8ETFIRLJk1g9ElJ70j6kPgNnzW2pAtZkBNmswHtofZ7pT156cj96k/LgfA==
-  dependencies:
-    "@storybook/manager-api" "7.6.17"
-    "@storybook/preview-api" "7.6.17"
-    "@storybook/types" "7.6.17"
-
 "@storybook/blocks@8.2.9", "@storybook/blocks@^8.2.9":
   version "8.2.9"
   resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-8.2.9.tgz#3c9018619704cee23c9e69ff263e3c0aaa9a7ccc"
@@ -3395,25 +3421,6 @@
     magic-string "^0.30.0"
     ts-dedent "^2.0.0"
 
-"@storybook/channels@7.6.17":
-  version "7.6.17"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.6.17.tgz#5be1d1222a3ffdc90e1868230c2b2ee5dfc7a97f"
-  integrity sha512-GFG40pzaSxk1hUr/J/TMqW5AFDDPUSu+HkeE/oqSWJbOodBOLJzHN6CReJS6y1DjYSZLNFt1jftPWZZInG/XUA==
-  dependencies:
-    "@storybook/client-logger" "7.6.17"
-    "@storybook/core-events" "7.6.17"
-    "@storybook/global" "^5.0.0"
-    qs "^6.10.0"
-    telejson "^7.2.0"
-    tiny-invariant "^1.3.1"
-
-"@storybook/client-logger@7.6.17":
-  version "7.6.17"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.6.17.tgz#5031c47b7df8d8792fe9dfed5828222f515e5803"
-  integrity sha512-6WBYqixAXNAXlSaBWwgljWpAu10tPRBJrcFvx2gPUne58EeMM20Gi/iHYBz2kMCY+JLAgeIH7ZxInqwO8vDwiQ==
-  dependencies:
-    "@storybook/global" "^5.0.0"
-
 "@storybook/codemod@8.2.9":
   version "8.2.9"
   resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-8.2.9.tgz#f6c7f43a5aa326b64544ad6f10038edc32293827"
@@ -3438,13 +3445,6 @@
   resolved "https://registry.yarnpkg.com/@storybook/components/-/components-8.2.9.tgz#a2394749d52940b7a224d1d4801d756b2750b488"
   integrity sha512-OkkcZ/f/6o3GdFEEK9ZHKIGHWUHmavZUYs5xaSgU64bOrA2aqEFtfeWWitZYTv3Euhk8MVLWfyEMDfez0AlvDg==
 
-"@storybook/core-events@7.6.17":
-  version "7.6.17"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.6.17.tgz#9e1a795558193089fb227cfe2cf768c99418a640"
-  integrity sha512-AriWMCm/k1cxlv10f+jZ1wavThTRpLaN3kY019kHWbYT9XgaSuLU67G7GPr3cGnJ6HuA6uhbzu8qtqVCd6OfXA==
-  dependencies:
-    ts-dedent "^2.0.0"
-
 "@storybook/core@8.2.9":
   version "8.2.9"
   resolved "https://registry.yarnpkg.com/@storybook/core/-/core-8.2.9.tgz#68f8659014e06f4f65f6dbdf1dd10850f31d23b3"
@@ -3476,13 +3476,6 @@
   dependencies:
     type-fest "^2.19.0"
 
-"@storybook/csf@^0.1.2":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.1.2.tgz#8e7452f0097507f5841b5ade3f5da1525bc9afb2"
-  integrity sha512-ePrvE/pS1vsKR9Xr+o+YwdqNgHUyXvg+1Xjx0h9LrVx7Zq4zNe06pd63F5EvzTbCbJsHj7GHr9tkiaqm7U8WRA==
-  dependencies:
-    type-fest "^2.19.0"
-
 "@storybook/global@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@storybook/global/-/global-5.0.0.tgz#b793d34b94f572c1d7d9e0f44fac4e0dbc9572ed"
@@ -3502,51 +3495,11 @@
     "@vitest/utils" "^1.3.1"
     util "^0.12.4"
 
-"@storybook/manager-api@7.6.17":
-  version "7.6.17"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.6.17.tgz#cdf0bb8e5bdc3da2559150125b3d6a3ff72f0def"
-  integrity sha512-IJIV1Yc6yw1dhCY4tReHCfBnUKDqEBnMyHp3mbXpsaHxnxJZrXO45WjRAZIKlQKhl/Ge1CrnznmHRCmYgqmrWg==
-  dependencies:
-    "@storybook/channels" "7.6.17"
-    "@storybook/client-logger" "7.6.17"
-    "@storybook/core-events" "7.6.17"
-    "@storybook/csf" "^0.1.2"
-    "@storybook/global" "^5.0.0"
-    "@storybook/router" "7.6.17"
-    "@storybook/theming" "7.6.17"
-    "@storybook/types" "7.6.17"
-    dequal "^2.0.2"
-    lodash "^4.17.21"
-    memoizerific "^1.11.3"
-    store2 "^2.14.2"
-    telejson "^7.2.0"
-    ts-dedent "^2.0.0"
-
 "@storybook/manager-api@^8.2.9":
   version "8.2.9"
   resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-8.2.9.tgz#f09a83fce286bc48783c75e7d7184dd8a5381527"
   integrity sha512-mkYvUlfqDw+0WbxIynh5TcrotmoXlumEsOA4+45zuNea8XpEgj5cNBUCnmfEO6yQ85swqkS8YYbMpg1cZyu/Vw==
 
-"@storybook/preview-api@7.6.17":
-  version "7.6.17"
-  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-7.6.17.tgz#03dd399bf3bb8ac6f4aad3c738365b86b8790157"
-  integrity sha512-wLfDdI9RWo1f2zzFe54yRhg+2YWyxLZvqdZnSQ45mTs4/7xXV5Wfbv3QNTtcdw8tT3U5KRTrN1mTfTCiRJc0Kw==
-  dependencies:
-    "@storybook/channels" "7.6.17"
-    "@storybook/client-logger" "7.6.17"
-    "@storybook/core-events" "7.6.17"
-    "@storybook/csf" "^0.1.2"
-    "@storybook/global" "^5.0.0"
-    "@storybook/types" "7.6.17"
-    "@types/qs" "^6.9.5"
-    dequal "^2.0.2"
-    lodash "^4.17.21"
-    memoizerific "^1.11.3"
-    qs "^6.10.0"
-    synchronous-promise "^2.0.15"
-    ts-dedent "^2.0.0"
-    util-deprecate "^1.0.2"
-
 "@storybook/preview-api@^8.2.9":
   version "8.2.9"
   resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-8.2.9.tgz#e35ca783a1d98174e73223856397a9767766a737"
@@ -3599,15 +3552,6 @@
     type-fest "~2.19"
     util-deprecate "^1.0.2"
 
-"@storybook/router@7.6.17":
-  version "7.6.17"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.6.17.tgz#de5016086191846ed12af7495aeddcc373cbd0d4"
-  integrity sha512-GnyC0j6Wi5hT4qRhSyT8NPtJfGmf82uZw97LQRWeyYu5gWEshUdM7aj40XlNiScd5cZDp0owO1idduVF2k2l2A==
-  dependencies:
-    "@storybook/client-logger" "7.6.17"
-    memoizerific "^1.11.3"
-    qs "^6.10.0"
-
 "@storybook/source-loader@8.2.9":
   version "8.2.9"
   resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-8.2.9.tgz#d67e805ed673afb9c3db6f5c4214d50d16bb8c54"
@@ -3632,31 +3576,11 @@
     "@vitest/spy" "1.6.0"
     util "^0.12.4"
 
-"@storybook/theming@7.6.17":
-  version "7.6.17"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.6.17.tgz#8170e3e72b921380c51a3970890d4cb479a65c2f"
-  integrity sha512-ZbaBt3KAbmBtfjNqgMY7wPMBshhSJlhodyMNQypv+95xLD/R+Az6aBYbpVAOygLaUQaQk4ar7H/Ww6lFIoiFbA==
-  dependencies:
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
-    "@storybook/client-logger" "7.6.17"
-    "@storybook/global" "^5.0.0"
-    memoizerific "^1.11.3"
-
 "@storybook/theming@^8.2.9":
   version "8.2.9"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-8.2.9.tgz#6eb066f8957272c0bcb0078a8a9bc378ca9311d3"
   integrity sha512-OL0NFvowPX85N5zIYdgeKKaFm7V4Vgtci093vL3cDZT13LGH6GuEzJKkUFGuUGNPFlJc+EgTj0o6PYKrOLyQ6w==
 
-"@storybook/types@7.6.17":
-  version "7.6.17"
-  resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.6.17.tgz#0b3c27cb1708c0545a9ea1a23b73aa8852dd47c4"
-  integrity sha512-GRY0xEJQ0PrL7DY2qCNUdIfUOE0Gsue6N+GBJw9ku1IUDFLJRDOF+4Dx2BvYcVCPI5XPqdWKlEyZdMdKjiQN7Q==
-  dependencies:
-    "@storybook/channels" "7.6.17"
-    "@types/babel__core" "^7.0.0"
-    "@types/express" "^4.7.0"
-    file-system-cache "2.3.0"
-
 "@styled-system/background@^5.1.2":
   version "5.1.2"
   resolved "https://registry.npmjs.org/@styled-system/background/-/background-5.1.2.tgz"
@@ -3901,13 +3825,6 @@
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd"
   integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==
 
-"@tippyjs/react@^4.1.0":
-  version "4.2.0"
-  resolved "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.0.tgz"
-  integrity sha512-T6UcHtwtGkvgsBQ4bNp8BtXGxa2ujfOkWUogYkRtN4UVJ2QRgDdFoJeaPxdndnVYFEa2uTVxSFxs8QkSkZ2Gdw==
-  dependencies:
-    tippy.js "^6.2.0"
-
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
@@ -3951,7 +3868,7 @@
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc"
   integrity sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==
 
-"@types/babel__core@^7.0.0", "@types/babel__core@^7.18.0", "@types/babel__core@^7.20.5":
+"@types/babel__core@^7.18.0", "@types/babel__core@^7.20.5":
   version "7.20.5"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
   integrity sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==
@@ -4083,16 +4000,6 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
-"@types/express@^4.7.0":
-  version "4.17.17"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.17.tgz#01d5437f6ef9cfa8668e616e13c2f2ac9a491ae4"
-  integrity sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q==
-  dependencies:
-    "@types/body-parser" "*"
-    "@types/express-serve-static-core" "^4.17.33"
-    "@types/qs" "*"
-    "@types/serve-static" "*"
-
 "@types/find-cache-dir@^3.2.1":
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz#7b959a4b9643a1e6a1a5fe49032693cc36773501"
@@ -4226,7 +4133,7 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
-"@types/qs@*", "@types/qs@^6.9.5":
+"@types/qs@*":
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
   integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
@@ -5773,13 +5680,18 @@ conventional-recommended-bump@7.0.1:
     git-semver-tags "^5.0.0"
     meow "^8.1.2"
 
-convert-source-map@^1.5.0, convert-source-map@^1.7.0:
+convert-source-map@^1.5.0:
   version "1.7.0"
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz"
   integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
   dependencies:
     safe-buffer "~5.1.1"
 
+convert-source-map@^1.7.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz"
@@ -7210,14 +7122,6 @@ file-saver@^2.0.0:
   resolved "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz"
   integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
 
-file-system-cache@2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-2.3.0.tgz#201feaf4c8cd97b9d0d608e96861bb6005f46fe6"
-  integrity sha512-l4DMNdsIPsVnKrgEXbJwDJsA5mB8rGwHYERMgqQx/xAUtChPJMre1bXBzDEqqVbWv9AIbFezXMxeEkZDSrXUOQ==
-  dependencies:
-    fs-extra "11.1.1"
-    ramda "0.29.0"
-
 filelist@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"
@@ -7392,7 +7296,7 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
-fs-extra@11.1.1, fs-extra@^11.1.0, fs-extra@^11.1.1:
+fs-extra@^11.1.0, fs-extra@^11.1.1:
   version "11.1.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.1.1.tgz#da69f7c39f3b002378b0954bb6ae7efdc0876e2d"
   integrity sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==
@@ -11441,7 +11345,7 @@ punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
-qs@6.11.0, qs@^6.10.0:
+qs@6.11.0:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
   integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
@@ -11470,11 +11374,6 @@ railroad-diagrams@^1.0.0:
   resolved "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz"
   integrity sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=
 
-ramda@0.29.0:
-  version "0.29.0"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.29.0.tgz#fbbb67a740a754c8a4cbb41e2a6e0eb8507f55fb"
-  integrity sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==
-
 randexp@0.4.6:
   version "0.4.6"
   resolved "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz"
@@ -12503,8 +12402,8 @@ source-map-support@^0.5.16:
 
 source-map@^0.5.0, source-map@^0.5.7:
   version "0.5.7"
-  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
-  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
 
 source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
@@ -12602,11 +12501,6 @@ stop-iteration-iterator@^1.0.0:
   dependencies:
     internal-slot "^1.0.4"
 
-store2@^2.14.2:
-  version "2.14.2"
-  resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.2.tgz#56138d200f9fe5f582ad63bc2704dbc0e4a45068"
-  integrity sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==
-
 storybook@^8.2.9:
   version "8.2.9"
   resolved "https://registry.yarnpkg.com/storybook/-/storybook-8.2.9.tgz#35a670cb72367709b6ad3627dfb77c5e25a339f0"
@@ -12968,10 +12862,10 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-synchronous-promise@^2.0.15:
-  version "2.0.15"
-  resolved "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.15.tgz"
-  integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
+tabbable@^6.0.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
 table-layout@^1.0.1:
   version "1.0.2"
@@ -13123,7 +13017,7 @@ tinyspy@^2.2.0:
   resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-2.2.0.tgz#9dc04b072746520b432f77ea2c2d17933de5d6ce"
   integrity sha512-d2eda04AN/cPOR89F7Xv5bK/jrQEhmcLFe6HFldoeO9AJtps+fqEnh486vnT/8y4bw38pSyxDcTCAq+Ks2aJTg==
 
-tippy.js@^6.2.0, tippy.js@^6.2.6:
+tippy.js@^6.2.6:
   version "6.2.7"
   resolved "https://registry.npmjs.org/tippy.js/-/tippy.js-6.2.7.tgz"
   integrity sha512-k+kWF9AJz5xLQHBi3K/XlmJiyu+p9gsCyc5qZhxxGaJWIW8SMjw1R+C7saUnP33IM8gUhDA2xX//ejRSwqR0tA==