@razorpay/blade 6.2.3 → 6.4.0

package/build/components/index.d.ts

@@ -4,59 +4,6 @@ import React__default, { ReactChild, ReactElement, ReactNode, SyntheticEvent, Ke
 import { AccessibilityRole, View, GestureResponderEvent } from 'react-native';
 import { CSSObject } from 'styled-components';
 
-declare type ActionListProps = {
-    children: React__default.ReactNode[];
-    /**
-     * Decides the backgroundColor of ActionList
-     */
-    surfaceLevel?: 2 | 3;
-};
-/**
- * ### ActionList
- *
- * List of multiple actionable items. Can be used as menu items inside `Dropdown`,
- * `BottomSheet` and as selectable items when combined with `SelectInput`
- *
- * #### Usage
- *
- * ```jsx
- * <Dropdown>
- *  <SelectInput label="Select Action" />
- *  <DropdownOverlay>
- *    <ActionList>
- *      <ActionListHeader
- *        title="Recent Searches"
- *        leading={<ActionListHeaderIcon icon={HistoryIcon} />}
- *      />
- *      <ActionListItem
- *        title="Home"
- *        value="home"
- *        leading={<ActionListItemIcon icon={HomeIcon} />}
- *      />
- *      <ActionListItem
- *        title="Pricing"
- *        value="pricing"
- *        leading={<ActionListItemAsset src="https://flagcdn.com/w20/in.png" alt="India Flag" />}
- *      />
- *      <ActionListHeader
- *        title="Search Tips"
- *        leading={<ActionListFooterIcon icon={SearchIcon} />}
- *        trailing={
- *          <Button
- *            onClick={() => console.log('clicked')}
- *          >
- *            Apply
- *          </Button>
- *        }
- *      />
- *    </ActionList>
- *  </DropdownOverlay>
- * </Dropdown>
- * ```
- *
- */
-declare const ActionList: ({ children, surfaceLevel }: ActionListProps) => JSX.Element;
-
 type BorderRadius = Readonly<{
   /** none: 0(px/rem/pt) */
   none: 0;
@@ -280,40 +227,161 @@ type Spacing = Readonly<{
   11: 56;
 }>;
 
-/**
- * @template TokenType token type generic
- * @description Tokenises objects to dot notation strings, eg: `surface.text.normal.lowContrast`
- */
-type DotNotationColorStringToken<TokenType> = {
-  [K in keyof TokenType]: `${Extract<K, number | string>}.${TokenType[K] extends Record<
-    string,
-    string
-  >
-    ? Extract<keyof TokenType[K], number | string>
-    : DotNotationColorStringToken<TokenType[K]>}`;
-}[keyof TokenType];
+type ColorSchemeNames = 'dark' | 'light';
+type ColorSchemeNamesInput = ColorSchemeNames | 'system';
 
-/**
- * Use this when you want children to be string.
- *
- * This covers scenarios like
- * ```jsx
- * <Title>Hi</Title>
- * <Title>{dynamicVariable} something</Title>
- * ```
- *
- *
- * ### Usage
- *
- * ```ts
- * import type { StringChildrenType } from '~helpers/types';
- *
- * type MyProps = {
- *  children: StringChildrenType;
- * }
- * ```
- */
-type StringChildrenType = React__default.ReactText | React__default.ReactText[];
+type ColorSchemeModes = 'onDark' | 'onLight';
+
+type ShadowLevels = 1 | 2 | 3 | 4 | 5;
+
+type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';
+
+type ColorContrastTypes = 'low' | 'high';
+
+type Shadows = {
+  offsetX: {
+    level: Record<ShadowLevels, number>;
+  };
+  offsetY: {
+    level: Record<ShadowLevels, number>;
+  };
+  blurRadius: {
+    level: Record<ShadowLevels, number>;
+  };
+  color: Record<
+    ColorSchemeModes,
+    {
+      level: Record<ShadowLevels, string>;
+    }
+  >;
+  androidElevation: {
+    level: Record<ShadowLevels, number>;
+  };
+};
+
+type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
+
+type ColorContrast = {
+  [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;
+};
+
+type ActionStates = {
+  default: string;
+  hover: string;
+  focus: string;
+  active: string;
+  disabled: string;
+};
+
+type LinkActionStates = ActionStates & {
+  visited: string;
+};
+
+type ActionStatesWithContrast = {
+  default: ColorContrast;
+  hover: ColorContrast;
+  focus: ColorContrast;
+  active: ColorContrast;
+  disabled: ColorContrast;
+};
+
+type ActionVariants = {
+  primary: ActionStates;
+  secondary: ActionStates;
+  tertiary: ActionStates;
+  link: LinkActionStates;
+};
+
+type ActionVariantsWithContrast = {
+  primary: ActionStatesWithContrast;
+  secondary: ActionStatesWithContrast;
+  tertiary: ActionStatesWithContrast;
+  link: ActionStatesWithContrast;
+};
+
+// export type ActionProperties = {
+//   background: ActionVariants;
+//   border: ActionVariants;
+//   text: ActionVariants;
+//   icon: ActionVariants;
+// };
+
+type FeedbackActions = {
+  background: Pick<ActionVariantsWithContrast, 'primary'>;
+  border: Pick<ActionVariantsWithContrast, 'primary'>;
+  text: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
+  icon: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
+};
+
+type Colors = {
+  brand: {
+    primary: Record<300 | 400 | 500 | 600 | 700 | 800, string>;
+    secondary: Record<500, string>;
+    gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', ColorContrast>;
+  };
+  feedback: {
+    background: Record<Feedback, ColorContrast>;
+    border: Record<Feedback, ColorContrast>;
+    text: Record<Feedback, ColorContrast>;
+    icon: Record<Feedback, ColorContrast>;
+    positive: {
+      action: FeedbackActions;
+    };
+    negative: {
+      action: FeedbackActions;
+    };
+    information: {
+      action: FeedbackActions;
+    };
+    notice: {
+      action: FeedbackActions;
+    };
+    neutral: {
+      action: FeedbackActions;
+    };
+  };
+  surface: {
+    background: Record<'level1' | 'level2' | 'level3', ColorContrast>;
+    border: Record<'normal' | 'subtle', ColorContrast>;
+    text: Record<TextTypes, ColorContrast>;
+    action: {
+      icon: ActionStatesWithContrast;
+    };
+  };
+  overlay: Record<'background', string>;
+  action: {
+    background: Omit<ActionVariants, 'link'>;
+    border: Omit<ActionVariants, 'link'>;
+    text: ActionVariants;
+    icon: ActionVariants;
+  };
+  badge: {
+    background: {
+      blue: ColorContrast;
+    };
+    border: {
+      blue: ColorContrast;
+    };
+    text: {
+      blue: ColorContrast;
+    };
+    icon: {
+      blue: ColorContrast;
+    };
+  };
+};
+
+type ColorsWithModes = Record<ColorSchemeModes, Colors>;
+
+type ThemeTokens = {
+  border: Border;
+  breakpoints: Breakpoints;
+  colors: ColorsWithModes;
+  motion: Motion;
+  spacing: Spacing;
+  shadows: Shadows;
+  typography: TypographyWithPlatforms;
+};
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
@@ -737,192 +805,128 @@ type Easing = {
     attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
     /** `cubic-bezier(0, 0, 0.2, 1)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
-    effective: EasingType<'cubic-bezier(0, 0, 0.2, 1)'>;
-    /** `cubic-bezier(0, 0, 0, 1)`
-     *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
-    revealing: EasingType<'cubic-bezier(0, 0, 0, 1)'>;
-  };
-  /** Easings for all exit animations*/
-  exit: {
-    /** `cubic-bezier(0.7, 0, 0.5, 1)`
-     *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
-    attentive: EasingType<'cubic-bezier(0.7, 0, 0.5, 1)'>;
-    /** `cubic-bezier(0.17, 0, 1, 1)`
-     *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
-    effective: EasingType<'cubic-bezier(0.17, 0, 1, 1)'>;
-    /** `cubic-bezier(0.5, 0, 1, 1)`
-     *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
-    revealing: EasingType<'cubic-bezier(0.5, 0, 1, 1)'>;
-  };
-};
-
-type Motion = Readonly<{
-  delay: Delay;
-  duration: Duration;
-  easing: Easing;
-}>;
-
-type ColorSchemeNames = 'dark' | 'light';
-type ColorSchemeNamesInput = ColorSchemeNames | 'system';
-
-type ColorSchemeModes = 'onDark' | 'onLight';
-
-type ShadowLevels = 1 | 2 | 3 | 4 | 5;
-
-type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';
-
-type ColorContrastTypes = 'low' | 'high';
-
-type Shadows = {
-  offsetX: {
-    level: Record<ShadowLevels, number>;
-  };
-  offsetY: {
-    level: Record<ShadowLevels, number>;
-  };
-  blurRadius: {
-    level: Record<ShadowLevels, number>;
-  };
-  color: Record<
-    ColorSchemeModes,
-    {
-      level: Record<ShadowLevels, string>;
-    }
-  >;
-  androidElevation: {
-    level: Record<ShadowLevels, number>;
-  };
-};
-
-type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
-
-type ColorContrast = {
-  [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;
-};
-
-type ActionStates = {
-  default: string;
-  hover: string;
-  focus: string;
-  active: string;
-  disabled: string;
-};
-
-type LinkActionStates = ActionStates & {
-  visited: string;
-};
-
-type ActionStatesWithContrast = {
-  default: ColorContrast;
-  hover: ColorContrast;
-  focus: ColorContrast;
-  active: ColorContrast;
-  disabled: ColorContrast;
-};
-
-type ActionVariants = {
-  primary: ActionStates;
-  secondary: ActionStates;
-  tertiary: ActionStates;
-  link: LinkActionStates;
-};
-
-type ActionVariantsWithContrast = {
-  primary: ActionStatesWithContrast;
-  secondary: ActionStatesWithContrast;
-  tertiary: ActionStatesWithContrast;
-  link: ActionStatesWithContrast;
-};
-
-// export type ActionProperties = {
-//   background: ActionVariants;
-//   border: ActionVariants;
-//   text: ActionVariants;
-//   icon: ActionVariants;
-// };
-
-type FeedbackActions = {
-  background: Pick<ActionVariantsWithContrast, 'primary'>;
-  border: Pick<ActionVariantsWithContrast, 'primary'>;
-  text: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
-  icon: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
-};
-
-type Colors = {
-  brand: {
-    primary: Record<300 | 400 | 500 | 600 | 700 | 800, string>;
-    secondary: Record<500, string>;
-    gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', ColorContrast>;
-  };
-  feedback: {
-    background: Record<Feedback, ColorContrast>;
-    border: Record<Feedback, ColorContrast>;
-    text: Record<Feedback, ColorContrast>;
-    icon: Record<Feedback, ColorContrast>;
-    positive: {
-      action: FeedbackActions;
-    };
-    negative: {
-      action: FeedbackActions;
-    };
-    information: {
-      action: FeedbackActions;
-    };
-    notice: {
-      action: FeedbackActions;
-    };
-    neutral: {
-      action: FeedbackActions;
-    };
-  };
-  surface: {
-    background: Record<'level1' | 'level2' | 'level3', ColorContrast>;
-    border: Record<'normal' | 'subtle', ColorContrast>;
-    text: Record<TextTypes, ColorContrast>;
-    action: {
-      icon: ActionStatesWithContrast;
-    };
-  };
-  overlay: Record<'background', string>;
-  action: {
-    background: Omit<ActionVariants, 'link'>;
-    border: Omit<ActionVariants, 'link'>;
-    text: ActionVariants;
-    icon: ActionVariants;
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    effective: EasingType<'cubic-bezier(0, 0, 0.2, 1)'>;
+    /** `cubic-bezier(0, 0, 0, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    revealing: EasingType<'cubic-bezier(0, 0, 0, 1)'>;
   };
-  badge: {
-    background: {
-      blue: ColorContrast;
-    };
-    border: {
-      blue: ColorContrast;
-    };
-    text: {
-      blue: ColorContrast;
-    };
-    icon: {
-      blue: ColorContrast;
-    };
+  /** Easings for all exit animations*/
+  exit: {
+    /** `cubic-bezier(0.7, 0, 0.5, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    attentive: EasingType<'cubic-bezier(0.7, 0, 0.5, 1)'>;
+    /** `cubic-bezier(0.17, 0, 1, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    effective: EasingType<'cubic-bezier(0.17, 0, 1, 1)'>;
+    /** `cubic-bezier(0.5, 0, 1, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    revealing: EasingType<'cubic-bezier(0.5, 0, 1, 1)'>;
   };
 };
 
-type ColorsWithModes = Record<ColorSchemeModes, Colors>;
+type Motion = Readonly<{
+  delay: Delay;
+  duration: Duration;
+  easing: Easing;
+}>;
 
-type ThemeTokens = {
-  border: Border;
-  breakpoints: Breakpoints;
-  colors: ColorsWithModes;
-  motion: Motion;
-  spacing: Spacing;
-  shadows: Shadows;
-  typography: TypographyWithPlatforms;
+/**
+ * @template TokenType token type generic
+ * @description Tokenises objects to dot notation strings, eg: `surface.text.normal.lowContrast`
+ */
+type DotNotationColorStringToken<TokenType> = {
+  [K in keyof TokenType]: `${Extract<K, number | string>}.${TokenType[K] extends Record<
+    string,
+    string
+  >
+    ? Extract<keyof TokenType[K], number | string>
+    : DotNotationColorStringToken<TokenType[K]>}`;
+}[keyof TokenType];
+
+/**
+ * Use this when you want children to be string.
+ *
+ * This covers scenarios like
+ * ```jsx
+ * <Title>Hi</Title>
+ * <Title>{dynamicVariable} something</Title>
+ * ```
+ *
+ *
+ * ### Usage
+ *
+ * ```ts
+ * import type { StringChildrenType } from '~helpers/types';
+ *
+ * type MyProps = {
+ *  children: StringChildrenType;
+ * }
+ * ```
+ */
+type StringChildrenType = React__default.ReactText | React__default.ReactText[];
+
+type TestID = {
+  testID?: string;
 };
 
+declare type ActionListProps = {
+    children: React__default.ReactNode[];
+    /**
+     * Decides the backgroundColor of ActionList
+     */
+    surfaceLevel?: 2 | 3;
+} & TestID;
+/**
+ * ### ActionList
+ *
+ * List of multiple actionable items. Can be used as menu items inside `Dropdown`,
+ * `BottomSheet` and as selectable items when combined with `SelectInput`
+ *
+ * #### Usage
+ *
+ * ```jsx
+ * <Dropdown>
+ *  <SelectInput label="Select Action" />
+ *  <DropdownOverlay>
+ *    <ActionList>
+ *      <ActionListHeader
+ *        title="Recent Searches"
+ *        leading={<ActionListHeaderIcon icon={HistoryIcon} />}
+ *      />
+ *      <ActionListItem
+ *        title="Home"
+ *        value="home"
+ *        leading={<ActionListItemIcon icon={HomeIcon} />}
+ *      />
+ *      <ActionListItem
+ *        title="Pricing"
+ *        value="pricing"
+ *        leading={<ActionListItemAsset src="https://flagcdn.com/w20/in.png" alt="India Flag" />}
+ *      />
+ *      <ActionListHeader
+ *        title="Search Tips"
+ *        leading={<ActionListFooterIcon icon={SearchIcon} />}
+ *        trailing={
+ *          <Button
+ *            onClick={() => console.log('clicked')}
+ *          >
+ *            Apply
+ *          </Button>
+ *        }
+ *      />
+ *    </ActionList>
+ *  </DropdownOverlay>
+ * </Dropdown>
+ * ```
+ *
+ */
+declare const ActionList: ({ children, surfaceLevel, testID }: ActionListProps) => JSX.Element;
+
 type Theme$1 = {
   border: Border;
   breakpoints: Breakpoints;
@@ -1019,7 +1023,7 @@ declare type ActionListItemProps = {
      * @private
      */
     _index?: number;
-};
+} & TestID;
 declare const ActionListSectionDivider: () => JSX.Element;
 declare type ActionListSectionProps = {
     title: string;
@@ -1032,7 +1036,7 @@ declare type ActionListSectionProps = {
      * @private
      */
     _hideDivider?: boolean;
-};
+} & TestID;
 declare const ActionListSection: WithComponentId<ActionListSectionProps>;
 declare const ActionListItemIcon: WithComponentId<{
     icon: IconComponent$1;
@@ -1068,7 +1072,7 @@ declare type ActionListHeaderProps = {
      * Valid children - `ActionListHeaderIcon`
      */
     leading?: React__default.ReactNode;
-};
+} & TestID;
 /**
  * ### ActionListHeader
  *
@@ -1107,7 +1111,7 @@ declare type ActionListFooterProps = {
      * Anything can be passed here but maybe don't? Should ideally have Button or Tick Icon Buttons.
      */
     trailing?: React__default.ReactNode;
-};
+} & TestID;
 /**
  * ### ActionListFooter
  *
@@ -1216,8 +1220,8 @@ declare type AlertProps = {
          */
         secondary?: SecondaryAction;
     };
-};
-declare const Alert: ({ description, title, isDismissible, onDismiss, contrast, isFullWidth, intent, actions, }: AlertProps) => ReactElement | null;
+} & TestID;
+declare const Alert: ({ description, title, isDismissible, onDismiss, contrast, isFullWidth, intent, actions, testID, }: AlertProps) => ReactElement | null;
 
 declare type BadgeProps = {
     /**
@@ -1255,8 +1259,8 @@ declare type BadgeProps = {
      * @default 'regular'
      */
     fontWeight?: 'regular' | 'bold';
-};
-declare const Badge: ({ children, contrast, fontWeight, icon, size, variant, }: BadgeProps) => ReactElement;
+} & TestID;
+declare const Badge: ({ children, contrast, fontWeight, icon, size, variant, testID, }: BadgeProps) => ReactElement;
 
 declare type BladeProviderProps = {
     themeTokens: ThemeTokens;
@@ -1328,11 +1332,11 @@ declare type CardProps = {
      * - Figma: https://shorturl.at/fsvwK
      */
     surfaceLevel?: 2 | 3;
-};
-declare const Card: ({ children, surfaceLevel }: CardProps) => React__default.ReactElement;
+} & TestID;
+declare const Card: ({ children, surfaceLevel, testID }: CardProps) => React__default.ReactElement;
 declare type CardBodyProps = {
     children: React__default.ReactNode;
-};
+} & TestID;
 declare const CardBody: WithComponentId<CardBodyProps>;
 
 declare type LinkCommonProps = {
@@ -1350,7 +1354,7 @@ declare type LinkCommonProps = {
      * @default medium
      */
     size?: 'small' | 'medium';
-};
+} & TestID;
 declare type LinkWithoutIconProps = LinkCommonProps & {
     icon?: undefined;
     children: StringChildrenType;
@@ -1375,7 +1379,7 @@ declare type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
     rel?: undefined;
 };
 declare type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
-declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, }: LinkProps) => ReactElement;
+declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, }: LinkProps) => ReactElement;
 
 type BladeElementRef = Pick<HTMLElement, 'focus' | 'scrollIntoView'> | Pick<View, 'focus'>;
 
@@ -1392,7 +1396,7 @@ declare type ButtonCommonProps = {
         native: (event: GestureResponderEvent) => void;
         web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
     }>;
-};
+} & TestID;
 declare type ButtonWithoutIconProps = ButtonCommonProps & {
     icon?: undefined;
     children: StringChildrenType;
@@ -1442,7 +1446,7 @@ type BaseTextProps$1 = {
    */
   numberOfLines?: number;
   componentName?: 'text' | 'title' | 'heading' | 'code';
-};
+} & TestID;
 
 /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
 
@@ -1457,7 +1461,8 @@ type TextCommonProps$1 = {
    * **For Internal use only**:  Sets the color of the Text component
    */
   color?: BaseTextProps$1['color'];
-};
+  textAlign?: BaseTextProps$1['textAlign'];
+} & TestID;
 
 type TextVariant$1 = 'body' | 'caption';
 
@@ -1513,7 +1518,7 @@ type CounterProps$1 = {
    * @default 'medium'
    */
   size?: 'small' | 'medium' | 'large';
-};
+} & TestID;
 
 declare const CardHeaderIcon: WithComponentId<{
     icon: IconComponent$1;
@@ -1530,7 +1535,7 @@ declare type CardHeaderIconButtonProps = Omit<ButtonProps, 'variant' | 'size' |
 declare const CardHeaderIconButton: WithComponentId<CardHeaderIconButtonProps>;
 declare type CardHeaderProps = {
     children?: React__default.ReactNode;
-};
+} & TestID;
 declare const CardHeader: WithComponentId<CardHeaderProps>;
 declare type CardHeaderLeadingProps = {
     title: string;
@@ -1564,7 +1569,7 @@ declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel'
 };
 declare type CardFooterProps = {
     children?: React__default.ReactNode;
-};
+} & TestID;
 declare const CardFooter: WithComponentId<CardFooterProps>;
 declare type CardFooterLeadingProps = {
     title?: string;
@@ -1636,8 +1641,8 @@ declare type CounterProps = {
      * @default 'medium'
      */
     size?: 'small' | 'medium' | 'large';
-};
-declare const Counter: ({ value, max, intent, contrast, size, }: CounterProps) => React.ReactElement;
+} & TestID;
+declare const Counter: ({ value, max, intent, contrast, size, testID, }: CounterProps) => React.ReactElement;
 
 declare type OnChange = ({ isChecked, event, value, }: {
     isChecked: boolean;
@@ -1722,8 +1727,86 @@ declare type CheckboxProps = {
      *
      */
     tabIndex?: number;
-};
-declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<BladeElementRef>>;
+} & TestID;
+declare const Checkbox: React__default.ForwardRefExoticComponent<{
+    /**
+     * If `true`, The checkbox will be checked. This also makes the checkbox controlled
+     * Use `onChange` to update its value
+     *
+     * @default false
+     */
+    isChecked?: boolean | undefined;
+    /**
+     * If `true`, the checkbox will be initially checked. This also makes the checkbox uncontrolled
+     *
+     * @default false
+     */
+    defaultChecked?: boolean | undefined;
+    /**
+     * The callback invoked when the checked state of the `Checkbox` changes.
+     */
+    onChange?: OnChange | undefined;
+    /**
+     * Sets the label of the checkbox
+     */
+    children: React__default.ReactNode;
+    /**
+     * Help text for the checkbox
+     */
+    helpText?: string | undefined;
+    /**
+     * Error text for the checkbox
+     *
+     * Renders when `validationState` is set to 'error'
+     */
+    errorText?: string | undefined;
+    /**
+     * If `true`, the checkbox will be indeterminate.
+     * This does not modify the isChecked property.
+     *
+     * @default false
+     */
+    isIndeterminate?: boolean | undefined;
+    /**
+     * The name of the input field in a checkbox
+     * (Useful for form submission).
+     */
+    name?: string | undefined;
+    /**
+     * The value to be used in the checkbox input.
+     * This is the value that will be returned on form submission.
+     */
+    value?: string | undefined;
+    /**
+     * If `true`, the checkbox will be disabled
+     *
+     * @default false
+     */
+    isDisabled?: boolean | undefined;
+    /**
+     * If `true`, the checkbox input is marked as required,
+     * and `required` attribute will be added
+     *
+     * @default false
+     */
+    isRequired?: boolean | undefined;
+    /**
+     * If `error`, the checkbox input is marked as invalid,
+     * and `invalid` attribute will be added
+     */
+    validationState?: "none" | "error" | undefined;
+    /**
+     * Size of the checkbox
+     *
+     * @default "medium"
+     */
+    size?: "small" | "medium" | undefined;
+    /**
+     * Sets the tab-index property on checkbox element
+     *
+     */
+    tabIndex?: number | undefined;
+} & TestID & React__default.RefAttributes<BladeElementRef>>;
 
 declare type CheckboxGroupProps = {
     /**
@@ -1798,8 +1881,8 @@ declare type CheckboxGroupProps = {
      * @default "medium"
      */
     size?: 'small' | 'medium';
-};
-declare const CheckboxGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, }: CheckboxGroupProps) => React__default.ReactElement;
+} & TestID;
+declare const CheckboxGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, }: CheckboxGroupProps) => React__default.ReactElement;
 
 declare type DropdownProps = {
     selectionType?: 'single' | 'multiple';
@@ -1835,7 +1918,7 @@ declare const Dropdown: WithComponentId<DropdownProps>;
 
 declare type DropdownOverlayProps = {
     children: React__default.ReactNode;
-};
+} & TestID;
 /**
  * Overlay of dropdown
  *
@@ -2383,6 +2466,8 @@ declare const SendIcon: IconComponent;
 
 declare const MailOpenIcon: IconComponent;
 
+declare const BulkPayoutsIcon: 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']>}`;
@@ -2646,16 +2731,20 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
      * true if popup is in expanded state
      */
     isPopupExpanded?: boolean;
