@razorpay/blade 6.7.0 → 7.0.0

package/build/components/index.web.js

@@ -3592,7 +3592,7 @@ var fontWeight = {
         300: 18,
         400: 20,
         500: 22,
-        600: 25,
+        600: 24,
         700: 28,
         800: 32,
         900: 36,
@@ -3601,15 +3601,18 @@ var fontWeight = {
       weight: _objectSpread$5j({}, fontWeight)
     },
     lineHeights: {
-      s: 16,
-      m: 16,
-      l: 20,
-      xl: 24,
-      '2xl': 24,
-      '3xl': 28,
-      '4xl': 40,
-      '5xl': 42,
-      '6xl': 60
+      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: {},
 
   },
@@ -3617,33 +3620,36 @@ var fontWeight = {
     fonts: {
       family: _objectSpread$5j({}, fontFamily),
       size: {
-        10: 10,
-        25: 11,
+        10: 9,
+        25: 10,
         50: 11,
         75: 12,
-        100: 15,
-        200: 17,
-        300: 18,
-        400: 20,
-        500: 22,
-        600: 22,
+        100: 14,
+        200: 16,
+        300: 16,
+        400: 18,
+        500: 20,
+        600: 20,
         700: 24,
         800: 28,
-        900: 29,
-        1000: 29
+        900: 32,
+        1000: 32
       },
       weight: _objectSpread$5j({}, fontWeight)
     },
     lineHeights: {
-      s: 16,
-      m: 18,
-      l: 24,
-      xl: 28,
-      '2xl': 24,
-      '3xl': 28,
-      '4xl': 32,
-      '5xl': 30,
-      '6xl': 40
+      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: {},
 
   }
@@ -5202,7 +5208,7 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
       _ref$textDecorationLi = _ref.textDecorationLine,
       textDecorationLine = _ref$textDecorationLi === void 0 ? 'none' : _ref$textDecorationLi,
       _ref$lineHeight = _ref.lineHeight,
-      lineHeight = _ref$lineHeight === void 0 ? 'l' : _ref$lineHeight,
+      lineHeight = _ref$lineHeight === void 0 ? 100 : _ref$lineHeight,
       textAlign = _ref.textAlign,
       theme = _ref.theme;
   var textColor = get_1(theme.colors, color);
@@ -5536,7 +5542,7 @@ var getProps$3 = function getProps(_ref) {
     fontSize: 600,
     fontWeight: 'bold',
     fontStyle: 'normal',
-    lineHeight: '4xl',
+    lineHeight: 700,
     fontFamily: 'text',
     accessibilityProps: isPlatformWeb ? {} : {
       role: 'heading'
@@ -5547,15 +5553,19 @@ var getProps$3 = function getProps(_ref) {
 
   if (size === 'small') {
     props.fontSize = 600;
-    props.lineHeight = '4xl';
+    props.lineHeight = 500;
     props.as = isPlatformWeb ? 'h3' : undefined;
   } else if (size === 'medium') {
     props.fontSize = 700;
-    props.lineHeight = '4xl';
+    props.lineHeight = 600;
     props.as = isPlatformWeb ? 'h2' : undefined;
   } else if (size === 'large') {
+    props.fontSize = 800;
+    props.lineHeight = 700;
+    props.as = isPlatformWeb ? 'h1' : undefined;
+  } else if (size === 'xlarge') {
     props.fontSize = 1000;
-    props.lineHeight = '6xl';
+    props.lineHeight = 800;
     props.as = isPlatformWeb ? 'h1' : undefined;
   }
 
@@ -5604,7 +5614,7 @@ var getProps$2 = function getProps(_ref) {
     fontSize: 200,
     fontWeight: weight !== null && weight !== void 0 ? weight : 'bold',
     fontStyle: 'normal',
-    lineHeight: 'xl',
+    lineHeight: 300,
     fontFamily: 'text',
     accessibilityProps: isPlatformWeb ? {} : {
       role: 'heading'
@@ -5616,15 +5626,15 @@ var getProps$2 = function getProps(_ref) {
   if (variant === 'regular') {
     if (!size || size === 'small') {
       props.fontSize = 200;
-      props.lineHeight = '2xl';
+      props.lineHeight = 300;
       props.as = isPlatformWeb ? 'h6' : undefined;
     } else if (size === 'medium') {
       props.fontSize = 300;
-      props.lineHeight = '3xl';
+      props.lineHeight = 200;
       props.as = isPlatformWeb ? 'h5' : undefined;
     } else if (size === 'large') {
       props.fontSize = 400;
-      props.lineHeight = '3xl';
+      props.lineHeight = 400;
       props.as = isPlatformWeb ? 'h4' : undefined;
     }
   } else if (variant === 'subheading') {
@@ -5637,7 +5647,7 @@ var getProps$2 = function getProps(_ref) {
     }
 
     props.fontSize = 75;
-    props.lineHeight = 's';
+    props.lineHeight = 50;
     props.as = isPlatformWeb ? 'h6' : undefined;
   }
 
@@ -5692,7 +5702,7 @@ var getTextProps = function getTextProps(_ref) {
     fontSize: 100,
     fontWeight: weight !== null && weight !== void 0 ? weight : 'regular',
     fontStyle: 'normal',
-    lineHeight: 'l',
+    lineHeight: 100,
     fontFamily: 'text',
     forwardedAs: isPlatformWeb ? 'p' : undefined,
     componentName: 'text',
@@ -5701,26 +5711,35 @@ var getTextProps = function getTextProps(_ref) {
   };
 
   if (variant === 'body') {
+    if (size === 'xsmall') {
+      props.fontSize = 25;
+      props.lineHeight = 50;
+    }
+
     if (size === 'small') {
       props.fontSize = 75;
-      props.lineHeight = 's';
+      props.lineHeight = 50;
     }
 
-    if (size === 'xsmall') {
-      props.fontSize = 25;
-      props.lineHeight = 's';
+    if (size === 'medium') {
+      props.fontSize = 100;
+      props.lineHeight = 100;
     }
-  } else if (variant === 'caption') {
-    if (size === 'xsmall') {
-      throw new Error("[Blade: Text]: size cannot be 'xsmall' when variant is 'caption'");
+
+    if (size === 'large') {
+      props.fontSize = 200;
+      props.lineHeight = 300;
     }
+  }
 
-    if (size === 'small') {
-      throw new Error("[Blade: Text]: size cannot be 'small' when variant is 'caption'");
+  if (variant === 'caption') {
+    if (size === 'medium') {
+      props.fontSize = 50;
+      props.lineHeight = 50;
+    } else {
+      throw new Error("[Blade: Text]: size cannot be '".concat(size, "' when variant is 'caption'"));
     }
 
-    props.fontSize = 50;
-    props.lineHeight = 's';
     props.fontStyle = 'italic';
   }
 
@@ -5787,7 +5806,7 @@ var Text = function Text(_ref3) {
   }));
 };
 
-var _excluded$4H = ["children", "size", "testID"];
+var _excluded$4H = ["children", "size", "weight", "testID"];
 
 function ownKeys$55(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; }
 
@@ -5795,13 +5814,22 @@ function _objectSpread$55(target) { for (var i = 1; i < arguments.length; i++) {
 var platformType = getPlatformType();
 var isPlatformWeb = platformType === 'browser' || platformType === 'node';
 
-var getCodeFontSize = function getCodeFontSize(size) {
+var getCodeFontSizeAndLineHeight = function getCodeFontSizeAndLineHeight(size) {
   switch (size) {
     case 'medium':
-      return 100;
+      return {
+        fontSize: 75,
+        lineHeight: 75
+      };
+
+    case 'small':
+      return {
+        fontSize: 25,
+        lineHeight: 25
+      };
 
     default:
-      return 75;
+      throw new Error("[Blade Code]: Unexpected size: ".concat(size));
   }
 };
 
@@ -5815,9 +5843,8 @@ var CodeContainer = /*#__PURE__*/styled(BaseBox).withConfig({
     backgroundColor: props.theme.colors.brand.gray.a50.lowContrast,
     borderRadius: props.theme.border.radius.medium,
     display: isPlatformWeb ? 'inline-block' : undefined,
-    // Removing the line height of container to remove extra surrounding space in background
-    // The text itself will still have the normal lineHeight
-    lineHeight: makeTypographySize(props.theme.typography.lineHeights.s)
+    verticalAlign: 'middle',
+    lineHeight: makeTypographySize(props.theme.typography.lineHeights[0])
   };
 });
 /**
@@ -5851,9 +5878,15 @@ var Code = function Code(_ref) {
   var children = _ref.children,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'small' : _ref$size,
+      _ref$weight = _ref.weight,
+      weight = _ref$weight === void 0 ? 'regular' : _ref$weight,
       testID = _ref.testID,
       styledProps = _objectWithoutProperties(_ref, _excluded$4H);
 
+  var _getCodeFontSizeAndLi = getCodeFontSizeAndLineHeight(size),
+      fontSize = _getCodeFontSizeAndLi.fontSize,
+      lineHeight = _getCodeFontSizeAndLi.lineHeight;
+
   return /*#__PURE__*/jsx(CodeContainer, _objectSpread$55(_objectSpread$55(_objectSpread$55({
     size: size,
     as: isPlatformWeb ? 'span' : undefined
@@ -5864,8 +5897,10 @@ var Code = function Code(_ref) {
     children: /*#__PURE__*/jsx(BaseText, {
       color: "surface.text.subtle.lowContrast",
       fontFamily: "code",
-      fontSize: getCodeFontSize(size),
+      fontSize: fontSize,
+      fontWeight: weight,
       as: isPlatformWeb ? 'code' : undefined,
+      lineHeight: lineHeight,
       children: children
     })
   }));
@@ -16629,7 +16664,7 @@ var HintText = function HintText(_ref) {
         as: isReactNative ? undefined : 'span',
         color: color,
         fontSize: 50,
-        lineHeight: "s",
+        lineHeight: 50,
         fontStyle: "italic",
         fontFamily: "text",
         children: children
@@ -16771,7 +16806,7 @@ var FormLabel = function FormLabel(_ref) {
 
   if (necessityIndicator === 'required') {
     necessityLabel = /*#__PURE__*/jsx(BaseText, {
-      lineHeight: "s",
+      lineHeight: 100,
       fontFamily: "text",
       fontStyle: "normal",
       fontSize: 75,
@@ -16866,8 +16901,8 @@ var SelectorTitle = function SelectorTitle(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size;
   var lineHeight = {
-    small: 's',
-    medium: 'l'
+    small: 50,
+    medium: 100
   };
   var fontSize = {
     small: 75,
@@ -16896,7 +16931,7 @@ var SelectorSupportText = function SelectorSupportText(_ref) {
     as: isReactNative ? undefined : 'span',
     color: "surface.text.muted.lowContrast",
     fontSize: 50,
-    lineHeight: "s",
+    lineHeight: 50,
     fontStyle: "italic",
     fontFamily: "text",
     children: children
@@ -18152,10 +18187,10 @@ var typography = {
     }
   },
   lineHeights: {
-    xsmall: 's',
-    small: 's',
-    medium: 'l',
-    large: 'm'
+    xsmall: 50,
+    small: 50,
+    medium: 100,
+    large: 300
   }
 };
 var minHeight = {
@@ -18949,6 +18984,18 @@ var getProps = function getProps(_ref2) {
       target = _ref2.target,
       size = _ref2.size;
   var isButton = variant === 'button';
+  var textSizes = {
+    fontSize: {
+      small: 75,
+      medium: 100,
+      large: 200
+    },
+    lineHeight: {
+      small: 50,
+      medium: 100,
+      large: 300
+    }
+  };
   var props = {
     as: isButton ? 'button' : 'a',
     textDecorationLine: !isButton && currentInteraction !== 'default' ? 'underline' : 'none',
@@ -18961,8 +19008,8 @@ var getProps = function getProps(_ref2) {
       isDisabled: isDisabled,
       isVisited: isVisited
     }),
-    fontSize: size === 'medium' ? 100 : 75,
-    lineHeight: size === 'medium' ? 'l' : 's',
+    fontSize: textSizes.fontSize[size],
+    lineHeight: textSizes.lineHeight[size],
     iconSize: size,
     iconPadding: children !== null && children !== void 0 && children.trim() ? 'spacing.2' : 'spacing.0',
     textColor: getColorToken({
@@ -21186,7 +21233,8 @@ var getBaseInputStyles = function getBaseInputStyles(_ref2) {
       interactionElement = _ref2.interactionElement,
       suffix = _ref2.suffix,
       trailingIcon = _ref2.trailingIcon,
-      textAlign = _ref2.textAlign;
+      textAlign = _ref2.textAlign,
+      isTextArea = _ref2.isTextArea;
 
   var _getInputVisualsToBeR = getInputVisualsToBeRendered({
     leadingIcon: leadingIcon,
@@ -21218,7 +21266,8 @@ var getBaseInputStyles = function getBaseInputStyles(_ref2) {
     paddingLeft: hasLeadingIcon || hasPrefix ? makeSpace(theme.spacing[3]) : makeSpace(theme.spacing[4]),
     paddingRight: hasInteractionElement || hasSuffix || hasTrailingIcon ? makeSpace(theme.spacing[3]) : makeSpace(theme.spacing[4]),
     textAlign: textAlign,
-    width: '100%'
+    width: '100%',
+    height: isTextArea ? undefined : makeSpace(size[36])
   }, isReactNative ? {} : {
     resize: 'none'
   });
@@ -21240,7 +21289,8 @@ var getWebInputStyles = function getWebInputStyles(props) {
     interactionElement: props.interactionElement,
     suffix: props.suffix,
     trailingIcon: props.trailingIcon,
-    textAlign: props.textAlign
+    textAlign: props.textAlign,
+    isTextArea: props.isTextArea
   })), {}, {
     outline: 'none',
     border: 'none',
@@ -23148,14 +23198,16 @@ var listItemBulletMarginRight = {
 };
 var listItemBulletMarginTop = {
   // We need hard-coded non-tokenized spacing for bullet alignment in List
+  // These size mappings can be found in here:
+  // figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=23239-466987&t=easqqrPtzgMwCEtn-0
   unordered: {
     onDesktop: {
       small: makeSize(6),
-      medium: 'spacing.3'
+      medium: makeSize(7)
     },
     onMobile: {
       small: makeSize(6),
-      medium: makeSize(10)
+      medium: makeSize(7)
     }
   },
   unorderedWithIcon: {
@@ -23165,7 +23217,7 @@ var listItemBulletMarginTop = {
     },
     onMobile: {
       small: 'spacing.2',
-      medium: makeSize(6)
+      medium: 'spacing.1'
     }
   },
   ordered: {
@@ -23186,7 +23238,7 @@ var listItemBulletMarginTop = {
     },
     onMobile: {
       small: makeSize(0),
-      medium: 'spacing.1'
+      medium: makeSize(0)
     }
   }
 };
@@ -24790,6 +24842,18 @@ var amountFontSizes = {
   'title-small': 600,
   'title-medium': 700
 };
+var amountLineHeights = {
+  'body-small': 50,
+  'body-small-bold': 50,
+  'body-medium': 100,
+  'body-medium-bold': 100,
+  'heading-small': 300,
+  'heading-small-bold': 300,
+  'heading-large': 400,
+  'heading-large-bold': 400,
+  'title-small': 500,
+  'title-medium': 600
+};
 var currencyPrefixMapping = {
   INR: {
     'currency-symbol': '₹',
@@ -24866,6 +24930,7 @@ var AmountValue = function AmountValue(_ref2) {
       children: [/*#__PURE__*/jsxs(BaseText, {
         fontSize: amountFontSizes[size],
         fontWeight: valueForWeight,
+        lineHeight: amountLineHeights[size],
         color: amountValueColor,
         as: isReactNative ? undefined : 'span',
         children: [integer, "."]