@razorpay/blade 8.6.1 → 8.7.0

package/build/components/index.d.ts

@@ -2670,7 +2670,9 @@ type TextCommonProps$1 = {
   children: React.ReactNode;
   weight?: keyof Theme$1['typography']['fonts']['weight'];
   /**
-   * **For Internal use only**:  Sets the color of the Text component
+   * Overrides the color of the Text component.
+   *
+   * **Note** This takes priority over `type` and `constrast` prop to decide color of text
    */
   color?: BaseTextProps$1['color'];
   textAlign?: BaseTextProps$1['textAlign'];
@@ -4389,14 +4391,6 @@ declare const List: ({ variant, size, children, icon, testID, ...styledProps }:
 declare type ListItemLinkProps = Exclude<LinkProps, 'size' | 'variant' | 'isDisabled'>;
 declare const ListItemLink: ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, testID, }: ListItemLinkProps) => React.ReactElement;
 
-declare type TitleProps = {
-    size?: 'small' | 'medium' | 'large' | 'xlarge';
-    contrast?: ColorContrastTypes;
-    type?: TextTypes;
-    children: StringChildrenType;
-} & TestID & StyledPropsBlade;
-declare const Title: ({ size, type, contrast, children, testID, ...styledProps }: TitleProps) => ReactElement;
-
 declare type FeedbackColors = `feedback.text.${DotNotationColorStringToken<Theme$1['colors']['feedback']['text']>}`;
 declare type FeedbackActionColors = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['text']>}`;
 declare type SurfaceColors = `surface.text.${DotNotationColorStringToken<Theme$1['colors']['surface']['text']>}`;
@@ -4428,9 +4422,29 @@ declare type BaseTextProps = {
     componentName?: 'text' | 'title' | 'heading' | 'code';
 } & TestID & StyledPropsBlade;
 
+declare type TitleProps = {
+    /**
+     * Overrides the color of the Title component.
+     *
+     * **Note** This takes priority over `type` and `constrast` prop to decide color of title
+     */
+    color?: BaseTextProps['color'];
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    contrast?: ColorContrastTypes;
+    type?: TextTypes;
+    children: StringChildrenType;
+} & TestID & StyledPropsBlade;
+declare const Title: ({ size, type, contrast, color, children, testID, ...styledProps }: TitleProps) => ReactElement;
+
 declare type HeadingVariant = 'regular' | 'subheading';
 declare type HeadingSize = 'small' | 'medium' | 'large';
 declare type HeadingCommonProps = {
+    /**
+     * Overrides the color of the Heading component.
+     *
+     * **Note** This takes priority over `type` and `constrast` prop to decide color of heading
+     */
+    color?: BaseTextProps['color'];
     type?: TextTypes;
     contrast?: ColorContrastTypes;
     children: StringChildrenType;
@@ -4462,7 +4476,7 @@ declare type HeadingProps<T> = T extends {
 } ? Variant extends Exclude<HeadingVariant, 'subheading'> ? HeadingNormalVariant : Variant extends 'subheading' ? HeadingSubHeadingVariant : T : T;
 declare const Heading: <T extends {
     variant: HeadingVariant;
-}>({ variant, size, type, weight, contrast, children, testID, textAlign, ...styledProps }: HeadingProps<T>) => ReactElement;
+}>({ variant, size, type, weight, contrast, color, children, testID, textAlign, ...styledProps }: HeadingProps<T>) => ReactElement;
 
 declare type TextCommonProps = {
     type?: TextTypes;
@@ -4471,7 +4485,9 @@ declare type TextCommonProps = {
     children: React.ReactNode;
     weight?: keyof Theme$1['typography']['fonts']['weight'];
     /**
-     * **For Internal use only**:  Sets the color of the Text component
+     * Overrides the color of the Text component.
+     *
+     * **Note** This takes priority over `type` and `constrast` prop to decide color of text
      */
     color?: BaseTextProps['color'];
     textAlign?: BaseTextProps['textAlign'];
@@ -4498,15 +4514,18 @@ declare type TextForwardedAs = {
 declare type GetTextPropsReturn = Omit<BaseTextProps, 'children'> & TextForwardedAs;
 declare type GetTextProps<T extends {
     variant: TextVariant;
-}> = Pick<TextProps<T>, 'type' | 'variant' | 'weight' | 'size' | 'contrast' | 'testID' | 'textAlign'>;
+}> = Pick<TextProps<T>, 'type' | 'variant' | 'weight' | 'size' | 'contrast' | 'color' | 'testID' | 'textAlign'>;
 declare const getTextProps: <T extends {
     variant: TextVariant;
-}>({ variant, type, weight, size, contrast, testID, textAlign, }: GetTextProps<T>) => GetTextPropsReturn;
+}>({ variant, type, weight, size, color, contrast, testID, textAlign, }: GetTextProps<T>) => GetTextPropsReturn;
 declare const Text: <T extends {
     variant: TextVariant;
 }>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, testID, textAlign, ...styledProps }: TextProps<T>) => ReactElement;
 
-declare type CodeProps = {
+declare type CodeCommonProps = {
+    /**
+     * Sets the color of the Heading component.
+     */
     children: StringChildrenType;
     /**
      * Decides the fontSize and padding of Code
@@ -4515,7 +4534,34 @@ declare type CodeProps = {
      */
     size?: 'small' | 'medium';
     weight?: 'regular' | 'bold';
+    isHighlighted?: boolean;
+    color?: BaseTextProps['color'];
 } & TestID & StyledPropsBlade;
+declare type CodeHighlightedProps = CodeCommonProps & {
+    /**
+     * Adds background color to highlight the text
+     *
+     * @default true
+     */
+    isHighlighted?: true;
+    /**
+     * color prop can only be added when `isHighlighted` is set to `false`
+     */
+    color?: undefined;
+};
+declare type CodeNonHighlightedProps = CodeCommonProps & {
+    /**
+     * Adds background color to highlight the text
+     *
+     * @default true
+     */
+    isHighlighted: false;
+    /**
+     * color prop to set color of text when `isHighlighted` is set to false
+     */
+    color?: BaseTextProps['color'];
+};
+declare type CodeProps = CodeHighlightedProps | CodeNonHighlightedProps;
 /**
  * Code component can be used for displaying token, variable names, or inlined code snippets.
  *
@@ -4535,14 +4581,14 @@ declare type CodeProps = {
  * 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>
  * ```
  */
