@razorpay/blade 11.11.1 → 11.13.0

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":";;;;;;;;;;;;;;;AAmBA,IAAMA,uCAAuC,CAAGC,MAAM,CAACC,QAAQ,CAACC,IAAI,CAAC,CAEnE,SAAAC,IAAA,CAAA,CAAA,IAAGC,eAAe,CAAAD,IAAA,CAAfC,eAAe,QAAQ,CAC1BA,eAAe,CAAfA,eAAe,CACfC,MAAM,CAAE,MAAM,CACdC,KAAK,CAAEC,sBAAsB,CAACC,SAAS,CACvCC,QAAQ,CAAE,UACZ,CAAC,CAAC,CAAA,CAAC,CAEH,IAAMC,qCAAqC,CAAGV,MAAM,CAACC,QAAQ,CAACC,IAAI,CAAC,CAEjE,SAAAS,KAAA,CAAA,CAAA,IAAGP,eAAe,CAAAO,KAAA,CAAfP,eAAe,CAAEQ,QAAQ,CAAAD,KAAA,CAARC,QAAQ,QAAQ,CACpCR,eAAe,CAAfA,eAAe,CACfC,MAAM,CAAE,MAAM,CACdC,KAAK,CAAG,GAAEM,QAAS,CAAA,CAAA,CACrB,CAAC,CAAC,CAAA,CAAC,CAEH,IAAMC,yBAAyB,CAAGb,MAAM,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC,CACtDE,eAAe,CAAEU,cAAc,CAACV,eAAe,CAC/CW,OAAO,CAAED,cAAc,CAACE,cAAc,CACtCV,KAAK,CAAE,MAAM,CACbD,MAAM,CAAE,MACV,CAAC,CAAC,CAEI,IAAAY,iBAAiB,CAAG,SAApBA,iBAAiBA,CAAAC,KAAA,CAU2B,CAThD,IAAAd,eAAe,CAAAc,KAAA,CAAfd,eAAe,CACfQ,QAAQ,CAAAM,KAAA,CAARN,QAAQ,CACRO,kBAAkB,CAAAD,KAAA,CAAlBC,kBAAkB,CAClBC,YAAY,CAAAF,KAAA,CAAZE,YAAY,CACZC,mBAAmB,CAAAH,KAAA,CAAnBG,mBAAmB,CACnBC,gBAAgB,CAAAJ,KAAA,CAAhBI,gBAAgB,CAChBC,IAAI,CAAAL,KAAA,CAAJK,IAAI,CACJC,eAAe,CAAAN,KAAA,CAAfM,eAAe,CACfC,2BAA2B,CAAAP,KAAA,CAA3BO,2BAA2B,CAE3B,IAAMC,aAAa,CAAGC,cAAc,CAACf,QAAQ,CAAC,CAC9C,IAAMgB,eAAe,CAAGD,cAAc,CAACb,cAAc,CAACE,cAAc,CAAC,CACrE,IAAMa,cAAc,CAAGF,cAAc,CAACpB,sBAAsB,CAACuB,aAAa,CAAC,CAC3E,IAAMC,YAAY,CAAGJ,cAAc,CAACpB,sBAAsB,CAACyB,WAAW,CAAC,CAEvE,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAMC,kBAAkB,CAAGC,KAAK,CAACF,KAAK,CAACG,MAAM,CAAElB,YAAY,CAAC,CAC5D,IAAMmB,aAAa,CACjBC,cAAc,CAACC,cAAc,CAACJ,KAAK,CAACF,KAAK,CAACG,MAAM,CAAEjB,mBAAmB,CAAC,CAAC,CAAC,CAAG,CAAC,CAG9EqB,SAAS,CAAC,UAAM,CACd,IAAMC,YAAY,CAAGH,cAAc,CAACC,cAAc,CAACJ,KAAK,CAACF,KAAK,CAACG,MAAM,CAAEnB,kBAAkB,CAAC,CAAC,CAAC,CAC5FO,aAAa,CAACkB,KAAK,CAAGC,UAAU,CAACjC,QAAQ,CAAE,CACzCkC,QAAQ,CAAEH,YAAY,CACtBI,MAAM,CAAEX,kBACV,CAAC,CAAC,CACF,OAAO,UAAM,CACXY,eAAe,CAACtB,aAAa,CAAC,CAChC,CAAC,CACH,CAAC,CAAE,CAACd,QAAQ,CAAEc,aAAa,CAAEP,kBAAkB,CAAEgB,KAAK,CAAEC,kBAAkB,CAAC,CAAC,CAG5E,IAAMa,yBAAyB,CAAGC,gBAAgB,CAAC,UAAM,CACvD,OAAO,CACL5C,KAAK,CAAG,CAAEoB,EAAAA,aAAa,CAACkB,KAAM,CAAA,CAAA,CAChC,CAAC,CACH,CAAC,CAAC,CAGFF,SAAS,CAAC,UAAM,CACd,GAAInB,IAAI,GAAK,UAAU,EAAIC,eAAe,CAAE,CAC1C,IAAM2B,qBAAqB,CAAGX,cAAc,CAC1CC,cAAc,CAACJ,KAAK,CAACF,KAAK,CAACG,MAAM,CAAEb,2BAA2B,CAAC,CACjE,CAAC,CACD,IAAM2B,mBAAmB,CAAGC,MAAM,CAACC,MAAM,CAGzCvB,YAAY,CAACa,KAAK,CAAGW,UAAU,CAC7BV,UAAU,CAACtC,sBAAsB,CAACiD,SAAS,CAAE,CAC3CV,QAAQ,CAAEK,qBAAqB,CAC/BJ,MAAM,CAAEK,mBACV,CAAC,CAAC,CACF,CAAC,CACH,CAAC,CAGDvB,cAAc,CAACe,KAAK,CAAGW,UAAU,CAC/BE,YAAY,CACVZ,UAAU,CAACtC,sBAAsB,CAACmD,SAAS,CAAE,CAC3CZ,QAAQ,CAAEK,qBAAqB,CAAG,CAAC,CACnCJ,MAAM,CAAEK,mBACV,CAAC,CAAC,CACFP,UAAU,CAACtC,sBAAsB,CAACoD,WAAW,CAAE,CAC7Cb,QAAQ,CAAEK,qBAAqB,CAAG,CAAC,CACnCJ,MAAM,CAAEK,mBACV,CAAC,CACH,CAAC,CACD,CAAC,CACH,CAAC,CACH,CAEA,iBAAa,CACXJ,eAAe,CAACjB,YAAY,CAAC,CAC7BiB,eAAe,CAACnB,cAAc,CAAC,CACjC,CAAC,CACH,CAAC,CAAE,CAACE,YAAY,CAAEF,cAAc,CAAEJ,2BAA2B,CAAED,eAAe,CAAEW,KAAK,CAAEZ,IAAI,CAAC,CAAC,CAK7F,IAAMqC,0BAA0B,CAAGV,gBAAgB,CAAC,UAAM,CACxD,OAAO,CACLW,IAAI,CAAE9B,YAAY,CAACa,KAAK,CACxBkB,SAAS,CAAE,CAAC,CAAEC,MAAM,CAAElC,cAAc,CAACe,KAAM,CAAC,CAC9C,CAAC,CACH,CAAC,CAAC,CAGFF,SAAS,CAAC,UAAM,CACd,IAAMsB,8BAA8B,CAAG,CACrClB,QAAQ,CAAEP,aAAa,CACvBQ,MAAM,CAAEX,kBACV,CAAC,CACD,GAAIb,IAAI,GAAK,UAAU,CAAE,CACvBK,eAAe,CAACgB,KAAK,CAAGqB,SAAS,CAC/BzB,cAAc,CAACC,cAAc,CAACJ,KAAK,CAACF,KAAK,CAACG,MAAM,CAAEhB,gBAAgB,CAAC,CAAC,CAAC,CACrEiC,UAAU,CACRE,YAAY,CACVZ,UAAU,CAAC/B,cAAc,CAACoD,UAAU,CAAEF,8BAA8B,CAAC,CACrEnB,UAAU,CAAC/B,cAAc,CAACqD,YAAY,CAAEH,8BAA8B,CACxE,CAAC,CACD,CAAC,CACH,CACF,CAAC,CACH,CAEA,OAAa,UAAA,CACXhB,eAAe,CAACpB,eAAe,CAAC,CAClC,CAAC,CACH,CAAC,CAAE,CAACA,eAAe,CAAEQ,kBAAkB,CAAEG,aAAa,CAAEjB,gBAAgB,CAAEa,KAAK,CAAEZ,IAAI,CAAC,CAAC,CAGvF,IAAM6C,kBAAkB,CAAGlB,gBAAgB,CAAC,UAAM,CAChD,OAAO,CACLnC,OAAO,CAAEa,eAAe,CAACgB,KAC3B,CAAC,CACH,CAAC,CAAC,CAEF,IAAMyB,0BAA0B,CAAG7C,eAAe,CAC9CzB,uCAAuC,CACvCW,qCAAqC,CAEzC,OACE4D,GAAA,CAACD,0BAA0B,CACzBE,CAAAA,KAAK,CAAE/C,eAAe,CAAGoC,0BAA0B,CAAGX,yBAA0B,CAChF7C,eAAe,CAAEA,eAAgB,CACjCQ,QAAQ,CAAEA,QAAS,CAAA4D,QAAA,CAEnBF,GAAA,CAACzD,yBAAyB,CAAA,CAAC0D,KAAK,CAAEH,kBAAmB,CAAE,CAAC,CAC9B,CAAC,CAEjC;;;;"}

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/components/Tag/AnimatedTag.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedTag.native.js","sources":["../../../../../src/components/Tag/AnimatedTag.native.tsx"],"sourcesContent":["import React from 'react';\nimport type { EasingFn } from 'react-native-reanimated';\nimport Animated, {\n  Easing,\n  useSharedValue,\n  withTiming,\n  useAnimatedStyle,\n  runOnJS,\n  Keyframe,\n} from 'react-native-reanimated';\nimport type { ReanimatedKeyframe } from 'react-native-reanimated/lib/typescript/reanimated2/layoutReanimation/animationBuilder/Keyframe';\nimport { Tag } from './Tag';\nimport {\n  TAG_MAX_WIDTH_END,\n  TAG_MAX_WIDTH_START,\n  TAG_OPACITY_END,\n  TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport type { AnimatedTagProps } from './types';\nimport { castNativeType, makeMotionTime } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\n\nconst useAnimatedTag = (\n  onAnimationEndCallback: () => void,\n): {\n  entering: ReanimatedKeyframe;\n  animate: () => void;\n  animatedStyle: {\n    maxWidth: number;\n    opacity: number;\n  };\n} => {\n  const maxWidth = useSharedValue(TAG_MAX_WIDTH_START); // Initial max-width value\n  const opacity = useSharedValue(TAG_OPACITY_START); // Initial opacity value\n  const { theme } = useTheme();\n\n  const entering = new Keyframe({\n    0: {\n      opacity: TAG_OPACITY_END,\n    },\n    100: {\n      opacity: TAG_OPACITY_START,\n      easing: (theme.motion.easing.exit.effective as unknown) as EasingFn,\n    },\n  }).duration(makeMotionTime(theme.motion.duration.xquick));\n\n  const animate = (): void => {\n    maxWidth.value = withTiming(\n      TAG_MAX_WIDTH_END,\n      {\n        duration: makeMotionTime(theme.motion.duration.xquick),\n        easing: castNativeType(theme.motion.easing.exit.effective),\n      },\n      (isComplete) => {\n        if (isComplete) {\n          runOnJS(onAnimationEndCallback)();\n        }\n      },\n    );\n    opacity.value = withTiming(TAG_OPACITY_END, {\n      duration: makeMotionTime(theme.motion.duration.xquick),\n      easing: Easing.out(Easing.exp),\n    });\n  };\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      maxWidth: maxWidth.value,\n      opacity: opacity.value,\n    };\n  });\n\n  return { animate, animatedStyle, entering };\n};\n\nconst AnimatedTag = ({\n  children,\n  currentTagIndex,\n  activeTagIndex,\n  onDismiss,\n  tagsLength,\n  isDisabled,\n}: AnimatedTagProps): React.ReactElement => {\n  const onAnimationEnd = (): void => {\n    onDismiss({ tagIndex: currentTagIndex, tagName: children });\n  };\n\n  const prevSelectionsLength = React.useRef<number>();\n  const { animate, animatedStyle, entering } = useAnimatedTag(onAnimationEnd);\n\n  const isTagRemoved = prevSelectionsLength.current\n    ? prevSelectionsLength.current > tagsLength\n    : false;\n\n  return (\n    <Animated.View style={animatedStyle} entering={isTagRemoved ? undefined : entering}>\n      <Tag\n        _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n        _isTagInsideInput={true}\n        onDismiss={() => {\n          animate();\n        }}\n        marginRight=\"spacing.3\"\n        marginY=\"spacing.2\"\n        isDisabled={isDisabled}\n      >\n        {children}\n      </Tag>\n    </Animated.View>\n  );\n};\n\nexport { AnimatedTag };\n"],"names":["useAnimatedTag","onAnimationEndCallback","maxWidth","useSharedValue","TAG_MAX_WIDTH_START","opacity","TAG_OPACITY_START","_useTheme","useTheme","theme","entering","Keyframe","TAG_OPACITY_END","easing","motion","exit","effective","duration","makeMotionTime","xquick","animate","value","withTiming","TAG_MAX_WIDTH_END","castNativeType","isComplete","runOnJS","Easing","out","exp","animatedStyle","useAnimatedStyle","AnimatedTag","_ref","children","currentTagIndex","activeTagIndex","onDismiss","tagsLength","isDisabled","onAnimationEnd","tagIndex","tagName","prevSelectionsLength","React","useRef","_useAnimatedTag","isTagRemoved","current","_jsx","Animated","View","style","undefined","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":"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"}
+{"version":3,"file":"AnimatedTag.native.js","sources":["../../../../../src/components/Tag/AnimatedTag.native.tsx"],"sourcesContent":["import React from 'react';\nimport type { EasingFn } from 'react-native-reanimated';\nimport Animated, {\n  Easing,\n  useSharedValue,\n  withTiming,\n  useAnimatedStyle,\n  runOnJS,\n  Keyframe,\n} from 'react-native-reanimated';\nimport type { ReanimatedKeyframe } from 'react-native-reanimated/lib/typescript/reanimated2/layoutReanimation/animationBuilder/Keyframe';\nimport { Tag } from './Tag';\nimport {\n  TAG_MAX_WIDTH_END,\n  TAG_MAX_WIDTH_START,\n  TAG_OPACITY_END,\n  TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport type { AnimatedTagProps } from './types';\nimport { castNativeType, makeMotionTime } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\n\nconst useAnimatedTag = (\n  onAnimationEndCallback: () => void,\n): {\n  entering: ReanimatedKeyframe;\n  animate: () => void;\n  animatedStyle: {\n    maxWidth: `${number}%`;\n    opacity: number;\n  };\n} => {\n  const maxWidth = useSharedValue(TAG_MAX_WIDTH_START); // Initial max-width value\n  const opacity = useSharedValue(TAG_OPACITY_START); // Initial opacity value\n  const { theme } = useTheme();\n\n  const entering = new Keyframe({\n    0: {\n      opacity: TAG_OPACITY_END,\n    },\n    100: {\n      opacity: TAG_OPACITY_START,\n      easing: (theme.motion.easing.exit.effective as unknown) as EasingFn,\n    },\n  }).duration(makeMotionTime(theme.motion.duration.xquick));\n\n  const animate = (): void => {\n    maxWidth.value = withTiming(\n      TAG_MAX_WIDTH_END,\n      {\n        duration: makeMotionTime(theme.motion.duration.xquick),\n        easing: castNativeType(theme.motion.easing.exit.effective),\n      },\n      (isComplete) => {\n        if (isComplete) {\n          runOnJS(onAnimationEndCallback)();\n        }\n      },\n    );\n    opacity.value = withTiming(TAG_OPACITY_END, {\n      duration: makeMotionTime(theme.motion.duration.xquick),\n      easing: Easing.out(Easing.exp),\n    });\n  };\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      maxWidth: maxWidth.value,\n      opacity: opacity.value,\n    };\n  });\n\n  return { animate, animatedStyle, entering };\n};\n\nconst AnimatedTag = ({\n  children,\n  currentTagIndex,\n  activeTagIndex,\n  onDismiss,\n  tagsLength,\n  isDisabled,\n}: AnimatedTagProps): React.ReactElement => {\n  const onAnimationEnd = (): void => {\n    onDismiss({ tagIndex: currentTagIndex, tagName: children });\n  };\n\n  const prevSelectionsLength = React.useRef<number>();\n  const { animate, animatedStyle, entering } = useAnimatedTag(onAnimationEnd);\n\n  const isTagRemoved = prevSelectionsLength.current\n    ? prevSelectionsLength.current > tagsLength\n    : false;\n\n  return (\n    <Animated.View style={animatedStyle} entering={isTagRemoved ? undefined : entering}>\n      <Tag\n        _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n        _isTagInsideInput={true}\n        onDismiss={() => {\n          animate();\n        }}\n        marginRight=\"spacing.3\"\n        marginY=\"spacing.2\"\n        isDisabled={isDisabled}\n      >\n        {children}\n      </Tag>\n    </Animated.View>\n  );\n};\n\nexport { AnimatedTag };\n"],"names":["useAnimatedTag","onAnimationEndCallback","maxWidth","useSharedValue","TAG_MAX_WIDTH_START","opacity","TAG_OPACITY_START","_useTheme","useTheme","theme","entering","Keyframe","TAG_OPACITY_END","easing","motion","exit","effective","duration","makeMotionTime","xquick","animate","value","withTiming","TAG_MAX_WIDTH_END","castNativeType","isComplete","runOnJS","Easing","out","exp","animatedStyle","useAnimatedStyle","AnimatedTag","_ref","children","currentTagIndex","activeTagIndex","onDismiss","tagsLength","isDisabled","onAnimationEnd","tagIndex","tagName","prevSelectionsLength","React","useRef","_useAnimatedTag","isTagRemoved","current","_jsx","Animated","View","style","undefined","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAMA,cAAc,CAAG,SAAjBA,cAAcA,CAClBC,sBAAkC,CAQ/B,CACH,IAAMC,QAAQ,CAAGC,cAAc,CAACC,mBAAmB,CAAC,CACpD,IAAMC,OAAO,CAAGF,cAAc,CAACG,iBAAiB,CAAC,CACjD,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CAEb,IAAMC,QAAQ,CAAG,IAAIC,QAAQ,CAAC,CAC5B,CAAC,CAAE,CACDN,OAAO,CAAEO,eACX,CAAC,CACD,GAAG,CAAE,CACHP,OAAO,CAAEC,iBAAiB,CAC1BO,MAAM,CAAGJ,KAAK,CAACK,MAAM,CAACD,MAAM,CAACE,IAAI,CAACC,SACpC,CACF,CAAC,CAAC,CAACC,QAAQ,CAACC,cAAc,CAACT,KAAK,CAACK,MAAM,CAACG,QAAQ,CAACE,MAAM,CAAC,CAAC,CAEzD,IAAMC,OAAO,CAAG,SAAVA,OAAOA,EAAe,CAC1BlB,QAAQ,CAACmB,KAAK,CAAGC,UAAU,CACzBC,iBAAiB,CACjB,CACEN,QAAQ,CAAEC,cAAc,CAACT,KAAK,CAACK,MAAM,CAACG,QAAQ,CAACE,MAAM,CAAC,CACtDN,MAAM,CAAEW,cAAc,CAACf,KAAK,CAACK,MAAM,CAACD,MAAM,CAACE,IAAI,CAACC,SAAS,CAC3D,CAAC,CACD,SAACS,UAAU,CAAK,CACd,GAAIA,UAAU,CAAE,CACdC,OAAO,CAACzB,sBAAsB,CAAC,EAAE,CACnC,CACF,CACF,CAAC,CACDI,OAAO,CAACgB,KAAK,CAAGC,UAAU,CAACV,eAAe,CAAE,CAC1CK,QAAQ,CAAEC,cAAc,CAACT,KAAK,CAACK,MAAM,CAACG,QAAQ,CAACE,MAAM,CAAC,CACtDN,MAAM,CAAEc,MAAM,CAACC,GAAG,CAACD,MAAM,CAACE,GAAG,CAC/B,CAAC,CAAC,CACJ,CAAC,CAED,IAAMC,aAAa,CAAGC,gBAAgB,CAAC,UAAM,CAC3C,OAAO,CACL7B,QAAQ,CAAEA,QAAQ,CAACmB,KAAK,CACxBhB,OAAO,CAAEA,OAAO,CAACgB,KACnB,CAAC,CACH,CAAC,CAAC,CAEF,OAAO,CAAED,OAAO,CAAPA,OAAO,CAAEU,aAAa,CAAbA,aAAa,CAAEpB,QAAQ,CAARA,QAAS,CAAC,CAC7C,CAAC,CAEK,IAAAsB,WAAW,CAAG,SAAdA,WAAWA,CAAAC,IAAA,CAO2B,CAN1C,IAAAC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,eAAe,CAAAF,IAAA,CAAfE,eAAe,CACfC,cAAc,CAAAH,IAAA,CAAdG,cAAc,CACdC,SAAS,CAAAJ,IAAA,CAATI,SAAS,CACTC,UAAU,CAAAL,IAAA,CAAVK,UAAU,CACVC,UAAU,CAAAN,IAAA,CAAVM,UAAU,CAEV,IAAMC,cAAc,CAAG,SAAjBA,cAAcA,EAAe,CACjCH,SAAS,CAAC,CAAEI,QAAQ,CAAEN,eAAe,CAAEO,OAAO,CAAER,QAAS,CAAC,CAAC,CAC7D,CAAC,CAED,IAAMS,oBAAoB,CAAGC,cAAK,CAACC,MAAM,EAAU,CACnD,IAAAC,eAAA,CAA6C9C,cAAc,CAACwC,cAAc,CAAC,CAAnEpB,OAAO,CAAA0B,eAAA,CAAP1B,OAAO,CAAEU,aAAa,CAAAgB,eAAA,CAAbhB,aAAa,CAAEpB,QAAQ,CAAAoC,eAAA,CAARpC,QAAQ,CAExC,IAAMqC,YAAY,CAAGJ,oBAAoB,CAACK,OAAO,CAC7CL,oBAAoB,CAACK,OAAO,CAAGV,UAAU,CACzC,KAAK,CAET,OACEW,GAAA,CAACC,QAAQ,CAACC,IAAI,CAACC,CAAAA,KAAK,CAAEtB,aAAc,CAACpB,QAAQ,CAAEqC,YAAY,CAAGM,SAAS,CAAG3C,QAAS,CAAAwB,QAAA,CACjFe,GAAA,CAACK,GAAG,CAAA,CACFC,mBAAmB,CAAEpB,eAAe,GAAKC,cAAe,CACxDoB,iBAAiB,CAAE,IAAK,CACxBnB,SAAS,CAAE,SAAAA,SAAAA,EAAM,CACfjB,OAAO,EAAE,CACX,CAAE,CACFqC,WAAW,CAAC,WAAW,CACvBC,OAAO,CAAC,WAAW,CACnBnB,UAAU,CAAEA,UAAW,CAAAL,QAAA,CAEtBA,QAAQ,CACN,CAAC,CACO,CAAC,CAEpB;;;;"}

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

@@ -27,7 +27,7 @@ import '../Typography/Code/Code.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
 import { useIsMobile } from '../../utils/useIsMobile.js';
 
-var _excluded=["size","icon","onDismiss","children","isDisabled","testID","_isVirtuallyFocused","_isTagInsideInput"];var FocussableTag=styled(BaseBox)(function(props){if(props._isVirtuallyFocused&&!isReactNative()){return {outline:`${makeSize(size['1'])} solid ${props.theme.colors.surface.background.gray.subtle}`,boxShadow:`0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`};}return {};});var Tag=function Tag(_ref){var _ref$size=_ref.size,size$1=_ref$size===void 0?'medium':_ref$size,Icon=_ref.icon,onDismiss=_ref.onDismiss,children=_ref.children,isDisabled=_ref.isDisabled,testID=_ref.testID,_isVirtuallyFocused=_ref._isVirtuallyFocused,_isTagInsideInput=_ref._isTagInsideInput,styledProps=_objectWithoutProperties(_ref,_excluded);var isMobile=useIsMobile();var textColor=isDisabled?'interactive.text.gray.disabled':'interactive.text.gray.subtle';var iconColor=isDisabled?'interactive.icon.gray.disabled':'interactive.icon.gray.muted';var backgroundColor=isDisabled?'interactive.background.gray.disabled':'interactive.background.gray.default';var mediumPadding={base:['spacing.2','spacing.3','spacing.2','spacing.4'],m:['spacing.1','spacing.2','spacing.1','spacing.3']};var largePadding={base:['spacing.2','spacing.3','spacing.2','spacing.4'],m:['spacing.2','spacing.3','spacing.2','spacing.4']};var assetSize=React__default.useMemo(function(){if(isMobile&&size$1==='large'){return 'medium';}return 'small';},[isMobile,size$1]);return jsx(BaseBox,Object.assign({display:isReactNative()?'flex':'inline-flex'},getStyledProps(styledProps),metaAttribute({name:MetaConstants.Tag,testID:testID}),{children:jsxs(FocussableTag,{display:isReactNative()?'flex':'inline-flex',alignSelf:isReactNative()?'center':undefined,flexDirection:"row",flexWrap:"nowrap",flexShrink:0,backgroundColor:backgroundColor,borderRadius:"max",padding:size$1==='medium'?mediumPadding:largePadding,_isVirtuallyFocused:_isVirtuallyFocused,children:[Icon?jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",children:jsx(Icon,{color:iconColor,size:assetSize,marginRight:"spacing.2"})}):null,jsx(Box,{display:"flex",flexDirection:"row",maxWidth:makeSize(size['100']),children:jsx(Text,{textAlign:"center",truncateAfterLines:1,marginRight:"spacing.2",color:textColor,size:'small',children:children})}),jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",children:jsx(IconButton,{size:assetSize,icon:CloseIcon,accessibilityLabel:`Close ${children} tag`,isDisabled:isDisabled,_tabIndex:_isTagInsideInput?-1:undefined,onClick:function onClick(e){if(_isTagInsideInput){e.stopPropagation();}onDismiss();}})})]})}));};
+var _excluded=["size","icon","onDismiss","children","isDisabled","testID","_isVirtuallyFocused","_isTagInsideInput"];var FocussableTag=styled(BaseBox)(function(props){if(props._isVirtuallyFocused&&!isReactNative()){return {outline:`${makeSize(size['1'])} solid ${props.theme.colors.surface.background.gray.subtle}`,boxShadow:`0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`};}return {};});var Tag=function Tag(_ref){var _ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,Icon=_ref.icon,onDismiss=_ref.onDismiss,children=_ref.children,isDisabled=_ref.isDisabled,testID=_ref.testID,_isVirtuallyFocused=_ref._isVirtuallyFocused,_isTagInsideInput=_ref._isTagInsideInput,styledProps=_objectWithoutProperties(_ref,_excluded);var isMobile=useIsMobile();var textColor=isDisabled?'interactive.text.gray.disabled':'interactive.text.gray.subtle';var iconColor=isDisabled?'interactive.icon.gray.disabled':'interactive.icon.gray.muted';var backgroundColor=isDisabled?'interactive.background.gray.disabled':'interactive.background.gray.default';var mediumPadding={base:['spacing.2','spacing.3','spacing.2','spacing.4'],m:['spacing.1','spacing.2','spacing.1','spacing.3']};var largePadding={base:['spacing.2','spacing.3','spacing.2','spacing.4'],m:['spacing.2','spacing.3','spacing.2','spacing.4']};var assetSize=React__default.useMemo(function(){if(isMobile&&size==='large'){return 'medium';}return 'small';},[isMobile,size]);return jsx(BaseBox,Object.assign({display:isReactNative()?'flex':'inline-flex'},getStyledProps(styledProps),metaAttribute({name:MetaConstants.Tag,testID:testID}),{children:jsxs(FocussableTag,{display:isReactNative()?'flex':'inline-flex',alignSelf:isReactNative()?'center':undefined,flexDirection:"row",flexWrap:"nowrap",flexShrink:0,backgroundColor:backgroundColor,borderRadius:"max",padding:size==='medium'?mediumPadding:largePadding,_isVirtuallyFocused:_isVirtuallyFocused,children:[Icon?jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",children:jsx(Icon,{color:iconColor,size:assetSize,marginRight:"spacing.2"})}):null,jsx(Box,{display:"flex",flexDirection:"row",children:jsx(Text,{textAlign:"center",truncateAfterLines:1,marginRight:"spacing.2",color:textColor,size:"small",children:children})}),jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",children:jsx(IconButton,{size:assetSize,icon:CloseIcon,accessibilityLabel:`Close ${children} tag`,isDisabled:isDisabled,_tabIndex:_isTagInsideInput?-1:undefined,onClick:function onClick(e){if(_isTagInsideInput){e.stopPropagation();}onDismiss();}})})]})}));};
 
 export { Tag };
 //# sourceMappingURL=Tag.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { TagProps } from './types';\nimport { Box } from '~components/Box';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { isReactNative, makeSize } from '~utils';\nimport { size as globalSizeTokens } from '~tokens/global';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { PaddingProps } from '~components/Box/BaseBox/types/spacingTypes';\nimport { useIsMobile } from '~utils/useIsMobile';\n\nconst FocussableTag = styled(BaseBox)<{ _isVirtuallyFocused: TagProps['_isVirtuallyFocused'] }>(\n  (props) => {\n    if (props._isVirtuallyFocused && !isReactNative()) {\n      return {\n        outline: `${makeSize(globalSizeTokens['1'])} solid ${\n          props.theme.colors.surface.background.gray.subtle\n        }`,\n        boxShadow: `0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`,\n      };\n    }\n\n    return {};\n  },\n);\n\n/**\n * ## Tags\n *\n * Tag component can be used to display selected items on UI.\n *\n * ### Usage\n *\n * ***Note:*** _Make sure to handle state when using Tag_\n *\n * ```jsx\n * const [showTag, setShowTag] = React.useState(true);\n *\n * // ...\n *\n * {showTag && (\n *  <Tag\n *    icon={CheckIcon}\n *    onDismiss={() => setShowTag(false)}\n *  >\n *    Transactions\n *  </Tag>\n * )}\n * ```\n *\n * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.\n *\n */\nconst Tag = ({\n  size = 'medium',\n  icon: Icon,\n  onDismiss,\n  children,\n  isDisabled,\n  testID,\n  _isVirtuallyFocused,\n  _isTagInsideInput,\n  ...styledProps\n}: TagProps): React.ReactElement | null => {\n  const isMobile = useIsMobile();\n\n  const textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';\n  const iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';\n  const backgroundColor = isDisabled\n    ? 'interactive.background.gray.disabled'\n    : 'interactive.background.gray.default';\n\n  const mediumPadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.1', 'spacing.2', 'spacing.1', 'spacing.3'],\n  };\n\n  const largePadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n  };\n\n  const assetSize = React.useMemo((): 'small' | 'medium' => {\n    if (isMobile && size === 'large') {\n      return 'medium';\n    }\n\n    return 'small';\n  }, [isMobile, size]);\n\n  return (\n    <BaseBox\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...getStyledProps(styledProps)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        flexShrink={0}\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box display=\"flex\" flexDirection=\"row\" maxWidth={makeSize(globalSizeTokens['100'])}>\n          <Text\n            textAlign=\"center\"\n            truncateAfterLines={1}\n            marginRight=\"spacing.2\"\n            color={textColor}\n            size={'small'}\n          >\n            {children}\n          </Text>\n        </Box>\n\n        {/* Dismiss Icon */}\n        <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <IconButton\n            size={assetSize}\n            icon={CloseIcon}\n            accessibilityLabel={`Close ${children} tag`}\n            isDisabled={isDisabled}\n            _tabIndex={_isTagInsideInput ? -1 : undefined}\n            onClick={(e) => {\n              // Inside tag input, we stop propagation to avoid opening dropdown on click of close on tag\n              if (_isTagInsideInput) {\n                e.stopPropagation();\n              }\n              onDismiss();\n            }}\n          />\n        </Box>\n      </FocussableTag>\n    </BaseBox>\n  );\n};\n\nexport { Tag };\n"],"names":["FocussableTag","styled","BaseBox","props","_isVirtuallyFocused","isReactNative","outline","makeSize","globalSizeTokens","theme","colors","surface","background","gray","subtle","boxShadow","interactive","primary","faded","Tag","_ref","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","styledProps","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","Object","assign","display","getStyledProps","metaAttribute","name","MetaConstants","_jsxs","alignSelf","undefined","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","maxWidth","Text","textAlign","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { TagProps } from './types';\nimport { Box } from '~components/Box';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { isReactNative, makeSize } from '~utils';\nimport { size as globalSizeTokens } from '~tokens/global';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { PaddingProps } from '~components/Box/BaseBox/types/spacingTypes';\nimport { useIsMobile } from '~utils/useIsMobile';\n\nconst FocussableTag = styled(BaseBox)<{ _isVirtuallyFocused: TagProps['_isVirtuallyFocused'] }>(\n  (props) => {\n    if (props._isVirtuallyFocused && !isReactNative()) {\n      return {\n        outline: `${makeSize(globalSizeTokens['1'])} solid ${\n          props.theme.colors.surface.background.gray.subtle\n        }`,\n        boxShadow: `0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`,\n      };\n    }\n\n    return {};\n  },\n);\n\n/**\n * ## Tags\n *\n * Tag component can be used to display selected items on UI.\n *\n * ### Usage\n *\n * ***Note:*** _Make sure to handle state when using Tag_\n *\n * ```jsx\n * const [showTag, setShowTag] = React.useState(true);\n *\n * // ...\n *\n * {showTag && (\n *  <Tag\n *    icon={CheckIcon}\n *    onDismiss={() => setShowTag(false)}\n *  >\n *    Transactions\n *  </Tag>\n * )}\n * ```\n *\n * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.\n *\n */\nconst Tag = ({\n  size = 'medium',\n  icon: Icon,\n  onDismiss,\n  children,\n  isDisabled,\n  testID,\n  _isVirtuallyFocused,\n  _isTagInsideInput,\n  ...styledProps\n}: TagProps): React.ReactElement | null => {\n  const isMobile = useIsMobile();\n\n  const textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';\n  const iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';\n  const backgroundColor = isDisabled\n    ? 'interactive.background.gray.disabled'\n    : 'interactive.background.gray.default';\n\n  const mediumPadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.1', 'spacing.2', 'spacing.1', 'spacing.3'],\n  };\n\n  const largePadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n  };\n\n  const assetSize = React.useMemo((): 'small' | 'medium' => {\n    if (isMobile && size === 'large') {\n      return 'medium';\n    }\n\n    return 'small';\n  }, [isMobile, size]);\n\n  return (\n    <BaseBox\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...getStyledProps(styledProps)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        flexShrink={0}\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box display=\"flex\" flexDirection=\"row\">\n          <Text\n            textAlign=\"center\"\n            truncateAfterLines={1}\n            marginRight=\"spacing.2\"\n            color={textColor}\n            size=\"small\"\n          >\n            {children}\n          </Text>\n        </Box>\n\n        {/* Dismiss Icon */}\n        <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <IconButton\n            size={assetSize}\n            icon={CloseIcon}\n            accessibilityLabel={`Close ${children} tag`}\n            isDisabled={isDisabled}\n            _tabIndex={_isTagInsideInput ? -1 : undefined}\n            onClick={(e) => {\n              // Inside tag input, we stop propagation to avoid opening dropdown on click of close on tag\n              if (_isTagInsideInput) {\n                e.stopPropagation();\n              }\n              onDismiss();\n            }}\n          />\n        </Box>\n      </FocussableTag>\n    </BaseBox>\n  );\n};\n\nexport { Tag };\n"],"names":["FocussableTag","styled","BaseBox","props","_isVirtuallyFocused","isReactNative","outline","makeSize","globalSizeTokens","theme","colors","surface","background","gray","subtle","boxShadow","interactive","primary","faded","Tag","_ref","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","styledProps","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","Object","assign","display","getStyledProps","metaAttribute","name","MetaConstants","_jsxs","alignSelf","undefined","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","Text","textAlign","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation"],"mappings":"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"}

