@razorpay/blade 11.11.1 → 11.13.0

package/build/lib/web/production/components/Typography/BaseText/getBaseTextStyles.js

@@ -48,7 +48,8 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
         display: '-webkit-box',
         'line-clamp': "".concat(numberOfLines),
         '-webkit-line-clamp': "".concat(numberOfLines),
-        '-webkit-box-orient': 'vertical'
+        '-webkit-box-orient': 'vertical',
+        overflowWrap: 'break-word'
       };
     }
   }

package/build/lib/web/production/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","concat","_objectSpread","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","concat","overflowWrap","_objectSpread","textDecorationColor","margin","padding"],"mappings":"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"}

package/build/lib/web/production/tokens/global/size.js

@@ -16,6 +16,8 @@ var size = {
   5: 5,
   /** 6 px */
   6: 6,
+  /** 7 px */
+  7: 7,
   /** 8 px */
   8: 8,
   /** 10 px */
@@ -46,6 +48,8 @@ var size = {
   56: 56,
   /** 64 px */
   64: 64,
+  /** 72 px */
+  72: 72,
   /** 100 px */
   100: 100,
   /** 120 px */

package/build/lib/web/production/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":"AAAA;AACA;AACA;AACO,IAAMA,IAAI,GAAG;AAClB;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,IAAI,EAAE,IAAI;AACV;AACA,EAAA,IAAI,EAAE,IAAA;AACR;;;;"}
+{"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":"AAAA;AACA;AACA;AACO,IAAMA,IAAI,GAAG;AAClB;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,IAAI,EAAE,IAAI;AACV;AACA,EAAA,IAAI,EAAE,IAAA;AACR;;;;"}

package/build/types/components/index.d.ts

@@ -1283,7 +1283,7 @@ type BaseBoxVisualProps = MakeObjectResponsive<{
     lineHeight: SpacingValueType;
     touchAction: CSSObject['touchAction'];
     userSelect: CSSObject['userSelect'];
-} & PickCSSByPlatform<'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'opacity' | 'pointerEvents'>>;
+} & PickCSSByPlatform<'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'opacity' | 'pointerEvents' | 'cursor'>>;
 type BoxVisualProps = MakeObjectResponsive<{
     backgroundColor: BackgroundColorString<'surface'> | 'transparent';
 }> & {
@@ -6292,6 +6292,14 @@ type PasswordInputPropsWithLabel = {
 type PasswordInputProps = (PasswordInputPropsWithA11yLabel | PasswordInputPropsWithLabel) & PasswordInputCommonProps;
 declare const PasswordInput: React__default.ForwardRefExoticComponent<PasswordInputProps & React__default.RefAttributes<BladeElementRef>>;
 
+type TaggedInputProps = {
+    isTaggedInput?: boolean;
+    tags?: string[];
+    onTagChange?: ({ tags }: {
+        tags: string[];
+    }) => void;
+};
+
 type TextAreaCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'onSubmit' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines' | 'testID' | 'size'> & {
     /**
      * Decides whether to render a clear icon button
@@ -6301,7 +6309,7 @@ type TextAreaCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' |
      * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
      */
     onClearButtonClick?: () => void;
-} & StyledPropsBlade;
+} & TaggedInputProps & StyledPropsBlade;
 type TextAreaPropsWithA11yLabel = {
     /**
      * Label to be shown for the input field
@@ -6358,7 +6366,7 @@ type TextInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel'
      * @default text
      */
     type?: Type;
-} & StyledPropsBlade;
+} & TaggedInputProps & StyledPropsBlade;
 type TextInputPropsWithA11yLabel = {
     /**
      * Label to be shown for the input field
@@ -7062,15 +7070,21 @@ type ProgressBarCommonProps = {
      * Sets the color of the progress bar which changes the feedback color.
      */
     color?: FeedbackColors;
+    /**
+     * Sets the type of the progress bar.
+     * @default 'progress'
+     */
+    type?: 'meter' | 'progress';
     /**
      * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.
      */
     label?: string;
     /**
      * Sets the size of the progress bar.
+     * Note: 'large' size isn't available when the variant is 'linear'.
      * @default 'small'
      */
-    size?: 'small' | 'medium';
+    size?: 'small' | 'medium' | 'large';
     /**
      * Sets the progress value of the progress bar.
      * @default 'small'
@@ -7087,13 +7101,13 @@ type ProgressBarCommonProps = {
      */
     max?: number;
 } & TestID & StyledPropsBlade;
-type ProgressBarVariant = 'progress' | 'meter';
+type ProgressBarVariant = 'progress' | 'meter' | 'linear' | 'circular';
 type ProgressBarProgressProps = ProgressBarCommonProps & {
     /**
      * Sets the variant to be rendered for the progress bar.
      * @default 'progress'
      */
-    variant?: Extract<ProgressBarVariant, 'progress'>;
+    variant?: Extract<ProgressBarVariant, 'progress' | 'linear' | 'circular'>;
     /**
      * Sets whether the progress bar is in an indeterminate state.
      * @default false
@@ -7110,7 +7124,7 @@ type ProgressBarMeterProps = ProgressBarCommonProps & {
      * Sets the variant to be rendered for thr progress bar.
      * @default 'progress'
      */
-    variant?: Extract<ProgressBarVariant, 'meter'>;
+    variant?: Extract<ProgressBarVariant, 'meter' | 'linear' | 'circular'>;
     /**
      * Sets whether the progress bar is in an indeterminate state.
      * @default false
@@ -7123,7 +7137,7 @@ type ProgressBarMeterProps = ProgressBarCommonProps & {
     showPercentage?: undefined;
 };
 type ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;
-declare const ProgressBar: ({ accessibilityLabel, color, isIndeterminate, label, showPercentage, size, value, variant, min, max, testID, ...styledProps }: ProgressBarProps) => ReactElement;
+declare const ProgressBar: ({ accessibilityLabel, color, type, isIndeterminate, label, showPercentage, size, value, variant, min, max, testID, ...styledProps }: ProgressBarProps) => ReactElement;
 
 type RadioProps = {
     /**
@@ -9520,6 +9534,14 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
         readonly l?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
         readonly xl?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
     };
+    cursor?: csstype.Property.Cursor | {
+        readonly base?: csstype.Property.Cursor | undefined;
+        readonly xs?: csstype.Property.Cursor | undefined;
+        readonly s?: csstype.Property.Cursor | undefined;
+        readonly m?: csstype.Property.Cursor | undefined;
+        readonly l?: csstype.Property.Cursor | undefined;
+        readonly xl?: csstype.Property.Cursor | undefined;
+    } | undefined;
     lineHeight: SpacingValueType | {
         readonly base?: SpacingValueType | undefined;
         readonly xs?: SpacingValueType | undefined;

package/build/types/components/index.native.d.ts

@@ -1282,7 +1282,7 @@ type BaseBoxVisualProps = MakeObjectResponsive<{
     lineHeight: SpacingValueType;
     touchAction: CSSObject['touchAction'];
     userSelect: CSSObject['userSelect'];
-} & PickCSSByPlatform<'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'opacity' | 'pointerEvents'>>;
+} & PickCSSByPlatform<'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'opacity' | 'pointerEvents' | 'cursor'>>;
 type BoxVisualProps = MakeObjectResponsive<{
     backgroundColor: BackgroundColorString<'surface'> | 'transparent';
 }> & {
@@ -5707,6 +5707,14 @@ type PasswordInputPropsWithLabel = {
 type PasswordInputProps = (PasswordInputPropsWithA11yLabel | PasswordInputPropsWithLabel) & PasswordInputCommonProps;
 declare const PasswordInput: React__default.ForwardRefExoticComponent<PasswordInputProps & React__default.RefAttributes<BladeElementRef>>;
 
+type TaggedInputProps = {
+    isTaggedInput?: boolean;
+    tags?: string[];
+    onTagChange?: ({ tags }: {
+        tags: string[];
+    }) => void;
+};
+
 type TextAreaCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'onSubmit' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines' | 'testID' | 'size'> & {
     /**
      * Decides whether to render a clear icon button
@@ -5716,7 +5724,7 @@ type TextAreaCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' |
      * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
      */
     onClearButtonClick?: () => void;
-} & StyledPropsBlade;
+} & TaggedInputProps & StyledPropsBlade;
 type TextAreaPropsWithA11yLabel = {
     /**
      * Label to be shown for the input field
@@ -5773,7 +5781,7 @@ type TextInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel'
      * @default text
      */
     type?: Type;
-} & StyledPropsBlade;
+} & TaggedInputProps & StyledPropsBlade;
 type TextInputPropsWithA11yLabel = {
     /**
      * Label to be shown for the input field
@@ -6095,15 +6103,21 @@ type ProgressBarCommonProps = {
      * Sets the color of the progress bar which changes the feedback color.
      */
     color?: FeedbackColors;
+    /**
+     * Sets the type of the progress bar.
+     * @default 'progress'
+     */
+    type?: 'meter' | 'progress';
     /**
      * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.
      */
     label?: string;
     /**
      * Sets the size of the progress bar.
+     * Note: 'large' size isn't available when the variant is 'linear'.
      * @default 'small'
      */
-    size?: 'small' | 'medium';
+    size?: 'small' | 'medium' | 'large';
     /**
      * Sets the progress value of the progress bar.
      * @default 'small'
@@ -6120,13 +6134,13 @@ type ProgressBarCommonProps = {
      */
     max?: number;
 } & TestID & StyledPropsBlade;
