@razorpay/blade 8.6.1 → 8.7.0

package/build/components/index.web.js

@@ -5864,7 +5864,7 @@ var BaseText = function BaseText(_ref2) {
   }));
 };
 
-var _excluded$4N = ["size", "type", "contrast", "children", "testID"];
+var _excluded$4N = ["size", "type", "contrast", "color", "children", "testID"];
 
 function ownKeys$5m(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; }
 
@@ -5874,11 +5874,12 @@ var getProps$3 = function getProps(_ref) {
   var size = _ref.size,
       type = _ref.type,
       contrast = _ref.contrast,
+      color = _ref.color,
       testID = _ref.testID;
   var isPlatformWeb = getPlatformType() === 'browser' || getPlatformType() === 'node';
   var colorContrast = contrast ? "".concat(contrast, "Contrast") : 'lowContrast';
   var props = {
-    color: "surface.text.".concat(type !== null && type !== void 0 ? type : 'normal', ".").concat(colorContrast),
+    color: color !== null && color !== void 0 ? color : "surface.text.".concat(type !== null && type !== void 0 ? type : 'normal', ".").concat(colorContrast),
     fontSize: 600,
     fontWeight: 'bold',
     fontStyle: 'normal',
@@ -5919,6 +5920,7 @@ var Title = function Title(_ref2) {
       type = _ref2$type === void 0 ? 'normal' : _ref2$type,
       _ref2$contrast = _ref2.contrast,
       contrast = _ref2$contrast === void 0 ? 'low' : _ref2$contrast,
+      color = _ref2.color,
       children = _ref2.children,
       testID = _ref2.testID,
       styledProps = _objectWithoutProperties$1(_ref2, _excluded$4N);
@@ -5927,6 +5929,7 @@ var Title = function Title(_ref2) {
     size: size,
     type: type,
     contrast: contrast,
+    color: color,
     testID: testID
   });
   return /*#__PURE__*/jsx(BaseText, _objectSpread$5l(_objectSpread$5l(_objectSpread$5l({}, props), getStyledProps(styledProps)), {}, {
@@ -5934,7 +5937,7 @@ var Title = function Title(_ref2) {
   }));
 };
 
-var _excluded$4M = ["variant", "size", "type", "weight", "contrast", "children", "testID", "textAlign"];
+var _excluded$4M = ["variant", "size", "type", "weight", "contrast", "color", "children", "testID", "textAlign"];
 
 function ownKeys$5l(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; }
 
@@ -5946,11 +5949,12 @@ var getProps$2 = function getProps(_ref) {
       type = _ref.type,
       weight = _ref.weight,
       contrast = _ref.contrast,
+      color = _ref.color,
       testID = _ref.testID;
   var isPlatformWeb = getPlatformType() === 'browser' || getPlatformType() === 'node';
   var colorContrast = contrast ? "".concat(contrast, "Contrast") : 'lowContrast';
   var props = {
-    color: "surface.text.".concat(type !== null && type !== void 0 ? type : 'normal', ".").concat(colorContrast),
+    color: color !== null && color !== void 0 ? color : "surface.text.".concat(type !== null && type !== void 0 ? type : 'normal', ".").concat(colorContrast),
     fontSize: 200,
     fontWeight: weight !== null && weight !== void 0 ? weight : 'bold',
     fontStyle: 'normal',
@@ -6004,6 +6008,7 @@ var Heading = function Heading(_ref2) {
       weight = _ref2$weight === void 0 ? 'bold' : _ref2$weight,
       _ref2$contrast = _ref2.contrast,
       contrast = _ref2$contrast === void 0 ? 'low' : _ref2$contrast,
+      color = _ref2.color,
       children = _ref2.children,
       testID = _ref2.testID,
       textAlign = _ref2.textAlign,
@@ -6014,6 +6019,7 @@ var Heading = function Heading(_ref2) {
     size: size,
     type: type,
     weight: weight,
+    color: color,
     contrast: contrast,
     testID: testID
   });
@@ -6035,13 +6041,14 @@ var getTextProps = function getTextProps(_ref) {
       type = _ref.type,
       weight = _ref.weight,
       size = _ref.size,
+      color = _ref.color,
       contrast = _ref.contrast,
       testID = _ref.testID,
       textAlign = _ref.textAlign;
   var isPlatformWeb = getPlatformType() === 'browser' || getPlatformType() === 'node';
   var colorContrast = contrast ? "".concat(contrast, "Contrast") : 'lowContrast';
   var props = {
-    color: "surface.text.".concat(type !== null && type !== void 0 ? type : 'normal', ".").concat(colorContrast),
+    color: color !== null && color !== void 0 ? color : "surface.text.".concat(type !== null && type !== void 0 ? type : 'normal', ".").concat(colorContrast),
     fontSize: 100,
     fontWeight: weight !== null && weight !== void 0 ? weight : 'regular',
     fontStyle: 'normal',
@@ -6130,19 +6137,18 @@ var _Text = function _Text(_ref3) {
       textAlign = _ref3.textAlign,
       styledProps = _objectWithoutProperties$1(_ref3, _excluded$4L);
 
-  var props = _objectSpread$5j(_objectSpread$5j({
+  var props = _objectSpread$5j({
     truncateAfterLines: truncateAfterLines
   }, getTextProps({
     variant: variant,
     type: type,
     weight: weight,
+    color: color,
     size: size,
     contrast: contrast,
     testID: testID,
     textAlign: textAlign
-  })), color ? {
-    color: color
-  } : {});
+  }));
 
   return /*#__PURE__*/jsx(StyledText, _objectSpread$5j(_objectSpread$5j(_objectSpread$5j({}, props), getStyledProps(styledProps)), {}, {
     children: children
@@ -6154,7 +6160,7 @@ var Text = /*#__PURE__*/assignWithoutSideEffects(_Text, {
   componentId: 'Text'
 });
 
-var _excluded$4K = ["children", "size", "weight", "testID"];
+var _excluded$4K = ["children", "size", "weight", "isHighlighted", "color", "testID"];
 
 function ownKeys$5j(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; }
 
@@ -6188,7 +6194,7 @@ var CodeContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   var padding = "".concat(makeSpace(props.theme.spacing[0]), " ").concat(makeSpace(props.theme.spacing[2]));
   return {
     padding: padding,
-    backgroundColor: props.theme.colors.brand.gray.a50.lowContrast,
+    backgroundColor: props.isHighlighted ? props.theme.colors.brand.gray.a100.lowContrast : undefined,
     borderRadius: props.theme.border.radius.medium,
     display: isPlatformWeb ? 'inline-block' : 'flex',
     alignSelf: isPlatformWeb ? undefined : 'center',
@@ -6196,6 +6202,25 @@ var CodeContainer = /*#__PURE__*/styled(BaseBox).withConfig({
     lineHeight: makeTypographySize(props.theme.typography.lineHeights[0])
   };
 });
+
+var getCodeColor = function getCodeColor(_ref) {
+  var isHighlighted = _ref.isHighlighted,
+      color = _ref.color;
+
+  if (isHighlighted) {
+    if (color) {
+      throw new Error('[Blade: Code]: `color` prop cannot be used without `isHighlighted={false}`');
+    }
+
+    return 'surface.text.subtle.lowContrast';
+  }
+
+  if (color) {
+    return color;
+  }
+
+  return 'surface.text.normal.lowContrast';
+};
 /**
  * Code component can be used for displaying token, variable names, or inlined code snippets.
  *
@@ -6215,36 +6240,47 @@ var CodeContainer = /*#__PURE__*/styled(BaseBox).withConfig({
  * In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned
  *
  * ```tsx
- *  <BaseBox flexWrap="wrap" flexDirection="row" alignItems="flex-start">
+ *  <Box flexWrap="wrap" flexDirection="row" alignItems="flex-start">
  *   <Text>Lorem ipsum </Text>
  *   <Code>SENTRY_TOKEN</Code>
  *   <Text> normal text</Text>
- * </BaseBox>
+ * </Box>
  * ```
  */
 
-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$1(_ref, _excluded$4K);
+
+var Code = function Code(_ref2) {
+  var children = _ref2.children,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 'small' : _ref2$size,
+      _ref2$weight = _ref2.weight,
+      weight = _ref2$weight === void 0 ? 'regular' : _ref2$weight,
+      _ref2$isHighlighted = _ref2.isHighlighted,
+      isHighlighted = _ref2$isHighlighted === void 0 ? true : _ref2$isHighlighted,
+      color = _ref2.color,
+      testID = _ref2.testID,
+      styledProps = _objectWithoutProperties$1(_ref2, _excluded$4K);
 
   var _getCodeFontSizeAndLi = getCodeFontSizeAndLineHeight(size),
       fontSize = _getCodeFontSizeAndLi.fontSize,
       lineHeight = _getCodeFontSizeAndLi.lineHeight;
 
+  var codeTextColor = React__default.useMemo(function () {
+    return getCodeColor({
+      isHighlighted: isHighlighted,
+      color: color
+    });
+  }, [isHighlighted, color]);
   return /*#__PURE__*/jsx(CodeContainer, _objectSpread$5i(_objectSpread$5i(_objectSpread$5i({
     size: size,
+    isHighlighted: isHighlighted,
     as: isPlatformWeb ? 'span' : undefined
   }, metaAttribute({
     name: MetaConstants.Code,
     testID: testID
   })), getStyledProps(styledProps)), {}, {
     children: /*#__PURE__*/jsx(BaseText, {
-      color: "surface.text.subtle.lowContrast",
+      color: codeTextColor,
       fontFamily: "code",
       fontSize: fontSize,
       fontWeight: weight,