@razorpay/blade
Version:
The Design System that powers Razorpay
16 lines (13 loc) • 1.92 kB
JavaScript
import { useStepGroup } from './StepGroupContext.js';
import { getMarkerLineSpacings, iconSizeTokens } from './tokens.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import { Indicator } from '../Indicator/Indicator.js';
import 'react-native';
import '@babel/runtime/helpers/slicedToArray';
import 'react';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import '../BladeProvider/useTheme.js';
import { jsx } from 'react/jsx-runtime';
var MarkerBackgroundCircle=function MarkerBackgroundCircle(_ref){var color=_ref.color,size=_ref.size,margin=_ref.margin,children=_ref.children;return jsx(BaseBox,{backgroundColor:color==='primary'?'surface.background.primary.subtle':`feedback.background.${color}.subtle`,display:"flex",alignItems:"center",justifyContent:"center",height:size,width:size,borderRadius:"round",margin:margin,children:children});};var StepItemIndicator=function StepItemIndicator(_ref2){var color=_ref2.color;var _useStepGroup=useStepGroup(),size=_useStepGroup.size;var spacingTokens=getMarkerLineSpacings(size);return jsx(MarkerBackgroundCircle,{color:color,size:makeSize(spacingTokens.markerBackgroundSize),margin:makeSize(spacingTokens.markerMargin),children:jsx(Indicator,{position:"relative",color:color,size:size,accessibilityLabel:`${color} indicator`})});};var StepItemIcon=function StepItemIcon(_ref3){var Icon=_ref3.icon,_ref3$color=_ref3.color,color=_ref3$color===void 0?'neutral':_ref3$color;var _useStepGroup2=useStepGroup(),size=_useStepGroup2.size;var spacingTokens=getMarkerLineSpacings(size);return jsx(MarkerBackgroundCircle,{color:color,size:makeSize(spacingTokens.markerBackgroundSize),margin:makeSize(spacingTokens.markerMargin),children:jsx(Icon,{size:iconSizeTokens[size],color:color==='primary'?'surface.icon.primary.normal':`feedback.icon.${color}.intense`})});};
export { StepItemIcon, StepItemIndicator };
//# sourceMappingURL=StepItemMarker.js.map