-type ProgressBarVariant = 'progress' | 'meter';
+type ProgressBarVariant = 'progress' | 'meter' | 'linear' | 'circular';
 type ProgressBarProgressProps = ProgressBarCommonProps & {
     /**
      * Sets the variant to be rendered for the progress bar.
      * @default 'progress'
      */
-    variant?: Extract<ProgressBarVariant, 'progress'>;
+    variant?: Extract<ProgressBarVariant, 'progress' | 'linear' | 'circular'>;
     /**
      * Sets whether the progress bar is in an indeterminate state.
      * @default false
@@ -6143,7 +6157,7 @@ type ProgressBarMeterProps = ProgressBarCommonProps & {
      * Sets the variant to be rendered for thr progress bar.
      * @default 'progress'
      */
-    variant?: Extract<ProgressBarVariant, 'meter'>;
+    variant?: Extract<ProgressBarVariant, 'meter' | 'linear' | 'circular'>;
     /**
      * Sets whether the progress bar is in an indeterminate state.
      * @default false
@@ -6156,7 +6170,7 @@ type ProgressBarMeterProps = ProgressBarCommonProps & {
     showPercentage?: undefined;
 };
 type ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;
-declare const ProgressBar: ({ accessibilityLabel, color, isIndeterminate, label, showPercentage, size, value, variant, min, max, testID, ...styledProps }: ProgressBarProps) => ReactElement;
+declare const ProgressBar: ({ accessibilityLabel, color, type, isIndeterminate, label, showPercentage, size, value, variant, min, max, testID, ...styledProps }: ProgressBarProps) => ReactElement;
 
 type RadioProps = {
     /**

package/build/types/tokens/index.d.ts

@@ -737,6 +737,8 @@ declare const size: {
     readonly 5: 5;
     /** 6 px */
     readonly 6: 6;
+    /** 7 px */
+    readonly 7: 7;
     /** 8 px */
     readonly 8: 8;
     /** 10 px */
@@ -767,6 +769,8 @@ declare const size: {
     readonly 56: 56;
     /** 64 px */
     readonly 64: 64;
+    /** 72 px */
+    readonly 72: 72;
     /** 100 px */
     readonly 100: 100;
     /** 120 px */

package/build/types/tokens/index.native.d.ts

@@ -737,6 +737,8 @@ declare const size: {
     readonly 5: 5;
     /** 6 px */
     readonly 6: 6;
+    /** 7 px */
+    readonly 7: 7;
     /** 8 px */
     readonly 8: 8;
     /** 10 px */
@@ -767,6 +769,8 @@ declare const size: {
     readonly 56: 56;
     /** 64 px */
     readonly 64: 64;
+    /** 72 px */
+    readonly 72: 72;
     /** 100 px */
     readonly 100: 100;
     /** 120 px */

package/codemods/migrate-progressbar/transformers/__test__/migrate-progressbar.test.ts

@@ -0,0 +1,28 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate the ProgressBar component', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+          <ProgressBar value={20} label="Label" />
+          <ProgressBar variant="meter" value={20} label="Label" />
+          <ProgressBar variant="progress" value={20} label="Label" />
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+              <ProgressBar value={20} label="Label" type="progress" />
+              <ProgressBar type="meter" value={20} label="Label" />
+              <ProgressBar type="progress" value={20} label="Label" />
+            </>
+          );"
+  `);
+});

package/codemods/migrate-progressbar/transformers/index.ts

@@ -0,0 +1,89 @@
+import type { Transform } from 'jscodeshift';
+
+import { red, isExpression } from '../../brand-refresh/transformers/utils';
+
+const transformer: Transform = (file, api, options) => {
+  // Don't transform if the file doesn't import `@razorapy/blade/components` because it's not using Blade components
+  // Allow the migration test file to be transformed
+  if (!file.source.includes('@razorpay/blade/components') && file.path !== undefined) {
+    return file.source;
+  }
+
+  const j = api.jscodeshift;
+  const root = j.withParser('tsx')(file.source);
+
+  // Add type prop if variant prop is not defined
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'ProgressBar',
+          },
+        },
+      })
+      .replaceWith(({ node }) => {
+        const variantAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'variant',
+        );
+
+        if (!variantAttribute) {
+          node.openingElement.attributes?.push(
+            j.jsxAttribute(j.jsxIdentifier('type'), j.literal('progress')),
+          );
+        }
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while adding the "type" prop to the ProgressBar component.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Update the variant prop to type prop if defined
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'ProgressBar',
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'variant',
+        },
+      })
+      .replaceWith(({ node }) => {
+        if (isExpression(node)) {
+          console.warn(
+            red('\n⛔️ Expression found in the "variant" attribute, please update manually:'),
+            red(`${file.path}:${node.loc?.start.line}:${node.loc.start.column}\n`),
+          );
+          return node;
+        }
+
+        if (node.value?.value === 'progress' || node.value?.value === 'meter') {
+          node.name.name = 'type';
+        }
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the "variant" prop  of the ProgressBar component.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  return root.toSource(options.printOptions);
+};
+
+export default transformer;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "11.11.1",
+  "version": "11.13.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"