diff --git a/packages/smarthr-ui/src/components/Dialog/ModelessDialog/ModelessDialog.tsx b/packages/smarthr-ui/src/components/Dialog/ModelessDialog/ModelessDialog.tsx
index c2029e633d..5d7a24c7ac 100644
--- a/packages/smarthr-ui/src/components/Dialog/ModelessDialog/ModelessDialog.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ModelessDialog/ModelessDialog.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import {
-  type ComponentProps,
+  type ComponentPropsWithoutRef,
   type FC,
   type KeyboardEvent,
   type MouseEvent,
@@ -31,6 +31,7 @@ import { DialogBody, type Props as DialogBodyProps } from '../DialogBody'
 import { DialogOverlap } from '../DialogOverlap'
 import { useDialogPortal } from '../useDialogPortal'
 
+import type { PropsWithHTMLAttributes } from '../../../types'
 import type { DialogSize } from '../types'
 
 type AbstractProps = PropsWithChildren<{
@@ -88,10 +89,15 @@ type AbstractProps = PropsWithChildren<{
    */
   portalParent?: HTMLElement | RefObject<HTMLElement>
 }>
-type Props = AbstractProps &
-  Omit<DialogBodyProps, keyof AbstractProps> &
-  Omit<BaseElementProps, keyof AbstractProps> &
-  Omit<VariantProps<typeof classNameGenerator>, keyof AbstractProps>
+
+type ComponentProps = PropsWithHTMLAttributes<
+  AbstractProps &
+    Omit<
+      DialogBodyProps & BaseElementProps & VariantProps<typeof classNameGenerator>,
+      keyof AbstractProps
+    >,
+  'div'
+>
 
 const classNameGenerator = tv({
   slots: {
@@ -133,7 +139,7 @@ const classNameGenerator = tv({
   },
 })
 
-export const ModelessDialog: FC<Props> = ({
+export const ModelessDialog: FC<ComponentProps> = ({
   heading,
   children,
   contentBgColor,
@@ -189,7 +195,7 @@ export const ModelessDialog: FC<Props> = ({
     y: 0,
   })
   const [draggableBounds, setDraggableBounds] =
-    useState<ComponentProps<typeof Draggable>['bounds']>()
+    useState<ComponentPropsWithoutRef<typeof Draggable>['bounds']>()
   const debounceLiveRegionText = useMemo(() => debounce(setDebouncedLiveRegionText, 600), [])
 
   useEffect(() => {
diff --git a/packages/smarthr-ui/src/types/ComponentTypes.ts b/packages/smarthr-ui/src/types/ComponentTypes.ts
index 11f8eaaf71..e16ba8ddcd 100644
--- a/packages/smarthr-ui/src/types/ComponentTypes.ts
+++ b/packages/smarthr-ui/src/types/ComponentTypes.ts
@@ -1,5 +1,8 @@
-import type { ComponentPropsWithRef, ElementType } from 'react'
+import type { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType } from 'react'
 
 export type ElementRef<T extends ElementType> = ComponentPropsWithRef<T>['ref']
 
 export type ElementRefProps<T extends ElementType> = { ref?: ElementRef<T> }
+
+export type PropsWithHTMLAttributes<Props, E extends ElementType> = Props &
+  Omit<ComponentPropsWithoutRef<E>, keyof Props>
diff --git a/packages/smarthr-ui/src/types/index.ts b/packages/smarthr-ui/src/types/index.ts
index 1a729882b3..c181b1f22d 100644
--- a/packages/smarthr-ui/src/types/index.ts
+++ b/packages/smarthr-ui/src/types/index.ts
@@ -1,3 +1,3 @@
 export type { Gap, SeparateGap } from './Gap'
-export type { ElementRef, ElementRefProps } from './ComponentTypes'
+export type { ElementRef, ElementRefProps, PropsWithHTMLAttributes } from './ComponentTypes'
 export type { ResponseStatus, ResponseStatusWithoutProcessing } from '../hooks/useResponseStatus'