-declare const Code: ({ children, size, weight, testID, ...styledProps }: CodeProps) => JSX.Element;
+declare const Code: ({ children, size, weight, isHighlighted, color, testID, ...styledProps }: CodeProps) => JSX.Element;
 
 declare type ListItemCodeProps = Exclude<CodeProps, 'size'>;
 declare const ListItemCode: ({ children, testID }: ListItemCodeProps) => React.ReactElement;

package/build/components/index.native.d.ts

@@ -2672,7 +2672,9 @@ type TextCommonProps$1 = {
   children: React.ReactNode;
   weight?: keyof Theme$1['typography']['fonts']['weight'];
   /**
-   * **For Internal use only**:  Sets the color of the Text component
+   * Overrides the color of the Text component.
+   *
+   * **Note** This takes priority over `type` and `constrast` prop to decide color of text
    */
   color?: BaseTextProps$1['color'];
   textAlign?: BaseTextProps$1['textAlign'];
@@ -4392,14 +4394,6 @@ declare const List: ({ variant, size, children, icon, testID, ...styledProps }:
 declare type ListItemLinkProps = Exclude<LinkProps, 'size' | 'variant' | 'isDisabled'>;
 declare const ListItemLink: ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, testID, }: ListItemLinkProps) => React.ReactElement;
 
