@ceed/ads 1.35.1 → 1.36.0

package/dist/components/navigation/InsetDrawer.md

@@ -7,133 +7,190 @@ InsetDrawer is a slide-out panel that appears from any edge of the screen, provi
 It is commonly used for mobile navigation menus, filter panels, configuration sidebars, and detail views. The component supports four anchor positions (left, right, top, bottom) and three size presets, making it adaptable to a wide range of layout requirements.
 
 ```tsx
-<Box sx={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 2
-}}>
-<Button variant="outlined" color="neutral" startDecorator={<FilterListIcon />} onClick={() => setOpen(true)}>
-  Open Drawer
-</Button>
-
-<InsetDrawer {...args} open={open} onClose={() => setOpen(false)}>
-  <Sheet sx={{
-    borderRadius: 'md',
-    p: 2,
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 2,
-    height: '100%',
-    overflow: 'auto'
-  }}>
-  <DialogTitle>Filters</DialogTitle>
-  <ModalClose />
-  <Divider sx={{
-    mt: 'auto'
-  }} />
-  <DialogContent>
-    <FormControl>
-      <FormLabel sx={{
-        typography: 'title-md',
-        fontWeight: 'bold'
-      }}>Property type</FormLabel>
-      <RadioGroup>
-        <Box sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
-          gap: 1.5
-        }}>
-        {[{
-          name: 'House',
-          icon: <HomeRoundedIcon />
-        }, {
-          name: 'Apartment',
-          icon: <ApartmentRoundedIcon />
-        }, {
-          name: 'Guesthouse',
-          icon: <MeetingRoomRoundedIcon />
-        }, {
-          name: 'Hotel',
-          icon: <HotelRoundedIcon />
-        }].map(item => <Card key={item.name} sx={{
-          boxShadow: 'none',
-          '&:hover': {
-            bgcolor: 'background.level1'
-          }
-        }}>
-        <CardContent>
-          {item.icon}
-          <Typography level="title-md">{item.name}</Typography>
-        </CardContent>
-        <Radio disableIcon overlay variant="outlined" color="neutral" value={item.name} sx={{
-          mt: -2
-        }} slotProps={{
-          action: {
-            sx: {
-              '&:hover': {
-                bgcolor: 'transparent'
-              }
-            }
-          }
-        }} />
-      </Card>)}
-    </Box>
-  </RadioGroup>
-</FormControl>
-
-<Typography level="title-md" fontWeight="bold" sx={{
-  mt: 2
-}}>
-Booking options
-</Typography>
-<FormControl orientation="horizontal">
-  <Box sx={{
-    flex: 1,
-    pr: 1
-  }}>
-  <FormLabel sx={{
-    typography: 'title-sm'
-  }}>Instant booking</FormLabel>
-  <FormHelperText sx={{
-    typography: 'body-sm'
-  }}>
-  Listings that you can book without waiting for host approval.
-</FormHelperText>
-</Box>
-<Switch />
-</FormControl>
-
-<FormControl orientation="horizontal">
-  <Box sx={{
-    flex: 1,
-    mt: 1,
-    mr: 1
-  }}>
-  <FormLabel sx={{
-    typography: 'title-sm'
-  }}>Self check-in</FormLabel>
-  <FormHelperText sx={{
-    typography: 'body-sm'
-  }}>
-  Easy access to the property when you arrive.
-</FormHelperText>
-</Box>
-<Switch />
-</FormControl>
-</DialogContent>
-
-<Divider sx={{
-  mt: 'auto'
-}} />
-<Stack direction="row" justifyContent="space-between" useFlexGap spacing={1}>
-  <Button variant="outlined" color="neutral">
-    Clear
-  </Button>
-  <Button onClick={() => setOpen(false)}>Show 165 properties</Button>
-</Stack>
-</Sheet>
-</InsetDrawer>
-</Box>
+<Box
+    sx={{
+      display: "flex",
+      flexDirection: "column",
+      gap: 2
+    }}
+  >
+    <Button
+      variant="outlined"
+      color="neutral"
+      startDecorator={<FilterListIcon />}
+      onClick={() => setOpen(true)}
+    >
+      Open Drawer
+    </Button>
+
+    <InsetDrawer {...args} open={open} onClose={() => setOpen(false)}>
+      <Sheet
+        sx={{
+          borderRadius: "md",
+          p: 2,
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          height: "100%",
+          overflow: "auto"
+        }}
+      >
+        <DialogTitle>Filters</DialogTitle>
+        <ModalClose />
+        <Divider
+          sx={{
+            mt: "auto"
+          }}
+        />
+        <DialogContent>
+          <FormControl>
+            <FormLabel
+              sx={{
+                typography: "title-md",
+                fontWeight: "bold"
+              }}
+            >
+              Property type
+            </FormLabel>
+            <RadioGroup>
+              <Box
+                sx={{
+                  display: "grid",
+                  gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))",
+                  gap: 1.5
+                }}
+              >
+                {[
+                  {
+                    name: "House",
+                    icon: <HomeRoundedIcon />
+                  },
+                  {
+                    name: "Apartment",
+                    icon: <ApartmentRoundedIcon />
+                  },
+                  {
+                    name: "Guesthouse",
+                    icon: <MeetingRoomRoundedIcon />
+                  },
+                  {
+                    name: "Hotel",
+                    icon: <HotelRoundedIcon />
+                  }
+                ].map((item) => (
+                  <Card
+                    key={item.name}
+                    sx={{
+                      boxShadow: "none",
+                      "&:hover": {
+                        bgcolor: "background.level1"
+                      }
+                    }}
+                  >
+                    <CardContent>
+                      {item.icon}
+                      <Typography level="title-md">{item.name}</Typography>
+                    </CardContent>
+                    <Radio
+                      disableIcon
+                      overlay
+                      variant="outlined"
+                      color="neutral"
+                      value={item.name}
+                      sx={{
+                        mt: -2
+                      }}
+                      slotProps={{
+                        action: {
+                          sx: {
+                            "&:hover": {
+                              bgcolor: "transparent"
+                            }
+                          }
+                        }
+                      }}
+                    />
+                  </Card>
+                ))}
+              </Box>
+            </RadioGroup>
+          </FormControl>
+
+          <Typography
+            level="title-md"
+            fontWeight="bold"
+            sx={{
+              mt: 2
+            }}
+          >
+            Booking options
+          </Typography>
+          <FormControl orientation="horizontal">
+            <Box
+              sx={{
+                flex: 1,
+                pr: 1
+              }}
+            >
+              <FormLabel
+                sx={{
+                  typography: "title-sm"
+                }}
+              >
+                Instant booking
+              </FormLabel>
+              <FormHelperText
+                sx={{
+                  typography: "body-sm"
+                }}
+              >
+                Listings that you can book without waiting for host approval.
+              </FormHelperText>
+            </Box>
+            <Switch />
+          </FormControl>
+
+          <FormControl orientation="horizontal">
+            <Box
+              sx={{
+                flex: 1,
+                mt: 1,
+                mr: 1
+              }}
+            >
+              <FormLabel
+                sx={{
+                  typography: "title-sm"
+                }}
+              >
+                Self check-in
+              </FormLabel>
+              <FormHelperText
+                sx={{
+                  typography: "body-sm"
+                }}
+              >
+                Easy access to the property when you arrive.
+              </FormHelperText>
+            </Box>
+            <Switch />
+          </FormControl>
+        </DialogContent>
+
+        <Divider
+          sx={{
+            mt: "auto"
+          }}
+        />
+        <Stack direction="row" justifyContent="space-between" useFlexGap spacing={1}>
+          <Button variant="outlined" color="neutral">
+            Clear
+          </Button>
+          <Button onClick={() => setOpen(false)}>Show 165 properties</Button>
+        </Stack>
+      </Sheet>
+    </InsetDrawer>
+  </Box>
 ```
 
 | Field                        | Description | Default |
@@ -155,9 +212,7 @@ function FilterDrawer() {
         <Sheet sx={{ p: 2, height: '100%' }}>
           <DialogTitle>Filters</DialogTitle>
           <ModalClose />
-          <DialogContent>
-            {/* Filter content */}
-          </DialogContent>
+          <DialogContent>{/* Filter content */}</DialogContent>
         </Sheet>
       </InsetDrawer>
     </>
@@ -170,48 +225,63 @@ function FilterDrawer() {
 InsetDrawer supports four anchor positions. Use `left` for navigation, `right` for details or filters, `top` for search bars, and `bottom` for mobile action sheets.
 
 ```tsx
-<Box sx={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 2
-}}>
-<Stack direction="row" spacing={2}>
-  <Button variant="outlined" onClick={() => setAnchor('left')}>
-    Left
-  </Button>
-  <Button variant="outlined" onClick={() => setAnchor('right')}>
-    Right
-  </Button>
-  <Button variant="outlined" onClick={() => setAnchor('top')}>
-    Top
-  </Button>
-  <Button variant="outlined" onClick={() => setAnchor('bottom')}>
-    Bottom
-  </Button>
-</Stack>
-
-{(['left', 'right', 'top', 'bottom'] as const).map(anchorValue => <InsetDrawer key={anchorValue} anchor={anchorValue} open={anchor === anchorValue} onClose={() => setAnchor(null)}>
-<Sheet sx={{
-  borderRadius: 'md',
-  p: 2,
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 2,
-  height: '100%'
-}}>
-<DialogTitle>Drawer from {anchorValue}</DialogTitle>
-<ModalClose />
-<Divider />
-<DialogContent>
-  <Typography>This drawer slides in from the {anchorValue} side of the screen.</Typography>
-</DialogContent>
-<Divider sx={{
-  mt: 'auto'
-}} />
-<Button onClick={() => setAnchor(null)}>Close</Button>
-</Sheet>
-</InsetDrawer>)}
-</Box>
+<Box
+    sx={{
+      display: "flex",
+      flexDirection: "column",
+      gap: 2
+    }}
+  >
+    <Stack direction="row" spacing={2}>
+      <Button variant="outlined" onClick={() => setAnchor("left")}>
+        Left
+      </Button>
+      <Button variant="outlined" onClick={() => setAnchor("right")}>
+        Right
+      </Button>
+      <Button variant="outlined" onClick={() => setAnchor("top")}>
+        Top
+      </Button>
+      <Button variant="outlined" onClick={() => setAnchor("bottom")}>
+        Bottom
+      </Button>
+    </Stack>
+
+    {(["left", "right", "top", "bottom"] as const).map((anchorValue) => (
+      <InsetDrawer
+        key={anchorValue}
+        anchor={anchorValue}
+        open={anchor === anchorValue}
+        onClose={() => setAnchor(null)}
+      >
+        <Sheet
+          sx={{
+            borderRadius: "md",
+            p: 2,
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+            height: "100%"
+          }}
+        >
+          <DialogTitle>Drawer from {anchorValue}</DialogTitle>
+          <ModalClose />
+          <Divider />
+          <DialogContent>
+            <Typography>
+              This drawer slides in from the {anchorValue} side of the screen.
+            </Typography>
+          </DialogContent>
+          <Divider
+            sx={{
+              mt: "auto"
+            }}
+          />
+          <Button onClick={() => setAnchor(null)}>Close</Button>
+        </Sheet>
+      </InsetDrawer>
+    ))}
+  </Box>
 ```
 
 ## Sizes
@@ -219,45 +289,58 @@ InsetDrawer supports four anchor positions. Use `left` for navigation, `right` f
 Three size presets are available: `sm`, `md`, and `lg`. The size controls width for left/right anchors and height for top/bottom anchors.
 
 ```tsx
-<Box sx={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 2
-}}>
-<Stack direction="row" spacing={2}>
-  <Button variant="outlined" size="sm" onClick={() => setSize('sm')}>
-    Small
-  </Button>
-  <Button variant="outlined" onClick={() => setSize('md')}>
-    Medium
-  </Button>
-  <Button variant="outlined" size="lg" onClick={() => setSize('lg')}>
-    Large
-  </Button>
-</Stack>
-
-{(['sm', 'md', 'lg'] as const).map(sizeValue => <InsetDrawer key={sizeValue} size={sizeValue} open={size === sizeValue} onClose={() => setSize(null)}>
-<Sheet sx={{
-  borderRadius: 'md',
-  p: 2,
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 2,
-  height: '100%'
-}}>
-<DialogTitle>Size: {sizeValue}</DialogTitle>
-<ModalClose />
-<Divider />
-<DialogContent>
-  <Typography>This is a {sizeValue} sized drawer.</Typography>
-</DialogContent>
-<Divider sx={{
-  mt: 'auto'
-}} />
-<Button onClick={() => setSize(null)}>Close</Button>
-</Sheet>
-</InsetDrawer>)}
-</Box>
+<Box
+    sx={{
+      display: "flex",
+      flexDirection: "column",
+      gap: 2
+    }}
+  >
+    <Stack direction="row" spacing={2}>
+      <Button variant="outlined" size="sm" onClick={() => setSize("sm")}>
+        Small
+      </Button>
+      <Button variant="outlined" onClick={() => setSize("md")}>
+        Medium
+      </Button>
+      <Button variant="outlined" size="lg" onClick={() => setSize("lg")}>
+        Large
+      </Button>
+    </Stack>
+
+    {(["sm", "md", "lg"] as const).map((sizeValue) => (
+      <InsetDrawer
+        key={sizeValue}
+        size={sizeValue}
+        open={size === sizeValue}
+        onClose={() => setSize(null)}
+      >
+        <Sheet
+          sx={{
+            borderRadius: "md",
+            p: 2,
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+            height: "100%"
+          }}
+        >
+          <DialogTitle>Size: {sizeValue}</DialogTitle>
+          <ModalClose />
+          <Divider />
+          <DialogContent>
+            <Typography>This is a {sizeValue} sized drawer.</Typography>
+          </DialogContent>
+          <Divider
+            sx={{
+              mt: "auto"
+            }}
+          />
+          <Button onClick={() => setSize(null)}>Close</Button>
+        </Sheet>
+      </InsetDrawer>
+    ))}
+  </Box>
 ```
 
 ## Navigation Menu
@@ -266,32 +349,50 @@ A typical mobile navigation menu pattern using InsetDrawer anchored to the left
 
 ```tsx
 <Box>
-  <IconButton variant="outlined" color="neutral" onClick={() => setOpen(true)} aria-label="Open navigation menu">
-    <MenuIcon />
-  </IconButton>
-
-  <InsetDrawer open={open} onClose={() => setOpen(false)} anchor="left" size="sm">
-    <Sheet sx={{
-      p: 2,
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%'
-    }}>
-    <DialogTitle>Navigation</DialogTitle>
-    <ModalClose />
-    <Divider sx={{
-      my: 2
-    }} />
-    <Stack spacing={1}>
-      {menuItems.map(item => <Button key={item.label} variant="plain" color="neutral" startDecorator={item.icon} sx={{
-        justifyContent: 'flex-start'
-      }} onClick={() => setOpen(false)}>
-      {item.label}
-    </Button>)}
-  </Stack>
-</Sheet>
-</InsetDrawer>
-</Box>
+    <IconButton
+      variant="outlined"
+      color="neutral"
+      onClick={() => setOpen(true)}
+      aria-label="Open navigation menu"
+    >
+      <MenuIcon />
+    </IconButton>
+
+    <InsetDrawer open={open} onClose={() => setOpen(false)} anchor="left" size="sm">
+      <Sheet
+        sx={{
+          p: 2,
+          display: "flex",
+          flexDirection: "column",
+          height: "100%"
+        }}
+      >
+        <DialogTitle>Navigation</DialogTitle>
+        <ModalClose />
+        <Divider
+          sx={{
+            my: 2
+          }}
+        />
+        <Stack spacing={1}>
+          {menuItems.map((item) => (
+            <Button
+              key={item.label}
+              variant="plain"
+              color="neutral"
+              startDecorator={item.icon}
+              sx={{
+                justifyContent: "flex-start"
+              }}
+              onClick={() => setOpen(false)}
+            >
+              {item.label}
+            </Button>
+          ))}
+        </Stack>
+      </Sheet>
+    </InsetDrawer>
+  </Box>
 ```
 
 ## Filter Panel
@@ -300,139 +401,213 @@ A filter panel that slides in from the right, containing form controls for refin
 
 ```tsx
 <Box>
-  <Button variant="outlined" color="neutral" startDecorator={<FilterListIcon />} onClick={() => setOpen(true)}>
-    Filters
-  </Button>
-
-  <InsetDrawer open={open} onClose={() => setOpen(false)} anchor="right">
-    <Sheet sx={{
-      borderRadius: 'md',
-      p: 2,
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 2,
-      height: '100%',
-      overflow: 'auto'
-    }}>
-    <DialogTitle>Filters</DialogTitle>
-    <ModalClose />
-    <Divider />
-    <DialogContent>
-      <FormControl>
-        <FormLabel sx={{
-          typography: 'title-md',
-          fontWeight: 'bold'
-        }}>Property type</FormLabel>
-        <RadioGroup value={filters.propertyType} onChange={e => setFilters(prev => ({
-          ...prev,
-          propertyType: e.target.value
-        }))}>
-        <Box sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
-          gap: 1.5
-        }}>
-        {[{
-          name: 'House',
-          icon: <HomeRoundedIcon />
-        }, {
-          name: 'Apartment',
-          icon: <ApartmentRoundedIcon />
-        }, {
-          name: 'Guesthouse',
-          icon: <MeetingRoomRoundedIcon />
-        }, {
-          name: 'Hotel',
-          icon: <HotelRoundedIcon />
-        }].map(item => <Card key={item.name} sx={{
-          boxShadow: 'none',
-          '&:hover': {
-            bgcolor: 'background.level1'
-          }
-        }}>
-        <CardContent>
-          {item.icon}
-          <Typography level="title-md">{item.name}</Typography>
-        </CardContent>
-        <Radio disableIcon overlay variant="outlined" color="neutral" value={item.name} sx={{
-          mt: -2
-        }} slotProps={{
-          action: {
-            sx: {
-              '&:hover': {
-                bgcolor: 'transparent'
+    <Button
+      variant="outlined"
+      color="neutral"
+      startDecorator={<FilterListIcon />}
+      onClick={() => setOpen(true)}
+    >
+      Filters
+    </Button>
+
+    <InsetDrawer open={open} onClose={() => setOpen(false)} anchor="right">
+      <Sheet
+        sx={{
+          borderRadius: "md",
+          p: 2,
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          height: "100%",
+          overflow: "auto"
+        }}
+      >
+        <DialogTitle>Filters</DialogTitle>
+        <ModalClose />
+        <Divider />
+        <DialogContent>
+          <FormControl>
+            <FormLabel
+              sx={{
+                typography: "title-md",
+                fontWeight: "bold"
+              }}
+            >
+              Property type
+            </FormLabel>
+            <RadioGroup
+              value={filters.propertyType}
+              onChange={(e) =>
+                setFilters((prev) => ({
+                  ...prev,
+                  propertyType: e.target.value
+                }))
               }
+            >
+              <Box
+                sx={{
+                  display: "grid",
+                  gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))",
+                  gap: 1.5
+                }}
+              >
+                {[
+                  {
+                    name: "House",
+                    icon: <HomeRoundedIcon />
+                  },
+                  {
+                    name: "Apartment",
+                    icon: <ApartmentRoundedIcon />
+                  },
+                  {
+                    name: "Guesthouse",
+                    icon: <MeetingRoomRoundedIcon />
+                  },
+                  {
+                    name: "Hotel",
+                    icon: <HotelRoundedIcon />
+                  }
+                ].map((item) => (
+                  <Card
+                    key={item.name}
+                    sx={{
+                      boxShadow: "none",
+                      "&:hover": {
+                        bgcolor: "background.level1"
+                      }
+                    }}
+                  >
+                    <CardContent>
+                      {item.icon}
+                      <Typography level="title-md">{item.name}</Typography>
+                    </CardContent>
+                    <Radio
+                      disableIcon
+                      overlay
+                      variant="outlined"
+                      color="neutral"
+                      value={item.name}
+                      sx={{
+                        mt: -2
+                      }}
+                      slotProps={{
+                        action: {
+                          sx: {
+                            "&:hover": {
+                              bgcolor: "transparent"
+                            }
+                          }
+                        }
+                      }}
+                    />
+                  </Card>
+                ))}
+              </Box>
+            </RadioGroup>
+          </FormControl>
+
+          <Typography
+            level="title-md"
+            fontWeight="bold"
+            sx={{
+              mt: 2
+            }}
+          >
+            Booking options
+          </Typography>
+          <FormControl orientation="horizontal">
+            <Box
+              sx={{
+                flex: 1,
+                pr: 1
+              }}
+            >
+              <FormLabel
+                sx={{
+                  typography: "title-sm"
+                }}
+              >
+                Instant booking
+              </FormLabel>
+              <FormHelperText
+                sx={{
+                  typography: "body-sm"
+                }}
+              >
+                Listings that you can book without waiting for host approval.
+              </FormHelperText>
+            </Box>
+            <Switch
+              checked={filters.instantBooking}
+              onChange={(e) =>
+                setFilters((prev) => ({
+                  ...prev,
+                  instantBooking: e.target.checked
+                }))
+              }
+            />
+          </FormControl>
+
+          <FormControl orientation="horizontal">
+            <Box
+              sx={{
+                flex: 1,
+                mt: 1,
+                mr: 1
+              }}
+            >
+              <FormLabel
+                sx={{
+                  typography: "title-sm"
+                }}
+              >
+                Self check-in
+              </FormLabel>
+              <FormHelperText
+                sx={{
+                  typography: "body-sm"
+                }}
+              >
+                Easy access to the property when you arrive.
+              </FormHelperText>
+            </Box>
+            <Switch
+              checked={filters.selfCheckIn}
+              onChange={(e) =>
+                setFilters((prev) => ({
+                  ...prev,
+                  selfCheckIn: e.target.checked
+                }))
+              }
+            />
+          </FormControl>
+        </DialogContent>
+
+        <Divider
+          sx={{
+            mt: "auto"
+          }}
+        />
+        <Stack direction="row" justifyContent="space-between" useFlexGap spacing={1}>
+          <Button
+            variant="outlined"
+            color="neutral"
+            onClick={() =>
+              setFilters({
+                propertyType: "",
+                instantBooking: false,
+                selfCheckIn: false
+              })
             }
-          }
-        }} />
-      </Card>)}
-    </Box>
-  </RadioGroup>
-</FormControl>
-
-<Typography level="title-md" fontWeight="bold" sx={{
-  mt: 2
-}}>
-Booking options
-</Typography>
-<FormControl orientation="horizontal">
-  <Box sx={{
-    flex: 1,
-    pr: 1
-  }}>
-  <FormLabel sx={{
-    typography: 'title-sm'
-  }}>Instant booking</FormLabel>
-  <FormHelperText sx={{
-    typography: 'body-sm'
-  }}>
-  Listings that you can book without waiting for host approval.
-</FormHelperText>
-</Box>
-<Switch checked={filters.instantBooking} onChange={e => setFilters(prev => ({
-  ...prev,
-  instantBooking: e.target.checked
-}))} />
-</FormControl>
-
-<FormControl orientation="horizontal">
-  <Box sx={{
-    flex: 1,
-    mt: 1,
-    mr: 1
-  }}>
-  <FormLabel sx={{
-    typography: 'title-sm'
-  }}>Self check-in</FormLabel>
-  <FormHelperText sx={{
-    typography: 'body-sm'
-  }}>
-  Easy access to the property when you arrive.
-</FormHelperText>
-</Box>
-<Switch checked={filters.selfCheckIn} onChange={e => setFilters(prev => ({
-  ...prev,
-  selfCheckIn: e.target.checked
-}))} />
-</FormControl>
-</DialogContent>
-
-<Divider sx={{
-  mt: 'auto'
-}} />
-<Stack direction="row" justifyContent="space-between" useFlexGap spacing={1}>
-  <Button variant="outlined" color="neutral" onClick={() => setFilters({
-    propertyType: '',
-    instantBooking: false,
-    selfCheckIn: false
-  })}>
-  Clear
-</Button>
-<Button onClick={() => setOpen(false)}>Show 165 properties</Button>
-</Stack>
-</Sheet>
-</InsetDrawer>
-</Box>
+          >
+            Clear
+          </Button>
+          <Button onClick={() => setOpen(false)}>Show 165 properties</Button>
+        </Stack>
+      </Sheet>
+    </InsetDrawer>
+  </Box>
 ```
 
 ## Settings Drawer
@@ -460,9 +635,7 @@ function SettingsDrawer({ open, onClose }) {
               </Box>
               <Switch
                 checked={settings.notifications}
-                onChange={(e) =>
-                  setSettings({ ...settings, notifications: e.target.checked })
-                }
+                onChange={(e) => setSettings({ ...settings, notifications: e.target.checked })}
               />
             </FormControl>
             <FormControl orientation="horizontal">
@@ -472,9 +645,7 @@ function SettingsDrawer({ open, onClose }) {
               </Box>
               <Switch
                 checked={settings.darkMode}
-                onChange={(e) =>
-                  setSettings({ ...settings, darkMode: e.target.checked })
-                }
+                onChange={(e) => setSettings({ ...settings, darkMode: e.target.checked })}
               />
             </FormControl>
           </Stack>
@@ -531,7 +702,10 @@ function ActionSheet({ open, onClose, onAction }) {
             <ListItem key={action.id}>
               <ListItemButton
                 color={action.color}
-                onClick={() => { onAction(action.id); onClose(); }}
+                onClick={() => {
+                  onAction(action.id);
+                  onClose();
+                }}
               >
                 <ListItemDecorator>{action.icon}</ListItemDecorator>
                 {action.label}
@@ -593,9 +767,7 @@ function ActionSheet({ open, onClose, onAction }) {
     <DialogTitle>Title</DialogTitle>
     <ModalClose />
   </Box>
-  <DialogContent sx={{ flex: 1, overflow: 'auto', p: 2 }}>
-    {/* Scrollable content */}
-  </DialogContent>
+  <DialogContent sx={{ flex: 1, overflow: 'auto', p: 2 }}>{/* Scrollable content */}</DialogContent>
   <Box sx={{ p: 2, borderTop: '1px solid', borderColor: 'divider' }}>
     <Button>Save</Button>
   </Box>