@razorpay/blade 11.12.0 → 11.13.1

package/build/lib/native/components/ProgressBar/CircularProgressBar.native.js

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import styled from 'styled-components/native';
+import Animated, { useSharedValue, withTiming, cancelAnimation, withDelay, withRepeat, withSequence, useAnimatedStyle } from 'react-native-reanimated';
+import { Text, Circle } from 'react-native-svg';
+import { getCircularProgressSVGTokens, circularProgressSizeTokens } from './progressBarTokens.js';
+import { CircularProgressLabel } from './CircularProgressLabel.js';
+import getIn from '../../utils/lodashButBetter/get.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
+import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.native.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '../Typography/BaseText/BaseText.native.js';
+import '@babel/runtime/helpers/slicedToArray';
+import 'react-native';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
+import { castNativeType } from '../../utils/platform/castUtils.js';
+import useTheme from '../BladeProvider/useTheme.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getTextProps } from '../Typography/Text/Text.js';
+import '../Typography/Code/Code.js';
+import '@gorhom/portal';
+import 'react-native-gesture-handler';
+import '../BottomSheet/BottomSheetStack.js';
+import '@babel/runtime/helpers/defineProperty';
+import Svg from '../Icons/_Svg/Svg/Svg.native.js';
+import getBaseTextStyles from '../Typography/BaseText/getBaseTextStyles.js';
+
+var pulseAnimation={opacityInitial:1,opacityMid:0.65,opacityFinal:1};var StyledSVGText=styled(Text)(function(_ref){var theme=_ref.theme,size=_ref.size,weight=_ref.weight;var textProps=getTextProps({variant:'body',size:size,weight:weight});return Object.assign({},getBaseTextStyles(Object.assign({theme:theme},textProps)),{strokeWidth:0,fill:getIn(theme.colors,textProps.color)});});var CircularProgressBarFilled=function CircularProgressBarFilled(_ref2){var progressPercent=_ref2.progressPercent,fillColor=_ref2.fillColor,backgroundColor=_ref2.backgroundColor,_ref2$size=_ref2.size,size=_ref2$size===void 0?'small':_ref2$size,label=_ref2.label,_ref2$showPercentage=_ref2.showPercentage,showPercentage=_ref2$showPercentage===void 0?true:_ref2$showPercentage,isMeter=_ref2.isMeter,motionEasing=_ref2.motionEasing,pulseMotionDuration=_ref2.pulseMotionDuration,pulseMotionDelay=_ref2.pulseMotionDelay,fillMotionDuration=_ref2.fillMotionDuration;var _getCircularProgressS=getCircularProgressSVGTokens({size:size,progressPercent:progressPercent}),sqSize=_getCircularProgressS.sqSize,strokeWidth=_getCircularProgressS.strokeWidth,radius=_getCircularProgressS.radius,viewBox=_getCircularProgressS.viewBox,dashArray=_getCircularProgressS.dashArray,dashOffset=_getCircularProgressS.dashOffset;var AnimatedCircle=Animated.createAnimatedComponent(Circle);var animatedOpacity=useSharedValue(pulseAnimation.opacityInitial);var animatedStrokeDashoffset=useSharedValue(dashOffset);var _useTheme=useTheme(),theme=_useTheme.theme;var fillAndPulseEasing=getIn(theme.motion,motionEasing);var pulseDuration=castNativeType(makeMotionTime(getIn(theme.motion,pulseMotionDuration)))/2;useEffect(function(){var fillDuration=castNativeType(makeMotionTime(getIn(theme.motion,fillMotionDuration)));animatedStrokeDashoffset.value=withTiming(dashOffset,{duration:fillDuration,easing:fillAndPulseEasing});return function(){cancelAnimation(animatedStrokeDashoffset);};},[dashOffset,animatedStrokeDashoffset,fillMotionDuration,theme,fillAndPulseEasing]);useEffect(function(){var pulsatingAnimationTimingConfig={duration:pulseDuration,easing:fillAndPulseEasing};if(!isMeter){animatedOpacity.value=withDelay(castNativeType(makeMotionTime(getIn(theme.motion,pulseMotionDelay))),withRepeat(withSequence(withTiming(pulseAnimation.opacityMid,pulsatingAnimationTimingConfig),withTiming(pulseAnimation.opacityFinal,pulsatingAnimationTimingConfig)),-1));}return function(){cancelAnimation(animatedOpacity);};},[animatedOpacity,fillAndPulseEasing,pulseDuration,pulseMotionDelay,theme,isMeter]);var firstIndicatorStyles=useAnimatedStyle(function(){return {strokeDashoffset:animatedStrokeDashoffset.value,opacity:progressPercent<100?animatedOpacity.value:1};});return jsxs(BaseBox,{display:"flex",width:"fit-content",alignItems:"center",children:[jsxs(Svg,{width:String(sqSize),height:String(sqSize),viewBox:viewBox,children:[jsx(Circle,{fill:"none",stroke:backgroundColor,cx:String(sqSize/2),cy:String(sqSize/2),r:String(radius),strokeWidth:`${strokeWidth}px`}),jsx(AnimatedCircle,{fill:"none",stroke:fillColor,cx:sqSize/2,cy:sqSize/2,r:radius,strokeWidth:`${strokeWidth}px`,transform:`rotate(-90 ${sqSize/2} ${sqSize/2})`,strokeDasharray:dashArray,strokeDashoffset:dashOffset,style:firstIndicatorStyles}),showPercentage&&size!=='small'&&jsx(StyledSVGText,{size:circularProgressSizeTokens[size].percentTextSize,weight:"semibold",x:"50%",y:"50%",textAnchor:"middle",dy:".5em",children:`${progressPercent}%`})]}),jsx(CircularProgressLabel,{progressPercent:progressPercent,size:size,label:label,showPercentage:showPercentage})]});};
+
+export { CircularProgressBarFilled };
+//# sourceMappingURL=CircularProgressBar.native.js.map

