@razorpay/blade 5.4.2 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @razorpay/blade
 
+## 5.5.0
+
+### Minor Changes
+
+- a094736: feat: expose `onFocus` on `TextInput` and `TextArea`
+- 2c2841a: added transaction icon
+- 46425d3: feat(blade): add ClockIcon
+- 1dd920e: feat(Icons): add BankIcon
+- 227be3d: added tag, shuffle, user, book, and settlements icons
+- e64d7cc: chore: design changes for Badge, Counter, Spinner
+
+### Patch Changes
+
+- ba16503: fix(blade): TextInput clear button state on initial render
+
+## 5.4.3
+
+### Patch Changes
+
+- e6c3ea9: fix(blade): restrict childrens in Card component
+
 ## 5.4.2
 
 ### Patch Changes

package/build/components/index.d.ts

@@ -1050,6 +1050,21 @@ declare type Theme = {
     typography: Typography;
 };
 
+declare const ComponentIds: {
+    CardHeader: string;
+    CardHeaderTrailing: string;
+    CardHeaderLeading: string;
+    CardFooter: string;
+    CardFooterTrailing: string;
+    CardFooterLeading: string;
+    CardBody: string;
+    CardHeaderIcon: string;
+    CardHeaderCounter: string;
+    CardHeaderBadge: string;
+    CardHeaderText: string;
+    CardHeaderLink: string;
+    CardHeaderIconButton: string;
+};
 declare type CardProps = {
     /**
      * Card contents
@@ -1069,13 +1084,13 @@ declare type CardProps = {
      * - Docs: https://blade.razorpay.com/?path=/docs/tokens-colors--page#-theme-tokens
      * - Figma: https://shorturl.at/fsvwK
      */
-    surfaceLevel: 2 | 3;
+    surfaceLevel?: 2 | 3;
 };
 declare const Card: ({ children, surfaceLevel }: CardProps) => React__default.ReactElement;
 declare type CardBodyProps = {
     children: React__default.ReactNode;
 };
