Add close button to toast

Author: yunakim714

packages/template-retail-react-app/app/hooks/use-passkey-registration.js

@@ -9,6 +9,7 @@ import React from 'react'
 import {
     Box,
     Button,
+    CloseButton,
     useDisclosure,
     useToast
 } from '@salesforce/retail-react-app/app/components/shared/ui'
@@ -26,15 +27,24 @@ export const usePasskeyRegistration = () => {
             position: 'top-right',
             duration: 9000,
             isClosable: true,
-            render: () => (
+            render: ({onClose}) => (
                 <Box
                     color="white"
                     p={4}
                     bg="green.500"
                     borderRadius="md"
                     boxShadow="lg"
                     maxWidth="400px"
+                    position="relative"
                 >
+                    <CloseButton
+                        position="absolute"
+                        right={2}
+                        top={2}
+                        color="white"
+                        onClick={onClose}
+                        aria-label="Close toast"
+                    />
                     <Box mb={3} fontWeight="medium">
                         Create a passkey for a more secure and easier login
                     </Box>