package/build/lib/native/components/ProgressBar/CircularProgressBar.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressBar.native.js","sources":["../../../../../src/components/ProgressBar/CircularProgressBar.native.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport styled from 'styled-components/native';\nimport Animated, {\n  cancelAnimation,\n  useAnimatedStyle,\n  useSharedValue,\n  withDelay,\n  withRepeat,\n  withSequence,\n  withTiming,\n} from 'react-native-reanimated';\nimport { Text as SVGText, Circle } from 'react-native-svg';\nimport type { CircularProgressBarFilledProps } from './types';\nimport { circularProgressSizeTokens, getCircularProgressSVGTokens } from './progressBarTokens';\nimport { CircularProgressLabel } from './CircularProgressLabel';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport type { TextProps } from '~components/Typography';\nimport { getTextProps } from '~components/Typography';\nimport { useTheme } from '~components/BladeProvider';\nimport { castNativeType } from '~utils';\nimport { Svg } from '~components/Icons/_Svg';\nimport getBaseTextStyles from '~components/Typography/BaseText/getBaseTextStyles';\n\nconst pulseAnimation = {\n  opacityInitial: 1,\n  opacityMid: 0.65,\n  opacityFinal: 1,\n};\n\nconst StyledSVGText = styled(SVGText)<Pick<TextProps<{ variant: 'body' }>, 'size' | 'weight'>>(\n  ({ theme, size, weight }) => {\n    const textProps = getTextProps({ variant: 'body', size, weight });\n\n    return {\n      ...getBaseTextStyles({ theme, ...textProps }),\n      strokeWidth: 0,\n      fill: getIn(theme.colors, textProps.color!),\n    };\n  },\n);\n\nconst CircularProgressBarFilled = ({\n  progressPercent,\n  fillColor,\n  backgroundColor,\n  size = 'small',\n  label,\n  showPercentage = true,\n  isMeter,\n  motionEasing,\n  pulseMotionDuration,\n  pulseMotionDelay,\n  fillMotionDuration,\n}: CircularProgressBarFilledProps): React.ReactElement => {\n  const {\n    sqSize,\n    strokeWidth,\n    radius,\n    viewBox,\n    dashArray,\n    dashOffset,\n  } = getCircularProgressSVGTokens({ size, progressPercent });\n\n  const AnimatedCircle = Animated.createAnimatedComponent(Circle);\n  const animatedOpacity = useSharedValue(pulseAnimation.opacityInitial);\n  const animatedStrokeDashoffset = useSharedValue(dashOffset);\n  const { theme } = useTheme();\n  const fillAndPulseEasing = getIn(theme.motion, motionEasing);\n  const pulseDuration =\n    castNativeType(makeMotionTime(getIn(theme.motion, pulseMotionDuration))) / 2;\n\n  // Trigger animation for progress fill\n  useEffect(() => {\n    const fillDuration = castNativeType(makeMotionTime(getIn(theme.motion, fillMotionDuration)));\n    animatedStrokeDashoffset.value = withTiming(dashOffset, {\n      duration: fillDuration,\n      easing: fillAndPulseEasing,\n    });\n    return () => {\n      cancelAnimation(animatedStrokeDashoffset);\n    };\n  }, [dashOffset, animatedStrokeDashoffset, fillMotionDuration, theme, fillAndPulseEasing]);\n\n  // Trigger pulsating animation\n  useEffect(() => {\n    const pulsatingAnimationTimingConfig = {\n      duration: pulseDuration,\n      easing: fillAndPulseEasing,\n    };\n    if (!isMeter) {\n      animatedOpacity.value = withDelay(\n        castNativeType(makeMotionTime(getIn(theme.motion, pulseMotionDelay))),\n        withRepeat(\n          withSequence(\n            withTiming(pulseAnimation.opacityMid, pulsatingAnimationTimingConfig),\n            withTiming(pulseAnimation.opacityFinal, pulsatingAnimationTimingConfig),\n          ),\n          -1,\n        ),\n      );\n    }\n\n    return () => {\n      cancelAnimation(animatedOpacity);\n    };\n  }, [animatedOpacity, fillAndPulseEasing, pulseDuration, pulseMotionDelay, theme, isMeter]);\n\n  const firstIndicatorStyles = useAnimatedStyle(() => {\n    return {\n      strokeDashoffset: animatedStrokeDashoffset.value,\n      opacity: progressPercent < 100 ? animatedOpacity.value : 1,\n    };\n  });\n\n  return (\n    <BaseBox display=\"flex\" width=\"fit-content\" alignItems=\"center\">\n      <Svg width={String(sqSize)} height={String(sqSize)} viewBox={viewBox}>\n        <Circle\n          fill=\"none\"\n          stroke={backgroundColor}\n          cx={String(sqSize / 2)}\n          cy={String(sqSize / 2)}\n          r={String(radius)}\n          strokeWidth={`${strokeWidth}px`}\n        />\n\n        <AnimatedCircle\n          fill=\"none\"\n          stroke={fillColor}\n          cx={sqSize / 2}\n          cy={sqSize / 2}\n          r={radius}\n          strokeWidth={`${strokeWidth}px`}\n          // Start progress marker at 12 O'Clock\n          transform={`rotate(-90 ${sqSize / 2} ${sqSize / 2})`}\n          strokeDasharray={dashArray}\n          strokeDashoffset={dashOffset}\n          style={firstIndicatorStyles}\n        />\n\n        {showPercentage && size !== 'small' && (\n          <StyledSVGText\n            size={circularProgressSizeTokens[size].percentTextSize}\n            weight=\"semibold\"\n            x=\"50%\"\n            y=\"50%\"\n            textAnchor=\"middle\"\n            dy=\".5em\"\n          >\n            {`${progressPercent}%`}\n          </StyledSVGText>\n        )}\n      </Svg>\n\n      <CircularProgressLabel\n        progressPercent={progressPercent}\n        size={size}\n        label={label}\n        showPercentage={showPercentage}\n      />\n    </BaseBox>\n  );\n};\n\nexport { CircularProgressBarFilled };\n"],"names":["pulseAnimation","opacityInitial","opacityMid","opacityFinal","StyledSVGText","styled","SVGText","_ref","theme","size","weight","textProps","getTextProps","variant","Object","assign","getBaseTextStyles","strokeWidth","fill","getIn","colors","color","CircularProgressBarFilled","_ref2","progressPercent","fillColor","backgroundColor","_ref2$size","label","_ref2$showPercentage","showPercentage","isMeter","motionEasing","pulseMotionDuration","pulseMotionDelay","fillMotionDuration","_getCircularProgressS","getCircularProgressSVGTokens","sqSize","radius","viewBox","dashArray","dashOffset","AnimatedCircle","Animated","createAnimatedComponent","Circle","animatedOpacity","useSharedValue","animatedStrokeDashoffset","_useTheme","useTheme","fillAndPulseEasing","motion","pulseDuration","castNativeType","makeMotionTime","useEffect","fillDuration","value","withTiming","duration","easing","cancelAnimation","pulsatingAnimationTimingConfig","withDelay","withRepeat","withSequence","firstIndicatorStyles","useAnimatedStyle","strokeDashoffset","opacity","_jsxs","BaseBox","display","width","alignItems","children","Svg","String","height","_jsx","stroke","cx","cy","r","transform","strokeDasharray","style","circularProgressSizeTokens","percentTextSize","x","y","textAnchor","dy","CircularProgressLabel"],"mappings":"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"}

package/build/lib/native/components/ProgressBar/CircularProgressLabel.js

@@ -0,0 +1,17 @@
+import 'react';
+import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '../Typography/BaseText/BaseText.native.js';
+import '@babel/runtime/helpers/slicedToArray';
+import 'react-native';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
+import '../BladeProvider/useTheme.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Text } from '../Typography/Text/Text.js';
+import '../Typography/Code/Code.js';
+
+var CircularProgressLabel=function CircularProgressLabel(_ref){var _label$trim;var progressPercent=_ref.progressPercent,_ref$size=_ref.size,size=_ref$size===void 0?'small':_ref$size,label=_ref.label,_ref$showPercentage=_ref.showPercentage,showPercentage=_ref$showPercentage===void 0?true:_ref$showPercentage;var hasLabel=label&&((_label$trim=label.trim())==null?void 0:_label$trim.length)>0;return jsxs(BaseBox,{display:"flex",flexDirection:"column",alignItems:"center",children:[hasLabel&&jsx(Text,{marginTop:"spacing.3",variant:"body",weight:"regular",size:"small",children:label}),showPercentage&&size==='small'&&jsxs(Text,{marginTop:hasLabel?'spacing.0':'spacing.3',variant:"body",weight:"semibold",size:"small",children:[progressPercent,"%"]})]});};
+
+export { CircularProgressLabel };
+//# sourceMappingURL=CircularProgressLabel.js.map

package/build/lib/native/components/ProgressBar/CircularProgressLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressLabel.js","sources":["../../../../../src/components/ProgressBar/CircularProgressLabel.tsx"],"sourcesContent":["import React from 'react';\nimport type { CircularProgressBarFilledProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\n\nconst CircularProgressLabel = ({\n  progressPercent,\n  size = 'small',\n  label,\n  showPercentage = true,\n}: Pick<\n  CircularProgressBarFilledProps,\n  'progressPercent' | 'size' | 'label' | 'showPercentage'\n>): React.ReactElement => {\n  const hasLabel = label && label.trim()?.length > 0;\n\n  return (\n    <BaseBox display=\"flex\" flexDirection=\"column\" alignItems=\"center\">\n      {hasLabel && (\n        <Text marginTop=\"spacing.3\" variant=\"body\" weight=\"regular\" size=\"small\">\n          {label}\n        </Text>\n      )}\n\n      {showPercentage && size === 'small' && (\n        <Text\n          marginTop={hasLabel ? 'spacing.0' : 'spacing.3'}\n          variant=\"body\"\n          weight=\"semibold\"\n          size=\"small\"\n        >\n          {progressPercent}%\n        </Text>\n      )}\n    </BaseBox>\n  );\n};\n\nexport { CircularProgressLabel };\n"],"names":["CircularProgressLabel","_ref","_label$trim","progressPercent","_ref$size","size","label","_ref$showPercentage","showPercentage","hasLabel","trim","length","_jsxs","BaseBox","display","flexDirection","alignItems","children","_jsx","Text","marginTop","variant","weight"],"mappings":";;;;;;;;;;;;;AAKM,IAAAA,qBAAqB,CAAG,SAAxBA,qBAAqBA,CAAAC,IAAA,CAQD,CAAAC,IAAAA,WAAA,KAPxBC,eAAe,CAAAF,IAAA,CAAfE,eAAe,CAAAC,SAAA,CAAAH,IAAA,CACfI,IAAI,CAAJA,IAAI,CAAAD,SAAA,GAAA,KAAA,CAAA,CAAG,OAAO,CAAAA,SAAA,CACdE,KAAK,CAAAL,IAAA,CAALK,KAAK,CAAAC,mBAAA,CAAAN,IAAA,CACLO,cAAc,CAAdA,cAAc,CAAAD,mBAAA,GAAG,KAAA,CAAA,CAAA,IAAI,CAAAA,mBAAA,CAKrB,IAAME,QAAQ,CAAGH,KAAK,EAAI,EAAAJ,WAAA,CAAAI,KAAK,CAACI,IAAI,EAAE,GAAA,IAAA,CAAA,KAAA,CAAA,CAAZR,WAAA,CAAcS,MAAM,EAAG,CAAC,CAElD,OACEC,IAAA,CAACC,OAAO,CAAA,CAACC,OAAO,CAAC,MAAM,CAACC,aAAa,CAAC,QAAQ,CAACC,UAAU,CAAC,QAAQ,CAAAC,QAAA,CAC/DR,CAAAA,QAAQ,EACPS,GAAA,CAACC,IAAI,CAACC,CAAAA,SAAS,CAAC,WAAW,CAACC,OAAO,CAAC,MAAM,CAACC,MAAM,CAAC,SAAS,CAACjB,IAAI,CAAC,OAAO,CAAAY,QAAA,CACrEX,KAAK,CACF,CACP,CAEAE,cAAc,EAAIH,IAAI,GAAK,OAAO,EACjCO,IAAA,CAACO,IAAI,EACHC,SAAS,CAAEX,QAAQ,CAAG,WAAW,CAAG,WAAY,CAChDY,OAAO,CAAC,MAAM,CACdC,MAAM,CAAC,UAAU,CACjBjB,IAAI,CAAC,OAAO,CAAAY,QAAA,CAEXd,CAAAA,eAAe,CAAC,GACnB,CAAA,CAAM,CACP,CACM,CAAA,CAAC,CAEd;;;;"}

package/build/lib/native/components/ProgressBar/ProgressBar.js

@@ -1,5 +1,6 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { ProgressBarFilled } from './ProgressBarFilled.native.js';
+import { CircularProgressBarFilled } from './CircularProgressBar.native.js';
 import clamp from '../../utils/lodashButBetter/clamp.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
@@ -23,7 +24,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js';
 
-var _excluded=["accessibilityLabel","color","isIndeterminate","label","showPercentage","size","value","variant","min","max","testID"];var progressBarHeight={small:size[2],medium:size[4]};var ProgressBar=function ProgressBar(_ref){var _label$trim;var accessibilityLabel=_ref.accessibilityLabel,color=_ref.color,_ref$isIndeterminate=_ref.isIndeterminate,isIndeterminate=_ref$isIndeterminate===void 0?false:_ref$isIndeterminate,label=_ref.label,_ref$showPercentage=_ref.showPercentage,showPercentage=_ref$showPercentage===void 0?true:_ref$showPercentage,_ref$size=_ref.size,size=_ref$size===void 0?'small':_ref$size,_ref$value=_ref.value,value=_ref$value===void 0?0:_ref$value,_ref$variant=_ref.variant,variant=_ref$variant===void 0?'progress':_ref$variant,_ref$min=_ref.min,min=_ref$min===void 0?0:_ref$min,_ref$max=_ref.max,max=_ref$max===void 0?100:_ref$max,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var id=useId(variant);if(__DEV__){if(variant==='meter'&&isIndeterminate){throwBladeError({moduleName:'ProgressBar',message:`Cannot set 'isIndeterminate' when 'variant' is 'meter'.`});}}var unfilledBackgroundColor=theme.colors.feedback.background.neutral.subtle;var filledBackgroundColor=color?theme.colors.feedback.background[color].intense:theme.colors.surface.background.primary.intense;var hasLabel=label&&((_label$trim=label.trim())==null?void 0:_label$trim.length)>0;var isMeter=variant==='meter';var progressValue=clamp(value,min,max);var percentageProgressValue=Math.floor((progressValue-min)*100/(max-min));var shouldShowPercentage=showPercentage&&!isMeter&&!isIndeterminate;var accessibilityProps={role:'progressbar',label:accessibilityLabel!=null?accessibilityLabel:label,valueNow:percentageProgressValue,valueText:`${percentageProgressValue}%`,valueMin:min,valueMax:max};if(isMeter){accessibilityProps.role='meter';accessibilityProps.valueNow=progressValue;accessibilityProps.valueText=`${progressValue}`;}if(isIndeterminate){accessibilityProps.valueNow=undefined;accessibilityProps.valueMin=undefined;accessibilityProps.valueMax=undefined;accessibilityProps.valueText=undefined;}return jsx(BaseBox,Object.assign({},getStyledProps(styledProps),metaAttribute({name:MetaConstants.ProgressBar,testID:testID}),{children:jsxs(BaseBox,{display:"flex",flexDirection:"column",width:"100%",children:[jsxs(BaseBox,{display:"flex",flexDirection:"row",justifyContent:hasLabel?'space-between':'flex-end',children:[hasLabel?jsx(Text,{as:"label",variant:"body",size:"small",color:"surface.text.gray.subtle",children:label}):null,shouldShowPercentage?jsx(BaseBox,{marginBottom:"spacing.2",children:jsx(Text,{variant:"body",size:"small",color:"surface.text.gray.subtle",children:`${percentageProgressValue}%`})}):null]}),jsx(BaseBox,Object.assign({id:id},makeAccessible({role:accessibilityProps.role,label:accessibilityProps.label,valueNow:accessibilityProps.valueNow,valueText:accessibilityProps.valueText,valueMin:accessibilityProps.valueMin,valueMax:accessibilityProps.valueMax}),{children:jsx(BaseBox,{backgroundColor:unfilledBackgroundColor,height:makeSize(progressBarHeight[size]),overflow:"hidden",position:"relative",children:jsx(ProgressBarFilled,{backgroundColor:filledBackgroundColor,progress:percentageProgressValue,fillMotionDuration:"duration.2xgentle",pulseMotionDuration:"duration.2xgentle",indeterminateMotionDuration:"duration.2xgentle",pulseMotionDelay:"delay.long",motionEasing:"easing.standard.revealing",variant:variant,isIndeterminate:isIndeterminate})})}))]})}));};
+var _excluded=["accessibilityLabel","color","type","isIndeterminate","label","showPercentage","size","value","variant","min","max","testID"];var progressBarHeight={small:size[2],medium:size[4],large:size[0]};var ProgressBar=function ProgressBar(_ref){var _label$trim;var accessibilityLabel=_ref.accessibilityLabel,color=_ref.color,type=_ref.type,_ref$isIndeterminate=_ref.isIndeterminate,isIndeterminate=_ref$isIndeterminate===void 0?false:_ref$isIndeterminate,label=_ref.label,_ref$showPercentage=_ref.showPercentage,showPercentage=_ref$showPercentage===void 0?true:_ref$showPercentage,_ref$size=_ref.size,size=_ref$size===void 0?'small':_ref$size,_ref$value=_ref.value,value=_ref$value===void 0?0:_ref$value,_ref$variant=_ref.variant,variant=_ref$variant===void 0?'progress':_ref$variant,_ref$min=_ref.min,min=_ref$min===void 0?0:_ref$min,_ref$max=_ref.max,max=_ref$max===void 0?100:_ref$max,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var progressType=!type&&(variant==='meter'||variant==='progress')?variant:type;var progressVariant=variant==='meter'||variant==='progress'?'linear':variant;var id=useId(`${progressType}-${progressVariant}`);if(__DEV__){if(progressType==='meter'&&isIndeterminate){throwBladeError({moduleName:'ProgressBar',message:`Cannot set 'isIndeterminate' when 'type' or 'variant' is 'meter'.`});}if(progressVariant==='circular'&&isIndeterminate){throwBladeError({moduleName:'ProgressBar',message:`Cannot set 'isIndeterminate' when 'variant' is 'circular'.`});}if(progressVariant==='linear'&&size==='large'){throwBladeError({moduleName:'ProgressBar',message:`Large size isn't available when 'variant' is 'linear'.`});}if(type&&(variant==='progress'||variant==='meter')){throwBladeError({moduleName:'ProgressBar',message:`variant can only be 'linear' or 'circular' when 'type=${type}'.`});}}var unfilledBackgroundColor=theme.colors.feedback.background.neutral.subtle;var filledBackgroundColor=color?theme.colors.feedback.background[color].intense:theme.colors.surface.background.primary.intense;var hasLabel=label&&((_label$trim=label.trim())==null?void 0:_label$trim.length)>0;var isMeter=progressType==='meter';var isCircular=progressVariant==='circular';var progressValue=clamp(value,min,max);var percentageProgressValue=Math.floor((progressValue-min)*100/(max-min));var shouldShowPercentage=showPercentage&&!isMeter&&!isIndeterminate;var accessibilityProps={role:'progressbar',label:accessibilityLabel!=null?accessibilityLabel:label,valueNow:percentageProgressValue,valueText:`${percentageProgressValue}%`,valueMin:min,valueMax:max};if(isMeter){accessibilityProps.role='meter';accessibilityProps.valueNow=progressValue;accessibilityProps.valueText=`${progressValue}`;}if(isIndeterminate){accessibilityProps.valueNow=undefined;accessibilityProps.valueMin=undefined;accessibilityProps.valueMax=undefined;accessibilityProps.valueText=undefined;}return jsx(BaseBox,Object.assign({},getStyledProps(styledProps),metaAttribute({name:MetaConstants.ProgressBar,testID:testID}),{children:jsxs(BaseBox,{display:"flex",flexDirection:"column",width:"100%",children:[!isCircular?jsxs(BaseBox,{display:"flex",flexDirection:"row",justifyContent:hasLabel?'space-between':'flex-end',children:[hasLabel?jsx(Text,{as:"label",variant:"body",size:"small",color:"surface.text.gray.subtle",children:label}):null,shouldShowPercentage?jsx(BaseBox,{marginBottom:"spacing.2",children:jsx(Text,{variant:"body",size:"small",color:"surface.text.gray.subtle",children:`${percentageProgressValue}%`})}):null]}):null,jsx(BaseBox,Object.assign({id:id},makeAccessible({role:accessibilityProps.role,label:accessibilityProps.label,valueNow:accessibilityProps.valueNow,valueText:accessibilityProps.valueText,valueMin:accessibilityProps.valueMin,valueMax:accessibilityProps.valueMax}),{children:isCircular?jsx(CircularProgressBarFilled,{size:size,label:label,progressPercent:percentageProgressValue,isMeter:isMeter,showPercentage:shouldShowPercentage,backgroundColor:unfilledBackgroundColor,fillColor:filledBackgroundColor,pulseMotionDuration:"duration.2xgentle",fillMotionDuration:"duration.2xgentle",pulseMotionDelay:"delay.long",motionEasing:"easing.standard.revealing"}):jsx(BaseBox,{backgroundColor:unfilledBackgroundColor,height:makeSize(progressBarHeight[size]),overflow:"hidden",position:"relative",children:jsx(ProgressBarFilled,{backgroundColor:filledBackgroundColor,progress:percentageProgressValue,fillMotionDuration:"duration.2xgentle",pulseMotionDuration:"duration.2xgentle",indeterminateMotionDuration:"duration.2xgentle",pulseMotionDelay:"delay.long",motionEasing:"easing.standard.revealing",type:progressType,isIndeterminate:isIndeterminate})})}))]})}));};
 
 export { ProgressBar };
 //# sourceMappingURL=ProgressBar.js.map

package/build/lib/native/components/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sources":["../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { ProgressBarFilled } from './ProgressBarFilled';\nimport clamp from '~utils/lodashButBetter/clamp';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { Text } from '~components/Typography/Text';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useId } from '~utils/useId';\nimport { useTheme } from '~components/BladeProvider';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { size } from '~tokens/global';\nimport type { TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport type { AccessibilityProps } from '~utils/makeAccessible';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { throwBladeError } from '~utils/logger';\n\ntype ProgressBarCommonProps = {\n  /**\n   * Sets aria-label to help users know what the progress bar is for. Default value is the same as the `label` passed.\n   */\n  accessibilityLabel?: string;\n  /**\n   * Sets the color of the progress bar which changes the feedback color.\n   */\n  color?: FeedbackColors;\n  /**\n   * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.\n   */\n  label?: string;\n  /**\n   * Sets the size of the progress bar.\n   * @default 'small'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * Sets the progress value of the progress bar.\n   * @default 'small'\n   */\n  value?: number;\n  /**\n   * Sets the minimum value for the progress bar.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Sets the maximum value for the progress bar.\n   * @default 100\n   */\n  max?: number;\n} & TestID &\n  StyledPropsBlade;\n\ntype ProgressBarVariant = 'progress' | 'meter';\n\ntype ProgressBarProgressProps = ProgressBarCommonProps & {\n  /**\n   * Sets the variant to be rendered for the progress bar.\n   * @default 'progress'\n   */\n  variant?: Extract<ProgressBarVariant, 'progress'>;\n  /**\n   * Sets whether the progress bar is in an indeterminate state.\n   * @default false\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n   * @default true\n   */\n  showPercentage?: boolean;\n};\n\ntype ProgressBarMeterProps = ProgressBarCommonProps & {\n  /**\n   * Sets the variant to be rendered for thr progress bar.\n   * @default 'progress'\n   */\n  variant?: Extract<ProgressBarVariant, 'meter'>;\n  /**\n   * Sets whether the progress bar is in an indeterminate state.\n   * @default false\n   */\n  isIndeterminate?: undefined;\n  /**\n   * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n   * @default false\n   */\n  showPercentage?: undefined;\n};\n\ntype ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;\n\nconst progressBarHeight: Record<NonNullable<ProgressBarCommonProps['size']>, 2 | 4> = {\n  small: size[2],\n  medium: size[4],\n};\n\nconst ProgressBar = ({\n  accessibilityLabel,\n  color,\n  isIndeterminate = false,\n  label,\n  showPercentage = true,\n  size = 'small',\n  value = 0,\n  variant = 'progress',\n  min = 0,\n  max = 100,\n  testID,\n  ...styledProps\n}: ProgressBarProps): ReactElement => {\n  const { theme } = useTheme();\n  const id = useId(variant);\n\n  if (__DEV__) {\n    if (variant === 'meter' && isIndeterminate) {\n      throwBladeError({\n        moduleName: 'ProgressBar',\n        message: `Cannot set 'isIndeterminate' when 'variant' is 'meter'.`,\n      });\n    }\n  }\n\n  const unfilledBackgroundColor = theme.colors.feedback.background.neutral\n    .subtle as BaseBoxProps['backgroundColor'];\n  const filledBackgroundColor = color\n    ? theme.colors.feedback.background[color].intense\n    : theme.colors.surface.background.primary.intense;\n  const hasLabel = label && label.trim()?.length > 0;\n  const isMeter = variant === 'meter';\n  const progressValue = clamp(value, min, max);\n  const percentageProgressValue = Math.floor(((progressValue - min) * 100) / (max - min));\n  const shouldShowPercentage = showPercentage && !isMeter && !isIndeterminate;\n  const accessibilityProps: Pick<\n    AccessibilityProps,\n    'role' | 'label' | 'valueMax' | 'valueNow' | 'valueMin' | 'valueText'\n  > = {\n    role: 'progressbar',\n    label: accessibilityLabel ?? label,\n    valueNow: percentageProgressValue,\n    valueText: `${percentageProgressValue}%`,\n    valueMin: min,\n    valueMax: max,\n  };\n\n  if (isMeter) {\n    accessibilityProps.role = 'meter';\n    accessibilityProps.valueNow = progressValue;\n    accessibilityProps.valueText = `${progressValue}`;\n  }\n\n  if (isIndeterminate) {\n    accessibilityProps.valueNow = undefined;\n    accessibilityProps.valueMin = undefined;\n    accessibilityProps.valueMax = undefined;\n    accessibilityProps.valueText = undefined;\n  }\n\n  return (\n    <BaseBox\n      {...getStyledProps(styledProps)}\n      {...metaAttribute({ name: MetaConstants.ProgressBar, testID })}\n    >\n      <BaseBox display=\"flex\" flexDirection=\"column\" width=\"100%\">\n        <BaseBox\n          display=\"flex\"\n          flexDirection=\"row\"\n          justifyContent={hasLabel ? 'space-between' : 'flex-end'}\n        >\n          {hasLabel ? (\n            <Text as=\"label\" variant=\"body\" size=\"small\" color=\"surface.text.gray.subtle\">\n              {label}\n            </Text>\n          ) : null}\n          {shouldShowPercentage ? (\n            <BaseBox marginBottom=\"spacing.2\">\n              <Text\n                variant=\"body\"\n                size=\"small\"\n                color=\"surface.text.gray.subtle\"\n              >{`${percentageProgressValue}%`}</Text>\n            </BaseBox>\n          ) : null}\n        </BaseBox>\n        <BaseBox\n          id={id}\n          {...makeAccessible({\n            role: accessibilityProps.role,\n            label: accessibilityProps.label,\n            valueNow: accessibilityProps.valueNow,\n            valueText: accessibilityProps.valueText,\n            valueMin: accessibilityProps.valueMin,\n            valueMax: accessibilityProps.valueMax,\n          })}\n        >\n          <BaseBox\n            backgroundColor={unfilledBackgroundColor}\n            height={makeSize(progressBarHeight[size])}\n            overflow=\"hidden\"\n            position=\"relative\"\n          >\n            <ProgressBarFilled\n              backgroundColor={filledBackgroundColor}\n              progress={percentageProgressValue}\n              fillMotionDuration=\"duration.2xgentle\"\n              pulseMotionDuration=\"duration.2xgentle\"\n              indeterminateMotionDuration=\"duration.2xgentle\"\n              pulseMotionDelay=\"delay.long\"\n              motionEasing=\"easing.standard.revealing\"\n              variant={variant}\n              isIndeterminate={isIndeterminate}\n            />\n          </BaseBox>\n        </BaseBox>\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport type { ProgressBarProps, ProgressBarVariant };\nexport { ProgressBar };\n"],"names":["progressBarHeight","small","size","medium","ProgressBar","_ref","_label$trim","accessibilityLabel","color","_ref$isIndeterminate","isIndeterminate","label","_ref$showPercentage","showPercentage","_ref$size","_ref$value","value","_ref$variant","variant","_ref$min","min","_ref$max","max","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","id","useId","__DEV__","throwBladeError","moduleName","message","unfilledBackgroundColor","colors","feedback","background","neutral","subtle","filledBackgroundColor","intense","surface","primary","hasLabel","trim","length","isMeter","progressValue","clamp","percentageProgressValue","Math","floor","shouldShowPercentage","accessibilityProps","role","valueNow","valueText","valueMin","valueMax","undefined","_jsx","BaseBox","Object","assign","getStyledProps","metaAttribute","name","MetaConstants","children","_jsxs","display","flexDirection","width","justifyContent","Text","as","marginBottom","makeAccessible","backgroundColor","height","makeSize","overflow","position","ProgressBarFilled","progress","fillMotionDuration","pulseMotionDuration","indeterminateMotionDuration","pulseMotionDelay","motionEasing"],"mappings":"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"}
+{"version":3,"file":"ProgressBar.js","sources":["../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { ProgressBarFilled } from './ProgressBarFilled';\nimport { CircularProgressBarFilled } from './CircularProgressBar';\nimport clamp from '~utils/lodashButBetter/clamp';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { Text } from '~components/Typography/Text';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useId } from '~utils/useId';\nimport { useTheme } from '~components/BladeProvider';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { size } from '~tokens/global';\nimport type { TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport type { AccessibilityProps } from '~utils/makeAccessible';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { throwBladeError } from '~utils/logger';\n\ntype ProgressBarCommonProps = {\n  /**\n   * Sets aria-label to help users know what the progress bar is for. Default value is the same as the `label` passed.\n   */\n  accessibilityLabel?: string;\n  /**\n   * Sets the color of the progress bar which changes the feedback color.\n   */\n  color?: FeedbackColors;\n  /**\n   * Sets the type of the progress bar.\n   * @default 'progress'\n   */\n  type?: 'meter' | 'progress';\n  /**\n   * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.\n   */\n  label?: string;\n  /**\n   * Sets the size of the progress bar.\n   * Note: 'large' size isn't available when the variant is 'linear'.\n   * @default 'small'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Sets the progress value of the progress bar.\n   * @default 'small'\n   */\n  value?: number;\n  /**\n   * Sets the minimum value for the progress bar.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Sets the maximum value for the progress bar.\n   * @default 100\n   */\n  max?: number;\n} & TestID &\n  StyledPropsBlade;\n\ntype ProgressBarVariant = 'progress' | 'meter' | 'linear' | 'circular';\n\ntype ProgressBarProgressProps = ProgressBarCommonProps & {\n  /**\n   * Sets the variant to be rendered for the progress bar.\n   * @default 'progress'\n   */\n  variant?: Extract<ProgressBarVariant, 'progress' | 'linear' | 'circular'>;\n  /**\n   * Sets whether the progress bar is in an indeterminate state.\n   * @default false\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n   * @default true\n   */\n  showPercentage?: boolean;\n};\n\ntype ProgressBarMeterProps = ProgressBarCommonProps & {\n  /**\n   * Sets the variant to be rendered for thr progress bar.\n   * @default 'progress'\n   */\n  variant?: Extract<ProgressBarVariant, 'meter' | 'linear' | 'circular'>;\n  /**\n   * Sets whether the progress bar is in an indeterminate state.\n   * @default false\n   */\n  isIndeterminate?: undefined;\n  /**\n   * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n   * @default false\n   */\n  showPercentage?: undefined;\n};\n\ntype ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;\n\nconst progressBarHeight: Record<NonNullable<ProgressBarProps['size']>, 2 | 4 | 0> = {\n  small: size[2],\n  medium: size[4],\n  // Large size isn't available when variant is 'linear'\n  large: size[0],\n};\n\nconst ProgressBar = ({\n  accessibilityLabel,\n  color,\n  type,\n  isIndeterminate = false,\n  label,\n  showPercentage = true,\n  size = 'small',\n  value = 0,\n  variant = 'progress',\n  min = 0,\n  max = 100,\n  testID,\n  ...styledProps\n}: ProgressBarProps): ReactElement => {\n  const { theme } = useTheme();\n  const progressType = !type && (variant === 'meter' || variant === 'progress') ? variant : type;\n  const progressVariant = variant === 'meter' || variant === 'progress' ? 'linear' : variant;\n  const id = useId(`${progressType}-${progressVariant}`);\n\n  if (__DEV__) {\n    if (progressType === 'meter' && isIndeterminate) {\n      throwBladeError({\n        moduleName: 'ProgressBar',\n        message: `Cannot set 'isIndeterminate' when 'type' or 'variant' is 'meter'.`,\n      });\n    }\n\n    if (progressVariant === 'circular' && isIndeterminate) {\n      throwBladeError({\n        moduleName: 'ProgressBar',\n        message: `Cannot set 'isIndeterminate' when 'variant' is 'circular'.`,\n      });\n    }\n\n    if (progressVariant === 'linear' && size === 'large') {\n      throwBladeError({\n        moduleName: 'ProgressBar',\n        message: `Large size isn't available when 'variant' is 'linear'.`,\n      });\n    }\n\n    if (type && (variant === 'progress' || variant === 'meter')) {\n      throwBladeError({\n        moduleName: 'ProgressBar',\n        message: `variant can only be 'linear' or 'circular' when 'type=${type}'.`,\n      });\n    }\n  }\n\n  const unfilledBackgroundColor = theme.colors.feedback.background.neutral\n    .subtle as BaseBoxProps['backgroundColor'];\n  const filledBackgroundColor = color\n    ? theme.colors.feedback.background[color].intense\n    : theme.colors.surface.background.primary.intense;\n  const hasLabel = label && label.trim()?.length > 0;\n  const isMeter = progressType === 'meter';\n  const isCircular = progressVariant === 'circular';\n  const progressValue = clamp(value, min, max);\n  const percentageProgressValue = Math.floor(((progressValue - min) * 100) / (max - min));\n  const shouldShowPercentage = showPercentage && !isMeter && !isIndeterminate;\n  const accessibilityProps: Pick<\n    AccessibilityProps,\n    'role' | 'label' | 'valueMax' | 'valueNow' | 'valueMin' | 'valueText'\n  > = {\n    role: 'progressbar',\n    label: accessibilityLabel ?? label,\n    valueNow: percentageProgressValue,\n    valueText: `${percentageProgressValue}%`,\n    valueMin: min,\n    valueMax: max,\n  };\n\n  if (isMeter) {\n    accessibilityProps.role = 'meter';\n    accessibilityProps.valueNow = progressValue;\n    accessibilityProps.valueText = `${progressValue}`;\n  }\n\n  if (isIndeterminate) {\n    accessibilityProps.valueNow = undefined;\n    accessibilityProps.valueMin = undefined;\n    accessibilityProps.valueMax = undefined;\n    accessibilityProps.valueText = undefined;\n  }\n\n  return (\n    <BaseBox\n      {...getStyledProps(styledProps)}\n      {...metaAttribute({ name: MetaConstants.ProgressBar, testID })}\n    >\n      <BaseBox display=\"flex\" flexDirection=\"column\" width=\"100%\">\n        {!isCircular ? (\n          <BaseBox\n            display=\"flex\"\n            flexDirection=\"row\"\n            justifyContent={hasLabel ? 'space-between' : 'flex-end'}\n          >\n            {hasLabel ? (\n              <Text as=\"label\" variant=\"body\" size=\"small\" color=\"surface.text.gray.subtle\">\n                {label}\n              </Text>\n            ) : null}\n            {shouldShowPercentage ? (\n              <BaseBox marginBottom=\"spacing.2\">\n                <Text\n                  variant=\"body\"\n                  size=\"small\"\n                  color=\"surface.text.gray.subtle\"\n                >{`${percentageProgressValue}%`}</Text>\n              </BaseBox>\n            ) : null}\n          </BaseBox>\n        ) : null}\n\n        <BaseBox\n          id={id}\n          {...makeAccessible({\n            role: accessibilityProps.role,\n            label: accessibilityProps.label,\n            valueNow: accessibilityProps.valueNow,\n            valueText: accessibilityProps.valueText,\n            valueMin: accessibilityProps.valueMin,\n            valueMax: accessibilityProps.valueMax,\n          })}\n        >\n          {isCircular ? (\n            <CircularProgressBarFilled\n              size={size}\n              label={label}\n              progressPercent={percentageProgressValue}\n              isMeter={isMeter}\n              showPercentage={shouldShowPercentage}\n              backgroundColor={unfilledBackgroundColor as string}\n              fillColor={filledBackgroundColor}\n              pulseMotionDuration=\"duration.2xgentle\"\n              fillMotionDuration=\"duration.2xgentle\"\n              pulseMotionDelay=\"delay.long\"\n              motionEasing=\"easing.standard.revealing\"\n            />\n          ) : (\n            <BaseBox\n              backgroundColor={unfilledBackgroundColor}\n              height={makeSize(progressBarHeight[size])}\n              overflow=\"hidden\"\n              position=\"relative\"\n            >\n              <ProgressBarFilled\n                backgroundColor={filledBackgroundColor}\n                progress={percentageProgressValue}\n                fillMotionDuration=\"duration.2xgentle\"\n                pulseMotionDuration=\"duration.2xgentle\"\n                indeterminateMotionDuration=\"duration.2xgentle\"\n                pulseMotionDelay=\"delay.long\"\n                motionEasing=\"easing.standard.revealing\"\n                type={progressType}\n                isIndeterminate={isIndeterminate}\n              />\n            </BaseBox>\n          )}\n        </BaseBox>\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport type { ProgressBarProps, ProgressBarVariant };\nexport { ProgressBar };\n"],"names":["progressBarHeight","small","size","medium","large","ProgressBar","_ref","_label$trim","accessibilityLabel","color","type","_ref$isIndeterminate","isIndeterminate","label","_ref$showPercentage","showPercentage","_ref$size","_ref$value","value","_ref$variant","variant","_ref$min","min","_ref$max","max","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","progressType","progressVariant","id","useId","__DEV__","throwBladeError","moduleName","message","unfilledBackgroundColor","colors","feedback","background","neutral","subtle","filledBackgroundColor","intense","surface","primary","hasLabel","trim","length","isMeter","isCircular","progressValue","clamp","percentageProgressValue","Math","floor","shouldShowPercentage","accessibilityProps","role","valueNow","valueText","valueMin","valueMax","undefined","_jsx","BaseBox","Object","assign","getStyledProps","metaAttribute","name","MetaConstants","children","_jsxs","display","flexDirection","width","justifyContent","Text","as","marginBottom","makeAccessible","CircularProgressBarFilled","progressPercent","backgroundColor","fillColor","pulseMotionDuration","fillMotionDuration","pulseMotionDelay","motionEasing","height","makeSize","overflow","position","ProgressBarFilled","progress","indeterminateMotionDuration"],"mappings":"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"}

package/build/lib/native/components/ProgressBar/ProgressBarFilled.native.js

@@ -13,7 +13,7 @@ import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.native
 import '../BottomSheet/BottomSheetStack.js';
 import { jsx } from 'react/jsx-runtime';
 
-var ProgressBarIndeterminateFilledContainer=styled(Animated.View)(function(_ref){var backgroundColor=_ref.backgroundColor;return {backgroundColor:backgroundColor,height:'100%',width:indeterminateAnimation.fillWidth,position:'absolute'};});var ProgressBarDeterminateFilledContainer=styled(Animated.View)(function(_ref2){var backgroundColor=_ref2.backgroundColor,progress=_ref2.progress;return {backgroundColor:backgroundColor,height:'100%',width:`${progress}%`};});var ProgressBarPulseAnimation=styled(Animated.View)({backgroundColor:pulseAnimation.backgroundColor,opacity:pulseAnimation.opacityInitial,width:'100%',height:'100%'});var ProgressBarFilled=function ProgressBarFilled(_ref3){var backgroundColor=_ref3.backgroundColor,progress=_ref3.progress,fillMotionDuration=_ref3.fillMotionDuration,motionEasing=_ref3.motionEasing,pulseMotionDuration=_ref3.pulseMotionDuration,pulseMotionDelay=_ref3.pulseMotionDelay,variant=_ref3.variant,isIndeterminate=_ref3.isIndeterminate,indeterminateMotionDuration=_ref3.indeterminateMotionDuration;var animatedWidth=useSharedValue(progress);var animatedOpacity=useSharedValue(pulseAnimation.opacityInitial);var animatedScaleX=useSharedValue(indeterminateAnimation.scaleXInitial);var animatedLeft=useSharedValue(indeterminateAnimation.leftInitial);var _useTheme=useTheme(),theme=_useTheme.theme;var fillAndPulseEasing=getIn(theme.motion,motionEasing);var pulseDuration=castNativeType(makeMotionTime(getIn(theme.motion,pulseMotionDuration)))/2;useEffect(function(){var fillDuration=castNativeType(makeMotionTime(getIn(theme.motion,fillMotionDuration)));animatedWidth.value=withTiming(progress,{duration:fillDuration,easing:fillAndPulseEasing});return function(){cancelAnimation(animatedWidth);};},[progress,animatedWidth,fillMotionDuration,theme,fillAndPulseEasing]);var progressFillAnimatedStyle=useAnimatedStyle(function(){return {width:`${animatedWidth.value}%`};});useEffect(function(){if(variant==='progress'&&isIndeterminate){var indeterminateDuration=castNativeType(makeMotionTime(getIn(theme.motion,indeterminateMotionDuration)));var indeterminateEasing=Easing.linear;animatedLeft.value=withRepeat(withTiming(indeterminateAnimation.leftFinal,{duration:indeterminateDuration,easing:indeterminateEasing}),-1);animatedScaleX.value=withRepeat(withSequence(withTiming(indeterminateAnimation.scaleXMid,{duration:indeterminateDuration/2,easing:indeterminateEasing}),withTiming(indeterminateAnimation.scaleXFinal,{duration:indeterminateDuration/2,easing:indeterminateEasing})),-1);}return function(){cancelAnimation(animatedLeft);cancelAnimation(animatedScaleX);};},[animatedLeft,animatedScaleX,indeterminateMotionDuration,isIndeterminate,theme,variant]);var indeterminateAnimatedStyle=useAnimatedStyle(function(){return {left:animatedLeft.value,transform:[{scaleX:animatedScaleX.value}]};});useEffect(function(){var pulsatingAnimationTimingConfig={duration:pulseDuration,easing:fillAndPulseEasing};if(variant==='progress'){animatedOpacity.value=withDelay(castNativeType(makeMotionTime(getIn(theme.motion,pulseMotionDelay))),withRepeat(withSequence(withTiming(pulseAnimation.opacityMid,pulsatingAnimationTimingConfig),withTiming(pulseAnimation.opacityFinal,pulsatingAnimationTimingConfig)),-1));}return function(){cancelAnimation(animatedOpacity);};},[animatedOpacity,fillAndPulseEasing,pulseDuration,pulseMotionDelay,theme,variant]);var pulseAnimatedStyle=useAnimatedStyle(function(){return {opacity:animatedOpacity.value};});var ProgressBarFilledContainer=isIndeterminate?ProgressBarIndeterminateFilledContainer:ProgressBarDeterminateFilledContainer;return jsx(ProgressBarFilledContainer,{style:isIndeterminate?indeterminateAnimatedStyle:progressFillAnimatedStyle,backgroundColor:backgroundColor,progress:progress,children:jsx(ProgressBarPulseAnimation,{style:pulseAnimatedStyle})});};
+var ProgressBarIndeterminateFilledContainer=styled(Animated.View)(function(_ref){var backgroundColor=_ref.backgroundColor;return {backgroundColor:backgroundColor,height:'100%',width:indeterminateAnimation.fillWidth,position:'absolute'};});var ProgressBarDeterminateFilledContainer=styled(Animated.View)(function(_ref2){var backgroundColor=_ref2.backgroundColor,progress=_ref2.progress;return {backgroundColor:backgroundColor,height:'100%',width:`${progress}%`};});var ProgressBarPulseAnimation=styled(Animated.View)({backgroundColor:pulseAnimation.backgroundColor,opacity:pulseAnimation.opacityInitial,width:'100%',height:'100%'});var ProgressBarFilled=function ProgressBarFilled(_ref3){var backgroundColor=_ref3.backgroundColor,progress=_ref3.progress,fillMotionDuration=_ref3.fillMotionDuration,motionEasing=_ref3.motionEasing,pulseMotionDuration=_ref3.pulseMotionDuration,pulseMotionDelay=_ref3.pulseMotionDelay,type=_ref3.type,isIndeterminate=_ref3.isIndeterminate,indeterminateMotionDuration=_ref3.indeterminateMotionDuration;var animatedWidth=useSharedValue(progress);var animatedOpacity=useSharedValue(pulseAnimation.opacityInitial);var animatedScaleX=useSharedValue(indeterminateAnimation.scaleXInitial);var animatedLeft=useSharedValue(indeterminateAnimation.leftInitial);var _useTheme=useTheme(),theme=_useTheme.theme;var fillAndPulseEasing=getIn(theme.motion,motionEasing);var pulseDuration=castNativeType(makeMotionTime(getIn(theme.motion,pulseMotionDuration)))/2;useEffect(function(){var fillDuration=castNativeType(makeMotionTime(getIn(theme.motion,fillMotionDuration)));animatedWidth.value=withTiming(progress,{duration:fillDuration,easing:fillAndPulseEasing});return function(){cancelAnimation(animatedWidth);};},[progress,animatedWidth,fillMotionDuration,theme,fillAndPulseEasing]);var progressFillAnimatedStyle=useAnimatedStyle(function(){return {width:`${animatedWidth.value}%`};});useEffect(function(){if(type==='progress'&&isIndeterminate){var indeterminateDuration=castNativeType(makeMotionTime(getIn(theme.motion,indeterminateMotionDuration)));var indeterminateEasing=Easing.linear;animatedLeft.value=withRepeat(withTiming(indeterminateAnimation.leftFinal,{duration:indeterminateDuration,easing:indeterminateEasing}),-1);animatedScaleX.value=withRepeat(withSequence(withTiming(indeterminateAnimation.scaleXMid,{duration:indeterminateDuration/2,easing:indeterminateEasing}),withTiming(indeterminateAnimation.scaleXFinal,{duration:indeterminateDuration/2,easing:indeterminateEasing})),-1);}return function(){cancelAnimation(animatedLeft);cancelAnimation(animatedScaleX);};},[animatedLeft,animatedScaleX,indeterminateMotionDuration,isIndeterminate,theme,type]);var indeterminateAnimatedStyle=useAnimatedStyle(function(){return {left:animatedLeft.value,transform:[{scaleX:animatedScaleX.value}]};});useEffect(function(){var pulsatingAnimationTimingConfig={duration:pulseDuration,easing:fillAndPulseEasing};if(type==='progress'){animatedOpacity.value=withDelay(castNativeType(makeMotionTime(getIn(theme.motion,pulseMotionDelay))),withRepeat(withSequence(withTiming(pulseAnimation.opacityMid,pulsatingAnimationTimingConfig),withTiming(pulseAnimation.opacityFinal,pulsatingAnimationTimingConfig)),-1));}return function(){cancelAnimation(animatedOpacity);};},[animatedOpacity,fillAndPulseEasing,pulseDuration,pulseMotionDelay,theme,type]);var pulseAnimatedStyle=useAnimatedStyle(function(){return {opacity:animatedOpacity.value};});var ProgressBarFilledContainer=isIndeterminate?ProgressBarIndeterminateFilledContainer:ProgressBarDeterminateFilledContainer;return jsx(ProgressBarFilledContainer,{style:isIndeterminate?indeterminateAnimatedStyle:progressFillAnimatedStyle,backgroundColor:backgroundColor,progress:progress,children:jsx(ProgressBarPulseAnimation,{style:pulseAnimatedStyle})});};
 
 export { ProgressBarFilled };
 //# sourceMappingURL=ProgressBarFilled.native.js.map

package/build/lib/native/components/ProgressBar/ProgressBarFilled.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarFilled.native.js","sources":["../../../../../src/components/ProgressBar/ProgressBarFilled.native.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport styled from 'styled-components';\nimport Animated, {\n  cancelAnimation,\n  Easing,\n  useAnimatedStyle,\n  useSharedValue,\n  withDelay,\n  withRepeat,\n  withSequence,\n  withTiming,\n} from 'react-native-reanimated';\nimport type { ProgressBarFilledProps } from './types';\nimport { indeterminateAnimation, pulseAnimation } from './progressBarTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport { castNativeType } from '~utils';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\nconst ProgressBarIndeterminateFilledContainer = styled(Animated.View)<\n  Pick<ProgressBarFilledProps, 'backgroundColor' | 'progress'>\n>(({ backgroundColor }) => ({\n  backgroundColor,\n  height: '100%',\n  width: indeterminateAnimation.fillWidth,\n  position: 'absolute',\n}));\n\nconst ProgressBarDeterminateFilledContainer = styled(Animated.View)<\n  Pick<ProgressBarFilledProps, 'backgroundColor' | 'progress'>\n>(({ backgroundColor, progress }) => ({\n  backgroundColor,\n  height: '100%',\n  width: `${progress}%`,\n}));\n\nconst ProgressBarPulseAnimation = styled(Animated.View)({\n  backgroundColor: pulseAnimation.backgroundColor,\n  opacity: pulseAnimation.opacityInitial,\n  width: '100%',\n  height: '100%',\n});\n\nconst ProgressBarFilled = ({\n  backgroundColor,\n  progress,\n  fillMotionDuration,\n  motionEasing,\n  pulseMotionDuration,\n  pulseMotionDelay,\n  variant,\n  isIndeterminate,\n  indeterminateMotionDuration,\n}: ProgressBarFilledProps): React.ReactElement => {\n  const animatedWidth = useSharedValue(progress); // for progress fill animation\n  const animatedOpacity = useSharedValue(pulseAnimation.opacityInitial); // for pulse animation\n  const animatedScaleX = useSharedValue(indeterminateAnimation.scaleXInitial); // for indeterminate scale animation\n  const animatedLeft = useSharedValue(indeterminateAnimation.leftInitial); // for indeterminate slide animation\n\n  const { theme } = useTheme();\n  const fillAndPulseEasing = getIn(theme.motion, motionEasing);\n  const pulseDuration =\n    castNativeType(makeMotionTime(getIn(theme.motion, pulseMotionDuration))) / 2; // divided by 2 since we animate it with 2 steps in a sequence\n\n  // Trigger animation for progress fill\n  useEffect(() => {\n    const fillDuration = castNativeType(makeMotionTime(getIn(theme.motion, fillMotionDuration)));\n    animatedWidth.value = withTiming(progress, {\n      duration: fillDuration,\n      easing: fillAndPulseEasing,\n    });\n    return () => {\n      cancelAnimation(animatedWidth);\n    };\n  }, [progress, animatedWidth, fillMotionDuration, theme, fillAndPulseEasing]);\n\n  // Animated styles for progress fill animation\n  const progressFillAnimatedStyle = useAnimatedStyle(() => {\n    return {\n      width: `${animatedWidth.value}%`,\n    };\n  });\n\n  // Trigger animation for indeterminate progress bar\n  useEffect(() => {\n    if (variant === 'progress' && isIndeterminate) {\n      const indeterminateDuration = castNativeType(\n        makeMotionTime(getIn(theme.motion, indeterminateMotionDuration)),\n      );\n      const indeterminateEasing = Easing.linear;\n\n      // Sliding animation\n      animatedLeft.value = withRepeat(\n        withTiming(indeterminateAnimation.leftFinal, {\n          duration: indeterminateDuration,\n          easing: indeterminateEasing,\n        }),\n        -1,\n      );\n\n      // Scaling animation\n      animatedScaleX.value = withRepeat(\n        withSequence(\n          withTiming(indeterminateAnimation.scaleXMid, {\n            duration: indeterminateDuration / 2, // divided by 2 since we animate it with 2 steps in a sequence\n            easing: indeterminateEasing,\n          }),\n          withTiming(indeterminateAnimation.scaleXFinal, {\n            duration: indeterminateDuration / 2, // divided by 2 since we animate it with 2 steps in a sequence\n            easing: indeterminateEasing,\n          }),\n        ),\n        -1,\n      );\n    }\n\n    return () => {\n      cancelAnimation(animatedLeft);\n      cancelAnimation(animatedScaleX);\n    };\n  }, [animatedLeft, animatedScaleX, indeterminateMotionDuration, isIndeterminate, theme, variant]);\n\n  // Animated styles for indeterminate animation\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  //@ts-expect-error TS errors originating from reanimated. Should be fixed in future versions. Ref: https://github.com/software-mansion/react-native-reanimated/issues/4840\n  const indeterminateAnimatedStyle = useAnimatedStyle(() => {\n    return {\n      left: animatedLeft.value,\n      transform: [{ scaleX: animatedScaleX.value }],\n    };\n  });\n\n  //Trigger pulsating animation\n  useEffect(() => {\n    const pulsatingAnimationTimingConfig = {\n      duration: pulseDuration,\n      easing: fillAndPulseEasing,\n    };\n    if (variant === 'progress') {\n      animatedOpacity.value = withDelay(\n        castNativeType(makeMotionTime(getIn(theme.motion, pulseMotionDelay))),\n        withRepeat(\n          withSequence(\n            withTiming(pulseAnimation.opacityMid, pulsatingAnimationTimingConfig),\n            withTiming(pulseAnimation.opacityFinal, pulsatingAnimationTimingConfig),\n          ),\n          -1,\n        ),\n      );\n    }\n\n    return () => {\n      cancelAnimation(animatedOpacity);\n    };\n  }, [animatedOpacity, fillAndPulseEasing, pulseDuration, pulseMotionDelay, theme, variant]);\n\n  // Animated styles for pulse animation\n  const pulseAnimatedStyle = useAnimatedStyle(() => {\n    return {\n      opacity: animatedOpacity.value,\n    };\n  });\n\n  const ProgressBarFilledContainer = isIndeterminate\n    ? ProgressBarIndeterminateFilledContainer\n    : ProgressBarDeterminateFilledContainer;\n\n  return (\n    <ProgressBarFilledContainer\n      style={isIndeterminate ? indeterminateAnimatedStyle : progressFillAnimatedStyle}\n      backgroundColor={backgroundColor}\n      progress={progress}\n    >\n      <ProgressBarPulseAnimation style={pulseAnimatedStyle} />\n    </ProgressBarFilledContainer>\n  );\n};\n\nexport type { ProgressBarFilledProps };\nexport { ProgressBarFilled };\n"],"names":["ProgressBarIndeterminateFilledContainer","styled","Animated","View","_ref","backgroundColor","height","width","indeterminateAnimation","fillWidth","position","ProgressBarDeterminateFilledContainer","_ref2","progress","ProgressBarPulseAnimation","pulseAnimation","opacity","opacityInitial","ProgressBarFilled","_ref3","fillMotionDuration","motionEasing","pulseMotionDuration","pulseMotionDelay","variant","isIndeterminate","indeterminateMotionDuration","animatedWidth","useSharedValue","animatedOpacity","animatedScaleX","scaleXInitial","animatedLeft","leftInitial","_useTheme","useTheme","theme","fillAndPulseEasing","getIn","motion","pulseDuration","castNativeType","makeMotionTime","useEffect","fillDuration","value","withTiming","duration","easing","cancelAnimation","progressFillAnimatedStyle","useAnimatedStyle","indeterminateDuration","indeterminateEasing","Easing","linear","withRepeat","leftFinal","withSequence","scaleXMid","scaleXFinal","indeterminateAnimatedStyle","left","transform","scaleX","pulsatingAnimationTimingConfig","withDelay","opacityMid","opacityFinal","pulseAnimatedStyle","ProgressBarFilledContainer","_jsx","style","children"],"mappings":"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"}
+{"version":3,"file":"ProgressBarFilled.native.js","sources":["../../../../../src/components/ProgressBar/ProgressBarFilled.native.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport styled from 'styled-components';\nimport Animated, {\n  cancelAnimation,\n  Easing,\n  useAnimatedStyle,\n  useSharedValue,\n  withDelay,\n  withRepeat,\n  withSequence,\n  withTiming,\n} from 'react-native-reanimated';\nimport type { ProgressBarFilledProps } from './types';\nimport { indeterminateAnimation, pulseAnimation } from './progressBarTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport { castNativeType } from '~utils';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\nconst ProgressBarIndeterminateFilledContainer = styled(Animated.View)<\n  Pick<ProgressBarFilledProps, 'backgroundColor' | 'progress'>\n>(({ backgroundColor }) => ({\n  backgroundColor,\n  height: '100%',\n  width: indeterminateAnimation.fillWidth,\n  position: 'absolute',\n}));\n\nconst ProgressBarDeterminateFilledContainer = styled(Animated.View)<\n  Pick<ProgressBarFilledProps, 'backgroundColor' | 'progress'>\n>(({ backgroundColor, progress }) => ({\n  backgroundColor,\n  height: '100%',\n  width: `${progress}%`,\n}));\n\nconst ProgressBarPulseAnimation = styled(Animated.View)({\n  backgroundColor: pulseAnimation.backgroundColor,\n  opacity: pulseAnimation.opacityInitial,\n  width: '100%',\n  height: '100%',\n});\n\nconst ProgressBarFilled = ({\n  backgroundColor,\n  progress,\n  fillMotionDuration,\n  motionEasing,\n  pulseMotionDuration,\n  pulseMotionDelay,\n  type,\n  isIndeterminate,\n  indeterminateMotionDuration,\n}: ProgressBarFilledProps): React.ReactElement => {\n  const animatedWidth = useSharedValue(progress); // for progress fill animation\n  const animatedOpacity = useSharedValue(pulseAnimation.opacityInitial); // for pulse animation\n  const animatedScaleX = useSharedValue(indeterminateAnimation.scaleXInitial); // for indeterminate scale animation\n  const animatedLeft = useSharedValue(indeterminateAnimation.leftInitial); // for indeterminate slide animation\n\n  const { theme } = useTheme();\n  const fillAndPulseEasing = getIn(theme.motion, motionEasing);\n  const pulseDuration =\n    castNativeType(makeMotionTime(getIn(theme.motion, pulseMotionDuration))) / 2; // divided by 2 since we animate it with 2 steps in a sequence\n\n  // Trigger animation for progress fill\n  useEffect(() => {\n    const fillDuration = castNativeType(makeMotionTime(getIn(theme.motion, fillMotionDuration)));\n    animatedWidth.value = withTiming(progress, {\n      duration: fillDuration,\n      easing: fillAndPulseEasing,\n    });\n    return () => {\n      cancelAnimation(animatedWidth);\n    };\n  }, [progress, animatedWidth, fillMotionDuration, theme, fillAndPulseEasing]);\n\n  // Animated styles for progress fill animation\n  const progressFillAnimatedStyle = useAnimatedStyle(() => {\n    return {\n      width: `${animatedWidth.value}%`,\n    };\n  });\n\n  // Trigger animation for indeterminate progress bar\n  useEffect(() => {\n    if (type === 'progress' && isIndeterminate) {\n      const indeterminateDuration = castNativeType(\n        makeMotionTime(getIn(theme.motion, indeterminateMotionDuration)),\n      );\n      const indeterminateEasing = Easing.linear;\n\n      // Sliding animation\n      animatedLeft.value = withRepeat(\n        withTiming(indeterminateAnimation.leftFinal, {\n          duration: indeterminateDuration,\n          easing: indeterminateEasing,\n        }),\n        -1,\n      );\n\n      // Scaling animation\n      animatedScaleX.value = withRepeat(\n        withSequence(\n          withTiming(indeterminateAnimation.scaleXMid, {\n            duration: indeterminateDuration / 2, // divided by 2 since we animate it with 2 steps in a sequence\n            easing: indeterminateEasing,\n          }),\n          withTiming(indeterminateAnimation.scaleXFinal, {\n            duration: indeterminateDuration / 2, // divided by 2 since we animate it with 2 steps in a sequence\n            easing: indeterminateEasing,\n          }),\n        ),\n        -1,\n      );\n    }\n\n    return () => {\n      cancelAnimation(animatedLeft);\n      cancelAnimation(animatedScaleX);\n    };\n  }, [animatedLeft, animatedScaleX, indeterminateMotionDuration, isIndeterminate, theme, type]);\n\n  // Animated styles for indeterminate animation\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  //@ts-expect-error TS errors originating from reanimated. Should be fixed in future versions. Ref: https://github.com/software-mansion/react-native-reanimated/issues/4840\n  const indeterminateAnimatedStyle = useAnimatedStyle(() => {\n    return {\n      left: animatedLeft.value,\n      transform: [{ scaleX: animatedScaleX.value }],\n    };\n  });\n\n  //Trigger pulsating animation\n  useEffect(() => {\n    const pulsatingAnimationTimingConfig = {\n      duration: pulseDuration,\n      easing: fillAndPulseEasing,\n    };\n    if (type === 'progress') {\n      animatedOpacity.value = withDelay(\n        castNativeType(makeMotionTime(getIn(theme.motion, pulseMotionDelay))),\n        withRepeat(\n          withSequence(\n            withTiming(pulseAnimation.opacityMid, pulsatingAnimationTimingConfig),\n            withTiming(pulseAnimation.opacityFinal, pulsatingAnimationTimingConfig),\n          ),\n          -1,\n        ),\n      );\n    }\n\n    return () => {\n      cancelAnimation(animatedOpacity);\n    };\n  }, [animatedOpacity, fillAndPulseEasing, pulseDuration, pulseMotionDelay, theme, type]);\n\n  // Animated styles for pulse animation\n  const pulseAnimatedStyle = useAnimatedStyle(() => {\n    return {\n      opacity: animatedOpacity.value,\n    };\n  });\n\n  const ProgressBarFilledContainer = isIndeterminate\n    ? ProgressBarIndeterminateFilledContainer\n    : ProgressBarDeterminateFilledContainer;\n\n  return (\n    <ProgressBarFilledContainer\n      style={isIndeterminate ? indeterminateAnimatedStyle : progressFillAnimatedStyle}\n      backgroundColor={backgroundColor}\n      progress={progress}\n    >\n      <ProgressBarPulseAnimation style={pulseAnimatedStyle} />\n    </ProgressBarFilledContainer>\n  );\n};\n\nexport type { ProgressBarFilledProps };\nexport { ProgressBarFilled };\n"],"names":["ProgressBarIndeterminateFilledContainer","styled","Animated","View","_ref","backgroundColor","height","width","indeterminateAnimation","fillWidth","position","ProgressBarDeterminateFilledContainer","_ref2","progress","ProgressBarPulseAnimation","pulseAnimation","opacity","opacityInitial","ProgressBarFilled","_ref3","fillMotionDuration","motionEasing","pulseMotionDuration","pulseMotionDelay","type","isIndeterminate","indeterminateMotionDuration","animatedWidth","useSharedValue","animatedOpacity","animatedScaleX","scaleXInitial","animatedLeft","leftInitial","_useTheme","useTheme","theme","fillAndPulseEasing","getIn","motion","pulseDuration","castNativeType","makeMotionTime","useEffect","fillDuration","value","withTiming","duration","easing","cancelAnimation","progressFillAnimatedStyle","useAnimatedStyle","indeterminateDuration","indeterminateEasing","Easing","linear","withRepeat","leftFinal","withSequence","scaleXMid","scaleXFinal","indeterminateAnimatedStyle","left","transform","scaleX","pulsatingAnimationTimingConfig","withDelay","opacityMid","opacityFinal","pulseAnimatedStyle","ProgressBarFilledContainer","_jsx","style","children"],"mappings":"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"}

package/build/lib/native/components/ProgressBar/progressBarTokens.js

@@ -1,4 +1,8 @@
-var indeterminateAnimation={scaleXInitial:1,scaleXMid:5,scaleXFinal:1,leftInitial:'-8%',leftMid:'50%',leftFinal:'103%',fillWidth:'5%'};var pulseAnimation={opacityInitial:0,opacityMid:0.25,opacityFinal:0,backgroundColor:'white'};
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
+import { size } from '../../tokens/global/size.js';
 
-export { indeterminateAnimation, pulseAnimation };
+var indeterminateAnimation={scaleXInitial:1,scaleXMid:5,scaleXFinal:1,leftInitial:'-8%',leftMid:'50%',leftFinal:'103%',fillWidth:'5%'};var pulseAnimation={opacityInitial:0,opacityMid:0.25,opacityFinal:0,backgroundColor:'white'};var circularProgressSizeTokens={small:{size:size[24],strokeWidth:size[3],percentTextSize:'small'},medium:{size:size[48],strokeWidth:size[5],percentTextSize:'small'},large:{size:size[72],strokeWidth:size[7],percentTextSize:'medium'}};var getCircularProgressSVGTokens=function getCircularProgressSVGTokens(_ref){var size=_ref.size,progressPercent=_ref.progressPercent;var sqSize=circularProgressSizeTokens[size].size;var strokeWidth=circularProgressSizeTokens[size].strokeWidth;var radius=(sqSize-strokeWidth)/2;var viewBox=`0 0 ${sqSize} ${sqSize}`;var dashArray=radius*Math.PI*2;var dashOffset=dashArray-dashArray*progressPercent/100;return {sqSize:sqSize,strokeWidth:strokeWidth,radius:radius,viewBox:viewBox,dashArray:dashArray,dashOffset:dashOffset};};
+
+export { circularProgressSizeTokens, getCircularProgressSVGTokens, indeterminateAnimation, pulseAnimation };
 //# sourceMappingURL=progressBarTokens.js.map

package/build/lib/native/components/ProgressBar/progressBarTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"progressBarTokens.js","sources":["../../../../../src/components/ProgressBar/progressBarTokens.ts"],"sourcesContent":["const indeterminateAnimation = {\n  scaleXInitial: 1,\n  scaleXMid: 5,\n  scaleXFinal: 1,\n  leftInitial: '-8%',\n  leftMid: '50%',\n  leftFinal: '103%',\n  fillWidth: '5%',\n};\n\nconst pulseAnimation = {\n  opacityInitial: 0,\n  opacityMid: 0.25,\n  opacityFinal: 0,\n  backgroundColor: 'white',\n};\n\nexport { indeterminateAnimation, pulseAnimation };\n"],"names":["indeterminateAnimation","scaleXInitial","scaleXMid","scaleXFinal","leftInitial","leftMid","leftFinal","fillWidth","pulseAnimation","opacityInitial","opacityMid","opacityFinal","backgroundColor"],"mappings":"AAAM,IAAAA,sBAAsB,CAAG,CAC7BC,aAAa,CAAE,CAAC,CAChBC,SAAS,CAAE,CAAC,CACZC,WAAW,CAAE,CAAC,CACdC,WAAW,CAAE,KAAK,CAClBC,OAAO,CAAE,KAAK,CACdC,SAAS,CAAE,MAAM,CACjBC,SAAS,CAAE,IACb,EAEM,IAAAC,cAAc,CAAG,CACrBC,cAAc,CAAE,CAAC,CACjBC,UAAU,CAAE,IAAI,CAChBC,YAAY,CAAE,CAAC,CACfC,eAAe,CAAE,OACnB;;;;"}
+{"version":3,"file":"progressBarTokens.js","sources":["../../../../../src/components/ProgressBar/progressBarTokens.ts"],"sourcesContent":["import type { CircularProgressBarFilledProps } from './types';\nimport { size } from '~tokens/global';\n\nconst indeterminateAnimation = {\n  scaleXInitial: 1,\n  scaleXMid: 5,\n  scaleXFinal: 1,\n  leftInitial: '-8%',\n  leftMid: '50%',\n  leftFinal: '103%',\n  fillWidth: '5%',\n};\n\nconst pulseAnimation = {\n  opacityInitial: 0,\n  opacityMid: 0.25,\n  opacityFinal: 0,\n  backgroundColor: 'white',\n};\n\nconst circularProgressSizeTokens = {\n  small: {\n    size: size[24],\n    strokeWidth: size[3],\n    percentTextSize: 'small',\n  },\n  medium: {\n    size: size[48],\n    strokeWidth: size[5],\n    percentTextSize: 'small',\n  },\n  large: {\n    size: size[72],\n    strokeWidth: size[7],\n    percentTextSize: 'medium',\n  },\n} as const;\n\nconst getCircularProgressSVGTokens = ({\n  size,\n  progressPercent,\n}: {\n  size: NonNullable<CircularProgressBarFilledProps['size']>;\n  progressPercent: number;\n}): {\n  sqSize: number;\n  strokeWidth: number;\n  radius: number;\n  viewBox: string;\n  dashArray: number;\n  dashOffset: number;\n} => {\n  // Size of the enclosing square\n  const sqSize = circularProgressSizeTokens[size].size;\n  const strokeWidth = circularProgressSizeTokens[size].strokeWidth;\n\n  // SVG centers the stroke width on the radius, subtract out so circle fits in square\n  const radius = (sqSize - strokeWidth) / 2;\n  // Enclose circle in a circumscribing square\n  const viewBox = `0 0 ${sqSize} ${sqSize}`;\n  // Arc length at 100% coverage is the circle circumference\n  const dashArray = radius * Math.PI * 2;\n  // Scale 100% coverage overlay with the actual percent\n  const dashOffset = dashArray - (dashArray * progressPercent) / 100;\n\n  return {\n    sqSize,\n    strokeWidth,\n    radius,\n    viewBox,\n    dashArray,\n    dashOffset,\n  };\n};\n\nexport {\n  indeterminateAnimation,\n  pulseAnimation,\n  circularProgressSizeTokens,\n  getCircularProgressSVGTokens,\n};\n"],"names":["indeterminateAnimation","scaleXInitial","scaleXMid","scaleXFinal","leftInitial","leftMid","leftFinal","fillWidth","pulseAnimation","opacityInitial","opacityMid","opacityFinal","backgroundColor","circularProgressSizeTokens","small","size","strokeWidth","percentTextSize","medium","large","getCircularProgressSVGTokens","_ref","progressPercent","sqSize","radius","viewBox","dashArray","Math","PI","dashOffset"],"mappings":";;;;AAGM,IAAAA,sBAAsB,CAAG,CAC7BC,aAAa,CAAE,CAAC,CAChBC,SAAS,CAAE,CAAC,CACZC,WAAW,CAAE,CAAC,CACdC,WAAW,CAAE,KAAK,CAClBC,OAAO,CAAE,KAAK,CACdC,SAAS,CAAE,MAAM,CACjBC,SAAS,CAAE,IACb,EAEM,IAAAC,cAAc,CAAG,CACrBC,cAAc,CAAE,CAAC,CACjBC,UAAU,CAAE,IAAI,CAChBC,YAAY,CAAE,CAAC,CACfC,eAAe,CAAE,OACnB,EAEM,IAAAC,0BAA0B,CAAG,CACjCC,KAAK,CAAE,CACLC,IAAI,CAAEA,IAAI,CAAC,EAAE,CAAC,CACdC,WAAW,CAAED,IAAI,CAAC,CAAC,CAAC,CACpBE,eAAe,CAAE,OACnB,CAAC,CACDC,MAAM,CAAE,CACNH,IAAI,CAAEA,IAAI,CAAC,EAAE,CAAC,CACdC,WAAW,CAAED,IAAI,CAAC,CAAC,CAAC,CACpBE,eAAe,CAAE,OACnB,CAAC,CACDE,KAAK,CAAE,CACLJ,IAAI,CAAEA,IAAI,CAAC,EAAE,CAAC,CACdC,WAAW,CAAED,IAAI,CAAC,CAAC,CAAC,CACpBE,eAAe,CAAE,QACnB,CACF,EAEM,IAAAG,4BAA4B,CAAG,SAA/BA,4BAA4BA,CAAAC,IAAA,CAa7B,CAZH,IAAAN,IAAI,CAAAM,IAAA,CAAJN,IAAI,CACJO,eAAe,CAAAD,IAAA,CAAfC,eAAe,CAaf,IAAMC,MAAM,CAAGV,0BAA0B,CAACE,IAAI,CAAC,CAACA,IAAI,CACpD,IAAMC,WAAW,CAAGH,0BAA0B,CAACE,IAAI,CAAC,CAACC,WAAW,CAGhE,IAAMQ,MAAM,CAAG,CAACD,MAAM,CAAGP,WAAW,EAAI,CAAC,CAEzC,IAAMS,OAAO,CAAI,CAAMF,IAAAA,EAAAA,MAAO,CAAGA,CAAAA,EAAAA,MAAO,CAAC,CAAA,CAEzC,IAAMG,SAAS,CAAGF,MAAM,CAAGG,IAAI,CAACC,EAAE,CAAG,CAAC,CAEtC,IAAMC,UAAU,CAAGH,SAAS,CAAIA,SAAS,CAAGJ,eAAe,CAAI,GAAG,CAElE,OAAO,CACLC,MAAM,CAANA,MAAM,CACNP,WAAW,CAAXA,WAAW,CACXQ,MAAM,CAANA,MAAM,CACNC,OAAO,CAAPA,OAAO,CACPC,SAAS,CAATA,SAAS,CACTG,UAAU,CAAVA,UACF,CAAC,CACH;;;;"}

package/build/lib/native/tokens/global/size.js

@@ -1,4 +1,4 @@
-var size={0:0,1:1,2:2,3:3,4:4,5:5,6:6,8:8,10:10,12:12,16:16,18:18,20:20,24:24,28:28,32:32,36:36,40:40,44:44,48:48,56:56,64:64,100:100,120:120,140:140,160:160,176:176,200:200,240:240,300:300,360:360,400:400,584:584,640:640,760:760,800:800,1024:1024,1136:1136};
+var size={0:0,1:1,2:2,3:3,4:4,5:5,6:6,7:7,8:8,10:10,12:12,16:16,18:18,20:20,24:24,28:28,32:32,36:36,40:40,44:44,48:48,56:56,64:64,72:72,100:100,120:120,140:140,160:160,176:176,200:200,240:240,300:300,360:360,400:400,584:584,640:640,760:760,800:800,1024:1024,1136:1136};
 
 export { size };
 //# sourceMappingURL=size.js.map

package/build/lib/native/tokens/global/size.js.map

@@ -1 +1 @@
-{"version":3,"file":"size.js","sources":["../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 32 px */\n  32: 32,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 56 px */\n  56: 56,\n  /** 64 px */\n  64: 64,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 176 px */\n  176: 176,\n  /** 200 px */\n  200: 200,\n  /** 240 px */\n  240: 240,\n  /** 300 px */\n  300: 300,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAGa,IAAAA,IAAI,CAAG,CAElB,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,IAAI,CAAE,IAAI,CAEV,IAAI,CAAE,IACR;;;;"}
+{"version":3,"file":"size.js","sources":["../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 7 px */\n  7: 7,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 32 px */\n  32: 32,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 56 px */\n  56: 56,\n  /** 64 px */\n  64: 64,\n  /** 72 px */\n  72: 72,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 176 px */\n  176: 176,\n  /** 200 px */\n  200: 200,\n  /** 240 px */\n  240: 240,\n  /** 300 px */\n  300: 300,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAGa,IAAAA,IAAI,CAAG,CAElB,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,IAAI,CAAE,IAAI,CAEV,IAAI,CAAE,IACR;;;;"}

package/build/lib/web/development/components/Input/PhoneNumberInput/CountrySelector.web.js

@@ -85,7 +85,15 @@ var CountrySelector = function CountrySelector(_ref) {
         variant: "tertiary",
         accessibilityLabel: "".concat(countryNameFormatter.of(selectedCountry), " - Select Country"),
         icon: isDropdownOpen ? ChevronUpIcon : ChevronDownIcon,
-        iconPosition: "right",
+        iconPosition: "right"
+        // We need to prevent the click event from propagating to the BaseInputWrapper,
+        // Because the BaseInputWrapper is listening for click events to focus the input.
+        // We don't want that to happen when the user clicks on the dropdown button
+        // otherwise the dropdown will close immediately after opening
+        ,
+        onClick: function onClick(e) {
+          e.stopPropagation();
+        },
         children: /*#__PURE__*/jsx("img", {
           loading: "lazy",
           role: "presentation",

package/build/lib/web/development/components/Input/PhoneNumberInput/CountrySelector.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountrySelector.web.js","sources":["../../../../../../../src/components/Input/PhoneNumberInput/CountrySelector.web.tsx"],"sourcesContent":["import type { CountryCodeType, getFlagsForAllCountries } from '@razorpay/i18nify-js';\nimport { getDialCodeByCountryCode, getFlagOfCountry } from '@razorpay/i18nify-js';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  ActionList,\n  ActionListItem,\n  ActionListItemAsset,\n  ActionListItemText,\n} from '~components/ActionList';\nimport { BottomSheet, BottomSheetBody, BottomSheetHeader } from '~components/BottomSheet';\nimport type { DropdownOverlayProps } from '~components/Dropdown';\nimport { Dropdown, DropdownButton, DropdownOverlay } from '~components/Dropdown';\nimport { ChevronDownIcon, ChevronUpIcon } from '~components/Icons';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { size as sizes } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst countryNameFormatter = new Intl.DisplayNames(['en'], { type: 'region' });\n\ntype CountryData = {\n  code: CountryCodeType;\n  name: string;\n}[];\ntype CounterSelectorProps = {\n  selectedCountry: CountryCodeType;\n  inputWrapperRef: DropdownOverlayProps['referenceRef'];\n  countryData: CountryData;\n  onItemClick: (props: { name: string }) => void;\n  flags: ReturnType<typeof getFlagsForAllCountries>;\n  isDisabled?: boolean;\n  size: 'medium' | 'large';\n};\n\nconst CountryDropdownButtonWrapper = styled(BaseBox)(() => {\n  return {\n    '& > button': {\n      padding: '0',\n      width: '100%',\n    },\n  };\n});\n\nconst CountrySelector = ({\n  isDisabled,\n  selectedCountry,\n  inputWrapperRef,\n  countryData,\n  onItemClick,\n  flags,\n  size,\n}: CounterSelectorProps): React.ReactElement => {\n  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);\n  const isMobile = useIsMobile();\n\n  const actionList = (\n    <ActionList>\n      {countryData.map((country) => {\n        return (\n          <ActionListItem\n            key={country.code}\n            onClick={onItemClick}\n            leading={<ActionListItemAsset src={flags[country.code]['4X3']} alt={country.name} />}\n            title={country.name}\n            value={country.code}\n            trailing={\n              <ActionListItemText>{getDialCodeByCountryCode(country.code)}</ActionListItemText>\n            }\n          />\n        );\n      })}\n    </ActionList>\n  );\n\n  const flagSize = {\n    medium: makeSize(sizes[20]),\n    large: makeSize(sizes[24]),\n  } as const;\n\n  return (\n    <Dropdown isOpen={isDropdownOpen} onOpenChange={setIsDropdownOpen}>\n      {/* TODO: Remove once CountrySelector's button sizing is fixed in figma */}\n      <CountryDropdownButtonWrapper\n        width={size === 'medium' ? '45px' : '60px'}\n        marginLeft={size === 'medium' ? '-3px' : '-2px'}\n      >\n        <DropdownButton\n          isDisabled={isDisabled}\n          size={size === 'medium' ? 'xsmall' : 'medium'}\n          variant=\"tertiary\"\n          accessibilityLabel={`${countryNameFormatter.of(selectedCountry)} - Select Country`}\n          icon={isDropdownOpen ? ChevronUpIcon : ChevronDownIcon}\n          iconPosition=\"right\"\n        >\n          {/* @ts-expect-error */}\n          <img\n            loading=\"lazy\"\n            role=\"presentation\"\n            width={flagSize[size]}\n            src={getFlagOfCountry(selectedCountry)['4X3']}\n            alt=\"\"\n          />\n        </DropdownButton>\n      </CountryDropdownButtonWrapper>\n      {isMobile ? (\n        <BottomSheet>\n          <BottomSheetHeader title=\"Select A Country\" />\n          <BottomSheetBody>{actionList}</BottomSheetBody>\n        </BottomSheet>\n      ) : (\n        <DropdownOverlay referenceRef={inputWrapperRef}>{actionList}</DropdownOverlay>\n      )}\n    </Dropdown>\n  );\n};\n\nexport { CountrySelector, countryNameFormatter };\n"],"names":["countryNameFormatter","Intl","DisplayNames","type","CountryDropdownButtonWrapper","styled","BaseBox","withConfig","displayName","componentId","padding","width","CountrySelector","_ref","isDisabled","selectedCountry","inputWrapperRef","countryData","onItemClick","flags","size","_React$useState","React","useState","_React$useState2","_slicedToArray","isDropdownOpen","setIsDropdownOpen","isMobile","useIsMobile","actionList","_jsx","ActionList","children","map","country","ActionListItem","onClick","leading","ActionListItemAsset","src","code","alt","name","title","value","trailing","ActionListItemText","getDialCodeByCountryCode","flagSize","medium","makeSize","sizes","large","_jsxs","Dropdown","isOpen","onOpenChange","marginLeft","DropdownButton","variant","accessibilityLabel","concat","of","icon","ChevronUpIcon","ChevronDownIcon","iconPosition","loading","role","getFlagOfCountry","BottomSheet","BottomSheetHeader","BottomSheetBody","DropdownOverlay","referenceRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBMA,IAAAA,oBAAoB,GAAG,IAAIC,IAAI,CAACC,YAAY,CAAC,CAAC,IAAI,CAAC,EAAE;AAAEC,EAAAA,IAAI,EAAE,QAAA;AAAS,CAAC,EAAC;AAgB9E,IAAMC,4BAA4B,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,kDAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAAA,CAAA,CAAC,YAAM;EACzD,OAAO;AACL,IAAA,YAAY,EAAE;AACZC,MAAAA,OAAO,EAAE,GAAG;AACZC,MAAAA,KAAK,EAAE,MAAA;AACT,KAAA;GACD,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAAC,IAAA,EAQ2B;AAAA,EAAA,IAP9CC,UAAU,GAAAD,IAAA,CAAVC,UAAU;IACVC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IACfC,eAAe,GAAAH,IAAA,CAAfG,eAAe;IACfC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,WAAW,GAAAL,IAAA,CAAXK,WAAW;IACXC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,MAAI,GAAAP,IAAA,CAAJO,IAAI,CAAA;AAEJ,EAAA,IAAAC,eAAA,GAA4CC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAA1DK,IAAAA,cAAc,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,iBAAiB,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AACxC,EAAA,IAAMI,QAAQ,GAAGC,WAAW,EAAE,CAAA;AAE9B,EAAA,IAAMC,UAAU,gBACdC,GAAA,CAACC,UAAU,EAAA;AAAAC,IAAAA,QAAA,EACRhB,WAAW,CAACiB,GAAG,CAAC,UAACC,OAAO,EAAK;MAC5B,oBACEJ,GAAA,CAACK,cAAc,EAAA;AAEbC,QAAAA,OAAO,EAAEnB,WAAY;QACrBoB,OAAO,eAAEP,GAAA,CAACQ,mBAAmB,EAAA;UAACC,GAAG,EAAErB,KAAK,CAACgB,OAAO,CAACM,IAAI,CAAC,CAAC,KAAK,CAAE;UAACC,GAAG,EAAEP,OAAO,CAACQ,IAAAA;AAAK,SAAE,CAAE;QACrFC,KAAK,EAAET,OAAO,CAACQ,IAAK;QACpBE,KAAK,EAAEV,OAAO,CAACM,IAAK;QACpBK,QAAQ,eACNf,GAAA,CAACgB,kBAAkB,EAAA;AAAAd,UAAAA,QAAA,EAAEe,wBAAwB,CAACb,OAAO,CAACM,IAAI,CAAA;SAAsB,CAAA;OAN7EN,EAAAA,OAAO,CAACM,IAQd,CAAC,CAAA;KAEL,CAAA;AAAC,GACQ,CACb,CAAA;AAED,EAAA,IAAMQ,QAAQ,GAAG;AACfC,IAAAA,MAAM,EAAEC,QAAQ,CAACC,IAAK,CAAC,EAAE,CAAC,CAAC;AAC3BC,IAAAA,KAAK,EAAEF,QAAQ,CAACC,IAAK,CAAC,EAAE,CAAC,CAAA;GACjB,CAAA;EAEV,oBACEE,IAAA,CAACC,QAAQ,EAAA;AAACC,IAAAA,MAAM,EAAE9B,cAAe;AAAC+B,IAAAA,YAAY,EAAE9B,iBAAkB;IAAAM,QAAA,EAAA,cAEhEF,GAAA,CAAC3B,4BAA4B,EAAA;AAC3BO,MAAAA,KAAK,EAAES,MAAI,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAC3CsC,MAAAA,UAAU,EAAEtC,MAAI,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;MAAAa,QAAA,eAEhDF,GAAA,CAAC4B,cAAc,EAAA;AACb7C,QAAAA,UAAU,EAAEA,UAAW;AACvBM,QAAAA,IAAI,EAAEA,MAAI,KAAK,QAAQ,GAAG,QAAQ,GAAG,QAAS;AAC9CwC,QAAAA,OAAO,EAAC,UAAU;QAClBC,kBAAkB,EAAA,EAAA,CAAAC,MAAA,CAAK9D,oBAAoB,CAAC+D,EAAE,CAAChD,eAAe,CAAC,EAAoB,mBAAA,CAAA;AACnFiD,QAAAA,IAAI,EAAEtC,cAAc,GAAGuC,aAAa,GAAGC,eAAgB;AACvDC,QAAAA,YAAY,EAAC,OAAO;AAAAlC,QAAAA,QAAA,eAGpBF,GAAA,CAAA,KAAA,EAAA;AACEqC,UAAAA,OAAO,EAAC,MAAM;AACdC,UAAAA,IAAI,EAAC,cAAc;AACnB1D,UAAAA,KAAK,EAAEsC,QAAQ,CAAC7B,MAAI,CAAE;AACtBoB,UAAAA,GAAG,EAAE8B,gBAAgB,CAACvD,eAAe,CAAC,CAAC,KAAK,CAAE;AAC9C2B,UAAAA,GAAG,EAAC,EAAA;SACL,CAAA;OACa,CAAA;AAAC,KACW,CAAC,EAC9Bd,QAAQ,gBACP0B,IAAA,CAACiB,WAAW,EAAA;MAAAtC,QAAA,EAAA,cACVF,GAAA,CAACyC,iBAAiB,EAAA;AAAC5B,QAAAA,KAAK,EAAC,kBAAA;AAAkB,OAAE,CAAC,eAC9Cb,GAAA,CAAC0C,eAAe,EAAA;AAAAxC,QAAAA,QAAA,EAAEH,UAAAA;AAAU,OAAkB,CAAC,CAAA;AAAA,KACpC,CAAC,gBAEdC,GAAA,CAAC2C,eAAe,EAAA;AAACC,MAAAA,YAAY,EAAE3D,eAAgB;AAAAiB,MAAAA,QAAA,EAAEH,UAAAA;AAAU,KAAkB,CAC9E,CAAA;AAAA,GACO,CAAC,CAAA;AAEf;;;;"}
+{"version":3,"file":"CountrySelector.web.js","sources":["../../../../../../../src/components/Input/PhoneNumberInput/CountrySelector.web.tsx"],"sourcesContent":["import type { CountryCodeType, getFlagsForAllCountries } from '@razorpay/i18nify-js';\nimport { getDialCodeByCountryCode, getFlagOfCountry } from '@razorpay/i18nify-js';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  ActionList,\n  ActionListItem,\n  ActionListItemAsset,\n  ActionListItemText,\n} from '~components/ActionList';\nimport { BottomSheet, BottomSheetBody, BottomSheetHeader } from '~components/BottomSheet';\nimport type { DropdownOverlayProps } from '~components/Dropdown';\nimport { Dropdown, DropdownButton, DropdownOverlay } from '~components/Dropdown';\nimport { ChevronDownIcon, ChevronUpIcon } from '~components/Icons';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { size as sizes } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst countryNameFormatter = new Intl.DisplayNames(['en'], { type: 'region' });\n\ntype CountryData = {\n  code: CountryCodeType;\n  name: string;\n}[];\ntype CounterSelectorProps = {\n  selectedCountry: CountryCodeType;\n  inputWrapperRef: DropdownOverlayProps['referenceRef'];\n  countryData: CountryData;\n  onItemClick: (props: { name: string }) => void;\n  flags: ReturnType<typeof getFlagsForAllCountries>;\n  isDisabled?: boolean;\n  size: 'medium' | 'large';\n};\n\nconst CountryDropdownButtonWrapper = styled(BaseBox)(() => {\n  return {\n    '& > button': {\n      padding: '0',\n      width: '100%',\n    },\n  };\n});\n\nconst CountrySelector = ({\n  isDisabled,\n  selectedCountry,\n  inputWrapperRef,\n  countryData,\n  onItemClick,\n  flags,\n  size,\n}: CounterSelectorProps): React.ReactElement => {\n  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);\n  const isMobile = useIsMobile();\n\n  const actionList = (\n    <ActionList>\n      {countryData.map((country) => {\n        return (\n          <ActionListItem\n            key={country.code}\n            onClick={onItemClick}\n            leading={<ActionListItemAsset src={flags[country.code]['4X3']} alt={country.name} />}\n            title={country.name}\n            value={country.code}\n            trailing={\n              <ActionListItemText>{getDialCodeByCountryCode(country.code)}</ActionListItemText>\n            }\n          />\n        );\n      })}\n    </ActionList>\n  );\n\n  const flagSize = {\n    medium: makeSize(sizes[20]),\n    large: makeSize(sizes[24]),\n  } as const;\n\n  return (\n    <Dropdown isOpen={isDropdownOpen} onOpenChange={setIsDropdownOpen}>\n      {/* TODO: Remove once CountrySelector's button sizing is fixed in figma */}\n      <CountryDropdownButtonWrapper\n        width={size === 'medium' ? '45px' : '60px'}\n        marginLeft={size === 'medium' ? '-3px' : '-2px'}\n      >\n        <DropdownButton\n          isDisabled={isDisabled}\n          size={size === 'medium' ? 'xsmall' : 'medium'}\n          variant=\"tertiary\"\n          accessibilityLabel={`${countryNameFormatter.of(selectedCountry)} - Select Country`}\n          icon={isDropdownOpen ? ChevronUpIcon : ChevronDownIcon}\n          iconPosition=\"right\"\n          // We need to prevent the click event from propagating to the BaseInputWrapper,\n          // Because the BaseInputWrapper is listening for click events to focus the input.\n          // We don't want that to happen when the user clicks on the dropdown button\n          // otherwise the dropdown will close immediately after opening\n          onClick={(e) => {\n            e.stopPropagation();\n          }}\n        >\n          {/* @ts-expect-error */}\n          <img\n            loading=\"lazy\"\n            role=\"presentation\"\n            width={flagSize[size]}\n            src={getFlagOfCountry(selectedCountry)['4X3']}\n            alt=\"\"\n          />\n        </DropdownButton>\n      </CountryDropdownButtonWrapper>\n      {isMobile ? (\n        <BottomSheet>\n          <BottomSheetHeader title=\"Select A Country\" />\n          <BottomSheetBody>{actionList}</BottomSheetBody>\n        </BottomSheet>\n      ) : (\n        <DropdownOverlay referenceRef={inputWrapperRef}>{actionList}</DropdownOverlay>\n      )}\n    </Dropdown>\n  );\n};\n\nexport { CountrySelector, countryNameFormatter };\n"],"names":["countryNameFormatter","Intl","DisplayNames","type","CountryDropdownButtonWrapper","styled","BaseBox","withConfig","displayName","componentId","padding","width","CountrySelector","_ref","isDisabled","selectedCountry","inputWrapperRef","countryData","onItemClick","flags","size","_React$useState","React","useState","_React$useState2","_slicedToArray","isDropdownOpen","setIsDropdownOpen","isMobile","useIsMobile","actionList","_jsx","ActionList","children","map","country","ActionListItem","onClick","leading","ActionListItemAsset","src","code","alt","name","title","value","trailing","ActionListItemText","getDialCodeByCountryCode","flagSize","medium","makeSize","sizes","large","_jsxs","Dropdown","isOpen","onOpenChange","marginLeft","DropdownButton","variant","accessibilityLabel","concat","of","icon","ChevronUpIcon","ChevronDownIcon","iconPosition","e","stopPropagation","loading","role","getFlagOfCountry","BottomSheet","BottomSheetHeader","BottomSheetBody","DropdownOverlay","referenceRef"],"mappings":"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"}

package/build/lib/web/development/components/ProgressBar/CircularProgressBar.web.js

@@ -0,0 +1,140 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import styled, { keyframes, css } from 'styled-components';
+import 'react';
+import { pulseAnimation, getCircularProgressSVGTokens, circularProgressSizeTokens } from './progressBarTokens.js';
+import { CircularProgressLabel } from './CircularProgressLabel.js';
+import getIn from '../../utils/lodashButBetter/get.js';
+import '../Box/BaseBox/index.js';
+import '../../utils/index.js';
+import '../../utils/makeMotionTime/index.web.js';
+import '../Typography/index.js';
+import '../Icons/_Svg/index.js';
+import getBaseTextStyles from '../Typography/BaseText/getBaseTextStyles.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getTextProps } from '../Typography/Text/Text.js';
+import { castWebType } from '../../utils/platform/castUtils.js';
+import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import Svg from '../Icons/_Svg/Svg/Svg.web.js';
+import Circle from '../Icons/_Svg/Circle/Circle.web.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var pulseKeyframes = /*#__PURE__*/keyframes(["0%{opacity:100;}50%{opacity:0.65;}100%{opacity:100;}"]);
+var getPulseAnimationStyles = function getPulseAnimationStyles(_ref) {
+  var duration = _ref.duration,
+    easing = _ref.easing,
+    progressPercent = _ref.progressPercent,
+    isMeter = _ref.isMeter;
+  if (isMeter || progressPercent === 100) {
+    return css(["height:100%;width:100%;transition:stroke-dashoffset ", " ", ";"], duration, easing);
+  }
+  return css(["height:100%;width:100%;opacity:", ";background-color:", ";transition:stroke-dashoffset ", " ", ";animation:", " ", " ", " infinite;"], pulseAnimation.opacityInitial, pulseAnimation.backgroundColor, duration, easing, pulseKeyframes, duration, easing);
+};
+var StyledSVGText = /*#__PURE__*/styled.text.withConfig({
+  displayName: "CircularProgressBarweb__StyledSVGText",
+  componentId: "h4xj3g-0"
+})(function (_ref2) {
+  var theme = _ref2.theme,
+    size = _ref2.size,
+    weight = _ref2.weight;
+  return getBaseTextStyles(_objectSpread({
+    theme: theme
+  }, getTextProps({
+    variant: 'body',
+    size: size,
+    weight: weight
+  })));
+});
+var DeterminatePulseAnimation = /*#__PURE__*/styled.circle.withConfig({
+  displayName: "CircularProgressBarweb__DeterminatePulseAnimation",
+  componentId: "h4xj3g-1"
+})(function (_ref3) {
+  var theme = _ref3.theme,
+    pulseMotionDuration = _ref3.pulseMotionDuration,
+    motionEasing = _ref3.motionEasing,
+    progressPercent = _ref3.progressPercent,
+    isMeter = _ref3.isMeter;
+  var duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));
+  var easing = castWebType(getIn(theme.motion, motionEasing));
+  return getPulseAnimationStyles({
+    duration: duration,
+    easing: easing,
+    progressPercent: progressPercent,
+    isMeter: isMeter
+  });
+});
+var CircularProgressBarFilled = function CircularProgressBarFilled(_ref4) {
+  var progressPercent = _ref4.progressPercent,
+    fillColor = _ref4.fillColor,
+    backgroundColor = _ref4.backgroundColor,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? 'small' : _ref4$size,
+    label = _ref4.label,
+    _ref4$showPercentage = _ref4.showPercentage,
+    showPercentage = _ref4$showPercentage === void 0 ? true : _ref4$showPercentage,
+    isMeter = _ref4.isMeter;
+  var _getCircularProgressS = getCircularProgressSVGTokens({
+      size: size,
+      progressPercent: progressPercent
+    }),
+    sqSize = _getCircularProgressS.sqSize,
+    strokeWidth = _getCircularProgressS.strokeWidth,
+    radius = _getCircularProgressS.radius,
+    viewBox = _getCircularProgressS.viewBox,
+    dashArray = _getCircularProgressS.dashArray,
+    dashOffset = _getCircularProgressS.dashOffset;
+  return /*#__PURE__*/jsxs(BaseBox, {
+    width: "fit-content",
+    textAlign: "center",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    children: [/*#__PURE__*/jsxs(Svg, {
+      width: String(sqSize),
+      height: String(sqSize),
+      viewBox: viewBox,
+      children: [/*#__PURE__*/jsx(Circle, {
+        fill: "none",
+        stroke: backgroundColor,
+        cx: String(sqSize / 2),
+        cy: String(sqSize / 2),
+        r: String(radius),
+        strokeWidth: "".concat(strokeWidth, "px")
+      }), /*#__PURE__*/jsx(DeterminatePulseAnimation, {
+        progressPercent: progressPercent,
+        isMeter: isMeter,
+        fill: "none",
+        stroke: fillColor,
+        cx: sqSize / 2,
+        cy: sqSize / 2,
+        r: radius,
+        strokeWidth: "".concat(strokeWidth, "px")
+        // Start progress marker at 12 O'Clock
+        ,
+        transform: "rotate(-90 ".concat(sqSize / 2, " ").concat(sqSize / 2, ")"),
+        strokeDasharray: dashArray,
+        strokeDashoffset: dashOffset,
+        pulseMotionDuration: "duration.2xgentle",
+        pulseMotionDelay: "delay.long",
+        motionEasing: "easing.standard.revealing"
+      }), showPercentage && size !== 'small' && /*#__PURE__*/jsxs(StyledSVGText, {
+        size: circularProgressSizeTokens[size].percentTextSize,
+        weight: "semibold",
+        x: "50%",
+        y: "50%",
+        textAnchor: "middle",
+        dy: ".4em",
+        children: [progressPercent, "%"]
+      })]
+    }), /*#__PURE__*/jsx(CircularProgressLabel, {
+      progressPercent: progressPercent,
+      size: size,
+      label: label,
+      showPercentage: showPercentage
+    })]
+  });
+};
+
+export { CircularProgressBarFilled };
+//# sourceMappingURL=CircularProgressBar.web.js.map

package/build/lib/web/development/components/ProgressBar/CircularProgressBar.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressBar.web.js","sources":["../../../../../../src/components/ProgressBar/CircularProgressBar.web.tsx"],"sourcesContent":["import type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport React from 'react';\nimport type { CircularProgressBarFilledProps } from './types';\nimport {\n  pulseAnimation,\n  circularProgressSizeTokens,\n  getCircularProgressSVGTokens,\n} from './progressBarTokens';\nimport { CircularProgressLabel } from './CircularProgressLabel';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType } from '~utils';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport type { TextProps } from '~components/Typography';\nimport { getTextProps } from '~components/Typography';\nimport { Svg, Circle } from '~components/Icons/_Svg';\nimport getBaseTextStyles from '~components/Typography/BaseText/getBaseTextStyles';\n\nconst pulseKeyframes = keyframes`\n  0% {\n    opacity: 100;\n  }\n  50% {\n    opacity: 0.65;\n  }\n  100% {\n    opacity: 100;\n  }\n`;\n\nconst getPulseAnimationStyles = ({\n  duration,\n  easing,\n  progressPercent,\n  isMeter,\n}: {\n  duration: string;\n  easing: string;\n  progressPercent: number;\n  isMeter: boolean;\n}): FlattenSimpleInterpolation => {\n  if (isMeter || progressPercent === 100) {\n    return css`\n      height: 100%;\n      width: 100%;\n      transition: stroke-dashoffset ${duration} ${easing};\n    `;\n  }\n\n  return css`\n    height: 100%;\n    width: 100%;\n    opacity: ${pulseAnimation.opacityInitial};\n    background-color: ${pulseAnimation.backgroundColor};\n    transition: stroke-dashoffset ${duration} ${easing};\n    animation: ${pulseKeyframes} ${duration} ${easing} infinite;\n  `;\n};\n\nconst StyledSVGText = styled.text<Pick<TextProps<{ variant: 'body' }>, 'size' | 'weight'>>(\n  ({ theme, size, weight }) => {\n    return getBaseTextStyles({\n      theme,\n      ...getTextProps({ variant: 'body', size, weight }),\n    });\n  },\n);\n\nconst DeterminatePulseAnimation = styled.circle<\n  Pick<\n    CircularProgressBarFilledProps,\n    'pulseMotionDuration' | 'pulseMotionDelay' | 'motionEasing' | 'progressPercent' | 'isMeter'\n  >\n>(({ theme, pulseMotionDuration, motionEasing, progressPercent, isMeter }) => {\n  const duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));\n  const easing = castWebType(getIn(theme.motion, motionEasing));\n\n  return getPulseAnimationStyles({\n    duration,\n    easing,\n    progressPercent,\n    isMeter,\n  });\n});\n\nconst CircularProgressBarFilled = ({\n  progressPercent,\n  fillColor,\n  backgroundColor,\n  size = 'small',\n  label,\n  showPercentage = true,\n  isMeter,\n}: CircularProgressBarFilledProps): React.ReactElement => {\n  const {\n    sqSize,\n    strokeWidth,\n    radius,\n    viewBox,\n    dashArray,\n    dashOffset,\n  } = getCircularProgressSVGTokens({ size, progressPercent });\n\n  return (\n    <BaseBox\n      width=\"fit-content\"\n      textAlign=\"center\"\n      display=\"flex\"\n      flexDirection=\"column\"\n      alignItems=\"center\"\n    >\n      <Svg width={String(sqSize)} height={String(sqSize)} viewBox={viewBox}>\n        <Circle\n          fill=\"none\"\n          stroke={backgroundColor}\n          cx={String(sqSize / 2)}\n          cy={String(sqSize / 2)}\n          r={String(radius)}\n          strokeWidth={`${strokeWidth}px`}\n        />\n\n        <DeterminatePulseAnimation\n          progressPercent={progressPercent}\n          isMeter={isMeter}\n          fill=\"none\"\n          stroke={fillColor}\n          cx={sqSize / 2}\n          cy={sqSize / 2}\n          r={radius}\n          strokeWidth={`${strokeWidth}px`}\n          // Start progress marker at 12 O'Clock\n          transform={`rotate(-90 ${sqSize / 2} ${sqSize / 2})`}\n          strokeDasharray={dashArray}\n          strokeDashoffset={dashOffset}\n          pulseMotionDuration=\"duration.2xgentle\"\n          pulseMotionDelay=\"delay.long\"\n          motionEasing=\"easing.standard.revealing\"\n        />\n        {showPercentage && size !== 'small' && (\n          <StyledSVGText\n            size={circularProgressSizeTokens[size].percentTextSize}\n            weight=\"semibold\"\n            x=\"50%\"\n            y=\"50%\"\n            textAnchor=\"middle\"\n            dy=\".4em\"\n          >\n            {progressPercent}%\n          </StyledSVGText>\n        )}\n      </Svg>\n\n      <CircularProgressLabel\n        progressPercent={progressPercent}\n        size={size}\n        label={label}\n        showPercentage={showPercentage}\n      />\n    </BaseBox>\n  );\n};\n\nexport { CircularProgressBarFilled };\n"],"names":["pulseKeyframes","keyframes","getPulseAnimationStyles","_ref","duration","easing","progressPercent","isMeter","css","pulseAnimation","opacityInitial","backgroundColor","StyledSVGText","styled","text","withConfig","displayName","componentId","_ref2","theme","size","weight","getBaseTextStyles","_objectSpread","getTextProps","variant","DeterminatePulseAnimation","circle","_ref3","pulseMotionDuration","motionEasing","castWebType","makeMotionTime","getIn","motion","CircularProgressBarFilled","_ref4","fillColor","_ref4$size","label","_ref4$showPercentage","showPercentage","_getCircularProgressS","getCircularProgressSVGTokens","sqSize","strokeWidth","radius","viewBox","dashArray","dashOffset","_jsxs","BaseBox","width","textAlign","display","flexDirection","alignItems","children","Svg","String","height","_jsx","Circle","fill","stroke","cx","cy","r","concat","transform","strokeDasharray","strokeDashoffset","pulseMotionDelay","circularProgressSizeTokens","percentTextSize","x","y","textAnchor","dy","CircularProgressLabel"],"mappings":"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"}