@razorpay/blade 9.6.1 → 9.7.0

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

@@ -3,244 +3,24 @@ import * as React from 'react';
 import React__default, { useMemo, useCallback, useState, useEffect, useRef, useContext, createContext, Fragment as Fragment$1, Children, cloneElement, forwardRef } from 'react';
 import _toConsumableArray$1 from '@babel/runtime/helpers/toConsumableArray';
 import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { detectOverflow, FloatingDelayGroup, useFloating, autoUpdate, FloatingOverlay, FloatingPortal, FloatingFocusManager, shift, flip, offset, arrow, useTransitionStyles, useDelayGroup, useDelayGroupContext, useHover, useFocus, useRole, useInteractions, FloatingArrow } from '@floating-ui/react';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import styled, { ThemeProvider, css, keyframes } from 'styled-components';
+import { FloatingDelayGroup, useFloating, detectOverflow, autoUpdate, FloatingOverlay, FloatingPortal, FloatingFocusManager, shift, flip, offset, arrow, useTransitionStyles, useDelayGroup, useDelayGroupContext, useHover, useFocus, useRole, useInteractions, FloatingArrow } from '@floating-ui/react';
 import _typeof from '@babel/runtime/helpers/typeof';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
 
-var breakpoints = {
-  base: 0,
-  xs: 320,
-  s: 480,
-  m: 768,
-  l: 1024,
-  xl: 1200
-};
-
-var fontFamily = {
-  text: 'Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-  code: 'monospace'
-};
-
-function ownKeys$62(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$61(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$62(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$62(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var fontWeight = {
-  regular: 400,
-  bold: 700
-};
-({
-  onDesktop: {
-    fonts: {
-      family: _objectSpread$61({}, fontFamily),
-      size: {
-        10: 9,
-        25: 10,
-        50: 11,
-        75: 12,
-        100: 14,
-        200: 16,
-        300: 18,
-        400: 20,
-        500: 22,
-        600: 24,
-        700: 28,
-        800: 32,
-        900: 36,
-        1000: 40
-      },
-      weight: _objectSpread$61({}, fontWeight)
-    },
-    lineHeights: {
-      0: 0,
-      25: 14,
-      50: 16,
-      75: 18,
-      100: 20,
-      200: 24,
-      300: 24,
-      400: 28,
-      500: 32,
-      600: 40,
-      700: 40,
-      800: 48
-    } // letterSpacings: {},
-
-  },
-  onMobile: {
-    fonts: {
-      family: _objectSpread$61({}, fontFamily),
-      size: {
-        10: 9,
-        25: 10,
-        50: 11,
-        75: 12,
-        100: 14,
-        200: 16,
-        300: 16,
-        400: 18,
-        500: 20,
-        600: 20,
-        700: 24,
-        800: 28,
-        900: 32,
-        1000: 32
-      },
-      weight: _objectSpread$61({}, fontWeight)
-    },
-    lineHeights: {
-      0: 0,
-      25: 14,
-      50: 16,
-      75: 18,
-      100: 20,
-      200: 20,
-      300: 24,
-      400: 24,
-      500: 28,
-      600: 32,
-      700: 40,
-      800: 40
-    } // letterSpacings: {},
-
-  }
-});
-
-/**
- * When any of the values are changed here, do change the jsdoc comments in BaseBox/types/spacingTypes.ts as well
+/*
+ * This content is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
  *
- * {@link ../../components/Box/BaseBox/types/spacingTypes.ts}
- */
-var spacing = {
-  0: 0,
-  1: 2,
-  2: 4,
-  3: 8,
-  4: 12,
-  5: 16,
-  6: 20,
-  7: 24,
-  8: 32,
-  9: 40,
-  10: 48,
-  11: 56
-};
-
-/**
- * Size tokens are currently not exposed for users (therefore not available in theme)
+ * This software or document includes material copied from or derived from
+ * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html.
+ * Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang)
  */
-var size = {
-  /** 0 px */
-  0: 0,
-
-  /** 1 px */
-  1: 1,
-
-  /** 2 px */
-  2: 2,
-
-  /** 3 px */
-  3: 3,
-
-  /** 4 px */
-  4: 4,
-
-  /** 5 px */
-  5: 5,
-
-  /** 6 px */
-  6: 6,
-
-  /** 8 px */
-  8: 8,
-
-  /** 10 px */
-  10: 10,
-
-  /** 12 px */
-  12: 12,
-
-  /** 16 px */
-  16: 16,
-
-  /** 18 px */
-  18: 18,
-
-  /** 20 px */
-  20: 20,
-
-  /** 24 px */
-  24: 24,
-
-  /** 28 px */
-  28: 28,
-
-  /** 32 px */
-  32: 32,
-
-  /** 36 px */
-  36: 36,
-
-  /** 40 px */
-  40: 40,
-
-  /** 44 px */
-  44: 44,
-
-  /** 48 px */
-  48: 48,
-
-  /** 60 px */
-  56: 56,
-
-  /** 100 px */
-  100: 100,
-
-  /** 120 px */
-  120: 120,
-
-  /** 140 px */
-  140: 140,
-
-  /** 160 px */
-  160: 160,
-
-  /** 200 px */
-  200: 200,
-
-  /** 300 px */
-  300: 300,
-
-  /** 360 px */
-  360: 360,
-
-  /** 400 px */
-  400: 400,
-
-  /** 584 px */
-  584: 584,
-
-  /** 640 px */
-  640: 640,
-
-  /** 760 px */
-  760: 760,
-
-  /** 800 px */
-  800: 800,
-
-  /** 1024 px */
-  1024: 1024,
-
-  /** 1136 px */
-  1136: 1136
-};
-
 var componentIds$1 = {
   DropdownOverlay: 'DropdownOverlay',
   Dropdown: 'Dropdown',
@@ -527,117 +307,15 @@ var makeInputDisplayValue = function makeInputDisplayValue(selectedIndices, opti
   return "".concat(selectedIndices.length, " items selected");
 };
 
-/**
- * This function calculates the position of dropdown overlay with respect to dropdown trigger element.
- * For non-menus (e.g SelectInput), position is flipped if overflow is on bottom.
- * For menus (e.g. DropdownButton), position is flipped if overflow is on right or bottom.
- * Additional spacing is added to clientHeight to provide spacing above the dropdown trigger.
- */
-var getDropdownOverlayPosition = function getDropdownOverlayPosition(_ref) {
-  var position = _ref.overflow,
-      isMenu = _ref.isMenu,
-      triggererEl = _ref.triggererEl,
-      actionListItemEl = _ref.actionListItemEl;
-  var zeroSpacing = 'spacing.0';
-  var top = position.top,
-      bottom = position.bottom,
-      right = position.right;
-  var newPosition = {
-    left: zeroSpacing
+var getColorScheme = function getColorScheme() {
+  var colorScheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
+  // @TODO: create a useMediaQuery hook with an event listener which will subscribe to changes and move all this logic there
+  var colorSchemeMediaQueryMap = {
+    light: '(prefers-color-scheme: light)',
+    dark: '(prefers-color-scheme: dark)',
+    system: 'default'
   };
-  /**
-   * Calculating thresholds using the height & width of action list element with offset of 16px
-   */
-
-  var WIDTH_THRESHOLD = (Number(actionListItemEl === null || actionListItemEl === void 0 ? void 0 : actionListItemEl.clientWidth) + Number(size[16])) * -1;
-  var HEIGHT_THRESHOLD = (Number(actionListItemEl === null || actionListItemEl === void 0 ? void 0 : actionListItemEl.clientHeight) + Number(size[16])) * -1;
-
-  if (!isMenu) {
-    // In SelectInput, we set position wrt to right so that leftLabel position can be accomodated
-    // without additional offset calculation from left
-    newPosition.left = undefined;
-    newPosition.right = zeroSpacing;
-
-    if (bottom > HEIGHT_THRESHOLD) {
-      newPosition.bottom = "".concat(Number(triggererEl === null || triggererEl === void 0 ? void 0 : triggererEl.clientHeight) + Number(size[32]), "px");
-      newPosition.top = undefined;
-    }
-
-    if (top > HEIGHT_THRESHOLD) {
-      newPosition.top = zeroSpacing;
-      newPosition.bottom = undefined;
-    }
-
-    return newPosition;
-  }
-
-  if (right > WIDTH_THRESHOLD) {
-    newPosition.right = zeroSpacing;
-    newPosition.left = undefined;
-  }
-
-  if (bottom > HEIGHT_THRESHOLD) {
-    newPosition.bottom = "".concat(Number(triggererEl === null || triggererEl === void 0 ? void 0 : triggererEl.clientHeight) + Number(size[20]), "px");
-    newPosition.top = undefined;
-  }
-
-  if (top > HEIGHT_THRESHOLD) {
-    newPosition.top = zeroSpacing;
-    newPosition.bottom = undefined;
-  }
-
-  return newPosition;
-};
-var getDropdownOverflowMiddleware = function getDropdownOverflowMiddleware(_ref2) {
-  var isMenu = _ref2.isMenu,
-      triggererRef = _ref2.triggererRef,
-      actionListItemRef = _ref2.actionListItemRef,
-      setDropdownPosition = _ref2.setDropdownPosition;
-  return {
-    name: 'detectOverflowMiddleware',
-    fn: function fn(state) {
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var overflow, position;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _context.next = 2;
-                return detectOverflow(state, {
-                  elementContext: 'reference'
-                });
-
-              case 2:
-                overflow = _context.sent;
-                position = getDropdownOverlayPosition({
-                  overflow: overflow,
-                  isMenu: isMenu,
-                  triggererEl: triggererRef.current,
-                  actionListItemEl: actionListItemRef.current
-                });
-                setDropdownPosition(position);
-                return _context.abrupt("return", {});
-
-              case 6:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }))();
-    }
-  };
-};
-
-var getColorScheme = function getColorScheme() {
-  var colorScheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
-  // @TODO: create a useMediaQuery hook with an event listener which will subscribe to changes and move all this logic there
-  var colorSchemeMediaQueryMap = {
-    light: '(prefers-color-scheme: light)',
-    dark: '(prefers-color-scheme: dark)',
-    system: 'default'
-  };
-  var supportsMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia === 'function';
+  var supportsMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia === 'function';
 
   if (colorScheme === 'light' || colorScheme === 'dark') {
     return colorScheme;
@@ -1045,9 +723,9 @@ var useBottomSheetAndDropdownGlue = function useBottomSheetAndDropdownGlue() {
 
 var _excluded$4Y = ["isOpen", "setIsOpen", "close", "selectedIndices", "setSelectedIndices", "activeIndex", "setActiveIndex", "shouldIgnoreBlur", "setShouldIgnoreBlur", "isKeydownPressed", "setIsKeydownPressed", "options", "selectionType", "changeCallbackTriggerer", "setChangeCallbackTriggerer", "isControlled", "setControlledValueIndices"];
 
-function ownKeys$61(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 ownKeys$62(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$60(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$61(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$61(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$61(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$62(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$62(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var noop$1 = function noop() {};
 
@@ -1343,7 +1021,7 @@ var useDropdown = function useDropdown() {
     }
   };
 
-  return _objectSpread$60({
+  return _objectSpread$61({
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     close: close,
@@ -1474,9 +1152,9 @@ var isValidAllowedChildren = function isValidAllowedChildren(component, id) {
   return getComponentId(component) === id;
 };
 
-function ownKeys$60(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 ownKeys$61(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$5$(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$60(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$60(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$60(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$61(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$61(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
  * Returns if there is ActionListItem after ActionListSection
  * and an index of last ActionListSection
@@ -1540,124 +1218,352 @@ var getActionListProperties = function getActionListProperties(children) {
         return v.title === currentSection;
       }); // push the item in the appropriate bucket
 
-      if (foundSection) {
-        foundSection === null || foundSection === void 0 ? void 0 : foundSection.data.push(_objectSpread$5$(_objectSpread$5$({}, child.props), {}, {
-          _index: currentIndex
-        }));
-      } else {
-        // create a new bucket
-        sectionData.push({
-          title: currentSection,
-          hideDivider: hideDivider,
-          data: [_objectSpread$5$(_objectSpread$5$({}, child.props), {}, {
-            _index: currentIndex
-          })]
-        });
-      }
+      if (foundSection) {
+        foundSection === null || foundSection === void 0 ? void 0 : foundSection.data.push(_objectSpread$60(_objectSpread$60({}, child.props), {}, {
+          _index: currentIndex
+        }));
+      } else {
+        // create a new bucket
+        sectionData.push({
+          title: currentSection,
+          hideDivider: hideDivider,
+          data: [_objectSpread$60(_objectSpread$60({}, child.props), {}, {
+            _index: currentIndex
+          })]
+        });
+      }
+
+      var clonedChild = /*#__PURE__*/React__default.cloneElement(child, {
+        // @ts-expect-error: TS doesn't understand the child's props
+        _index: currentIndex
+      });
+      return clonedChild;
+    }
+
+    return child;
+  };
+
+  var isActionListItemPresentAfterSection; // eslint-disable-next-line one-var
+
+  var lastActionListSectionIndex;
+
+  if (isReactNative$4()) {
+    // We're reading this so that we can decide whether to show the divider or not.
+    // If ActionListSection is final item and no ActionListItem is present after that, we hide the divider
+    // On web, we do it using descendant styling
+    var _getActionListSection = getActionListSectionPosition(children);
+
+    isActionListItemPresentAfterSection = _getActionListSection.isActionListItemPresentAfterSection;
+    lastActionListSectionIndex = _getActionListSection.lastActionListSectionIndex;
+  } // Looping through ActionListItems to add index to them and get an options array for moving focus between items
+
+
+  var childrenWithId = React__default.Children.map(children, function (child, index) {
+    if ( /*#__PURE__*/React__default.isValidElement(child)) {
+      if (isValidAllowedChildren(child, componentIds.ActionListSection)) {
+        var shouldHideDivider = index === lastActionListSectionIndex && !isActionListItemPresentAfterSection;
+        return /*#__PURE__*/React__default.cloneElement(child, {
+          // @ts-expect-error: TS doesn't understand the child's props
+          children: React__default.Children.map(child.props.children, function (childInSection) {
+            currentSection = child.props.title;
+
+            if (isValidAllowedChildren(childInSection, componentIds.ActionListItem)) {
+              return getActionListItemWithId(childInSection, shouldHideDivider);
+            }
+
+            return childInSection;
+          }),
+          // On web, we handle it with descendant styling in css so no need of JS there
+          _hideDivider: isReactNative$4() ? shouldHideDivider : undefined
+        });
+      }
+
+      if (isValidAllowedChildren(child, componentIds.ActionListItem)) {
+        return getActionListItemWithId(child, true);
+      }
+
+      {
+        throwBladeError({
+          message: "Only ".concat(actionListAllowedChildren.join(', '), " supported inside ActionList"),
+          moduleName: 'ActionList'
+        });
+      }
+    }
+
+    return child;
+  });
+  return {
+    sectionData: sectionData,
+    childrenWithId: childrenWithId,
+    actionListOptions: actionListOptions
+  };
+};
+
+var validateActionListItemProps = function validateActionListItemProps(_ref) {
+  var leading = _ref.leading,
+      trailing = _ref.trailing;
+
+  {
+    React__default.Children.map(trailing, function (child) {
+      if (!isValidAllowedChildren(child, componentIds.ActionListItemIcon) && !isValidAllowedChildren(child, componentIds.ActionListItemText)) {
+        throwBladeError({
+          message: "Only ".concat(componentIds.ActionListItemIcon, " and ").concat(componentIds.ActionListItemText, " are allowed in trailing prop"),
+          moduleName: 'ActionListItem'
+        });
+      }
+    });
+    React__default.Children.map(leading, function (child) {
+      if (!isValidAllowedChildren(child, componentIds.ActionListItemIcon) && !isValidAllowedChildren(child, componentIds.ActionListItemText) && !isValidAllowedChildren(child, componentIds.ActionListItemAsset)) {
+        throwBladeError({
+          message: "Only ".concat(componentIds.ActionListItemIcon, ", ").concat(componentIds.ActionListItemAsset, ", and ").concat(componentIds.ActionListItemText, " are allowed in leading prop"),
+          moduleName: 'ActionListItem'
+        });
+      }
+    });
+  }
+};
+
+var getNormalTextColor = function getNormalTextColor(isDisabled) {
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      isMuted = _ref2.isMuted;
+
+  if (isDisabled) {
+    return 'surface.text.placeholder.lowContrast';
+  }
+
+  if (isMuted) {
+    return 'surface.text.muted.lowContrast';
+  }
+
+  return 'surface.text.normal.lowContrast';
+};
+
+var breakpoints = {
+  base: 0,
+  xs: 320,
+  s: 480,
+  m: 768,
+  l: 1024,
+  xl: 1200
+};
+
+var fontFamily = {
+  text: 'Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+  code: 'monospace'
+};
+
+function ownKeys$60(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$5$(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$60(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$60(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var fontWeight = {
+  regular: 400,
+  bold: 700
+};
+({
+  onDesktop: {
+    fonts: {
+      family: _objectSpread$5$({}, fontFamily),
+      size: {
+        10: 9,
+        25: 10,
+        50: 11,
+        75: 12,
+        100: 14,
+        200: 16,
+        300: 18,
+        400: 20,
+        500: 22,
+        600: 24,
+        700: 28,
+        800: 32,
+        900: 36,
+        1000: 40
+      },
+      weight: _objectSpread$5$({}, fontWeight)
+    },
+    lineHeights: {
+      0: 0,
+      25: 14,
+      50: 16,
+      75: 18,
+      100: 20,
+      200: 24,
+      300: 24,
+      400: 28,
+      500: 32,
+      600: 40,
+      700: 40,
+      800: 48
+    } // letterSpacings: {},
+
+  },
+  onMobile: {
+    fonts: {
+      family: _objectSpread$5$({}, fontFamily),
+      size: {
+        10: 9,
+        25: 10,
+        50: 11,
+        75: 12,
+        100: 14,
+        200: 16,
+        300: 16,
+        400: 18,
+        500: 20,
+        600: 20,
+        700: 24,
+        800: 28,
+        900: 32,
+        1000: 32
+      },
+      weight: _objectSpread$5$({}, fontWeight)
+    },
+    lineHeights: {
+      0: 0,
+      25: 14,
+      50: 16,
+      75: 18,
+      100: 20,
+      200: 20,
+      300: 24,
+      400: 24,
+      500: 28,
+      600: 32,
+      700: 40,
+      800: 40
+    } // letterSpacings: {},
+
+  }
+});
+
+/**
+ * When any of the values are changed here, do change the jsdoc comments in BaseBox/types/spacingTypes.ts as well
+ *
+ * {@link ../../components/Box/BaseBox/types/spacingTypes.ts}
+ */
+var spacing = {
+  0: 0,
+  1: 2,
+  2: 4,
+  3: 8,
+  4: 12,
+  5: 16,
+  6: 20,
+  7: 24,
+  8: 32,
+  9: 40,
+  10: 48,
+  11: 56
+};
+
+/**
+ * Size tokens are currently not exposed for users (therefore not available in theme)
+ */
+var size = {
+  /** 0 px */
+  0: 0,
+
+  /** 1 px */
+  1: 1,
+
+  /** 2 px */
+  2: 2,
+
+  /** 3 px */
+  3: 3,
+
+  /** 4 px */
+  4: 4,
+
+  /** 5 px */
+  5: 5,
+
+  /** 6 px */
+  6: 6,
+
+  /** 8 px */
+  8: 8,
+
+  /** 10 px */
+  10: 10,
+
+  /** 12 px */
+  12: 12,
+
+  /** 16 px */
+  16: 16,
+
+  /** 18 px */
+  18: 18,
+
+  /** 20 px */
+  20: 20,
+
+  /** 24 px */
+  24: 24,
 
-      var clonedChild = /*#__PURE__*/React__default.cloneElement(child, {
-        // @ts-expect-error: TS doesn't understand the child's props
-        _index: currentIndex
-      });
-      return clonedChild;
-    }
+  /** 28 px */
+  28: 28,
 
-    return child;
-  };
+  /** 32 px */
+  32: 32,
 
-  var isActionListItemPresentAfterSection; // eslint-disable-next-line one-var
+  /** 36 px */
+  36: 36,
 
-  var lastActionListSectionIndex;
+  /** 40 px */
+  40: 40,
 
-  if (isReactNative$4()) {
-    // We're reading this so that we can decide whether to show the divider or not.
-    // If ActionListSection is final item and no ActionListItem is present after that, we hide the divider
-    // On web, we do it using descendant styling
-    var _getActionListSection = getActionListSectionPosition(children);
+  /** 44 px */
+  44: 44,
 
-    isActionListItemPresentAfterSection = _getActionListSection.isActionListItemPresentAfterSection;
-    lastActionListSectionIndex = _getActionListSection.lastActionListSectionIndex;
-  } // Looping through ActionListItems to add index to them and get an options array for moving focus between items
+  /** 48 px */
+  48: 48,
 
+  /** 60 px */
+  56: 56,
 
-  var childrenWithId = React__default.Children.map(children, function (child, index) {
-    if ( /*#__PURE__*/React__default.isValidElement(child)) {
-      if (isValidAllowedChildren(child, componentIds.ActionListSection)) {
-        var shouldHideDivider = index === lastActionListSectionIndex && !isActionListItemPresentAfterSection;
-        return /*#__PURE__*/React__default.cloneElement(child, {
-          // @ts-expect-error: TS doesn't understand the child's props
-          children: React__default.Children.map(child.props.children, function (childInSection) {
-            currentSection = child.props.title;
+  /** 100 px */
+  100: 100,
 
-            if (isValidAllowedChildren(childInSection, componentIds.ActionListItem)) {
-              return getActionListItemWithId(childInSection, shouldHideDivider);
-            }
+  /** 120 px */
+  120: 120,
 
-            return childInSection;
-          }),
-          // On web, we handle it with descendant styling in css so no need of JS there
-          _hideDivider: isReactNative$4() ? shouldHideDivider : undefined
-        });
-      }
+  /** 140 px */
+  140: 140,
 
-      if (isValidAllowedChildren(child, componentIds.ActionListItem)) {
-        return getActionListItemWithId(child, true);
-      }
+  /** 160 px */
+  160: 160,
 
-      {
-        throwBladeError({
-          message: "Only ".concat(actionListAllowedChildren.join(', '), " supported inside ActionList"),
-          moduleName: 'ActionList'
-        });
-      }
-    }
+  /** 200 px */
+  200: 200,
 
-    return child;
-  });
-  return {
-    sectionData: sectionData,
-    childrenWithId: childrenWithId,
-    actionListOptions: actionListOptions
-  };
-};
+  /** 300 px */
+  300: 300,
 
-var validateActionListItemProps = function validateActionListItemProps(_ref) {
-  var leading = _ref.leading,
-      trailing = _ref.trailing;
+  /** 360 px */
+  360: 360,
 
-  {
-    React__default.Children.map(trailing, function (child) {
-      if (!isValidAllowedChildren(child, componentIds.ActionListItemIcon) && !isValidAllowedChildren(child, componentIds.ActionListItemText)) {
-        throwBladeError({
-          message: "Only ".concat(componentIds.ActionListItemIcon, " and ").concat(componentIds.ActionListItemText, " are allowed in trailing prop"),
-          moduleName: 'ActionListItem'
-        });
-      }
-    });
-    React__default.Children.map(leading, function (child) {
-      if (!isValidAllowedChildren(child, componentIds.ActionListItemIcon) && !isValidAllowedChildren(child, componentIds.ActionListItemText) && !isValidAllowedChildren(child, componentIds.ActionListItemAsset)) {
-        throwBladeError({
-          message: "Only ".concat(componentIds.ActionListItemIcon, ", ").concat(componentIds.ActionListItemAsset, ", and ").concat(componentIds.ActionListItemText, " are allowed in leading prop"),
-          moduleName: 'ActionListItem'
-        });
-      }
-    });
-  }
-};
+  /** 400 px */
+  400: 400,
 
-var getNormalTextColor = function getNormalTextColor(isDisabled) {
-  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      isMuted = _ref2.isMuted;
+  /** 584 px */
+  584: 584,
 
-  if (isDisabled) {
-    return 'surface.text.placeholder.lowContrast';
-  }
+  /** 640 px */
+  640: 640,
 
-  if (isMuted) {
-    return 'surface.text.muted.lowContrast';
-  }
+  /** 760 px */
+  760: 760,
 
-  return 'surface.text.normal.lowContrast';
+  /** 800 px */
+  800: 800,
+
+  /** 1024 px */
+  1024: 1024,
+
+  /** 1136 px */
+  1136: 1136
 };
 
 var getBaseListBoxWrapperStyles = function getBaseListBoxWrapperStyles(props) {
@@ -4503,9 +4409,9 @@ function _objectSpread$5Q(target) { for (var i = 1; i < arguments.length; i++) {
 
 var validateBackgroundString = function validateBackgroundString(stringBackgroundColorValue) {
   {
-    if (!stringBackgroundColorValue.startsWith('surface.background') && !stringBackgroundColorValue.startsWith('brand.')) {
+    if (!stringBackgroundColorValue.startsWith('surface.background') && !stringBackgroundColorValue.startsWith('brand.') && stringBackgroundColorValue !== 'transparent') {
       throwBladeError({
-        message: "Oops! Currently you can only use `surface.background.*` and `brand.*` tokens with backgroundColor property but we received `".concat(stringBackgroundColorValue, "` instead.\n\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss \u2728"),
+        message: "Oops! Currently you can only use `transparent`, `surface.background.*`, and `brand.*` tokens with backgroundColor property but we received `".concat(stringBackgroundColorValue, "` instead.\n\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss \u2728"),
         moduleName: 'Box'
       });
     }
@@ -19258,7 +19164,7 @@ var _Badge = function _Badge(_ref2) {
     }
   };
   return /*#__PURE__*/jsx(BaseBox, _objectSpread$12(_objectSpread$12(_objectSpread$12({
-    display: "flex"
+    display: isReactNative$4() ? 'flex' : 'inline-flex'
   }, metaAttribute({
     name: MetaConstants.Badge,
     testID: testID
@@ -19272,7 +19178,7 @@ var _Badge = function _Badge(_ref2) {
         paddingLeft: horizontalPadding$1[size],
         paddingTop: verticalPadding$1[size],
         paddingBottom: verticalPadding$1[size],
-        display: isReactNative$4() ? 'flex' : 'inline-flex',
+        display: "flex",
         flexDirection: "row",
         justifyContent: "center",
         alignItems: "center",
@@ -19712,7 +19618,7 @@ var Counter = function Counter(_ref2) {
     }
   };
   return /*#__PURE__*/jsx(BaseBox, _objectSpread$Z(_objectSpread$Z(_objectSpread$Z({
-    display: "flex"
+    display: isReactNative$4() ? 'flex' : 'inline-flex'
   }, metaAttribute({
     name: MetaConstants.Counter,
     testID: testID
@@ -19726,7 +19632,7 @@ var Counter = function Counter(_ref2) {
         paddingLeft: horizontalPadding[size],
         paddingTop: verticalPadding[size],
         paddingBottom: verticalPadding[size],
-        display: isReactNative$4() ? 'flex' : 'inline-flex',
+        display: "flex",
         flexDirection: "row",
         justifyContent: "center",
         alignItems: "center",
@@ -20697,15 +20603,119 @@ var AnimatedOverlay = /*#__PURE__*/styled(StyledDropdownOverlay).withConfig({
 })(function (props) {
   return css(["", " transform:translateY(", ");opacity:0;z-index:99;pointer-events:", ";"], props.transition, makeSize(props.theme.spacing[3]), props.isOpen ? 'all' : 'none');
 });
+/**
+ * This function calculates the position of dropdown overlay with respect to dropdown trigger element.
+ * For non-menus (e.g SelectInput), position is flipped if overflow is on bottom.
+ * For menus (e.g. DropdownButton), position is flipped if overflow is on right or bottom.
+ * Additional spacing is added to clientHeight to provide spacing above the dropdown trigger.
+ */
+
+var getDropdownOverlayPosition = function getDropdownOverlayPosition(_ref) {
+  var position = _ref.overflow,
+      isMenu = _ref.isMenu,
+      triggererEl = _ref.triggererEl,
+      actionListItemEl = _ref.actionListItemEl;
+  var zeroSpacing = 'spacing.0';
+  var top = position.top,
+      bottom = position.bottom,
+      right = position.right;
+  var newPosition = {
+    left: zeroSpacing
+  };
+  /**
+   * Calculating thresholds using the height & width of action list element with offset of 16px
+   */
+
+  var WIDTH_THRESHOLD = (Number(actionListItemEl === null || actionListItemEl === void 0 ? void 0 : actionListItemEl.clientWidth) + Number(size[16])) * -1;
+  var HEIGHT_THRESHOLD = (Number(actionListItemEl === null || actionListItemEl === void 0 ? void 0 : actionListItemEl.clientHeight) + Number(size[16])) * -1;
+
+  if (!isMenu) {
+    // In SelectInput, we set position wrt to right so that leftLabel position can be accomodated
+    // without additional offset calculation from left
+    newPosition.left = undefined;
+    newPosition.right = zeroSpacing;
+
+    if (bottom > HEIGHT_THRESHOLD) {
+      newPosition.bottom = "".concat(Number(triggererEl === null || triggererEl === void 0 ? void 0 : triggererEl.clientHeight) + Number(size[32]), "px");
+      newPosition.top = undefined;
+    }
+
+    if (top > HEIGHT_THRESHOLD) {
+      newPosition.top = zeroSpacing;
+      newPosition.bottom = undefined;
+    }
+
+    return newPosition;
+  }
+
+  if (right > WIDTH_THRESHOLD) {
+    newPosition.right = zeroSpacing;
+    newPosition.left = undefined;
+  }
+
+  if (bottom > HEIGHT_THRESHOLD) {
+    newPosition.bottom = "".concat(Number(triggererEl === null || triggererEl === void 0 ? void 0 : triggererEl.clientHeight) + Number(size[20]), "px");
+    newPosition.top = undefined;
+  }
+
+  if (top > HEIGHT_THRESHOLD) {
+    newPosition.top = zeroSpacing;
+    newPosition.bottom = undefined;
+  }
+
+  return newPosition;
+};
+
+var getDropdownOverflowMiddleware = function getDropdownOverflowMiddleware(_ref2) {
+  var isMenu = _ref2.isMenu,
+      triggererRef = _ref2.triggererRef,
+      actionListItemRef = _ref2.actionListItemRef,
+      setDropdownPosition = _ref2.setDropdownPosition;
+  return {
+    name: 'detectOverflowMiddleware',
+    fn: function fn(state) {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var overflow, position;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return detectOverflow(state, {
+                  elementContext: 'reference'
+                });
+
+              case 2:
+                overflow = _context.sent;
+                position = getDropdownOverlayPosition({
+                  overflow: overflow,
+                  isMenu: isMenu,
+                  triggererEl: triggererRef.current,
+                  actionListItemEl: actionListItemRef.current
+                });
+                setDropdownPosition(position);
+                return _context.abrupt("return", {});
+
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }))();
+    }
+  };
+};
 /**
  * Overlay of dropdown
  *
  * Wrap your ActionList within this component
  */
 
-var _DropdownOverlay = function _DropdownOverlay(_ref) {
-  var children = _ref.children,
-      testID = _ref.testID;
+
+var _DropdownOverlay = function _DropdownOverlay(_ref3) {
+  var children = _ref3.children,
+      testID = _ref3.testID;
 
   var _useDropdown = useDropdown(),
       isOpen = _useDropdown.isOpen,
@@ -23619,15 +23629,14 @@ var Indicator = function Indicator(_ref) {
     }
   }, [size$1]);
   var dimensions = getDimension();
-  var isReactNative = getPlatformType() === 'react-native';
-  var isWeb = !isReactNative;
+  var isWeb = !isReactNative$4();
   var a11yProps = makeAccessible(_objectSpread$D({
     label: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : childrenString
   }, isWeb && {
     role: 'status'
   }));
   return /*#__PURE__*/jsx(BaseBox, _objectSpread$D(_objectSpread$D(_objectSpread$D(_objectSpread$D({
-    display: "flex"
+    display: isWeb ? 'inline-flex' : 'flex'
   }, a11yProps), metaAttribute({
     name: MetaConstants.Indicator,
     testID: testID