@crystaldesign/diva-core 25.13.0-rc.15 → 25.13.0-rc.16

package/build/esm/{ModalsWrapper-8f4bf458.js → ModalsWrapper-fd0c0509.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useDivaCoreContext } from './index-232f8624.js';
+import { s as styleInject, u as useDivaCoreContext } from './index-c7cc596b.js';
 import { useState, useEffect, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import Button from '@mui/material/Button';
@@ -42,7 +42,6 @@ import 'axios';
 import '@crystaldesign/product-handler';
 import 'classnames';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import 'vaul';
 import '@crystaldesign/content-box';
 import '@crystaldesign/diva-core';
 import 'react-qr-code';

package/build/esm/{index-c0408136.js → index-22d234c5.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useDivaCoreContext, g as getLogger } from './index-232f8624.js';
+import { s as styleInject, u as useDivaCoreContext, g as getLogger } from './index-c7cc596b.js';
 import { forwardRef, useState, useRef, useEffect, useMemo } from 'react';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -42,7 +42,6 @@ import 'lodash/debounce';
 import 'axios';
 import '@crystaldesign/product-handler';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import 'vaul';
 import 'react-qr-code';
 import '@mui/icons-material/Close';
 import '@mui/material/IconButton';

package/build/esm/{index-232f8624.js → index-c7cc596b.js}

@@ -34,9 +34,8 @@ import axios from 'axios';
 import { ProductHandlerAbstract } from '@crystaldesign/product-handler';
 import classnames from 'classnames';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { Drawer } from 'vaul';
+import { SwipeableDrawer, Button, Snackbar, SnackbarContent, IconButton, Card, CardHeader, CardContent } from '@mui/material';
 import { ContentBoxComponent } from '@crystaldesign/content-box';
-import { Button, Snackbar, SnackbarContent, IconButton, Card, CardHeader, CardContent } from '@mui/material';
 import { useTranslation as useTranslation$1, useDivaCore as useDivaCore$1 } from '@crystaldesign/diva-core';
 import QRCode from 'react-qr-code';
 import CloseIcon from '@mui/icons-material/Close';
@@ -46,7 +45,7 @@ import { actions } from '@storybook/addon-actions';
 import * as Styles from '@mui/styles';
 
 (function() {
-    const env = {"STAGE":"production","VERSION":"25.13.0-rc.15"};
+    const env = {"STAGE":"production","VERSION":"25.13.0-rc.16"};
     try {
         if (process) {
             process.env = Object.assign({}, process.env);
@@ -9494,10 +9493,7 @@ var closeIcon = "close-icon-1kDyU";
 var css_248z$4 = ".overlay-34l68 {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  background-color: #fff;\n  z-index: 999;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n}\n\n.absolute-overlay-cG7uO {\n  height: 100% !important;\n}\n\n.absolute-overlay-cG7uO {\n  background-color: #fff;\n  position: fixed;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n  overflow: hidden;\n  z-index: 1000000;\n  display: block;\n  width: 100vw;\n}\n\n.diva-pseudo-fullscreen body {\n  height: auto !important;\n}\n.diva-pseudo-fullscreen, .diva-pseudo-fullscreen body {\n  overflow: hidden !important;\n}\n\n.close-icon-1kDyU {\n  position: absolute;\n  right: 32px;\n  top: 32px;\n  width: 50px;\n  height: 40px;\n  opacity: 0.3;\n  z-index: 700;\n  cursor: pointer;\n}\n\n.close-icon-1kDyU:before {\n  transform: rotate(45deg);\n}\n\n.close-icon-1kDyU:after {\n  transform: rotate(-45deg);\n}\n\n.close-icon-1kDyU:before,\n.close-icon-1kDyU:after {\n  position: absolute;\n  left: 23px;\n  top: 5px;\n  content: ' ';\n  height: 33px;\n  width: 3px;\n  background-color: #4b4b4b;\n}\n\n.close-icon-1kDyU:hover {\n  opacity: 0.8;\n  transition: opacity 0.2s ease-in-out;\n}\n";
 styleInject(css_248z$4);
 
-var drawerWrapper = "drawer-wrapper-QY9a7";
-var left = "left-SicAa";
-var right = "right-p1mpA";
-var handle = "handle-5tzN-";
+var drawerContent = "drawer-content-3-85N";
 var overlay = "overlay-vhpU9";
 var drawerHandleLine = "drawer-handle-line-65wJw";
 var drawerHandle = "drawer-handle-zhmPW";
@@ -9506,39 +9502,224 @@ var drawerHeader = "drawer-header-FOHFa";
 var scrollWrapper = "scroll-wrapper-f27j2";
 var closeButton = "close-button-Tg2c5";
 var bottom = "bottom-VZZjn";
+var left = "left-SicAa";
+var right = "right-p1mpA";
 var top = "top-o1Wjp";
 var bottomSpacer = "bottom-spacer-kdhiH";
 var onSide = "on-side-JUQWn";
-var css_248z$3 = ".drawer-wrapper-QY9a7 {\n  transition:\n    opacity 0.3s ease,\n    transform 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;\n}\n\n.drawer-wrapper-QY9a7 {\n  outline: medium none invert;\n  outline: initial;\n  position: fixed;\n  width: 100%;\n  z-index: 14000;\n  pointer-events: auto;\n  opacity: 1;\n}\n\n.drawer-wrapper-QY9a7.vaul-dragging {\n  transition: opacity 0.3s ease !important;\n}\n\n[data-state='closed'].drawer-wrapper-QY9a7.left-SicAa,\n[data-state='closed'].drawer-wrapper-QY9a7.right-p1mpA {\n  opacity: 0;\n}\n\ndiv.handle-5tzN- {\n  background: transparent;\n}\n\n.overlay-vhpU9 {\n  background-color: rgba(0, 0, 0, 0.4);\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  opacity: 0;\n  animation: fadeIn-W2rJo 0.3s ease-in forwards;\n  z-index: 10000;\n}\n\n@keyframes fadeIn-W2rJo {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.drawer-handle-line-65wJw {\n  width: calc(36px);\n  height: 4px;\n  background-color: rgba(234, 234, 234, 0.9);\n  border-radius: 2px;\n}\n\n.drawer-handle-zhmPW {\n  position: absolute;\n  left: 50%;\n  transform: translate(-50%, -10px);\n  width: 40px;\n  height: 40px;\n  touch-action: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.drawer-P-5-0 {\n  display: flex;\n  flex-direction: column;\n  border-top-left-radius: 10px;\n  border-top-right-radius: 10px;\n  border: 0px solid #e4e4e7;\n  border-bottom: none;\n  border-top-width: 1px;\n  z-index: 2000000;\n  box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.1);\n  background-color: rgba(255, 255, 255, 0.95);\n}\n\n.drawer-header-FOHFa {\n  padding: 8px 32px;\n}\n\n.drawer-open #Diva-content-wrapper {\n  overflow: visible !important;\n  z-index: 3 !important;\n}\n\n.scroll-wrapper-f27j2 {\n  overflow-y: auto;\n  overflow-x: hidden;\n  overscroll-behavior: contain;\n  padding: 0px 32px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 12px;\n}\n\n.close-button-Tg2c5 {\n  position: absolute;\n  top: 18px;\n  right: 18px;\n  width: 32px;\n  height: 32px;\n  background: center / 70% no-repeat url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23ccc%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n  transition:\n    border-color 0.2s ease-in,\n    background-image 0.2s ease-in;\n  cursor: pointer;\n  z-index: 500;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  padding: 0px;\n}\n\n.close-button-Tg2c5:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23aaa%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n  border: 1px solid #aaa;\n}\n\n.bottom-VZZjn {\n  bottom: 0;\n  right: 0;\n  left: 0;\n}\n\n.left-SicAa,\n.right-p1mpA {\n  bottom: 0;\n}\n.right-p1mpA {\n  right: 0;\n}\n\n.top-o1Wjp {\n  top: 0;\n  right: 0;\n  left: 0;\n}\n\nhtml body[data-scroll-locked] {\n  position: static !important;\n}\n\n.bottom-spacer-kdhiH {\n  min-height: 12px;\n}\n\n.on-side-JUQWn {\n  width: 100%;\n}\n";
+var css_248z$3 = ".drawer-content-3-85N {\n  outline: medium none invert;\n  outline: initial;\n  position: absolute;\n  z-index: 14000;\n  pointer-events: auto;\n  opacity: 1;\n  overscroll-behavior: contain;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n  transform: translateZ(0);\n  -webkit-transform: translateZ(0);\n  /* Optimize for smooth swiping animations */\n  contain: layout style paint;\n}\n.MuiDrawer-anchorRight.MuiDrawer-root.MuiDrawer-modal.MuiModal-root,\n.MuiDrawer-anchorLeft.MuiDrawer-root.MuiDrawer-modal.MuiModal-root {\n  position: absolute;\n}\n\n/* Fix for mobile browser address bar showing/hiding */\n@supports (height: 100dvh) {\n  .drawer-content-3-85N {\n    max-height: 100dvh;\n  }\n}\n\n.overlay-vhpU9 {\n  background-color: rgba(0, 0, 0, 0.4);\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  opacity: 0;\n  animation: fadeIn-W2rJo 0.3s ease-in forwards;\n  z-index: 10000;\n}\n\n@keyframes fadeIn-W2rJo {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.drawer-handle-line-65wJw {\n  width: calc(36px);\n  height: 4px;\n  background-color: rgba(234, 234, 234, 0.9);\n  border-radius: 2px;\n}\n\n.drawer-handle-zhmPW {\n  position: absolute;\n  left: 50%;\n  transform: translate(-50%, -32px);\n  width: 40px;\n  height: 40px;\n  touch-action: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top-right-radius: 10px;\n  border-top-left-radius: 10px;\n  cursor: grab;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n}\n\n.drawer-P-5-0 {\n  display: flex;\n  flex-direction: column;\n  z-index: 20000;\n  background-color: rgba(255, 255, 255, 0.95);\n  overflow: hidden;\n  flex: 1;\n  min-height: 0;\n}\n\n.drawer-header-FOHFa {\n  padding: 8px 32px;\n  flex-shrink: 0;\n}\n\n.drawer-open #Diva-content-wrapper {\n  overflow: visible !important;\n  z-index: 3 !important;\n}\n\n.scroll-wrapper-f27j2 {\n  overflow-y: auto;\n  overflow-x: hidden;\n  overscroll-behavior: contain;\n  padding: 0px 32px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-height: 0;\n  /* Smooth scrolling on iOS */\n  -webkit-overflow-scrolling: touch;\n  /* Prevent pull-to-refresh interference */\n  touch-action: pan-y;\n}\n\n.close-button-Tg2c5 {\n  position: absolute;\n  top: 18px;\n  right: 18px;\n  width: 32px;\n  height: 32px;\n  background: center / 70% no-repeat url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23ccc%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n  transition:\n    border-color 0.2s ease-in,\n    background-image 0.2s ease-in;\n  cursor: pointer;\n  z-index: 500;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  padding: 0px;\n}\n\n.close-button-Tg2c5:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23aaa%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n  border: 1px solid #aaa;\n}\n\n.bottom-VZZjn {\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.left-SicAa {\n  left: 0;\n  bottom: 0;\n  top: 0;\n}\n\n.right-p1mpA {\n  right: 0;\n  bottom: 0;\n  top: 0;\n}\n\n.top-o1Wjp {\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\nhtml body[data-scroll-locked] {\n  position: static !important;\n}\n\n.bottom-spacer-kdhiH {\n  min-height: 12px;\n}\n\n.on-side-JUQWn {\n  width: 100%;\n}\n";
 styleInject(css_248z$3);
 
+var useSwipeToDismiss = function useSwipeToDismiss(direction, onDismiss) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dragOffset = _useState4[0],
+    setDragOffset = _useState4[1];
+  var wrapperRef = useRef(null);
+  var startPos = useRef(null);
+  var scrollAtBoundary = useRef(false);
+  var startTime = useRef(0);
+  var scrollableElement = useRef(null);
+  var lastSwipeTime = useRef(0);
+  var lastSwipeDistance = useRef(0);
+  var hasConfirmedFastSwipe = useRef(false);
+  var isVertical = direction === 'top' || direction === 'bottom';
+
+  // Velocity threshold: minimum pixels per second for a "fast swipe"
+  // Lower thresholds for horizontal swipes as they're less common and more intentional
+  var MIN_VELOCITY = isVertical ? 800 : 100; // 800px/s for vertical, 500px/s for horizontal
+  var CONFIRMATION_DISTANCE = isVertical ? 150 : 15; // 150px for vertical, 100px for horizontal
+
+  var checkScrollBoundary = useCallback(function (element) {
+    if (isVertical) {
+      var scrollTop = element.scrollTop,
+        scrollHeight = element.scrollHeight,
+        clientHeight = element.clientHeight;
+      if (direction === 'bottom') {
+        // For bottom drawer, check if at top
+        return scrollTop <= 1; // Small tolerance for floating point
+      } else {
+        // For top drawer, check if at bottom
+        return scrollTop + clientHeight >= scrollHeight - 1;
+      }
+    } else {
+      var scrollLeft = element.scrollLeft,
+        scrollWidth = element.scrollWidth,
+        clientWidth = element.clientWidth;
+      if (direction === 'left') {
+        // For left drawer, check if at left edge
+        return scrollLeft <= 1;
+      } else {
+        // For right drawer, check if at right edge
+        return scrollLeft + clientWidth >= scrollWidth - 1;
+      }
+    }
+  }, [direction, isVertical]);
+  var findScrollableParent = function findScrollableParent(element) {
+    if (!element) return null;
+    var isScrollable = function isScrollable(el) {
+      var style = window.getComputedStyle(el);
+      var overflowY = style.overflowY;
+      var overflowX = style.overflowX;
+      return isVertical && (overflowY === 'auto' || overflowY === 'scroll') || !isVertical && (overflowX === 'auto' || overflowX === 'scroll');
+    };
+    var current = element;
+    while (current && current !== wrapperRef.current) {
+      if (isScrollable(current)) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return wrapperRef.current;
+  };
+  var handleTouchStart = useCallback(function (e) {
+    var target = e.target;
+
+    // Ignore swipe if touch starts on or within an element with diva-stop-swipe-detection
+    if (target.closest('.diva-stop-swipe-detection')) {
+      return;
+    }
+    var touch = e.touches[0];
+    startPos.current = {
+      x: touch.clientX,
+      y: touch.clientY
+    };
+    startTime.current = Date.now();
+    lastSwipeTime.current = Date.now();
+    lastSwipeDistance.current = 0;
+    hasConfirmedFastSwipe.current = false; // Reset confirmation
+    setIsDragging(false);
+    setDragOffset(0);
+
+    // Find scrollable element
+    var element = findScrollableParent(target);
+    scrollableElement.current = element;
+    if (element) {
+      scrollAtBoundary.current = checkScrollBoundary(element);
+    } else {
+      scrollAtBoundary.current = false;
+    }
+  }, [checkScrollBoundary]);
+  var handleTouchMove = useCallback(function (e) {
+    if (!startPos.current) return;
+    var touch = e.touches[0];
+    var deltaX = touch.clientX - startPos.current.x;
+    var deltaY = touch.clientY - startPos.current.y;
+    var currentTime = Date.now();
+
+    // Calculate current velocity
+    var timeDelta = currentTime - lastSwipeTime.current;
+    var currentDistance = isVertical ? Math.abs(deltaY) : Math.abs(deltaX);
+    var distanceDelta = currentDistance - lastSwipeDistance.current;
+    var velocity = timeDelta > 0 ? distanceDelta / timeDelta * 1000 : 0; // pixels per second
+
+    // Update tracking
+    lastSwipeTime.current = currentTime;
+    lastSwipeDistance.current = currentDistance;
+
+    // Determine if gesture is in dismiss direction
+    var dismissDirection = false;
+    var offset = 0;
+    if (isVertical) {
+      offset = deltaY;
+      if (direction === 'bottom') {
+        dismissDirection = deltaY > 0; // Swipe down
+      } else {
+        dismissDirection = deltaY < 0; // Swipe up
+      }
+    } else {
+      offset = deltaX;
+      if (direction === 'left') {
+        dismissDirection = deltaX < 0; // Swipe left
+      } else {
+        dismissDirection = deltaX > 0; // Swipe right
+      }
+    }
+    var absOffset = Math.abs(offset);
+    var isFastSwipe = velocity > MIN_VELOCITY;
+    var isMainlyVertical = Math.abs(deltaY) > Math.abs(deltaX) * 1.5;
+    var isMainlyHorizontal = Math.abs(deltaX) > Math.abs(deltaY) * 1.5;
+    var correctAxis = isVertical ? isMainlyVertical : isMainlyHorizontal;
+
+    // PESSIMISTIC: Only confirm fast swipe once we've traveled enough distance at high velocity
+    if (!hasConfirmedFastSwipe.current && scrollAtBoundary.current && dismissDirection && correctAxis && isFastSwipe && absOffset > CONFIRMATION_DISTANCE) {
+      hasConfirmedFastSwipe.current = true;
+    }
+
+    // Only show visual feedback AFTER confirmation
+    if (hasConfirmedFastSwipe.current && scrollAtBoundary.current && dismissDirection && correctAxis) {
+      e.preventDefault();
+      setIsDragging(true);
+      // Visual feedback during fast swipe
+      var resistance = Math.min(absOffset / 3, 100);
+      setDragOffset(offset > 0 ? resistance : -resistance);
+    } else if (isDragging) {
+      // Reset if conditions no longer met
+      setIsDragging(false);
+      setDragOffset(0);
+    }
+  }, [direction, isVertical, isDragging]);
+  var handleTouchEnd = useCallback(function () {
+    if (!startPos.current) {
+      setIsDragging(false);
+      setDragOffset(0);
+      return;
+    }
+
+    // Calculate final velocity
+    var duration = Date.now() - startTime.current;
+    var totalDistance = lastSwipeDistance.current;
+    var avgVelocity = duration > 0 ? totalDistance / duration * 1000 : 0; // pixels per second
+
+    // Dismiss only if it was confirmed as a fast swipe
+    var wasFastSwipe = hasConfirmedFastSwipe.current && avgVelocity > MIN_VELOCITY * 0.7 && scrollAtBoundary.current;
+    if (wasFastSwipe) {
+      onDismiss();
+    }
+
+    // Reset state
+    setIsDragging(false);
+    setDragOffset(0);
+    startPos.current = null;
+    scrollAtBoundary.current = false;
+    lastSwipeDistance.current = 0;
+    lastSwipeTime.current = 0;
+    hasConfirmedFastSwipe.current = false;
+  }, [onDismiss]);
+  return {
+    isDragging: isDragging,
+    dragOffset: dragOffset,
+    handleTouchStart: handleTouchStart,
+    handleTouchMove: handleTouchMove,
+    handleTouchEnd: handleTouchEnd,
+    wrapperRef: wrapperRef
+  };
+};
+
 function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var MobileDrawer = function MobileDrawer(_ref) {
-  var _contentStore$drawerM, _contentStore$drawerM2;
+var DrawerMenu = function DrawerMenu(_ref) {
+  var _contentStore$drawerM;
   _objectDestructuringEmpty(_ref);
   var _useDivaCoreContext = useDivaCoreContext(),
     contentStore = _useDivaCoreContext.contentStore;
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    activeSnapPoint = _useState2[0],
-    _setActiveSnapPoint = _useState2[1];
   var useMove = useMemo(function () {
     return function (ev) {
       return ev.preventDefault();
     };
   }, []);
-  var closeDrawerMenu = contentStore.closeDrawerMenu;
-  var _ref2 = (_contentStore$drawerM = contentStore.drawerMenu) !== null && _contentStore$drawerM !== void 0 ? _contentStore$drawerM : {},
+  var _ref2 = (_contentStore$drawerM = contentStore === null || contentStore === void 0 ? void 0 : contentStore.drawerMenu) !== null && _contentStore$drawerM !== void 0 ? _contentStore$drawerM : {},
     showOverlay = _ref2.showOverlay,
-    _ref2$mountElementId = _ref2.mountElementId,
-    mountElementId = _ref2$mountElementId === void 0 ? 'DivaCore' : _ref2$mountElementId,
+    mountElement = _ref2.mountElement,
     onClose = _ref2.onClose,
     open = _ref2.open,
     _ref2$direction = _ref2.direction,
     direction = _ref2$direction === void 0 ? 'bottom' : _ref2$direction,
     title = _ref2.title,
-    snapPoints = _ref2.snapPoints,
     noModal = _ref2.noModal,
     handleInternScroll = _ref2.handleInternScroll,
     hideCloseButton = _ref2.hideCloseButton,
@@ -9546,7 +9727,12 @@ var MobileDrawer = function MobileDrawer(_ref) {
     backgroundColor = _ref2.backgroundColor,
     drawerStyle = _ref2.drawerStyle,
     wrapperStyle = _ref2.wrapperStyle;
+  var _useState = useState(open !== null && open !== void 0 ? open : false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   useEffect(function () {
+    setIsOpen(open !== null && open !== void 0 ? open : false);
     //when drawer is open, prevent swipe to refresh the page on android
     if (open) {
       window.addEventListener('touchmove', useMove, {
@@ -9561,102 +9747,130 @@ var MobileDrawer = function MobileDrawer(_ref) {
       window.removeEventListener('touchmove', useMove);
       if (!noModal) document.body.classList.remove('drawer-open');
     };
-  }, [(_contentStore$drawerM2 = contentStore.drawerMenu) === null || _contentStore$drawerM2 === void 0 ? void 0 : _contentStore$drawerM2.open]);
-  if (!contentStore.drawerMenu) return /*#__PURE__*/jsx(Fragment, {});
-  var mountElement = mountElementId ? document.getElementById(mountElementId) : undefined;
-  if (!mountElement) {
-    return /*#__PURE__*/jsx(Fragment, {});
-  }
+  }, [open]);
   var close = function close() {
-    closeDrawerMenu();
+    setIsOpen(false);
     //delay the state changes so the animation of the drawer is not interrupted
     setTimeout(function () {
       onClose === null || onClose === void 0 || onClose();
     }, 400);
   };
-  var contentHeight = '100%';
-  if (['bottom', 'top'].includes(direction)) {
-    if (snapPoints) {
-      if (snapPoints[activeSnapPoint] > 1) {
-        contentHeight = snapPoints[activeSnapPoint] + 'px';
-      } else contentHeight = 'calc(' + (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[activeSnapPoint]) * 100 + '%' + ' - 5px)';
-    } else {
-      contentHeight = 'fit-content';
-    }
-  }
-  var maxHeight = contentHeight === 'fit-content' && mountElement ? mountElement === null || mountElement === void 0 ? void 0 : mountElement.getBoundingClientRect().height : undefined;
-  var maxWidth = ['left', 'right'].includes(direction) ? 400 : undefined;
-  return /*#__PURE__*/jsx(Drawer.Root, {
-    container: mountElement,
-    open: !!open,
-    direction: direction,
+  var anchor = direction === 'left' ? 'left' : direction === 'right' ? 'right' : direction === 'top' ? 'top' : 'bottom';
+  var isVertical = ['bottom', 'top'].includes(direction);
+  var maxWidth = !isVertical ? 400 : undefined;
+
+  // Swipe to dismiss functionality
+  var _useSwipeToDismiss = useSwipeToDismiss(direction, close),
+    isDragging = _useSwipeToDismiss.isDragging,
+    dragOffset = _useSwipeToDismiss.dragOffset,
+    handleTouchStart = _useSwipeToDismiss.handleTouchStart,
+    handleTouchMove = _useSwipeToDismiss.handleTouchMove,
+    handleTouchEnd = _useSwipeToDismiss.handleTouchEnd,
+    wrapperRef = _useSwipeToDismiss.wrapperRef;
+  var iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
+  if (!(contentStore !== null && contentStore !== void 0 && contentStore.drawerMenu)) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs(SwipeableDrawer, {
+    anchor: anchor,
+    open: !!isOpen,
     onClose: close,
-    activeSnapPoint: snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[activeSnapPoint],
-    setActiveSnapPoint: function setActiveSnapPoint(s) {
-      var _snapPoints$indexOf;
-      return _setActiveSnapPoint((_snapPoints$indexOf = snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.indexOf(s)) !== null && _snapPoints$indexOf !== void 0 ? _snapPoints$indexOf : 0);
+    disableBackdropTransition: !iOS,
+    disableDiscovery: iOS,
+    hideBackdrop: !showOverlay,
+    onOpen: function onOpen() {},
+    disableSwipeToOpen: true,
+    container: mountElement,
+    variant: 'temporary',
+    ModalProps: {
+      keepMounted: true,
+      style: _objectSpread$5(_objectSpread$5({}, noModal ? {
+        pointerEvents: 'none'
+      } : undefined), (drawerStyle === null || drawerStyle === void 0 ? void 0 : drawerStyle.zIndex) !== undefined ? {
+        zIndex: drawerStyle.zIndex
+      } : undefined),
+      disableEnforceFocus: !showOverlay,
+      // Allow focus outside drawer when no overlay
+      disableAutoFocus: !showOverlay // Don't auto-focus drawer content when no overlay
     },
-    snapPoints: snapPoints,
-    closeThreshold: 0.8,
-    repositionInputs: false,
-    modal: !noModal,
-    children: /*#__PURE__*/jsxs(Drawer.Portal, {
-      children: [showOverlay && /*#__PURE__*/jsx(Drawer.Overlay, {
-        className: overlay
-      }), /*#__PURE__*/jsxs(Drawer.Content, {
-        className: classnames(drawerWrapper, direction === 'bottom' ? bottom : direction === 'left' ? left : direction === 'right' ? right : direction === 'top' ? top : undefined),
+    slotProps: _objectSpread$5(_objectSpread$5({}, showOverlay ? {
+      backdrop: {
+        className: overlay,
+        style: {
+          position: 'absolute'
+        }
+      }
+    } : {}), {}, {
+      paper: {
+        className: classnames(drawerContent, direction === 'bottom' ? bottom : direction === 'left' ? left : direction === 'right' ? right : direction === 'top' ? top : undefined),
         style: _objectSpread$5({
-          height: contentHeight,
-          maxHeight: maxHeight ? maxHeight + 'px' : undefined,
-          maxWidth: maxWidth
+          height: isVertical ? 'auto' : '100%',
+          maxHeight: isVertical ? '85%' : undefined,
+          maxWidth: maxWidth,
+          position: 'absolute',
+          borderTopRightRadius: ['bottom', 'left'].includes(direction) ? '10px' : '0px',
+          borderTopLeftRadius: ['bottom', 'right'].includes(direction) ? '10px' : '0px',
+          borderBottomRightRadius: ['top', 'right'].includes(direction) ? '10px' : '0px',
+          borderBottomLeftRadius: ['top', 'left'].includes(direction) ? '10px' : '0px',
+          display: 'flex',
+          flexDirection: 'column',
+          transform: isDragging ? "translate".concat(isVertical ? 'Y' : 'X', "(").concat(dragOffset, "px)") : undefined,
+          transition: isDragging ? 'none' : 'transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1)',
+          willChange: isDragging ? 'transform' : 'auto'
         }, drawerStyle),
-        children: [/*#__PURE__*/jsx(Drawer.Title, {
-          style: {
-            display: 'none'
-          },
-          children: "Settings Drawer"
-        }), ['bottom', 'top'].includes(direction) && /*#__PURE__*/jsx(Drawer.Handle, {
-          className: handle,
-          children: /*#__PURE__*/jsx("div", {
-            className: drawerHandle,
-            children: /*#__PURE__*/jsx("div", {
-              className: drawerHandleLine
-            })
-          })
-        }), /*#__PURE__*/jsxs("div", {
-          className: classnames(drawer, ['left', 'right'].includes(direction) ? onSide : undefined),
-          onTouchMove: function onTouchMove(e) {
-            if (!e.target.closest('.diva-stop-swipe-detection')) e.stopPropagation();
-          },
-          style: _objectSpread$5({
-            height: contentHeight,
-            maxWidth: maxWidth,
-            maxHeight: maxHeight ? maxHeight - 22 + 'px' : undefined,
-            backgroundColor: backgroundColor
-          }, wrapperStyle),
-          children: [!hideCloseButton && /*#__PURE__*/jsx("button", {
-            className: closeButton,
-            onClick: close
-          }), title !== undefined && /*#__PURE__*/jsx("div", {
-            className: classnames(drawerHeader),
-            children: title
-          }), !handleInternScroll ? /*#__PURE__*/jsxs("div", {
-            className: classnames(scrollWrapper),
-            children: [content, /*#__PURE__*/jsx("div", {
-              className: bottomSpacer
-            })]
-          }) : content]
+        elevation: 0
+      }
+    }),
+    children: [isVertical && /*#__PURE__*/jsx("div", {
+      className: drawerHandle,
+      children: /*#__PURE__*/jsx("div", {
+        className: drawerHandleLine
+      })
+    }), title !== undefined && /*#__PURE__*/jsx("div", {
+      className: classnames(drawerHeader),
+      children: title
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames(drawer, !isVertical ? onSide : undefined),
+      onTouchMove: function onTouchMove(e) {
+        if (!e.target.closest('.diva-stop-swipe-detection')) e.stopPropagation();
+      },
+      style: _objectSpread$5({
+        maxWidth: maxWidth,
+        backgroundColor: backgroundColor
+      }, wrapperStyle),
+      children: [!hideCloseButton && /*#__PURE__*/jsx("button", {
+        className: closeButton,
+        onClick: close
+      }), !handleInternScroll ? /*#__PURE__*/jsxs("div", {
+        ref: wrapperRef,
+        className: classnames(scrollWrapper),
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        children: [content, /*#__PURE__*/jsx("div", {
+          className: bottomSpacer
         })]
+      }) : /*#__PURE__*/jsx("div", {
+        ref: wrapperRef,
+        style: {
+          flex: 1,
+          minHeight: 0,
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column'
+        },
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        children: content
       })]
-    })
+    })]
   });
 };
-var DrawerMenu = observer(MobileDrawer);
+var DrawerMenu$1 = observer(DrawerMenu);
 
 function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LazyModals$1 = /*#__PURE__*/React.lazy(function () {
-  return import('./ModalsWrapper-8f4bf458.js');
+  return import('./ModalsWrapper-fd0c0509.js');
 });
 function Fullscreen(_ref) {
   var inAbsoluteFullscreen = _ref.inAbsoluteFullscreen;
@@ -9752,7 +9966,7 @@ function Fullscreen(_ref) {
       style: isMobile ? (_c$state$absoluteFull = c.state.absoluteFullscreenStyle) === null || _c$state$absoluteFull === void 0 ? void 0 : _c$state$absoluteFull.mobile : (_c$state$absoluteFull2 = c.state.absoluteFullscreenStyle) === null || _c$state$absoluteFull2 === void 0 ? void 0 : _c$state$absoluteFull2.desktop,
       children: [/*#__PURE__*/jsx(Fullscreen, {
         inAbsoluteFullscreen: true
-      }), /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(DrawerMenu, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), /*#__PURE__*/jsx(Suspense, {
+      }), /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(DrawerMenu$1, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), /*#__PURE__*/jsx(Suspense, {
         fallback: /*#__PURE__*/jsx(Fallback, {}),
         children: /*#__PURE__*/jsx(C, _objectSpread$4({}, c.state))
       })]
@@ -9765,7 +9979,7 @@ function Fullscreen(_ref) {
     style: {
       zIndex: contentStore.fullscreen.overwrittenZIndex
     },
-    children: [!contentStore.fullscreen.hideSpinner && /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(DrawerMenu, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), !contentStore.fullscreen.hideClose && /*#__PURE__*/jsx("div", {
+    children: [!contentStore.fullscreen.hideSpinner && /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(DrawerMenu$1, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), !contentStore.fullscreen.hideClose && /*#__PURE__*/jsx("div", {
       className: closeIcon,
       onClick: onClose,
       "data-test-id": "closeFullscreenBtn",
@@ -10116,10 +10330,10 @@ function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LOG$2 = getLogger('Framework', 'Root');
 var LazyAuth = /*#__PURE__*/React.lazy(function () {
-  return import('./index-c0408136.js');
+  return import('./index-22d234c5.js');
 });
 var LazyModals = /*#__PURE__*/React.lazy(function () {
-  return import('./ModalsWrapper-8f4bf458.js');
+  return import('./ModalsWrapper-fd0c0509.js');
 });
 function ContentComponent() {
   var context = useDivaCoreContext();
@@ -10130,7 +10344,7 @@ function ContentComponent() {
     children: [/*#__PURE__*/jsxs(Suspense, {
       fallback: /*#__PURE__*/jsx(Fragment, {}),
       children: [context.configurationStore.hasAuthentication && /*#__PURE__*/jsx(LazyAuth, {}), context.configurationStore.enableModals && !context.contentStore.fullscreen && !context.contentStore.isFullscreenComponentDefined && /*#__PURE__*/jsx(LazyModals, {})]
-    }), /*#__PURE__*/jsx(Banner$1, {}), /*#__PURE__*/jsx(Fullscreen$1, {}), /*#__PURE__*/jsx(SnackBar, {}), !context.contentStore.isFullscreenComponentDefined && /*#__PURE__*/jsx(DrawerMenu, {}), /*#__PURE__*/jsxs("div", {
+    }), /*#__PURE__*/jsx(Banner$1, {}), /*#__PURE__*/jsx(Fullscreen$1, {}), /*#__PURE__*/jsx(SnackBar, {}), !context.contentStore.isFullscreenComponentDefined && /*#__PURE__*/jsx(DrawerMenu$1, {}), /*#__PURE__*/jsxs("div", {
       style: {
         position: 'relative',
         width: '100%',
@@ -11100,4 +11314,4 @@ LOG.startTransaction({
 });
 window.DIVA_VERSION = "v".concat(process.env.VERSION);
 
-export { AuthorizationHandler as A, Content as C, DivaCore as D, HelpButton as H, ONE_DAY_UNIX as O, ProductHandler as P, RequestStatus as R, SupportHandler as S, useDivaCore as a, AnalyticsHandler as b, OrganizationHandler as c, ClientArticleHandler as d, DivaMockProvider as e, storyBookCoreMock as f, getLogger as g, styleInject as s, useDivaCoreContext as u };
+export { AuthorizationHandler as A, Content as C, DrawerMenu$1 as D, HelpButton as H, ONE_DAY_UNIX as O, ProductHandler as P, RequestStatus as R, SupportHandler as S, useDivaCore as a, DivaCore as b, AnalyticsHandler as c, OrganizationHandler as d, ClientArticleHandler as e, DivaMockProvider as f, getLogger as g, storyBookCoreMock as h, styleInject as s, useDivaCoreContext as u };

package/build/esm/index.js

@@ -1,4 +1,4 @@
-export { b as AnalyticsHandler, A as AuthorizationHandler, d as ClientArticleHandler, C as Content, e as DivaMockProvider, H as HelpButton, O as ONE_DAY_UNIX, c as OrganizationHandler, P as ProductHandler, R as RequestStatus, S as SupportHandler, D as default, g as getLogger, f as storyBookCoreMock, a as useDivaCore } from './index-232f8624.js';
+export { c as AnalyticsHandler, A as AuthorizationHandler, e as ClientArticleHandler, C as Content, f as DivaMockProvider, D as DrawerMenuComponent, H as HelpButton, O as ONE_DAY_UNIX, d as OrganizationHandler, P as ProductHandler, R as RequestStatus, S as SupportHandler, b as default, g as getLogger, h as storyBookCoreMock, a as useDivaCore } from './index-c7cc596b.js';
 export { DivaError, default as DivaUtils } from '@crystaldesign/diva-utils';
 export { Trans, useTranslation } from 'react-i18next';
 export * from '@crystaldesign/basket-model';
@@ -34,9 +34,8 @@ import 'axios';
 import '@crystaldesign/product-handler';
 import 'classnames';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import 'vaul';
-import '@crystaldesign/content-box';
 import '@mui/material';
+import '@crystaldesign/content-box';
 import '@crystaldesign/diva-core';
 import 'react-qr-code';
 import '@mui/icons-material/Close';

package/build/types/core/src/elements/DrawerMenu/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-type Props = {};
-declare const _default: (({}: Props) => React.JSX.Element) & {
+declare const _default: (({}: {}) => React.JSX.Element) & {
     displayName: string;
 };
 export default _default;

package/build/types/core/src/elements/DrawerMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/DrawerMenu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAuB5D,KAAK,KAAK,GAAG,EAAE,CAAC;8BAEU,KAAK;;;AAuI/B,wBAAsC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/DrawerMenu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;;;;AAqL5D,wBAAoC"}

package/build/types/core/src/elements/DrawerMenu/useSwipeToDismiss.d.ts

@@ -0,0 +1,11 @@
+interface SwipeToDismissResult {
+    isDragging: boolean;
+    dragOffset: number;
+    handleTouchStart: (e: React.TouchEvent) => void;
+    handleTouchMove: (e: React.TouchEvent) => void;
+    handleTouchEnd: () => void;
+    wrapperRef: React.RefObject<HTMLDivElement>;
+}
+export declare const useSwipeToDismiss: (direction: "left" | "right" | "top" | "bottom", onDismiss: () => void) => SwipeToDismissResult;
+export {};
+//# sourceMappingURL=useSwipeToDismiss.d.ts.map

package/build/types/core/src/elements/DrawerMenu/useSwipeToDismiss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSwipeToDismiss.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/DrawerMenu/useSwipeToDismiss.ts"],"names":[],"mappings":"AAEA,UAAU,oBAAoB;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC/C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,iBAAiB,cAAe,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,aAAa,MAAM,IAAI,KAAG,oBA6MzG,CAAC"}

package/build/types/core/src/elements/HeightAnimator/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface HeightAnimatorProps {
+    children: React.ReactNode;
+    className?: string;
+    duration?: number;
+}
+export declare const HeightAnimator: React.FC<HeightAnimatorProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map