-declare type TitleProps = {
-    size?: 'small' | 'medium' | 'large' | 'xlarge';
-    contrast?: ColorContrastTypes;
-    type?: TextTypes;
-    children: StringChildrenType;
-} & TestID & StyledPropsBlade;
-declare const Title: ({ size, type, contrast, children, testID, ...styledProps }: TitleProps) => ReactElement;
-
 declare type FeedbackColors = `feedback.text.${DotNotationColorStringToken<Theme$1['colors']['feedback']['text']>}`;
 declare type FeedbackActionColors = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['text']>}`;
 declare type SurfaceColors = `surface.text.${DotNotationColorStringToken<Theme$1['colors']['surface']['text']>}`;
@@ -4431,9 +4425,29 @@ declare type BaseTextProps = {
     componentName?: 'text' | 'title' | 'heading' | 'code';
 } & TestID & StyledPropsBlade;
 
+declare type TitleProps = {
+    /**
+     * Overrides the color of the Title component.
+     *
+     * **Note** This takes priority over `type` and `constrast` prop to decide color of title
+     */
+    color?: BaseTextProps['color'];
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    contrast?: ColorContrastTypes;
+    type?: TextTypes;
+    children: StringChildrenType;
+} & TestID & StyledPropsBlade;
+declare const Title: ({ size, type, contrast, color, children, testID, ...styledProps }: TitleProps) => ReactElement;
+
 declare type HeadingVariant = 'regular' | 'subheading';
 declare type HeadingSize = 'small' | 'medium' | 'large';
 declare type HeadingCommonProps = {
+    /**
+     * Overrides the color of the Heading component.
+     *
+     * **Note** This takes priority over `type` and `constrast` prop to decide color of heading
+     */
+    color?: BaseTextProps['color'];
     type?: TextTypes;
     contrast?: ColorContrastTypes;
     children: StringChildrenType;
@@ -4465,7 +4479,7 @@ declare type HeadingProps<T> = T extends {
 } ? Variant extends Exclude<HeadingVariant, 'subheading'> ? HeadingNormalVariant : Variant extends 'subheading' ? HeadingSubHeadingVariant : T : T;
 declare const Heading: <T extends {
     variant: HeadingVariant;
-}>({ variant, size, type, weight, contrast, children, testID, textAlign, ...styledProps }: HeadingProps<T>) => ReactElement;
+}>({ variant, size, type, weight, contrast, color, children, testID, textAlign, ...styledProps }: HeadingProps<T>) => ReactElement;
 
 declare type TextCommonProps = {
     type?: TextTypes;
@@ -4474,7 +4488,9 @@ declare type TextCommonProps = {
     children: React.ReactNode;
     weight?: keyof Theme$1['typography']['fonts']['weight'];
     /**
-     * **For Internal use only**:  Sets the color of the Text component
+     * Overrides the color of the Text component.
+     *
+     * **Note** This takes priority over `type` and `constrast` prop to decide color of text
      */
     color?: BaseTextProps['color'];
     textAlign?: BaseTextProps['textAlign'];
@@ -4501,15 +4517,18 @@ declare type TextForwardedAs = {
 declare type GetTextPropsReturn = Omit<BaseTextProps, 'children'> & TextForwardedAs;
 declare type GetTextProps<T extends {
     variant: TextVariant;
-}> = Pick<TextProps<T>, 'type' | 'variant' | 'weight' | 'size' | 'contrast' | 'testID' | 'textAlign'>;
+}> = Pick<TextProps<T>, 'type' | 'variant' | 'weight' | 'size' | 'contrast' | 'color' | 'testID' | 'textAlign'>;
 declare const getTextProps: <T extends {
     variant: TextVariant;
-}>({ variant, type, weight, size, contrast, testID, textAlign, }: GetTextProps<T>) => GetTextPropsReturn;
+}>({ variant, type, weight, size, color, contrast, testID, textAlign, }: GetTextProps<T>) => GetTextPropsReturn;
 declare const Text: <T extends {
     variant: TextVariant;
 }>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, testID, textAlign, ...styledProps }: TextProps<T>) => ReactElement;
 
-declare type CodeProps = {
+declare type CodeCommonProps = {
+    /**
+     * Sets the color of the Heading component.
+     */
     children: StringChildrenType;
     /**
      * Decides the fontSize and padding of Code
@@ -4518,7 +4537,34 @@ declare type CodeProps = {
      */
     size?: 'small' | 'medium';
     weight?: 'regular' | 'bold';
+    isHighlighted?: boolean;
+    color?: BaseTextProps['color'];
 } & TestID & StyledPropsBlade;
+declare type CodeHighlightedProps = CodeCommonProps & {
+    /**
+     * Adds background color to highlight the text
+     *
+     * @default true
+     */
+    isHighlighted?: true;
+    /**
+     * color prop can only be added when `isHighlighted` is set to `false`
+     */
+    color?: undefined;
+};
+declare type CodeNonHighlightedProps = CodeCommonProps & {
+    /**
+     * Adds background color to highlight the text
+     *
+     * @default true
+     */
+    isHighlighted: false;
+    /**
+     * color prop to set color of text when `isHighlighted` is set to false
+     */
+    color?: BaseTextProps['color'];
+};
+declare type CodeProps = CodeHighlightedProps | CodeNonHighlightedProps;
 /**
  * Code component can be used for displaying token, variable names, or inlined code snippets.
  *
@@ -4538,14 +4584,14 @@ declare type CodeProps = {
  * 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>
  * ```
  */
