@razorpay/blade 6.3.0 → 6.5.0

package/build/components/index.d.ts

@@ -1,61 +1,10 @@
 /// <reference types="react" />
 import * as React$1 from 'react';
 import React__default, { ReactChild, ReactElement, ReactNode, SyntheticEvent, KeyboardEvent } from 'react';
-import { AccessibilityRole, View, GestureResponderEvent } from 'react-native';
+import * as styled_components from 'styled-components';
 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;
+import { AccessibilityRole, View, GestureResponderEvent } from 'react-native';
+import * as csstype from 'csstype';
 
 type BorderRadius = Readonly<{
   /** none: 0(px/rem/pt) */
@@ -87,18 +36,73 @@ type Border = Readonly<{
 }>;
 
 type Breakpoints = Readonly<{
-  /** max width: 320px  */
+  /**
+   * `base` is used for responsive styling following a **mobile first** approach. It starts from 0px till the next existing token
+   *
+   * Think of this as styles without any media query.
+   *
+   * ### Example
+   *
+   * This code will set margin as `spacing.2` on "m" size screens and above. And as `spacing.1` on less than "m" size screens
+   * ```jsx
+   * <Box margin={{ base: 'spacing.1', m: 'spacing.2' }} />
+   * ```
+   *
+   * This roughly translates into -
+   *
+   * ```
+   * .Box {
+   *  margin: 'spacing.1';
+   * }
+   *
+   * ＠media screen and (min-width: 768px) {
+   *  .Box {
+   *    margin: 'spacing.2';
+   *  }
+   * }
+   * ```
+   */
+  base: number;
+  /**
+   * `@media screen and (min-width: 320px)`
+   *
+   * Small Mobiles
+   */
   xs: number;
-  /** min width: 321px and max width: 480px */
+  /**
+   * `@media screen and (min-width: 480px)`
+   *
+   * Mobiles and Small Tablets
+   */
   s: number;
-  /** min width: 481px and max width: 768px */
+  /**
+   * `@media screen and (min-width: 768px)`
+   *
+   * Medium and Large Tablets.
+   *
+   * Dimensions with `m` and above can be treated as desktop in mobile-first approach (with min-width).
+   * Hence this breakpoint can be used for desktop styling.
+   *
+   * E.g. next example will keep flexDirection `row` on mobiles and `column` on large tablets, desktop, and larger screens
+   *
+   * ```jsx
+   * <Box display="flex" flexDirection={{ base: 'row', m: 'column' }} />
+   * ```
+   *
+   */
   m: number;
-  /** min width: 769 and max width: 1024px */
+  /**
+   * `@media screen and (min-width: 1024px)`
+   *
+   * Desktop
+   */
   l: number;
-  /** min width: 1025 and max width: 1200px */
+  /**
+   * `@media screen and (min-width: 1200px)`
+   *
+   * HD Desktop
+   */
   xl: number;
-  /** min width: 1201px  */
-  max: number;
 }>;
 
 type FontFamily = {
@@ -253,6 +257,12 @@ type TypographyPlatforms$1 = 'onDesktop' | 'onMobile';
 
 type TypographyWithPlatforms = Record<TypographyPlatforms$1, Typography>;
 
+/**
+ * When any of the values are changed here, do change the jsdoc comments in BaseBox/types/spacingTypes.ts as well
+ *
+ * {@link ../../components/Box/BaseBox/types/spacingTypes.ts}
+ */
+
 type Spacing = Readonly<{
   /** 0: 0(px/rem/pt) */
   0: 0;
@@ -280,40 +290,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 */
 
@@ -641,31 +772,31 @@ type AriaAttributes = {
  * Brands a type making them act as nominal
  * @see https://medium.com/@KevinBGreene/surviving-the-typescript-ecosystem-branding-and-type-tagging-6cf6e516523d
  */
-type Brand<Type, Name extends string> = Type & { __brand__?: Name };
+type Brand$1<Type, Name extends string> = Type & { __brand__?: Name };
 
-type NativeOrWebBrand = Brand<any, 'native' | 'web'>;
+type NativeOrWebBrand$1 = Brand$1<any, 'native' | 'web'>;
 
 /* eslint-disable @typescript-eslint/no-namespace */
 
 
-declare namespace Platform {
+declare namespace Platform$1 {
   export type Name = 'web';
   /**
    * Right now, the module resolution is set to resolve `.web` files,
    *
    * Thus Platform.Select<> type will return the `web` type
    */
-  export type Select<Options extends { web: unknown; native: unknown }> = Brand<
+  export type Select<Options extends { web: unknown; native: unknown }> = Brand$1<
     Options[Name],
     'platform-web'
   >;
 
-  export type CastNative<T extends NativeOrWebBrand | undefined> = Extract<
+  export type CastNative<T extends NativeOrWebBrand$1 | undefined> = Extract<
     T,
     { __brand__?: 'platform-native' | 'platform-all' }
   >;
 
-  export type CastWeb<T extends NativeOrWebBrand | undefined> = Extract<
+  export type CastWeb<T extends NativeOrWebBrand$1 | undefined> = Extract<
     T,
     { __brand__?: 'platform-web' | 'platform-all' }
   >;
@@ -704,7 +835,7 @@ type Delay = {
 };
 
 type EasingFunctionFactory = { factory: () => (value: number) => number }; // similar to EasingFunctionFactory of `react-native-reanimated`
-type EasingType<Value extends string> = Platform.Select<{
+type EasingType<Value extends string> = Platform$1.Select<{
   web: Value;
   native: EasingFunctionFactory;
 }>;
@@ -767,161 +898,99 @@ type Motion = Readonly<{
   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;
-};
+/**
+ * @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];
 
-// export type ActionProperties = {
-//   background: ActionVariants;
-//   border: ActionVariants;
-//   text: ActionVariants;
-//   icon: ActionVariants;
-// };
+type DotNotationSpacingStringToken = `spacing.${keyof Spacing}`;
 
-type FeedbackActions = {
-  background: Pick<ActionVariantsWithContrast, 'primary'>;
-  border: Pick<ActionVariantsWithContrast, 'primary'>;
-  text: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
-  icon: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
-};
+/**
+ * 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 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 TestID$1 = {
+  testID?: string;
 };
 
-type ColorsWithModes = Record<ColorSchemeModes, Colors>;
-
-type ThemeTokens = {
-  border: Border;
-  breakpoints: Breakpoints;
-  colors: ColorsWithModes;
-  motion: Motion;
-  spacing: Spacing;
-  shadows: Shadows;
-  typography: TypographyWithPlatforms;
-};
+declare type ActionListProps = {
+    children: React__default.ReactNode[];
+    /**
+     * Decides the backgroundColor of ActionList
+     */
+    surfaceLevel?: 2 | 3;
+} & TestID$1;
+/**
+ * ### 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;
@@ -937,6 +1006,362 @@ type Theme$1 = {
   typography: Typography;
 };
 
+/**
+ * Returns the value or the responsive object with that value
+ *
+ * ## Usage
+ *
+ * Example if you pass string argument, return type will be string or responsive object with string value
+ *
+ * `MakeValueResponsive<string>`
+ * ```ts
+ * string |
+ * {
+ *  base?: string;
+ *  xs?: string;
+ *  s?: string;
+ *  // ... other breakpoints
+ * }
+ * ```
+ *
+ */
+type MakeValueResponsive$1<T> =
+  | T
+  | {
+      // Using this instead of Record to maintain the jsdoc from breakpoints.ts
+      [P in keyof Breakpoints]?: T;
+    };
+
+/**
+ * Turns all the values in object into responsive object.
+ *
+ * ```ts
+ * MakeObjectResponsive<{ hello: string}>
+ *
+ * // Outputs:
+ * {
+ *  hello: string | {
+ *   base?: string;
+ *   xs?: string;
+ *   s?: string;
+ *   // ... other breakpoints
+ *  }
+ * }
+ * ```
+ */
+type MakeObjectResponsive$1<T> = { [P in keyof T]: MakeValueResponsive$1<T[P]> };
+
+type ArrayOfMaxLength4$1<T> = readonly [T?, T?, T?, T?];
+type SpaceUnits$1 = Platform$1.Select<{
+  web: 'px' | '%' | 'fr' | 'rem' | 'em' | 'vh' | 'vw';
+  native: 'px' | '%';
+}>;
+type SpacingValueType$1 = DotNotationSpacingStringToken | `${string}${SpaceUnits$1}` | 'auto';
+
+type MarginProps$1 = MakeObjectResponsive$1<{
+  /**
+   * ### Margin Shorthand
+   *
+   * #### Usage
+   *
+   * ```jsx
+   * margin="spacing.3"
+   * margin="20px"
+   * margin={["spacing.3", "spacing.1", "spacing.0", "10px"]}
+   * ```
+   *
+   * ---
+   * #### Spacing to Pixel values
+   *
+   * - `spacing.0` - 0px
+   * - `spacing.1` - 2px
+   * - `spacing.2` - 4px
+   * - `spacing.3` - 8px
+   * - `spacing.4` - 12px
+   * - `spacing.5` - 16px
+   * - `spacing.6` - 20px
+   * - `spacing.7` - 24px
+   * - `spacing.8` - 32px
+   * - `spacing.9` - 40px
+   * - `spacing.10` - 48px
+   * - `spacing.11` - 56px
+   *
+   * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+   *
+   */
+  margin: SpacingValueType$1 | ArrayOfMaxLength4$1<SpacingValueType$1>;
+  /**
+   * ### Margin Horizontal
+   *
+   * #### Usage
+   *
+   * ```jsx
+   * marginX="spacing.3"
+   * marginX="20px"
+   * ```
+   *
+   * ---
+   * #### Spacing to Pixel values
+   *
+   * - `spacing.0` - 0px
+   * - `spacing.1` - 2px
+   * - `spacing.2` - 4px
+   * - `spacing.3` - 8px
+   * - `spacing.4` - 12px
+   * - `spacing.5` - 16px
+   * - `spacing.6` - 20px
+   * - `spacing.7` - 24px
+   * - `spacing.8` - 32px
+   * - `spacing.9` - 40px
+   * - `spacing.10` - 48px
+   * - `spacing.11` - 56px
+   *
+   * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+   *
+   */
+  marginX: SpacingValueType$1;
+  /**
+   * ### Margin Vertical
+   *
+   * #### Usage
+   *
+   * ```jsx
+   * marginY="spacing.3"
+   * marginY="20px"
+   * ```
+   *
+   * ---
+   * #### Spacing to Pixel values
+   *
+   * - `spacing.0` - 0px
+   * - `spacing.1` - 2px
+   * - `spacing.2` - 4px
+   * - `spacing.3` - 8px
+   * - `spacing.4` - 12px
+   * - `spacing.5` - 16px
+   * - `spacing.6` - 20px
+   * - `spacing.7` - 24px
+   * - `spacing.8` - 32px
+   * - `spacing.9` - 40px
+   * - `spacing.10` - 48px
+   * - `spacing.11` - 56px
+   *
+   * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+   *
+   */
+  marginY: SpacingValueType$1;
+  /**
+   * ### Margin Top
+   *
+   * #### Usage
+   *
+   * ```jsx
+   * marginTop="spacing.3"
+   * marginTop="20px"
+   * ```
+   *
+   * ---
+   * #### Spacing to Pixel values
+   *
+   * - `spacing.0` - 0px
+   * - `spacing.1` - 2px
+   * - `spacing.2` - 4px
+   * - `spacing.3` - 8px
+   * - `spacing.4` - 12px
+   * - `spacing.5` - 16px
+   * - `spacing.6` - 20px
+   * - `spacing.7` - 24px
+   * - `spacing.8` - 32px
+   * - `spacing.9` - 40px
+   * - `spacing.10` - 48px
+   * - `spacing.11` - 56px
+   *
+   * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+   */
+  marginTop: SpacingValueType$1;
+  /**
+   * ### Margin Right
+   *
+   * #### Usage
+   *
+   * ```jsx
+   * marginRight="spacing.3"
+   * marginRight="20px"
+   * ```
+   *
+   * ---
+   * #### Spacing to Pixel values
+   *
+   * - `spacing.0` - 0px
+   * - `spacing.1` - 2px
+   * - `spacing.2` - 4px
+   * - `spacing.3` - 8px
+   * - `spacing.4` - 12px
+   * - `spacing.5` - 16px
+   * - `spacing.6` - 20px
+   * - `spacing.7` - 24px
+   * - `spacing.8` - 32px
+   * - `spacing.9` - 40px
+   * - `spacing.10` - 48px
+   * - `spacing.11` - 56px
+   *
+   * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+   */
+  marginRight: SpacingValueType$1;
+  /**
+   * ### Margin Bottom
+   *
+   * #### Usage
+   *
+   * ```jsx
+   * marginBottom="spacing.3"
+   * marginBottom="20px"
+   * ```
+   *
+   * ---
+   * #### Spacing to Pixel values
+   *
+   * - `spacing.0` - 0px
+   * - `spacing.1` - 2px
+   * - `spacing.2` - 4px
+   * - `spacing.3` - 8px
+   * - `spacing.4` - 12px
+   * - `spacing.5` - 16px
+   * - `spacing.6` - 20px
+   * - `spacing.7` - 24px
+   * - `spacing.8` - 32px
+   * - `spacing.9` - 40px
+   * - `spacing.10` - 48px
+   * - `spacing.11` - 56px
+   *
+   * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+   */
+  marginBottom: SpacingValueType$1;
+  /**
+   * ### Margin Left
+   *
+   * #### Usage
+   *
+   * ```jsx
+   * marginLeft="spacing.3"
+   * marginLeft="20px"
+   * ```
+   *
+   * ---
+   * #### Spacing to Pixel values
+   *
+   * - `spacing.0` - 0px
+   * - `spacing.1` - 2px
+   * - `spacing.2` - 4px
+   * - `spacing.3` - 8px
+   * - `spacing.4` - 12px
+   * - `spacing.5` - 16px
+   * - `spacing.6` - 20px
+   * - `spacing.7` - 24px
+   * - `spacing.8` - 32px
+   * - `spacing.9` - 40px
+   * - `spacing.10` - 48px
+   * - `spacing.11` - 56px
+   *
+   * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+   */
+  marginLeft: SpacingValueType$1;
+}>;
+
+type MakeObjectWebOnly$1<T> = {
+  [P in keyof T]: Platform$1.Select<{ web: T[P]; native: never }>;
+};
+
+type FlexboxProps$1 = MakeObjectResponsive$1<
+  {
+    /**
+     * This uses the native gap property which might not work on older browsers.
+     * If you want to support older browsers, you might want to use `margin` instead.
+     *
+     * @see https://caniuse.com/?search=gap
+     */
+    gap: SpacingValueType$1;
+    /**
+     * This uses the native row-gap property which might not work on older browsers.
+     * If you want to support older browsers, you might want to use `margin` instead.
+     *
+     * @see https://caniuse.com/?search=row-gap
+     */
+    rowGap: SpacingValueType$1;
+    /**
+     * This uses the native column-gap property which might not work on older browsers.
+     * If you want to support older browsers, you might want to use `margin` instead.
+     *
+     * @see https://caniuse.com/?search=column-gap
+     */
+    columnGap: SpacingValueType$1;
+  } & Pick<
+    CSSObject,
+    | 'flex'
+    | 'flexWrap'
+    | 'flexDirection'
+    | 'flexGrow'
+    | 'flexShrink'
+    | 'flexBasis'
+    | 'alignItems'
+    | 'alignContent'
+    | 'alignSelf'
+    | 'justifyItems'
+    | 'justifyContent'
+    | 'justifySelf'
+    | 'placeSelf'
+    | 'order'
+  >
+>;
+
+type PositionProps$1 = MakeObjectResponsive$1<
+  {
+    top: SpacingValueType$1;
+    right: SpacingValueType$1;
+    bottom: SpacingValueType$1;
+    left: SpacingValueType$1;
+  } & Pick<CSSObject, 'position' | 'zIndex'>
+>;
+
+type GridProps$1 = MakeObjectWebOnly$1<
+  MakeObjectResponsive$1<
+    Pick<
+      CSSObject,
+      | 'grid'
+      | 'gridColumn'
+      | 'gridRow'
+      | 'gridRowStart'
+      | 'gridRowEnd'
+      | 'gridColumnStart'
+      | 'gridColumnEnd'
+      | 'gridArea'
+      | 'gridAutoFlow'
+      | 'gridAutoRows'
+      | 'gridAutoColumns'
+      | 'gridTemplate'
+      | 'gridTemplateAreas'
+      | 'gridTemplateColumns'
+      | 'gridTemplateRows'
+    >
+  >
+>;
+
+type StyledPropsBlade = Partial<
+  MarginProps$1 &
+    Pick<FlexboxProps$1, 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order'> &
+    PositionProps$1 &
+    Pick<
+      GridProps$1,
+      | 'gridColumn'
+      | 'gridRow'
+      | 'gridRowStart'
+      | 'gridRowEnd'
+      | 'gridColumnStart'
+      | 'gridColumnEnd'
+      | 'gridArea'
+    >
+>;
+
 type FeedbackIconColors$1 = `feedback.icon.${DotNotationColorStringToken<
   Theme$1['colors']['feedback']['icon']
 >}`;
@@ -975,7 +1400,7 @@ type IconProps$1 = {
     | BadgeIconColors$1
     | 'currentColor'; // currentColor is useful for letting the SVG inherit color property from its container
   size: IconSize$1;
-};
+} & StyledPropsBlade;
 type IconComponent$1 = React.ComponentType<IconProps$1>;
 
 declare type ActionListItemProps = {
@@ -1019,7 +1444,7 @@ declare type ActionListItemProps = {
      * @private
      */
     _index?: number;
-};
+} & TestID$1;
 declare const ActionListSectionDivider: () => JSX.Element;
 declare type ActionListSectionProps = {
     title: string;
@@ -1032,7 +1457,7 @@ declare type ActionListSectionProps = {
      * @private
      */
     _hideDivider?: boolean;
-};
+} & TestID$1;
 declare const ActionListSection: WithComponentId<ActionListSectionProps>;
 declare const ActionListItemIcon: WithComponentId<{
     icon: IconComponent$1;
@@ -1068,7 +1493,7 @@ declare type ActionListHeaderProps = {
      * Valid children - `ActionListHeaderIcon`
      */
     leading?: React__default.ReactNode;
-};
+} & TestID$1;
 /**
  * ### ActionListHeader
  *
@@ -1107,7 +1532,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$1;
 /**
  * ### ActionListFooter
  *
@@ -1216,82 +1641,655 @@ declare type AlertProps = {
          */
         secondary?: SecondaryAction;
     };
-};
-declare const Alert: ({ description, title, isDismissible, onDismiss, contrast, isFullWidth, intent, actions, }: AlertProps) => ReactElement | null;
+} & TestID$1 & StyledPropsBlade;
+declare const Alert: ({ description, title, isDismissible, onDismiss, contrast, isFullWidth, intent, actions, testID, ...styledProps }: AlertProps) => ReactElement | null;
 
 declare type BadgeProps = {
     /**
-     * Sets the label for the badge.
+     * Sets the label for the badge.
+     *
+     */
+    children: StringChildrenType;
+    /**
+     * Sets the variant of the badge.
+     *
+     * @default 'neutral'
+     */
+    variant?: Feedback | 'blue';
+    /**
+     * Sets the contrast of the badge.
+     *
+     * @default 'low'
+     */
+    contrast?: 'low' | 'high';
+    /**
+     * Sets the size of the badge.
+     *
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Icon to be displayed in the badge.
+     * Accepts a component of type `IconComponent` from Blade.
+     *
+     */
+    icon?: IconComponent$1;
+    /**
+     * Sets the fontWeight of the label.
+     *
+     * @default 'regular'
+     */
+    fontWeight?: 'regular' | 'bold';
+} & TestID$1 & StyledPropsBlade;
+declare const Badge: ({ children, contrast, fontWeight, icon, size, variant, testID, ...styledProps }: BadgeProps) => ReactElement;
+
+declare type BladeProviderProps = {
+    themeTokens: ThemeTokens;
+    colorScheme?: ColorSchemeNamesInput;
+    children: ReactNode;
+};
+declare const BladeProvider: ({ themeTokens, colorScheme, children, }: BladeProviderProps) => ReactElement;
+
+declare type UseColorScheme = {
+    colorScheme: ColorSchemeNames;
+    setColorScheme: (colorScheme: ColorSchemeNamesInput) => void;
+};
+
+declare type TypographyPlatforms = 'onDesktop' | 'onMobile';
+
+declare type ThemeContext = UseColorScheme & {
+    theme: Theme;
+    platform: TypographyPlatforms;
+};
+declare const ThemeContext: React$1.Context<ThemeContext>;
+declare const useTheme: () => ThemeContext;
+
+declare type Theme = {
+    border: Border;
+    breakpoints: Breakpoints;
+    colors: Colors;
+    spacing: Spacing;
+    motion: Motion;
+    shadows: Omit<Shadows, 'color'> & {
+        color: {
+            level: Record<ShadowLevels, string>;
+        };
+    };
+    typography: Typography;
+};
+
+/**
+ * Returns the value or the responsive object with that value
+ *
+ * ## Usage
+ *
+ * Example if you pass string argument, return type will be string or responsive object with string value
+ *
+ * `MakeValueResponsive<string>`
+ * ```ts
+ * string |
+ * {
+ *  base?: string;
+ *  xs?: string;
+ *  s?: string;
+ *  // ... other breakpoints
+ * }
+ * ```
+ *
+ */
+declare type MakeValueResponsive<T> = T | {
+    [P in keyof Breakpoints]?: T;
+};
+/**
+ * Turns all the values in object into responsive object.
+ *
+ * ```ts
+ * MakeObjectResponsive<{ hello: string}>
+ *
+ * // Outputs:
+ * {
+ *  hello: string | {
+ *   base?: string;
+ *   xs?: string;
+ *   s?: string;
+ *   // ... other breakpoints
+ *  }
+ * }
+ * ```
+ */
+declare type MakeObjectResponsive<T> = {
+    [P in keyof T]: MakeValueResponsive<T[P]>;
+};
+
+declare type ArrayOfMaxLength4<T> = readonly [T?, T?, T?, T?];
+declare type SpaceUnits = Platform$1.Select<{
+    web: 'px' | '%' | 'fr' | 'rem' | 'em' | 'vh' | 'vw';
+    native: 'px' | '%';
+}>;
+declare type SpacingValueType = DotNotationSpacingStringToken | `${string}${SpaceUnits}` | 'auto';
+/**
+ * @IMPORTANT
+ *
+ * I wish there was better way to re-use jsdoc but I checked and there isn't so we have to explicitly add docs to each prop.
+ *
+ * When you want to change a specific token value, you can select the entire block of spacing value mapping and do find and replace on it
+ *
+ * Checkout example of find and replace query-
+ * {@link https://user-images.githubusercontent.com/30949385/221802507-40c7adbc-484a-47b3-9035-ae1e97080b51.png}
+ *
+ */
+declare type PaddingProps = MakeObjectResponsive<{
+    /**
+     * ### Padding Shorthand
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * padding="spacing.3"
+     * padding="20px"
+     * padding={["spacing.3", "spacing.1", "spacing.0", "10px"]}
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     *
+     */
+    padding: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    /**
+     * ### Padding Horizontal
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * paddingX="spacing.3"
+     * paddingX="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     *
+     */
+    paddingX: SpacingValueType;
+    /**
+     * ### Padding Vertical
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * paddingY="spacing.3"
+     * paddingY="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     *
+     */
+    paddingY: SpacingValueType;
+    /**
+     * ### Padding Top
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * paddingTop="spacing.3"
+     * paddingTop="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     */
+    paddingTop: SpacingValueType;
+    /**
+     * ### Padding Right
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * paddingRight="spacing.3"
+     * paddingRight="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     */
+    paddingRight: SpacingValueType;
+    /**
+     * ### Padding Bottom
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * paddingBottom="spacing.3"
+     * paddingBottom="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     */
+    paddingBottom: SpacingValueType;
+    /**
+     * ### Padding Left
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * paddingLeft="spacing.3"
+     * paddingLeft="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     */
+    paddingLeft: SpacingValueType;
+}>;
+declare type MarginProps = MakeObjectResponsive<{
+    /**
+     * ### Margin Shorthand
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * margin="spacing.3"
+     * margin="20px"
+     * margin={["spacing.3", "spacing.1", "spacing.0", "10px"]}
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     *
+     */
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    /**
+     * ### Margin Horizontal
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * marginX="spacing.3"
+     * marginX="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
      *
      */
-    children: StringChildrenType;
+    marginX: SpacingValueType;
     /**
-     * Sets the variant of the badge.
+     * ### Margin Vertical
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * marginY="spacing.3"
+     * marginY="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
      *
-     * @default 'neutral'
      */
-    variant?: Feedback | 'blue';
+    marginY: SpacingValueType;
     /**
-     * Sets the contrast of the badge.
+     * ### Margin Top
      *
-     * @default 'low'
+     * #### Usage
+     *
+     * ```jsx
+     * marginTop="spacing.3"
+     * marginTop="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
      */
-    contrast?: 'low' | 'high';
+    marginTop: SpacingValueType;
     /**
-     * Sets the size of the badge.
+     * ### Margin Right
      *
-     * @default 'medium'
+     * #### Usage
+     *
+     * ```jsx
+     * marginRight="spacing.3"
+     * marginRight="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
      */
-    size?: 'small' | 'medium' | 'large';
+    marginRight: SpacingValueType;
     /**
-     * Icon to be displayed in the badge.
-     * Accepts a component of type `IconComponent` from Blade.
+     * ### Margin Bottom
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * marginBottom="spacing.3"
+     * marginBottom="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
      *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
      */
-    icon?: IconComponent$1;
+    marginBottom: SpacingValueType;
     /**
-     * Sets the fontWeight of the label.
+     * ### Margin Left
      *
-     * @default 'regular'
+     * #### Usage
+     *
+     * ```jsx
+     * marginLeft="spacing.3"
+     * marginLeft="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
      */
-    fontWeight?: 'regular' | 'bold';
-};
-declare const Badge: ({ children, contrast, fontWeight, icon, size, variant, }: BadgeProps) => ReactElement;
+    marginLeft: SpacingValueType;
+}>;
 
-declare type BladeProviderProps = {
-    themeTokens: ThemeTokens;
-    colorScheme?: ColorSchemeNamesInput;
-    children: ReactNode;
+declare type MakeObjectWebOnly<T> = {
+    [P in keyof T]: Platform$1.Select<{
+        web: T[P];
+        native: never;
+    }>;
 };
-declare const BladeProvider: ({ themeTokens, colorScheme, children, }: BladeProviderProps) => ReactElement;
-
-declare type UseColorScheme = {
-    colorScheme: ColorSchemeNames;
-    setColorScheme: (colorScheme: ColorSchemeNamesInput) => void;
+declare type LayoutProps = MakeObjectResponsive<{
+    height: SpacingValueType;
+    minHeight: SpacingValueType;
+    maxHeight: SpacingValueType;
+    width: SpacingValueType;
+    minWidth: SpacingValueType;
+    maxWidth: SpacingValueType;
+} & Pick<CSSObject, 'display' | 'overflow' | 'overflowX' | 'overflowY'>>;
+declare type FlexboxProps = MakeObjectResponsive<{
+    /**
+     * This uses the native gap property which might not work on older browsers.
+     * If you want to support older browsers, you might want to use `margin` instead.
+     *
+     * @see https://caniuse.com/?search=gap
+     */
+    gap: SpacingValueType;
+    /**
+     * This uses the native row-gap property which might not work on older browsers.
+     * If you want to support older browsers, you might want to use `margin` instead.
+     *
+     * @see https://caniuse.com/?search=row-gap
+     */
+    rowGap: SpacingValueType;
+    /**
+     * This uses the native column-gap property which might not work on older browsers.
+     * If you want to support older browsers, you might want to use `margin` instead.
+     *
+     * @see https://caniuse.com/?search=column-gap
+     */
+    columnGap: SpacingValueType;
+} & Pick<CSSObject, 'flex' | 'flexWrap' | 'flexDirection' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'alignItems' | 'alignContent' | 'alignSelf' | 'justifyItems' | 'justifyContent' | 'justifySelf' | 'placeSelf' | 'order'>>;
+declare type PositionProps = MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & Pick<CSSObject, 'position' | 'zIndex'>>;
+declare type GridProps = MakeObjectWebOnly<MakeObjectResponsive<Pick<CSSObject, 'grid' | 'gridColumn' | 'gridRow' | 'gridRowStart' | 'gridRowEnd' | 'gridColumnStart' | 'gridColumnEnd' | 'gridArea' | 'gridAutoFlow' | 'gridAutoRows' | 'gridAutoColumns' | 'gridTemplate' | 'gridTemplateAreas' | 'gridTemplateColumns' | 'gridTemplateRows'>>>;
+declare type ColorObjects = 'feedback' | 'surface' | 'action';
+declare type BackgroundColorString<T extends ColorObjects> = `${T}.background.${DotNotationColorStringToken<Theme$1['colors'][T]['background']>}`;
+declare const validBoxAsValues: readonly ["div", "section", "footer", "header", "main", "aside", "nav", "span"];
+declare type BoxAsType = typeof validBoxAsValues[number];
+declare type BoxVisualProps = MakeObjectResponsive<{
+    backgroundColor: BackgroundColorString<'surface'>;
+}> & {
+    as: BoxAsType;
 };
+declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxVisualProps & {
+    children?: React.ReactNode | React.ReactNode[];
+} & TestID$1>;
 
-declare type TypographyPlatforms = 'onDesktop' | 'onMobile';
-
-declare type ThemeContext = UseColorScheme & {
-    theme: Theme;
-    platform: TypographyPlatforms;
-};
-declare const ThemeContext: React$1.Context<ThemeContext>;
-declare const useTheme: () => ThemeContext;
+/**
+ * ## Box
+ *
+ * Box is the basic Layout component.
+ *
+ *
+ * Box components supports most spacing CSS properties like `display`, `padding*`, `flex*`, `height`, `width`, etc.
+ *
+ *  Check out {@linkcode BoxProps BoxPropsType} for complete list of props and [Layout RFC](https://github.com/razorpay/blade/blob/master/rfcs/2023-01-06-layout.md) for more details on API decision.
+ *
+ * ----
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * <Box display="flex">
+ * ```
 
-declare type Theme = {
-    border: Border;
-    breakpoints: Breakpoints;
-    colors: Colors;
-    spacing: Spacing;
-    motion: Motion;
-    shadows: Omit<Shadows, 'color'> & {
-        color: {
-            level: Record<ShadowLevels, string>;
-        };
-    };
-    typography: Typography;
-};
+ * #### Responsive Props
+ *
+ * ```jsx
+ * <Box padding={{ base: 'spacing.3', m: 'spacing.10' }} />
+ * ```
+ *
+ * #### Margin and Padding Shorthands
+ *
+ * ```jsx
+ * <Box padding={["spacing.3", "spacing.10"]} />
+ * ```
+ *
+ * ---
+ *
+ * Checkout {@link https://blade.razorpay.com/?path=/docs/components-box Box Documentation}
+ *
+ */
+declare const Box: (props: BoxProps) => JSX.Element;
 
 declare const ComponentIds: {
     CardHeader: string;
@@ -1328,11 +2326,11 @@ declare type CardProps = {
      * - Figma: https://shorturl.at/fsvwK
      */
     surfaceLevel?: 2 | 3;
-};
-declare const Card: ({ children, surfaceLevel }: CardProps) => React__default.ReactElement;
+} & TestID$1 & StyledPropsBlade;
+declare const Card: ({ children, surfaceLevel, testID, ...styledProps }: CardProps) => React__default.ReactElement;
 declare type CardBodyProps = {
     children: React__default.ReactNode;
-};
+} & TestID$1;
 declare const CardBody: WithComponentId<CardBodyProps>;
 
 declare type LinkCommonProps = {
@@ -1350,7 +2348,7 @@ declare type LinkCommonProps = {
      * @default medium
      */
     size?: 'small' | 'medium';
-};
+} & TestID$1 & StyledPropsBlade;
 declare type LinkWithoutIconProps = LinkCommonProps & {
     icon?: undefined;
     children: StringChildrenType;
@@ -1375,7 +2373,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, ...styledProps }: LinkProps) => ReactElement;
 
 type BladeElementRef = Pick<HTMLElement, 'focus' | 'scrollIntoView'> | Pick<View, 'focus'>;
 
@@ -1388,11 +2386,11 @@ declare type ButtonCommonProps = {
     isLoading?: boolean;
     accessibilityLabel?: string;
     type?: 'button' | 'reset' | 'submit';
-    onClick?: Platform.Select<{
+    onClick?: Platform$1.Select<{
         native: (event: GestureResponderEvent) => void;
         web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
     }>;
-};
+} & TestID$1 & StyledPropsBlade;
 declare type ButtonWithoutIconProps = ButtonCommonProps & {
     icon?: undefined;
     children: StringChildrenType;
@@ -1442,7 +2440,8 @@ type BaseTextProps$1 = {
    */
   numberOfLines?: number;
   componentName?: 'text' | 'title' | 'heading' | 'code';
-};
+} & TestID$1 &
+  StyledPropsBlade;
 
 /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
 
@@ -1457,7 +2456,9 @@ type TextCommonProps$1 = {
    * **For Internal use only**:  Sets the color of the Text component
    */
   color?: BaseTextProps$1['color'];
-};
+  textAlign?: BaseTextProps$1['textAlign'];
+} & TestID$1 &
+  StyledPropsBlade;
 
 type TextVariant$1 = 'body' | 'caption';
 
