From 334e6351cae2d51989eca61c4d3ff656939474c4 Mon Sep 17 00:00:00 2001
From: Madalyn <madalynbartman@gmail.com>
Date: Fri, 20 Dec 2024 20:22:13 -0700
Subject: [PATCH] Fix modal fading issue

---
 code/core/src/components/components/Modal/Modal.styled.tsx | 7 +++++--
 node_modules/.package-lock.json                            | 6 ++++++
 2 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 node_modules/.package-lock.json

diff --git a/code/core/src/components/components/Modal/Modal.styled.tsx b/code/core/src/components/components/Modal/Modal.styled.tsx
index 37bb8be84404..0fb2b6098427 100644
--- a/code/core/src/components/components/Modal/Modal.styled.tsx
+++ b/code/core/src/components/components/Modal/Modal.styled.tsx
@@ -37,6 +37,8 @@ export const Overlay = styled.div({
   height: '100%',
   zIndex: 10,
   animation: `${fadeIn} 200ms`,
+  opacity: 1,
+  transition: 'none',
 });
 
 export const Container = styled.div<{ width?: number; height?: number }>(
@@ -55,7 +57,8 @@ export const Container = styled.div<{ width?: number; height?: number }>(
     overflow: 'hidden',
     zIndex: 11,
     animation: `${zoomIn} 200ms`,
-
+    opacity: 1,
+    transition: 'none',
     '&:focus-visible': {
       outline: 'none',
     },
@@ -118,7 +121,7 @@ export const Actions = styled.div({
 export const ErrorWrapper = styled.div(({ theme }) => ({
   maxHeight: 100,
   overflow: 'auto',
-  animation: `${expand} 300ms, ${fadeIn} 300ms`,
+  animation: `${expand} 300ms`,
   backgroundColor: theme.background.critical,
   color: theme.color.lightest,
   fontSize: theme.typography.size.s2,
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
new file mode 100644
index 000000000000..b157d40c0f7a
--- /dev/null
+++ b/node_modules/.package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "@storybook/root",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}