-declare const Code: ({ children, size, weight, testID, ...styledProps }: CodeProps) => JSX.Element;
+declare const Code: ({ children, size, weight, isHighlighted, color, testID, ...styledProps }: CodeProps) => JSX.Element;
 
 declare type ListItemCodeProps = Exclude<CodeProps, 'size'>;
 declare const ListItemCode: ({ children, testID }: ListItemCodeProps) => React.ReactElement;

package/build/components/index.native.js

@@ -3279,13 +3279,13 @@ var useStyledProps=function useStyledProps(props){var styledPropsStyles=getStyle
 
 var _excluded$4Q=["color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","lineHeight","textAlign","as"],_excluded2$1=["id","color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","lineHeight","as","textAlign","children","truncateAfterLines","className","style","accessibilityProps","componentName","testID"];var StyledBaseText=styled.Text(function(_ref){var color=_ref.color,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize,fontWeight=_ref.fontWeight,fontStyle=_ref.fontStyle,textDecorationLine=_ref.textDecorationLine,lineHeight=_ref.lineHeight,textAlign=_ref.textAlign,as=_ref.as,props=_objectWithoutProperties(_ref,_excluded$4Q);var styledPropsCSSObject=useStyledProps(props);if(as){throw new Error("[Blade: BaseText]: \"as\" prop is not supported for BaseText on React Native");}else {return _extends({},getBaseTextStyles({color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,textAlign:textAlign,theme:props.theme}),styledPropsCSSObject);}});var BaseText=function BaseText(_ref2){var id=_ref2.id,color=_ref2.color,fontFamily=_ref2.fontFamily,fontSize=_ref2.fontSize,fontWeight=_ref2.fontWeight,fontStyle=_ref2.fontStyle,textDecorationLine=_ref2.textDecorationLine,lineHeight=_ref2.lineHeight,as=_ref2.as,textAlign=_ref2.textAlign,children=_ref2.children,truncateAfterLines=_ref2.truncateAfterLines,className=_ref2.className,style=_ref2.style,_ref2$accessibilityPr=_ref2.accessibilityProps,accessibilityProps=_ref2$accessibilityPr===void 0?{}:_ref2$accessibilityPr,componentName=_ref2.componentName,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_excluded2$1);return jsx(StyledBaseText,_extends({},styledProps,{color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,as:as,textAlign:textAlign,numberOfLines:truncateAfterLines,className:className,style:style,id:id},makeAccessible(accessibilityProps),metaAttribute({name:componentName,testID:testID}),{children:children}));};
 
