fix: remove redundant DialogTrigger from SidePeek

components/TempDesignSystem/SidePeek/index.tsx

@@ -10,7 +10,7 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
-import { CloseLargeIcon } from "@/components/Icons"
+import { CloseIcon } from "@/components/Icons"
 import { SidePeekContext } from "@/components/SidePeekProvider"
 
 import Button from "../Button"
@@ -52,48 +52,43 @@ function SidePeek({
       </div>
     )
   }
-
   return (
     <div ref={setRef}>
-      <DialogTrigger>
-        <ModalOverlay
-          UNSTABLE_portalContainer={rootDiv}
-          className={styles.overlay}
-          isOpen={
-            isOpen || (!!contentKey && contentKey === context?.activeSidePeek)
-          }
-          onOpenChange={onClose}
-          isDismissable
-        >
-          <Modal className={styles.modal}>
-            <Dialog className={styles.dialog}>
-              <aside className={styles.sidePeek}>
-                <header className={styles.header}>
-                  {title ? (
-                    <Title
-                      color="burgundy"
-                      textTransform="uppercase"
-                      level="h2"
-                      as="h3"
-                    >
-                      {title}
-                    </Title>
-                  ) : null}
-                  <Button
-                    aria-label={intl.formatMessage({ id: "Close" })}
-                    className={styles.closeButton}
-                    intent="text"
-                    onPress={onClose}
+      <ModalOverlay
+        UNSTABLE_portalContainer={rootDiv}
+        className={styles.overlay}
+        isOpen={isOpen || contentKey === context?.activeSidePeek}
+        onOpenChange={onClose}
+        isDismissable
+      >
+        <Modal className={styles.modal}>
+          <Dialog className={styles.dialog} aria-label={title}>
+            <aside className={styles.sidePeek}>
+              <header className={styles.header}>
+                {title ? (
+                  <Title
+                    color="burgundy"
+                    textTransform="uppercase"
+                    level="h2"
+                    as="h3"
                   >
-                    <CloseLargeIcon color="burgundy" />
-                  </Button>
-                </header>
-                <div className={styles.sidePeekContent}>{children}</div>
-              </aside>
-            </Dialog>
-          </Modal>
-        </ModalOverlay>
-      </DialogTrigger>
+                    {title}
+                  </Title>
+                ) : null}
+                <Button
+                  aria-label={intl.formatMessage({ id: "Close" })}
+                  className={styles.closeButton}
+                  intent="text"
+                  onPress={onClose}
+                >
+                  <CloseIcon color="burgundy" height={32} width={32} />
+                </Button>
+              </header>
+              <div className={styles.sidePeekContent}>{children}</div>
+            </aside>
+          </Dialog>
+        </Modal>
+      </ModalOverlay>
     </div>
   )
 }