@razorpay/blade 6.3.0 → 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 */
 
@@ -736,193 +804,129 @@ type Easing = {
      *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
     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
  *
@@ -2648,10 +2731,14 @@ 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
      */
@@ -2675,7 +2762,7 @@ 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
      */
@@ -2730,10 +2817,10 @@ 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
      */
@@ -2743,7 +2830,7 @@ declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'n
      */
     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
      */
@@ -2754,7 +2841,7 @@ declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputP
     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
@@ -2797,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;
@@ -2833,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;
@@ -2854,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
@@ -2876,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 = {
     /**
@@ -2894,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;
 };
 
@@ -2918,7 +3005,7 @@ declare type ListCommonProps = {
      * @default 'medium'
      */
     size?: 'small' | 'medium';
-};
+} & TestID;
 declare type ListWithIconProps = ListCommonProps & {
     variant?: 'unordered';
     icon?: IconComponent;
@@ -2949,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;
 };
 
@@ -2964,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';
@@ -2973,7 +3060,7 @@ declare type HeadingCommonProps = {
     type?: TextTypes;
     contrast?: ColorContrastTypes;
     children: StringChildrenType;
-};
+} & TestID;
 declare type HeadingNormalVariant = HeadingCommonProps & {
     variant?: Exclude<HeadingVariant, 'subheading'>;
     /**
@@ -3000,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']>}`;
@@ -3031,7 +3118,7 @@ declare type BaseTextProps = {
      */
     numberOfLines?: number;
     componentName?: 'text' | 'title' | 'heading' | 'code';
-};
+} & TestID;
 
 declare type TextCommonProps = {
     type?: TextTypes;
@@ -3043,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'>;
@@ -3065,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;
@@ -3078,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.
  *
@@ -3105,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;
 };
 
@@ -3166,7 +3254,7 @@ declare type ProgressBarCommonProps = {
      * @default 100
      */
     max?: number;
-};
+} & TestID;
 declare type ProgressBarVariant = 'progress' | 'meter';
 declare type ProgressBarProgressProps = ProgressBarCommonProps & {
     /**
@@ -3203,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 = {
     /**
@@ -3231,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 = {
     /**
@@ -3307,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;
@@ -3340,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;
@@ -3352,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