-var _excluded$4P=["size","type","contrast","children","testID"];var getProps$3=function getProps(_ref){var size=_ref.size,type=_ref.type,contrast=_ref.contrast,testID=_ref.testID;var isPlatformWeb=getPlatformType()==='browser'||getPlatformType()==='node';var colorContrast=contrast?contrast+"Contrast":'lowContrast';var props={color:"surface.text."+(type!=null?type:'normal')+"."+colorContrast,fontSize:600,fontWeight:'bold',fontStyle:'normal',lineHeight:700,fontFamily:'text',accessibilityProps:isPlatformWeb?{}:{role:'heading'},componentName:'title',testID:testID};if(size==='small'){props.fontSize=600;props.lineHeight=500;props.as=isPlatformWeb?'h3':undefined;}else if(size==='medium'){props.fontSize=700;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=800;props.as=isPlatformWeb?'h1':undefined;}return props;};var Title=function Title(_ref2){var _ref2$size=_ref2.size,size=_ref2$size===void 0?'small':_ref2$size,_ref2$type=_ref2.type,type=_ref2$type===void 0?'normal':_ref2$type,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,children=_ref2.children,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_excluded$4P);var props=getProps$3({size:size,type:type,contrast:contrast,testID:testID});return jsx(BaseText,_extends({},props,getStyledProps(styledProps),{children:children}));};
+var _excluded$4P=["size","type","contrast","color","children","testID"];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?contrast+"Contrast":'lowContrast';var props={color:color!=null?color:"surface.text."+(type!=null?type:'normal')+"."+colorContrast,fontSize:600,fontWeight:'bold',fontStyle:'normal',lineHeight:700,fontFamily:'text',accessibilityProps:isPlatformWeb?{}:{role:'heading'},componentName:'title',testID:testID};if(size==='small'){props.fontSize=600;props.lineHeight=500;props.as=isPlatformWeb?'h3':undefined;}else if(size==='medium'){props.fontSize=700;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=800;props.as=isPlatformWeb?'h1':undefined;}return props;};var Title=function Title(_ref2){var _ref2$size=_ref2.size,size=_ref2$size===void 0?'small':_ref2$size,_ref2$type=_ref2.type,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(_ref2,_excluded$4P);var props=getProps$3({size:size,type:type,contrast:contrast,color:color,testID:testID});return jsx(BaseText,_extends({},props,getStyledProps(styledProps),{children:children}));};
 
