diff --git a/apps/docs/content/docs/components/input-otp.mdx b/apps/docs/content/docs/components/input-otp.mdx
index 38e03653b1..854a35ec30 100644
--- a/apps/docs/content/docs/components/input-otp.mdx
+++ b/apps/docs/content/docs/components/input-otp.mdx
@@ -303,6 +303,12 @@ You can customize the styles of the `InputOtp` component using the `classNames`
       description: "Allows to set custom class names for the Input slots.",
       default: "-"
     },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether the element should receive focus on render.",
+      default: "false"
+    },
     {
       attribute: "textAlign",
       type: "left | center | right",
diff --git a/apps/docs/content/docs/components/radio-group.mdx b/apps/docs/content/docs/components/radio-group.mdx
index 4a2ae2545a..5518af4fb4 100644
--- a/apps/docs/content/docs/components/radio-group.mdx
+++ b/apps/docs/content/docs/components/radio-group.mdx
@@ -83,6 +83,7 @@ You can use the `value` and `onValueChange` properties to control the radio inpu
 - Radio Slots
   - **base**: Radio root wrapper, it wraps all elements.
   - **wrapper**: Radio wrapper, it wraps the control element.
+  - **hiddenInput**: The hidden input element that is used to handle the radio state.
   - **labelWrapper**: Label and description wrapper.
   - **label**: Label slot for the radio.
   - **control**: Control element, it is the circle element.
diff --git a/apps/docs/content/docs/components/switch.mdx b/apps/docs/content/docs/components/switch.mdx
index 292446bb05..f6d577a314 100644
--- a/apps/docs/content/docs/components/switch.mdx
+++ b/apps/docs/content/docs/components/switch.mdx
@@ -79,6 +79,7 @@ You can also add icons to start and end of the switch by using `startContent` an
 
 - **base**: Base slot for the switch. It is the main wrapper.
 - **wrapper**: The wrapper of the start icon, end icon and thumb.
+- **hiddenInput**: The hidden input element that is used to handle the switch state.
 - **thumb**: The thumb element of the switch. It is the circle element.
 - **label**: The label slot of the switch.
 - **startContent**: The icon slot at the start of the switch.
diff --git a/packages/components/alert/CHANGELOG.md b/packages/components/alert/CHANGELOG.md
index 5696ec9a54..ab6eb1a147 100644
--- a/packages/components/alert/CHANGELOG.md
+++ b/packages/components/alert/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/alert
 
+## 2.2.5
+
+### Patch Changes
+
+- Updated dependencies [[`dfefdd6`](https://github.com/nextui-org/nextui/commit/dfefdd6250eb81ae653e611a8dff12b2ae29a09c)]:
+  - @nextui-org/button@2.2.5
+
 ## 2.2.4
 
 ### Patch Changes
diff --git a/packages/components/alert/package.json b/packages/components/alert/package.json
index e239b75d8a..4986112a83 100644
--- a/packages/components/alert/package.json
+++ b/packages/components/alert/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/alert",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "Alerts are temporary notifications that provide concise feedback about an action or event.",
   "keywords": [
     "alert"
diff --git a/packages/components/autocomplete/CHANGELOG.md b/packages/components/autocomplete/CHANGELOG.md
index a7b906af4f..f5552c1879 100644
--- a/packages/components/autocomplete/CHANGELOG.md
+++ b/packages/components/autocomplete/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @nextui-org/autocomplete
 
+## 2.3.5
+
+### Patch Changes
+
+- Updated dependencies [[`11eae5c`](https://github.com/nextui-org/nextui/commit/11eae5cc808e10db07b509f4e06d30441bb1937a), [`dfefdd6`](https://github.com/nextui-org/nextui/commit/dfefdd6250eb81ae653e611a8dff12b2ae29a09c)]:
+  - @nextui-org/listbox@2.3.5
+  - @nextui-org/button@2.2.5
+  - @nextui-org/form@2.1.5
+  - @nextui-org/popover@2.3.5
+  - @nextui-org/input@2.4.5
+  - @nextui-org/scroll-shadow@2.3.3
+  - @nextui-org/spinner@2.2.4
+
 ## 2.3.4
 
 ### Patch Changes
diff --git a/packages/components/autocomplete/package.json b/packages/components/autocomplete/package.json
index 1182626e04..6718f5788d 100644
--- a/packages/components/autocomplete/package.json
+++ b/packages/components/autocomplete/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/autocomplete",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.",
   "keywords": [
     "autocomplete"
diff --git a/packages/components/button/CHANGELOG.md b/packages/components/button/CHANGELOG.md
index bf668239d8..3a13697029 100644
--- a/packages/components/button/CHANGELOG.md
+++ b/packages/components/button/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @nextui-org/button
 
+## 2.2.5
+
+### Patch Changes
+
+- [#4284](https://github.com/nextui-org/nextui/pull/4284) [`dfefdd6`](https://github.com/nextui-org/nextui/commit/dfefdd6250eb81ae653e611a8dff12b2ae29a09c) Thanks [@sudongyuer](https://github.com/sudongyuer)! - Refactor Button & Card Ripple
+
+- Updated dependencies [[`dfefdd6`](https://github.com/nextui-org/nextui/commit/dfefdd6250eb81ae653e611a8dff12b2ae29a09c)]:
+  - @nextui-org/ripple@2.2.4
+  - @nextui-org/spinner@2.2.4
+
 ## 2.2.4
 
 ### Patch Changes
diff --git a/packages/components/button/package.json b/packages/components/button/package.json
index 727a64c028..4485f37dea 100644
--- a/packages/components/button/package.json
+++ b/packages/components/button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/button",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "Buttons allow users to perform actions and choose with a single tap.",
   "keywords": [
     "button"
diff --git a/packages/components/button/src/use-button.ts b/packages/components/button/src/use-button.ts
index 78dd90929f..626a0bf43d 100644
--- a/packages/components/button/src/use-button.ts
+++ b/packages/components/button/src/use-button.ts
@@ -14,7 +14,7 @@ import {useDOMRef, filterDOMProps} from "@nextui-org/react-utils";
 import {button} from "@nextui-org/theme";
 import {isValidElement, cloneElement, useMemo} from "react";
 import {useAriaButton} from "@nextui-org/use-aria-button";
-import {useHover} from "@react-aria/interactions";
+import {PressEvent, useHover} from "@react-aria/interactions";
 import {SpinnerProps} from "@nextui-org/spinner";
 import {useRipple} from "@nextui-org/ripple";
 
@@ -135,22 +135,22 @@ export function useButton(props: UseButtonProps) {
     ],
   );
 
-  const {onClick: onRippleClickHandler, onClear: onClearRipple, ripples} = useRipple();
+  const {onPress: onRipplePressHandler, onClear: onClearRipple, ripples} = useRipple();
 
-  const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handlePress = useCallback(
+    (e: PressEvent) => {
       if (disableRipple || isDisabled || disableAnimation) return;
-      domRef.current && onRippleClickHandler(e);
+      domRef.current && onRipplePressHandler(e);
     },
-    [disableRipple, isDisabled, disableAnimation, domRef, onRippleClickHandler],
+    [disableRipple, isDisabled, disableAnimation, domRef, onRipplePressHandler],
   );
 
   const {buttonProps: ariaButtonProps, isPressed} = useAriaButton(
     {
       elementType: as,
       isDisabled,
-      onPress,
-      onClick: chain(onClick, handleClick),
+      onPress: chain(onPress, handlePress),
+      onClick: onClick,
       ...otherProps,
     } as AriaButtonProps,
     domRef,
diff --git a/packages/components/calendar/CHANGELOG.md b/packages/components/calendar/CHANGELOG.md
index b526f9e667..808cda1437 100644
--- a/packages/components/calendar/CHANGELOG.md
+++ b/packages/components/calendar/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/calendar
 
+## 2.2.5
+
+### Patch Changes
+
+- Updated dependencies [[`dfefdd6`](https://github.com/nextui-org/nextui/commit/dfefdd6250eb81ae653e611a8dff12b2ae29a09c)]:
+  - @nextui-org/button@2.2.5
+
 ## 2.2.4
 
 ### Patch Changes
diff --git a/packages/components/calendar/package.json b/packages/components/calendar/package.json
index 6249fd7a21..3a5152a661 100644
--- a/packages/components/calendar/package.json
+++ b/packages/components/calendar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/calendar",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "A calendar displays one or more date grids and allows users to select a single date.",
   "keywords": [
     "calendar"
diff --git a/packages/components/card/CHANGELOG.md b/packages/components/card/CHANGELOG.md
index 50214ebaaf..b72535e9be 100644
--- a/packages/components/card/CHANGELOG.md
+++ b/packages/components/card/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @nextui-org/card
 
+## 2.2.5
+
+### Patch Changes
+
+- [#4284](https://github.com/nextui-org/nextui/pull/4284) [`dfefdd6`](https://github.com/nextui-org/nextui/commit/dfefdd6250eb81ae653e611a8dff12b2ae29a09c) Thanks [@sudongyuer](https://github.com/sudongyuer)! - Refactor Button & Card Ripple
+
+- Updated dependencies [[`dfefdd6`](https://github.com/nextui-org/nextui/commit/dfefdd6250eb81ae653e611a8dff12b2ae29a09c)]:
+  - @nextui-org/ripple@2.2.4
+
 ## 2.2.4
 
 ### Patch Changes
diff --git a/packages/components/card/package.json b/packages/components/card/package.json
index 585f47ffc5..4a169568d4 100644
--- a/packages/components/card/package.json
+++ b/packages/components/card/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/card",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "Card is a container for text, photos, and actions in the context of a single subject.",
   "keywords": [
     "card"
diff --git a/packages/components/card/src/use-card.ts b/packages/components/card/src/use-card.ts
index 913d3a8f27..ceb0f7f2c8 100644
--- a/packages/components/card/src/use-card.ts
+++ b/packages/components/card/src/use-card.ts
@@ -4,10 +4,10 @@ import type {AriaButtonProps} from "@nextui-org/use-aria-button";
 import type {RippleProps} from "@nextui-org/ripple";
 
 import {card} from "@nextui-org/theme";
-import {MouseEvent, ReactNode, useCallback, useMemo} from "react";
+import {ReactNode, useCallback, useMemo} from "react";
 import {chain, mergeProps} from "@react-aria/utils";
 import {useFocusRing} from "@react-aria/focus";
-import {useHover} from "@react-aria/interactions";
+import {PressEvent, useHover} from "@react-aria/interactions";
 import {useAriaButton} from "@nextui-org/use-aria-button";
 import {
   HTMLNextUIProps,
@@ -96,20 +96,22 @@ export function useCard(originalProps: UseCardProps) {
 
   const baseStyles = clsx(classNames?.base, className);
 
-  const {onClick: onRippleClickHandler, onClear: onClearRipple, ripples} = useRipple();
+  const {onClear: onClearRipple, onPress: onRipplePressHandler, ripples} = useRipple();
 
-  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
-    if (!disableAnimation && !disableRipple && domRef.current) {
-      onRippleClickHandler(e);
-    }
-  };
+  const handlePress = useCallback(
+    (e: PressEvent) => {
+      if (disableRipple || disableAnimation) return;
+      domRef.current && onRipplePressHandler(e);
+    },
+    [disableRipple, disableAnimation, domRef, onRipplePressHandler],
+  );
 
   const {buttonProps, isPressed} = useAriaButton(
     {
-      onPress,
+      onPress: chain(onPress, handlePress),
       elementType: as,
       isDisabled: !originalProps.isPressable,
-      onClick: chain(onClick, handleClick),
+      onClick: onClick,
       allowTextSelectionOnPress,
       ...otherProps,
     } as unknown as AriaButtonProps<"button">,
@@ -209,7 +211,7 @@ export function useCard(originalProps: UseCardProps) {
     isPressable: originalProps.isPressable,
     isHoverable: originalProps.isHoverable,
     disableRipple,
-    handleClick,
+    handlePress,
     isFocusVisible,
     getCardProps,
     getRippleProps,
diff --git a/packages/components/checkbox/CHANGELOG.md b/packages/components/checkbox/CHANGELOG.md
index b82efedcec..4b0f3c4ac2 100644
--- a/packages/components/checkbox/CHANGELOG.md
+++ b/packages/components/checkbox/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @nextui-org/checkbox
 
+## 2.3.5
+
+### Patch Changes
+
+- [#4311](https://github.com/nextui-org/nextui/pull/4311) [`03abf1d`](https://github.com/nextui-org/nextui/commit/03abf1daf4fe5ee74f4766cd4fd78068ac25ed78) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix #4252 #4260 interactive elements were not working properly
+
+- Updated dependencies []:
+  - @nextui-org/form@2.1.5
+
 ## 2.3.4
 
 ### Patch Changes
diff --git a/packages/components/checkbox/package.json b/packages/components/checkbox/package.json
index f778fd0e0e..decee9d17f 100644
--- a/packages/components/checkbox/package.json
+++ b/packages/components/checkbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/checkbox",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
   "keywords": [
     "checkbox"
diff --git a/packages/components/checkbox/src/checkbox.tsx b/packages/components/checkbox/src/checkbox.tsx
index 9ca4ee6e2a..2fc2a18c2d 100644
--- a/packages/components/checkbox/src/checkbox.tsx
+++ b/packages/components/checkbox/src/checkbox.tsx
@@ -1,5 +1,4 @@
 import {forwardRef} from "@nextui-org/system";
-import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {cloneElement, ReactElement} from "react";
 
 import {UseCheckboxProps, useCheckbox} from "./use-checkbox";
@@ -26,9 +25,7 @@ const Checkbox = forwardRef<"input", CheckboxProps>((props, ref) => {
 
   return (
     <Component {...getBaseProps()}>
-      <VisuallyHidden elementType="span">
-        <input {...getInputProps()} />
-      </VisuallyHidden>
+      <input {...getInputProps()} />
       <span {...getWrapperProps()}>{clonedIcon}</span>
       {children && <span {...getLabelProps()}>{children}</span>}
     </Component>
diff --git a/packages/components/checkbox/src/use-checkbox.ts b/packages/components/checkbox/src/use-checkbox.ts
index 376541cb1d..bba104f6d6 100644
--- a/packages/components/checkbox/src/use-checkbox.ts
+++ b/packages/components/checkbox/src/use-checkbox.ts
@@ -310,9 +310,10 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
     return {
       ref: mergeRefs(inputRef, ref),
       ...mergeProps(inputProps, focusProps),
+      className: slots.hiddenInput({class: classNames?.hiddenInput}),
       onChange: chain(inputProps.onChange, handleCheckboxChange),
     };
-  }, [inputProps, focusProps, handleCheckboxChange]);
+  }, [inputProps, focusProps, handleCheckboxChange, classNames?.hiddenInput]);
 
   const getLabelProps: PropGetter = useCallback(
     () => ({
diff --git a/packages/components/date-input/CHANGELOG.md b/packages/components/date-input/CHANGELOG.md
index c9592e74f6..00654359a5 100644
--- a/packages/components/date-input/CHANGELOG.md
+++ b/packages/components/date-input/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/date-input
 
+## 2.3.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/form@2.1.5
+
 ## 2.3.4
 
 ### Patch Changes
diff --git a/packages/components/date-input/package.json b/packages/components/date-input/package.json
index 3925824465..62d741f788 100644
--- a/packages/components/date-input/package.json
+++ b/packages/components/date-input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/date-input",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "A date input allows users to enter and edit date and time values using a keyboard.",
   "keywords": [
     "date-field"
diff --git a/packages/components/date-picker/CHANGELOG.md b/packages/components/date-picker/CHANGELOG.md
index 0b7987ab0f..cf2ad78cf2 100644
--- a/packages/components/date-picker/CHANGELOG.md
+++ b/packages/components/date-picker/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @nextui-org/date-picker
 
+## 2.3.5
+
+### Patch Changes
+
+- Updated dependencies [[`dfefdd6`](https://github.com/nextui-org/nextui/commit/dfefdd6250eb81ae653e611a8dff12b2ae29a09c)]:
+  - @nextui-org/button@2.2.5
+  - @nextui-org/calendar@2.2.5
+  - @nextui-org/form@2.1.5
+  - @nextui-org/popover@2.3.5
+  - @nextui-org/date-input@2.3.5
+
 ## 2.3.4
 
 ### Patch Changes
diff --git a/packages/components/date-picker/package.json b/packages/components/date-picker/package.json
index cfb8ce97e2..1b274d55e8 100644
--- a/packages/components/date-picker/package.json
+++ b/packages/components/date-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/date-picker",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "A date picker combines a DateInput and a Calendar popover to allow users to enter or select a date and time value.",
   "keywords": [
     "date-picker"
diff --git a/packages/components/dropdown/CHANGELOG.md b/packages/components/dropdown/CHANGELOG.md
index eae239d45b..0f3c346e29 100644
--- a/packages/components/dropdown/CHANGELOG.md
+++ b/packages/components/dropdown/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @nextui-org/dropdown
 
+## 2.3.5
+
+### Patch Changes
+
+- [#4288](https://github.com/nextui-org/nextui/pull/4288) [`aa5ea19`](https://github.com/nextui-org/nextui/commit/aa5ea19a3c990f8f6d47abacf321f0cbce67b927) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Fix initial animation direction to match fallback placement (#4251)
+
+- Updated dependencies [[`11eae5c`](https://github.com/nextui-org/nextui/commit/11eae5cc808e10db07b509f4e06d30441bb1937a)]:
+  - @nextui-org/menu@2.2.5
+  - @nextui-org/popover@2.3.5
+
 ## 2.3.4
 
 ### Patch Changes
diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json
index de9882bb41..7062fc85f3 100644
--- a/packages/components/dropdown/package.json
+++ b/packages/components/dropdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/dropdown",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "A dropdown displays a list of actions or options that a user can choose.",
   "keywords": [
     "dropdown"
@@ -48,6 +48,7 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@react-aria/focus": "3.19.0",
     "@react-aria/menu": "3.16.0",
+    "@react-aria/overlays": "3.24.0",
     "@react-aria/utils": "3.26.0",
     "@react-stately/menu": "3.9.0",
     "@react-types/menu": "3.9.13"
diff --git a/packages/components/dropdown/src/use-dropdown.ts b/packages/components/dropdown/src/use-dropdown.ts
index 4deb06b42b..df74fed07b 100644
--- a/packages/components/dropdown/src/use-dropdown.ts
+++ b/packages/components/dropdown/src/use-dropdown.ts
@@ -9,11 +9,12 @@ import {useMenuTrigger} from "@react-aria/menu";
 import {dropdown} from "@nextui-org/theme";
 import {clsx} from "@nextui-org/shared-utils";
 import {ReactRef, mergeRefs} from "@nextui-org/react-utils";
-import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
+import {ariaShouldCloseOnInteractOutside, toReactAriaPlacement} from "@nextui-org/aria-utils";
 import {useMemo, useRef} from "react";
 import {mergeProps} from "@react-aria/utils";
 import {MenuProps} from "@nextui-org/menu";
 import {CollectionElement} from "@react-types/shared";
+import {useOverlayPosition} from "@react-aria/overlays";
 
 interface Props extends HTMLNextUIProps<"div"> {
   /**
@@ -77,6 +78,8 @@ const getCloseOnSelect = <T extends object>(
   return props?.closeOnSelect;
 };
 
+const DEFAULT_PLACEMENT = "bottom";
+
 export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
   const globalContext = useProviderContext();
 
@@ -89,13 +92,17 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
     isDisabled,
     type = "menu",
     trigger = "press",
-    placement = "bottom",
+    placement: placementProp = DEFAULT_PLACEMENT,
     closeOnSelect = true,
     shouldBlockScroll = true,
     classNames: classNamesProp,
     disableAnimation = globalContext?.disableAnimation ?? false,
     onClose,
     className,
+    containerPadding = 12,
+    offset = 7,
+    crossOffset = 0,
+    shouldFlip = true,
     ...otherProps
   } = props;
 
@@ -132,6 +139,17 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
     [className],
   );
 
+  const {placement} = useOverlayPosition({
+    isOpen: state.isOpen,
+    targetRef: triggerRef,
+    overlayRef: popoverRef,
+    placement: toReactAriaPlacement(placementProp),
+    offset,
+    crossOffset,
+    shouldFlip,
+    containerPadding,
+  });
+
   const onMenuAction = (menuCloseOnSelect?: boolean) => {
     if (menuCloseOnSelect !== undefined && !menuCloseOnSelect) {
       return;
@@ -146,7 +164,7 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
 
     return {
       state,
-      placement,
+      placement: placement || DEFAULT_PLACEMENT,
       ref: popoverRef,
       disableAnimation,
       shouldBlockScroll,
diff --git a/packages/components/dropdown/stories/dropdown.stories.tsx b/packages/components/dropdown/stories/dropdown.stories.tsx
index 0c26be0ad1..6a4f7c6939 100644
--- a/packages/components/dropdown/stories/dropdown.stories.tsx
+++ b/packages/components/dropdown/stories/dropdown.stories.tsx
@@ -137,10 +137,15 @@ const items = [
   },
 ];
 
-const Template = ({color, variant, ...args}: DropdownProps & DropdownMenuProps) => (
+const Template = ({
+  color,
+  variant,
+  label = "Trigger",
+  ...args
+}: DropdownProps & DropdownMenuProps & {label: string}) => (
   <Dropdown {...args}>
     <DropdownTrigger>
-      <Button>Trigger</Button>
+      <Button>{label}</Button>
     </DropdownTrigger>
     <DropdownMenu aria-label="Actions" color={color} variant={variant}>
       <DropdownItem key="new">New file</DropdownItem>
@@ -782,3 +787,29 @@ export const ItemCloseOnSelect = {
     ...defaultProps,
   },
 };
+
+export const WithFallbackPlacements = {
+  args: {
+    ...defaultProps,
+  },
+  render: (args) => (
+    <div className="relative h-screen w-screen">
+      <div className="absolute top-0 left-0 p-8 flex gap-4">
+        <Template {...args} label="placement: top" placement="top" />
+        <Template {...args} label="placement: bottom" placement="bottom" />
+      </div>
+      <div className="absolute bottom-0 left-0 p-8 flex gap-4">
+        <Template {...args} label="placement: bottom" placement="bottom" />
+        <Template {...args} label="placement: top" placement="top" />
+      </div>
+      <div className="absolute left-0 top-1/2 -translate-y-1/2 p-8 flex flex-col gap-4">
+        <Template {...args} label="placement: left" placement="left" />
+        <Template {...args} label="placement: right" placement="right" />
+      </div>
+      <div className="absolute right-0 top-1/2 -translate-y-1/2 p-8 flex flex-col gap-4">
+        <Template {...args} label="placement: right" placement="right" />
+        <Template {...args} label="placement: left" placement="left" />
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/components/form/CHANGELOG.md b/packages/components/form/CHANGELOG.md
index 4564469973..8279a12813 100644
--- a/packages/components/form/CHANGELOG.md
+++ b/packages/components/form/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/form
 
+## 2.1.5
+
+### Patch Changes
+
+- Updated dependencies [[`03abf1d`](https://github.com/nextui-org/nextui/commit/03abf1daf4fe5ee74f4766cd4fd78068ac25ed78)]:
+  - @nextui-org/theme@2.4.2
+
 ## 2.1.4
 
 ### Patch Changes
diff --git a/packages/components/form/package.json b/packages/components/form/package.json
index b86522853e..93b80a8c6a 100644
--- a/packages/components/form/package.json
+++ b/packages/components/form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/form",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "A form is a group of inputs that allows users submit data to a server and supports field validation errors.",
   "keywords": [
     "form"
diff --git a/packages/components/input-otp/CHANGELOG.md b/packages/components/input-otp/CHANGELOG.md
index 966c3fa520..fec51077ca 100644
--- a/packages/components/input-otp/CHANGELOG.md
+++ b/packages/components/input-otp/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @nextui-org/input-otp
 
+## 2.1.5
+
+### Patch Changes
+
+- [#4296](https://github.com/nextui-org/nextui/pull/4296) [`1485eca`](https://github.com/nextui-org/nextui/commit/1485eca48fce8a0acc42fe40590b828c1a90ff48) Thanks [@macci001](https://github.com/macci001)! - Fixing the autofocus functionality in input-otp component(#4250)
+
+- Updated dependencies []:
+  - @nextui-org/form@2.1.5
+
 ## 2.1.4
 
 ### Patch Changes
diff --git a/packages/components/input-otp/__tests__/input-otp.test.tsx b/packages/components/input-otp/__tests__/input-otp.test.tsx
index c8abb683fb..36f967f183 100644
--- a/packages/components/input-otp/__tests__/input-otp.test.tsx
+++ b/packages/components/input-otp/__tests__/input-otp.test.tsx
@@ -168,6 +168,21 @@ describe("InputOtp Component", () => {
     expect(onComplete).toHaveBeenCalledTimes(2);
     expect(onComplete).toHaveBeenCalledWith("1234");
   });
+
+  it("should autofocus when autofocus prop is passed.", () => {
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    render(<InputOtp autoFocus length={4} />);
+    const segments = screen.getAllByRole("presentation");
+
+    expect(segments[0]).toHaveAttribute("data-focus", "true");
+  });
+
+  it("should not autofocus when autofocus prop is not passed.", () => {
+    render(<InputOtp length={4} />);
+    const segments = screen.getAllByRole("presentation");
+
+    expect(segments[0]).not.toHaveAttribute("data-focus", "true");
+  });
 });
 
 describe("InputOtp with react-hook-form", () => {
diff --git a/packages/components/input-otp/package.json b/packages/components/input-otp/package.json
index ed609b4fd5..48d95f49d4 100644
--- a/packages/components/input-otp/package.json
+++ b/packages/components/input-otp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/input-otp",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "",
   "keywords": [
     "input-otp"
diff --git a/packages/components/input-otp/src/use-input-otp.ts b/packages/components/input-otp/src/use-input-otp.ts
index c7967ad8cd..2604ba6a63 100644
--- a/packages/components/input-otp/src/use-input-otp.ts
+++ b/packages/components/input-otp/src/use-input-otp.ts
@@ -230,6 +230,7 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
         ref: inputRef,
         name: name,
         value: value,
+        autoFocus,
         onChange: setValue,
         onBlur: chain(focusProps.onBlur, props?.onBlur),
         onComplete: onComplete,
@@ -254,6 +255,7 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
       setValue,
       props.onBlur,
       onComplete,
+      autoFocus,
     ],
   );
 
diff --git a/packages/components/input/CHANGELOG.md b/packages/components/input/CHANGELOG.md
index 89e795327c..f4a797b3a1 100644
--- a/packages/components/input/CHANGELOG.md
+++ b/packages/components/input/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/input
 
+## 2.4.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/form@2.1.5
+
 ## 2.4.4
 
 ### Patch Changes
diff --git a/packages/components/input/package.json b/packages/components/input/package.json
index ab84b9892f..3bd4081c77 100644
--- a/packages/components/input/package.json
+++ b/packages/components/input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/input",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "description": "The input component is designed for capturing user input within a text field.",
   "keywords": [
     "input"
diff --git a/packages/components/listbox/CHANGELOG.md b/packages/components/listbox/CHANGELOG.md
index edb03cf742..7773c0c383 100644
--- a/packages/components/listbox/CHANGELOG.md
+++ b/packages/components/listbox/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @nextui-org/listbox
 
+## 2.3.5
+
+### Patch Changes
+
+- [#4286](https://github.com/nextui-org/nextui/pull/4286) [`11eae5c`](https://github.com/nextui-org/nextui/commit/11eae5cc808e10db07b509f4e06d30441bb1937a) Thanks [@macci001](https://github.com/macci001)! - Reverts the PR-4168 (#4256, #4246, #4244)
+
+- Updated dependencies []:
+  - @nextui-org/divider@2.2.4
+
 ## 2.3.4
 
 ### Patch Changes
diff --git a/packages/components/listbox/__tests__/listbox.test.tsx b/packages/components/listbox/__tests__/listbox.test.tsx
index e77196aed1..60614536bf 100644
--- a/packages/components/listbox/__tests__/listbox.test.tsx
+++ b/packages/components/listbox/__tests__/listbox.test.tsx
@@ -124,40 +124,6 @@ describe("Listbox", () => {
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it("should not have anchor tag when href prop is not passed", () => {
-    render(
-      <Listbox disallowEmptySelection aria-label="Actions" selectionMode="multiple">
-        <ListboxItem key="new">New file</ListboxItem>
-        <ListboxItem key="copy">Copy link</ListboxItem>
-        <ListboxItem key="edit">Edit file</ListboxItem>
-      </Listbox>,
-    );
-
-    let anchorTag = document.getElementsByTagName("a")[0];
-
-    expect(anchorTag).toBeFalsy();
-  });
-
-  it("should have anchor tag when href prop is passed", () => {
-    const href = "http://www.nextui.org/";
-
-    render(
-      <Listbox disallowEmptySelection aria-label="Actions" selectionMode="multiple">
-        <ListboxItem key="new" href={href}>
-          New file
-        </ListboxItem>
-        <ListboxItem key="copy">Copy link</ListboxItem>
-        <ListboxItem key="edit">Edit file</ListboxItem>
-      </Listbox>,
-    );
-
-    let anchorTag = document.getElementsByTagName("a")[0];
-
-    expect(anchorTag).toBeTruthy();
-
-    expect(anchorTag).toHaveProperty("href", href);
-  });
-
   it("should work with single selection (controlled)", async () => {
     let onSelectionChange = jest.fn();
 
diff --git a/packages/components/listbox/package.json b/packages/components/listbox/package.json
index 2c9e17300c..63ccfc4ec1 100644
--- a/packages/components/listbox/package.json
+++ b/packages/components/listbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/listbox",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "A listbox displays a list of options and allows a user to select one or more of them.",
   "keywords": [
     "listbox"
diff --git a/packages/components/listbox/src/listbox-item.tsx b/packages/components/listbox/src/listbox-item.tsx
index 8a3f248de1..476f6c59d3 100644
--- a/packages/components/listbox/src/listbox-item.tsx
+++ b/packages/components/listbox/src/listbox-item.tsx
@@ -12,7 +12,6 @@ export interface ListboxItemProps<T extends object = object>
 const ListboxItem = (props: ListboxItemProps) => {
   const {
     Component,
-    FragmentWrapper,
     rendered,
     description,
     isSelectable,
@@ -23,7 +22,6 @@ const ListboxItem = (props: ListboxItemProps) => {
     endContent,
     hideSelectedIcon,
     disableAnimation,
-    fragmentWrapperProps,
     getItemProps,
     getLabelProps,
     getWrapperProps,
@@ -47,21 +45,19 @@ const ListboxItem = (props: ListboxItemProps) => {
 
   return (
     <Component {...getItemProps()}>
-      <FragmentWrapper {...fragmentWrapperProps}>
-        {startContent}
-        {description ? (
-          <div {...getWrapperProps()}>
-            <span {...getLabelProps()}>{rendered}</span>
-            <span {...getDescriptionProps()}>{description}</span>
-          </div>
-        ) : (
+      {startContent}
+      {description ? (
+        <div {...getWrapperProps()}>
           <span {...getLabelProps()}>{rendered}</span>
-        )}
-        {isSelectable && !hideSelectedIcon && (
-          <span {...getSelectedIconProps()}>{selectedContent}</span>
-        )}
-        {endContent}
-      </FragmentWrapper>
+          <span {...getDescriptionProps()}>{description}</span>
+        </div>
+      ) : (
+        <span {...getLabelProps()}>{rendered}</span>
+      )}
+      {isSelectable && !hideSelectedIcon && (
+        <span {...getSelectedIconProps()}>{selectedContent}</span>
+      )}
+      {endContent}
     </Component>
   );
 };
diff --git a/packages/components/listbox/src/use-listbox-item.ts b/packages/components/listbox/src/use-listbox-item.ts
index 820b32637f..5364c773dc 100644
--- a/packages/components/listbox/src/use-listbox-item.ts
+++ b/packages/components/listbox/src/use-listbox-item.ts
@@ -1,7 +1,7 @@
 import type {ListboxItemBaseProps} from "./base/listbox-item-base";
 import type {MenuItemVariantProps} from "@nextui-org/theme";
 
-import {useMemo, useRef, useCallback, Fragment} from "react";
+import {useMemo, useRef, useCallback} from "react";
 import {listboxItem} from "@nextui-org/theme";
 import {
   HTMLNextUIProps,
@@ -50,7 +50,6 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
     shouldHighlightOnFocus,
     hideSelectedIcon = false,
     isReadOnly = false,
-    href,
     ...otherProps
   } = props;
 
@@ -59,12 +58,9 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
 
   const domRef = useRef<HTMLLIElement>(null);
 
-  const Component = as || "li";
+  const Component = as || (originalProps.href ? "a" : "li");
   const shouldFilterDOMProps = typeof Component === "string";
 
-  const FragmentWrapper = href ? "a" : Fragment;
-  const fragmentWrapperProps = href ? {href} : {};
-
   const {rendered, key} = item;
 
   const isDisabled = state.disabledKeys.has(key) || originalProps.isDisabled;
@@ -173,7 +169,6 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
 
   return {
     Component,
-    FragmentWrapper,
     domRef,
     slots,
     classNames,
@@ -187,7 +182,6 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
     selectedIcon,
     hideSelectedIcon,
     disableAnimation,
-    fragmentWrapperProps,
     getItemProps,
     getLabelProps,
     getWrapperProps,
diff --git a/packages/components/menu/CHANGELOG.md b/packages/components/menu/CHANGELOG.md
index 51a3af5b93..1e42a99301 100644
--- a/packages/components/menu/CHANGELOG.md
+++ b/packages/components/menu/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @nextui-org/menu
 
+## 2.2.5
+
+### Patch Changes
+
+- [#4286](https://github.com/nextui-org/nextui/pull/4286) [`11eae5c`](https://github.com/nextui-org/nextui/commit/11eae5cc808e10db07b509f4e06d30441bb1937a) Thanks [@macci001](https://github.com/macci001)! - Reverts the PR-4168 (#4256, #4246, #4244)
+
+- Updated dependencies []:
+  - @nextui-org/divider@2.2.4
+
 ## 2.2.4
 
 ### Patch Changes
diff --git a/packages/components/menu/__tests__/menu.test.tsx b/packages/components/menu/__tests__/menu.test.tsx
index 0b4ea75e87..eeaa3eb068 100644
--- a/packages/components/menu/__tests__/menu.test.tsx
+++ b/packages/components/menu/__tests__/menu.test.tsx
@@ -125,46 +125,6 @@ describe("Menu", () => {
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it("should not have anchor tag when href prop is not passed", () => {
-    render(
-      <Menu disallowEmptySelection aria-label="Actions" selectionMode="multiple">
-        <MenuItem key="new">New file</MenuItem>
-        <MenuItem key="copy">Copy link</MenuItem>
-        <MenuItem key="edit">Edit file</MenuItem>
-        <MenuItem key="delete" color="danger">
-          Delete file
-        </MenuItem>
-      </Menu>,
-    );
-
-    let anchorTag = document.getElementsByTagName("a")[0];
-
-    expect(anchorTag).toBeFalsy();
-  });
-
-  it("should have anchor tag when href prop is passed", () => {
-    const href = "http://www.nextui.org/";
-
-    render(
-      <Menu disallowEmptySelection aria-label="Actions" selectionMode="multiple">
-        <MenuItem key="new" href={href}>
-          New file
-        </MenuItem>
-        <MenuItem key="copy">Copy link</MenuItem>
-        <MenuItem key="edit">Edit file</MenuItem>
-        <MenuItem key="delete" color="danger">
-          Delete file
-        </MenuItem>
-      </Menu>,
-    );
-
-    let anchorTag = document.getElementsByTagName("a")[0];
-
-    expect(anchorTag).toBeTruthy();
-
-    expect(anchorTag).toHaveProperty("href", href);
-  });
-
   it("should work with single selection (controlled)", async () => {
     let onSelectionChange = jest.fn();
 
diff --git a/packages/components/menu/package.json b/packages/components/menu/package.json
index fc37c47eab..29846006ea 100644
--- a/packages/components/menu/package.json
+++ b/packages/components/menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/menu",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "A menu displays a list of options and allows a user to select one or more of them.",
   "keywords": [
     "menu"
diff --git a/packages/components/menu/src/menu-item.tsx b/packages/components/menu/src/menu-item.tsx
index 5e22e495a3..594bcd3963 100644
--- a/packages/components/menu/src/menu-item.tsx
+++ b/packages/components/menu/src/menu-item.tsx
@@ -12,7 +12,6 @@ export interface MenuItemProps<T extends object = object>
 const MenuItem = (props: MenuItemProps) => {
   const {
     Component,
-    FragmentWrapper,
     slots,
     classNames,
     rendered,
@@ -26,7 +25,6 @@ const MenuItem = (props: MenuItemProps) => {
     endContent,
     disableAnimation,
     hideSelectedIcon,
-    fragmentWrapperProps,
     getItemProps,
     getLabelProps,
     getDescriptionProps,
@@ -50,22 +48,20 @@ const MenuItem = (props: MenuItemProps) => {
 
   return (
     <Component {...getItemProps()}>
-      <FragmentWrapper {...fragmentWrapperProps}>
-        {startContent}
-        {description ? (
-          <div className={slots.wrapper({class: classNames?.wrapper})}>
-            <span {...getLabelProps()}>{rendered}</span>
-            <span {...getDescriptionProps()}>{description}</span>
-          </div>
-        ) : (
+      {startContent}
+      {description ? (
+        <div className={slots.wrapper({class: classNames?.wrapper})}>
           <span {...getLabelProps()}>{rendered}</span>
-        )}
-        {shortcut && <kbd {...getKeyboardShortcutProps()}>{shortcut}</kbd>}
-        {isSelectable && !hideSelectedIcon && (
-          <span {...getSelectedIconProps()}>{selectedContent}</span>
-        )}
-        {endContent}
-      </FragmentWrapper>
+          <span {...getDescriptionProps()}>{description}</span>
+        </div>
+      ) : (
+        <span {...getLabelProps()}>{rendered}</span>
+      )}
+      {shortcut && <kbd {...getKeyboardShortcutProps()}>{shortcut}</kbd>}
+      {isSelectable && !hideSelectedIcon && (
+        <span {...getSelectedIconProps()}>{selectedContent}</span>
+      )}
+      {endContent}
     </Component>
   );
 };
diff --git a/packages/components/menu/src/use-menu-item.ts b/packages/components/menu/src/use-menu-item.ts
index a150e8def2..b493e50bd5 100644
--- a/packages/components/menu/src/use-menu-item.ts
+++ b/packages/components/menu/src/use-menu-item.ts
@@ -2,7 +2,7 @@ import type {MenuItemBaseProps} from "./base/menu-item-base";
 import type {MenuItemVariantProps} from "@nextui-org/theme";
 import type {Node} from "@react-types/shared";
 
-import {useMemo, useRef, useCallback, Fragment} from "react";
+import {useMemo, useRef, useCallback} from "react";
 import {menuItem} from "@nextui-org/theme";
 import {
   HTMLNextUIProps,
@@ -59,7 +59,6 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
     isReadOnly = false,
     closeOnSelect,
     onClose,
-    href,
     ...otherProps
   } = props;
 
@@ -68,12 +67,9 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
 
   const domRef = useRef<HTMLLIElement>(null);
 
-  const Component = as || "li";
+  const Component = as || (otherProps?.href ? "a" : "li");
   const shouldFilterDOMProps = typeof Component === "string";
 
-  const FragmentWrapper = href ? "a" : Fragment;
-  const fragmentWrapperProps = href ? {href} : {};
-
   const {rendered, key} = item;
 
   const isDisabledProp = state.disabledKeys.has(key) || originalProps.isDisabled;
@@ -198,7 +194,6 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
 
   return {
     Component,
-    FragmentWrapper,
     domRef,
     slots,
     classNames,
@@ -212,7 +207,6 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
     endContent,
     selectedIcon,
     disableAnimation,
-    fragmentWrapperProps,
     getItemProps,
     getLabelProps,
     hideSelectedIcon,
diff --git a/packages/components/pagination/CHANGELOG.md b/packages/components/pagination/CHANGELOG.md
index 580dd4f295..4ea405bb34 100644
--- a/packages/components/pagination/CHANGELOG.md
+++ b/packages/components/pagination/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @nextui-org/pagination
 
+## 2.2.5
+
+### Patch Changes
+
+- [#4286](https://github.com/nextui-org/nextui/pull/4286) [`11eae5c`](https://github.com/nextui-org/nextui/commit/11eae5cc808e10db07b509f4e06d30441bb1937a) Thanks [@macci001](https://github.com/macci001)! - Reverts the PR-4168 (#4256, #4246, #4244)
+
 ## 2.2.4
 
 ### Patch Changes
diff --git a/packages/components/pagination/__tests__/pagination.test.tsx b/packages/components/pagination/__tests__/pagination.test.tsx
index 5de6f4578b..71db770711 100644
--- a/packages/components/pagination/__tests__/pagination.test.tsx
+++ b/packages/components/pagination/__tests__/pagination.test.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import {render} from "@testing-library/react";
 
-import {Pagination, PaginationItem} from "../src";
+import {Pagination} from "../src";
 
 describe("Pagination", () => {
   it("should render correctly", () => {
@@ -37,25 +37,6 @@ describe("Pagination", () => {
     expect(prevButton).toBeNull();
   });
 
-  it("should not have anchor tag when href prop is not passed", () => {
-    render(<PaginationItem />);
-    let anchorTag = document.getElementsByTagName("a")[0];
-
-    expect(anchorTag).toBeFalsy();
-  });
-
-  it("should have anchor tag when href prop is passed", () => {
-    const href = "http://www.nextui.org/";
-
-    render(<PaginationItem href={href} />);
-
-    let anchorTag = document.getElementsByTagName("a")[0];
-
-    expect(anchorTag).toBeTruthy();
-
-    expect(anchorTag).toHaveProperty("href", href);
-  });
-
   it("should show dots when total is greater than 10", () => {
     const wrapper = render(<Pagination total={10} />);
 
diff --git a/packages/components/pagination/package.json b/packages/components/pagination/package.json
index 4286358707..aef946658d 100644
--- a/packages/components/pagination/package.json
+++ b/packages/components/pagination/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/pagination",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "The Pagination component allows you to display active page and navigate between multiple pages.",
   "keywords": [
     "pagination"
diff --git a/packages/components/pagination/src/pagination-item.tsx b/packages/components/pagination/src/pagination-item.tsx
index 03ef05c91c..988e554b23 100644
--- a/packages/components/pagination/src/pagination-item.tsx
+++ b/packages/components/pagination/src/pagination-item.tsx
@@ -5,14 +5,9 @@ import {usePaginationItem, UsePaginationItemProps} from "./use-pagination-item";
 export interface PaginationItemProps extends UsePaginationItemProps {}
 
 const PaginationItem = forwardRef<"li", PaginationItemProps>((props, ref) => {
-  const {Component, FragmentWrapper, fragmentWrapperProps, children, getItemProps} =
-    usePaginationItem({...props, ref});
+  const {Component, children, getItemProps} = usePaginationItem({...props, ref});
 
-  return (
-    <Component {...getItemProps()}>
-      <FragmentWrapper {...fragmentWrapperProps}>{children}</FragmentWrapper>
-    </Component>
-  );
+  return <Component {...getItemProps()}>{children}</Component>;
 });
 
 PaginationItem.displayName = "NextUI.PaginationItem";
diff --git a/packages/components/pagination/src/use-pagination-item.ts b/packages/components/pagination/src/use-pagination-item.ts
index e507d3aaaf..1bef299b98 100644
--- a/packages/components/pagination/src/use-pagination-item.ts
+++ b/packages/components/pagination/src/use-pagination-item.ts
@@ -2,7 +2,7 @@ import type {Ref} from "react";
 import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
 import type {LinkDOMProps, PressEvent} from "@react-types/shared";
 
-import {Fragment, useMemo} from "react";
+import {useMemo} from "react";
 import {PaginationItemValue} from "@nextui-org/use-pagination";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {chain, mergeProps, shouldClientNavigate, useRouter} from "@react-aria/utils";
@@ -64,13 +64,10 @@ export function usePaginationItem(props: UsePaginationItemProps) {
   } = props;
 
   const isLink = !!props?.href;
-  const Component = as || "li";
+  const Component = as || isLink ? "a" : "li";
   const shouldFilterDOMProps = typeof Component === "string";
-
-  const FragmentWrapper = isLink ? "a" : Fragment;
-  const fragmentWrapperProps = isLink ? {href: props.href} : {};
-
   const domRef = useDOMRef(ref);
+
   const router = useRouter();
 
   const ariaLabel = useMemo(
@@ -132,8 +129,6 @@ export function usePaginationItem(props: UsePaginationItemProps) {
 
   return {
     Component,
-    FragmentWrapper,
-    fragmentWrapperProps,
     children,
     ariaLabel,
     isFocused,
diff --git a/packages/components/popover/CHANGELOG.md b/packages/components/popover/CHANGELOG.md
index 20d4e879f5..c45a9fc82f 100644
--- a/packages/components/popover/CHANGELOG.md
+++ b/packages/components/popover/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/popover
 
+## 2.3.5
+
+### Patch Changes
+
+- Updated dependencies [[`dfefdd6`](https://github.com/nextui-org/nextui/commit/dfefdd6250eb81ae653e611a8dff12b2ae29a09c)]:
+  - @nextui-org/button@2.2.5
+
 ## 2.3.4
 
 ### Patch Changes
diff --git a/packages/components/popover/package.json b/packages/components/popover/package.json
index 7f1f5d8f24..08a5e58653 100644
--- a/packages/components/popover/package.json
+++ b/packages/components/popover/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/popover",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "A popover is an overlay element positioned relative to a trigger.",
   "keywords": [
     "popover"
diff --git a/packages/components/radio/CHANGELOG.md b/packages/components/radio/CHANGELOG.md
index 4b4c52d5d8..775802984a 100644
--- a/packages/components/radio/CHANGELOG.md
+++ b/packages/components/radio/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @nextui-org/radio
 
+## 2.3.5
+
+### Patch Changes
+
+- [#4311](https://github.com/nextui-org/nextui/pull/4311) [`03abf1d`](https://github.com/nextui-org/nextui/commit/03abf1daf4fe5ee74f4766cd4fd78068ac25ed78) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix #4252 #4260 interactive elements were not working properly
+
+- Updated dependencies []:
+  - @nextui-org/form@2.1.5
+
 ## 2.3.4
 
 ### Patch Changes
diff --git a/packages/components/radio/package.json b/packages/components/radio/package.json
index 246de414d6..dcaff4c729 100644
--- a/packages/components/radio/package.json
+++ b/packages/components/radio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/radio",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "Radios allow users to select a single option from a list of mutually exclusive options.",
   "keywords": [
     "radio"
diff --git a/packages/components/radio/src/radio.tsx b/packages/components/radio/src/radio.tsx
index 85535004f0..df80b892a1 100644
--- a/packages/components/radio/src/radio.tsx
+++ b/packages/components/radio/src/radio.tsx
@@ -1,5 +1,4 @@
 import {forwardRef} from "@nextui-org/system";
-import {VisuallyHidden} from "@react-aria/visually-hidden";
 
 import {UseRadioProps, useRadio} from "./use-radio";
 
@@ -21,9 +20,7 @@ const Radio = forwardRef<"input", RadioProps>((props, ref) => {
 
   return (
     <Component {...getBaseProps()}>
-      <VisuallyHidden elementType="span">
-        <input {...getInputProps()} />
-      </VisuallyHidden>
+      <input {...getInputProps()} />
       <span {...getWrapperProps()}>
         <span {...getControlProps()} />
       </span>
diff --git a/packages/components/radio/src/use-radio.ts b/packages/components/radio/src/use-radio.ts
index b171b1e006..78b452827e 100644
--- a/packages/components/radio/src/use-radio.ts
+++ b/packages/components/radio/src/use-radio.ts
@@ -202,6 +202,7 @@ export function useRadio(props: UseRadioProps) {
       return {
         ref: inputRef,
         ...mergeProps(props, inputProps, focusProps),
+        className: slots.hiddenInput({class: classNames?.hiddenInput}),
         onChange: chain(inputProps.onChange, onChange),
       };
     },
diff --git a/packages/components/ripple/CHANGELOG.md b/packages/components/ripple/CHANGELOG.md
index a1e846b4ec..4c45b2d252 100644
--- a/packages/components/ripple/CHANGELOG.md
+++ b/packages/components/ripple/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @nextui-org/ripple
 
+## 2.2.4
+
+### Patch Changes
+
+- [#4284](https://github.com/nextui-org/nextui/pull/4284) [`dfefdd6`](https://github.com/nextui-org/nextui/commit/dfefdd6250eb81ae653e611a8dff12b2ae29a09c) Thanks [@sudongyuer](https://github.com/sudongyuer)! - Refactor Button & Card Ripple
+
 ## 2.2.3
 
 ### Patch Changes
diff --git a/packages/components/ripple/package.json b/packages/components/ripple/package.json
index 8176bc2112..c93b8a2350 100644
--- a/packages/components/ripple/package.json
+++ b/packages/components/ripple/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/ripple",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "A simple implementation to display a ripple animation when the source component is clicked",
   "keywords": [
     "ripple"
diff --git a/packages/components/ripple/src/use-ripple.ts b/packages/components/ripple/src/use-ripple.ts
index 5c1d24396b..956380858d 100644
--- a/packages/components/ripple/src/use-ripple.ts
+++ b/packages/components/ripple/src/use-ripple.ts
@@ -1,5 +1,6 @@
 import {getUniqueID} from "@nextui-org/shared-utils";
 import React, {useCallback, useState} from "react";
+import {PressEvent} from "@react-types/shared";
 
 export type RippleType = {
   key: React.Key;
@@ -13,19 +14,18 @@ export interface UseRippleProps {}
 export function useRipple(props: UseRippleProps = {}) {
   const [ripples, setRipples] = useState<RippleType[]>([]);
 
-  const onClick = useCallback((event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-    const trigger = event.currentTarget;
+  const onPress = useCallback((event: PressEvent) => {
+    const trigger = event.target;
 
     const size = Math.max(trigger.clientWidth, trigger.clientHeight);
-    const rect = trigger.getBoundingClientRect();
 
     setRipples((prevRipples) => [
       ...prevRipples,
       {
         key: getUniqueID(prevRipples.length.toString()),
         size,
-        x: event.clientX - rect.left - size / 2,
-        y: event.clientY - rect.top - size / 2,
+        x: event.x - size / 2,
+        y: event.y - size / 2,
       },
     ]);
   }, []);
@@ -34,7 +34,7 @@ export function useRipple(props: UseRippleProps = {}) {
     setRipples((prevState) => prevState.filter((ripple) => ripple.key !== key));
   }, []);
 
-  return {ripples, onClick, onClear, ...props};
+  return {ripples, onClear, onPress, ...props};
 }
 
 export type UseRippleReturn = ReturnType<typeof useRipple>;
diff --git a/packages/components/select/CHANGELOG.md b/packages/components/select/CHANGELOG.md
index deb0d0f907..2cbb21749c 100644
--- a/packages/components/select/CHANGELOG.md
+++ b/packages/components/select/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @nextui-org/select
 
+## 2.4.5
+
+### Patch Changes
+
+- Updated dependencies [[`11eae5c`](https://github.com/nextui-org/nextui/commit/11eae5cc808e10db07b509f4e06d30441bb1937a)]:
+  - @nextui-org/listbox@2.3.5
+  - @nextui-org/form@2.1.5
+  - @nextui-org/popover@2.3.5
+  - @nextui-org/scroll-shadow@2.3.3
+  - @nextui-org/spinner@2.2.4
+
 ## 2.4.4
 
 ### Patch Changes
diff --git a/packages/components/select/package.json b/packages/components/select/package.json
index ddc2035a36..391cb96ac6 100644
--- a/packages/components/select/package.json
+++ b/packages/components/select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/select",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "description": "A select displays a collapsible list of options and allows a user to select one of them.",
   "keywords": [
     "select"
diff --git a/packages/components/snippet/CHANGELOG.md b/packages/components/snippet/CHANGELOG.md
index d4b16c3e78..cea558f338 100644
--- a/packages/components/snippet/CHANGELOG.md
+++ b/packages/components/snippet/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/snippet
 
+## 2.2.6
+
+### Patch Changes
+
+- Updated dependencies [[`dfefdd6`](https://github.com/nextui-org/nextui/commit/dfefdd6250eb81ae653e611a8dff12b2ae29a09c)]:
+  - @nextui-org/button@2.2.5
+  - @nextui-org/tooltip@2.2.4
+
 ## 2.2.5
 
 ### Patch Changes
diff --git a/packages/components/snippet/package.json b/packages/components/snippet/package.json
index 912ee26999..df5b268b2e 100644
--- a/packages/components/snippet/package.json
+++ b/packages/components/snippet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/snippet",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "Display a snippet of copyable code for the command line.",
   "keywords": [
     "snippet"
diff --git a/packages/components/switch/CHANGELOG.md b/packages/components/switch/CHANGELOG.md
index 9aab978da8..6d00c2a5e1 100644
--- a/packages/components/switch/CHANGELOG.md
+++ b/packages/components/switch/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @nextui-org/switch
 
+## 2.2.5
+
+### Patch Changes
+
+- [#4311](https://github.com/nextui-org/nextui/pull/4311) [`03abf1d`](https://github.com/nextui-org/nextui/commit/03abf1daf4fe5ee74f4766cd4fd78068ac25ed78) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix #4252 #4260 interactive elements were not working properly
+
 ## 2.2.4
 
 ### Patch Changes
diff --git a/packages/components/switch/package.json b/packages/components/switch/package.json
index 0961a790ae..9c68ccb490 100644
--- a/packages/components/switch/package.json
+++ b/packages/components/switch/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/switch",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
   "keywords": [
     "switch"
diff --git a/packages/components/switch/src/switch.tsx b/packages/components/switch/src/switch.tsx
index d60428bfcd..bc64125194 100644
--- a/packages/components/switch/src/switch.tsx
+++ b/packages/components/switch/src/switch.tsx
@@ -1,4 +1,3 @@
-import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {cloneElement, ReactElement} from "react";
 import {forwardRef} from "@nextui-org/system";
 
@@ -35,9 +34,7 @@ const Switch = forwardRef<"input", SwitchProps>((props, ref) => {
 
   return (
     <Component {...getBaseProps()}>
-      <VisuallyHidden elementType="span">
-        <input {...getInputProps()} />
-      </VisuallyHidden>
+      <input {...getInputProps()} />
       <span {...getWrapperProps()}>
         {startContent && clonedStartContent}
         <span {...getThumbProps()}>{thumbIcon && clonedThumbIcon}</span>
diff --git a/packages/components/switch/src/use-switch.ts b/packages/components/switch/src/use-switch.ts
index 34adb52e54..faee7334ed 100644
--- a/packages/components/switch/src/use-switch.ts
+++ b/packages/components/switch/src/use-switch.ts
@@ -162,6 +162,7 @@ export function useSwitch(originalProps: UseSwitchProps = {}) {
   });
 
   const isInteractionDisabled = ariaSwitchProps.isDisabled || isReadOnly;
+
   const pressed = isInteractionDisabled ? false : isPressed;
 
   const isSelected = inputProps.checked;
@@ -209,6 +210,7 @@ export function useSwitch(originalProps: UseSwitchProps = {}) {
       ...mergeProps(inputProps, focusProps, props),
       ref: mergeRefs(inputRef, ref),
       id: inputProps.id,
+      className: slots.hiddenInput({class: classNames?.hiddenInput}),
       onChange: chain(onChange, inputProps.onChange),
     };
   };
diff --git a/packages/components/table/CHANGELOG.md b/packages/components/table/CHANGELOG.md
index d2c9ec1a7d..ead36c75dc 100644
--- a/packages/components/table/CHANGELOG.md
+++ b/packages/components/table/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/table
 
+## 2.2.5
+
+### Patch Changes
+
+- Updated dependencies [[`03abf1d`](https://github.com/nextui-org/nextui/commit/03abf1daf4fe5ee74f4766cd4fd78068ac25ed78)]:
+  - @nextui-org/checkbox@2.3.5
+  - @nextui-org/spacer@2.2.4
+
 ## 2.2.4
 
 ### Patch Changes
diff --git a/packages/components/table/package.json b/packages/components/table/package.json
index fc4200b2c2..c63f67e106 100644
--- a/packages/components/table/package.json
+++ b/packages/components/table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/table",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "Tables are used to display tabular data using rows and columns. ",
   "keywords": [
     "table"
diff --git a/packages/core/react/CHANGELOG.md b/packages/core/react/CHANGELOG.md
index 1aa944a635..ee547a033d 100644
--- a/packages/core/react/CHANGELOG.md
+++ b/packages/core/react/CHANGELOG.md
@@ -1,5 +1,56 @@
 # @nextui-org/react
 
+## 2.6.6
+
+### Patch Changes
+
+- Updated dependencies [[`11eae5c`](https://github.com/nextui-org/nextui/commit/11eae5cc808e10db07b509f4e06d30441bb1937a), [`aa5ea19`](https://github.com/nextui-org/nextui/commit/aa5ea19a3c990f8f6d47abacf321f0cbce67b927), [`dfefdd6`](https://github.com/nextui-org/nextui/commit/dfefdd6250eb81ae653e611a8dff12b2ae29a09c), [`1485eca`](https://github.com/nextui-org/nextui/commit/1485eca48fce8a0acc42fe40590b828c1a90ff48), [`03abf1d`](https://github.com/nextui-org/nextui/commit/03abf1daf4fe5ee74f4766cd4fd78068ac25ed78)]:
+  - @nextui-org/pagination@2.2.5
+  - @nextui-org/listbox@2.3.5
+  - @nextui-org/menu@2.2.5
+  - @nextui-org/dropdown@2.3.5
+  - @nextui-org/button@2.2.5
+  - @nextui-org/ripple@2.2.4
+  - @nextui-org/card@2.2.5
+  - @nextui-org/input-otp@2.1.5
+  - @nextui-org/checkbox@2.3.5
+  - @nextui-org/switch@2.2.5
+  - @nextui-org/radio@2.3.5
+  - @nextui-org/theme@2.4.2
+  - @nextui-org/table@2.2.5
+  - @nextui-org/autocomplete@2.3.5
+  - @nextui-org/select@2.4.5
+  - @nextui-org/breadcrumbs@2.2.4
+  - @nextui-org/navbar@2.2.4
+  - @nextui-org/accordion@2.2.4
+  - @nextui-org/alert@2.2.5
+  - @nextui-org/calendar@2.2.5
+  - @nextui-org/date-picker@2.3.5
+  - @nextui-org/drawer@2.2.4
+  - @nextui-org/form@2.1.5
+  - @nextui-org/modal@2.2.4
+  - @nextui-org/popover@2.3.5
+  - @nextui-org/skeleton@2.2.3
+  - @nextui-org/snippet@2.2.6
+  - @nextui-org/tabs@2.2.4
+  - @nextui-org/tooltip@2.2.4
+  - @nextui-org/progress@2.2.4
+  - @nextui-org/badge@2.2.3
+  - @nextui-org/avatar@2.2.4
+  - @nextui-org/chip@2.2.4
+  - @nextui-org/code@2.2.4
+  - @nextui-org/date-input@2.3.5
+  - @nextui-org/divider@2.2.4
+  - @nextui-org/image@2.2.3
+  - @nextui-org/input@2.4.5
+  - @nextui-org/kbd@2.2.4
+  - @nextui-org/link@2.2.4
+  - @nextui-org/scroll-shadow@2.3.3
+  - @nextui-org/slider@2.4.4
+  - @nextui-org/spacer@2.2.4
+  - @nextui-org/spinner@2.2.4
+  - @nextui-org/user@2.2.4
+
 ## 2.6.5
 
 ### Patch Changes
diff --git a/packages/core/react/package.json b/packages/core/react/package.json
index a6b181fc49..1c34da3804 100644
--- a/packages/core/react/package.json
+++ b/packages/core/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react",
-  "version": "2.6.5",
+  "version": "2.6.6",
   "description": "🚀 Beautiful and modern React UI library.",
   "author": "Junior Garcia <jrgarciadev@gmail.com>",
   "homepage": "https://nextui.org",
diff --git a/packages/core/theme/CHANGELOG.md b/packages/core/theme/CHANGELOG.md
index e552a633ef..11e27526f6 100644
--- a/packages/core/theme/CHANGELOG.md
+++ b/packages/core/theme/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @nextui-org/theme
 
+## 2.4.2
+
+### Patch Changes
+
+- [#4311](https://github.com/nextui-org/nextui/pull/4311) [`03abf1d`](https://github.com/nextui-org/nextui/commit/03abf1daf4fe5ee74f4766cd4fd78068ac25ed78) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix #4252 #4260 interactive elements were not working properly
+
 ## 2.4.1
 
 ### Patch Changes
diff --git a/packages/core/theme/package.json b/packages/core/theme/package.json
index 1123a32e9d..094c6fe6e6 100644
--- a/packages/core/theme/package.json
+++ b/packages/core/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/theme",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "The default theme for NextUI components",
   "keywords": [
     "theme",
diff --git a/packages/core/theme/src/components/checkbox.ts b/packages/core/theme/src/components/checkbox.ts
index 3a9de2c9a0..847f640662 100644
--- a/packages/core/theme/src/components/checkbox.ts
+++ b/packages/core/theme/src/components/checkbox.ts
@@ -1,7 +1,7 @@
 import type {VariantProps} from "tailwind-variants";
 
 import {tv} from "../utils/tv";
-import {groupDataFocusVisibleClasses} from "../utils";
+import {groupDataFocusVisibleClasses, hiddenInputClasses} from "../utils";
 
 /**
  * Checkbox wrapper **Tailwind Variants** component
@@ -51,7 +51,8 @@ const checkbox = tv({
       // focus ring
       ...groupDataFocusVisibleClasses,
     ],
-    icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]:opacity-100",
+    hiddenInput: hiddenInputClasses,
+    icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]:opacity-100 pointer-events-none",
     label: "relative text-foreground select-none",
   },
   variants: {
diff --git a/packages/core/theme/src/components/radio.ts b/packages/core/theme/src/components/radio.ts
index a5161981fd..40a826e1e2 100644
--- a/packages/core/theme/src/components/radio.ts
+++ b/packages/core/theme/src/components/radio.ts
@@ -1,7 +1,7 @@
 import type {VariantProps} from "tailwind-variants";
 
 import {tv} from "../utils/tv";
-import {groupDataFocusVisibleClasses} from "../utils";
+import {groupDataFocusVisibleClasses, hiddenInputClasses} from "../utils";
 
 /**
  * Radio wrapper **Tailwind Variants** component
@@ -44,6 +44,7 @@ const radio = tv({
       // focus ring
       ...groupDataFocusVisibleClasses,
     ],
+    hiddenInput: hiddenInputClasses,
     labelWrapper: "flex flex-col ml-1",
     control: [
       "z-10",
diff --git a/packages/core/theme/src/components/toggle.ts b/packages/core/theme/src/components/toggle.ts
index a06217e8ae..2787728200 100644
--- a/packages/core/theme/src/components/toggle.ts
+++ b/packages/core/theme/src/components/toggle.ts
@@ -1,7 +1,7 @@
 import type {VariantProps} from "tailwind-variants";
 
 import {tv} from "../utils/tv";
-import {groupDataFocusVisibleClasses} from "../utils";
+import {groupDataFocusVisibleClasses, hiddenInputClasses} from "../utils";
 
 /**
  * Toggle (Switch) wrapper **Tailwind Variants** component
@@ -53,7 +53,9 @@ const toggle = tv({
       "shadow-small",
       "rounded-full",
       "origin-right",
+      "pointer-events-none",
     ],
+    hiddenInput: hiddenInputClasses,
     startContent: "z-0 absolute start-1.5 text-current",
     endContent: "z-0 absolute end-1.5 text-default-600",
     thumbIcon: "text-black",
diff --git a/packages/core/theme/src/utils/classes.ts b/packages/core/theme/src/utils/classes.ts
index 7ed19d23a1..2711a48a3b 100644
--- a/packages/core/theme/src/utils/classes.ts
+++ b/packages/core/theme/src/utils/classes.ts
@@ -67,3 +67,38 @@ export const collapseAdjacentVariantBorders = {
   warning: ["[&+.border-medium.border-warning]:ms-[calc(theme(borderWidth.medium)*-1)]"],
   danger: ["[&+.border-medium.border-danger]:ms-[calc(theme(borderWidth.medium)*-1)]"],
 };
+
+export const hiddenInputClasses = [
+  // Variables
+  "[--cursor-hit-x:8px]",
+
+  // Font styles
+  "font-inherit",
+  "text-[100%]",
+  "leading-[1.15]",
+
+  // Reset margins and padding
+  "m-0",
+  "p-0",
+
+  // Overflow and box-sizing
+  "overflow-visible",
+  "box-border",
+
+  // Positioning & Hit area
+  "absolute",
+  "top-0",
+  "start-[calc(var(--cursor-hit-x)*-1)]",
+  "w-[calc(100%+var(--cursor-hit-x)*2)]",
+  "h-full",
+
+  // Opacity and z-index
+  "opacity-[0.0001]",
+  "z-[1]",
+
+  // Cursor
+  "cursor-pointer",
+
+  // Disabled state
+  "disabled:cursor-default",
+];
diff --git a/packages/core/theme/src/utils/index.ts b/packages/core/theme/src/utils/index.ts
index 2a096ff86a..f80e69ec6b 100644
--- a/packages/core/theme/src/utils/index.ts
+++ b/packages/core/theme/src/utils/index.ts
@@ -7,6 +7,7 @@ export {
   translateCenterClasses,
   absoluteFullClasses,
   collapseAdjacentVariantBorders,
+  hiddenInputClasses,
 } from "./classes";
 export type {SlotsToClasses} from "./types";
 export {colorVariants} from "./variants";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ca6a3560d6..cc45050dad 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1581,6 +1581,9 @@ importers:
       '@react-aria/menu':
         specifier: 3.16.0
         version: 3.16.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/overlays':
+        specifier: 3.24.0
+        version: 3.24.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.26.0
         version: 3.26.0(react@18.2.0)
@@ -3318,7 +3321,7 @@ importers:
         version: 18.2.0
       tailwind-variants:
         specifier: ^0.1.20
-        version: 0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)))
+        version: 0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3)))
 
   packages/core/theme:
     dependencies:
@@ -3345,7 +3348,7 @@ importers:
         version: 2.5.4
       tailwind-variants:
         specifier: ^0.1.20
-        version: 0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)))
+        version: 0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3)))
     devDependencies:
       '@types/color':
         specifier: ^3.0.3
@@ -3358,7 +3361,7 @@ importers:
         version: 2.2.0
       tailwindcss:
         specifier: ^3.4.0
-        version: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))
+        version: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3))
 
   packages/hooks/use-aria-accordion:
     dependencies:
@@ -26223,14 +26226,6 @@ snapshots:
       postcss: 8.4.49
       ts-node: 10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)
 
-  postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)):
-    dependencies:
-      lilconfig: 3.1.2
-      yaml: 2.6.1
-    optionalDependencies:
-      postcss: 8.4.49
-      ts-node: 10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)
-
   postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3)):
     dependencies:
       lilconfig: 3.1.2
@@ -27782,10 +27777,10 @@ snapshots:
       tailwind-merge: 1.14.0
       tailwindcss: 3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3))
 
-  tailwind-variants@0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))):
+  tailwind-variants@0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3))):
     dependencies:
       tailwind-merge: 1.14.0
-      tailwindcss: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))
+      tailwindcss: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3))
 
   tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3)):
     dependencies:
@@ -27814,33 +27809,6 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 2.1.0
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.4.49
-      postcss-import: 15.1.0(postcss@8.4.49)
-      postcss-js: 4.0.1(postcss@8.4.49)
-      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))
-      postcss-nested: 6.2.0(postcss@8.4.49)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.8
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
-
   tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -27928,14 +27896,14 @@ snapshots:
       '@swc/core': 1.9.2(@swc/helpers@0.5.15)
       esbuild: 0.15.18
 
-  terser-webpack-plugin@5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1))):
+  terser-webpack-plugin@5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.2
       terser: 5.36.0
-      webpack: 5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1))
+      webpack: 5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12)
     optionalDependencies:
       '@swc/core': 1.9.2(@swc/helpers@0.5.15)
       esbuild: 0.21.5
@@ -28742,7 +28710,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1)))
+      terser-webpack-plugin: 5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12))
       watchpack: 2.4.2
       webpack-sources: 3.2.3
     optionalDependencies: