@razorpay/blade 6.4.0 → 6.5.1

package/build/utils/index.web.js

@@ -2795,6 +2795,7 @@ var MetaConstants = {
   ActionListSection: 'action-list-section',
   Alert: 'alert',
   Badge: 'badge',
+  Box: 'box',
   Button: 'button',
   Checkbox: 'checkbox',
   CheckboxGroup: 'checkbox-group',
@@ -3235,6 +3236,12 @@ function get(object, path, defaultValue) {
 
 var get_1 = get;
 
+var getMediaQuery = function getMediaQuery(_ref) {
+  var min = _ref.min,
+      max = _ref.max;
+  return "screen and (min-width: ".concat(min, "px)").concat(max ? " and (max-width: ".concat(max, "px)") : '');
+};
+
 var getPlatformType = function getPlatformType() {
   if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
     return 'react-native';
@@ -4809,20 +4816,18 @@ var useBreakpoint = function useBreakpoint(_ref) {
   var supportsMatchMedia = typeof document !== 'undefined' && typeof window !== 'undefined' && typeof ((_window = window) === null || _window === void 0 ? void 0 : _window.matchMedia) === 'function';
   var breakpointsTokenAndQueryCollection = useMemo(function () {
     return supportsMatchMedia ? Object.entries(breakpoints).map(function (_ref2, index, breakpointsArray) {
+      var _breakpointsArray;
+
       var _ref3 = _slicedToArray(_ref2, 2),
           token = _ref3[0],
           screenSize = _ref3[1];
 
-      var mediaQuery = '';
-
-      if (token === 'max') {
-        mediaQuery = "screen and (min-width: ".concat(screenSize, "px)");
-      } else if (breakpointsArray[index - 1]) {
-        mediaQuery = "screen and (min-width: ".concat(breakpointsArray[index - 1][1] + 1, "px) and (max-width: ").concat(screenSize, "px)");
-      } else {
-        mediaQuery = "screen and (max-width: ".concat(screenSize, "px)");
-      }
-
+      var min = screenSize;
+      var maxValue = (_breakpointsArray = breakpointsArray[index + 1]) === null || _breakpointsArray === void 0 ? void 0 : _breakpointsArray[1];
+      var mediaQuery = getMediaQuery({
+        min: min,
+        max: maxValue ? maxValue - 1 : undefined
+      });
       return {
         token: token,
         screenSize: screenSize,
@@ -4837,7 +4842,7 @@ var useBreakpoint = function useBreakpoint(_ref) {
     if (platform === 'react-native') {
       matchedDeviceType = deviceType.mobile;
     } else if (platform === 'browser') {
-      if (matchedBreakpoint && ['xs', 's', 'm'].includes(matchedBreakpoint)) {
+      if (matchedBreakpoint && ['base', 'xs', 's'].includes(matchedBreakpoint)) {
         // tablet is also categorised as mobile
         matchedDeviceType = deviceType.mobile;
       } else {
@@ -5111,5 +5116,5 @@ var castNativeType = function castNativeType(value) {
   return value;
 };
 
-export { MetaConstants, Platform, castNativeType, castWebType, cloneDeep_1 as cloneDeep, getColorScheme, getComponentId, get_1 as getIn, getOS, getPlatformType, isAndroid, isEmpty_1 as isEmpty, isEqual_1 as isEqual, isPartialMatchObjectKeys, isReactNative, isValidAllowedChildren, makeAccessible, makeBezier, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, merge_1 as merge, metaAttribute, setupMatchMediaMock, testID, toTitleCase, useBreakpoint, useColorScheme, usePrevious };
+export { MetaConstants, Platform, castNativeType, castWebType, cloneDeep_1 as cloneDeep, getColorScheme, getComponentId, get_1 as getIn, getMediaQuery, getOS, getPlatformType, isAndroid, isEmpty_1 as isEmpty, isEqual_1 as isEqual, isPartialMatchObjectKeys, isReactNative, isValidAllowedChildren, makeAccessible, makeBezier, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, merge_1 as merge, metaAttribute, setupMatchMediaMock, testID, toTitleCase, useBreakpoint, useColorScheme, usePrevious };
 //# sourceMappingURL=index.web.js.map