-var _excluded$4O=["variant","size","type","weight","contrast","children","testID","textAlign"];var getProps$2=function getProps(_ref){var variant=_ref.variant,size=_ref.size,type=_ref.type,weight=_ref.weight,contrast=_ref.contrast,testID=_ref.testID;var isPlatformWeb=getPlatformType()==='browser'||getPlatformType()==='node';var colorContrast=contrast?contrast+"Contrast":'lowContrast';var props={color:"surface.text."+(type!=null?type:'normal')+"."+colorContrast,fontSize:200,fontWeight:weight!=null?weight:'bold',fontStyle:'normal',lineHeight:300,fontFamily:'text',accessibilityProps:isPlatformWeb?{}:{role:'heading'},componentName:'heading',testID:testID};if(variant==='regular'){if(!size||size==='small'){props.fontSize=200;props.lineHeight=300;props.as=isPlatformWeb?'h6':undefined;}else if(size==='medium'){props.fontSize=300;props.lineHeight=200;props.as=isPlatformWeb?'h5':undefined;}else if(size==='large'){props.fontSize=400;props.lineHeight=400;props.as=isPlatformWeb?'h4':undefined;}}else if(variant==='subheading'){if(weight==='regular'){throw new Error("[Blade: Heading]: weight cannot be 'regular' when variant is 'subheading'");}if(size){throw new Error("[Blade: Heading]: size prop cannot be added when variant is 'subheading'. Use variant 'regular' or remove size prop");}props.fontSize=75;props.lineHeight=50;props.as=isPlatformWeb?'h6':undefined;}return props;};var Heading=function Heading(_ref2){var _ref2$variant=_ref2.variant,variant=_ref2$variant===void 0?'regular':_ref2$variant,size=_ref2.size,_ref2$type=_ref2.type,type=_ref2$type===void 0?'normal':_ref2$type,_ref2$weight=_ref2.weight,weight=_ref2$weight===void 0?'bold':_ref2$weight,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,children=_ref2.children,testID=_ref2.testID,textAlign=_ref2.textAlign,styledProps=_objectWithoutProperties(_ref2,_excluded$4O);var props=getProps$2({variant:variant,size:size,type:type,weight:weight,contrast:contrast,testID:testID});return jsx(BaseText,_extends({},props,{textAlign:textAlign},getStyledProps(styledProps),{children:children}));};
+var _excluded$4O=["variant","size","type","weight","contrast","color","children","testID","textAlign"];var getProps$2=function getProps(_ref){var variant=_ref.variant,size=_ref.size,type=_ref.type,weight=_ref.weight,contrast=_ref.contrast,color=_ref.color,testID=_ref.testID;var isPlatformWeb=getPlatformType()==='browser'||getPlatformType()==='node';var colorContrast=contrast?contrast+"Contrast":'lowContrast';var props={color:color!=null?color:"surface.text."+(type!=null?type:'normal')+"."+colorContrast,fontSize:200,fontWeight:weight!=null?weight:'bold',fontStyle:'normal',lineHeight:300,fontFamily:'text',accessibilityProps:isPlatformWeb?{}:{role:'heading'},componentName:'heading',testID:testID};if(variant==='regular'){if(!size||size==='small'){props.fontSize=200;props.lineHeight=300;props.as=isPlatformWeb?'h6':undefined;}else if(size==='medium'){props.fontSize=300;props.lineHeight=200;props.as=isPlatformWeb?'h5':undefined;}else if(size==='large'){props.fontSize=400;props.lineHeight=400;props.as=isPlatformWeb?'h4':undefined;}}else if(variant==='subheading'){if(weight==='regular'){throw new Error("[Blade: Heading]: weight cannot be 'regular' when variant is 'subheading'");}if(size){throw new Error("[Blade: Heading]: size prop cannot be added when variant is 'subheading'. Use variant 'regular' or remove size prop");}props.fontSize=75;props.lineHeight=50;props.as=isPlatformWeb?'h6':undefined;}return props;};var Heading=function Heading(_ref2){var _ref2$variant=_ref2.variant,variant=_ref2$variant===void 0?'regular':_ref2$variant,size=_ref2.size,_ref2$type=_ref2.type,type=_ref2$type===void 0?'normal':_ref2$type,_ref2$weight=_ref2.weight,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,styledProps=_objectWithoutProperties(_ref2,_excluded$4O);var props=getProps$2({variant:variant,size:size,type:type,weight:weight,color:color,contrast:contrast,testID:testID});return jsx(BaseText,_extends({},props,{textAlign:textAlign},getStyledProps(styledProps),{children:children}));};
 
