@razorpay/blade 10.19.0 → 10.20.0

package/build/components/index.development.web.js

@@ -2,11 +2,11 @@ import _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
 import * as React from 'react';
 import React__default, { useMemo, useCallback, useState, useRef, useEffect, useContext, createContext, Fragment as Fragment$1, useImperativeHandle, forwardRef, Children, cloneElement } from 'react';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import styled, { ThemeProvider, css as css$1, keyframes } from 'styled-components';
+import styled, { ThemeProvider, StyleSheetManager, css as css$1, keyframes } from 'styled-components';
 import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
 import { FloatingDelayGroup, useFloating, offset, flip, size as size$1, autoUpdate, useTransitionStyles, FloatingOverlay, FloatingPortal, FloatingFocusManager, CompositeItem, Composite, FloatingArrow, shift, arrow, useDelayGroup, useDelayGroupContext, useHover, useFocus, useRole, useInteractions, useClick, useDismiss } from '@floating-ui/react';
 import _typeof from '@babel/runtime/helpers/typeof';
-import _toConsumableArray$1 from '@babel/runtime/helpers/toConsumableArray';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { jsx as jsx$1, jsxs, Fragment } from 'react/jsx-runtime';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
@@ -3089,6 +3089,16 @@ var getBaseBoxStyles = function getBaseBoxStyles(props) {
   return _objectSpread$6y(_objectSpread$6y({}, getAllProps(props)), getAllMediaQueries(props));
 };
 
+function createStylisCSSHigherSpecificityPlugin() {
+  var stylisCSSHigherSpecificity = function stylisCSSHigherSpecificity(context, _, selectors) {
+    if (context !== -1) return;
+    var _selectors = _slicedToArray(selectors, 1),
+      selector = _selectors[0];
+    selectors[0] = "".concat(selector.repeat(5));
+  };
+  return stylisCSSHigherSpecificity;
+}
+
 function ownKeys$6y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$6x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6y(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
@@ -3162,12 +3172,12 @@ var BottomSheetStackProvider = function BottomSheetStackProvider(_ref) {
   }, [stack]);
   var addBottomSheetToStack = React__default.useCallback(function (id) {
     setStack(function (prev) {
-      return [id].concat(_toConsumableArray$1(prev));
+      return [id].concat(_toConsumableArray(prev));
     });
   }, []);
   var removeBottomSheetFromStack = React__default.useCallback(function (id) {
     setStack(function (prev) {
-      var newStack = _toConsumableArray$1(prev);
+      var newStack = _toConsumableArray(prev);
       var popped = newStack.shift();
       // only pop the stack if the passed in id is matched to the top of the stack
       if (popped === id) return newStack;
@@ -3218,8 +3228,11 @@ var BladeProvider = function BladeProvider(_ref) {
       delay: tooltipDelays,
       children: /*#__PURE__*/jsx$1(ThemeProvider, {
         theme: theme,
-        children: /*#__PURE__*/jsx$1(BottomSheetStackProvider, {
-          children: children
+        children: /*#__PURE__*/jsx$1(StyleSheetManager, {
+          stylisPlugins: [createStylisCSSHigherSpecificityPlugin()],
+          children: /*#__PURE__*/jsx$1(BottomSheetStackProvider, {
+            children: children
+          })
         })
       })
     })
@@ -13013,6 +13026,7 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
     _ref$textDecorationLi = _ref.textDecorationLine,
     textDecorationLine = _ref$textDecorationLi === void 0 ? 'none' : _ref$textDecorationLi,
     numberOfLines = _ref.numberOfLines,
+    wordBreak = _ref.wordBreak,
     _ref$lineHeight = _ref.lineHeight,
     lineHeight = _ref$lineHeight === void 0 ? 100 : _ref$lineHeight,
     textAlign = _ref.textAlign,
@@ -13023,6 +13037,7 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
   var themeFontWeight = theme.typography.fonts.weight[fontWeight];
   var themeLineHeight = makeTypographySize(theme.typography.lineHeights[lineHeight]);
   var truncateStyles = {};
+  var wordBreakStyles = {};
   if (numberOfLines !== undefined) {
     if (isReactNative$4()) {
       truncateStyles = {};
@@ -13036,7 +13051,16 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
       };
     }
   }
-  return _objectSpread$21(_objectSpread$21({
+  if (wordBreak !== undefined) {
+    if (isReactNative$4()) {
+      wordBreakStyles = {};
+    } else {
+      wordBreakStyles = {
+        wordBreak: wordBreak
+      };
+    }
+  }
+  return _objectSpread$21(_objectSpread$21(_objectSpread$21({
     color: textColor,
     fontFamily: themeFontFamily,
     fontSize: themeFontSize,
@@ -13050,11 +13074,11 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
     textAlign: textAlign,
     margin: 0,
     padding: 0
-  }, truncateStyles);
+  }, truncateStyles), wordBreakStyles);
 };
 
-var _excluded$R = ["color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "numberOfLines", "lineHeight", "textAlign"],
-  _excluded2$1 = ["id", "color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "lineHeight", "as", "textAlign", "children", "truncateAfterLines", "className", "style", "accessibilityProps", "componentName", "testID"];
+var _excluded$R = ["color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "numberOfLines", "lineHeight", "textAlign", "wordBreak"],
+  _excluded2$1 = ["id", "color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "lineHeight", "as", "textAlign", "children", "truncateAfterLines", "wordBreak", "className", "style", "accessibilityProps", "componentName", "testID"];
 function ownKeys$21(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$20(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$21(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$21(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledBaseText = /*#__PURE__*/styled.div.withConfig({
@@ -13070,6 +13094,7 @@ var StyledBaseText = /*#__PURE__*/styled.div.withConfig({
     numberOfLines = _ref.numberOfLines,
     lineHeight = _ref.lineHeight,
     textAlign = _ref.textAlign,
+    wordBreak = _ref.wordBreak,
     props = _objectWithoutProperties$1(_ref, _excluded$R);
   var styledPropsCSSObject = useStyledProps(props);
   return _objectSpread$20(_objectSpread$20({}, getBaseTextStyles({
@@ -13082,6 +13107,7 @@ var StyledBaseText = /*#__PURE__*/styled.div.withConfig({
     numberOfLines: numberOfLines,
     lineHeight: lineHeight,
     textAlign: textAlign,
+    wordBreak: wordBreak,
     theme: props.theme
   })), styledPropsCSSObject);
 });
@@ -13098,6 +13124,7 @@ var BaseText = function BaseText(_ref2) {
     textAlign = _ref2.textAlign,
     children = _ref2.children,
     truncateAfterLines = _ref2.truncateAfterLines,
+    wordBreak = _ref2.wordBreak,
     className = _ref2.className,
     style = _ref2.style,
     _ref2$accessibilityPr = _ref2.accessibilityProps,
@@ -13117,6 +13144,7 @@ var BaseText = function BaseText(_ref2) {
     as: as,
     textAlign: textAlign,
     numberOfLines: truncateAfterLines,
+    wordBreak: wordBreak,
     className: className,
     style: style,
     id: id
@@ -13338,7 +13366,7 @@ var Heading = function Heading(_ref2) {
   }));
 };
 
-var _excluded$O = ["as", "variant", "weight", "size", "type", "contrast", "truncateAfterLines", "children", "color", "testID", "textAlign", "textDecorationLine"];
+var _excluded$O = ["as", "variant", "weight", "size", "type", "contrast", "truncateAfterLines", "children", "color", "testID", "textAlign", "textDecorationLine", "wordBreak"];
 function ownKeys$1_(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1Z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1_(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1_(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var validAsValues$1 = ['p', 'span', 'div', 'abbr', 'figcaption', 'cite', 'q'];
@@ -13422,10 +13450,12 @@ var _Text = function _Text(_ref2) {
     testID = _ref2.testID,
     textAlign = _ref2.textAlign,
     textDecorationLine = _ref2.textDecorationLine,
+    wordBreak = _ref2.wordBreak,
     styledProps = _objectWithoutProperties$1(_ref2, _excluded$O);
   var props = _objectSpread$1Z({
     as: as,
-    truncateAfterLines: truncateAfterLines
+    truncateAfterLines: truncateAfterLines,
+    wordBreak: wordBreak
   }, getTextProps({
     variant: variant,
     type: type,
@@ -13774,7 +13804,7 @@ function getActionFromKey(e, isOpen, dropdownTriggerer) {
  **/
 function getIndexByLetter(options, filter) {
   var startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  var orderedOptions = [].concat(_toConsumableArray$1(options.slice(startIndex)), _toConsumableArray$1(options.slice(0, startIndex)));
+  var orderedOptions = [].concat(_toConsumableArray(options.slice(startIndex)), _toConsumableArray(options.slice(0, startIndex)));
   var firstMatch = filterOptions(orderedOptions, filter)[0];
   var allSameLetter = function allSameLetter(array) {
     return array.every(function (letter) {
@@ -14036,7 +14066,7 @@ var useDropdown = function useDropdown() {
     if (existingItemIndex < 0) {
       return;
     }
-    setIndices([].concat(_toConsumableArray$1(selectedIndices.slice(0, existingItemIndex)), _toConsumableArray$1(selectedIndices.slice(existingItemIndex + 1))));
+    setIndices([].concat(_toConsumableArray(selectedIndices.slice(0, existingItemIndex)), _toConsumableArray(selectedIndices.slice(existingItemIndex + 1))));
   };
 
   /**
@@ -14058,7 +14088,7 @@ var useDropdown = function useDropdown() {
         removeOption(index);
         isSelected = false;
       } else {
-        setIndices([].concat(_toConsumableArray$1(selectedIndices), [index]));
+        setIndices([].concat(_toConsumableArray(selectedIndices), [index]));
         isSelected = true;
       }
     } else {
@@ -15147,6 +15177,7 @@ var FormLabel = function FormLabel(_ref) {
       size: isLabelLeftPositioned ? 'medium' : 'small',
       truncateAfterLines: 2,
       weight: "bold",
+      wordBreak: isLabelLeftPositioned ? 'break-word' : undefined,
       children: children
     }), computedAccessibilityNode, necessityLabel]
   });
@@ -32769,7 +32800,7 @@ var _TableRow = function _TableRow(_ref8) {
   useEffect(function () {
     if (isDisabled) {
       setDisabledRows(function (prev) {
-        return [].concat(_toConsumableArray$1(prev), [item.id]);
+        return [].concat(_toConsumableArray(prev), [item.id]);
       });
     }
   }, [isDisabled, item.id, setDisabledRows]);
@@ -35424,281 +35455,237 @@ function useDrag(handler, config) {
   }, config || {}, 'drag');
 }
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-// Older browsers don't support event options, feature detect it.
-
-// Adopted and modified solution from Bohdan Didukh (2017)
-// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi
-
-var hasPassiveEvents = false;
-if (typeof window !== 'undefined') {
-  var passiveTestOptions = {
+/**
+ * name: body-scroll-lock-upgrade
+ * version: v1.1.0
+ * author: Rick.li
+ */
+let hasPassiveEvents = false;
+if (typeof window !== "undefined") {
+  const passiveTestOptions = {
     get passive() {
       hasPassiveEvents = true;
-      return undefined;
+      return void 0;
     }
   };
-  window.addEventListener('testPassive', null, passiveTestOptions);
-  window.removeEventListener('testPassive', null, passiveTestOptions);
+  window.addEventListener("testPassive", null, passiveTestOptions);
+  window.removeEventListener("testPassive", null, passiveTestOptions);
 }
-
-var isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);
-
-
-var locks = [];
-var documentListenerAdded = false;
-var initialClientY = -1;
-var previousBodyOverflowSetting = void 0;
-var previousBodyPosition = void 0;
-var previousBodyPaddingRight = void 0;
-
-// returns true if `el` should be allowed to receive touchmove events.
-var allowTouchMove = function allowTouchMove(el) {
-  return locks.some(function (lock) {
-    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
-      return true;
-    }
-
-    return false;
-  });
-};
-
-var preventDefault = function preventDefault(rawEvent) {
-  var e = rawEvent || window.event;
-
-  // For the case whereby consumers adds a touchmove event listener to document.
-  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
-  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
-  // the touchmove event on document will break.
+const isIosDevice = typeof window !== "undefined" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1);
+let locks = [];
+let locksIndex = /* @__PURE__ */ new Map();
+let documentListenerAdded = false;
+let initialClientY = -1;
+let previousBodyOverflowSetting;
+let htmlStyle;
+let bodyStyle;
+let previousBodyPaddingRight;
+const allowTouchMove = (el) => locks.some((lock) => {
+  if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
+    return true;
+  }
+  return false;
+});
+const preventDefault = (rawEvent) => {
+  const e = rawEvent || window.event;
   if (allowTouchMove(e.target)) {
     return true;
   }
-
-  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
-  if (e.touches.length > 1) return true;
-
-  if (e.preventDefault) e.preventDefault();
-
+  if (e.touches.length > 1)
+    return true;
+  if (e.preventDefault)
+    e.preventDefault();
   return false;
 };
-
-var setOverflowHidden = function setOverflowHidden(options) {
-  // If previousBodyPaddingRight is already set, don't set it again.
-  if (previousBodyPaddingRight === undefined) {
-    var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
-    var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
-
-    if (_reserveScrollBarGap && scrollBarGap > 0) {
-      var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
+const setOverflowHidden = (options) => {
+  if (previousBodyPaddingRight === void 0) {
+    const reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
+    const scrollBarGap = window.innerWidth - document.documentElement.getBoundingClientRect().width;
+    if (reserveScrollBarGap && scrollBarGap > 0) {
+      const computedBodyPaddingRight = parseInt(
+        window.getComputedStyle(document.body).getPropertyValue("padding-right"),
+        10
+      );
       previousBodyPaddingRight = document.body.style.paddingRight;
-      document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px';
+      document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`;
     }
   }
-
-  // If previousBodyOverflowSetting is already set, don't set it again.
-  if (previousBodyOverflowSetting === undefined) {
+  if (previousBodyOverflowSetting === void 0) {
     previousBodyOverflowSetting = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
+    document.body.style.overflow = "hidden";
   }
 };
-
-var restoreOverflowSetting = function restoreOverflowSetting() {
-  if (previousBodyPaddingRight !== undefined) {
+const restoreOverflowSetting = () => {
+  if (previousBodyPaddingRight !== void 0) {
     document.body.style.paddingRight = previousBodyPaddingRight;
-
-    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
-    // can be set again.
-    previousBodyPaddingRight = undefined;
+    previousBodyPaddingRight = void 0;
   }
-
-  if (previousBodyOverflowSetting !== undefined) {
+  if (previousBodyOverflowSetting !== void 0) {
     document.body.style.overflow = previousBodyOverflowSetting;
-
-    // Restore previousBodyOverflowSetting to undefined
-    // so setOverflowHidden knows it can be set again.
-    previousBodyOverflowSetting = undefined;
+    previousBodyOverflowSetting = void 0;
+  }
+};
+const setPositionFixed = () => window.requestAnimationFrame(() => {
+  const $html = document.documentElement;
+  const $body = document.body;
+  if (bodyStyle === void 0) {
+    htmlStyle = { ...$html.style };
+    bodyStyle = { ...$body.style };
+    const { scrollY, scrollX, innerHeight } = window;
+    $html.style.height = "100%";
+    $html.style.overflow = "hidden";
+    $body.style.position = "fixed";
+    $body.style.top = `${-scrollY}px`;
+    $body.style.left = `${-scrollX}px`;
+    $body.style.width = "100%";
+    $body.style.height = "auto";
+    $body.style.overflow = "hidden";
+    setTimeout(
+      () => window.requestAnimationFrame(() => {
+        const bottomBarHeight = innerHeight - window.innerHeight;
+        if (bottomBarHeight && scrollY >= innerHeight) {
+          $body.style.top = -(scrollY + bottomBarHeight) + "px";
+        }
+      }),
+      300
+    );
   }
-};
-
-var setPositionFixed = function setPositionFixed() {
-  return window.requestAnimationFrame(function () {
-    // If previousBodyPosition is already set, don't set it again.
-    if (previousBodyPosition === undefined) {
-      previousBodyPosition = {
-        position: document.body.style.position,
-        top: document.body.style.top,
-        left: document.body.style.left
-      };
-
-      // Update the dom inside an animation frame 
-      var _window = window,
-          scrollY = _window.scrollY,
-          scrollX = _window.scrollX,
-          innerHeight = _window.innerHeight;
-
-      document.body.style.position = 'fixed';
-      document.body.style.top = -scrollY;
-      document.body.style.left = -scrollX;
-
-      setTimeout(function () {
-        return window.requestAnimationFrame(function () {
-          // Attempt to check if the bottom bar appeared due to the position change
-          var bottomBarHeight = innerHeight - window.innerHeight;
-          if (bottomBarHeight && scrollY >= innerHeight) {
-            // Move the content further up so that the bottom bar doesn't hide it
-            document.body.style.top = -(scrollY + bottomBarHeight);
-          }
-        });
-      }, 300);
-    }
-  });
-};
-
-var restorePositionSetting = function restorePositionSetting() {
-  if (previousBodyPosition !== undefined) {
-    // Convert the position from "px" to Int
-    var y = -parseInt(document.body.style.top, 10);
-    var x = -parseInt(document.body.style.left, 10);
-
-    // Restore styles
-    document.body.style.position = previousBodyPosition.position;
-    document.body.style.top = previousBodyPosition.top;
-    document.body.style.left = previousBodyPosition.left;
-
-    // Restore scroll
+});
+const restorePositionSetting = () => {
+  if (bodyStyle !== void 0) {
+    const y = -parseInt(document.body.style.top, 10);
+    const x = -parseInt(document.body.style.left, 10);
+    const $html = document.documentElement;
+    const $body = document.body;
+    $html.style.height = (htmlStyle == null ? void 0 : htmlStyle.height) || "";
+    $html.style.overflow = (htmlStyle == null ? void 0 : htmlStyle.overflow) || "";
+    $body.style.position = bodyStyle.position || "";
+    $body.style.top = bodyStyle.top || "";
+    $body.style.left = bodyStyle.left || "";
+    $body.style.width = bodyStyle.width || "";
+    $body.style.height = bodyStyle.height || "";
+    $body.style.overflow = bodyStyle.overflow || "";
     window.scrollTo(x, y);
-
-    previousBodyPosition = undefined;
+    bodyStyle = void 0;
   }
 };
-
-// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
-var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {
-  return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
-};
-
-var handleScroll = function handleScroll(event, targetElement) {
-  var clientY = event.targetTouches[0].clientY - initialClientY;
-
+const isTargetElementTotallyScrolled = (targetElement) => targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
+const handleScroll = (event, targetElement) => {
+  const clientY = event.targetTouches[0].clientY - initialClientY;
   if (allowTouchMove(event.target)) {
     return false;
   }
-
   if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
-    // element is at the top of its scroll.
     return preventDefault(event);
   }
-
   if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
-    // element is at the bottom of its scroll.
     return preventDefault(event);
   }
-
   event.stopPropagation();
   return true;
 };
-
-var disableBodyScroll = function disableBodyScroll(targetElement, options) {
-  // targetElement must be provided
+const disableBodyScroll = (targetElement, options) => {
   if (!targetElement) {
-    // eslint-disable-next-line no-console
-    console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');
+    console.error(
+      "disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices."
+    );
     return;
   }
-
-  // disableBodyScroll must not have been called on this targetElement before
-  if (locks.some(function (lock) {
-    return lock.targetElement === targetElement;
-  })) {
+  locksIndex.set(
+    targetElement,
+    (locksIndex == null ? void 0 : locksIndex.get(targetElement)) ? (locksIndex == null ? void 0 : locksIndex.get(targetElement)) + 1 : 1
+  );
+  if (locks.some((lock2) => lock2.targetElement === targetElement)) {
     return;
   }
-
-  var lock = {
-    targetElement: targetElement,
+  const lock = {
+    targetElement,
     options: options || {}
   };
-
-  locks = [].concat(_toConsumableArray(locks), [lock]);
-
+  locks = [...locks, lock];
   if (isIosDevice) {
     setPositionFixed();
   } else {
     setOverflowHidden(options);
   }
-
   if (isIosDevice) {
-    targetElement.ontouchstart = function (event) {
+    targetElement.ontouchstart = (event) => {
       if (event.targetTouches.length === 1) {
-        // detect single touch.
         initialClientY = event.targetTouches[0].clientY;
       }
     };
-    targetElement.ontouchmove = function (event) {
+    targetElement.ontouchmove = (event) => {
       if (event.targetTouches.length === 1) {
-        // detect single touch.
         handleScroll(event, targetElement);
       }
     };
-
     if (!documentListenerAdded) {
-      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      document.addEventListener(
+        "touchmove",
+        preventDefault,
+        hasPassiveEvents ? { passive: false } : void 0
+      );
       documentListenerAdded = true;
     }
   }
 };
-
-var clearAllBodyScrollLocks = function clearAllBodyScrollLocks() {
+const clearAllBodyScrollLocks = () => {
   if (isIosDevice) {
-    // Clear all locks ontouchstart/ontouchmove handlers, and the references.
-    locks.forEach(function (lock) {
+    locks.forEach((lock) => {
       lock.targetElement.ontouchstart = null;
       lock.targetElement.ontouchmove = null;
     });
-
     if (documentListenerAdded) {
-      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      document.removeEventListener(
+        "touchmove",
+        preventDefault,
+        hasPassiveEvents ? { passive: false } : void 0
+      );
       documentListenerAdded = false;
     }
-
-    // Reset initial clientY.
     initialClientY = -1;
   }
-
   if (isIosDevice) {
     restorePositionSetting();
   } else {
     restoreOverflowSetting();
   }
-
   locks = [];
+  locksIndex.clear();
 };
-
-var enableBodyScroll = function enableBodyScroll(targetElement) {
+const enableBodyScroll = (targetElement) => {
   if (!targetElement) {
-    // eslint-disable-next-line no-console
-    console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');
+    console.error(
+      "enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices."
+    );
     return;
   }
-
-  locks = locks.filter(function (lock) {
-    return lock.targetElement !== targetElement;
-  });
-
+  locksIndex.set(
+    targetElement,
+    (locksIndex == null ? void 0 : locksIndex.get(targetElement)) ? (locksIndex == null ? void 0 : locksIndex.get(targetElement)) - 1 : 0
+  );
+  if ((locksIndex == null ? void 0 : locksIndex.get(targetElement)) === 0) {
+    locks = locks.filter((lock) => lock.targetElement !== targetElement);
+    locksIndex == null ? void 0 : locksIndex.delete(targetElement);
+  }
   if (isIosDevice) {
     targetElement.ontouchstart = null;
     targetElement.ontouchmove = null;
-
     if (documentListenerAdded && locks.length === 0) {
-      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      document.removeEventListener(
+        "touchmove",
+        preventDefault,
+        hasPassiveEvents ? { passive: false } : void 0
+      );
       documentListenerAdded = false;
     }
   }
-
-  if (isIosDevice) {
-    restorePositionSetting();
-  } else {
-    restoreOverflowSetting();
+  if (locks.length === 0) {
+    if (isIosDevice) {
+      restorePositionSetting();
+    } else {
+      restoreOverflowSetting();
+    }
   }
 };
 
@@ -38068,9 +38055,8 @@ var TourPopover = function TourPopover(_ref) {
   var click = useClick(context, {
     enabled: !isControlled
   });
-  var dismiss = useDismiss(context);
   var role = useRole(context);
-  var _useInteractions = useInteractions([click, dismiss, role]),
+  var _useInteractions = useInteractions([click, role]),
     getFloatingProps = _useInteractions.getFloatingProps;
   var contextValue = React__default.useMemo(function () {
     return {
@@ -38146,17 +38132,21 @@ function useDelayedState(initialState, delay) {
   var _React$useState = React__default.useState(initialState),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     delayedState = _React$useState2[0],
-    setDelayedState = _React$useState2[1];
+    _setDelayedState = _React$useState2[1];
   var timeoutRef = React__default.useRef(undefined);
   React__default.useEffect(function () {
     timeoutRef.current = window.setTimeout(function () {
-      setDelayedState(initialState);
+      _setDelayedState(initialState);
     }, delay);
     return function () {
       window.clearTimeout(timeoutRef.current);
     };
   }, [delay, initialState]);
-  return delayedState;
+  var setDelayedState = React__default.useCallback(function (newState) {
+    _setDelayedState(newState);
+    window.clearTimeout(timeoutRef.current);
+  }, []);
+  return [delayedState, setDelayedState];
 }
 
 /**
@@ -38428,10 +38418,19 @@ var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
     setSize = _useState4[1];
 
   // delayed state is used to let the transition finish before reacting to the state changes
-  var delayedActiveStep = useDelayedState(activeStep, transitionDelay);
-  var delayedSize = useDelayedState(size, transitionDelay);
+  var _useDelayedState = useDelayedState(activeStep, transitionDelay),
+    _useDelayedState2 = _slicedToArray(_useDelayedState, 1),
+    delayedActiveStep = _useDelayedState2[0];
+  var _useDelayedState3 = useDelayedState(size, transitionDelay),
+    _useDelayedState4 = _slicedToArray(_useDelayedState3, 2),
+    delayedSize = _useDelayedState4[0],
+    setDelayedSize = _useDelayedState4[1];
   // keep track of when we are transitioning between steps
   var isTransitioning = useIsTransitioningBetweenSteps(activeStep, transitionDelay);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isScrolling = _useState6[0],
+    setIsScrolling = _useState6[1];
   var currentStepRef = refIdMap.get((_steps$activeStep = steps[activeStep]) === null || _steps$activeStep === void 0 ? void 0 : _steps$activeStep.name);
   var intersection = useIntersectionObserver(currentStepRef, {
     threshold: 0.5
@@ -38478,6 +38477,7 @@ var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
   }, []);
   var updateMaskSize = useCallback(function () {
     var _steps$activeStep2;
+    var shouldSkipDelay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     var ref = refIdMap.get((_steps$activeStep2 = steps[activeStep]) === null || _steps$activeStep2 === void 0 ? void 0 : _steps$activeStep2.name);
     if (!(ref !== null && ref !== void 0 && ref.current)) return;
     var rect = ref.current.getBoundingClientRect();
@@ -38487,7 +38487,15 @@ var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
       width: rect.width,
       height: rect.height
     });
-  }, [activeStep, refIdMap, steps]);
+    if (shouldSkipDelay) {
+      setDelayedSize({
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height
+      });
+    }
+  }, [activeStep, refIdMap, setDelayedSize, steps]);
   var scrollToStep = useCallback(function () {
     var _steps$delayedActiveS;
     var ref = refIdMap.get((_steps$delayedActiveS = steps[delayedActiveStep]) === null || _steps$delayedActiveS === void 0 ? void 0 : _steps$delayedActiveS.name);
@@ -38495,36 +38503,42 @@ var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
 
     // If the element is already in view, don't scroll
     if (intersection !== null && intersection !== void 0 && intersection.isIntersecting) return;
+    setIsScrolling(true);
     smoothScroll(ref.current, {
       behavior: 'smooth',
       block: 'center',
       inline: 'center'
     }).then(function () {
-      updateMaskSize();
+      // wait for the scroll to finish before updating the mask size
+      // We also don't want to delay the size update since its already delayed by the scroll
+      updateMaskSize(true);
     })["finally"](function () {
-      // do nothing
+      setIsScrolling(false);
     });
   }, [delayedActiveStep, refIdMap, steps, updateMaskSize, intersection === null || intersection === void 0 ? void 0 : intersection.isIntersecting]);
 
   // Update the size of the mask when the active step changes
   useIsomorphicLayoutEffect(function () {
     updateMaskSize();
-  }, [isOpen, activeStep, refIdMap, steps, updateMaskSize]);
+  }, [activeStep, updateMaskSize]);
 
   // Scroll into view when the active step changes
   useIsomorphicLayoutEffect(function () {
+    // We need to wait for the transition to finish before scrolling
+    // Otherwise the browser sometimes interrupts the scroll
+    var scrollDelay = 100;
     setTimeout(function () {
       if (!isOpen) return;
       if (isTransitioning) return;
       scrollToStep();
-    }, transitionDelay);
+    }, scrollDelay);
   }, [isOpen, scrollToStep, isTransitioning]);
-  useLockBodyScroll(isOpen);
 
   // reset the mask size when the tour is closed
-  React__default.useEffect(function () {
+  useIsomorphicLayoutEffect(function () {
     if (isOpen) {
-      updateMaskSize();
+      // on initial mount, we don't want to delay the size update
+      updateMaskSize(true);
       onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({
         isOpen: isOpen
       });
@@ -38539,6 +38553,7 @@ var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
+  useLockBodyScroll(isOpen);
   var contextValue = useMemo(function () {
     return {
       attachStep: attachStep,
@@ -38549,7 +38564,7 @@ var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
     value: contextValue,
     children: [/*#__PURE__*/jsx$1(FloatingPortal, {
       children: isOpen ? /*#__PURE__*/jsx$1(SpotlightPopoverTourMask, {
-        isTransitioning: isTransitioning,
+        isTransitioning: isTransitioning || isScrolling,
         padding: theme.spacing[4],
         size: delayedSize
       }) : null