@razorpay/blade
Version:
The Design System that powers Razorpay
18 lines (15 loc) • 2.48 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { BaseText } from '../BaseText/BaseText.native.js';
import { useValidateAsProp } from '../utils.js';
import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
import '@babel/runtime/helpers/slicedToArray';
import 'react-native';
import '../../../tokens/global/typography.js';
import '../../../tokens/global/motion.js';
import { isReactNative } from '../../../utils/platform/isReactNative.js';
import '../../BladeProvider/useTheme.js';
import { jsx } from 'react/jsx-runtime';
var _excluded=["as","size","weight","color","children","testID","textAlign","textDecorationLine"];var validAsValues=['span','h1','h2','h3','h4','h5','h6'];var getHeadingProps=function getHeadingProps(_ref){var as=_ref.as,size=_ref.size,weight=_ref.weight,color=_ref.color,testID=_ref.testID;var props={color:color,fontSize:300,fontWeight:weight!=null?weight:'semibold',fontStyle:'normal',lineHeight:300,fontFamily:'heading',accessibilityProps:isReactNative()?{role:'heading'}:{},componentName:'heading',testID:testID};if(size==='small'){props.fontSize=300;props.lineHeight=300;props.as='h6';}else if(size==='medium'){props.fontSize=400;props.lineHeight=400;props.as='h5';}else if(size==='large'){props.fontSize=500;props.lineHeight=500;props.as='h4';}else if(size==='xlarge'){props.fontSize=600;props.lineHeight=600;props.as='h3';}else if(size==='2xlarge'){props.fontSize=700;props.lineHeight=700;props.as='h2';}props.as=as||props.as;return props;};var _Heading=function _Heading(_ref2,ref){var as=_ref2.as,_ref2$size=_ref2.size,size=_ref2$size===void 0?'small':_ref2$size,_ref2$weight=_ref2.weight,weight=_ref2$weight===void 0?'semibold':_ref2$weight,_ref2$color=_ref2.color,color=_ref2$color===void 0?'surface.text.gray.normal':_ref2$color,children=_ref2.children,testID=_ref2.testID,textAlign=_ref2.textAlign,textDecorationLine=_ref2.textDecorationLine,styledProps=_objectWithoutProperties(_ref2,_excluded);useValidateAsProp({componentName:'Heading',as:as,validAsValues:validAsValues});var props=getHeadingProps({as:as,size:size,weight:weight,color:color,testID:testID});return jsx(BaseText,Object.assign({},props,{ref:ref,textAlign:textAlign,textDecorationLine:textDecorationLine},getStyledProps(styledProps),{children:children}));};var Heading=React__default.forwardRef(_Heading);
export { Heading, getHeadingProps };
//# sourceMappingURL=Heading.js.map