@razorpay/blade/build/lib/native/components/Indicator/Indicator.js

The Design System that powers Razorpay

import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { indicatorDotSizes, textSizeMapping } from './indicatorTokens.js';
import 'styled-components/native';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import useTheme from '../BladeProvider/useTheme.js';
import 'react-native';
import '@babel/runtime/helpers/slicedToArray';
import { isReactNative } from '../../utils/platform/isReactNative.js';
import '../BottomSheet/BottomSheetStack.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import 'react-native-svg';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import Circle from '../Icons/_Svg/Circle/Circle.native.js';
import Svg from '../Icons/_Svg/Svg/Svg.native.js';
import '../Typography/Heading/Heading.js';
import { Text } from '../Typography/Text/Text.js';
import '../Typography/Code/Code.js';
import '../Typography/Display/Display.js';
import { getStringFromReactText } from '../../utils/getStringChildren/getStringChildren.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import '../../tokens/global/typography.js';
import '../../tokens/global/motion.js';
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';

var _excluded=["accessibilityLabel","children","size","color","emphasis","testID"];var _Indicator=function _Indicator(_ref,ref){var accessibilityLabel=_ref.accessibilityLabel,children=_ref.children,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$color=_ref.color,color=_ref$color===void 0?'neutral':_ref$color,_ref$emphasis=_ref.emphasis,emphasis=_ref$emphasis===void 0?'subtle':_ref$emphasis,testID=_ref.testID,rest=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var childrenString=getStringFromReactText(children);var isIntense=emphasis==='intense';var isPrimary=color==='primary';var fillColorOuter=isPrimary?theme.colors.surface.background.primary.subtle:theme.colors.feedback.background[color].subtle;var fillColorInner=isPrimary?theme.colors.surface.icon.primary.normal:theme.colors.feedback.icon[color].intense;var isWeb=!isReactNative();var a11yProps=makeAccessible(Object.assign({label:accessibilityLabel!=null?accessibilityLabel:childrenString},isWeb&&{role:'status'}));var svgSize=isIntense?indicatorDotSizes[emphasis][size].outer:indicatorDotSizes[emphasis][size].inner;return jsx(BaseBox,Object.assign({ref:ref,display:isWeb?'inline-flex':'flex'},a11yProps,metaAttribute({name:MetaConstants.Indicator,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsxs(BaseBox,{display:"flex",flexDirection:"row",alignItems:"center",children:[jsx(Svg,{width:String(svgSize),height:String(svgSize),viewBox:"0 0 10 10",fill:"none",children:isIntense?jsxs(Fragment,{children:[jsx(Circle,{cx:"5",cy:"5",r:"5",fill:fillColorOuter}),jsx(Circle,{cx:"5",cy:"5",r:"2.5",fill:fillColorInner})]}):jsx(Circle,{cx:"5",cy:"5",r:"5",fill:fillColorInner})}),jsx(BaseBox,{marginLeft:childrenString?'spacing.2':'spacing.0',children:jsx(Text,{weight:"medium",color:"surface.text.gray.subtle",textAlign:"left",size:textSizeMapping[size],children:children})})]})}));};var Indicator=assignWithoutSideEffects(React__default.forwardRef(_Indicator),{componentId:'Indicator'});

export { Indicator };
//# sourceMappingURL=Indicator.js.map