@purpurds/drawer 8.3.1 → 8.4.0

package/dist/styles.css

@@ -1 +1 @@
-._purpur-drawer-content_khfax_1{bottom:0;height:90vh;height:90dvh;max-width:100%;position:absolute;width:100%}@media (prefers-reduced-motion: no-preference){._purpur-drawer-content_khfax_1{animation:_drawerSmallScreenAnimation_khfax_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-drawer-content--left_khfax_15{left:0}._purpur-drawer-content--right_khfax_18{right:0}._purpur-drawer-content--fit-to-content_khfax_21{display:flex;flex-direction:column;height:auto;max-height:90vh;max-height:90dvh}@media screen and (min-width: 600px){._purpur-drawer-content_khfax_1{height:100vh;height:100dvh;max-width:calc(30rem * var(--purpur-rescale));top:0}._purpur-drawer-content--fit-to-content_khfax_21{max-height:100vh;max-height:100dvh}}@media screen and (min-width: 600px) and (prefers-reduced-motion: no-preference){._purpur-drawer-content--right_khfax_18{animation:_drawerLargeScreenAnimationRight_khfax_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content--left_khfax_15{animation:_drawerLargeScreenAnimationLeft_khfax_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-drawer-content_khfax_1:focus{outline:none}._purpur-drawer-content__content-container_khfax_51{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-content__drawer-frame_khfax_56[data-swipe=cancel]{transform:translateY(0);transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content__drawer-frame_khfax_56[data-swipe=move]{transform:translateY(var(--purpur-drawer-swipe-move-y))}._purpur-drawer-content__drawer-frame_khfax_56[data-swipe=end]{animation:_slideDown_khfax_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-drawer-content__description_khfax_66{color:var(--purpur-color-text-default);display:block;font-family:var(--purpur-typography-family-default);font-size:var(--purpur-typography-scale-100);font-weight:var(--purpur-typography-weight-normal);-webkit-hyphens:none;hyphens:none;line-height:var(--purpur-typography-line-height-loose);margin:0}._purpur-drawer-overlay_khfax_77{background:var(--purpur-color-overlay-default);top:0;right:0;bottom:0;left:0;position:fixed}@media (prefers-reduced-motion: no-preference){._purpur-drawer-overlay_khfax_77{animation:_overlayAnimation_khfax_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);transition:opacity var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}@keyframes _slideDown_khfax_1{0%{transform:translateY(var(--purpur-drawer-swipe-end-y))}to{transform:translateY(100%)}}@keyframes _overlayAnimation_khfax_1{0%{opacity:0}to{opacity:1}}@keyframes _drawerLargeScreenAnimationRight_khfax_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _drawerLargeScreenAnimationLeft_khfax_1{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes _drawerSmallScreenAnimation_khfax_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._purpur-drawer-container--header_1u45h_1{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm) var(--purpur-spacing-150);border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}@media screen and (min-width: 600px){._purpur-drawer-container--header_1u45h_1{padding:var(--purpur-spacing-300) var(--purpur-spacing-300) var(--purpur-spacing-200)}}._purpur-drawer-container--body_1u45h_10{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm) 0}@media screen and (min-width: 600px){._purpur-drawer-container--body_1u45h_10{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) 0}}._purpur-drawer-container--body_1u45h_10._purpur-drawer-container--sticky_1u45h_18{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm)}@media screen and (min-width: 600px){._purpur-drawer-container--body_1u45h_10._purpur-drawer-container--sticky_1u45h_18{padding:var(--purpur-spacing-400) var(--purpur-spacing-300)}}._purpur-drawer-container--footer_1u45h_26{padding:0 var(--purpur-spacing-page-padding-sm) var(--purpur-spacing-200)}@media screen and (min-width: 600px){._purpur-drawer-container--footer_1u45h_26{padding:0 var(--purpur-spacing-300) var(--purpur-spacing-200)}}._purpur-drawer-container--footer_1u45h_26._purpur-drawer-container--sticky_1u45h_18{border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);padding:var(--purpur-spacing-200) var(--purpur-spacing-page-padding-sm)}@media screen and (min-width: 600px){._purpur-drawer-container--footer_1u45h_26._purpur-drawer-container--sticky_1u45h_18{padding:var(--purpur-spacing-200) var(--purpur-spacing-300)}}._purpur-drawer-frame_1s8hq_1{background-color:var(--purpur-color-background-primary);border-top-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:var(--purpur-border-radius-lg);box-shadow:var(--purpur-shadow-lg);display:flex;flex-direction:column;height:100%;position:relative}@media screen and (min-width: 600px){._purpur-drawer-frame--left_1s8hq_12{border-bottom-right-radius:var(--purpur-border-radius-lg);border-top-left-radius:0}._purpur-drawer-frame--right_1s8hq_16{border-bottom-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:0}}._purpur-drawer-frame--sticky-footer_1s8hq_21{gap:0}._purpur-drawer-frame__header_1s8hq_24{flex:0 0 auto}._purpur-drawer-frame__body_1s8hq_27{flex:1 1 auto;overflow:hidden}._purpur-drawer-frame--fit-to-content_1s8hq_31{flex:1 1 auto;height:auto;overflow:hidden}._purpur-drawer-frame--fit-to-content_1s8hq_31 ._purpur-drawer-frame__body_1s8hq_27{display:flex;flex-direction:column}._purpur-drawer-frame__footer_1s8hq_40{flex:0 0 auto}._purpur-drawer-frame__content-container_1s8hq_43{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-frame__content-container--no-footer_1s8hq_48{margin-bottom:var(--purpur-spacing-400)}._purpur-drawer-handle_3n0ew_1{align-items:center;display:flex;height:var(--purpur-spacing-250);justify-content:center;position:absolute;top:0;width:100%}@media screen and (min-width: 600px){._purpur-drawer-handle_3n0ew_1{display:none}}._purpur-drawer-handle_3n0ew_1:before{content:"";background:var(--purpur-color-border-weak);border-radius:var(--purpur-border-radius-full);height:var(--purpur-spacing-50);width:var(--purpur-spacing-600)}._purpur-drawer-header__row_1yg5w_1{display:flex;align-items:center;gap:var(--purpur-spacing-100)}._purpur-drawer-header__row--with-back-button_1yg5w_6{margin-bottom:var(--purpur-spacing-100)}._purpur-drawer-header__left_1yg5w_9{flex:1 1 auto}._purpur-drawer-header__right_1yg5w_12{flex:0 0 auto}._purpur-drawer-header__close-button_1yg5w_15{margin-right:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-header__back-button--only-icon_1yg5w_18{margin-left:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-scroll-area__root_1r0fa_1{height:100%}._purpur-drawer-scroll-area__root--fit-to-content_1r0fa_4{display:flex;flex-direction:column;height:auto;overflow:hidden}._purpur-drawer-scroll-area__viewport_1r0fa_10{height:100%}._purpur-drawer-scroll-area__scrollbar_1r0fa_13{display:flex;-webkit-user-select:none;user-select:none;touch-action:none;padding:var(--purpur-spacing-25);background:var(--purpur-color-functional-white);transition:background var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:var(--purpur-spacing-100)}._purpur-drawer-scroll-area__thumb_1r0fa_24{background:var(--purpur-color-gray-200);border-radius:var(--purpur-spacing-200);flex:1;position:relative}._purpur-drawer-scroll-area__thumb_1r0fa_24:before{content:"";height:100%;left:50%;min-height:var(--purpur-spacing-300);min-width:var(--purpur-spacing-300);position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}
+._purpur-drawer-content_71yig_1{bottom:0;height:95.5vh;height:95.5dvh;max-width:100%;position:absolute;width:100%;transform:translateY(var(--purpur-drawer-swipe-move-y))}@media (prefers-reduced-motion: no-preference){._purpur-drawer-content_71yig_1:not([data-swipe=move]){transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content_71yig_1[data-state=open]{animation:_slideUp_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content_71yig_1[data-state=closed]{animation:_slideDown_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-drawer-content--left_71yig_21{left:0}._purpur-drawer-content--right_71yig_24{right:0}._purpur-drawer-content--fit-to-content_71yig_27{display:flex;flex-direction:column;height:auto;max-height:95.5vh;max-height:95.5dvh}@media screen and (min-width: 600px){._purpur-drawer-content_71yig_1{height:100vh;height:100dvh;max-width:calc(30rem * var(--purpur-rescale));top:0}._purpur-drawer-content--fit-to-content_71yig_27{max-height:100vh;max-height:100dvh}}@media screen and (min-width: 600px) and (prefers-reduced-motion: no-preference){._purpur-drawer-content--right_71yig_24[data-state=open]{animation:_slideInRight_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content--left_71yig_21[data-state=open]{animation:_slideInLeft_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content--right_71yig_24[data-state=closed]{animation:_slideOutRight_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content--left_71yig_21[data-state=closed]{animation:_slideOutLeft_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-drawer-content_71yig_1:focus{outline:none}._purpur-drawer-content__content-container_71yig_63{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-content__description_71yig_68{color:var(--purpur-color-text-default);display:block;font-family:var(--purpur-typography-family-default);font-size:var(--purpur-typography-scale-100);font-weight:var(--purpur-typography-weight-normal);-webkit-hyphens:none;hyphens:none;line-height:var(--purpur-typography-line-height-loose);margin:0}._purpur-drawer-overlay_71yig_79{background:var(--purpur-color-overlay-default);top:0;right:0;bottom:0;left:0;position:fixed}@media (prefers-reduced-motion: no-preference){._purpur-drawer-overlay_71yig_79{transition:opacity var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-overlay_71yig_79[data-state=open]{animation:_fadeIn_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-overlay_71yig_79[data-state=closed]{animation:_fadeOut_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}@keyframes _fadeIn_71yig_1{0%{opacity:0}to{opacity:1}}@keyframes _fadeOut_71yig_1{0%{opacity:1}to{opacity:0}}@keyframes _slideInRight_71yig_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _slideOutRight_71yig_1{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes _slideInLeft_71yig_1{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes _slideOutLeft_71yig_1{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes _slideUp_71yig_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes _slideDown_71yig_1{0%{transform:translateY(var(--purpur-drawer-swipe-end-y))}to{transform:translateY(100%)}}._purpur-drawer-container--header_1bcla_1{border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-drawer-container--body_1bcla_4{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm) 0}@media screen and (min-width: 600px){._purpur-drawer-container--body_1bcla_4{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) 0}}._purpur-drawer-container--body_1bcla_4._purpur-drawer-container--sticky_1bcla_12{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm)}@media screen and (min-width: 600px){._purpur-drawer-container--body_1bcla_4._purpur-drawer-container--sticky_1bcla_12{padding:var(--purpur-spacing-400) var(--purpur-spacing-300)}}._purpur-drawer-container--footer_1bcla_20{padding:0 var(--purpur-spacing-page-padding-sm) var(--purpur-spacing-200)}@media screen and (min-width: 600px){._purpur-drawer-container--footer_1bcla_20{padding:0 var(--purpur-spacing-300) var(--purpur-spacing-200)}}._purpur-drawer-container--footer_1bcla_20._purpur-drawer-container--sticky_1bcla_12{border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);padding:var(--purpur-spacing-200) var(--purpur-spacing-page-padding-sm)}@media screen and (min-width: 600px){._purpur-drawer-container--footer_1bcla_20._purpur-drawer-container--sticky_1bcla_12{padding:var(--purpur-spacing-200) var(--purpur-spacing-300)}}._purpur-drawer-frame_1didd_1{background-color:var(--purpur-color-background-primary);border-top-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:var(--purpur-border-radius-lg);box-shadow:var(--purpur-shadow-lg);display:flex;flex-direction:column;height:100%;position:relative}._purpur-drawer-frame--without-back-button_1didd_11 ._purpur-drawer-frame__header_1didd_11{padding:var(--purpur-spacing-300) calc(56 * var(--purpur-spacing-10)) var(--purpur-spacing-150) var(--purpur-spacing-200)}._purpur-drawer-frame--with-back-button_1didd_14 ._purpur-drawer-frame__header_1didd_11{padding:calc(14 * var(--purpur-spacing-10)) var(--purpur-spacing-200) var(--purpur-spacing-150)}@media screen and (min-width: 600px){._purpur-drawer-frame--left_1didd_18{border-bottom-right-radius:var(--purpur-border-radius-lg);border-top-left-radius:0}._purpur-drawer-frame--right_1didd_22{border-bottom-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:0}._purpur-drawer-frame--without-back-button_1didd_11 ._purpur-drawer-frame__header_1didd_11{padding:var(--purpur-spacing-300) calc(64 * var(--purpur-spacing-10)) var(--purpur-spacing-200) var(--purpur-spacing-300)}._purpur-drawer-frame--with-back-button_1didd_14 ._purpur-drawer-frame__header_1didd_11{padding:calc(14 * var(--purpur-spacing-10)) var(--purpur-spacing-300) var(--purpur-spacing-200)}}._purpur-drawer-frame--sticky-footer_1didd_33{gap:0}._purpur-drawer-frame__header_1didd_11{flex:0 0 auto}._purpur-drawer-frame__body_1didd_39{flex:1 1 auto;overflow:hidden}._purpur-drawer-frame--fit-to-content_1didd_43{flex:1 1 auto;height:auto;overflow:hidden}._purpur-drawer-frame--fit-to-content_1didd_43 ._purpur-drawer-frame__body_1didd_39{display:flex;flex-direction:column}._purpur-drawer-frame__footer_1didd_52{flex:0 0 auto}._purpur-drawer-frame__content-container_1didd_55{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-frame__content-container--no-footer_1didd_60{margin-bottom:var(--purpur-spacing-400)}._purpur-drawer-handle_3n0ew_1{align-items:center;display:flex;height:var(--purpur-spacing-250);justify-content:center;position:absolute;top:0;width:100%}@media screen and (min-width: 600px){._purpur-drawer-handle_3n0ew_1{display:none}}._purpur-drawer-handle_3n0ew_1:before{content:"";background:var(--purpur-color-border-weak);border-radius:var(--purpur-border-radius-full);height:var(--purpur-spacing-50);width:var(--purpur-spacing-600)}._purpur-drawer-header__row_12p9v_1{display:flex}._purpur-drawer-header__row--with-back-button_12p9v_4{margin-bottom:var(--purpur-spacing-100)}._purpur-drawer-header__left_12p9v_7{flex:1 1 auto}._purpur-drawer-header__right_12p9v_10{flex:0 0 auto}._purpur-drawer-header_12p9v_1 ._purpur-drawer-header__close-button_12p9v_13{position:absolute;top:calc(14 * var(--purpur-spacing-10));right:calc(6 * var(--purpur-spacing-10));padding:calc(10 * var(--purpur-spacing-10))}@media screen and (min-width: 600px){._purpur-drawer-header_12p9v_1 ._purpur-drawer-header__close-button_12p9v_13{right:calc(14 * var(--purpur-spacing-10))}}._purpur-drawer-header__back-button--only-icon_12p9v_24{margin-left:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-scroll-area__root_1hyos_1{height:100%}._purpur-drawer-scroll-area__root--fit-to-content_1hyos_4{display:flex;flex-direction:column;height:auto;overflow:hidden}._purpur-drawer-scroll-area__viewport_1hyos_10{position:relative;height:100%}._purpur-drawer-scroll-area__scrollbar_1hyos_14{display:flex;-webkit-user-select:none;user-select:none;touch-action:none;padding:var(--purpur-spacing-25);background:var(--purpur-color-functional-white);transition:background var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:var(--purpur-spacing-100)}._purpur-drawer-scroll-area__thumb_1hyos_25{background:var(--purpur-color-gray-200);border-radius:var(--purpur-spacing-200);flex:1;position:relative}._purpur-drawer-scroll-area__thumb_1hyos_25:before{content:"";height:100%;left:50%;min-height:var(--purpur-spacing-300);min-width:var(--purpur-spacing-300);position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}

package/dist/use-swipe-to-dismiss.hook.d.ts

@@ -1,13 +1,12 @@
-import { AnimationEvent, RefObject } from 'react';
+import { RefObject } from 'react';
 import { SwipeEvent } from './types';
 
 type UseSwipeToDismiss = {
-    onAnimationEnd(event: AnimationEvent<HTMLDivElement>): void;
     onSwipeStart(): void;
     onSwipeMove(event: SwipeEvent): void;
     onSwipeCancel(): void;
     onSwipeEnd(event: SwipeEvent): void;
 };
-export declare const useSwipeToDismiss: <T extends HTMLElement>(containerRef: RefObject<T | null>, handleOpenChange: (open: boolean) => void) => UseSwipeToDismiss;
+export declare const useSwipeToDismiss: <T extends HTMLElement>(containerRef: RefObject<T | null>, handleOpenChange: ((open: boolean) => void) | null) => UseSwipeToDismiss;
 export {};
 //# sourceMappingURL=use-swipe-to-dismiss.hook.d.ts.map

package/dist/use-swipe-to-dismiss.hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-swipe-to-dismiss.hook.d.ts","sourceRoot":"","sources":["../src/use-swipe-to-dismiss.hook.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,KAAK,iBAAiB,GAAG;IACvB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IAC5D,YAAY,IAAI,IAAI,CAAC;IACrB,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACrC,aAAa,IAAI,IAAI,CAAC;IACtB,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,EACrD,cAAc,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,EACjC,kBAAkB,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,KACxC,iBA4CF,CAAC"}
+{"version":3,"file":"use-swipe-to-dismiss.hook.d.ts","sourceRoot":"","sources":["../src/use-swipe-to-dismiss.hook.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,KAAK,iBAAiB,GAAG;IACvB,YAAY,IAAI,IAAI,CAAC;IACrB,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACrC,aAAa,IAAI,IAAI,CAAC;IACtB,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,EACrD,cAAc,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,EACjC,kBAAkB,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,IAAI,KACjD,iBAwCF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/drawer",
-  "version": "8.3.1",
+  "version": "8.4.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/drawer.cjs.js",
   "types": "./dist/drawer.d.ts",
@@ -18,13 +18,13 @@
     "@radix-ui/react-dialog": "~1.1.6",
     "@radix-ui/react-scroll-area": "~1.2.3",
     "classnames": "~2.5.0",
-    "@purpurds/button": "8.3.1",
-    "@purpurds/common-types": "8.3.1",
-    "@purpurds/heading": "8.3.1",
-    "@purpurds/icon": "8.3.1",
-    "@purpurds/paragraph": "8.3.1",
-    "@purpurds/tokens": "8.3.1",
-    "@purpurds/visually-hidden": "8.3.1"
+    "@purpurds/button": "8.4.0",
+    "@purpurds/heading": "8.4.0",
+    "@purpurds/icon": "8.4.0",
+    "@purpurds/common-types": "8.4.0",
+    "@purpurds/paragraph": "8.4.0",
+    "@purpurds/visually-hidden": "8.4.0",
+    "@purpurds/tokens": "8.4.0"
   },
   "devDependencies": {
     "@storybook/react-vite": "^9.0.18",

package/src/drawer-container.module.scss

@@ -2,13 +2,9 @@
 
 .purpur-drawer-container {
   $root: &;
+
   &--header {
-    padding: var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm) var(--purpur-spacing-150);
     border-bottom: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);
-
-    @media screen and (min-width: $purpur-breakpoint-md) {
-      padding: var(--purpur-spacing-300) var(--purpur-spacing-300) var(--purpur-spacing-200);
-    }
   }
 
   &--body {

package/src/drawer-content.module.scss

@@ -4,15 +4,25 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
 
 .purpur-drawer-content {
   bottom: 0;
-  height: 90vh; /* Fallback for older browsers */
-  height: 90dvh;
+  height: 95.5vh; /* Fallback for older browsers */
+  height: 95.5dvh;
   max-width: 100%;
   position: absolute;
   width: 100%;
+  transform: translateY(var(--purpur-drawer-swipe-move-y));
 
   @media (prefers-reduced-motion: no-preference) {
-    animation: drawerSmallScreenAnimation $animation-settings;
-    transition: transform $animation-settings;
+    &:not([data-swipe="move"]) {
+      transition: transform $animation-settings;
+    }
+
+    &[data-state="open"] {
+      animation: slideUp $animation-settings;
+    }
+
+    &[data-state="closed"] {
+      animation: slideDown $animation-settings;
+    }
   }
 
   &--left {
@@ -27,8 +37,8 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
     display: flex;
     flex-direction: column;
     height: auto;
-    max-height: 90vh; /* Fallback for older browsers */
-    max-height: 90dvh;
+    max-height: 95.5vh; /* Fallback for older browsers */
+    max-height: 95.5dvh;
   }
 
   @media screen and (min-width: $purpur-breakpoint-md) {
@@ -43,12 +53,20 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
     }
 
     @media (prefers-reduced-motion: no-preference) {
-      &--right {
-        animation: drawerLargeScreenAnimationRight $animation-settings;
+      &--right[data-state="open"] {
+        animation: slideInRight $animation-settings;
+      }
+
+      &--left[data-state="open"] {
+        animation: slideInLeft $animation-settings;
+      }
+
+      &--right[data-state="closed"] {
+        animation: slideOutRight $animation-settings;
       }
 
-      &--left {
-        animation: drawerLargeScreenAnimationLeft $animation-settings;
+      &--left[data-state="closed"] {
+        animation: slideOutLeft $animation-settings;
       }
     }
   }
@@ -63,21 +81,6 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
     gap: var(--purpur-spacing-400);
   }
 
-  &__drawer-frame {
-    &[data-swipe="cancel"] {
-      transform: translateY(0);
-      transition: transform $animation-settings;
-    }
-
-    &[data-swipe="move"] {
-      transform: translateY(var(--purpur-drawer-swipe-move-y));
-    }
-
-    &[data-swipe="end"] {
-      animation: slideDown $animation-settings forwards;
-    }
-  }
-
   &__description {
     color: var(--purpur-color-text-default);
     display: block;
@@ -96,30 +99,36 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
   position: fixed;
 
   @media (prefers-reduced-motion: no-preference) {
-    animation: overlayAnimation $animation-settings;
     transition: opacity $animation-settings;
+    &[data-state="open"] {
+      animation: fadeIn $animation-settings;
+    }
+
+    &[data-state="closed"] {
+      animation: fadeOut $animation-settings;
+    }
   }
 }
 
-@keyframes slideDown {
+@keyframes fadeIn {
   from {
-    transform: translateY(var(--purpur-drawer-swipe-end-y));
+    opacity: 0;
   }
   to {
-    transform: translateY(100%);
+    opacity: 1;
   }
 }
 
-@keyframes overlayAnimation {
+@keyframes fadeOut {
   from {
-    opacity: 0;
+    opacity: 1;
   }
   to {
-    opacity: 1;
+    opacity: 0;
   }
 }
 
-@keyframes drawerLargeScreenAnimationRight {
+@keyframes slideInRight {
   from {
     transform: translateX(100%);
   }
@@ -128,7 +137,16 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
   }
 }
 
-@keyframes drawerLargeScreenAnimationLeft {
+@keyframes slideOutRight {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slideInLeft {
   from {
     transform: translateX(-100%);
   }
@@ -137,7 +155,16 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
   }
 }
 
-@keyframes drawerSmallScreenAnimation {
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slideUp {
   from {
     transform: translateY(100%);
   }
@@ -145,3 +172,12 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
     transform: translateY(0%);
   }
 }
+
+@keyframes slideDown {
+  from {
+    transform: translateY(var(--purpur-drawer-swipe-end-y));
+  }
+  to {
+    transform: translateY(100%);
+  }
+}

package/src/drawer-content.tsx

@@ -6,7 +6,7 @@ import c from "classnames/bind";
 import { DrawerContext } from "./drawer.context";
 import styles from "./drawer-content.module.scss";
 import { DrawerFrame } from "./drawer-frame";
-import { type OpenHandlerFunction, type Position } from "./types";
+import { type Position } from "./types";
 import { useSwipeToDismiss } from "./use-swipe-to-dismiss.hook";
 
 const cx = c.bind(styles);
@@ -77,9 +77,22 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
     ]);
 
     const drawerFrameRef = useRef<HTMLDivElement>(null);
+    const internalDrawerContentRef = useRef<HTMLDivElement>(null);
+
+    const setRef = (node: HTMLDivElement | null) => {
+      internalDrawerContentRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+
     const onOpenChange = useContext(DrawerContext);
-    const { onAnimationEnd, onSwipeStart, onSwipeMove, onSwipeCancel, onSwipeEnd } =
-      useSwipeToDismiss(drawerFrameRef, onOpenChange as OpenHandlerFunction);
+    const { onSwipeStart, onSwipeMove, onSwipeCancel, onSwipeEnd } = useSwipeToDismiss(
+      internalDrawerContentRef,
+      onOpenChange
+    );
 
     const handlePointerDownOutside = (event: CustomEvent<{ originalEvent: PointerEvent }>) => {
       if (disableCloseOnClickOutside) {
@@ -111,7 +124,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
             onOpenAutoFocus={handleInitialFocus}
             className={classes}
             data-testid={dataTestId}
-            ref={ref}
+            ref={setRef}
             {...(!bodyText && { ["aria-describedby"]: undefined })}
             {...props}
           >
@@ -125,7 +138,6 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
               footerContent={footerContent}
               headerContent={headerContent}
               ref={drawerFrameRef}
-              onAnimationEnd={onAnimationEnd}
               onBackButtonClick={onBackButtonClick}
               onSwipeStart={onSwipeStart}
               onSwipeMove={onSwipeMove}

package/src/drawer-frame.module.scss

@@ -12,6 +12,20 @@
   height: 100%;
   position: relative;
 
+  &--without-back-button {
+    #{$root}__header {
+      padding: var(--purpur-spacing-300) calc(56 * var(--purpur-spacing-10))
+        var(--purpur-spacing-150) var(--purpur-spacing-200);
+    }
+  }
+
+  &--with-back-button {
+    #{$root}__header {
+      padding: calc(14 * var(--purpur-spacing-10)) var(--purpur-spacing-200)
+        var(--purpur-spacing-150);
+    }
+  }
+
   @media screen and (min-width: $purpur-breakpoint-md) {
     &--left {
       border-bottom-right-radius: var(--purpur-border-radius-lg);
@@ -22,6 +36,20 @@
       border-bottom-left-radius: var(--purpur-border-radius-lg);
       border-top-right-radius: 0;
     }
+
+    &--without-back-button {
+      #{$root}__header {
+        padding: var(--purpur-spacing-300) calc(64 * var(--purpur-spacing-10))
+          var(--purpur-spacing-200) var(--purpur-spacing-300);
+      }
+    }
+
+    &--with-back-button {
+      #{$root}__header {
+        padding: calc(14 * var(--purpur-spacing-10)) var(--purpur-spacing-300)
+          var(--purpur-spacing-200);
+      }
+    }
   }
 
   &--sticky-footer {

package/src/drawer-frame.tsx

@@ -20,7 +20,6 @@ export type DrawerFrameProps = Omit<BaseProps, "children"> & {
   fitToContent?: boolean;
   footerContent?: ReactNode;
   headerContent?: ReactNode;
-  onAnimationEnd: (event: React.AnimationEvent<HTMLDivElement>) => void;
   onBackButtonClick?: () => void;
   onSwipeStart(): void;
   onSwipeMove(event: SwipeEvent): void;
@@ -46,7 +45,6 @@ export const DrawerFrame = forwardRef<HTMLDivElement, DrawerFrameProps>(
       fitToContent = false,
       footerContent,
       headerContent,
-      onAnimationEnd,
       onBackButtonClick,
       onSwipeStart,
       onSwipeMove,
@@ -59,6 +57,7 @@ export const DrawerFrame = forwardRef<HTMLDivElement, DrawerFrameProps>(
     },
     ref
   ) => {
+    const hasBackButton = !!(backButton && backButtonText && onBackButtonClick);
     const classes = cx([
       className,
       rootClassName,
@@ -67,17 +66,13 @@ export const DrawerFrame = forwardRef<HTMLDivElement, DrawerFrameProps>(
         [`${rootClassName}--sticky-footer`]: stickyFooter,
         [`${rootClassName}--left`]: position === "left",
         [`${rootClassName}--right`]: position === "right",
+        [`${rootClassName}--without-back-button`]: !hasBackButton,
+        [`${rootClassName}--with-back-button`]: hasBackButton,
       },
     ]);
 
     return (
-      <div
-        className={classes}
-        data-testid={dataTestId}
-        ref={ref}
-        onAnimationEnd={onAnimationEnd}
-        {...props}
-      >
+      <div className={classes} data-testid={dataTestId} ref={ref} {...props}>
         <DrawerHandle
           onSwipeStart={onSwipeStart}
           onSwipeMove={onSwipeMove}

package/src/drawer-header.module.scss

@@ -1,8 +1,8 @@
+@use "@purpurds/tokens/breakpoint/variables" as *;
+
 .purpur-drawer-header {
   &__row {
     display: flex;
-    align-items: center;
-    gap: var(--purpur-spacing-100);
 
     &--with-back-button {
       margin-bottom: var(--purpur-spacing-100);
@@ -17,8 +17,15 @@
     flex: 0 0 auto;
   }
 
-  &__close-button {
-    margin-right: calc(-1 * var(--purpur-spacing-100));
+  #{&}__close-button {
+    position: absolute;
+    top: calc(14 * var(--purpur-spacing-10));
+    right: calc(6 * var(--purpur-spacing-10));
+    padding: calc(10 * var(--purpur-spacing-10));
+
+    @media screen and (min-width: $purpur-breakpoint-md) {
+      right: calc(14 * var(--purpur-spacing-10));
+    }
   }
 
   &__back-button {

package/src/drawer-header.tsx

@@ -41,6 +41,7 @@ export const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
     ref
   ) => {
     const classes = cx([className, rootClassName]);
+    const hasBackButton = !!(backButton && backButtonText && onBackButtonClick);
 
     return (
       <div className={classes} data-testid={dataTestId} ref={ref} {...props}>
@@ -48,14 +49,13 @@ export const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
           className={cx([
             `${rootClassName}__row`,
             {
-              [`${rootClassName}__row--with-back-button`]:
-                backButton && backButtonText && onBackButtonClick,
+              [`${rootClassName}__row--with-back-button`]: hasBackButton,
             },
           ])}
           data-testid={`${dataTestId}-row`}
         >
           <div className={cx(`${rootClassName}__left`)}>
-            {backButton && backButtonText && onBackButtonClick ? (
+            {hasBackButton ? (
               <Button
                 aria-label={backButtonOnlyIcon ? backButtonText : ""}
                 className={cx([
@@ -108,9 +108,7 @@ export const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
             </RadixDialog.Close>
           </div>
         </div>
-        {backButton &&
-          backButtonText &&
-          onBackButtonClick &&
+        {hasBackButton &&
           (headerContent ? (
             <>
               {headerContent}

package/src/drawer-scroll-area.module.scss

@@ -13,6 +13,7 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
   }
 
   &__viewport {
+    position: relative;
     height: 100%;
   }
 

package/src/drawer.stories.tsx

@@ -66,6 +66,7 @@ const StorybookMultiDrawerTestComponent = () => {
   const [open1, setOpen1] = React.useState(false);
   const [open2, setOpen2] = React.useState(false);
   const [open3, setOpen3] = React.useState(false);
+  const [open4, setOpen4] = React.useState(false);
   return (
     <div>
       <div
@@ -160,11 +161,40 @@ const StorybookMultiDrawerTestComponent = () => {
           </Drawer.Content>
         </Drawer>
       </div>
+
+      <div
+        style={{
+          padding: "20px",
+          border: "1px solid var(--purpur-color-border-interactive-primary)",
+        }}
+      >
+        <Drawer open={open4} onOpenChange={setOpen4}>
+          <Drawer.Trigger>
+            <Button variant="primary">Open drawer 4</Button>
+          </Drawer.Trigger>
+          <Drawer.Content
+            bodyText="This is the body text"
+            closeButtonAriaLabel="Close drawer"
+            fitToContent
+            footerContent={<StorybookTestFooterContent numberOfButtons={2} />}
+            title="This is drawer 4"
+            stickyFooter
+            zIndex={20}
+          >
+            <Heading variant="subsection-100" tag="h3">
+              The standard Lorem Ipsum passage, used since the 1500s
+            </Heading>
+            <Paragraph variant="paragraph-100" style={{ marginBottom: "32px" }}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </Paragraph>
+          </Drawer.Content>
+        </Drawer>
+      </div>
     </div>
   );
 };
 
-const StorybookTestFooterContent = () => {
+const StorybookTestFooterContent = ({ numberOfButtons = 3 }: { numberOfButtons?: 2 | 3 }) => {
   return (
     <div style={{ textAlign: "center" }}>
       <div
@@ -172,7 +202,7 @@ const StorybookTestFooterContent = () => {
           display: "flex",
           gap: "16px",
           width: "100%",
-          marginBottom: "16px",
+          marginBottom: numberOfButtons > 2 ? "16px" : 0,
         }}
       >
         <Button variant="secondary" style={{ flex: "1 1 50%" }}>
@@ -182,9 +212,11 @@ const StorybookTestFooterContent = () => {
           Primary button
         </Button>
       </div>
-      <Button variant="tertiary-purple" style={{ minWidth: "50%" }}>
-        Tertiary button
-      </Button>
+      {numberOfButtons === 3 && (
+        <Button variant="tertiary-purple" style={{ minWidth: "50%" }}>
+          Tertiary button
+        </Button>
+      )}
     </div>
   );
 };

package/src/drawer.tsx

@@ -1,23 +1,17 @@
 import React, { type ReactNode, useEffect } from "react";
 import type { BaseProps } from "@purpurds/common-types";
 import * as RadixDialog from "@radix-ui/react-dialog";
-import c from "classnames/bind";
 
 import { DrawerContext } from "./drawer.context";
-import styles from "./drawer.module.scss";
 import { DrawerContent } from "./drawer-content";
 import { DrawerTrigger } from "./drawer-trigger";
 
-const cx = c.bind(styles);
-
 export type DrawerProps = Omit<BaseProps, "children"> & {
   children: ReactNode;
   onOpenChange?: (open: boolean) => void;
   open: boolean;
 };
 
-const rootClassName = "purpur-drawer";
-
 export type DrawerComponent<P> = React.FunctionComponent<P> & {
   Trigger: typeof DrawerTrigger;
   Content: typeof DrawerContent;
@@ -32,7 +26,6 @@ export const Drawer: DrawerComponent<DrawerProps> = ({
   ...props
 }: DrawerProps) => {
   const [_open, _setOpen] = React.useState(open);
-  const classes = cx([className, rootClassName]);
 
   const handleOpenChange = (newOpen: boolean) => {
     _setOpen(newOpen);
@@ -45,7 +38,7 @@ export const Drawer: DrawerComponent<DrawerProps> = ({
 
   return (
     <DrawerContext.Provider value={handleOpenChange}>
-      <div className={classes} data-testid={dataTestId} {...props}>
+      <div className={className} data-testid={dataTestId} {...props}>
         <RadixDialog.Root open={_open} onOpenChange={handleOpenChange}>
           {children}
         </RadixDialog.Root>

package/src/use-swipe-to-dismiss.hook.ts

@@ -1,9 +1,8 @@
-import type { AnimationEvent, RefObject } from "react";
+import type { RefObject } from "react";
 
 import { type SwipeEvent } from "./types";
 
 type UseSwipeToDismiss = {
-  onAnimationEnd(event: AnimationEvent<HTMLDivElement>): void;
   onSwipeStart(): void;
   onSwipeMove(event: SwipeEvent): void;
   onSwipeCancel(): void;
@@ -12,7 +11,7 @@ type UseSwipeToDismiss = {
 
 export const useSwipeToDismiss = <T extends HTMLElement>(
   containerRef: RefObject<T | null>,
-  handleOpenChange: (open: boolean) => void
+  handleOpenChange: ((open: boolean) => void) | null
 ): UseSwipeToDismiss => {
   const onSwipeStart = () => {
     if (!containerRef.current) {
@@ -44,14 +43,10 @@ export const useSwipeToDismiss = <T extends HTMLElement>(
     containerRef.current.setAttribute("data-swipe", "end");
     containerRef.current.style.removeProperty("--purpur-drawer-swipe-move-y");
     containerRef.current.style.setProperty("--purpur-drawer-swipe-end-y", `${y}px`);
+    handleOpenChange?.(false);
   };
-  const onAnimationEnd = (event: AnimationEvent<HTMLDivElement>) => {
-    if (event.currentTarget.getAttribute("data-swipe") === "end") {
-      handleOpenChange(false);
-    }
-  };
+
   return {
-    onAnimationEnd,
     onSwipeStart,
     onSwipeMove,
     onSwipeCancel,

package/src/drawer.module.scss

@@ -1,2 +0,0 @@
-.purpur-drawer {
-}