@purpurds/modal 8.4.0 → 8.5.1

package/dist/styles.css

@@ -1 +1 @@
-._purpur-notification_10qwf_1{display:flex;flex-direction:column;padding:var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-250);box-sizing:border-box;width:100%;background:var(--purpur-color-background-primary);border-radius:var(--purpur-border-radius-md);border:var(--purpur-border-width-sm) solid;border-left:var(--purpur-border-width-lg) solid;gap:var(--purpur-spacing-150);position:relative}._purpur-notification__top_10qwf_14{display:flex;align-items:flex-start;align-self:stretch;justify-content:space-between}._purpur-notification__header_10qwf_20{display:flex;align-items:center;gap:var(--purpur-spacing-100)}._purpur-notification__close-button_10qwf_25{position:absolute;right:calc(var(--purpur-spacing-50) + var(--purpur-spacing-25));top:calc(var(--purpur-spacing-50) + var(--purpur-spacing-25))}._purpur-notification__icon_10qwf_30{flex-shrink:0}._purpur-notification__body_10qwf_33{padding:var(--purpur-spacing-0) var(--purpur-spacing-150) var(--purpur-spacing-50) var(--purpur-spacing-0)}._purpur-notification--success_10qwf_36{border-color:var(--purpur-color-border-status-success)}._purpur-notification--success_10qwf_36 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-success-strong)}._purpur-notification--success_10qwf_36 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-success-medium)}._purpur-notification--warning_10qwf_45{border-color:var(--purpur-color-border-status-warning)}._purpur-notification--warning_10qwf_45 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-warning-strong)}._purpur-notification--warning_10qwf_45 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-warning-medium)}._purpur-notification--error_10qwf_54{border-color:var(--purpur-color-border-status-error)}._purpur-notification--error_10qwf_54 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-error-strong)}._purpur-notification--error_10qwf_54 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-error-medium)}._purpur-notification--info_10qwf_63{border-color:var(--purpur-color-border-status-info)}._purpur-notification--info_10qwf_63 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-info-strong)}._purpur-notification--info_10qwf_63 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-info-medium)}._purpur-notification--hidden_10qwf_72{display:none;visibility:hidden}._purpur-notification--has-close-button_10qwf_76 ._purpur-notification__top_10qwf_14{padding-right:var(--purpur-spacing-400)}._purpur-modal-content_4aird_1{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;overflow:auto;background-color:var(--purpur-color-background-primary);animation:_fadeIn_4aird_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-modal-content_4aird_1:focus{outline:0}@media (min-width: 600px){._purpur-modal-content_4aird_1{inset:unset;top:50%;left:50%;width:720px;max-width:calc(100% - var(--purpur-spacing-300) * 2);min-height:320px;max-height:80%;overflow:hidden;border-radius:var(--purpur-border-radius-lg);box-sizing:border-box;transform:translate(-50%,-50%);box-shadow:var(--purpur-shadow-lg)}}@media (min-width: 600px){._purpur-modal-content__overlay_4aird_30{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--purpur-color-overlay-default);animation:_fadeIn_4aird_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-modal-content_4aird_1 ._purpur-modal-content__close-button_4aird_37{position:absolute;top:var(--purpur-spacing-100);z-index:2}@media (min-width: 600px){._purpur-modal-content_4aird_1 ._purpur-modal-content__close-button_4aird_37{top:var(--purpur-spacing-150)}}._purpur-modal-content__wrapper_4aird_47{height:100%;overflow:auto}@media (min-width: 600px){._purpur-modal-content__wrapper_4aird_47{display:flex;flex-direction:column}}._purpur-modal-content__wrapper-inner_4aird_57{display:flex;flex-direction:column}._purpur-modal-content__image-wrapper_4aird_61{position:relative;flex-shrink:0;order:-1;width:100%;aspect-ratio:2/1;overflow:hidden}@media (((min-width: 600px) and (max-width: 649px) and (max-height: 720px)) or ((min-width: 650px) and (max-height: 820px))){._purpur-modal-content__image-wrapper_4aird_61{aspect-ratio:3/1}}._purpur-modal-content__image-wrapper_4aird_61 img{position:absolute;top:50%;left:50%;display:block;width:100%;height:auto;transform:translate(-50%,-50%)}._purpur-modal-content__header_4aird_84{position:sticky;top:0;flex-grow:0;padding:var(--purpur-spacing-200) calc(var(--purpur-spacing-600) + var(--purpur-spacing-150)) 0 var(--purpur-spacing-200);background:var(--purpur-color-background-primary);z-index:1}@media (min-width: 600px){._purpur-modal-content__header_4aird_84{padding:var(--purpur-spacing-250) calc(var(--purpur-spacing-800) + var(--purpur-spacing-50)) 0 var(--purpur-spacing-300)}}._purpur-modal-content__title_4aird_97,._purpur-modal-content__description_4aird_100{margin:0}._purpur-modal-content__body_4aird_103{padding:var(--purpur-spacing-200) var(--purpur-spacing-200) 0}@media (min-width: 600px){._purpur-modal-content__body_4aird_103{padding:var(--purpur-spacing-250) var(--purpur-spacing-300) 0}}._purpur-modal-content__body-inner_4aird_111{position:relative;display:flex;flex-direction:column;gap:var(--purpur-spacing-400);padding-bottom:var(--purpur-spacing-250)}@media (min-width: 600px){._purpur-modal-content__body-inner_4aird_111{padding-bottom:var(--purpur-spacing-300)}}._purpur-modal-content__actions-buttons_4aird_123{display:flex;flex-direction:column;gap:var(--purpur-spacing-200);margin-top:auto}@media (min-width: 600px){._purpur-modal-content__actions-buttons_4aird_123{flex-direction:row-reverse;flex-grow:0}._purpur-modal-content__actions-buttons_4aird_123>*{width:auto}._purpur-modal-content__actions-buttons_4aird_123>*:nth-child(3){margin-right:auto}}._purpur-modal-content__notification_4aird_141{padding-top:var(--purpur-spacing-300)}._purpur-modal-content--with-image_4aird_144:not(._purpur-modal-content--overflow_4aird_144) ._purpur-modal-content__header_4aird_84{padding-top:var(--purpur-spacing-250)}@media (min-width: 600px){._purpur-modal-content--overflow_4aird_144:not(._purpur-modal-content--with-image_4aird_144) ._purpur-modal-content__header_4aird_84{position:relative}._purpur-modal-content--overflow_4aird_144:not(._purpur-modal-content--with-image_4aird_144) ._purpur-modal-content__close-button_4aird_37{top:50%;transform:translateY(-50%)}}._purpur-modal-content--overflow_4aird_144 ._purpur-modal-content__header_4aird_84{padding-bottom:var(--purpur-spacing-200);border-bottom:1px solid var(--purpur-color-border-weak)}._purpur-modal-content--overflow_4aird_144 ._purpur-modal-content__body_4aird_103{padding-top:var(--purpur-spacing-300)}@media (min-width: 600px){._purpur-modal-content--overflow_4aird_144 ._purpur-modal-content__body_4aird_103{padding-top:var(--purpur-spacing-400)}}._purpur-modal-content--overflow_4aird_144 ._purpur-modal-content__actions_4aird_123{position:relative}._purpur-modal-content--overflow_4aird_144 ._purpur-modal-content__actions-buttons_4aird_123{position:relative;z-index:2}._purpur-modal-content--overflow_4aird_144 ._purpur-modal-content__actions-separator_4aird_175{position:absolute;bottom:calc(100% - 1px);left:0;z-index:1;width:calc(100% - var(--purpur-spacing-300));height:calc(var(--purpur-spacing-400) + var(--purpur-spacing-100));background:linear-gradient(transparent,var(--purpur-color-background-primary));pointer-events:none}._purpur-modal-content--overflow_4aird_144._purpur-modal-content--sticky-footer_4aird_185 ._purpur-modal-content__actions-buttons_4aird_123{border-top:1px solid var(--purpur-color-border-weak)}._purpur-modal-content--sticky-footer_4aird_185{justify-content:space-between}._purpur-modal-content--sticky-footer_4aird_185 ._purpur-modal-content__body-inner_4aird_111{padding-bottom:var(--purpur-spacing-300)}._purpur-modal-content--sticky-footer_4aird_185 ._purpur-modal-content__actions-buttons_4aird_123{padding:var(--purpur-spacing-200)}@media (min-width: 600px){._purpur-modal-content--sticky-footer_4aird_185 ._purpur-modal-content__actions-buttons_4aird_123{padding-left:var(--purpur-spacing-300);padding-right:var(--purpur-spacing-300)}}._purpur-modal-content--sticky-footer_4aird_185 ._purpur-modal-content__notification_4aird_141{padding:var(--purpur-spacing-100) var(--purpur-spacing-300) var(--purpur-spacing-200)}@keyframes _fadeIn_4aird_1{0%{opacity:0}to{opacity:1}}
+._purpur-notification_10qwf_1{display:flex;flex-direction:column;padding:var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-250);box-sizing:border-box;width:100%;background:var(--purpur-color-background-primary);border-radius:var(--purpur-border-radius-md);border:var(--purpur-border-width-sm) solid;border-left:var(--purpur-border-width-lg) solid;gap:var(--purpur-spacing-150);position:relative}._purpur-notification__top_10qwf_14{display:flex;align-items:flex-start;align-self:stretch;justify-content:space-between}._purpur-notification__header_10qwf_20{display:flex;align-items:center;gap:var(--purpur-spacing-100)}._purpur-notification__close-button_10qwf_25{position:absolute;right:calc(var(--purpur-spacing-50) + var(--purpur-spacing-25));top:calc(var(--purpur-spacing-50) + var(--purpur-spacing-25))}._purpur-notification__icon_10qwf_30{flex-shrink:0}._purpur-notification__body_10qwf_33{padding:var(--purpur-spacing-0) var(--purpur-spacing-150) var(--purpur-spacing-50) var(--purpur-spacing-0)}._purpur-notification--success_10qwf_36{border-color:var(--purpur-color-border-status-success)}._purpur-notification--success_10qwf_36 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-success-strong)}._purpur-notification--success_10qwf_36 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-success-medium)}._purpur-notification--warning_10qwf_45{border-color:var(--purpur-color-border-status-warning)}._purpur-notification--warning_10qwf_45 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-warning-strong)}._purpur-notification--warning_10qwf_45 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-warning-medium)}._purpur-notification--error_10qwf_54{border-color:var(--purpur-color-border-status-error)}._purpur-notification--error_10qwf_54 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-error-strong)}._purpur-notification--error_10qwf_54 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-error-medium)}._purpur-notification--info_10qwf_63{border-color:var(--purpur-color-border-status-info)}._purpur-notification--info_10qwf_63 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-info-strong)}._purpur-notification--info_10qwf_63 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-info-medium)}._purpur-notification--hidden_10qwf_72{display:none;visibility:hidden}._purpur-notification--has-close-button_10qwf_76 ._purpur-notification__top_10qwf_14{padding-right:var(--purpur-spacing-400)}._purpur-modal-content_slvdi_1{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;overflow:auto;background-color:var(--purpur-color-background-primary)}@media (prefers-reduced-motion: no-preference){._purpur-modal-content_slvdi_1[data-state=open]{opacity:0;animation:_fadeIn_slvdi_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-modal-content_slvdi_1[data-state=closed]{animation:_fadeOut_slvdi_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}}._purpur-modal-content_slvdi_1:focus{outline:0}@media (min-width: 600px){._purpur-modal-content_slvdi_1{inset:unset;top:50%;left:50%;width:720px;max-width:calc(100% - var(--purpur-spacing-300) * 2);min-height:320px;max-height:80%;overflow:hidden;border-radius:var(--purpur-border-radius-lg);box-sizing:border-box;transform:translate(-50%,-50%);box-shadow:var(--purpur-shadow-lg)}}@media (min-width: 600px) and (prefers-reduced-motion: no-preference){._purpur-modal-content_slvdi_1[data-state=open]{opacity:0;transform:translate(-50%,-47%);animation:_fadeIn_slvdi_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards,_slideUp_slvdi_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards;animation-delay:var(--purpur-motion-duration-100)}._purpur-modal-content_slvdi_1[data-state=closed]{animation:_fadeOut_slvdi_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards,_slideDown_slvdi_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}}@media (min-width: 600px){._purpur-modal-content__overlay_slvdi_49{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--purpur-color-overlay-default)}}@media (min-width: 600px) and (prefers-reduced-motion: no-preference){._purpur-modal-content__overlay_slvdi_49[data-state=open]{opacity:0;animation:_fadeIn_slvdi_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-modal-content__overlay_slvdi_49[data-state=closed]{opacity:1;animation:_fadeOut_slvdi_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}}._purpur-modal-content_slvdi_1 ._purpur-modal-content__close-button_slvdi_65{position:absolute;top:var(--purpur-spacing-100);z-index:2}@media (min-width: 600px){._purpur-modal-content_slvdi_1 ._purpur-modal-content__close-button_slvdi_65{top:var(--purpur-spacing-150)}}._purpur-modal-content__wrapper_slvdi_75{height:100%;overflow:auto}@media (min-width: 600px){._purpur-modal-content__wrapper_slvdi_75{display:flex;flex-direction:column}}._purpur-modal-content__wrapper-inner_slvdi_85{display:flex;flex-direction:column}._purpur-modal-content__image-wrapper_slvdi_89{position:relative;flex-shrink:0;order:-1;width:100%;aspect-ratio:2/1;overflow:hidden}@media (((min-width: 600px) and (max-width: 649px) and (max-height: 720px)) or ((min-width: 650px) and (max-height: 820px))){._purpur-modal-content__image-wrapper_slvdi_89{aspect-ratio:3/1}}._purpur-modal-content__image-wrapper_slvdi_89 img{position:absolute;top:50%;left:50%;display:block;width:100%;height:auto;transform:translate(-50%,-50%)}._purpur-modal-content__header_slvdi_112{position:sticky;top:0;flex-grow:0;padding:var(--purpur-spacing-200) calc(var(--purpur-spacing-600) + var(--purpur-spacing-150)) 0 var(--purpur-spacing-200);background:var(--purpur-color-background-primary);z-index:1}@media (min-width: 600px){._purpur-modal-content__header_slvdi_112{padding:var(--purpur-spacing-250) calc(var(--purpur-spacing-800) + var(--purpur-spacing-50)) 0 var(--purpur-spacing-300)}}._purpur-modal-content__title_slvdi_125,._purpur-modal-content__description_slvdi_128{margin:0}._purpur-modal-content__body_slvdi_131{padding:var(--purpur-spacing-200) var(--purpur-spacing-200) 0}@media (min-width: 600px){._purpur-modal-content__body_slvdi_131{padding:var(--purpur-spacing-250) var(--purpur-spacing-300) 0}}._purpur-modal-content__body-inner_slvdi_139{position:relative;display:flex;flex-direction:column;gap:var(--purpur-spacing-400);padding-bottom:var(--purpur-spacing-250)}@media (min-width: 600px){._purpur-modal-content__body-inner_slvdi_139{padding-bottom:var(--purpur-spacing-300)}}._purpur-modal-content__actions-buttons_slvdi_151{display:flex;flex-direction:column;gap:var(--purpur-spacing-200);margin-top:auto}@media (min-width: 600px){._purpur-modal-content__actions-buttons_slvdi_151{flex-direction:row-reverse;flex-grow:0}._purpur-modal-content__actions-buttons_slvdi_151>*{width:auto}._purpur-modal-content__actions-buttons_slvdi_151>*:nth-child(3){margin-right:auto}}._purpur-modal-content__notification_slvdi_169{padding-top:var(--purpur-spacing-300)}._purpur-modal-content--with-image_slvdi_172:not(._purpur-modal-content--overflow_slvdi_172) ._purpur-modal-content__header_slvdi_112{padding-top:var(--purpur-spacing-250)}@media (min-width: 600px){._purpur-modal-content--overflow_slvdi_172:not(._purpur-modal-content--with-image_slvdi_172) ._purpur-modal-content__header_slvdi_112{position:relative}._purpur-modal-content--overflow_slvdi_172:not(._purpur-modal-content--with-image_slvdi_172) ._purpur-modal-content__close-button_slvdi_65{top:50%;transform:translateY(-50%)}}._purpur-modal-content--overflow_slvdi_172 ._purpur-modal-content__header_slvdi_112{padding-bottom:var(--purpur-spacing-200);border-bottom:1px solid var(--purpur-color-border-weak)}._purpur-modal-content--overflow_slvdi_172 ._purpur-modal-content__body_slvdi_131{padding-top:var(--purpur-spacing-300)}@media (min-width: 600px){._purpur-modal-content--overflow_slvdi_172 ._purpur-modal-content__body_slvdi_131{padding-top:var(--purpur-spacing-400)}}._purpur-modal-content--overflow_slvdi_172 ._purpur-modal-content__actions_slvdi_151{position:relative}._purpur-modal-content--overflow_slvdi_172 ._purpur-modal-content__actions-buttons_slvdi_151{position:relative;z-index:2}._purpur-modal-content--overflow_slvdi_172 ._purpur-modal-content__actions-separator_slvdi_203{position:absolute;bottom:calc(100% - 1px);left:0;z-index:1;width:calc(100% - var(--purpur-spacing-300));height:calc(var(--purpur-spacing-400) + var(--purpur-spacing-100));background:linear-gradient(transparent,var(--purpur-color-background-primary));pointer-events:none}._purpur-modal-content--overflow_slvdi_172._purpur-modal-content--sticky-footer_slvdi_213 ._purpur-modal-content__actions-buttons_slvdi_151{border-top:1px solid var(--purpur-color-border-weak)}._purpur-modal-content--sticky-footer_slvdi_213{justify-content:space-between}._purpur-modal-content--sticky-footer_slvdi_213 ._purpur-modal-content__body-inner_slvdi_139{padding-bottom:var(--purpur-spacing-300)}._purpur-modal-content--sticky-footer_slvdi_213 ._purpur-modal-content__actions-buttons_slvdi_151{padding:var(--purpur-spacing-200)}@media (min-width: 600px){._purpur-modal-content--sticky-footer_slvdi_213 ._purpur-modal-content__actions-buttons_slvdi_151{padding-left:var(--purpur-spacing-300);padding-right:var(--purpur-spacing-300)}}._purpur-modal-content--sticky-footer_slvdi_213 ._purpur-modal-content__notification_slvdi_169{padding:var(--purpur-spacing-100) var(--purpur-spacing-300) var(--purpur-spacing-200)}@keyframes _fadeIn_slvdi_1{0%{opacity:0}to{opacity:1}}@keyframes _fadeOut_slvdi_1{0%{opacity:1}to{opacity:0}}@keyframes _slideUp_slvdi_1{0%{transform:translate(-50%,-47%)}to{transform:translate(-50%,-50%)}}@keyframes _slideDown_slvdi_1{0%{transform:translate(-50%,-50%)}to{transform:translate(-50%,-47%)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/modal",
-  "version": "8.4.0",
+  "version": "8.5.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/modal.cjs.js",
   "types": "./dist/modal.d.ts",
@@ -17,15 +17,15 @@
   "dependencies": {
     "@radix-ui/react-dialog": "~1.1.6",
     "classnames": "~2.5.0",
-    "@purpurds/common-types": "8.4.0",
-    "@purpurds/heading": "8.4.0",
-    "@purpurds/icon": "8.4.0",
-    "@purpurds/button": "8.4.0",
-    "@purpurds/notification": "8.4.0",
-    "@purpurds/paragraph": "8.4.0",
-    "@purpurds/visually-hidden": "8.4.0",
-    "@purpurds/text-spacing": "8.4.0",
-    "@purpurds/tokens": "8.4.0"
+    "@purpurds/button": "8.5.1",
+    "@purpurds/icon": "8.5.1",
+    "@purpurds/heading": "8.5.1",
+    "@purpurds/common-types": "8.5.1",
+    "@purpurds/notification": "8.5.1",
+    "@purpurds/paragraph": "8.5.1",
+    "@purpurds/text-spacing": "8.5.1",
+    "@purpurds/tokens": "8.5.1",
+    "@purpurds/visually-hidden": "8.5.1"
   },
   "devDependencies": {
     "@storybook/react-vite": "^9.0.18",

package/src/modal-content.module.scss

@@ -1,17 +1,27 @@
 @use "@purpurds/tokens/breakpoint/variables" as *;
 
-$fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);
+$animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)
+  forwards;
 
 .purpur-modal-content {
   $root: &;
-
   position: fixed;
   inset: 0;
   display: flex;
   flex-direction: column;
   overflow: auto;
   background-color: var(--purpur-color-background-primary);
-  animation: $fadeIn;
+
+  @media (prefers-reduced-motion: no-preference) {
+    &[data-state="open"] {
+      opacity: 0;
+      animation: fadeIn $animation-settings;
+    }
+
+    &[data-state="closed"] {
+      animation: fadeOut $animation-settings;
+    }
+  }
 
   &:focus {
     outline: 0;
@@ -30,6 +40,19 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
     box-sizing: border-box;
     transform: translate(-50%, -50%);
     box-shadow: var(--purpur-shadow-lg);
+
+    @media (prefers-reduced-motion: no-preference) {
+      &[data-state="open"] {
+        opacity: 0;
+        transform: translate(-50%, -47%);
+        animation: fadeIn $animation-settings, slideUp $animation-settings;
+        animation-delay: var(--purpur-motion-duration-100);
+      }
+
+      &[data-state="closed"] {
+        animation: fadeOut $animation-settings, slideDown $animation-settings;
+      }
+    }
   }
 
   &__overlay {
@@ -37,7 +60,18 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
       position: fixed;
       inset: 0;
       background: var(--purpur-color-overlay-default);
-      animation: $fadeIn;
+
+      @media (prefers-reduced-motion: no-preference) {
+        &[data-state="open"] {
+          opacity: 0;
+          animation: fadeIn $animation-settings;
+        }
+
+        &[data-state="closed"] {
+          opacity: 1;
+          animation: fadeOut $animation-settings;
+        }
+      }
     }
   }
 
@@ -244,3 +278,33 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
     opacity: 1;
   }
 }
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translate(-50%, -47%);
+  }
+
+  to {
+    transform: translate(-50%, -50%);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translate(-50%, -50%);
+  }
+
+  to {
+    transform: translate(-50%, -47%);
+  }
+}