-var _excluded$4N=["variant","weight","size","type","contrast","truncateAfterLines","children","color","testID","textAlign"];var getTextProps=function getTextProps(_ref){var variant=_ref.variant,type=_ref.type,weight=_ref.weight,size=_ref.size,contrast=_ref.contrast,testID=_ref.testID,textAlign=_ref.textAlign;var isPlatformWeb=getPlatformType()==='browser'||getPlatformType()==='node';var colorContrast=contrast?contrast+"Contrast":'lowContrast';var props={color:"surface.text."+(type!=null?type:'normal')+"."+colorContrast,fontSize:100,fontWeight:weight!=null?weight:'regular',fontStyle:'normal',lineHeight:100,fontFamily:'text',forwardedAs:isPlatformWeb?'p':undefined,componentName:'text',testID:testID,textAlign:textAlign};if(variant==='body'){if(size==='xsmall'){props.fontSize=25;props.lineHeight=50;}if(size==='small'){props.fontSize=75;props.lineHeight=50;}if(size==='medium'){props.fontSize=100;props.lineHeight=100;}if(size==='large'){props.fontSize=200;props.lineHeight=300;}}if(variant==='caption'){if(size==='medium'){props.fontSize=50;props.lineHeight=50;}else {throw new Error("[Blade: Text]: size cannot be '"+size+"' when variant is 'caption'");}props.fontStyle='italic';}return props;};var StyledText=styled(BaseText)(function(_ref2){var truncateAfterLines=_ref2.truncateAfterLines;if(truncateAfterLines){if(getPlatformType()==='react-native'){return null;}return {overflow:'hidden',display:'-webkit-box','line-clamp':""+truncateAfterLines,'-webkit-line-clamp':""+truncateAfterLines,'-webkit-box-orient':'vertical'};}return {};});var _Text=function _Text(_ref3){var _ref3$variant=_ref3.variant,variant=_ref3$variant===void 0?'body':_ref3$variant,_ref3$weight=_ref3.weight,weight=_ref3$weight===void 0?'regular':_ref3$weight,_ref3$size=_ref3.size,size=_ref3$size===void 0?'medium':_ref3$size,_ref3$type=_ref3.type,type=_ref3$type===void 0?'normal':_ref3$type,_ref3$contrast=_ref3.contrast,contrast=_ref3$contrast===void 0?'low':_ref3$contrast,truncateAfterLines=_ref3.truncateAfterLines,children=_ref3.children,color=_ref3.color,testID=_ref3.testID,textAlign=_ref3.textAlign,styledProps=_objectWithoutProperties(_ref3,_excluded$4N);var props=_extends({truncateAfterLines:truncateAfterLines},getTextProps({variant:variant,type:type,weight:weight,size:size,contrast:contrast,testID:testID,textAlign:textAlign}),color?{color:color}:{});return jsx(StyledText,_extends({},props,getStyledProps(styledProps),{children:children}));};var Text=assignWithoutSideEffects(_Text,{displayName:'Text',componentId:'Text'});
+var _excluded$4N=["variant","weight","size","type","contrast","truncateAfterLines","children","color","testID","textAlign"];var getTextProps=function getTextProps(_ref){var variant=_ref.variant,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?contrast+"Contrast":'lowContrast';var props={color:color!=null?color:"surface.text."+(type!=null?type:'normal')+"."+colorContrast,fontSize:100,fontWeight:weight!=null?weight:'regular',fontStyle:'normal',lineHeight:100,fontFamily:'text',forwardedAs:isPlatformWeb?'p':undefined,componentName:'text',testID:testID,textAlign:textAlign};if(variant==='body'){if(size==='xsmall'){props.fontSize=25;props.lineHeight=50;}if(size==='small'){props.fontSize=75;props.lineHeight=50;}if(size==='medium'){props.fontSize=100;props.lineHeight=100;}if(size==='large'){props.fontSize=200;props.lineHeight=300;}}if(variant==='caption'){if(size==='medium'){props.fontSize=50;props.lineHeight=50;}else {throw new Error("[Blade: Text]: size cannot be '"+size+"' when variant is 'caption'");}props.fontStyle='italic';}return props;};var StyledText=styled(BaseText)(function(_ref2){var truncateAfterLines=_ref2.truncateAfterLines;if(truncateAfterLines){if(getPlatformType()==='react-native'){return null;}return {overflow:'hidden',display:'-webkit-box','line-clamp':""+truncateAfterLines,'-webkit-line-clamp':""+truncateAfterLines,'-webkit-box-orient':'vertical'};}return {};});var _Text=function _Text(_ref3){var _ref3$variant=_ref3.variant,variant=_ref3$variant===void 0?'body':_ref3$variant,_ref3$weight=_ref3.weight,weight=_ref3$weight===void 0?'regular':_ref3$weight,_ref3$size=_ref3.size,size=_ref3$size===void 0?'medium':_ref3$size,_ref3$type=_ref3.type,type=_ref3$type===void 0?'normal':_ref3$type,_ref3$contrast=_ref3.contrast,contrast=_ref3$contrast===void 0?'low':_ref3$contrast,truncateAfterLines=_ref3.truncateAfterLines,children=_ref3.children,color=_ref3.color,testID=_ref3.testID,textAlign=_ref3.textAlign,styledProps=_objectWithoutProperties(_ref3,_excluded$4N);var props=_extends({truncateAfterLines:truncateAfterLines},getTextProps({variant:variant,type:type,weight:weight,color:color,size:size,contrast:contrast,testID:testID,textAlign:textAlign}));return jsx(StyledText,_extends({},props,getStyledProps(styledProps),{children:children}));};var Text=assignWithoutSideEffects(_Text,{displayName:'Text',componentId:'Text'});
 
