@razorpay/blade 8.6.0 → 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

@@ -3229,7 +3229,7 @@ var componentIds$1={ActionList:'ActionList',ActionListHeader:'ActionListHeader',
 
 var getActionListSectionPosition=function getActionListSectionPosition(children){var childComponentIdArray=React__default.Children.toArray(children).map(function(child){return getComponentId(child);});var lastActionListSectionIndex=childComponentIdArray.lastIndexOf(componentIds$1.ActionListSection);var isActionListItemPresentAfterSection=childComponentIdArray.slice(lastActionListSectionIndex).includes(componentIds$1.ActionListItem);return {isActionListItemPresentAfterSection:isActionListItemPresentAfterSection,lastActionListSectionIndex:lastActionListSectionIndex};};var actionListAllowedChildren=[componentIds$1.ActionListFooter,componentIds$1.ActionListHeader,componentIds$1.ActionListItem,componentIds$1.ActionListSection];var getActionListProperties=function getActionListProperties(children){var sectionData=[];var currentSection=null;var actionListOptions=[];var actionListHeaderChild=null;var actionListFooterChild=null;var getActionListItemWithId=function getActionListItemWithId(child,hideDivider){if(React__default.isValidElement(child)&&!child.props.isDisabled){actionListOptions.push({title:child.props.title,value:child.props.value,onClickTrigger:function onClickTrigger(value){var _child$props$isSelect;var anchorLink=child.props.href;child.props.onClick==null?void 0:child.props.onClick({name:child.props.value,value:(_child$props$isSelect=child.props.isSelected)!=null?_child$props$isSelect:value});if(anchorLink&&!isReactNative$4()){var _child$props$target;var target=(_child$props$target=child.props.target)!=null?_child$props$target:'_self';window.open(anchorLink,target);if(window.top){window.top.open(anchorLink,target);}}}});var currentIndex=actionListOptions.length-1;var foundSection=sectionData.find(function(v){return v.title===currentSection;});if(foundSection){foundSection==null?void 0:foundSection.data.push(_extends({},child.props,{_index:currentIndex}));}else {sectionData.push({title:currentSection,hideDivider:hideDivider,data:[_extends({},child.props,{_index:currentIndex})]});}var clonedChild=React__default.cloneElement(child,{_index:currentIndex});return clonedChild;}return child;};var isActionListItemPresentAfterSection;var lastActionListSectionIndex;if(isReactNative$4()){var _getActionListSection=getActionListSectionPosition(children);isActionListItemPresentAfterSection=_getActionListSection.isActionListItemPresentAfterSection;lastActionListSectionIndex=_getActionListSection.lastActionListSectionIndex;}var childrenWithId=React__default.Children.map(children,function(child,index){if(React__default.isValidElement(child)){if(isValidAllowedChildren(child,componentIds$1.ActionListHeader)){actionListHeaderChild=child;return null;}if(isValidAllowedChildren(child,componentIds$1.ActionListFooter)){actionListFooterChild=child;return null;}if(isValidAllowedChildren(child,componentIds$1.ActionListSection)){var shouldHideDivider=index===lastActionListSectionIndex&&!isActionListItemPresentAfterSection;return React__default.cloneElement(child,{children:React__default.Children.map(child.props.children,function(childInSection){currentSection=child.props.title;if(isValidAllowedChildren(childInSection,componentIds$1.ActionListItem)){return getActionListItemWithId(childInSection,shouldHideDivider);}return childInSection;}),_hideDivider:isReactNative$4()?shouldHideDivider:undefined});}if(isValidAllowedChildren(child,componentIds$1.ActionListItem)){return getActionListItemWithId(child,true);}throw new Error("[ActionList]: Only "+actionListAllowedChildren.join(', ')+" supported inside ActionList");}return child;});return {sectionData:sectionData,childrenWithId:childrenWithId,actionListFooterChild:actionListFooterChild,actionListHeaderChild:actionListHeaderChild,actionListOptions:actionListOptions};};var validateActionListItemProps=function validateActionListItemProps(_ref){var leading=_ref.leading,trailing=_ref.trailing;React__default.Children.map(trailing,function(child){if(!isValidAllowedChildren(child,componentIds$1.ActionListItemIcon)&&!isValidAllowedChildren(child,componentIds$1.ActionListItemText)){throw new Error("[ActionListItem]: Only "+componentIds$1.ActionListItemIcon+" and "+componentIds$1.ActionListItemText+" are allowed in trailing prop");}});React__default.Children.map(leading,function(child){if(!isValidAllowedChildren(child,componentIds$1.ActionListItemIcon)&&!isValidAllowedChildren(child,componentIds$1.ActionListItemText)&&!isValidAllowedChildren(child,componentIds$1.ActionListItemAsset)){throw new Error("[ActionListItem]: Only "+componentIds$1.ActionListItemIcon+", "+componentIds$1.ActionListItemAsset+", and "+componentIds$1.ActionListItemText+" are allowed in leading prop");}});};var getNormalTextColor=function getNormalTextColor(isDisabled){var _ref2=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{},isMuted=_ref2.isMuted;if(isDisabled){return 'surface.text.placeholder.lowContrast';}if(isMuted){return 'surface.text.muted.lowContrast';}return 'surface.text.normal.lowContrast';};
 
-var getBaseActionListStyles=function getBaseActionListStyles(props){var theme=props.theme,_props$surfaceLevel=props.surfaceLevel,surfaceLevel=_props$surfaceLevel===void 0?2:_props$surfaceLevel,isInBottomSheet=props.isInBottomSheet;var backgroundColor=theme.colors.surface.background["level"+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:castWebType(theme.elevation.midRaised)};};
+var getBaseActionListStyles=function getBaseActionListStyles(props){var theme=props.theme,_props$surfaceLevel=props.surfaceLevel,surfaceLevel=_props$surfaceLevel===void 0?2:_props$surfaceLevel,isInBottomSheet=props.isInBottomSheet;var backgroundColor=theme.colors.surface.background["level"+surfaceLevel].lowContrast;return {backgroundColor:backgroundColor,borderWidth:isInBottomSheet?undefined:theme.border.width.thin,borderColor:theme.colors.surface.border.normal.lowContrast,borderStyle:isInBottomSheet?undefined:'solid',borderRadius:makeSize(theme.border.radius.medium),boxShadow:isInBottomSheet||isReactNative$4()?undefined:castWebType(theme.elevation.midRaised)};};
 
 var breakpoints={base:0,xs:320,s:480,m:768,l:1024,xl:1200};
 
@@ -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`.