-};
+    /**
+     * sets the autocapitalize behavior for the input
+     */
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+} & TestID;
 
 declare type Type = Exclude<BaseInputProps['type'], 'password'>;
-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'> & {
+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' | 'autoCapitalize' | 'testID'> & {
     /**
      * Decides whether to render a clear icon button
      */
     showClearButton?: boolean;
     /**
-     * Event handler to handle the onClick event for clear button.
+     * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
      */
     onClearButtonClick?: () => void;
     /**
@@ -2673,13 +2762,13 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
      */
     type?: Type;
 };
-declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "label" | "value" | "name" | "autoFocus" | "defaultValue" | "prefix" | "onFocus" | "onBlur" | "onChange" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
+declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "autoFocus" | "defaultValue" | "prefix" | "autoCapitalize" | "onFocus" | "onBlur" | "onChange" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
     /**
      * Decides whether to render a clear icon button
      */
     showClearButton?: boolean | undefined;
     /**
-     * Event handler to handle the onClick event for clear button.
+     * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
      */
     onClearButtonClick?: (() => void) | undefined;
     /**
@@ -2728,31 +2817,31 @@ declare type PasswordInputExtraProps = {
      */
     autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'password' | 'newPassword'>;
 };
-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: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "label" | "value" | "name" | "autoFocus" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "successText" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & React__default.RefAttributes<BladeElementRef>>;
+declare type PasswordInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID'> & PasswordInputExtraProps;
+declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "autoFocus" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "successText" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & React__default.RefAttributes<BladeElementRef>>;
 
-declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | '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' | 'testID'> & {
     /**
      * Decides whether to render a clear icon button
      */
     showClearButton?: boolean;
     /**
-     * Event handler to handle the onClick event for clear button.
+     * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
      */
     onClearButtonClick?: () => void;
 };
-declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "label" | "value" | "name" | "autoFocus" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "numberOfLines" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "maxCharacters"> & {
+declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "autoFocus" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "numberOfLines" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "maxCharacters"> & {
     /**
      * Decides whether to render a clear icon button
      */
     showClearButton?: boolean | undefined;
     /**
-     * Event handler to handle the onClick event for clear button.
+     * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
      */
     onClearButtonClick?: (() => void) | undefined;
 } & React__default.RefAttributes<BladeElementRef>>;
 
-declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'onChange' | 'value' | 'isDisabled' | 'autoFocus' | 'keyboardReturnKeyType' | 'keyboardType' | 'placeholder'> & {
+declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'onChange' | 'value' | 'isDisabled' | 'autoFocus' | 'keyboardReturnKeyType' | 'keyboardType' | 'placeholder' | 'testID'> & {
     /**
      * Determines the number of input fields to show for the OTP
      * @default 6
@@ -2795,9 +2884,9 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
  *   />
  * ```
  */
-declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, }: OTPInputProps) => React__default.ReactElement;
+declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, testID, }: OTPInputProps) => React__default.ReactElement;
 
-declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'autoFocus' | 'onClick' | 'onFocus' | 'onBlur' | 'placeholder'> & {
+declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'autoFocus' | 'onClick' | 'onFocus' | 'onBlur' | 'placeholder' | 'testID'> & {
     icon?: IconComponent$1;
     onChange?: ({ name, values }: {
         name?: string;
@@ -2831,7 +2920,7 @@ declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' |
  *
  * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select SelectInput Documentation}.
  */
-declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "label" | "name" | "autoFocus" | "prefix" | "onFocus" | "onBlur" | "onClick" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix"> & {
+declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "autoFocus" | "prefix" | "onFocus" | "onBlur" | "onClick" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix"> & {
     icon?: IconComponent$1 | undefined;
     onChange?: (({ name, values }: {
         name?: string | undefined;
@@ -2852,7 +2941,7 @@ declare type IndicatorCommonProps = {
      * @default medium
      */
     size?: 'small' | 'medium' | 'large';
-};
+} & TestID;
 declare type IndicatorWithoutA11yLabel = {
     /**
      * A text label to show alongside the indicator dot
@@ -2874,7 +2963,7 @@ declare type IndicatorWithA11yLabel = {
     children?: StringChildrenType;
 };
 declare type IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);
-declare const Indicator: ({ accessibilityLabel, children, size, intent, }: IndicatorProps) => ReactElement;
+declare const Indicator: ({ accessibilityLabel, children, size, intent, testID, }: IndicatorProps) => ReactElement;
 
 declare type ListItemProps = {
     /**
@@ -2892,9 +2981,9 @@ declare type ListItemProps = {
      *
      */
     _itemNumber?: undefined;
-};
+} & TestID;
 declare const ListItem: {
-    ({ children, icon, _itemNumber }: ListItemProps): React__default.ReactElement;
+    ({ children, icon, _itemNumber, testID, }: ListItemProps): React__default.ReactElement;
     componentId: string;
 };
 
@@ -2916,7 +3005,7 @@ declare type ListCommonProps = {
      * @default 'medium'
      */
     size?: 'small' | 'medium';
-};
+} & TestID;
 declare type ListWithIconProps = ListCommonProps & {
     variant?: 'unordered';
     icon?: IconComponent;
@@ -2947,13 +3036,13 @@ declare type ListProps = ListWithIconProps | ListWithoutIconProps;
  * ```
  */
 declare const List: {
-    ({ variant, size, children, icon }: ListProps): React__default.ReactElement;
+    ({ variant, size, children, icon, testID, }: ListProps): React__default.ReactElement;
     componentId: string;
 };
 
 declare type ListItemLinkProps = Exclude<LinkProps, 'size' | 'variant' | 'isDisabled'>;
 declare const ListItemLink: {
-    ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, }: ListItemLinkProps): React.ReactElement;
+    ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, testID, }: ListItemLinkProps): React.ReactElement;
     componentId: string;
 };
 
@@ -2962,8 +3051,8 @@ declare type TitleProps = {
     contrast?: ColorContrastTypes;
     type?: TextTypes;
     children: StringChildrenType;
-};
-declare const Title: ({ size, type, contrast, children, }: TitleProps) => ReactElement;
+} & TestID;
+declare const Title: ({ size, type, contrast, children, testID, }: TitleProps) => ReactElement;
 
 declare type HeadingVariant = 'regular' | 'subheading';
 declare type HeadingSize = 'small' | 'medium' | 'large';
@@ -2971,7 +3060,7 @@ declare type HeadingCommonProps = {
     type?: TextTypes;
     contrast?: ColorContrastTypes;
     children: StringChildrenType;
-};
+} & TestID;
 declare type HeadingNormalVariant = HeadingCommonProps & {
     variant?: Exclude<HeadingVariant, 'subheading'>;
     /**
@@ -2998,7 +3087,7 @@ declare type HeadingProps<T> = T extends {
 } ? Variant extends Exclude<HeadingVariant, 'subheading'> ? HeadingNormalVariant : Variant extends 'subheading' ? HeadingSubHeadingVariant : T : T;
 declare const Heading: <T extends {
     variant: HeadingVariant;
-}>({ variant, size, type, weight, contrast, children, }: HeadingProps<T>) => ReactElement;
+}>({ variant, size, type, weight, contrast, children, testID, }: HeadingProps<T>) => ReactElement;
 
 declare type FeedbackColors = `feedback.text.${DotNotationColorStringToken<Theme$1['colors']['feedback']['text']>}`;
 declare type FeedbackActionColors = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['text']>}`;
@@ -3029,7 +3118,7 @@ declare type BaseTextProps = {
      */
     numberOfLines?: number;
     componentName?: 'text' | 'title' | 'heading' | 'code';
-};
+} & TestID;
 
 declare type TextCommonProps = {
     type?: TextTypes;
@@ -3041,7 +3130,8 @@ declare type TextCommonProps = {
      * **For Internal use only**:  Sets the color of the Text component
      */
     color?: BaseTextProps['color'];
-};
+    textAlign?: BaseTextProps['textAlign'];
+} & TestID;
 declare type TextVariant = 'body' | 'caption';
 declare type TextBodyVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'body'>;
@@ -3063,10 +3153,10 @@ declare type TextForwardedAs = {
 };
 declare const getTextProps: <T extends {
     variant: TextVariant;
-}>({ variant, type, weight, size, contrast, }: Pick<TextProps<T>, "size" | "variant" | "type" | "weight" | "contrast">) => Omit<BaseTextProps, 'children'> & TextForwardedAs;
+}>({ variant, type, weight, size, contrast, testID, textAlign, }: Pick<TextProps<T>, "testID" | "size" | "variant" | "type" | "weight" | "textAlign" | "contrast">) => Omit<BaseTextProps, 'children'> & TextForwardedAs;
 declare const Text: <T extends {
     variant: TextVariant;
-}>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, }: TextProps<T>) => ReactElement;
+}>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, testID, textAlign, }: TextProps<T>) => ReactElement;
 
 declare type CodeProps = {
     children: StringChildrenType;
@@ -3076,7 +3166,7 @@ declare type CodeProps = {
      * @default small
      */
     size?: 'small' | 'medium';
-};
+} & TestID;
 /**
  * Code component can be used for displaying token, variable names, or inlined code snippets.
  *
@@ -3103,11 +3193,11 @@ declare type CodeProps = {
  * </BaseBox>
  * ```
  */