-declare const CardBody: ({ children }: CardBodyProps) => React__default.ReactElement;
+declare const CardBody: WithComponentId<CardBodyProps>;
 
 declare type LinkCommonProps = {
     variant?: 'anchor' | 'button';
@@ -1203,7 +1218,7 @@ type TextVariant$1 = 'body' | 'caption';
 
 type TextBodyVariant$1 = TextCommonProps$1 & {
   variant?: Extract<TextVariant$1, 'body'>;
-  size?: 'small' | 'medium';
+  size?: 'xsmall' | 'small' | 'medium';
 };
 
 type TextCaptionVariant$1 = TextCommonProps$1 & {
@@ -1271,7 +1286,7 @@ declare const CardHeaderIconButton: WithComponentId<CardHeaderIconButtonProps>;
 declare type CardHeaderProps = {
     children?: React__default.ReactNode;
 };
-declare const CardHeader: ({ children }: CardHeaderProps) => React__default.ReactElement;
+declare const CardHeader: WithComponentId<CardHeaderProps>;
 declare type CardHeaderLeadingProps = {
     title: string;
     subtitle?: string;
@@ -1288,7 +1303,7 @@ declare type CardHeaderLeadingProps = {
      */
     suffix?: React__default.ReactNode;
 };
-declare const CardHeaderLeading: ({ title, subtitle, prefix, suffix, }: CardHeaderLeadingProps) => React__default.ReactElement;
+declare const CardHeaderLeading: WithComponentId<CardHeaderLeadingProps>;
 declare type CardHeaderTrailingProps = {
     /**
      * Renders a visual ornament in card header trailing section
@@ -1297,27 +1312,27 @@ declare type CardHeaderTrailingProps = {
      */
     visual?: React__default.ReactNode;
 };
-declare const CardHeaderTrailing: ({ visual }: CardHeaderTrailingProps) => React__default.ReactElement;
+declare const CardHeaderTrailing: WithComponentId<CardHeaderTrailingProps>;
 
 declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel' | 'isLoading' | 'isDisabled' | 'icon' | 'iconPosition' | 'onClick'> & {
     text: ButtonProps['children'];
 };
 declare type CardFooterProps = {
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 };
-declare const CardFooter: ({ children }: CardFooterProps) => React.ReactElement;
+declare const CardFooter: WithComponentId<CardFooterProps>;
 declare type CardFooterLeadingProps = {
     title?: string;
     subtitle?: string;
 };
-declare const CardFooterLeading: ({ title, subtitle }: CardFooterLeadingProps) => React.ReactElement;
+declare const CardFooterLeading: WithComponentId<CardFooterLeadingProps>;
 declare type CardFooterTrailingProps = {
     actions?: {
         primary?: CardFooterAction;
         secondary?: CardFooterAction;
     };
 };
-declare const CardFooterTrailing: ({ actions }: CardFooterTrailingProps) => React.ReactElement;
+declare const CardFooterTrailing: WithComponentId<CardFooterTrailingProps>;
 
 declare type IconButtonProps = {
     /**
@@ -1556,6 +1571,8 @@ declare const ChevronRightIcon: IconComponent;
 
 declare const ChevronUpIcon: IconComponent;
 
+declare const ClockIcon: IconComponent;
+
 declare const CloseIcon: IconComponent;
 
 declare const CreditCardIcon: IconComponent;
@@ -1594,6 +1611,8 @@ declare const SettingsIcon: IconComponent;
 
 declare const SlashIcon: IconComponent;
 
+declare const BankIcon: IconComponent;
+
 declare const TrashIcon: ({ size, color }: IconProps) => ReactElement;
 
 declare const AlertTriangleIcon$1: ({ size, color }: IconProps) => ReactElement;
@@ -1620,6 +1639,18 @@ declare const ExternalLinkIcon: IconComponent;
 
 declare const MailIcon: IconComponent;
 
+declare const BookIcon: IconComponent;
+
+declare const SettlementsIcon: IconComponent;
+
+declare const ShuffleIcon: IconComponent;
+
+declare const TagIcon: IconComponent;
+
+declare const UserIcon: IconComponent;
+
+declare const TransactionsIcon: IconComponent;
+
 declare type FeedbackIconColors = `feedback.icon.${DotNotationColorStringToken<Theme$1['colors']['feedback']['icon']>}`;
 declare type FeedbackActionIconColors = `feedback.${Feedback}.action.icon.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['icon']>}`;
 declare type ActionIconColors = `action.icon.${DotNotationColorStringToken<Theme$1['colors']['action']['icon']>}`;
@@ -1856,7 +1887,7 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
 };
 
 declare type Type = Exclude<BaseInputProps['type'], 'password'>;
-declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType'> & {
+declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType'> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -1880,7 +1911,7 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
      */
     type?: Type;
 };
-declare const TextInput: ({ label, labelPosition, placeholder, type, defaultValue, name, value, maxCharacters, onChange, onBlur, isDisabled, necessityIndicator, validationState, errorText, helpText, successText, isRequired, icon, prefix, showClearButton, onClearButtonClick, isLoading, suffix, autoFocus, keyboardReturnKeyType, autoCompleteSuggestionType, }: TextInputProps) => ReactElement;
+declare const TextInput: ({ label, labelPosition, placeholder, type, defaultValue, name, value, maxCharacters, onChange, onFocus, onBlur, isDisabled, necessityIndicator, validationState, errorText, helpText, successText, isRequired, icon, prefix, showClearButton, onClearButtonClick, isLoading, suffix, autoFocus, keyboardReturnKeyType, autoCompleteSuggestionType, }: TextInputProps) => ReactElement;
 
 declare type PasswordInputExtraProps = {
     /**
@@ -1915,7 +1946,7 @@ declare type PasswordInputExtraProps = {
 declare type PasswordInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType'> & PasswordInputExtraProps;
 declare const PasswordInput: ({ label, labelPosition, showRevealButton, maxCharacters, validationState, errorText, successText, helpText, isDisabled, defaultValue, placeholder, isRequired, necessityIndicator, value, onChange, onFocus, onBlur, name, autoFocus, keyboardReturnKeyType, autoCompleteSuggestionType, }: PasswordInputProps) => ReactElement;
 
-declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines'> & {
+declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines'> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -1925,7 +1956,7 @@ declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'n
      */
     onClearButtonClick?: () => void;
 };
-declare const TextArea: ({ label, labelPosition, necessityIndicator, errorText, helpText, successText, validationState, defaultValue, isDisabled, isRequired, name, onBlur, onChange, placeholder, value, maxCharacters, showClearButton, onClearButtonClick, autoFocus, numberOfLines, }: TextAreaProps) => React__default.ReactElement;
+declare const TextArea: ({ label, labelPosition, necessityIndicator, errorText, helpText, successText, validationState, defaultValue, isDisabled, isRequired, name, onChange, onFocus, onBlur, placeholder, value, maxCharacters, showClearButton, onClearButtonClick, autoFocus, numberOfLines, }: TextAreaProps) => React__default.ReactElement;
 
 declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'onChange' | 'value' | 'isDisabled' | 'autoFocus' | 'keyboardReturnKeyType' | 'keyboardType' | 'placeholder'> & {
     /**
@@ -2325,7 +2356,7 @@ declare type TextCommonProps = {
 declare type TextVariant = 'body' | 'caption';
 declare type TextBodyVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'body'>;
-    size?: 'small' | 'medium';
+    size?: 'xsmall' | 'small' | 'medium';
 };
 declare type TextCaptionVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'caption'>;
@@ -2393,4 +2424,4 @@ declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element
 
 declare const screenReaderStyles: CSSObject;
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, Indicator, IndicatorProps, InfoIcon, Link, LinkIcon, LinkProps, LockIcon, MailIcon, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SettingsIcon, SkipNavContent, SkipNavLink, SlashIcon, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, UsersIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BankIcon, BladeProvider, BladeProviderProps, BookIcon, Button, ButtonProps, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, CloseIcon, Code, CodeProps, ComponentIds, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, Indicator, IndicatorProps, InfoIcon, Link, LinkIcon, LinkProps, LockIcon, MailIcon, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SettingsIcon, SettlementsIcon, ShuffleIcon, SkipNavContent, SkipNavLink, SlashIcon, Spinner, SpinnerProps, TagIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, UserIcon, UsersIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };

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

@@ -1050,6 +1050,21 @@ declare type Theme = {
     typography: Typography;
 };
 
+declare const ComponentIds: {
+    CardHeader: string;
+    CardHeaderTrailing: string;
+    CardHeaderLeading: string;
+    CardFooter: string;
+    CardFooterTrailing: string;
+    CardFooterLeading: string;
+    CardBody: string;
+    CardHeaderIcon: string;
+    CardHeaderCounter: string;
+    CardHeaderBadge: string;
+    CardHeaderText: string;
+    CardHeaderLink: string;
+    CardHeaderIconButton: string;
+};
 declare type CardProps = {
     /**
      * Card contents
@@ -1069,13 +1084,13 @@ declare type CardProps = {
      * - Docs: https://blade.razorpay.com/?path=/docs/tokens-colors--page#-theme-tokens
      * - Figma: https://shorturl.at/fsvwK
      */
-    surfaceLevel: 2 | 3;
+    surfaceLevel?: 2 | 3;
 };
 declare const Card: ({ children, surfaceLevel }: CardProps) => React__default.ReactElement;
 declare type CardBodyProps = {
     children: React__default.ReactNode;
 };
-declare const CardBody: ({ children }: CardBodyProps) => React__default.ReactElement;
+declare const CardBody: WithComponentId<CardBodyProps>;
 
 declare type LinkCommonProps = {
     variant?: 'anchor' | 'button';
@@ -1203,7 +1218,7 @@ type TextVariant$1 = 'body' | 'caption';
 
 type TextBodyVariant$1 = TextCommonProps$1 & {
   variant?: Extract<TextVariant$1, 'body'>;
-  size?: 'small' | 'medium';
+  size?: 'xsmall' | 'small' | 'medium';
 };
 
 type TextCaptionVariant$1 = TextCommonProps$1 & {
@@ -1271,7 +1286,7 @@ declare const CardHeaderIconButton: WithComponentId<CardHeaderIconButtonProps>;
 declare type CardHeaderProps = {
     children?: React__default.ReactNode;
 };
-declare const CardHeader: ({ children }: CardHeaderProps) => React__default.ReactElement;
+declare const CardHeader: WithComponentId<CardHeaderProps>;
 declare type CardHeaderLeadingProps = {
     title: string;
     subtitle?: string;
@@ -1288,7 +1303,7 @@ declare type CardHeaderLeadingProps = {
      */
     suffix?: React__default.ReactNode;
 };
-declare const CardHeaderLeading: ({ title, subtitle, prefix, suffix, }: CardHeaderLeadingProps) => React__default.ReactElement;
+declare const CardHeaderLeading: WithComponentId<CardHeaderLeadingProps>;
 declare type CardHeaderTrailingProps = {
     /**
      * Renders a visual ornament in card header trailing section
@@ -1297,27 +1312,27 @@ declare type CardHeaderTrailingProps = {
      */
     visual?: React__default.ReactNode;
 };
-declare const CardHeaderTrailing: ({ visual }: CardHeaderTrailingProps) => React__default.ReactElement;
+declare const CardHeaderTrailing: WithComponentId<CardHeaderTrailingProps>;
 
 declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel' | 'isLoading' | 'isDisabled' | 'icon' | 'iconPosition' | 'onClick'> & {
     text: ButtonProps['children'];
 };
 declare type CardFooterProps = {
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 };
-declare const CardFooter: ({ children }: CardFooterProps) => React.ReactElement;
+declare const CardFooter: WithComponentId<CardFooterProps>;
 declare type CardFooterLeadingProps = {
     title?: string;
     subtitle?: string;
 };
-declare const CardFooterLeading: ({ title, subtitle }: CardFooterLeadingProps) => React.ReactElement;
+declare const CardFooterLeading: WithComponentId<CardFooterLeadingProps>;
 declare type CardFooterTrailingProps = {
     actions?: {
         primary?: CardFooterAction;
         secondary?: CardFooterAction;
     };
 };
-declare const CardFooterTrailing: ({ actions }: CardFooterTrailingProps) => React.ReactElement;
+declare const CardFooterTrailing: WithComponentId<CardFooterTrailingProps>;
 
 declare type IconButtonProps = {
     /**
@@ -1556,6 +1571,8 @@ declare const ChevronRightIcon: IconComponent;
 
 declare const ChevronUpIcon: IconComponent;
 
+declare const ClockIcon: IconComponent;
+
 declare const CloseIcon: IconComponent;
 
 declare const CreditCardIcon: IconComponent;
@@ -1594,6 +1611,8 @@ declare const SettingsIcon: IconComponent;
 
 declare const SlashIcon: IconComponent;
 
+declare const BankIcon: IconComponent;
+
 declare const TrashIcon: ({ size, color }: IconProps) => ReactElement;
 
 declare const AlertTriangleIcon$1: ({ size, color }: IconProps) => ReactElement;
@@ -1620,6 +1639,18 @@ declare const ExternalLinkIcon: IconComponent;
 
 declare const MailIcon: IconComponent;
 
+declare const BookIcon: IconComponent;
+
+declare const SettlementsIcon: IconComponent;
+
+declare const ShuffleIcon: IconComponent;
+
+declare const TagIcon: IconComponent;
+
+declare const UserIcon: IconComponent;
+
+declare const TransactionsIcon: IconComponent;
+
 declare type FeedbackIconColors = `feedback.icon.${DotNotationColorStringToken<Theme$1['colors']['feedback']['icon']>}`;
 declare type FeedbackActionIconColors = `feedback.${Feedback}.action.icon.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['icon']>}`;
 declare type ActionIconColors = `action.icon.${DotNotationColorStringToken<Theme$1['colors']['action']['icon']>}`;
@@ -1856,7 +1887,7 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
 };
 
 declare type Type = Exclude<BaseInputProps['type'], 'password'>;
-declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType'> & {
+declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType'> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -1880,7 +1911,7 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
      */
     type?: Type;
 };
-declare const TextInput: ({ label, labelPosition, placeholder, type, defaultValue, name, value, maxCharacters, onChange, onBlur, isDisabled, necessityIndicator, validationState, errorText, helpText, successText, isRequired, icon, prefix, showClearButton, onClearButtonClick, isLoading, suffix, autoFocus, keyboardReturnKeyType, autoCompleteSuggestionType, }: TextInputProps) => ReactElement;
+declare const TextInput: ({ label, labelPosition, placeholder, type, defaultValue, name, value, maxCharacters, onChange, onFocus, onBlur, isDisabled, necessityIndicator, validationState, errorText, helpText, successText, isRequired, icon, prefix, showClearButton, onClearButtonClick, isLoading, suffix, autoFocus, keyboardReturnKeyType, autoCompleteSuggestionType, }: TextInputProps) => ReactElement;
 
 declare type PasswordInputExtraProps = {
     /**
@@ -1915,7 +1946,7 @@ declare type PasswordInputExtraProps = {
 declare type PasswordInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType'> & PasswordInputExtraProps;
 declare const PasswordInput: ({ label, labelPosition, showRevealButton, maxCharacters, validationState, errorText, successText, helpText, isDisabled, defaultValue, placeholder, isRequired, necessityIndicator, value, onChange, onFocus, onBlur, name, autoFocus, keyboardReturnKeyType, autoCompleteSuggestionType, }: PasswordInputProps) => ReactElement;
 
-declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines'> & {
+declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines'> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -1925,7 +1956,7 @@ declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'n
      */
     onClearButtonClick?: () => void;
 };
-declare const TextArea: ({ label, labelPosition, necessityIndicator, errorText, helpText, successText, validationState, defaultValue, isDisabled, isRequired, name, onBlur, onChange, placeholder, value, maxCharacters, showClearButton, onClearButtonClick, autoFocus, numberOfLines, }: TextAreaProps) => React__default.ReactElement;
+declare const TextArea: ({ label, labelPosition, necessityIndicator, errorText, helpText, successText, validationState, defaultValue, isDisabled, isRequired, name, onChange, onFocus, onBlur, placeholder, value, maxCharacters, showClearButton, onClearButtonClick, autoFocus, numberOfLines, }: TextAreaProps) => React__default.ReactElement;
 
 declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'onChange' | 'value' | 'isDisabled' | 'autoFocus' | 'keyboardReturnKeyType' | 'keyboardType' | 'placeholder'> & {
     /**
@@ -2313,7 +2344,7 @@ declare type TextCommonProps = {
 declare type TextVariant = 'body' | 'caption';
 declare type TextBodyVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'body'>;
-    size?: 'small' | 'medium';
+    size?: 'xsmall' | 'small' | 'medium';
 };
 declare type TextCaptionVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'caption'>;
@@ -2381,4 +2412,4 @@ declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element
 
 declare const screenReaderStyles: CSSObject;
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, Indicator, IndicatorProps, InfoIcon, Link, LinkIcon, LinkProps, LockIcon, MailIcon, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SettingsIcon, SkipNavContent, SkipNavLink, SlashIcon, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, UsersIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BankIcon, BladeProvider, BladeProviderProps, BookIcon, Button, ButtonProps, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, CloseIcon, Code, CodeProps, ComponentIds, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, Indicator, IndicatorProps, InfoIcon, Link, LinkIcon, LinkProps, LockIcon, MailIcon, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SettingsIcon, SettlementsIcon, ShuffleIcon, SkipNavContent, SkipNavLink, SlashIcon, Spinner, SpinnerProps, TagIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, UserIcon, UsersIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };