diff --git a/package-lock.json b/package-lock.json
index 2ab5b80d8..daf68c93d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2301,6 +2301,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
diff --git a/packages/components/snackbar/src/Snackbar.stories.tsx b/packages/components/snackbar/src/Snackbar.stories.tsx
index b4f580662..9552d3e63 100644
--- a/packages/components/snackbar/src/Snackbar.stories.tsx
+++ b/packages/components/snackbar/src/Snackbar.stories.tsx
@@ -215,22 +215,40 @@ export const QAWithNewLineAction: StoryFn = _args => (
   <div>
     <Snackbar />
 
-    <Button
-      onClick={() =>
-        addSnackbar({
-          message:
-            'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora voluptatum cupiditate ut natus distinctio illum modi, id mollitia sequi dolorem nostrum autem suscipit eius sapiente vitae ipsum amet doloribus praesentium.',
-          actionLabel: 'Undo',
-          onAction: () => console.log('Undone'),
-          icon: <FavoriteFill />,
-          isClosable: true,
-          actionOnNewline: true,
-          timeout: null,
-        })
-      }
-    >
-      Display snackbar
-    </Button>
+    <div className="grid grid-cols-1 gap-xl md:grid-cols-2">
+      <Button
+        onClick={() =>
+          addSnackbar({
+            message:
+              'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora voluptatum cupiditate ut natus distinctio illum modi, id mollitia sequi dolorem nostrum autem suscipit eius sapiente vitae ipsum amet doloribus praesentium.',
+            actionLabel: 'Undo',
+            onAction: () => console.log('Undone'),
+            icon: <FavoriteFill />,
+            isClosable: true,
+            timeout: null,
+          })
+        }
+      >
+        Display snackbar
+      </Button>
+
+      <Button
+        onClick={() =>
+          addSnackbar({
+            message:
+              'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora voluptatum cupiditate ut natus distinctio illum modi, id mollitia sequi dolorem nostrum autem suscipit eius sapiente vitae ipsum amet doloribus praesentium.',
+            actionLabel: 'Undo',
+            onAction: () => console.log('Undone'),
+            icon: <FavoriteFill />,
+            isClosable: true,
+            actionOnNewline: true,
+            timeout: null,
+          })
+        }
+      >
+        Display snackbar with action on new line
+      </Button>
+    </div>
   </div>
 )
 
@@ -244,7 +262,8 @@ export const Action: StoryObj = {
           <Button
             onClick={() =>
               addSnackbar({
-                message: "You're done!",
+                message:
+                  'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora voluptatum cupiditate ut natus distinctio illum.',
                 actionLabel: 'Undo',
                 onAction: () => console.log('Undone'),
               })
@@ -256,7 +275,8 @@ export const Action: StoryObj = {
           <Button
             onClick={() =>
               addSnackbar({
-                message: "You're done! But maybe you should care about what you just did?",
+                message:
+                  'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora voluptatum cupiditate ut natus distinctio illum.',
                 actionLabel: 'Undo',
                 onAction: () => console.log('Undone'),
                 actionOnNewline: true,
diff --git a/packages/components/snackbar/src/Snackbar.tsx b/packages/components/snackbar/src/Snackbar.tsx
index d9a57f876..be42193e9 100644
--- a/packages/components/snackbar/src/Snackbar.tsx
+++ b/packages/components/snackbar/src/Snackbar.tsx
@@ -55,7 +55,13 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
     useEffect(() => {
       addProvider(ref)
 
-      return () => deleteProvider(ref)
+      return () => {
+        for (const toast of getGlobalSnackBarQueue().visibleToasts) {
+          toast.animation = undefined
+        }
+
+        deleteProvider(ref)
+      }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
diff --git a/packages/components/snackbar/src/SnackbarItem.styles.ts b/packages/components/snackbar/src/SnackbarItem.styles.ts
index b3defb057..837184b2b 100644
--- a/packages/components/snackbar/src/SnackbarItem.styles.ts
+++ b/packages/components/snackbar/src/SnackbarItem.styles.ts
@@ -87,9 +87,8 @@ export const snackbarItemVariant = cva(
           "[grid-template-areas:'icon_message_close'_'._message_.'_'action_action_action']",
         ],
         false: [
-          'grid-rows-[52px_1fr]',
           'grid-cols-[min-content_1fr_min-content_min-content]',
-          "[grid-template-areas:'icon_message_action_close'_'._message_._.']",
+          "[grid-template-areas:'icon_message_action_close']",
         ],
       },
     },
diff --git a/packages/components/snackbar/src/SnackbarItem.tsx b/packages/components/snackbar/src/SnackbarItem.tsx
index 0ad4f7a19..5bf51c8c7 100644
--- a/packages/components/snackbar/src/SnackbarItem.tsx
+++ b/packages/components/snackbar/src/SnackbarItem.tsx
@@ -91,6 +91,8 @@ export const SnackbarItem = forwardRef<HTMLDivElement, PropsWithChildren<Snackba
 
     const { state: swipeState, direction: swipeDirection } = useSwipe({
       swipeRef: ref,
+      onSwipeStart: state.pauseAll,
+      onSwipeCancel: state.resumeAll,
       onSwipeEnd: ({ direction }) => {
         ;['left', 'right'].includes(`${direction}`) && state.close(toast.key)
       },
@@ -137,8 +139,10 @@ export const SnackbarItem = forwardRef<HTMLDivElement, PropsWithChildren<Snackba
         {...toastProps}
         {...rest}
         data-animation={toast.animation}
-        data-swipe={swipeState}
-        data-swipe-direction={swipeDirection}
+        {...(!(swipeState === 'cancel' && toast.animation === 'exiting') && {
+          'data-swipe': swipeState,
+          'data-swipe-direction': swipeDirection,
+        })}
         {...(toast.animation === 'exiting' && {
           // Remove snackbar when the exiting animation completes
           onAnimationEnd: () => state.remove(toast.key),
diff --git a/packages/components/snackbar/src/useSwipe.ts b/packages/components/snackbar/src/useSwipe.ts
index 91d36299c..8aa7966d7 100644
--- a/packages/components/snackbar/src/useSwipe.ts
+++ b/packages/components/snackbar/src/useSwipe.ts
@@ -26,10 +26,8 @@ export const useSwipe = <T extends HTMLElement>({
   threshold = 10,
 }: SwipeArgs<T>): SwipeReturn => {
   const [state, setState] = useState<SwipeReturn['state']>()
-  const [direction, setDirection] = useState<SwipeReturn['direction']>()
-
-  const directionRef = useRef<SwipeReturn['direction']>(direction)
 
+  const direction = useRef<SwipeReturn['direction']>()
   const origin = useRef<Record<'x' | 'y', number> | null>(null)
   const delta = useRef<Record<'x' | 'y', number> | null>(null)
 
@@ -49,24 +47,23 @@ export const useSwipe = <T extends HTMLElement>({
     const deltaY = Math.abs(evt.clientY - origin.current.y)
 
     let moveState: SwipeReturn['state']
-    let moveDirection: SwipeReturn['direction']
 
     if (deltaX > deltaY && deltaX > threshold) {
-      moveDirection = evt.clientX > origin.current.x ? 'right' : 'left'
+      direction.current = evt.clientX > origin.current.x ? 'right' : 'left'
     } else if (deltaY > threshold) {
-      moveDirection = evt.clientY > origin.current.y ? 'down' : 'up'
+      direction.current = evt.clientY > origin.current.y ? 'down' : 'up'
     }
 
     /**
      * If no direction could be defined, then no move should be handled.
      * This is particularly true with trackpads working with MacOS/Windows.
      */
-    if (!moveDirection) return
+    if (!direction.current) return
 
     if (!delta.current) {
       moveState = 'start'
       delta.current = { x: deltaX, y: deltaY }
-      onSwipeStart?.({ state: moveState, direction: moveDirection })
+      onSwipeStart?.({ state: moveState, direction: direction.current })
     } else {
       moveState = 'move'
       delta.current = { x: deltaX, y: deltaY }
@@ -78,12 +75,10 @@ export const useSwipe = <T extends HTMLElement>({
         '--swipe-position-y',
         `${!(deltaX > deltaY) ? evt.clientY - origin.current.y : 0}px`
       )
-      onSwipeMove?.({ state: moveState, direction: moveDirection })
+      onSwipeMove?.({ state: moveState, direction: direction.current })
     }
 
-    directionRef.current = moveDirection
     setState(moveState)
-    setDirection(moveDirection)
   }
 
   const handleSwipeEnd = () => {
@@ -100,18 +95,18 @@ export const useSwipe = <T extends HTMLElement>({
       if (deltaX > deltaY) {
         if (deltaX > SWIPE_THRESHOLD) {
           endState = 'end'
-          onSwipeEnd?.({ state: endState, direction: directionRef.current })
+          onSwipeEnd?.({ state: endState, direction: direction.current })
         } else {
           endState = 'cancel'
-          onSwipeCancel?.({ state: endState, direction: directionRef.current })
+          onSwipeCancel?.({ state: endState, direction: direction.current })
         }
       } else {
         if (deltaY > SWIPE_THRESHOLD) {
           endState = 'end'
-          onSwipeEnd?.({ state: endState, direction: directionRef.current })
+          onSwipeEnd?.({ state: endState, direction: direction.current })
         } else {
           endState = 'cancel'
-          onSwipeCancel?.({ state: endState, direction: directionRef.current })
+          onSwipeCancel?.({ state: endState, direction: direction.current })
         }
       }
 
@@ -143,6 +138,6 @@ export const useSwipe = <T extends HTMLElement>({
 
   return {
     state,
-    direction,
+    direction: direction.current,
   }
 }