@razorpay/blade 8.1.0 → 8.2.3

package/build/components/index.web.js

@@ -3531,124 +3531,13 @@ var useBreakpoint = function useBreakpoint(_ref) {
   return breakpointAndDevice;
 };
 
-var breakpoints = {
-  base: 0,
-  xs: 320,
-  s: 480,
-  m: 768,
-  l: 1024,
-  xl: 1200
-};
-
-/**
- * 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
-};
-
-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$5v(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$5u(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5v(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5v(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$5u({}, 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$5u({}, 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$5u({}, 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$5u({}, 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: {},
-
-  }
-});
-
+// @TODO: this shall rather be Surface = 'level1' | 'level2' | 'level3' to keep in sync with color tokens
+// export type ActionProperties = {
+//   background: ActionVariants;
+//   border: ActionVariants;
+//   text: ActionVariants;
+//   icon: ActionVariants;
+// };
 var colorSchemeNamesInput = ['light', 'dark', 'system'];
 
 var useColorScheme = function useColorScheme() {
@@ -3859,9 +3748,9 @@ var componentIds$1 = {
   ActionListSection: 'ActionListSection'
 };
 
-function ownKeys$5u(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$5v(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$5t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5u(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5u(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5v(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  * Returns if there is ActionListItem after ActionListSection
@@ -3928,7 +3817,7 @@ var getActionListProperties = function getActionListProperties(children) {
       }); // push the item in the appropriate bucket
 
       if (foundSection) {
-        foundSection === null || foundSection === void 0 ? void 0 : foundSection.data.push(_objectSpread$5t(_objectSpread$5t({}, child.props), {}, {
+        foundSection === null || foundSection === void 0 ? void 0 : foundSection.data.push(_objectSpread$5u(_objectSpread$5u({}, child.props), {}, {
           _index: currentIndex
         }));
       } else {
@@ -3936,7 +3825,7 @@ var getActionListProperties = function getActionListProperties(children) {
         sectionData.push({
           title: currentSection,
           hideDivider: hideDivider,
-          data: [_objectSpread$5t(_objectSpread$5t({}, child.props), {}, {
+          data: [_objectSpread$5u(_objectSpread$5u({}, child.props), {}, {
             _index: currentIndex
           })]
         });
@@ -4050,19 +3939,211 @@ var getBaseActionListStyles = function getBaseActionListStyles(props) {
       _props$surfaceLevel = props.surfaceLevel,
       surfaceLevel = _props$surfaceLevel === void 0 ? 2 : _props$surfaceLevel,
       isInBottomSheet = props.isInBottomSheet;
-  var shadowColor = theme.shadows.color.level[1]; // @TODO: tokenize shadows and replace the logic here
-
-  var elevation200 = "".concat(makeSize(theme.shadows.offsetX.level[1]), " ").concat(makeSize(0), " ").concat(makeSize(theme.shadows.blurRadius.level[1]), " 0px ").concat(shadowColor, ", ").concat(makeSize(theme.shadows.offsetX.level[1]), " ").concat(makeSize(theme.shadows.offsetY.level[2]), " ").concat(makeSize(theme.shadows.blurRadius.level[2]), " 0px ").concat(shadowColor);
   var backgroundColor = theme.colors.surface.background["level".concat(surfaceLevel)].lowContrast;
   return {
     backgroundColor: backgroundColor,
     borderWidth: isInBottomSheet ? undefined : theme.border.width.thin,
     borderColor: theme.colors.surface.border.normal.lowContrast,
     borderRadius: makeSize(theme.border.radius.medium),
-    boxShadow: isInBottomSheet || isReactNative$4() ? undefined : elevation200
+    boxShadow: isInBottomSheet || isReactNative$4() ? undefined : castWebType(theme.elevation.midRaised)
   };
 };
 
+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$5u(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$5t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5u(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5u(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$5t({}, 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$5t({}, 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$5t({}, 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$5t({}, 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,
+
+  /** 28 px */
+  28: 28,
+
+  /** 32 px */
+  32: 32,
+
+  /** 36 px */
+  36: 36,
+
+  /** 40 px */
+  40: 40,
+
+  /** 48 px */
+  48: 48,
+
+  /** 60 px */
+  56: 56,
+
+  /** 100 px */
+  100: 100,
+
+  /** 120 px */
+  120: 120,
+
+  /** 300 px */
+  300: 300,
+
+  /** 584 px */
+  584: 584
+};
+
 var _excluded$4Q = ["base"];
 
 function ownKeys$5t(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; }