-declare const Code: ({ children, size }: CodeProps) => JSX.Element;
+declare const Code: ({ children, size, testID }: CodeProps) => JSX.Element;
 
 declare type ListItemCodeProps = Exclude<CodeProps, 'size'>;
 declare const ListItemCode: {
-    ({ children }: ListItemCodeProps): React.ReactElement;
+    ({ children, testID }: ListItemCodeProps): React.ReactElement;
     componentId: string;
 };
 
@@ -3164,7 +3254,7 @@ declare type ProgressBarCommonProps = {
      * @default 100
      */
     max?: number;
-};
+} & TestID;
 declare type ProgressBarVariant = 'progress' | 'meter';
 declare type ProgressBarProgressProps = ProgressBarCommonProps & {
     /**
@@ -3201,7 +3291,7 @@ declare type ProgressBarMeterProps = ProgressBarCommonProps & {
     showPercentage?: undefined;
 };
 declare type ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;
-declare const ProgressBar: ({ accessibilityLabel, contrast, intent, isIndeterminate, label, showPercentage, size, value, variant, min, max, }: ProgressBarProps) => ReactElement;
+declare const ProgressBar: ({ accessibilityLabel, contrast, intent, isIndeterminate, label, showPercentage, size, value, variant, min, max, testID, }: ProgressBarProps) => ReactElement;
 
 declare type RadioProps = {
     /**
@@ -3229,8 +3319,34 @@ declare type RadioProps = {
      * @default "medium"
      */
     size?: 'small' | 'medium';
-};
-declare const Radio: React__default.ForwardRefExoticComponent<RadioProps & React__default.RefAttributes<BladeElementRef>>;
+} & TestID;
+declare const Radio: React__default.ForwardRefExoticComponent<{
+    /**
+     * Sets the label text of the Radio
+     */
+    children: StringChildrenType;
+    /**
+     * Help text for the Radio
+     */
+    helpText?: string | undefined;
+    /**
+     * The value to be used in the Radio input.
+     * This is the value that will be returned on form submission.
+     */
+    value: string;
+    /**
+     * If `true`, the Radio will be disabled
+     *
+     * @default false
+     */
+    isDisabled?: boolean | undefined;
+    /**
+     * Size of the radios
+     *
+     * @default "medium"
+     */
+    size?: "small" | "medium" | undefined;
+} & TestID & React__default.RefAttributes<BladeElementRef>>;
 
 declare type RadioGroupProps = {
     /**
@@ -3305,8 +3421,8 @@ declare type RadioGroupProps = {
      * @default "medium"
      */
     size?: 'small' | 'medium';
-};
-declare const RadioGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, }: RadioGroupProps) => React__default.ReactElement;
+} & TestID;
+declare const RadioGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, }: RadioGroupProps) => React__default.ReactElement;
 
 declare type BaseSpinnerProps = {
     intent?: Feedback;
@@ -3338,10 +3454,10 @@ declare type BaseSpinnerProps = {
      *
      */
     accessibilityLabel: string;
-};
+} & TestID;
 
 declare type SpinnerProps = Omit<BaseSpinnerProps, 'intent'>;