@@ -1513,7 +2514,8 @@ type CounterProps$1 = {
    * @default 'medium'
    */
   size?: 'small' | 'medium' | 'large';
-};
+} & TestID$1 &
+  StyledPropsBlade;
 
 declare const CardHeaderIcon: WithComponentId<{
     icon: IconComponent$1;
@@ -1530,7 +2532,7 @@ declare type CardHeaderIconButtonProps = Omit<ButtonProps, 'variant' | 'size' |
 declare const CardHeaderIconButton: WithComponentId<CardHeaderIconButtonProps>;
 declare type CardHeaderProps = {
     children?: React__default.ReactNode;
-};
+} & TestID$1;
 declare const CardHeader: WithComponentId<CardHeaderProps>;
 declare type CardHeaderLeadingProps = {
     title: string;
@@ -1564,7 +2566,7 @@ declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel'
 };
 declare type CardFooterProps = {
     children?: React__default.ReactNode;
-};
+} & TestID$1;
 declare const CardFooter: WithComponentId<CardFooterProps>;
 declare type CardFooterLeadingProps = {
     title?: string;
@@ -1636,8 +2638,36 @@ declare type CounterProps = {
      * @default 'medium'
      */
     size?: 'small' | 'medium' | 'large';
+} & TestID$1 & StyledPropsBlade;
+declare const Counter: ({ value, max, intent, contrast, size, testID, ...styledProps }: CounterProps) => React.ReactElement;
+
+/**
+ * Brands a type making them act as nominal
+ * @see https://medium.com/@KevinBGreene/surviving-the-typescript-ecosystem-branding-and-type-tagging-6cf6e516523d
+ */
+declare type Brand<Type, Name extends string> = Type & {
+    __brand__?: Name;
 };
-declare const Counter: ({ value, max, intent, contrast, size, }: CounterProps) => React.ReactElement;
+declare type NativeOrWebBrand = Brand<any, 'native' | 'web'>;
+
+declare namespace Platform {
+    type Name = 'web';
+    /**
+     * Right now, the module resolution is set to resolve `.web` files,
+     *
+     * Thus Platform.Select<> type will return the `web` type
+     */
+    type Select<Options extends {
+        web: unknown;
+        native: unknown;
+    }> = Brand<Options[Name], 'platform-web'>;
+    type CastNative<T extends NativeOrWebBrand | undefined> = Extract<T, {
+        __brand__?: 'platform-native' | 'platform-all';
+    }>;
+    type CastWeb<T extends NativeOrWebBrand | undefined> = Extract<T, {
+        __brand__?: 'platform-web' | 'platform-all';
+    }>;
+}
 
 declare type OnChange = ({ isChecked, event, value, }: {
     isChecked: boolean;
@@ -1722,8 +2752,164 @@ declare type CheckboxProps = {
      *
      */
     tabIndex?: number;
-};
-declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<BladeElementRef>>;
+} & TestID$1 & StyledPropsBlade;
+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$1 & Partial<MakeObjectResponsive<{
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    marginX: SpacingValueType;
+    marginY: SpacingValueType;
+    marginTop: SpacingValueType;
+    marginRight: SpacingValueType;
+    marginBottom: SpacingValueType;
+    marginLeft: SpacingValueType;
+}> & Pick<MakeObjectResponsive<{
+    gap: SpacingValueType;
+    rowGap: SpacingValueType;
+    columnGap: SpacingValueType;
+} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & Pick<styled_components.CSSObject, "position" | "zIndex">> & Pick<{
+    grid?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.Grid | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoColumns?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoColumns<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoFlow?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoFlow | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoRows?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoRows<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumnEnd?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumnEnd | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumnStart?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumnStart | undefined>;
+        native: never;
+    }> | undefined;
+    gridRowEnd?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRowEnd | undefined>;
+        native: never;
+    }> | undefined;
+    gridRowStart?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRowStart | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateAreas?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateAreas | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateColumns?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateColumns<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateRows?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateRows<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridArea?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridArea | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumn?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumn | undefined>;
+        native: never;
+    }> | undefined;
+    gridRow?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRow | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplate?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplate | undefined>;
+        native: never;
+    }> | undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
 
 declare type CheckboxGroupProps = {
     /**
@@ -1798,13 +2984,13 @@ 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$1 & StyledPropsBlade;
+declare const CheckboxGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: CheckboxGroupProps) => React__default.ReactElement;
 
 declare type DropdownProps = {
     selectionType?: 'single' | 'multiple';
     children: React__default.ReactNode[];
-};
+} & StyledPropsBlade;
 /**
  * ### Dropdown component
  *
@@ -1835,7 +3021,7 @@ declare const Dropdown: WithComponentId<DropdownProps>;
 
 declare type DropdownOverlayProps = {
     children: React__default.ReactNode;
-};
+} & TestID$1;
 /**
  * Overlay of dropdown
  *
@@ -1853,9 +3039,9 @@ declare const ArrowUpRightIcon: IconComponent;
 
 declare const ArrowUpIcon: IconComponent;
 
-declare const Attachment: ({ size, color }: IconProps) => ReactElement;
+declare const Attachment: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
-declare const CheckIcon: ({ size, color }: IconProps) => ReactElement;
+declare const CheckIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
 declare const ChevronDownIcon: IconComponent;
 
@@ -1871,9 +3057,9 @@ declare const CreditCardIcon: IconComponent;
 
 declare const DollarIcon: IconComponent;
 
-declare const DownloadIcon: ({ size, color }: IconProps) => ReactElement;
+declare const DownloadIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
-declare const EditIcon: ({ size, color }: IconProps) => ReactElement;
+declare const EditIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
 declare const EyeIcon: IconComponent;
 
@@ -1881,19 +3067,19 @@ declare const EyeOffIcon: IconComponent;
 
 declare const FileTextIcon: IconComponent;
 
-declare const HistoryIcon: ({ size, color }: IconProps) => ReactElement;
+declare const HistoryIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
 declare const HomeIcon: IconComponent;
 
-declare const InfoIcon: ({ size, color }: IconProps) => ReactElement;
+declare const InfoIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
 declare const LinkIcon: IconComponent;
 
 declare const LockIcon: IconComponent;
 
-declare const PauseIcon: ({ size, color }: IconProps) => ReactElement;
+declare const PauseIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
-declare const PlusIcon: ({ size, color }: IconProps) => ReactElement;
+declare const PlusIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
 declare const RupeeIcon: IconComponent;
 
@@ -1905,15 +3091,15 @@ declare const SlashIcon: IconComponent;
 
 declare const BankIcon: IconComponent;
 
-declare const TrashIcon: ({ size, color }: IconProps) => ReactElement;
+declare const TrashIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
-declare const AlertTriangleIcon$1: ({ size, color }: IconProps) => ReactElement;
+declare const AlertTriangleIcon$1: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
-declare const AlertTriangleIcon: ({ size, color }: IconProps) => ReactElement;
+declare const AlertTriangleIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
-declare const CheckCircleIcon: ({ size, color }: IconProps) => ReactElement;
+declare const CheckCircleIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
-declare const MinusIcon: ({ size, color }: IconProps) => ReactElement;
+declare const MinusIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
 declare const TrendingUpIcon: IconComponent;
 
@@ -2398,7 +3584,7 @@ declare type IconProps = {
      */
     color: ActionIconColors | SurfaceActionIconColors | FeedbackIconColors | FeedbackActionIconColors | TextIconColors | BadgeIconColors | 'currentColor';
     size: IconSize;
-};
+} & StyledPropsBlade;
 declare type IconComponent = React.ComponentType<IconProps>;
 
 declare type FormInputLabelProps = {
@@ -2648,10 +3834,27 @@ 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$1 & Platform$1.Select<{
+    native: {
+        /**
+         * The callback function to be invoked when the value of the input field is submitted.
+         */
+        onSubmit?: FormInputOnEvent;
+    };
+    web: {
+        /**
+         * This is a react-native only prop and has no effect on web.
+         */
+        onSubmit?: undefined;
+    };
+}> & StyledPropsBlade;
 
 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' | 'onSubmit' | 'autoCapitalize' | 'testID'> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -2674,8 +3877,8 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
      * @default text
      */
     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"> & {
+} & StyledPropsBlade;
+declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "defaultValue" | "prefix" | "autoCapitalize" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -2698,7 +3901,85 @@ declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInput
      * @default text
      */
     type?: Type;
-} & React__default.RefAttributes<BladeElementRef>>;
+} & Partial<MakeObjectResponsive<{
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    marginX: SpacingValueType;
+    marginY: SpacingValueType;
+    marginTop: SpacingValueType;
+    marginRight: SpacingValueType;
+    marginBottom: SpacingValueType;
+    marginLeft: SpacingValueType;
+}> & Pick<MakeObjectResponsive<{
+    gap: SpacingValueType;
+    rowGap: SpacingValueType;
+    columnGap: SpacingValueType;
+} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & Pick<styled_components.CSSObject, "position" | "zIndex">> & Pick<{
+    grid?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.Grid | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoColumns?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoColumns<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoFlow?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoFlow | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoRows?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoRows<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumnEnd?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumnEnd | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumnStart?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumnStart | undefined>;
+        native: never;
+    }> | undefined;
+    gridRowEnd?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRowEnd | undefined>;
+        native: never;
+    }> | undefined;
+    gridRowStart?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRowStart | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateAreas?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateAreas | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateColumns?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateColumns<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateRows?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateRows<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridArea?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridArea | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumn?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumn | undefined>;
+        native: never;
+    }> | undefined;
+    gridRow?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRow | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplate?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplate | undefined>;
+        native: never;
+    }> | undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
 
 declare type PasswordInputExtraProps = {
     /**
@@ -2730,10 +4011,88 @@ 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 TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines'> & {
+declare type PasswordInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onSubmit' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID'> & PasswordInputExtraProps & StyledPropsBlade;
+declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "defaultValue" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "successText" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<MakeObjectResponsive<{
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    marginX: SpacingValueType;
+    marginY: SpacingValueType;
+    marginTop: SpacingValueType;
+    marginRight: SpacingValueType;
+    marginBottom: SpacingValueType;
+    marginLeft: SpacingValueType;
+}> & Pick<MakeObjectResponsive<{
+    gap: SpacingValueType;
+    rowGap: SpacingValueType;
+    columnGap: SpacingValueType;
+} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & Pick<styled_components.CSSObject, "position" | "zIndex">> & Pick<{
+    grid?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.Grid | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoColumns?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoColumns<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoFlow?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoFlow | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoRows?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoRows<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumnEnd?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumnEnd | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumnStart?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumnStart | undefined>;
+        native: never;
+    }> | undefined;
+    gridRowEnd?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRowEnd | undefined>;
+        native: never;
+    }> | undefined;
+    gridRowStart?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRowStart | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateAreas?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateAreas | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateColumns?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateColumns<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateRows?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateRows<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridArea?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridArea | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumn?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumn | undefined>;
+        native: never;
+    }> | undefined;
+    gridRow?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRow | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplate?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplate | undefined>;
+        native: never;
+    }> | undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
+
+declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'onSubmit' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines' | 'testID'> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -2742,8 +4101,8 @@ declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'n
      * 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"> & {
+} & StyledPropsBlade;
+declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "defaultValue" | "numberOfLines" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "maxCharacters"> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -2752,9 +4111,87 @@ declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputP
      * 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'> & {
+} & Partial<MakeObjectResponsive<{
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    marginX: SpacingValueType;
+    marginY: SpacingValueType;
+    marginTop: SpacingValueType;
+    marginRight: SpacingValueType;
+    marginBottom: SpacingValueType;
+    marginLeft: SpacingValueType;
+}> & Pick<MakeObjectResponsive<{
+    gap: SpacingValueType;
+    rowGap: SpacingValueType;
+    columnGap: SpacingValueType;
+} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & Pick<styled_components.CSSObject, "position" | "zIndex">> & Pick<{
+    grid?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.Grid | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoColumns?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoColumns<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoFlow?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoFlow | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoRows?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoRows<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumnEnd?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumnEnd | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumnStart?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumnStart | undefined>;
+        native: never;
+    }> | undefined;
+    gridRowEnd?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRowEnd | undefined>;
+        native: never;
+    }> | undefined;
+    gridRowStart?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRowStart | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateAreas?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateAreas | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateColumns?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateColumns<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateRows?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateRows<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridArea?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridArea | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumn?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumn | undefined>;
+        native: never;
+    }> | undefined;
+    gridRow?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRow | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplate?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplate | undefined>;
+        native: never;
+    }> | undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
+
+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
@@ -2782,7 +4219,7 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
      *
      */
     autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'oneTimeCode'>;
-};
+} & StyledPropsBlade;
 /**
  * OTPInput component can be used for accepting OTPs sent to users for authentication/verification purposes.
  *
@@ -2797,9 +4234,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, ...styledProps }: 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 +4270,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" | "onFocus" | "onBlur" | "onClick" | "autoFocus" | "prefix" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix"> & {
     icon?: IconComponent$1 | undefined;
     onChange?: (({ name, values }: {
         name?: string | undefined;
@@ -2854,7 +4291,7 @@ declare type IndicatorCommonProps = {
      * @default medium
      */
     size?: 'small' | 'medium' | 'large';
-};
+} & TestID$1 & StyledPropsBlade;
 declare type IndicatorWithoutA11yLabel = {
     /**
      * A text label to show alongside the indicator dot
@@ -2876,7 +4313,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, ...styledProps }: IndicatorProps) => ReactElement;
 
 declare type ListItemProps = {
     /**
@@ -2894,9 +4331,9 @@ declare type ListItemProps = {
      *
      */
     _itemNumber?: undefined;
-};
+} & TestID$1;
 declare const ListItem: {
-    ({ children, icon, _itemNumber }: ListItemProps): React__default.ReactElement;
+    ({ children, icon, _itemNumber, testID, }: ListItemProps): React__default.ReactElement;
     componentId: string;
 };
 
@@ -2918,7 +4355,7 @@ declare type ListCommonProps = {
      * @default 'medium'
      */
     size?: 'small' | 'medium';
-};
+} & TestID$1 & StyledPropsBlade;
 declare type ListWithIconProps = ListCommonProps & {
     variant?: 'unordered';
     icon?: IconComponent;
@@ -2949,13 +4386,13 @@ declare type ListProps = ListWithIconProps | ListWithoutIconProps;
  * ```
  */
 declare const List: {
-    ({ variant, size, children, icon }: ListProps): React__default.ReactElement;
+    ({ variant, size, children, icon, testID, ...styledProps }: 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 +4401,8 @@ declare type TitleProps = {
     contrast?: ColorContrastTypes;
     type?: TextTypes;
     children: StringChildrenType;
-};
-declare const Title: ({ size, type, contrast, children, }: TitleProps) => ReactElement;
+} & TestID$1 & StyledPropsBlade;
+declare const Title: ({ size, type, contrast, children, testID, ...styledProps }: TitleProps) => ReactElement;
 
 declare type HeadingVariant = 'regular' | 'subheading';
 declare type HeadingSize = 'small' | 'medium' | 'large';
@@ -2973,7 +4410,7 @@ declare type HeadingCommonProps = {
     type?: TextTypes;
     contrast?: ColorContrastTypes;
     children: StringChildrenType;
-};
+} & TestID$1 & StyledPropsBlade;
 declare type HeadingNormalVariant = HeadingCommonProps & {
     variant?: Exclude<HeadingVariant, 'subheading'>;
     /**
@@ -3000,7 +4437,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, ...styledProps }: 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 +4468,7 @@ declare type BaseTextProps = {
      */
     numberOfLines?: number;
     componentName?: 'text' | 'title' | 'heading' | 'code';
-};
+} & TestID$1 & StyledPropsBlade;
 
 declare type TextCommonProps = {
     type?: TextTypes;
@@ -3043,7 +4480,8 @@ declare type TextCommonProps = {
      * **For Internal use only**:  Sets the color of the Text component
      */
     color?: BaseTextProps['color'];
-};
+    textAlign?: BaseTextProps['textAlign'];
+} & TestID$1 & StyledPropsBlade;
 declare type TextVariant = 'body' | 'caption';
 declare type TextBodyVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'body'>;
@@ -3065,10 +4503,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" | "textAlign" | "size" | "weight" | "type" | "variant" | "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, ...styledProps }: TextProps<T>) => ReactElement;
 
 declare type CodeProps = {
     children: StringChildrenType;
@@ -3078,7 +4516,7 @@ declare type CodeProps = {
      * @default small
      */
     size?: 'small' | 'medium';
-};
+} & TestID$1 & StyledPropsBlade;
 /**
  * Code component can be used for displaying token, variable names, or inlined code snippets.
  *
@@ -3105,11 +4543,11 @@ declare type CodeProps = {
  * </BaseBox>
  * ```
  */
-declare const Code: ({ children, size }: CodeProps) => JSX.Element;
+declare const Code: ({ children, size, testID, ...styledProps }: 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 +4604,7 @@ declare type ProgressBarCommonProps = {
      * @default 100
      */
     max?: number;
-};
+} & TestID$1 & StyledPropsBlade;
 declare type ProgressBarVariant = 'progress' | 'meter';
 declare type ProgressBarProgressProps = ProgressBarCommonProps & {
     /**
@@ -3203,7 +4641,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, ...styledProps }: ProgressBarProps) => ReactElement;
 
 declare type RadioProps = {
     /**
@@ -3231,8 +4669,112 @@ declare type RadioProps = {
      * @default "medium"
      */
     size?: 'small' | 'medium';
-};
-declare const Radio: React__default.ForwardRefExoticComponent<RadioProps & React__default.RefAttributes<BladeElementRef>>;
+} & TestID$1 & StyledPropsBlade;
+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$1 & Partial<MakeObjectResponsive<{
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    marginX: SpacingValueType;
+    marginY: SpacingValueType;
+    marginTop: SpacingValueType;
+    marginRight: SpacingValueType;
+    marginBottom: SpacingValueType;
+    marginLeft: SpacingValueType;
+}> & Pick<MakeObjectResponsive<{
+    gap: SpacingValueType;
+    rowGap: SpacingValueType;
+    columnGap: SpacingValueType;
+} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & Pick<styled_components.CSSObject, "position" | "zIndex">> & Pick<{
+    grid?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.Grid | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoColumns?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoColumns<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoFlow?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoFlow | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoRows?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoRows<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumnEnd?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumnEnd | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumnStart?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumnStart | undefined>;
+        native: never;
+    }> | undefined;
+    gridRowEnd?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRowEnd | undefined>;
+        native: never;
+    }> | undefined;
+    gridRowStart?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRowStart | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateAreas?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateAreas | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateColumns?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateColumns<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateRows?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateRows<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridArea?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridArea | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumn?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumn | undefined>;
+        native: never;
+    }> | undefined;
+    gridRow?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRow | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplate?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplate | undefined>;
+        native: never;
+    }> | undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
 
 declare type RadioGroupProps = {
     /**
@@ -3307,8 +4849,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$1 & StyledPropsBlade;
+declare const RadioGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: RadioGroupProps) => React__default.ReactElement;
 
 declare type BaseSpinnerProps = {
     intent?: Feedback;
@@ -3340,10 +4882,10 @@ declare type BaseSpinnerProps = {
      *
      */
     accessibilityLabel: string;
-};
+} & TestID$1 & StyledPropsBlade;
 
 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, ...styledProps }: SpinnerProps) => React.ReactElement;
 
 declare type SkipNavLinkProps = {
     id?: string;
@@ -3352,14 +4894,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$1;
+declare const SkipNavContent: ({ id, testID, }: SkipNavContentProps) => JSX.Element;
 
 declare type VisuallyHiddenProps = {
     children: React.ReactNode;
-};
+} & TestID$1;
 
-declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element;
+declare const VisuallyHidden: ({ children, testID }: VisuallyHiddenProps) => JSX.Element;
 
 /**
  * Screen reader class adapted from webaim
@@ -3367,4 +4909,116 @@ 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, 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 };
+declare type TestID = {
+    testID?: string;
+};
+
+declare const BaseBox: styled_components.StyledComponent<"div", styled_components.DefaultTheme, Omit<Partial<MakeObjectResponsive<{
+    padding: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    paddingX: SpacingValueType;
+    paddingY: SpacingValueType;
+    paddingTop: SpacingValueType;
+    paddingRight: SpacingValueType;
+    paddingBottom: SpacingValueType;
+    paddingLeft: SpacingValueType;
+}> & MakeObjectResponsive<{
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    marginX: SpacingValueType;
+    marginY: SpacingValueType;
+    marginTop: SpacingValueType;
+    marginRight: SpacingValueType;
+    marginBottom: SpacingValueType;
+    marginLeft: SpacingValueType;
+}> & MakeObjectResponsive<{
+    height: SpacingValueType;
+    minHeight: SpacingValueType;
+    maxHeight: SpacingValueType;
+    width: SpacingValueType;
+    minWidth: SpacingValueType;
+    maxWidth: SpacingValueType;
+} & Pick<styled_components.CSSObject, "display" | "overflow" | "overflowX" | "overflowY">> & MakeObjectResponsive<{
+    gap: SpacingValueType;
+    rowGap: SpacingValueType;
+    columnGap: SpacingValueType;
+} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & Pick<styled_components.CSSObject, "position" | "zIndex">> & {
+    grid?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.Grid | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoColumns?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoColumns<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoFlow?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoFlow | undefined>;
+        native: never;
+    }> | undefined;
+    gridAutoRows?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridAutoRows<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumnEnd?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumnEnd | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumnStart?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumnStart | undefined>;
+        native: never;
+    }> | undefined;
+    gridRowEnd?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRowEnd | undefined>;
+        native: never;
+    }> | undefined;
+    gridRowStart?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRowStart | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateAreas?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateAreas | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateColumns?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateColumns<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplateRows?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplateRows<string | number> | undefined>;
+        native: never;
+    }> | undefined;
+    gridArea?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridArea | undefined>;
+        native: never;
+    }> | undefined;
+    gridColumn?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridColumn | undefined>;
+        native: never;
+    }> | undefined;
+    gridRow?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridRow | undefined>;
+        native: never;
+    }> | undefined;
+    gridTemplate?: Platform.Select<{
+        web: MakeValueResponsive<csstype.Property.GridTemplate | undefined>;
+        native: never;
+    }> | undefined;
+} & MakeObjectResponsive<{
+    backgroundColor: "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast";
+}> & {
+    as: "header" | "main" | "aside" | "div" | "footer" | "nav" | "section" | "span";
+} & {
+    children?: React$1.ReactNode | React$1.ReactNode[];
+} & TestID>, "backgroundColor" | "as"> & Partial<MakeObjectResponsive<{
+    borderRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+    backgroundColor: "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.highContrast" | "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast" | "action.background.primary.default" | "action.background.primary.disabled" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.secondary.default" | "action.background.secondary.disabled" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.tertiary.default" | "action.background.tertiary.disabled" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active" | (string & Record<never, never>);
+    lineHeight: SpacingValueType;
+} & Pick<styled_components.CSSObject, "border" | "transform" | "borderBottom" | "borderLeft" | "borderRight" | "borderTop">> & {
+    className?: string | undefined;
+    id?: string | undefined;
+}>, never>;
+
+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, Box, BoxIcon, BoxProps, 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, BaseBox as InternalDontUsePleaseWillBeRemovedSoonBaseBox, 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 };