@@ -4383,9 +4464,7 @@ var useBladeProvider = function useBladeProvider(_ref) {
 
   var theme = _objectSpread$5r(_objectSpread$5r({}, themeTokens), {}, {
     colors: themeTokens.colors[onColorMode],
-    shadows: _objectSpread$5r(_objectSpread$5r({}, themeTokens.shadows), {}, {
-      color: themeTokens.shadows.color[onColorMode]
-    }),
+    elevation: themeTokens.elevation[onColorMode],
     typography: themeTokens.typography[onDeviceType]
   });
 
@@ -4562,83 +4641,6 @@ var StyledActionList = /*#__PURE__*/styled(BaseBox).withConfig({
   return _objectSpread$5p({}, getBaseActionListStyles(props));
 });
 
-/**
- * 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,
-
-  /** 28 px */
-  28: 28,
-
-  /** 32 px */
-  32: 32,
-
-  /** 36 px */
-  36: 36,
-
-  /** 40 px */
-  40: 40,
-
-  /** 48 px */
-  48: 48,
-
-  /** 60 px */
-  56: 56,
-
-  /** 100 px */
-  100: 100,
-
-  /** 120 px */
-  120: 120,
-
-  /** 300 px */
-  300: 300,
-
-  /** 584 px */
-  584: 584
-};
-
 var getBaseListBoxWrapperStyles = function getBaseListBoxWrapperStyles(props) {
   return {
     maxHeight: props.isInBottomSheet ? undefined : makeSize(size[300]),
@@ -5421,9 +5423,6 @@ var _ActionList = function _ActionList(_ref) {
       dropdownTriggerer = _useDropdown.dropdownTriggerer,
       hasFooterAction = _useDropdown.hasFooterAction;
 
-  var _useTheme = useTheme(),
-      theme = _useTheme.theme;
-
   var _useBottomSheetContex = useBottomSheetContext(),
       isInBottomSheet = _useBottomSheetContex.isInBottomSheet;
 
@@ -5464,7 +5463,6 @@ var _ActionList = function _ActionList(_ref) {
     }) : /*#__PURE__*/jsxs(StyledActionList, _objectSpread$5l(_objectSpread$5l(_objectSpread$5l({
       isInBottomSheet: isInBottomSheet,
       surfaceLevel: surfaceLevel,
-      elevation: isInBottomSheet ? undefined : theme.shadows.androidElevation.level[2],
       id: "".concat(dropdownBaseId, "-actionlist")
     }, makeAccessible({
       role: actionListContainerRole,
@@ -20072,19 +20070,17 @@ var CardSurface = /*#__PURE__*/styled(BaseBox).withConfig({
   componentId: "sc-1pgxikk-0"
 })(function (_ref) {
   var surfaceLevel = _ref.surfaceLevel,
+      elevation = _ref.elevation,
       theme = _ref.theme;
-  var offsetX = theme.shadows.offsetX.level[1];
-  var offsetY = theme.shadows.offsetY.level[1];
-  var blur = theme.shadows.blurRadius.level[1];
-  var shadowColor = theme.shadows.color.level[1];
-  var shadow1 = "".concat(offsetX, "px ").concat(offsetY, "px ").concat(blur, "px 0px ").concat(shadowColor);
-  var shadow2 = "0px 0px 1px 0px ".concat(shadowColor);
   var backgroundColor = theme.colors.surface.background["level".concat(surfaceLevel)].lowContrast;
   return {
     width: '100%',
     display: 'flex',
     flexDirection: 'column',
-    boxShadow: "".concat(shadow1, ", ").concat(shadow2),
+    boxShadow: castWebType(theme.elevation[elevation]),
+    borderWidth: elevation === 'none' ? "".concat(theme.border.width.thin) : undefined,
+    borderStyle: elevation === 'none' ? 'solid' : undefined,
+    borderColor: elevation === 'none' ? "".concat(theme.colors.surface.border.normal.lowContrast) : undefined,
     backgroundColor: backgroundColor,
     boxSizing: 'border-box'
   };
@@ -20124,7 +20120,7 @@ var CardProvider = function CardProvider(_ref) {
   });
 };
 
-var _excluded$l = ["children", "surfaceLevel", "testID"];
+var _excluded$l = ["children", "surfaceLevel", "elevation", "testID", "padding"];
 
 function ownKeys$F(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; }
 
@@ -20148,8 +20144,12 @@ var ComponentIds$2 = {
 var Card = function Card(_ref) {
   var children = _ref.children,
       _ref$surfaceLevel = _ref.surfaceLevel,
-      surfaceLevel = _ref$surfaceLevel === void 0 ? 3 : _ref$surfaceLevel,
+      surfaceLevel = _ref$surfaceLevel === void 0 ? 2 : _ref$surfaceLevel,
+      _ref$elevation = _ref.elevation,
+      elevation = _ref$elevation === void 0 ? 'lowRaised' : _ref$elevation,
       testID = _ref.testID,
+      _ref$padding = _ref.padding,
+      padding = _ref$padding === void 0 ? 'spacing.7' : _ref$padding,
       styledProps = _objectWithoutProperties$1(_ref, _excluded$l);
 
   useVerifyAllowedComponents(children, 'Card', [ComponentIds$2.CardHeader, ComponentIds$2.CardBody, ComponentIds$2.CardFooter]);
@@ -20158,12 +20158,10 @@ var Card = function Card(_ref) {
       name: MetaConstants.Card,
       testID: testID
     })), {}, {
-      paddingLeft: "spacing.7",
-      paddingRight: "spacing.7",
-      paddingTop: "spacing.6",
-      paddingBottom: "spacing.6",
+      padding: padding,
       borderRadius: "medium",
-      surfaceLevel: surfaceLevel
+      surfaceLevel: surfaceLevel,
+      elevation: elevation
     }, getStyledProps(styledProps)), {}, {
       children: children
     }))
@@ -24228,13 +24226,13 @@ var ListItemContentChildren = function ListItemContentChildren(_ref2) {
     display: "flex",
     flexDirection: "row",
     flexWrap: "wrap",
-    children: children.map(function (child) {
+    children: children.map(function (child, index) {
       if (typeof child === 'string') {
         return /*#__PURE__*/jsx(Text, {
           variant: "body",
           size: size,
           children: child
-        });
+        }, index);
       }
 
       return child;
@@ -28055,18 +28053,13 @@ var BottomSheetSurface = /*#__PURE__*/styled.div.withConfig({
   var theme = _ref.theme,
       windowHeight = _ref.windowHeight,
       isDragging = _ref.isDragging;
-  var offsetX = theme.shadows.offsetX.level[1];
-  var offsetY = theme.shadows.offsetY.level[1];
-  var blur = theme.shadows.blurRadius.level[1];
-  var shadowColor = theme.shadows.color.level[1];
-  var shadowLayer1 = "".concat(offsetX, "px ").concat(offsetY, "px ").concat(blur, "px 0px ").concat(shadowColor);
-  var shadowLayer2 = "0px 0px 1px 0px ".concat(shadowColor);
   return {
     background: theme.colors.surface.background.level2.lowContrast,
     borderTopLeftRadius: makeSize(size[16]),
     borderTopRightRadius: makeSize(size[16]),
     borderColor: theme.colors.surface.border.normal.lowContrast,
-    boxShadow: "".concat(shadowLayer1, ", ").concat(shadowLayer2),
+    // this is reverse top elevation of highRaised elevation token
+    boxShadow: '0px -24px 48px -12px hsla(217, 56%, 17%, 0.18)',
     opacity: 0,
     pointerEvents: 'none',
     transitionDuration: isDragging ? undefined : "".concat(makeMotionTime(theme.motion.duration.moderate)),