From dd6a62d1ae8a9a7b44088ec0ceda3d791c1edd51 Mon Sep 17 00:00:00 2001
From: KhushamBansal <kbkhushambansal@gmail.com>
Date: Tue, 23 Jun 2026 13:32:36 +0530
Subject: [PATCH 1/3] feat: Add reusable BottomSheet component

Signed-off-by: KhushamBansal <kbkhushambansal@gmail.com>
---
 src/custom/BottomSheet/BottomSheet.tsx | 82 ++++++++++++++++++++++++++
 src/custom/BottomSheet/index.ts        |  2 +
 src/custom/index.tsx                   |  1 +
 3 files changed, 85 insertions(+)
 create mode 100644 src/custom/BottomSheet/BottomSheet.tsx
 create mode 100644 src/custom/BottomSheet/index.ts

diff --git a/src/custom/BottomSheet/BottomSheet.tsx b/src/custom/BottomSheet/BottomSheet.tsx
new file mode 100644
index 000000000..5cc90108a
--- /dev/null
+++ b/src/custom/BottomSheet/BottomSheet.tsx
@@ -0,0 +1,82 @@
+import React, { useId } from 'react';
+import Slide, { SlideProps } from '@mui/material/Slide';
+import { Dialog } from '../../base/Dialog';
+import { DialogContent } from '../../base/DialogContent';
+import { IconButton } from '../../base/IconButton';
+import { Box } from '../../base/Box';
+import { Typography } from '../../base/Typography';
+import { Divider } from '../../base/Divider';
+import { CloseIcon } from '../../icons/Close';
+
+const SlideUp = React.forwardRef<unknown, SlideProps>((props, ref) => (
+  <Slide direction="up" ref={ref} {...props} />
+));
+SlideUp.displayName = 'SlideUp';
+
+export interface BottomSheetProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  /** @default '80vh' */
+  maxHeight?: string;
+}
+
+/**
+ * BottomSheet — a mobile-friendly dialog that slides up from the bottom of the screen.
+ */
+const BottomSheet = ({ open, onClose, title, children, maxHeight = '80vh' }: BottomSheetProps) => {
+  const titleId = useId();
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      fullWidth
+      aria-labelledby={title ? titleId : undefined}
+      slots={{ transition: SlideUp }}
+      sx={{
+        zIndex: 1600,
+        '& .MuiDialog-container': { alignItems: 'flex-end' },
+        '& .MuiDialog-paper': {
+          margin: 0,
+          width: '100%',
+          maxWidth: '100%',
+          borderRadius: '12px 12px 0 0',
+          maxHeight,
+        },
+      }}
+    >
+      {title && (
+        <>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              px: 2,
+              py: 1.25,
+              minHeight: 52,
+            }}
+          >
+            <Typography
+              id={titleId}
+              variant="subtitle1"
+              sx={{ fontWeight: 600, flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+            >
+              {title}
+            </Typography>
+            <IconButton aria-label="Close" onClick={onClose} size="small" edge="end">
+              <CloseIcon />
+            </IconButton>
+          </Box>
+          <Divider />
+        </>
+      )}
+      <DialogContent sx={{ px: 2, py: 1.5, overflowY: 'auto' }}>
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default BottomSheet;
diff --git a/src/custom/BottomSheet/index.ts b/src/custom/BottomSheet/index.ts
new file mode 100644
index 000000000..14de58c52
--- /dev/null
+++ b/src/custom/BottomSheet/index.ts
@@ -0,0 +1,2 @@
+export { default as BottomSheet } from './BottomSheet';
+export type { BottomSheetProps } from './BottomSheet';
diff --git a/src/custom/index.tsx b/src/custom/index.tsx
index 489f0e90c..889e6288c 100644
--- a/src/custom/index.tsx
+++ b/src/custom/index.tsx
@@ -172,3 +172,4 @@ export * from './ShareModal';
 export * from './UserSearchField';
 export * from './Workspaces';
 export * from './LiquidGlass';
+export * from './BottomSheet';

From ec8d9f8c5951bdb54a463e928d02c292a59cbd42 Mon Sep 17 00:00:00 2001
From: KhushamBansal <kbkhushambansal@gmail.com>
Date: Tue, 23 Jun 2026 13:52:38 +0530
Subject: [PATCH 2/3] Address copilot's review

Signed-off-by: KhushamBansal <kbkhushambansal@gmail.com>
---
 src/custom/BottomSheet/BottomSheet.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/custom/BottomSheet/BottomSheet.tsx b/src/custom/BottomSheet/BottomSheet.tsx
index 5cc90108a..39a5ac8e7 100644
--- a/src/custom/BottomSheet/BottomSheet.tsx
+++ b/src/custom/BottomSheet/BottomSheet.tsx
@@ -20,12 +20,20 @@ export interface BottomSheetProps {
   children: React.ReactNode;
   /** @default '80vh' */
   maxHeight?: string;
+  closeButtonAriaLabel?: string;
 }
 
 /**
  * BottomSheet — a mobile-friendly dialog that slides up from the bottom of the screen.
  */
-const BottomSheet = ({ open, onClose, title, children, maxHeight = '80vh' }: BottomSheetProps) => {
+const BottomSheet = ({
+  open,
+  onClose,
+  title,
+  children,
+  maxHeight = '80vh',
+  closeButtonAriaLabel = 'Close',
+}: BottomSheetProps) => {
   const titleId = useId();
 
   return (
@@ -65,7 +73,7 @@ const BottomSheet = ({ open, onClose, title, children, maxHeight = '80vh' }: Bot
             >
               {title}
             </Typography>
-            <IconButton aria-label="Close" onClick={onClose} size="small" edge="end">
+            <IconButton aria-label={closeButtonAriaLabel} onClick={onClose} size="small" edge="end">
               <CloseIcon />
             </IconButton>
           </Box>

From 5dab6fe1d09d21d954e56a8ed62323e86a9608d2 Mon Sep 17 00:00:00 2001
From: KhushamBansal <kbkhushambansal@gmail.com>
Date: Tue, 23 Jun 2026 14:11:28 +0530
Subject: [PATCH 3/3] fix: lint error

Signed-off-by: KhushamBansal <kbkhushambansal@gmail.com>
---
 src/custom/Modal/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/custom/Modal/index.tsx b/src/custom/Modal/index.tsx
index d33fee1bb..0c81f611a 100644
--- a/src/custom/Modal/index.tsx
+++ b/src/custom/Modal/index.tsx
@@ -1,5 +1,6 @@
 import { ButtonProps, DialogProps, styled } from '@mui/material';
 import React, { useRef, useState } from 'react';
+import { omit } from 'lodash';
 import { Box, Dialog, IconButton, Paper, Typography } from '../../base';
 import { ContainedButton, OutlinedButton, TextButton } from '../../base/Button/Button';
 import { iconLarge } from '../../constants/iconsSizes';
@@ -162,9 +163,8 @@ export const Modal: React.FC<ModalProps> = ({
    */
   const {
     fullScreen: initialFullScreenState = false,
-    fullWidth: _ignoredFullWidth,
     ...restProps
-  } = props;
+  } = omit(props, ['fullWidth']);
 
   const [fullScreen, setFullScreen] = useState(initialFullScreenState);