-var _excluded$4M=["children","size","weight","testID"];var platformType=getPlatformType();var isPlatformWeb=platformType==='browser'||platformType==='node';var getCodeFontSizeAndLineHeight=function getCodeFontSizeAndLineHeight(size){switch(size){case'medium':return {fontSize:75,lineHeight:75};case'small':return {fontSize:25,lineHeight:25};default:throw new Error("[Blade Code]: Unexpected size: "+size);}};var CodeContainer=styled(BaseBox)(function(props){var padding=makeSpace(props.theme.spacing[0])+" "+makeSpace(props.theme.spacing[2]);return {padding:padding,backgroundColor:props.theme.colors.brand.gray.a50.lowContrast,borderRadius:props.theme.border.radius.medium,display:isPlatformWeb?'inline-block':'flex',alignSelf:isPlatformWeb?undefined:'center',verticalAlign:'middle',lineHeight:makeTypographySize(props.theme.typography.lineHeights[0])};});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$4M);var _getCodeFontSizeAndLi=getCodeFontSizeAndLineHeight(size),fontSize=_getCodeFontSizeAndLi.fontSize,lineHeight=_getCodeFontSizeAndLi.lineHeight;return jsx(CodeContainer,_extends({size:size,as:isPlatformWeb?'span':undefined},metaAttribute({name:MetaConstants.Code,testID:testID}),getStyledProps(styledProps),{children:jsx(BaseText,{color:"surface.text.subtle.lowContrast",fontFamily:"code",fontSize:fontSize,fontWeight:weight,as:isPlatformWeb?'code':undefined,lineHeight:lineHeight,children:children})}));};
+var _excluded$4M=["children","size","weight","isHighlighted","color","testID"];var platformType=getPlatformType();var isPlatformWeb=platformType==='browser'||platformType==='node';var getCodeFontSizeAndLineHeight=function getCodeFontSizeAndLineHeight(size){switch(size){case'medium':return {fontSize:75,lineHeight:75};case'small':return {fontSize:25,lineHeight:25};default:throw new Error("[Blade Code]: Unexpected size: "+size);}};var CodeContainer=styled(BaseBox)(function(props){var padding=makeSpace(props.theme.spacing[0])+" "+makeSpace(props.theme.spacing[2]);return {padding:padding,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',verticalAlign:'middle',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';};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(_ref2,_excluded$4M);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 jsx(CodeContainer,_extends({size:size,isHighlighted:isHighlighted,as:isPlatformWeb?'span':undefined},metaAttribute({name:MetaConstants.Code,testID:testID}),getStyledProps(styledProps),{children:jsx(BaseText,{color:codeTextColor,fontFamily:"code",fontSize:fontSize,fontWeight:weight,as:isPlatformWeb?'code':undefined,lineHeight:lineHeight,children:children})}));};
 
 /**
  * Checks if `value` is `undefined`.