package/build/lib/native/components/Tag/getTagsGroup.js

@@ -2,7 +2,7 @@ import 'react';
 import { AnimatedTag } from './AnimatedTag.native.js';
 import { jsx } from 'react/jsx-runtime';
 
-var getTagsGroup=function getTagsGroup(_ref){var tags=_ref.tags,activeTagIndex=_ref.activeTagIndex,isDisabled=_ref.isDisabled,onDismiss=_ref.onDismiss,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;return tags.map(function(tagName,tagIndex){return jsx(AnimatedTag,{activeTagIndex:activeTagIndex,onDismiss:onDismiss,currentTagIndex:tagIndex,tagsLength:tags.length,isDisabled:isDisabled,size:size,children:tagName},tagName);});};
+var getTagsGroup=function getTagsGroup(_ref){var tags=_ref.tags,activeTagIndex=_ref.activeTagIndex,isDisabled=_ref.isDisabled,onDismiss=_ref.onDismiss,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;return tags.map(function(tagName,tagIndex){return jsx(AnimatedTag,{activeTagIndex:activeTagIndex,onDismiss:onDismiss,currentTagIndex:tagIndex,tagsLength:tags.length,isDisabled:isDisabled,size:size,children:tagName},`${tagName}-${tagIndex}`);});};
 
 export { getTagsGroup };
 //# sourceMappingURL=getTagsGroup.js.map

package/build/lib/native/components/Tag/getTagsGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"getTagsGroup.js","sources":["../../../../../src/components/Tag/getTagsGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { AnimatedTag } from './AnimatedTag';\nimport type { TagsGroupProps } from './types';\n\nconst getTagsGroup = ({\n  tags,\n  activeTagIndex,\n  isDisabled,\n  onDismiss,\n  size = 'medium',\n}: TagsGroupProps): React.ReactElement[] => {\n  return tags.map((tagName, tagIndex) => (\n    <AnimatedTag\n      key={tagName}\n      activeTagIndex={activeTagIndex}\n      onDismiss={onDismiss}\n      currentTagIndex={tagIndex}\n      tagsLength={tags.length}\n      isDisabled={isDisabled}\n      size={size}\n    >\n      {tagName}\n    </AnimatedTag>\n  ));\n};\n\nexport { getTagsGroup };\n"],"names":["getTagsGroup","_ref","tags","activeTagIndex","isDisabled","onDismiss","_ref$size","size","map","tagName","tagIndex","_jsx","AnimatedTag","currentTagIndex","tagsLength","length","children"],"mappings":";;;;AAIM,IAAAA,YAAY,CAAG,SAAfA,YAAYA,CAAAC,IAAA,CAM0B,CAAA,IAL1CC,IAAI,CAAAD,IAAA,CAAJC,IAAI,CACJC,cAAc,CAAAF,IAAA,CAAdE,cAAc,CACdC,UAAU,CAAAH,IAAA,CAAVG,UAAU,CACVC,SAAS,CAAAJ,IAAA,CAATI,SAAS,CAAAC,SAAA,CAAAL,IAAA,CACTM,IAAI,CAAJA,IAAI,CAAAD,SAAA,UAAG,QAAQ,CAAAA,SAAA,CAEf,OAAOJ,IAAI,CAACM,GAAG,CAAC,SAACC,OAAO,CAAEC,QAAQ,SAChCC,GAAA,CAACC,WAAW,CAEVT,CAAAA,cAAc,CAAEA,cAAe,CAC/BE,SAAS,CAAEA,SAAU,CACrBQ,eAAe,CAAEH,QAAS,CAC1BI,UAAU,CAAEZ,IAAI,CAACa,MAAO,CACxBX,UAAU,CAAEA,UAAW,CACvBG,IAAI,CAAEA,IAAK,CAAAS,QAAA,CAEVP,OAAO,CAAA,CARHA,OASM,CAAC,CACf,CAAA,CAAC,CACJ;;;;"}
+{"version":3,"file":"getTagsGroup.js","sources":["../../../../../src/components/Tag/getTagsGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { AnimatedTag } from './AnimatedTag';\nimport type { TagsGroupProps } from './types';\n\nconst getTagsGroup = ({\n  tags,\n  activeTagIndex,\n  isDisabled,\n  onDismiss,\n  size = 'medium',\n}: TagsGroupProps): React.ReactElement[] => {\n  return tags.map((tagName, tagIndex) => (\n    <AnimatedTag\n      key={`${tagName}-${tagIndex}`}\n      activeTagIndex={activeTagIndex}\n      onDismiss={onDismiss}\n      currentTagIndex={tagIndex}\n      tagsLength={tags.length}\n      isDisabled={isDisabled}\n      size={size}\n    >\n      {tagName}\n    </AnimatedTag>\n  ));\n};\n\nexport { getTagsGroup };\n"],"names":["getTagsGroup","_ref","tags","activeTagIndex","isDisabled","onDismiss","_ref$size","size","map","tagName","tagIndex","_jsx","AnimatedTag","currentTagIndex","tagsLength","length","children"],"mappings":";;;;AAIM,IAAAA,YAAY,CAAG,SAAfA,YAAYA,CAAAC,IAAA,CAM0B,CAL1C,IAAAC,IAAI,CAAAD,IAAA,CAAJC,IAAI,CACJC,cAAc,CAAAF,IAAA,CAAdE,cAAc,CACdC,UAAU,CAAAH,IAAA,CAAVG,UAAU,CACVC,SAAS,CAAAJ,IAAA,CAATI,SAAS,CAAAC,SAAA,CAAAL,IAAA,CACTM,IAAI,CAAJA,IAAI,CAAAD,SAAA,GAAG,KAAA,CAAA,CAAA,QAAQ,CAAAA,SAAA,CAEf,OAAOJ,IAAI,CAACM,GAAG,CAAC,SAACC,OAAO,CAAEC,QAAQ,CAChC,CAAA,OAAAC,GAAA,CAACC,WAAW,CAAA,CAEVT,cAAc,CAAEA,cAAe,CAC/BE,SAAS,CAAEA,SAAU,CACrBQ,eAAe,CAAEH,QAAS,CAC1BI,UAAU,CAAEZ,IAAI,CAACa,MAAO,CACxBX,UAAU,CAAEA,UAAW,CACvBG,IAAI,CAAEA,IAAK,CAAAS,QAAA,CAEVP,OAAO,CAAA,CARF,CAAEA,EAAAA,OAAQ,CAAGC,CAAAA,EAAAA,QAAS,CASjB,CAAA,CAAC,CACf,CAAA,CAAC,CACJ;;;;"}

package/build/lib/native/components/Tag/tagAnimationConfig.js

@@ -1,8 +1,7 @@
 import '../../tokens/global/typography.js';
 import '../../tokens/global/motion.js';
-import { size } from '../../tokens/global/size.js';
 
-var TAG_MAX_WIDTH_START=size['140'];var TAG_MAX_WIDTH_END=size['0'];var TAG_OPACITY_START=1;var TAG_OPACITY_END=0;
+var TAG_MAX_WIDTH_START='100%';var TAG_MAX_WIDTH_END='0%';var TAG_OPACITY_START=1;var TAG_OPACITY_END=0;
 
 export { TAG_MAX_WIDTH_END, TAG_MAX_WIDTH_START, TAG_OPACITY_END, TAG_OPACITY_START };
 //# sourceMappingURL=tagAnimationConfig.js.map

package/build/lib/native/components/Tag/tagAnimationConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"tagAnimationConfig.js","sources":["../../../../../src/components/Tag/tagAnimationConfig.ts"],"sourcesContent":["import { size } from '~tokens/global';\n\nexport const TAG_MAX_WIDTH_START: number = size['140'];\nexport const TAG_MAX_WIDTH_END: number = size['0'];\nexport const TAG_MAX_HEIGHT_END: number = size['0'];\nexport const TAG_OPACITY_START = 1;\nexport const TAG_OPACITY_END = 0;\n"],"names":["TAG_MAX_WIDTH_START","size","TAG_MAX_WIDTH_END","TAG_OPACITY_START","TAG_OPACITY_END"],"mappings":";;;;AAEa,IAAAA,mBAA2B,CAAGC,IAAI,CAAC,KAAK,EACxC,IAAAC,iBAAyB,CAAGD,IAAI,CAAC,GAAG,EAEpC,IAAAE,iBAAiB,CAAG,EACpB,IAAAC,eAAe,CAAG;;;;"}
+{"version":3,"file":"tagAnimationConfig.js","sources":["../../../../../src/components/Tag/tagAnimationConfig.ts"],"sourcesContent":["import { size } from '~tokens/global';\n\n// we have to set some max-width for width animations to work correctly while tags are disappearing\n// https://stackoverflow.com/a/38643863\nexport const TAG_MAX_WIDTH_START: `${number}%` = '100%';\nexport const TAG_MAX_WIDTH_END: `${number}%` = '0%';\nexport const TAG_MAX_HEIGHT_END: number = size['0'];\nexport const TAG_OPACITY_START = 1;\nexport const TAG_OPACITY_END = 0;\n"],"names":["TAG_MAX_WIDTH_START","TAG_MAX_WIDTH_END","TAG_OPACITY_START","TAG_OPACITY_END"],"mappings":";;;AAIa,IAAAA,mBAAiC,CAAG,OACpC,IAAAC,iBAA+B,CAAG,KAElC,IAAAC,iBAAiB,CAAG,EACpB,IAAAC,eAAe,CAAG;;;;"}

package/build/lib/native/components/Typography/BaseText/getBaseTextStyles.js

@@ -7,7 +7,7 @@ import { isReactNative } from '../../../utils/platform/isReactNative.js';
 import '../../BladeProvider/useTheme.js';
 import { makeLetterSpacing } from '../../../utils/makeLetterSpacing/makeLetterSpacing.js';
 
-var getBaseTextStyles=function getBaseTextStyles(_ref){var _ref$color=_ref.color,color=_ref$color===void 0?'surface.text.gray.normal':_ref$color,_ref$fontFamily=_ref.fontFamily,fontFamily=_ref$fontFamily===void 0?'text':_ref$fontFamily,_ref$fontSize=_ref.fontSize,fontSize=_ref$fontSize===void 0?200:_ref$fontSize,_ref$fontWeight=_ref.fontWeight,fontWeight=_ref$fontWeight===void 0?'regular':_ref$fontWeight,_ref$fontStyle=_ref.fontStyle,fontStyle=_ref$fontStyle===void 0?'normal':_ref$fontStyle,_ref$textDecorationLi=_ref.textDecorationLine,textDecorationLine=_ref$textDecorationLi===void 0?'none':_ref$textDecorationLi,numberOfLines=_ref.numberOfLines,wordBreak=_ref.wordBreak,_ref$lineHeight=_ref.lineHeight,lineHeight=_ref$lineHeight===void 0?100:_ref$lineHeight,_ref$letterSpacing=_ref.letterSpacing,letterSpacing=_ref$letterSpacing===void 0?100:_ref$letterSpacing,textAlign=_ref.textAlign,opacity=_ref.opacity,theme=_ref.theme;var textColor=getIn(theme.colors,color);var themeFontFamily=theme.typography.fonts.family[fontFamily];var themeFontSize=makeTypographySize(theme.typography.fonts.size[fontSize]);var themeFontWeight=theme.typography.fonts.weight[fontWeight];var themeLineHeight=makeTypographySize(theme.typography.lineHeights[lineHeight]);var themeLetterSpacing=makeLetterSpacing(theme.typography.letterSpacings[letterSpacing],theme.typography.fonts.size[fontSize]);var truncateStyles={};var wordBreakStyles={};if(numberOfLines!==undefined){if(isReactNative()){truncateStyles={};}else {truncateStyles={overflow:'hidden',display:'-webkit-box','line-clamp':`${numberOfLines}`,'-webkit-line-clamp':`${numberOfLines}`,'-webkit-box-orient':'vertical'};}}if(wordBreak!==undefined){if(isReactNative()){wordBreakStyles={};}else {wordBreakStyles={wordBreak:wordBreak};}}return Object.assign({color:textColor,fontFamily:themeFontFamily,fontSize:themeFontSize,fontWeight:themeFontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine},textDecorationLine!=='none'&&{textDecorationColor:textColor},{lineHeight:themeLineHeight,letterSpacing:themeLetterSpacing,textAlign:textAlign,margin:0,padding:0,opacity:opacity},truncateStyles,wordBreakStyles);};
+var getBaseTextStyles=function getBaseTextStyles(_ref){var _ref$color=_ref.color,color=_ref$color===void 0?'surface.text.gray.normal':_ref$color,_ref$fontFamily=_ref.fontFamily,fontFamily=_ref$fontFamily===void 0?'text':_ref$fontFamily,_ref$fontSize=_ref.fontSize,fontSize=_ref$fontSize===void 0?200:_ref$fontSize,_ref$fontWeight=_ref.fontWeight,fontWeight=_ref$fontWeight===void 0?'regular':_ref$fontWeight,_ref$fontStyle=_ref.fontStyle,fontStyle=_ref$fontStyle===void 0?'normal':_ref$fontStyle,_ref$textDecorationLi=_ref.textDecorationLine,textDecorationLine=_ref$textDecorationLi===void 0?'none':_ref$textDecorationLi,numberOfLines=_ref.numberOfLines,wordBreak=_ref.wordBreak,_ref$lineHeight=_ref.lineHeight,lineHeight=_ref$lineHeight===void 0?100:_ref$lineHeight,_ref$letterSpacing=_ref.letterSpacing,letterSpacing=_ref$letterSpacing===void 0?100:_ref$letterSpacing,textAlign=_ref.textAlign,opacity=_ref.opacity,theme=_ref.theme;var textColor=getIn(theme.colors,color);var themeFontFamily=theme.typography.fonts.family[fontFamily];var themeFontSize=makeTypographySize(theme.typography.fonts.size[fontSize]);var themeFontWeight=theme.typography.fonts.weight[fontWeight];var themeLineHeight=makeTypographySize(theme.typography.lineHeights[lineHeight]);var themeLetterSpacing=makeLetterSpacing(theme.typography.letterSpacings[letterSpacing],theme.typography.fonts.size[fontSize]);var truncateStyles={};var wordBreakStyles={};if(numberOfLines!==undefined){if(isReactNative()){truncateStyles={};}else {truncateStyles={overflow:'hidden',display:'-webkit-box','line-clamp':`${numberOfLines}`,'-webkit-line-clamp':`${numberOfLines}`,'-webkit-box-orient':'vertical',overflowWrap:'break-word'};}}if(wordBreak!==undefined){if(isReactNative()){wordBreakStyles={};}else {wordBreakStyles={wordBreak:wordBreak};}}return Object.assign({color:textColor,fontFamily:themeFontFamily,fontSize:themeFontSize,fontWeight:themeFontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine},textDecorationLine!=='none'&&{textDecorationColor:textColor},{lineHeight:themeLineHeight,letterSpacing:themeLetterSpacing,textAlign:textAlign,margin:0,padding:0,opacity:opacity},truncateStyles,wordBreakStyles);};
 
 export { getBaseTextStyles as default };
 //# sourceMappingURL=getBaseTextStyles.js.map