-declare const Spinner: ({ label, labelPosition, accessibilityLabel, contrast, size, }: SpinnerProps) => React.ReactElement;
+declare const Spinner: ({ label, labelPosition, accessibilityLabel, contrast, size, testID, }: SpinnerProps) => React.ReactElement;
 
 declare type SkipNavLinkProps = {
     id?: string;
@@ -3350,14 +3466,14 @@ declare type SkipNavLinkProps = {
 declare const SkipNavLink: ({ id, children, }: SkipNavLinkProps) => JSX.Element;
 declare type SkipNavContentProps = {
     id?: string;
-};
-declare const SkipNavContent: ({ id }: SkipNavContentProps) => JSX.Element;
+} & TestID;
+declare const SkipNavContent: ({ id, testID, }: SkipNavContentProps) => JSX.Element;
 
 declare type VisuallyHiddenProps = {
     children: React.ReactNode;
-};
+} & TestID;
 
-declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element;
+declare const VisuallyHidden: ({ children, testID }: VisuallyHiddenProps) => JSX.Element;
 
 /**
  * Screen reader class adapted from webaim
@@ -3365,4 +3481,4 @@ declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element
  */
 declare const screenReaderStyles: CSSObject;
 
-export { ActionList, ActionListFooter, ActionListFooterIcon, ActionListFooterProps, ActionListHeader, ActionListHeaderIcon, ActionListHeaderProps, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionDivider, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, TabletIcon, TagIcon, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { ActionList, ActionListFooter, ActionListFooterIcon, ActionListFooterProps, ActionListHeader, ActionListHeaderIcon, ActionListHeaderProps, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionDivider, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, TabletIcon, TagIcon, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };