@razorpay/blade 11.11.1 → 11.13.0

package/build/lib/web/production/components/ProgressBar/CircularProgressLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressLabel.js","sources":["../../../../../../src/components/ProgressBar/CircularProgressLabel.tsx"],"sourcesContent":["import React from 'react';\nimport type { CircularProgressBarFilledProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\n\nconst CircularProgressLabel = ({\n  progressPercent,\n  size = 'small',\n  label,\n  showPercentage = true,\n}: Pick<\n  CircularProgressBarFilledProps,\n  'progressPercent' | 'size' | 'label' | 'showPercentage'\n>): React.ReactElement => {\n  const hasLabel = label && label.trim()?.length > 0;\n\n  return (\n    <BaseBox display=\"flex\" flexDirection=\"column\" alignItems=\"center\">\n      {hasLabel && (\n        <Text marginTop=\"spacing.3\" variant=\"body\" weight=\"regular\" size=\"small\">\n          {label}\n        </Text>\n      )}\n\n      {showPercentage && size === 'small' && (\n        <Text\n          marginTop={hasLabel ? 'spacing.0' : 'spacing.3'}\n          variant=\"body\"\n          weight=\"semibold\"\n          size=\"small\"\n        >\n          {progressPercent}%\n        </Text>\n      )}\n    </BaseBox>\n  );\n};\n\nexport { CircularProgressLabel };\n"],"names":["CircularProgressLabel","_ref","_label$trim","progressPercent","_ref$size","size","label","_ref$showPercentage","showPercentage","hasLabel","trim","length","_jsxs","BaseBox","display","flexDirection","alignItems","children","_jsx","Text","marginTop","variant","weight"],"mappings":";;;;;;;AAKA,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAAC,IAAA,EAQD;AAAA,EAAA,IAAAC,WAAA,CAAA;AAAA,EAAA,IAPxBC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IAAAC,SAAA,GAAAH,IAAA,CACfI,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,SAAA;IACdE,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAAC,mBAAA,GAAAN,IAAA,CACLO,cAAc;AAAdA,IAAAA,cAAc,GAAAD,mBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,mBAAA,CAAA;AAKrB,EAAA,IAAME,QAAQ,GAAGH,KAAK,IAAI,CAAAJ,CAAAA,WAAA,GAAAI,KAAK,CAACI,IAAI,EAAE,cAAAR,WAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZA,WAAA,CAAcS,MAAM,IAAG,CAAC,CAAA;EAElD,oBACEC,IAAA,CAACC,OAAO,EAAA;AAACC,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,aAAa,EAAC,QAAQ;AAACC,IAAAA,UAAU,EAAC,QAAQ;AAAAC,IAAAA,QAAA,EAC/DR,CAAAA,QAAQ,iBACPS,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,SAAS,EAAC,WAAW;AAACC,MAAAA,OAAO,EAAC,MAAM;AAACC,MAAAA,MAAM,EAAC,SAAS;AAACjB,MAAAA,IAAI,EAAC,OAAO;AAAAY,MAAAA,QAAA,EACrEX,KAAAA;KACG,CACP,EAEAE,cAAc,IAAIH,IAAI,KAAK,OAAO,iBACjCO,IAAA,CAACO,IAAI,EAAA;AACHC,MAAAA,SAAS,EAAEX,QAAQ,GAAG,WAAW,GAAG,WAAY;AAChDY,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,MAAM,EAAC,UAAU;AACjBjB,MAAAA,IAAI,EAAC,OAAO;MAAAY,QAAA,EAAA,CAEXd,eAAe,EAAC,GACnB,CAAA;AAAA,KAAM,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd;;;;"}

package/build/lib/web/production/components/ProgressBar/ProgressBar.js

@@ -1,6 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { ProgressBarFilled } from './ProgressBarFilled.web.js';
+import { CircularProgressBarFilled } from './CircularProgressBar.web.js';
 import clamp from '../../utils/lodashButBetter/clamp.js';
 import '../../utils/metaAttribute/index.js';
 import '../Typography/Text/index.js';
@@ -24,17 +25,20 @@ import { Text } from '../Typography/Text/Text.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 
-var _excluded = ["accessibilityLabel", "color", "isIndeterminate", "label", "showPercentage", "size", "value", "variant", "min", "max", "testID"];
+var _excluded = ["accessibilityLabel", "color", "type", "isIndeterminate", "label", "showPercentage", "size", "value", "variant", "min", "max", "testID"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var progressBarHeight = {
   small: size[2],
-  medium: size[4]
+  medium: size[4],
+  // Large size isn't available when variant is 'linear'
+  large: size[0]
 };
 var ProgressBar = function ProgressBar(_ref) {
   var _label$trim;
   var accessibilityLabel = _ref.accessibilityLabel,
     color = _ref.color,
+    type = _ref.type,
     _ref$isIndeterminate = _ref.isIndeterminate,
     isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate,
     label = _ref.label,
@@ -54,19 +58,40 @@ var ProgressBar = function ProgressBar(_ref) {
     styledProps = _objectWithoutProperties(_ref, _excluded);
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
-  var id = useId(variant);
+  var progressType = !type && (variant === 'meter' || variant === 'progress') ? variant : type;
+  var progressVariant = variant === 'meter' || variant === 'progress' ? 'linear' : variant;
+  var id = useId("".concat(progressType, "-").concat(progressVariant));
   if (false) {
-    if (variant === 'meter' && isIndeterminate) {
+    if (progressType === 'meter' && isIndeterminate) {
       throwBladeError({
         moduleName: 'ProgressBar',
-        message: "Cannot set 'isIndeterminate' when 'variant' is 'meter'."
+        message: "Cannot set 'isIndeterminate' when 'type' or 'variant' is 'meter'."
+      });
+    }
+    if (progressVariant === 'circular' && isIndeterminate) {
+      throwBladeError({
+        moduleName: 'ProgressBar',
+        message: "Cannot set 'isIndeterminate' when 'variant' is 'circular'."
+      });
+    }
+    if (progressVariant === 'linear' && size === 'large') {
+      throwBladeError({
+        moduleName: 'ProgressBar',
+        message: "Large size isn't available when 'variant' is 'linear'."
+      });
+    }
+    if (type && (variant === 'progress' || variant === 'meter')) {
+      throwBladeError({
+        moduleName: 'ProgressBar',
+        message: "variant can only be 'linear' or 'circular' when 'type=".concat(type, "'.")
       });
     }
   }
   var unfilledBackgroundColor = theme.colors.feedback.background.neutral.subtle;
   var filledBackgroundColor = color ? theme.colors.feedback.background[color].intense : theme.colors.surface.background.primary.intense;
   var hasLabel = label && ((_label$trim = label.trim()) === null || _label$trim === void 0 ? void 0 : _label$trim.length) > 0;
-  var isMeter = variant === 'meter';
+  var isMeter = progressType === 'meter';
+  var isCircular = progressVariant === 'circular';
   var progressValue = clamp(value, min, max);
   var percentageProgressValue = Math.floor((progressValue - min) * 100 / (max - min));
   var shouldShowPercentage = showPercentage && !isMeter && !isIndeterminate;
@@ -97,7 +122,7 @@ var ProgressBar = function ProgressBar(_ref) {
       display: "flex",
       flexDirection: "column",
       width: "100%",
-      children: [/*#__PURE__*/jsxs(BaseBox, {
+      children: [!isCircular ? /*#__PURE__*/jsxs(BaseBox, {
         display: "flex",
         flexDirection: "row",
         justifyContent: hasLabel ? 'space-between' : 'flex-end',
@@ -116,7 +141,7 @@ var ProgressBar = function ProgressBar(_ref) {
             children: "".concat(percentageProgressValue, "%")
           })
         }) : null]
-      }), /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
+      }) : null, /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
         id: id
       }, makeAccessible({
         role: accessibilityProps.role,
@@ -126,7 +151,19 @@ var ProgressBar = function ProgressBar(_ref) {
         valueMin: accessibilityProps.valueMin,
         valueMax: accessibilityProps.valueMax
       })), {}, {
-        children: /*#__PURE__*/jsx(BaseBox, {
+        children: isCircular ? /*#__PURE__*/jsx(CircularProgressBarFilled, {
+          size: size,
+          label: label,
+          progressPercent: percentageProgressValue,
+          isMeter: isMeter,
+          showPercentage: shouldShowPercentage,
+          backgroundColor: unfilledBackgroundColor,
+          fillColor: filledBackgroundColor,
+          pulseMotionDuration: "duration.2xgentle",
+          fillMotionDuration: "duration.2xgentle",
+          pulseMotionDelay: "delay.long",
+          motionEasing: "easing.standard.revealing"
+        }) : /*#__PURE__*/jsx(BaseBox, {
           backgroundColor: unfilledBackgroundColor,
           height: makeSize(progressBarHeight[size]),
           overflow: "hidden",
@@ -139,7 +176,7 @@ var ProgressBar = function ProgressBar(_ref) {
             indeterminateMotionDuration: "duration.2xgentle",
             pulseMotionDelay: "delay.long",
             motionEasing: "easing.standard.revealing",
-            variant: variant,
+            type: progressType,
             isIndeterminate: isIndeterminate
           })
         })

package/build/lib/web/production/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","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","concat","valueMin","valueMax","undefined","_jsx","BaseBox","_objectSpread","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","concat","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","_objectSpread","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/web/production/components/ProgressBar/ProgressBarFilled.web.js

@@ -46,11 +46,11 @@ var IndeterminatePulseAnimation = /*#__PURE__*/styled(BoxWithIndeterminateAnimat
     pulseMotionDuration = _ref4.pulseMotionDuration,
     pulseMotionDelay = _ref4.pulseMotionDelay,
     motionEasing = _ref4.motionEasing,
-    variant = _ref4.variant;
+    type = _ref4.type;
   var duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));
   var easing = castWebType(getIn(theme.motion, motionEasing));
   var delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));
-  return variant === 'progress' ? getPulseAnimationStyles({
+  return type === 'progress' ? getPulseAnimationStyles({
     duration: duration,
     easing: easing,
     delay: delay
@@ -89,11 +89,11 @@ var DeterminatePulseAnimation = /*#__PURE__*/styled(BoxWithProgressFillTransitio
     pulseMotionDuration = _ref7.pulseMotionDuration,
     pulseMotionDelay = _ref7.pulseMotionDelay,
     motionEasing = _ref7.motionEasing,
-    variant = _ref7.variant;
+    type = _ref7.type;
   var duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));
   var easing = castWebType(getIn(theme.motion, motionEasing));
   var delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));
-  return variant === 'progress' ? getPulseAnimationStyles({
+  return type === 'progress' ? getPulseAnimationStyles({
     duration: duration,
     easing: easing,
     delay: delay
@@ -107,7 +107,7 @@ var ProgressBarFilled = function ProgressBarFilled(_ref8) {
     pulseMotionDelay = _ref8.pulseMotionDelay,
     pulseMotionDuration = _ref8.pulseMotionDuration,
     indeterminateMotionDuration = _ref8.indeterminateMotionDuration,
-    variant = _ref8.variant,
+    type = _ref8.type,
     isIndeterminate = _ref8.isIndeterminate;
   var ProgressBarFilledContainer = isIndeterminate ? IndeterminateFilledContainer : DeterminateFilledContainer;
   var ProgressBarPulseAnimation = isIndeterminate ? IndeterminatePulseAnimation : DeterminatePulseAnimation;
@@ -119,7 +119,7 @@ var ProgressBarFilled = function ProgressBarFilled(_ref8) {
     children: /*#__PURE__*/jsx(ProgressBarPulseAnimation, {
       fillMotionDuration: fillMotionDuration,
       motionEasing: motionEasing,
-      variant: variant,
+      type: type,
       pulseMotionDelay: pulseMotionDelay,
       pulseMotionDuration: pulseMotionDuration
     })

package/build/lib/web/production/components/ProgressBar/ProgressBarFilled.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarFilled.web.js","sources":["../../../../../../src/components/ProgressBar/ProgressBarFilled.web.tsx"],"sourcesContent":["import type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport React from 'react';\nimport type { ProgressBarFilledProps } from './types';\nimport { indeterminateAnimation, pulseAnimation } from './progressBarTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType } from '~utils';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\nconst pulseKeyframes = keyframes`\n  0% {\n    opacity: ${pulseAnimation.opacityInitial};\n  }\n  50% {\n    opacity: ${pulseAnimation.opacityMid};\n  }\n  100% {\n    opacity: ${pulseAnimation.opacityFinal};\n  }\n`;\n\nconst slideAndScaleKeyframes = keyframes`\n  0% {\n    left: ${indeterminateAnimation.leftInitial};\n    transform: scaleX(${indeterminateAnimation.scaleXInitial});\n  }\n  50% {\n    left: ${indeterminateAnimation.leftMid};\n    transform: scaleX(${indeterminateAnimation.scaleXMid});\n  }\n  100% {\n    left: ${indeterminateAnimation.leftFinal};\n    transform:  scaleX(${indeterminateAnimation.scaleXFinal});\n  }\n`;\n\nconst getPulseAnimationStyles = ({\n  duration,\n  easing,\n  delay,\n}: {\n  duration: string;\n  easing: string;\n  delay: string;\n}): FlattenSimpleInterpolation => css`\n  height: 100%;\n  width: 100%;\n  opacity: ${pulseAnimation.opacityInitial};\n  background-color: ${pulseAnimation.backgroundColor};\n  animation: ${pulseKeyframes} ${duration} ${easing} infinite;\n  animation-delay: ${delay};\n`;\n\nconst BoxWithIndeterminateAnimation = styled(BaseBox)<\n  Pick<ProgressBarFilledProps, 'fillMotionDuration' | 'indeterminateMotionDuration'>\n>(({ theme, indeterminateMotionDuration }) => {\n  const duration = castWebType(makeMotionTime(getIn(theme.motion, indeterminateMotionDuration)));\n  const easing = 'linear'; // TODO: Add this in motion tokens\n\n  return css`\n    animation: ${slideAndScaleKeyframes} ${duration} ${easing} infinite;\n    position: absolute;\n    width: ${indeterminateAnimation.fillWidth};\n    height: 100%;\n  `;\n});\n\nconst IndeterminateFilledContainer = styled(BoxWithIndeterminateAnimation)<\n  Pick<ProgressBarFilledProps, 'backgroundColor' | 'progress'>\n>(({ backgroundColor }) => ({\n  backgroundColor,\n}));\n\nconst IndeterminatePulseAnimation = styled(BoxWithIndeterminateAnimation)<\n  Pick<\n    ProgressBarFilledProps,\n    'pulseMotionDuration' | 'pulseMotionDelay' | 'motionEasing' | 'variant'\n  >\n>(({ theme, pulseMotionDuration, pulseMotionDelay, motionEasing, variant }) => {\n  const duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));\n  const easing = castWebType(getIn(theme.motion, motionEasing));\n  const delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));\n\n  return variant === 'progress' ? getPulseAnimationStyles({ duration, easing, delay }) : '';\n});\n\nconst BoxWithProgressFillTransition = styled(BaseBox)<\n  Pick<ProgressBarFilledProps, 'fillMotionDuration' | 'motionEasing'>\n>(({ theme, fillMotionDuration, motionEasing }) => ({\n  transitionProperty: 'width',\n  transitionDuration: castWebType(makeMotionTime(getIn(theme.motion, fillMotionDuration))),\n  transitionTimingFunction: castWebType(getIn(theme.motion, motionEasing)),\n}));\n\nconst DeterminateFilledContainer = styled(BoxWithProgressFillTransition)<\n  Pick<ProgressBarFilledProps, 'backgroundColor' | 'progress' | 'indeterminateMotionDuration'>\n>(({ backgroundColor, progress }) => ({\n  backgroundColor,\n  height: '100%',\n  width: `${progress}%`,\n}));\n\nconst DeterminatePulseAnimation = styled(BoxWithProgressFillTransition)<\n  Pick<\n    ProgressBarFilledProps,\n    'pulseMotionDuration' | 'pulseMotionDelay' | 'motionEasing' | 'variant'\n  >\n>(({ theme, pulseMotionDuration, pulseMotionDelay, motionEasing, variant }) => {\n  const duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));\n  const easing = castWebType(getIn(theme.motion, motionEasing));\n  const delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));\n\n  return variant === 'progress' ? getPulseAnimationStyles({ duration, easing, delay }) : '';\n});\n\nconst ProgressBarFilled = ({\n  backgroundColor,\n  fillMotionDuration,\n  motionEasing,\n  progress,\n  pulseMotionDelay,\n  pulseMotionDuration,\n  indeterminateMotionDuration,\n  variant,\n  isIndeterminate,\n}: ProgressBarFilledProps): React.ReactElement => {\n  const ProgressBarFilledContainer = isIndeterminate\n    ? IndeterminateFilledContainer\n    : DeterminateFilledContainer;\n  const ProgressBarPulseAnimation = isIndeterminate\n    ? IndeterminatePulseAnimation\n    : DeterminatePulseAnimation;\n\n  return (\n    <ProgressBarFilledContainer\n      backgroundColor={backgroundColor}\n      fillMotionDuration={fillMotionDuration}\n      progress={progress}\n      indeterminateMotionDuration={indeterminateMotionDuration}\n    >\n      <ProgressBarPulseAnimation\n        fillMotionDuration={fillMotionDuration}\n        motionEasing={motionEasing}\n        variant={variant}\n        pulseMotionDelay={pulseMotionDelay}\n        pulseMotionDuration={pulseMotionDuration}\n      />\n    </ProgressBarFilledContainer>\n  );\n};\n\nexport { ProgressBarFilled };\n"],"names":["pulseKeyframes","keyframes","pulseAnimation","opacityInitial","opacityMid","opacityFinal","slideAndScaleKeyframes","indeterminateAnimation","leftInitial","scaleXInitial","leftMid","scaleXMid","leftFinal","scaleXFinal","getPulseAnimationStyles","_ref","duration","easing","delay","css","backgroundColor","BoxWithIndeterminateAnimation","styled","BaseBox","withConfig","displayName","componentId","_ref2","theme","indeterminateMotionDuration","castWebType","makeMotionTime","getIn","motion","fillWidth","IndeterminateFilledContainer","_ref3","IndeterminatePulseAnimation","_ref4","pulseMotionDuration","pulseMotionDelay","motionEasing","variant","BoxWithProgressFillTransition","_ref5","fillMotionDuration","transitionProperty","transitionDuration","transitionTimingFunction","DeterminateFilledContainer","_ref6","progress","height","width","concat","DeterminatePulseAnimation","_ref7","ProgressBarFilled","_ref8","isIndeterminate","ProgressBarFilledContainer","ProgressBarPulseAnimation","_jsx","children"],"mappings":"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"}
+{"version":3,"file":"ProgressBarFilled.web.js","sources":["../../../../../../src/components/ProgressBar/ProgressBarFilled.web.tsx"],"sourcesContent":["import type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport React from 'react';\nimport type { ProgressBarFilledProps } from './types';\nimport { indeterminateAnimation, pulseAnimation } from './progressBarTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType } from '~utils';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\nconst pulseKeyframes = keyframes`\n  0% {\n    opacity: ${pulseAnimation.opacityInitial};\n  }\n  50% {\n    opacity: ${pulseAnimation.opacityMid};\n  }\n  100% {\n    opacity: ${pulseAnimation.opacityFinal};\n  }\n`;\n\nconst slideAndScaleKeyframes = keyframes`\n  0% {\n    left: ${indeterminateAnimation.leftInitial};\n    transform: scaleX(${indeterminateAnimation.scaleXInitial});\n  }\n  50% {\n    left: ${indeterminateAnimation.leftMid};\n    transform: scaleX(${indeterminateAnimation.scaleXMid});\n  }\n  100% {\n    left: ${indeterminateAnimation.leftFinal};\n    transform:  scaleX(${indeterminateAnimation.scaleXFinal});\n  }\n`;\n\nconst getPulseAnimationStyles = ({\n  duration,\n  easing,\n  delay,\n}: {\n  duration: string;\n  easing: string;\n  delay: string;\n}): FlattenSimpleInterpolation => css`\n  height: 100%;\n  width: 100%;\n  opacity: ${pulseAnimation.opacityInitial};\n  background-color: ${pulseAnimation.backgroundColor};\n  animation: ${pulseKeyframes} ${duration} ${easing} infinite;\n  animation-delay: ${delay};\n`;\n\nconst BoxWithIndeterminateAnimation = styled(BaseBox)<\n  Pick<ProgressBarFilledProps, 'fillMotionDuration' | 'indeterminateMotionDuration'>\n>(({ theme, indeterminateMotionDuration }) => {\n  const duration = castWebType(makeMotionTime(getIn(theme.motion, indeterminateMotionDuration)));\n  const easing = 'linear'; // TODO: Add this in motion tokens\n\n  return css`\n    animation: ${slideAndScaleKeyframes} ${duration} ${easing} infinite;\n    position: absolute;\n    width: ${indeterminateAnimation.fillWidth};\n    height: 100%;\n  `;\n});\n\nconst IndeterminateFilledContainer = styled(BoxWithIndeterminateAnimation)<\n  Pick<ProgressBarFilledProps, 'backgroundColor' | 'progress'>\n>(({ backgroundColor }) => ({\n  backgroundColor,\n}));\n\nconst IndeterminatePulseAnimation = styled(BoxWithIndeterminateAnimation)<\n  Pick<ProgressBarFilledProps, 'pulseMotionDuration' | 'pulseMotionDelay' | 'motionEasing' | 'type'>\n>(({ theme, pulseMotionDuration, pulseMotionDelay, motionEasing, type }) => {\n  const duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));\n  const easing = castWebType(getIn(theme.motion, motionEasing));\n  const delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));\n\n  return type === 'progress' ? getPulseAnimationStyles({ duration, easing, delay }) : '';\n});\n\nconst BoxWithProgressFillTransition = styled(BaseBox)<\n  Pick<ProgressBarFilledProps, 'fillMotionDuration' | 'motionEasing'>\n>(({ theme, fillMotionDuration, motionEasing }) => ({\n  transitionProperty: 'width',\n  transitionDuration: castWebType(makeMotionTime(getIn(theme.motion, fillMotionDuration))),\n  transitionTimingFunction: castWebType(getIn(theme.motion, motionEasing)),\n}));\n\nconst DeterminateFilledContainer = styled(BoxWithProgressFillTransition)<\n  Pick<ProgressBarFilledProps, 'backgroundColor' | 'progress' | 'indeterminateMotionDuration'>\n>(({ backgroundColor, progress }) => ({\n  backgroundColor,\n  height: '100%',\n  width: `${progress}%`,\n}));\n\nconst DeterminatePulseAnimation = styled(BoxWithProgressFillTransition)<\n  Pick<ProgressBarFilledProps, 'pulseMotionDuration' | 'pulseMotionDelay' | 'motionEasing' | 'type'>\n>(({ theme, pulseMotionDuration, pulseMotionDelay, motionEasing, type }) => {\n  const duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));\n  const easing = castWebType(getIn(theme.motion, motionEasing));\n  const delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));\n\n  return type === 'progress' ? getPulseAnimationStyles({ duration, easing, delay }) : '';\n});\n\nconst ProgressBarFilled = ({\n  backgroundColor,\n  fillMotionDuration,\n  motionEasing,\n  progress,\n  pulseMotionDelay,\n  pulseMotionDuration,\n  indeterminateMotionDuration,\n  type,\n  isIndeterminate,\n}: ProgressBarFilledProps): React.ReactElement => {\n  const ProgressBarFilledContainer = isIndeterminate\n    ? IndeterminateFilledContainer\n    : DeterminateFilledContainer;\n  const ProgressBarPulseAnimation = isIndeterminate\n    ? IndeterminatePulseAnimation\n    : DeterminatePulseAnimation;\n\n  return (\n    <ProgressBarFilledContainer\n      backgroundColor={backgroundColor}\n      fillMotionDuration={fillMotionDuration}\n      progress={progress}\n      indeterminateMotionDuration={indeterminateMotionDuration}\n    >\n      <ProgressBarPulseAnimation\n        fillMotionDuration={fillMotionDuration}\n        motionEasing={motionEasing}\n        type={type}\n        pulseMotionDelay={pulseMotionDelay}\n        pulseMotionDuration={pulseMotionDuration}\n      />\n    </ProgressBarFilledContainer>\n  );\n};\n\nexport { ProgressBarFilled };\n"],"names":["pulseKeyframes","keyframes","pulseAnimation","opacityInitial","opacityMid","opacityFinal","slideAndScaleKeyframes","indeterminateAnimation","leftInitial","scaleXInitial","leftMid","scaleXMid","leftFinal","scaleXFinal","getPulseAnimationStyles","_ref","duration","easing","delay","css","backgroundColor","BoxWithIndeterminateAnimation","styled","BaseBox","withConfig","displayName","componentId","_ref2","theme","indeterminateMotionDuration","castWebType","makeMotionTime","getIn","motion","fillWidth","IndeterminateFilledContainer","_ref3","IndeterminatePulseAnimation","_ref4","pulseMotionDuration","pulseMotionDelay","motionEasing","type","BoxWithProgressFillTransition","_ref5","fillMotionDuration","transitionProperty","transitionDuration","transitionTimingFunction","DeterminateFilledContainer","_ref6","progress","height","width","concat","DeterminatePulseAnimation","_ref7","ProgressBarFilled","_ref8","isIndeterminate","ProgressBarFilledContainer","ProgressBarPulseAnimation","_jsx","children"],"mappings":"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"}

package/build/lib/web/production/components/ProgressBar/progressBarTokens.js

@@ -1,3 +1,6 @@
+import '../../tokens/global/index.js';
+import { size } from '../../tokens/global/size.js';
+
 var indeterminateAnimation = {
   scaleXInitial: 1,
   scaleXMid: 5,
@@ -13,6 +16,47 @@ var pulseAnimation = {
   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;
+  // Size of the enclosing square
+  var sqSize = circularProgressSizeTokens[size].size;
+  var strokeWidth = circularProgressSizeTokens[size].strokeWidth;
+
+  // SVG centers the stroke width on the radius, subtract out so circle fits in square
+  var radius = (sqSize - strokeWidth) / 2;
+  // Enclose circle in a circumscribing square
+  var viewBox = "0 0 ".concat(sqSize, " ").concat(sqSize);
+  // Arc length at 100% coverage is the circle circumference
+  var dashArray = radius * Math.PI * 2;
+  // Scale 100% coverage overlay with the actual percent
+  var dashOffset = dashArray - dashArray * progressPercent / 100;
+  return {
+    sqSize: sqSize,
+    strokeWidth: strokeWidth,
+    radius: radius,
+    viewBox: viewBox,
+    dashArray: dashArray,
+    dashOffset: dashOffset
+  };
+};
 
-export { indeterminateAnimation, pulseAnimation };
+export { circularProgressSizeTokens, getCircularProgressSVGTokens, indeterminateAnimation, pulseAnimation };
 //# sourceMappingURL=progressBarTokens.js.map

package/build/lib/web/production/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":"AAAA,IAAMA,sBAAsB,GAAG;AAC7BC,EAAAA,aAAa,EAAE,CAAC;AAChBC,EAAAA,SAAS,EAAE,CAAC;AACZC,EAAAA,WAAW,EAAE,CAAC;AACdC,EAAAA,WAAW,EAAE,KAAK;AAClBC,EAAAA,OAAO,EAAE,KAAK;AACdC,EAAAA,SAAS,EAAE,MAAM;AACjBC,EAAAA,SAAS,EAAE,IAAA;AACb,EAAC;AAED,IAAMC,cAAc,GAAG;AACrBC,EAAAA,cAAc,EAAE,CAAC;AACjBC,EAAAA,UAAU,EAAE,IAAI;AAChBC,EAAAA,YAAY,EAAE,CAAC;AACfC,EAAAA,eAAe,EAAE,OAAA;AACnB;;;;"}
+{"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","concat","dashArray","Math","PI","dashOffset"],"mappings":";;;AAGA,IAAMA,sBAAsB,GAAG;AAC7BC,EAAAA,aAAa,EAAE,CAAC;AAChBC,EAAAA,SAAS,EAAE,CAAC;AACZC,EAAAA,WAAW,EAAE,CAAC;AACdC,EAAAA,WAAW,EAAE,KAAK;AAClBC,EAAAA,OAAO,EAAE,KAAK;AACdC,EAAAA,SAAS,EAAE,MAAM;AACjBC,EAAAA,SAAS,EAAE,IAAA;AACb,EAAC;AAED,IAAMC,cAAc,GAAG;AACrBC,EAAAA,cAAc,EAAE,CAAC;AACjBC,EAAAA,UAAU,EAAE,IAAI;AAChBC,EAAAA,YAAY,EAAE,CAAC;AACfC,EAAAA,eAAe,EAAE,OAAA;AACnB,EAAC;AAED,IAAMC,0BAA0B,GAAG;AACjCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAEA,IAAI,CAAC,EAAE,CAAC;AACdC,IAAAA,WAAW,EAAED,IAAI,CAAC,CAAC,CAAC;AACpBE,IAAAA,eAAe,EAAE,OAAA;GAClB;AACDC,EAAAA,MAAM,EAAE;AACNH,IAAAA,IAAI,EAAEA,IAAI,CAAC,EAAE,CAAC;AACdC,IAAAA,WAAW,EAAED,IAAI,CAAC,CAAC,CAAC;AACpBE,IAAAA,eAAe,EAAE,OAAA;GAClB;AACDE,EAAAA,KAAK,EAAE;AACLJ,IAAAA,IAAI,EAAEA,IAAI,CAAC,EAAE,CAAC;AACdC,IAAAA,WAAW,EAAED,IAAI,CAAC,CAAC,CAAC;AACpBE,IAAAA,eAAe,EAAE,QAAA;AACnB,GAAA;AACF,EAAU;AAEV,IAAMG,4BAA4B,GAAG,SAA/BA,4BAA4BA,CAAAC,IAAA,EAa7B;AAAA,EAAA,IAZHN,IAAI,GAAAM,IAAA,CAAJN,IAAI;IACJO,eAAe,GAAAD,IAAA,CAAfC,eAAe,CAAA;AAYf;AACA,EAAA,IAAMC,MAAM,GAAGV,0BAA0B,CAACE,IAAI,CAAC,CAACA,IAAI,CAAA;AACpD,EAAA,IAAMC,WAAW,GAAGH,0BAA0B,CAACE,IAAI,CAAC,CAACC,WAAW,CAAA;;AAEhE;AACA,EAAA,IAAMQ,MAAM,GAAG,CAACD,MAAM,GAAGP,WAAW,IAAI,CAAC,CAAA;AACzC;EACA,IAAMS,OAAO,UAAAC,MAAA,CAAUH,MAAM,EAAAG,GAAAA,CAAAA,CAAAA,MAAA,CAAIH,MAAM,CAAE,CAAA;AACzC;EACA,IAAMI,SAAS,GAAGH,MAAM,GAAGI,IAAI,CAACC,EAAE,GAAG,CAAC,CAAA;AACtC;EACA,IAAMC,UAAU,GAAGH,SAAS,GAAIA,SAAS,GAAGL,eAAe,GAAI,GAAG,CAAA;EAElE,OAAO;AACLC,IAAAA,MAAM,EAANA,MAAM;AACNP,IAAAA,WAAW,EAAXA,WAAW;AACXQ,IAAAA,MAAM,EAANA,MAAM;AACNC,IAAAA,OAAO,EAAPA,OAAO;AACPE,IAAAA,SAAS,EAATA,SAAS;AACTG,IAAAA,UAAU,EAAVA,UAAAA;GACD,CAAA;AACH;;;;"}

package/build/lib/web/production/components/Tag/AnimatedTag.web.js

@@ -7,18 +7,17 @@ import '../Box/BaseBox/index.js';
 import '../BladeProvider/index.js';
 import '../../utils/index.js';
 import { jsx } from 'react/jsx-runtime';
-import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import useTheme from '../BladeProvider/useTheme.js';
 import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
 
-var tagDissappearKeyframe = /*#__PURE__*/keyframes(["0%{opacity:", ";max-width:", ";}100%{opacity:", ";max-width:", ";}"], TAG_OPACITY_START, makeSize(TAG_MAX_WIDTH_START), TAG_OPACITY_END, makeSize(TAG_MAX_WIDTH_END));
+var tagDissappearKeyframe = /*#__PURE__*/keyframes(["0%{opacity:", ";max-width:", "}100%{opacity:", ";max-width:", ";}"], TAG_OPACITY_START, TAG_MAX_WIDTH_START, TAG_OPACITY_END, TAG_MAX_WIDTH_END);
 var tagShowKeyframe = /*#__PURE__*/keyframes(["0%{opacity:", ";}100%{opacity:", ";}"], TAG_OPACITY_END, TAG_OPACITY_START);
 var AnimatedTagContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "AnimatedTagweb__AnimatedTagContainer",
   componentId: "sc-1ypkpkt-0"
 })(function (props) {
-  return css(["", ";display:inline-block;opacity:", ";max-width:", ";flex-shrink:0;"], props.transition, props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END, makeSize(props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END));
+  return css(["", ";display:inline-block;opacity:", ";max-width:", ";flex-shrink:0;"], props.transition, props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END, props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END);
 });
 var AnimatedTag = function AnimatedTag(_ref) {
   var children = _ref.children,

package/build/lib/web/production/components/Tag/AnimatedTag.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedTag.web.js","sources":["../../../../../../src/components/Tag/AnimatedTag.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport { Tag } from './Tag';\nimport type { AnimatedTagProps } from './types';\nimport {\n  TAG_MAX_WIDTH_END,\n  TAG_MAX_WIDTH_START,\n  TAG_OPACITY_END,\n  TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeMotionTime, makeSize } from '~utils';\n\nconst tagDissappearKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_START};\n    max-width: ${makeSize(TAG_MAX_WIDTH_START)};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_END};\n    max-width: ${makeSize(TAG_MAX_WIDTH_END)};\n  }\n`;\n\nconst tagShowKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_END};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_START};\n  }\n`;\n\nconst AnimatedTagContainer = styled(BaseBox)<{\n  transition: FlattenSimpleInterpolation;\n  isVisible: boolean;\n}>(\n  (props) => css`\n    ${props.transition};\n    display: inline-block;\n    opacity: ${props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END};\n    max-width: ${makeSize(props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END)};\n    flex-shrink: 0;\n  `,\n);\n\nconst AnimatedTag = ({\n  children,\n  currentTagIndex,\n  isDisabled,\n  activeTagIndex,\n  onDismiss,\n  size = 'medium',\n}: AnimatedTagProps): React.ReactElement => {\n  const [isTagVisible, setIsTagVisible] = React.useState(true);\n  const { theme } = useTheme();\n\n  const hideTagTransition = css`\n    animation: ${tagDissappearKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.exit.effective)};\n  `;\n\n  const showTagTransition = css`\n    animation: ${tagShowKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.entrance.effective)};\n  `;\n\n  return (\n    <AnimatedTagContainer\n      isVisible={isTagVisible}\n      onAnimationEnd={() => {\n        if (!isTagVisible) {\n          onDismiss({ tagIndex: currentTagIndex, tagName: children });\n        }\n      }}\n      transition={isTagVisible ? showTagTransition : hideTagTransition}\n    >\n      <Tag\n        _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n        _isTagInsideInput={true}\n        onDismiss={() => {\n          setIsTagVisible(false);\n        }}\n        marginRight=\"spacing.3\"\n        marginY=\"spacing.2\"\n        isDisabled={isDisabled}\n        size={size}\n      >\n        {children}\n      </Tag>\n    </AnimatedTagContainer>\n  );\n};\n\nexport { AnimatedTag };\n"],"names":["tagDissappearKeyframe","keyframes","TAG_OPACITY_START","makeSize","TAG_MAX_WIDTH_START","TAG_OPACITY_END","TAG_MAX_WIDTH_END","tagShowKeyframe","AnimatedTagContainer","styled","BaseBox","withConfig","displayName","componentId","props","css","transition","isVisible","AnimatedTag","_ref","children","currentTagIndex","isDisabled","activeTagIndex","onDismiss","_ref$size","size","_React$useState","React","useState","_React$useState2","_slicedToArray","isTagVisible","setIsTagVisible","_useTheme","useTheme","theme","hideTagTransition","makeMotionTime","motion","duration","xquick","String","easing","exit","effective","showTagTransition","entrance","_jsx","onAnimationEnd","tagIndex","tagName","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":";;;;;;;;;;;;;;AAeA,IAAMA,qBAAqB,gBAAGC,SAAS,CAExBC,CAAAA,aAAAA,EAAAA,aAAAA,EAAAA,iBAAAA,EAAAA,aAAAA,EAAAA,IAAAA,CAAAA,EAAAA,iBAAiB,EACfC,QAAQ,CAACC,mBAAmB,CAAC,EAI/BC,eAAe,EACbF,QAAQ,CAACG,iBAAiB,CAAC,CAE3C,CAAA;AAED,IAAMC,eAAe,gBAAGN,SAAS,2CAElBI,eAAe,EAIfH,iBAAiB,CAE/B,CAAA;AAED,IAAMM,oBAAoB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,sCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAI1C,UAACC,KAAK,EAAA;EAAA,OAAKC,GAAG,2EACVD,KAAK,CAACE,UAAU,EAEPF,KAAK,CAACG,SAAS,GAAGf,iBAAiB,GAAGG,eAAe,EACnDF,QAAQ,CAACW,KAAK,CAACG,SAAS,GAAGb,mBAAmB,GAAGE,iBAAiB,CAAC,CAAA,CAAA;AAAA,CAEjF,CACF,CAAA;AAED,IAAMY,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAO2B;AAAA,EAAA,IAN1CC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IACfC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,cAAc,GAAAJ,IAAA,CAAdI,cAAc;IACdC,SAAS,GAAAL,IAAA,CAATK,SAAS;IAAAC,SAAA,GAAAN,IAAA,CACTO,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA,CAAA;AAEf,EAAA,IAAAE,eAAA,GAAwCC,cAAK,CAACC,QAAQ,CAAC,IAAI,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAArDK,IAAAA,YAAY,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,eAAe,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AACpC,EAAA,IAAAI,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AAEb,EAAA,IAAMC,iBAAiB,gBAAGtB,GAAG,CAAA,CAAA,YAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EACdf,qBAAqB,EAAIsC,cAAc,CAACF,KAAK,CAACG,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,EAC9EC,MAAM,CAACN,KAAK,CAACG,MAAM,CAACI,MAAM,CAACC,IAAI,CAACC,SAAS,CAAC,CAC/C,CAAA;AAED,EAAA,IAAMC,iBAAiB,gBAAG/B,GAAG,CAAA,CAAA,YAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EACdR,eAAe,EAAI+B,cAAc,CAACF,KAAK,CAACG,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,EACxEC,MAAM,CAACN,KAAK,CAACG,MAAM,CAACI,MAAM,CAACI,QAAQ,CAACF,SAAS,CAAC,CACnD,CAAA;EAED,oBACEG,GAAA,CAACxC,oBAAoB,EAAA;AACnBS,IAAAA,SAAS,EAAEe,YAAa;IACxBiB,cAAc,EAAE,SAAAA,cAAAA,GAAM;MACpB,IAAI,CAACjB,YAAY,EAAE;AACjBR,QAAAA,SAAS,CAAC;AAAE0B,UAAAA,QAAQ,EAAE7B,eAAe;AAAE8B,UAAAA,OAAO,EAAE/B,QAAAA;AAAS,SAAC,CAAC,CAAA;AAC7D,OAAA;KACA;AACFJ,IAAAA,UAAU,EAAEgB,YAAY,GAAGc,iBAAiB,GAAGT,iBAAkB;IAAAjB,QAAA,eAEjE4B,GAAA,CAACI,GAAG,EAAA;MACFC,mBAAmB,EAAEhC,eAAe,KAAKE,cAAe;AACxD+B,MAAAA,iBAAiB,EAAE,IAAK;MACxB9B,SAAS,EAAE,SAAAA,SAAAA,GAAM;QACfS,eAAe,CAAC,KAAK,CAAC,CAAA;OACtB;AACFsB,MAAAA,WAAW,EAAC,WAAW;AACvBC,MAAAA,OAAO,EAAC,WAAW;AACnBlC,MAAAA,UAAU,EAAEA,UAAW;AACvBI,MAAAA,IAAI,EAAEA,IAAK;AAAAN,MAAAA,QAAA,EAEVA,QAAAA;KACE,CAAA;AAAC,GACc,CAAC,CAAA;AAE3B;;;;"}
+{"version":3,"file":"AnimatedTag.web.js","sources":["../../../../../../src/components/Tag/AnimatedTag.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport { Tag } from './Tag';\nimport type { AnimatedTagProps } from './types';\nimport {\n  TAG_MAX_WIDTH_END,\n  TAG_MAX_WIDTH_START,\n  TAG_OPACITY_END,\n  TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeMotionTime } from '~utils';\n\nconst tagDissappearKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_START};\n    max-width: ${TAG_MAX_WIDTH_START}\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_END};\n    max-width: ${TAG_MAX_WIDTH_END};\n  }\n`;\n\nconst tagShowKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_END};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_START};\n  }\n`;\n\nconst AnimatedTagContainer = styled(BaseBox)<{\n  transition: FlattenSimpleInterpolation;\n  isVisible: boolean;\n}>(\n  (props) => css`\n    ${props.transition};\n    display: inline-block;\n    opacity: ${props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END};\n    max-width: ${props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END};\n    flex-shrink: 0;\n  `,\n);\n\nconst AnimatedTag = ({\n  children,\n  currentTagIndex,\n  isDisabled,\n  activeTagIndex,\n  onDismiss,\n  size = 'medium',\n}: AnimatedTagProps): React.ReactElement => {\n  const [isTagVisible, setIsTagVisible] = React.useState(true);\n  const { theme } = useTheme();\n\n  const hideTagTransition = css`\n    animation: ${tagDissappearKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.exit.effective)};\n  `;\n\n  const showTagTransition = css`\n    animation: ${tagShowKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.entrance.effective)};\n  `;\n\n  return (\n    <AnimatedTagContainer\n      isVisible={isTagVisible}\n      onAnimationEnd={() => {\n        if (!isTagVisible) {\n          onDismiss({ tagIndex: currentTagIndex, tagName: children });\n        }\n      }}\n      transition={isTagVisible ? showTagTransition : hideTagTransition}\n    >\n      <Tag\n        _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n        _isTagInsideInput={true}\n        onDismiss={() => {\n          setIsTagVisible(false);\n        }}\n        marginRight=\"spacing.3\"\n        marginY=\"spacing.2\"\n        isDisabled={isDisabled}\n        size={size}\n      >\n        {children}\n      </Tag>\n    </AnimatedTagContainer>\n  );\n};\n\nexport { AnimatedTag };\n"],"names":["tagDissappearKeyframe","keyframes","TAG_OPACITY_START","TAG_MAX_WIDTH_START","TAG_OPACITY_END","TAG_MAX_WIDTH_END","tagShowKeyframe","AnimatedTagContainer","styled","BaseBox","withConfig","displayName","componentId","props","css","transition","isVisible","AnimatedTag","_ref","children","currentTagIndex","isDisabled","activeTagIndex","onDismiss","_ref$size","size","_React$useState","React","useState","_React$useState2","_slicedToArray","isTagVisible","setIsTagVisible","_useTheme","useTheme","theme","hideTagTransition","makeMotionTime","motion","duration","xquick","String","easing","exit","effective","showTagTransition","entrance","_jsx","onAnimationEnd","tagIndex","tagName","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":"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"}

package/build/lib/web/production/components/Tag/Tag.js

@@ -70,7 +70,7 @@ var FocussableTag = /*#__PURE__*/styled(BaseBox).withConfig({
  */
 var Tag = function Tag(_ref) {
   var _ref$size = _ref.size,
-    size$1 = _ref$size === void 0 ? 'medium' : _ref$size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
     Icon = _ref.icon,
     onDismiss = _ref.onDismiss,
     children = _ref.children,
@@ -92,11 +92,11 @@ var Tag = function Tag(_ref) {
     m: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4']
   };
   var assetSize = React__default.useMemo(function () {
-    if (isMobile && size$1 === 'large') {
+    if (isMobile && size === 'large') {
       return 'medium';
     }
     return 'small';
-  }, [isMobile, size$1]);
+  }, [isMobile, size]);
   return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
     display: isReactNative() ? 'flex' : 'inline-flex'
   }, getStyledProps(styledProps)), metaAttribute({
@@ -111,7 +111,7 @@ var Tag = function Tag(_ref) {
       flexShrink: 0,
       backgroundColor: backgroundColor,
       borderRadius: "max",
-      padding: size$1 === 'medium' ? mediumPadding : largePadding,
+      padding: size === 'medium' ? mediumPadding : largePadding,
       _isVirtuallyFocused: _isVirtuallyFocused,
       children: [Icon ? /*#__PURE__*/jsx(Box, {
         display: "flex",
@@ -125,13 +125,12 @@ var Tag = function Tag(_ref) {
       }) : null, /*#__PURE__*/jsx(Box, {
         display: "flex",
         flexDirection: "row",
-        maxWidth: makeSize(size['100']),
         children: /*#__PURE__*/jsx(Text, {
           textAlign: "center",
           truncateAfterLines: 1,
           marginRight: "spacing.2",
           color: textColor,
-          size: 'small',
+          size: "small",
           children: children
         })
       }), /*#__PURE__*/jsx(Box, {

package/build/lib/web/production/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","withConfig","displayName","componentId","props","_isVirtuallyFocused","isReactNative","outline","concat","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","_objectSpread","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","withConfig","displayName","componentId","props","_isVirtuallyFocused","isReactNative","outline","concat","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","_objectSpread","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/web/production/components/Tag/getTagsGroup.js

@@ -18,7 +18,7 @@ var getTagsGroup = function getTagsGroup(_ref) {
       isDisabled: isDisabled,
       size: size,
       children: tagName
-    }, tagName);
+    }, "".concat(tagName, "-").concat(tagIndex));
   });
 };
 

package/build/lib/web/production/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":";;;;AAIA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAM0B;AAAA,EAAA,IAL1CC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,cAAc,GAAAF,IAAA,CAAdE,cAAc;IACdC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IAAAC,SAAA,GAAAL,IAAA,CACTM,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA,CAAA;AAEf,EAAA,OAAOJ,IAAI,CAACM,GAAG,CAAC,UAACC,OAAO,EAAEC,QAAQ,EAAA;IAAA,oBAChCC,GAAA,CAACC,WAAW,EAAA;AAEVT,MAAAA,cAAc,EAAEA,cAAe;AAC/BE,MAAAA,SAAS,EAAEA,SAAU;AACrBQ,MAAAA,eAAe,EAAEH,QAAS;MAC1BI,UAAU,EAAEZ,IAAI,CAACa,MAAO;AACxBX,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,IAAI,EAAEA,IAAK;AAAAS,MAAAA,QAAA,EAEVP,OAAAA;AAAO,KAAA,EARHA,OASM,CAAC,CAAA;AAAA,GACf,CAAC,CAAA;AACJ;;;;"}
+{"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","concat"],"mappings":";;;;AAIA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAM0B;AAAA,EAAA,IAL1CC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,cAAc,GAAAF,IAAA,CAAdE,cAAc;IACdC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IAAAC,SAAA,GAAAL,IAAA,CACTM,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA,CAAA;AAEf,EAAA,OAAOJ,IAAI,CAACM,GAAG,CAAC,UAACC,OAAO,EAAEC,QAAQ,EAAA;IAAA,oBAChCC,GAAA,CAACC,WAAW,EAAA;AAEVT,MAAAA,cAAc,EAAEA,cAAe;AAC/BE,MAAAA,SAAS,EAAEA,SAAU;AACrBQ,MAAAA,eAAe,EAAEH,QAAS;MAC1BI,UAAU,EAAEZ,IAAI,CAACa,MAAO;AACxBX,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,IAAI,EAAEA,IAAK;AAAAS,MAAAA,QAAA,EAEVP,OAAAA;KAAOQ,EAAAA,EAAAA,CAAAA,MAAA,CARAR,OAAO,EAAA,GAAA,CAAA,CAAAQ,MAAA,CAAIP,QAAQ,CAShB,CAAC,CAAA;AAAA,GACf,CAAC,CAAA;AACJ;;;;"}

package/build/lib/web/production/components/Tag/tagAnimationConfig.js

@@ -1,8 +1,10 @@
 import '../../tokens/global/index.js';
 import { size } from '../../tokens/global/size.js';
 
-var TAG_MAX_WIDTH_START = size['140'];
-var TAG_MAX_WIDTH_END = size['0'];
+// we have to set some max-width for width animations to work correctly while tags are disappearing
+// https://stackoverflow.com/a/38643863
+var TAG_MAX_WIDTH_START = '100%';
+var TAG_MAX_WIDTH_END = '0%';
 var TAG_MAX_HEIGHT_END = size['0'];
 var TAG_OPACITY_START = 1;
 var TAG_OPACITY_END = 0;

package/build/lib/web/production/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_MAX_HEIGHT_END","TAG_OPACITY_START","TAG_OPACITY_END"],"mappings":";;;IAEaA,mBAA2B,GAAGC,IAAI,CAAC,KAAK,EAAC;IACzCC,iBAAyB,GAAGD,IAAI,CAAC,GAAG,EAAC;IACrCE,kBAA0B,GAAGF,IAAI,CAAC,GAAG,EAAC;AAC5C,IAAMG,iBAAiB,GAAG,EAAC;AAC3B,IAAMC,eAAe,GAAG;;;;"}
+{"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_MAX_HEIGHT_END","size","TAG_OPACITY_START","TAG_OPACITY_END"],"mappings":";;;AAEA;AACA;AACO,IAAMA,mBAAiC,GAAG,OAAM;AAChD,IAAMC,iBAA+B,GAAG,KAAI;IACtCC,kBAA0B,GAAGC,IAAI,CAAC,GAAG,EAAC;AAC5C,IAAMC,iBAAiB,GAAG,EAAC;AAC3B,IAAMC,eAAe,GAAG;;;;"}