package/build/lib/native/components/Typography/BaseText/getBaseTextStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"getBaseTextStyles.js","sources":["../../../../../../src/components/Typography/BaseText/getBaseTextStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport type { StyledBaseTextProps } from './types';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeTypographySize } from '~utils/makeTypographySize';\nimport { isReactNative } from '~utils';\nimport { makeLetterSpacing } from '~utils/makeLetterSpacing';\n\nconst getBaseTextStyles = ({\n  color = 'surface.text.gray.normal',\n  fontFamily = 'text',\n  fontSize = 200,\n  fontWeight = 'regular',\n  fontStyle = 'normal',\n  textDecorationLine = 'none',\n  numberOfLines,\n  wordBreak,\n  lineHeight = 100,\n  letterSpacing = 100,\n  textAlign,\n  opacity,\n  theme,\n}: StyledBaseTextProps): CSSObject => {\n  const textColor = getIn(theme.colors, color);\n  const themeFontFamily = theme.typography.fonts.family[fontFamily];\n  const themeFontSize = makeTypographySize(theme.typography.fonts.size[fontSize]);\n  const themeFontWeight = theme.typography.fonts.weight[fontWeight];\n  const themeLineHeight = makeTypographySize(theme.typography.lineHeights[lineHeight]);\n  const themeLetterSpacing = makeLetterSpacing(\n    theme.typography.letterSpacings[letterSpacing],\n    theme.typography.fonts.size[fontSize],\n  );\n  let truncateStyles: CSSObject = {};\n  let wordBreakStyles: CSSObject = {};\n  if (numberOfLines !== undefined) {\n    if (isReactNative()) {\n      truncateStyles = {};\n    } else {\n      truncateStyles = {\n        overflow: 'hidden',\n        display: '-webkit-box',\n        'line-clamp': `${numberOfLines}`,\n        '-webkit-line-clamp': `${numberOfLines}`,\n        '-webkit-box-orient': 'vertical',\n      };\n    }\n  }\n  if (wordBreak !== undefined) {\n    if (isReactNative()) {\n      wordBreakStyles = {};\n    } else {\n      wordBreakStyles = {\n        wordBreak,\n      };\n    }\n  }\n\n  return {\n    color: textColor,\n    fontFamily: themeFontFamily,\n    fontSize: themeFontSize,\n    fontWeight: themeFontWeight,\n    fontStyle,\n    textDecorationLine,\n    ...(textDecorationLine !== 'none' && {\n      textDecorationColor: textColor,\n    }),\n    lineHeight: themeLineHeight,\n    letterSpacing: themeLetterSpacing,\n    textAlign,\n    margin: 0,\n    padding: 0,\n    opacity,\n    ...truncateStyles,\n    ...wordBreakStyles,\n  };\n};\n\nexport default getBaseTextStyles;\n"],"names":["getBaseTextStyles","_ref","_ref$color","color","_ref$fontFamily","fontFamily","_ref$fontSize","fontSize","_ref$fontWeight","fontWeight","_ref$fontStyle","fontStyle","_ref$textDecorationLi","textDecorationLine","numberOfLines","wordBreak","_ref$lineHeight","lineHeight","_ref$letterSpacing","letterSpacing","textAlign","opacity","theme","textColor","getIn","colors","themeFontFamily","typography","fonts","family","themeFontSize","makeTypographySize","size","themeFontWeight","weight","themeLineHeight","lineHeights","themeLetterSpacing","makeLetterSpacing","letterSpacings","truncateStyles","wordBreakStyles","undefined","isReactNative","overflow","display","Object","assign","textDecorationColor","margin","padding"],"mappings":"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"}
+{"version":3,"file":"getBaseTextStyles.js","sources":["../../../../../../src/components/Typography/BaseText/getBaseTextStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport type { StyledBaseTextProps } from './types';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeTypographySize } from '~utils/makeTypographySize';\nimport { isReactNative } from '~utils';\nimport { makeLetterSpacing } from '~utils/makeLetterSpacing';\n\nconst getBaseTextStyles = ({\n  color = 'surface.text.gray.normal',\n  fontFamily = 'text',\n  fontSize = 200,\n  fontWeight = 'regular',\n  fontStyle = 'normal',\n  textDecorationLine = 'none',\n  numberOfLines,\n  wordBreak,\n  lineHeight = 100,\n  letterSpacing = 100,\n  textAlign,\n  opacity,\n  theme,\n}: StyledBaseTextProps): CSSObject => {\n  const textColor = getIn(theme.colors, color);\n  const themeFontFamily = theme.typography.fonts.family[fontFamily];\n  const themeFontSize = makeTypographySize(theme.typography.fonts.size[fontSize]);\n  const themeFontWeight = theme.typography.fonts.weight[fontWeight];\n  const themeLineHeight = makeTypographySize(theme.typography.lineHeights[lineHeight]);\n  const themeLetterSpacing = makeLetterSpacing(\n    theme.typography.letterSpacings[letterSpacing],\n    theme.typography.fonts.size[fontSize],\n  );\n  let truncateStyles: CSSObject = {};\n  let wordBreakStyles: CSSObject = {};\n  if (numberOfLines !== undefined) {\n    if (isReactNative()) {\n      truncateStyles = {};\n    } else {\n      truncateStyles = {\n        overflow: 'hidden',\n        display: '-webkit-box',\n        'line-clamp': `${numberOfLines}`,\n        '-webkit-line-clamp': `${numberOfLines}`,\n        '-webkit-box-orient': 'vertical',\n        overflowWrap: 'break-word',\n      };\n    }\n  }\n  if (wordBreak !== undefined) {\n    if (isReactNative()) {\n      wordBreakStyles = {};\n    } else {\n      wordBreakStyles = {\n        wordBreak,\n      };\n    }\n  }\n\n  return {\n    color: textColor,\n    fontFamily: themeFontFamily,\n    fontSize: themeFontSize,\n    fontWeight: themeFontWeight,\n    fontStyle,\n    textDecorationLine,\n    ...(textDecorationLine !== 'none' && {\n      textDecorationColor: textColor,\n    }),\n    lineHeight: themeLineHeight,\n    letterSpacing: themeLetterSpacing,\n    textAlign,\n    margin: 0,\n    padding: 0,\n    opacity,\n    ...truncateStyles,\n    ...wordBreakStyles,\n  };\n};\n\nexport default getBaseTextStyles;\n"],"names":["getBaseTextStyles","_ref","_ref$color","color","_ref$fontFamily","fontFamily","_ref$fontSize","fontSize","_ref$fontWeight","fontWeight","_ref$fontStyle","fontStyle","_ref$textDecorationLi","textDecorationLine","numberOfLines","wordBreak","_ref$lineHeight","lineHeight","_ref$letterSpacing","letterSpacing","textAlign","opacity","theme","textColor","getIn","colors","themeFontFamily","typography","fonts","family","themeFontSize","makeTypographySize","size","themeFontWeight","weight","themeLineHeight","lineHeights","themeLetterSpacing","makeLetterSpacing","letterSpacings","truncateStyles","wordBreakStyles","undefined","isReactNative","overflow","display","overflowWrap","Object","assign","textDecorationColor","margin","padding"],"mappings":"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"}

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/Box/BaseBox/baseBoxStyles.js

@@ -167,7 +167,8 @@ var getAllProps = function getAllProps(props, breakpoint) {
     borderTopRightRadius: getBorderRadiusValue(props.borderTopRightRadius, props.theme, breakpoint),
     borderBottomRightRadius: getBorderRadiusValue(props.borderBottomRightRadius, props.theme, breakpoint),
     borderBottomLeftRadius: getBorderRadiusValue(props.borderBottomLeftRadius, props.theme, breakpoint),
-    borderStyle: hasBorder ? 'solid' : undefined
+    borderStyle: hasBorder ? 'solid' : undefined,
+    cursor: getResponsiveValue(props.cursor, breakpoint)
   }, !hasBorder && {
     borderTopStyle: hasBorderTop ? 'solid' : undefined,
     borderBottomStyle: hasBorderBottom ? 'solid' : undefined,