@razorpay/blade 8.2.2 → 8.3.0

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

@@ -0,0 +1,4824 @@
+/// <reference types="react" />
+import * as React$1 from 'react';
+import React__default, { ReactChild, ReactElement, ReactNode, SyntheticEvent, KeyboardEvent } from 'react';
+import * as react_native from 'react-native';
+import { AccessibilityRole, ViewStyle, ImageSourcePropType, View, GestureResponderEvent } from 'react-native';
+import { CSSObject } from 'styled-components';
+import { ReactDOMAttributes } from '@use-gesture/react/dist/declarations/src/types';
+
+type BorderRadius = Readonly<{
+  /** none: 0(px/rem/pt) */
+  none: 0;
+  /** small: 2(px/rem/pt) */
+  small: 2;
+  /** medium: 4(px/rem/pt) */
+  medium: 4;
+  /** large: 8(px/rem/pt) */
+  large: 8;
+  /** max: 9999(px/rem/pt). This will round the left and right side of the box element */
+  max: 9999;
+  /** round: 50%(pt). This will turn the box element into a circle */
+  round: '50%';
+}>;
+
+type BorderWidth = Readonly<{
+  /** none: 0(px/rem/pt) */
+  none: 0;
+  /** thin: 1(px/rem/pt) */
+  thin: 1;
+  /** thick: 1.5(px/rem/pt) */
+  thick: 1.5;
+}>;
+
+type Border = Readonly<{
+  radius: BorderRadius;
+  width: BorderWidth;
+}>;
+
+type Breakpoints = Readonly<{
+  /**
+   * `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;
+  /**
+   * `@media screen and (min-width: 480px)`
+   *
+   * Mobiles and Small Tablets
+   */
+  s: number;
+  /**
+   * `@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;
+  /**
+   * `@media screen and (min-width: 1024px)`
+   *
+   * Desktop
+   */
+  l: number;
+  /**
+   * `@media screen and (min-width: 1200px)`
+   *
+   * HD Desktop
+   */
+  xl: number;
+}>;
+
+type FontFamily = {
+  /** Used for all type of textual content except code snippets */
+  text: string;
+  /** Used for code snippets  */
+  code: string;
+};
+
+type FontWeight = {
+  regular: 400;
+  bold: 700;
+};
+
+/**
+ * For font size and line-heights we can’t say from xl to 2xl the value will necessary increase.
+ * it might decrease or remain same because these are alias tokens and we need aliases for cross platform.
+ * so for example xl on mobile can be 32px and on desktop xl can be 34px,
+ * similarly 2xl on mobile can be 34px but on desktop doesn’t necessarily mean 2xl will be more than xl(34px) it can be 32 as well since visually they make better hierarchy.
+ */
+
+type FontSize = {
+  /** desktop: 9(px/rem/pt)
+   *
+   * mobile: 9(px/rem/pt)
+   */
+  10: number;
+  /** desktop: 10(px/rem/pt)
+   *
+   * mobile: 10(px/rem/pt)
+   */
+  25: number;
+  /** desktop: 11(px/rem/pt)
+   *
+   * mobile: 11(px/rem/pt)
+   */
+  50: number;
+  /** desktop: 12(px/rem/pt)
+   *
+   * mobile: 12(px/rem/pt)
+   */
+  75: number;
+  /** desktop: 14(px/rem/pt)
+   *
+   * mobile: 14(px/rem/pt)
+   */
+  100: number;
+  /** desktop: 16(px/rem/pt)
+   *
+   * mobile: 16(px/rem/pt)
+   */
+  200: number;
+  /** desktop: 18(px/rem/pt)
+   *
+   * mobile: 16(px/rem/pt)
+   */
+  300: number;
+  /** desktop: 20(px/rem/pt)
+   *
+   * mobile: 18(px/rem/pt)
+   */
+  400: number;
+  /** desktop: 22(px/rem/pt)
+   *
+   * mobile: 20(px/rem/pt)
+   */
+  500: number;
+  /** desktop: 24(px/rem/pt)
+   *
+   * mobile: 20(px/rem/pt)
+   */
+  600: number;
+  /** desktop: 28(px/rem/pt)
+   *
+   * mobile: 24(px/rem/pt)
+   */
+  700: number;
+  /** desktop: 32(px/rem/pt)
+   *
+   * mobile: 28(px/rem/pt)
+   */
+  800: number;
+  /** desktop: 36(px/rem/pt)
+   *
+   * mobile: 32(px/rem/pt)
+   */
+  900: number;
+  /** desktop: 40(px/rem/pt)
+   *
+   * mobile: 32(px/rem/pt)
+   */
+  1000: number;
+};
+
+type Typography = {
+  fonts: {
+    family: FontFamily;
+    size: FontSize;
+    weight: FontWeight;
+  };
+  lineHeights: {
+    /** desktop: 0(px/rem/pt)
+     *
+     * mobile: 0(px/rem/pt)
+     */
+    0: number;
+    /** desktop: 14(px/rem/pt)
+     *
+     * mobile: 14(px/rem/pt)
+     */
+    25: number;
+    /** desktop: 16(px/rem/pt)
+     *
+     * mobile: 16(px/rem/pt)
+     */
+    50: number;
+    /** desktop: 18(px/rem/pt)
+     *
+     * mobile: 18(px/rem/pt)
+     */
+    75: number;
+    /** desktop: 20(px/rem/pt)
+     *
+     * mobile: 20(px/rem/pt)
+     */
+    100: number;
+    /** desktop: 24(px/rem/pt)
+     *
+     * mobile: 20(px/rem/pt)
+     */
+    200: number;
+    /** desktop: 24(px/rem/pt)
+     *
+     * mobile: 24(px/rem/pt)
+     */
+    300: number;
+    /** desktop: 28(px/rem/pt)
+     *
+     * mobile: 24(px/rem/pt)
+     */
+    400: number;
+    /** desktop: 32(px/rem/pt)
+     *
+     * mobile: 28(px/rem/pt)
+     */
+    500: number;
+    /** desktop: 40(px/rem/pt)
+     *
+     * mobile: 32(px/rem/pt)
+     */
+    600: number;
+    /** desktop: 40(px/rem/pt)
+     *
+     * mobile: 40(px/rem/pt)
+     */
+    700: number;
+    /** desktop: 48(px/rem/pt)
+     *
+     * mobile: 40(px/rem/pt)
+     */
+    800: number;
+  };
+  // letterSpacings: {};
+};
+
+type TypographyPlatforms = 'onDesktop' | 'onMobile';
+
+type TypographyWithPlatforms = Record<TypographyPlatforms, 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;
+  /** 1: 2(px/rem/pt) */
+  1: 2;
+  /** 2: 4(px/rem/pt) */
+  2: 4;
+  /** 3: 8(px/rem/pt) */
+  3: 8;
+  /** 4: 12(px/rem/pt) */
+  4: 12;
+  /** 5: 16(px/rem/pt) */
+  5: 16;
+  /** 6: 20(px/rem/pt) */
+  6: 20;
+  /** 7: 24(px/rem/pt) */
+  7: 24;
+  /** 8: 32(px/rem/pt) */
+  8: 32;
+  /** 9: 40(px/rem/pt) */
+  9: 40;
+  /** 10: 48(px/rem/pt) */
+  10: 48;
+  /** 11: 56(px/rem/pt) */
+  11: 56;
+}>;
+
+type ColorSchemeNames = 'dark' | 'light';
+type ColorSchemeNamesInput = ColorSchemeNames | 'system';
+
+type ColorSchemeModes = 'onDark' | 'onLight';
+
+type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';
+
+type ColorContrastTypes = 'low' | 'high';
+
+type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
+
+type ColorContrast = {
+  [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;
+};
+
+// @TODO: this shall rather be Surface = 'level1' | 'level2' | 'level3' to keep in sync with color tokens
+type SurfaceLevels = 1 | 2 | 3;
+
+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 = {
+  name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object
+  border: Border;
+  breakpoints: Breakpoints;
+  colors: ColorsWithModes;
+  motion: Motion;
+  elevation: ElevationWithColorModes;
+  spacing: Spacing;
+  typography: TypographyWithPlatforms;
+};
+
+// All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
+type AriaRoles =
+  | Exclude<AccessibilityRole, 'header' | 'adjustable' | 'image' | 'none' | 'summary'>
+  | 'alert'
+  | 'alertdialog'
+  | 'application'
+  | 'article'
+  | 'banner'
+  | 'button'
+  | 'cell'
+  | 'checkbox'
+  | 'columnheader'
+  | 'combobox'
+  | 'complementary'
+  | 'contentinfo'
+  | 'definition'
+  | 'dialog'
+  | 'directory'
+  | 'document'
+  | 'feed'
+  | 'figure'
+  | 'form'
+  | 'grid'
+  | 'gridcell'
+  | 'group'
+  | 'heading'
+  | 'img'
+  | 'link'
+  | 'list'
+  | 'listbox'
+  | 'listitem'
+  | 'log'
+  | 'main'
+  | 'marquee'
+  | 'math'
+  | 'menu'
+  | 'menubar'
+  | 'menuitem'
+  | 'menuitemcheckbox'
+  | 'menuitemradio'
+  | 'meter'
+  | 'navigation'
+  | 'none'
+  | 'note'
+  | 'option'
+  | 'presentation'
+  | 'progressbar'
+  | 'radio'
+  | 'radiogroup'
+  | 'region'
+  | 'row'
+  | 'rowgroup'
+  | 'rowheader'
+  | 'scrollbar'
+  | 'search'
+  | 'searchbox'
+  | 'separator'
+  | 'slider'
+  | 'spinbutton'
+  | 'status'
+  | 'switch'
+  | 'tab'
+  | 'table'
+  | 'tablist'
+  | 'tabpanel'
+  | 'term'
+  | 'textbox'
+  | 'timer'
+  | 'toolbar'
+  | 'tooltip'
+  | 'tree'
+  | 'treegrid'
+  | 'treeitem';
+type AccessibilityProps = AriaAttributes;
+
+type AriaAttributes = {
+  role: AriaRoles;
+  /**
+   * Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
+   */
+  activeDescendant?: string;
+  /**
+   * Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
+   */
+  atomic?: boolean;
+  /**
+   * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
+   */
+  autoComplete?: 'none' | 'inline' | 'list' | 'both';
+  /**
+   * Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
+   */
+  busy?: boolean;
+  /**
+   * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
+   * @see aria-pressed @see aria-selected.
+   */
+  checked?: boolean | 'mixed';
+  /**
+   * Defines the total number of columns in a table, grid, or treegrid.
+   * @see aria-colindex.
+   */
+  colCount?: number;
+  /**
+   * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
+   * @see aria-colcount @see aria-colspan.
+   */
+  colIndex?: number;
+  /**
+   * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
+   * @see aria-colindex @see aria-rowspan.
+   */
+  colSpan?: number;
+  /**
+   * Identifies the element (or elements) whose contents or presence are controlled by the current element.
+   * @see aria-owns.
+   */
+  controls?: string;
+  /**
+   * Indicates the element that represents the current item within a container or set of related elements.
+   */
+  current?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
+  /**
+   * Identifies the element (or elements) that describes the object.
+   * @see aria-labelledby
+   */
+  describedBy?: string;
+  /**
+   * Identifies the element that provides a detailed, extended description for the object.
+   * @see aria-describedby.
+   */
+  details?: string;
+  /**
+   * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+   * @see aria-hidden @see aria-readonly.
+   */
+  disabled?: boolean;
+  /**
+   * Indicates what functions can be performed when a dragged object is released on the drop target.
+   * @deprecated in ARIA 1.1
+   */
+  dropEffect?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup';
+  /**
+   * Identifies the element that provides an error message for the object.
+   * @see aria-invalid @see aria-describedby.
+   */
+  errorMessage?: string;
+  /**
+   * Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
+   */
+  expanded?: boolean;
+  /**
+   * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
+   * allows assistive technology to override the general default of reading in document source order.
+   */
+  flowTo?: string;
+  /**
+   * Indicates an element's "grabbed" state in a drag-and-drop operation.
+   * @deprecated in ARIA 1.1
+   */
+  grabbed?: boolean;
+  /**
+   * Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
+   */
+  hasPopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+  /**
+   * Indicates whether the element is exposed to an accessibility API.
+   * @see aria-disabled.
+   */
+  hidden?: boolean;
+  /**
+   * Indicates the entered value does not conform to the format expected by the application.
+   * @see aria-errormessage.
+   */
+  invalid?: boolean | 'grammar' | 'spelling';
+  /**
+   * Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
+   */
+  keyShortcuts?: string;
+  /**
+   * Defines a string value that labels the current element.
+   * @see aria-labelledby.
+   */
+  label?: string;
+  /**
+   * Identifies the element (or elements) that labels the current element.
+   * @see aria-describedby.
+   */
+  labelledBy?: string;
+  /**
+   * Defines the hierarchical level of an element within a structure.
+   */
+  level?: number;
+  /**
+   * Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
+   */
+  liveRegion?: 'off' | 'assertive' | 'polite';
+  /**
+   * Indicates whether an element is modal when displayed.
+   */
+  modal?: boolean;
+  /**
+   * Indicates whether a text box accepts multiple lines of input or only a single line.
+   */
+  multiline?: boolean;
+  /**
+   * Indicates that the user may select more than one item from the current selectable descendants.
+   */
+  multiSelectable?: boolean;
+  /**
+   * Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
+   * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
+   * @see aria-controls.
+   */
+  owns?: string;
+  /**
+   * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
+   * A hint could be a sample value or a brief description of the expected format.
+   */
+  placeholder?: string;
+  /**
+   * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
+   * @see aria-setsize.
+   */
+  posInSet?: number;
+  /**
+   * Indicates the current "pressed" state of toggle buttons.
+   * @see aria-checked @see aria-selected.
+   */
+  pressed?: boolean | 'mixed';
+  /**
+   * Indicates that the element is not editable, but is otherwise operable.
+   * @see aria-disabled.
+   */
+  readOnly?: boolean;
+  /**
+   * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+   * @see aria-atomic.
+   */
+  relevant?:
+    | 'additions'
+    | 'additions removals'
+    | 'additions text'
+    | 'all'
+    | 'removals'
+    | 'removals additions'
+    | 'removals text'
+    | 'text'
+    | 'text additions'
+    | 'text removals';
+  /**
+   * Indicates that user input is required on the element before a form may be submitted.
+   */
+  required?: boolean;
+  /**
+   * Defines a human-readable, author-localized description for the role of an element.
+   */
+  roleDescription?: string;
+  /**
+   * Defines the total number of rows in a table, grid, or treegrid.
+   * @see aria-rowindex.
+   */
+  rowCount?: number;
+  /**
+   * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
+   * @see aria-rowcount @see aria-rowspan.
+   */
+  rowIndex?: number;
+  /**
+   * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
+   * @see aria-rowindex @see aria-colspan.
+   */
+  rowSpan?: number;
+  /**
+   * Indicates the current "selected" state of various widgets.
+   * @see aria-checked @see aria-pressed.
+   */
+  selected?: boolean;
+  /**
+   * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
+   * @see aria-posinset.
+   */
+  setSize?: number;
+  /**
+   * Indicates if items in a table or grid are sorted in ascending or descending order.
+   */
+  sort?: 'none' | 'ascending' | 'descending' | 'other';
+  /**
+   * Defines the maximum allowed value for a range widget.
+   */
+  valueMax?: number;
+  /**
+   * Defines the minimum allowed value for a range widget.
+   */
+  valueMin?: number;
+  /**
+   * Defines the current value for a range widget.
+   * @see aria-valuetext.
+   */
+  valueNow?: number;
+  /**
+   * Defines the human readable text alternative of aria-valuenow for a range widget.
+   */
+  valueText?: string;
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * 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 NativeOrWebBrand = Brand<any, 'native' | 'web'>;
+
+/* eslint-disable @typescript-eslint/no-namespace */
+
+
+declare namespace Platform {
+  export type Name = 'native';
+  /**
+   * Right now, the module resolution is set to resolve `.native` files,
+   *
+   * Thus Platform.Select<> type will return the `native` type
+   */
+  export type Select<Options extends { web: unknown; native: unknown }> = Brand<
+    Options[Name],
+    'platform-native'
+  >;
+
+  export type CastNative<T extends NativeOrWebBrand | undefined> = Extract<
+    T,
+    { __brand__?: 'platform-native' | 'platform-all' }
+  >;
+
+  export type CastWeb<T extends NativeOrWebBrand | undefined> = Extract<
+    T,
+    { __brand__?: 'platform-web' | 'platform-all' }
+  >;
+}
+
+type Duration = {
+  /** `70` milliseconds */
+  '2xquick': 70;
+  /** `150` milliseconds */
+  xquick: 150;
+  /** `200` milliseconds */
+  quick: 200;
+  /** `250` milliseconds */
+  moderate: 250;
+  /** `300` milliseconds */
+  xmoderate: 300;
+  /** `400` milliseconds */
+  gentle: 400;
+  /** `600` milliseconds */
+  xgentle: 600;
+  /** `900` milliseconds */
+  '2xgentle': 900;
+};
+
+type Delay = {
+  /** `70` milliseconds */
+  '2xshort': 70;
+  /** `120` milliseconds */
+  xshort: 120;
+  /** `180` milliseconds */
+  short: 180;
+  /** `3000` milliseconds */
+  long: 3000;
+  /** `5000` milliseconds */
+  xlong: 5000;
+};
+
+type EasingFunctionFactory = { factory: () => (value: number) => number }; // similar to EasingFunctionFactory of `react-native-reanimated`
+type EasingType<Value extends string> = Platform.Select<{
+  web: Value;
+  native: EasingFunctionFactory;
+}>;
+
+type Easing = {
+  /** Easings for all standard animations*/
+  standard: {
+    /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
+    /** `cubic-bezier(0.3, 0, 0.2, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    effective: EasingType<'cubic-bezier(0.3, 0, 0.2, 1)'>;
+    /** `cubic-bezier(0.5, 0, 0, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    revealing: EasingType<'cubic-bezier(0.5, 0, 0, 1)'>;
+    /** `cubic-bezier(1, 0.5, 0, 0.5)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    wary: EasingType<'cubic-bezier(1, 0.5, 0, 0.5)'>;
+  };
+  /** Easings for all entrance animations*/
+  entrance: {
+    /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
+    /** `cubic-bezier(0, 0, 0.2, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    effective: EasingType<'cubic-bezier(0, 0, 0.2, 1)'>;
+    /** `cubic-bezier(0, 0, 0, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    revealing: EasingType<'cubic-bezier(0, 0, 0, 1)'>;
+  };
+  /** Easings for all exit animations*/
+  exit: {
+    /** `cubic-bezier(0.7, 0, 0.5, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    attentive: EasingType<'cubic-bezier(0.7, 0, 0.5, 1)'>;
+    /** `cubic-bezier(0.17, 0, 1, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    effective: EasingType<'cubic-bezier(0.17, 0, 1, 1)'>;
+    /** `cubic-bezier(0.5, 0, 1, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    revealing: EasingType<'cubic-bezier(0.5, 0, 1, 1)'>;
+  };
+};
+
+type Motion = Readonly<{
+  delay: Delay;
+  duration: Duration;
+  easing: Easing;
+}>;
+
+type ElevationLevels = 'none' | 'lowRaised' | 'midRaised' | 'highRaised';
+
+type ElevationStyles = Readonly<{
+  elevation: number;
+  shadowColor: string;
+  shadowOpacity: number;
+  shadowRadius: number;
+  shadowOffset: {
+    /**
+     * x-axis
+     */
+    width: number;
+    /**
+     * y-axis
+     */
+    height: number;
+  };
+}>;
+
+type Elevation = Record<
+  ElevationLevels,
+  Platform.Select<{
+    web: string;
+    native: ElevationStyles;
+  }>
+>;
+
+type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;
+
+/**
+ * @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 DotNotationSpacingStringToken = `spacing.${keyof Spacing}`;
+
+/**
+ * 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[];
+
+/**
+ *
+ * When combined with union, this type utility will give you autocomplete of union while still supporting any string value as input
+ *
+ * ### Usage
+ *
+ * ```ts
+ * type ThemeName = 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
+ * ```
+ *
+ * This will show paymentTheme and bankingTheme in autocomplete but also allow any other string as value.
+ *
+ * More details - https://github.com/razorpay/blade/pull/1031/commits/86b6ee0facf45e7556739efcbfa5396b11b1b3c9#r1121298293
+ * Related TS Issue - https://github.com/microsoft/TypeScript/issues/29729
+ *
+ */
+type StringWithAutocomplete = string & Record<never, never>;
+
+type TestID = {
+  testID?: string;
+};
+
+/**
+ * Similar to `Pick` except this returns `never` when value doesn't exist (native `Pick` returns `unknown`).
+ *
+ * You might have to ts-ignore the non-existing type error while using this. This is done so that you can get jsdoc from actual type.
+ *
+ * E.g. This will pick from ViewStyle prop if value exists else returns undefined.
+ *
+ * ```ts
+ * // @ts-expect-error: T passed here may not neccessarily exist. We return `never` type when it doesn't
+ * native: PickIfExist<ViewStyle, T>;
+ * ```
+ */
+type PickIfExist$1<T, K extends keyof T> = {
+  [P in K]: P extends keyof T ? T[P] : never;
+};
+
+/**
+ * Picks the types based on the platform (web / native).
+ *
+ * E.g.
+ * ```ts
+ * type CSSObject = PickCSSByPlatform<'display'>
+ * // On Web --> This will be all possible web display properties like `block`, `flex`, `inline`, and more.
+ * // On Native --> This will be just `flex` and `none`
+ * ```
+ */
+type PickCSSByPlatform$1<T extends keyof React__default.CSSProperties | keyof ViewStyle> = Platform.Select<{
+  web: PickIfExist$1<CSSObject, T>;
+  // @ts-expect-error: T passed here may not neccessarily exist. We return `never` type when it doesn't
+  native: PickIfExist$1<ViewStyle, T>;
+}>;
+
+declare type ActionListContextProp = Pick<ActionListProps, 'surfaceLevel'>;
+declare const useActionListContext: () => ActionListContextProp;
+declare type ActionListProps = {
+    children: React__default.ReactNode[];
+    /**
+     * Decides the backgroundColor of ActionList
+     */
+    surfaceLevel?: Exclude<SurfaceLevels, 1>;
+} & TestID;
+declare const ActionList: React__default.MemoExoticComponent<({ children, surfaceLevel, testID }: ActionListProps) => JSX.Element>;
+
+type Theme$1 = {
+  name: ThemeTokens['name'];
+  border: Border;
+  breakpoints: Breakpoints;
+  colors: Colors;
+  spacing: Spacing;
+  motion: Motion;
+  elevation: Elevation;
+  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
+ * }
+ * ```
+ *
+ */
+// When type is `never`, we just want to return `never` rather than { base: never, ...etc } since that prop is intended to be never used
+// Explaination of [T] extends [never] -> https://stackoverflow.com/questions/65492464/typescript-never-type-condition
+type MakeValueResponsive$1<T> = [T] extends [never]
+  ? never
+  :
+      | 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.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 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;
+    /**
+     * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/flex
+     */
+    flex: string | number;
+  } & PickCSSByPlatform$1<
+    | '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;
+  } & PickCSSByPlatform$1<'position' | 'zIndex'>
+>;
+
+type GridProps$1 = MakeObjectResponsive$1<
+  PickCSSByPlatform$1<
+    | 'grid'
+    | 'gridColumn'
+    | 'gridRow'
+    | 'gridRowStart'
+    | 'gridRowEnd'
+    | 'gridColumnStart'
+    | 'gridColumnEnd'
+    | 'gridArea'
+    | 'gridAutoFlow'
+    | 'gridAutoRows'
+    | 'gridAutoColumns'
+    | 'gridTemplate'
+    | 'gridTemplateAreas'
+    | 'gridTemplateColumns'
+    | 'gridTemplateRows'
+  >
+>;
+
+type StyledPropsBlade = Partial<
+  Omit<
+    MarginProps$1 &
+      Pick<FlexboxProps$1, 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order'> &
+      PositionProps$1 &
+      Pick<
+        GridProps$1,
+        | 'gridColumn'
+        | 'gridRow'
+        | 'gridRowStart'
+        | 'gridRowEnd'
+        | 'gridColumnStart'
+        | 'gridColumnEnd'
+        | 'gridArea'
+      >,
+    '__brand__'
+  >
+>;
+
+type FeedbackIconColors$1 = `feedback.icon.${DotNotationColorStringToken<
+  Theme$1['colors']['feedback']['icon']
+>}`;
+
+type FeedbackActionIconColors$1 = `feedback.${Feedback}.action.icon.${DotNotationColorStringToken<
+  Theme$1['colors']['feedback'][Feedback]['action']['icon']
+>}`;
+
+type ActionIconColors$1 = `action.icon.${DotNotationColorStringToken<
+  Theme$1['colors']['action']['icon']
+>}`;
+
+type TextIconColors$1 = `surface.text.${DotNotationColorStringToken<
+  Theme$1['colors']['surface']['text']
+>}`;
+
+type SurfaceActionIconColors$1 = `surface.action.icon.${DotNotationColorStringToken<
+  Theme$1['colors']['surface']['action']['icon']
+>}`;
+
+type BadgeIconColors$1 = `badge.icon.${DotNotationColorStringToken<
+  Theme$1['colors']['badge']['icon']
+>}`;
+
+type IconSize$1 = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
+type IconProps$1 = {
+  /**
+   * Color token (not to be confused with actual hsla value)
+   */
+  color:
+    | ActionIconColors$1
+    | SurfaceActionIconColors$1
+    | FeedbackIconColors$1
+    | FeedbackActionIconColors$1
+    | TextIconColors$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 = {
+    title: string;
+    description?: string;
+    onClick?: (clickProps: {
+        name: string;
+        value?: boolean;
+    }) => void;
+    /**
+     * value that you get from `onChange` event on SelectInput or in form submissions.
+     */
+    value: string;
+    /**
+     * Link to open when item is clicked.
+     */
+    href?: string;
+    /**
+     * HTML target of the link
+     */
+    target?: string;
+    /**
+     * Item that goes on left-side of item.
+     *
+     * Valid elements - `<ActionListItemIcon />`, `<ActionListItemAsset />`
+     *
+     * Will be overriden in multiselect
+     */
+    leading?: React__default.ReactNode;
+    /**
+     * Item that goes on right-side of item.
+     *
+     * Valid elements - `<ActionListItemText />`, `<ActionListItemIcon />`
+     */
+    trailing?: React__default.ReactNode;
+    isDisabled?: boolean;
+    intent?: Extract<Feedback, 'negative'>;
+    /**
+     * Can be used in combination of `onClick` to highlight item as selected in Button Triggers.
+     *
+     * When trigger is SelectInput, Use `value` prop on SelectInput instead to make dropdown controlled.
+     */
+    isSelected?: boolean;
+    /**
+     * Internally passed from ActionList. No need to pass it explicitly
+     *
+     * @private
+     */
+    _index?: number;
+} & TestID;
+declare const ActionListSectionDivider: () => JSX.Element;
+declare type ActionListSectionProps = {
+    title: string;
+    children: React__default.ReactNode[] | React__default.ReactNode;
+    /**
+     * Internally used to hide the divider on final item in React Native.
+     *
+     * Should not be used by consumers (also won't work on web)
+     *
+     * @private
+     */
+    _hideDivider?: boolean;
+} & TestID;
+declare const ActionListSection: ({ title, children, testID, _hideDivider, }: ActionListSectionProps) => JSX.Element;
+declare const ActionListItemIcon: ({ icon }: {
+    icon: IconComponent$1;
+}) => JSX.Element;
+declare const ActionListItemText: ({ children, }: {
+    children: StringChildrenType;
+}) => React__default.ReactElement;
+declare const ActionListItem: React__default.MemoExoticComponent<(props: ActionListItemProps) => JSX.Element>;
+
+declare type ActionListHeaderProps = {
+    title: string;
+    /**
+     * Asset to be added on left side of Header.
+     *
+     * Valid children - `ActionListHeaderIcon`
+     */
+    leading?: React__default.ReactNode;
+} & TestID;
+declare const ActionListHeader: (props: ActionListHeaderProps) => JSX.Element;
+declare const ActionListHeaderIcon: ({ icon }: {
+    icon: IconComponent$1;
+}) => React__default.ReactElement;
+
+declare type ActionListFooterProps = {
+    title?: string;
+    /**
+     * Asset to be added on left side of Footer.
+     *
+     * Valid children - `ActionListFooterIcon`
+     */
+    leading?: React__default.ReactNode;
+    /**
+     * Elements to be added on right side of Footer.
+     *
+     * Anything can be passed here but maybe don't? Should ideally have Button or Tick Icon Buttons.
+     */
+    trailing?: React__default.ReactNode;
+} & TestID;
+declare const ActionListFooter: (props: ActionListFooterProps) => JSX.Element;
+declare const ActionListFooterIcon: ({ icon }: {
+    icon: IconComponent$1;
+}) => React__default.ReactElement;
+
+declare type ActionListItemAssetProps = {
+    /**
+     * Source of the image.
+     *
+     * Can either be a string URI or `require('/local/image')` in React Native
+     */
+    src: string | ImageSourcePropType;
+    /**
+     * Alt tag for the image
+     */
+    alt: string;
+};
+declare const ActionListItemAsset: (props: ActionListItemAssetProps) => React.ReactElement;
+
+declare type PrimaryAction = {
+    text: string;
+    onClick: () => void;
+};
+declare type SecondaryActionButton = {
+    text: string;
+    onClick: () => void;
+};
+declare type SecondaryActionLinkButton = {
+    text: string;
+    href: string;
+    onClick?: () => void;
+    target?: string;
+    /**
+     * When `target` is set to `_blank` this is automatically set to `noopener noreferrer`
+     */
+    rel?: string;
+};
+declare type SecondaryAction = SecondaryActionButton | SecondaryActionLinkButton;
+declare type AlertProps = {
+    /**
+     * Body content, pass text or JSX. Avoid passing components except `Link` to customize the content.
+     */
+    description: ReactChild;
+    /**
+     * A brief heading
+     */
+    title?: string;
+    /**
+     * Shows a dismiss button
+     *
+     * @default true
+     */
+    isDismissible?: boolean;
+    /**
+     * A callback when the dismiss button is clicked
+     */
+    onDismiss?: () => void;
+    /**
+     * Can be set to `high` for a more prominent look. Not to be confused with a11y contrast.
+     *
+     * @default low
+     */
+    contrast?: ColorContrastTypes;
+    /**
+     * Makes the Alert span the entire container width, instead of the default max width of `584px`.
+     * This also makes the alert borderless, useful for creating full bleed layouts.
+     *
+     * @default false
+     */
+    isFullWidth?: boolean;
+    /**
+     * Sets the color tone
+     *
+     * @default neutral
+     */
+    intent?: Feedback;
+    /**
+     * Renders a primary action button and a secondary action link button
+     */
+    actions?: {
+        /**
+         * Renders a button (should **always** be present if `secondary` action is being used)
+         */
+        primary: PrimaryAction;
+        /**
+         * Renders a Link button
+         */
+        secondary?: SecondaryAction;
+    };
+} & TestID & 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.
+     *
+     */
+    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 & 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 ThemeContext = UseColorScheme & {
+    theme: Theme;
+    platform: TypographyPlatforms;
+};
+declare const ThemeContext: React$1.Context<ThemeContext>;
+declare const useTheme: () => ThemeContext;
+
+declare type Theme = {
+    name: ThemeTokens['name'];
+    border: Border;
+    breakpoints: Breakpoints;
+    colors: Colors;
+    spacing: Spacing;
+    motion: Motion;
+    elevation: Elevation;
+    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] extends [never] ? never : 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.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}
+     *
+     */
+    marginX: SpacingValueType;
+    /**
+     * ### 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;
+    /**
+     * ### 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;
+    /**
+     * ### 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;
+    /**
+     * ### 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;
+    /**
+     * ### 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;
+}>;
+
+declare type LayoutProps = MakeObjectResponsive<{
+    height: SpacingValueType;
+    minHeight: SpacingValueType;
+    maxHeight: SpacingValueType;
+    width: SpacingValueType;
+    minWidth: SpacingValueType;
+    maxWidth: SpacingValueType;
+} & PickCSSByPlatform$1<'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;
+    /**
+     * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/flex
+     */
+    flex: string | number;
+} & PickCSSByPlatform$1<'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;
+} & PickCSSByPlatform$1<'position' | 'zIndex'>>;
+declare type GridProps = MakeObjectResponsive<PickCSSByPlatform$1<'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 type BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationColorStringToken<Theme$1['colors'][T]['border']>}`;
+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'>;
+    borderWidth: keyof Border['width'];
+    borderColor: BorderColorString<'surface'>;
+    borderTopWidth: keyof Border['width'];
+    borderTopColor: BorderColorString<'surface'>;
+    borderRightWidth: keyof Border['width'];
+    borderRightColor: BorderColorString<'surface'>;
+    borderBottomWidth: keyof Border['width'];
+    borderBottomColor: BorderColorString<'surface'>;
+    borderLeftWidth: keyof Border['width'];
+    borderLeftColor: BorderColorString<'surface'>;
+    borderRadius: keyof Border['radius'];
+    borderTopLeftRadius: keyof Border['radius'];
+    borderTopRightRadius: keyof Border['radius'];
+    borderBottomRightRadius: keyof Border['radius'];
+    borderBottomLeftRadius: keyof Border['radius'];
+}> & {
+    as: BoxAsType;
+};
+declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxVisualProps & {
+    children?: React.ReactNode | React.ReactNode[];
+} & TestID>;
+declare type BoxRefType = Platform.Select<{
+    web: Omit<HTMLElement, 'style'>;
+    native: View;
+}>;
+
+declare const Box: React__default.ForwardRefExoticComponent<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;
+} & PickIfExist$1<react_native.ViewStyle, "display" | "overflowX" | "overflowY" | "overflow"> & {
+    __brand__?: "platform-native" | undefined;
+}> & MakeObjectResponsive<{
+    gap: SpacingValueType;
+    rowGap: SpacingValueType;
+    columnGap: SpacingValueType;
+    flex: string | number;
+} & PickIfExist$1<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
+    __brand__?: "platform-native" | undefined;
+}> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & PickIfExist$1<react_native.ViewStyle, "position" | "zIndex"> & {
+    __brand__?: "platform-native" | undefined;
+}> & MakeObjectResponsive<PickCSSByPlatform$1<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">> & 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";
+    borderWidth: "none" | "thin" | "thick";
+    borderColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";
+    borderTopWidth: "none" | "thin" | "thick";
+    borderTopColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";
+    borderRightWidth: "none" | "thin" | "thick";
+    borderRightColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";
+    borderBottomWidth: "none" | "thin" | "thick";
+    borderBottomColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";
+    borderLeftWidth: "none" | "thin" | "thick";
+    borderLeftColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";
+    borderRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+    borderTopLeftRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+    borderTopRightRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+    borderBottomRightRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+    borderBottomLeftRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+}> & {
+    as: "header" | "main" | "aside" | "div" | "footer" | "nav" | "section" | "span";
+} & {
+    children?: React__default.ReactNode | React__default.ReactNode[];
+} & TestID> & React__default.RefAttributes<BoxRefType>>;
+
+declare const ComponentIds: {
+    CardHeader: string;
+    CardHeaderTrailing: string;
+    CardHeaderLeading: string;
+    CardFooter: string;
+    CardFooterTrailing: string;
+    CardFooterLeading: string;
+    CardBody: string;
+    CardHeaderIcon: string;
+    CardHeaderCounter: string;
+    CardHeaderBadge: string;
+    CardHeaderText: string;
+    CardHeaderLink: string;
+    CardHeaderIconButton: string;
+};
+declare type CardProps = {
+    /**
+     * Card contents
+     */
+    children: React__default.ReactNode;
+    /**
+     * Sets the background color of the Card according to the surface level tokens
+     *
+     * eg: `theme.colors.surface.background.level1`
+     *
+     * @default `2`
+     *
+     * **Description:**
+     *
+     * - 2: Used in layouts which are on top of the main background
+     * - 3: Used over the cards template or as a text input backgrounds.
+     *
+     * **Links:**
+     * - Docs: https://blade.razorpay.com/?path=/docs/tokens-colors--page#-theme-tokens
+     * - Figma: https://shorturl.at/fsvwK
+     */
+    surfaceLevel?: Exclude<SurfaceLevels, 1>;
+    /**
+     * Sets the elevation for Cards
+     *
+     * eg: `theme.elevation.midRaised`
+     *
+     * @default `theme.elevation.lowRaised`
+     *
+     * **Links:**
+     * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--page
+     */
+    elevation?: keyof Elevation;
+    /**
+     * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately
+     * @default `spacing.7`
+     *
+     * **Links:**
+     * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page
+     */
+    padding?: Extract<SpacingValueType$1, 'spacing.0' | 'spacing.3' | 'spacing.5' | 'spacing.7'>;
+} & TestID & StyledPropsBlade;
+declare const Card: ({ children, surfaceLevel, elevation, testID, padding, ...styledProps }: CardProps) => React__default.ReactElement;
+declare type CardBodyProps = {
+    children: React__default.ReactNode;
+} & TestID;
+declare const CardBody: ({ children, testID }: CardBodyProps) => React__default.ReactElement;
+
+declare type LinkCommonProps = {
+    variant?: 'anchor' | 'button';
+    icon?: IconComponent$1;
+    iconPosition?: 'left' | 'right';
+    isDisabled?: boolean;
+    onClick?: (event: SyntheticEvent) => void;
+    href?: string;
+    target?: string;
+    accessibilityLabel?: string;
+    /**
+     * Sets the size of the link
+     *
+     * @default medium
+     */
+    size?: 'small' | 'medium' | 'large';
+} & TestID & StyledPropsBlade & Platform.Select<{
+    native: {
+        /**
+         * Defines how far your touch can start away from the link
+         */
+        hitSlop?: {
+            top?: number;
+            right?: number;
+            bottom?: number;
+            left?: number;
+        } | number;
+        /**
+         * This is a web only prop and has no effect on react-native.
+         */
+        htmlTitle?: undefined;
+    };
+    web: {
+        /**
+         * This is a react-native only prop and has no effect on web.
+         */
+        hitSlop?: undefined;
+        /**
+         * The title of the link which is displayed as a tooltip.
+         */
+        htmlTitle?: string;
+    };
+}>;
+declare type LinkWithoutIconProps = LinkCommonProps & {
+    icon?: undefined;
+    children: StringChildrenType;
+};
+declare type LinkWithIconProps = LinkCommonProps & {
+    icon: IconComponent$1;
+    children?: StringChildrenType;
+};
+declare type LinkPropsWithOrWithoutIcon = LinkWithIconProps | LinkWithoutIconProps;
+declare type LinkAnchorVariantProps = LinkPropsWithOrWithoutIcon & {
+    variant?: 'anchor';
+    href?: string;
+    target?: string;
+    rel?: string;
+    isDisabled?: undefined;
+};
+declare type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
+    variant?: 'button';
+    isDisabled?: boolean;
+    href?: undefined;
+    target?: undefined;
+    rel?: undefined;
+};
+declare type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
+declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, hitSlop, htmlTitle, ...styledProps }: LinkProps) => ReactElement;
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+
+type BladeElementRef = Platform.Select<{
+  web: Pick<HTMLElement, 'focus' | 'scrollIntoView'> | Pick<View, 'focus'>;
+  native: React.MutableRefObject<any>;
+}>;
+
+declare type ButtonCommonProps = {
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
+    iconPosition?: 'left' | 'right';
+    isDisabled?: boolean;
+    isFullWidth?: boolean;
+    isLoading?: boolean;
+    accessibilityLabel?: string;
+    type?: 'button' | 'reset' | 'submit';
+    onClick?: Platform.Select<{
+        native: (event: GestureResponderEvent) => void;
+        web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
+    }>;
+} & TestID & StyledPropsBlade;
+declare type ButtonWithoutIconProps = ButtonCommonProps & {
+    icon?: undefined;
+    children: StringChildrenType;
+};
+declare type ButtonWithIconProps = ButtonCommonProps & {
+    icon: IconComponent$1;
+    children?: StringChildrenType;
+};
+declare type ButtonProps = ButtonWithoutIconProps | ButtonWithIconProps;
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<BladeElementRef>>;
+
+type FeedbackColors$1 = `feedback.text.${DotNotationColorStringToken<
+  Theme$1['colors']['feedback']['text']
+>}`;
+type FeedbackActionColors$1 = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<
+  Theme$1['colors']['feedback'][Feedback]['action']['text']
+>}`;
+type SurfaceColors$1 = `surface.text.${DotNotationColorStringToken<
+  Theme$1['colors']['surface']['text']
+>}`;
+type ActionColors$1 = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
+type BadgeTextColors$1 = `badge.text.${DotNotationColorStringToken<
+  Theme$1['colors']['badge']['text']
+>}`;
+
+type BaseTextProps$1 = {
+  id?: string;
+  color?: ActionColors$1 | FeedbackColors$1 | SurfaceColors$1 | FeedbackActionColors$1 | BadgeTextColors$1;
+  fontFamily?: keyof Theme$1['typography']['fonts']['family'];
+  fontSize?: keyof Theme$1['typography']['fonts']['size'];
+  fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
+  fontStyle?: 'italic' | 'normal';
+  textDecorationLine?: 'line-through' | 'none' | 'underline';
+  lineHeight?: keyof Theme$1['typography']['lineHeights'];
+  /**
+   * Web only
+   */
+  as?: 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+  textAlign?: 'center' | 'justify' | 'left' | 'right';
+  truncateAfterLines?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  accessibilityProps?: Partial<AccessibilityProps>;
+  /**
+   * React Native only
+   */
+  numberOfLines?: number;
+  componentName?: 'text' | 'title' | 'heading' | 'code';
+} & TestID &
+  StyledPropsBlade;
+
+/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
+
+
+type TextCommonProps$1 = {
+  type?: TextTypes;
+  contrast?: ColorContrastTypes;
+  truncateAfterLines?: number;
+  children: React.ReactNode;
+  weight?: keyof Theme$1['typography']['fonts']['weight'];
+  /**
+   * **For Internal use only**:  Sets the color of the Text component
+   */
+  color?: BaseTextProps$1['color'];
+  textAlign?: BaseTextProps$1['textAlign'];
+} & TestID &
+  StyledPropsBlade;
+
+type TextVariant$1 = 'body' | 'caption';
+
+type TextBodyVariant$1 = TextCommonProps$1 & {
+  variant?: Extract<TextVariant$1, 'body'>;
+  size?: 'xsmall' | 'small' | 'medium' | 'large';
+};
+
+type TextCaptionVariant$1 = TextCommonProps$1 & {
+  variant?: Extract<TextVariant$1, 'caption'>;
+  size?: 'medium';
+};
+
+/**
+ * Conditionally changing props based on variant.
+ * Overloads or union gives wrong intellisense.
+ */
+type TextProps$1<T> = T extends {
+  variant: infer Variant;
+}
+  ? Variant extends 'caption'
+    ? TextCaptionVariant$1
+    : Variant extends 'body'
+    ? TextBodyVariant$1
+    : T
+  : T;
+
+type CounterProps$1 = {
+  /**
+   * Sets the value for the counter.
+   */
+  value: number;
+  /**
+   * Sets the max value for the counter.
+   * If value exceedes `max` it will render `value+`
+   */
+  max?: number;
+  /**
+   * Sets the intent of the counter.
+   *
+   * @default 'neutral'
+   */
+  intent?: Feedback;
+  /**
+   * Sets the contrast of the counter.
+   *
+   * @default 'low'
+   */
+  contrast?: 'high' | 'low';
+  /**
+   * Sets the size of the counter.
+   *
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large';
+} & TestID &
+  StyledPropsBlade;
+
+declare const CardHeaderIcon: ({ icon }: {
+    icon: IconComponent$1;
+}) => React__default.ReactElement;
+declare const CardHeaderCounter: (props: CounterProps$1) => React__default.ReactElement;
+declare const CardHeaderBadge: (props: BadgeProps) => React__default.ReactElement;
+declare const CardHeaderText: (props: TextProps$1<{
+    variant: TextVariant$1;
+}>) => React__default.ReactElement;
+declare const CardHeaderLink: (props: LinkProps) => React__default.ReactElement;
+declare type CardHeaderIconButtonProps = Omit<ButtonProps, 'variant' | 'size' | 'iconPosition' | 'isFullWidth' | 'children'> & {
+    icon: IconComponent$1;
+};
+declare const CardHeaderIconButton: (props: CardHeaderIconButtonProps) => React__default.ReactElement;
+declare type CardHeaderProps = {
+    children?: React__default.ReactNode;
+} & TestID;
+declare const CardHeader: ({ children, testID }: CardHeaderProps) => React__default.ReactElement;
+declare type CardHeaderLeadingProps = {
+    title: string;
+    subtitle?: string;
+    /**
+     * prefix element of Card
+     *
+     * Accepts: `CardHeaderIcon` component
+     */
+    prefix?: React__default.ReactNode;
+    /**
+     * suffix element of Card
+     *
+     * Accepts: `CardHeaderCounter` component
+     */
+    suffix?: React__default.ReactNode;
+};
+declare const CardHeaderLeading: ({ title, subtitle, prefix, suffix, }: CardHeaderLeadingProps) => React__default.ReactElement;
+declare type CardHeaderTrailingProps = {
+    /**
+     * Renders a visual ornament in card header trailing section
+     *
+     * Accepts: `CardHeaderLink`, `CardHeaderText`, `CardHeaderIconButton`, `CardHeaderBadge`
+     */
+    visual?: React__default.ReactNode;
+};
+declare const CardHeaderTrailing: ({ visual }: CardHeaderTrailingProps) => React__default.ReactElement;
+
+declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel' | 'isLoading' | 'isDisabled' | 'icon' | 'iconPosition' | 'onClick'> & {
+    text: ButtonProps['children'];
+};
+declare type CardFooterProps = {
+    children?: React__default.ReactNode;
+} & TestID;
+declare const CardFooter: ({ children, testID }: CardFooterProps) => React__default.ReactElement;
+declare type CardFooterLeadingProps = {
+    title?: string;
+    subtitle?: string;
+};
+declare const CardFooterLeading: ({ title, subtitle }: CardFooterLeadingProps) => React__default.ReactElement;
+declare type CardFooterTrailingProps = {
+    actions?: {
+        primary?: CardFooterAction;
+        secondary?: CardFooterAction;
+    };
+};
+declare const CardFooterTrailing: ({ actions }: CardFooterTrailingProps) => React__default.ReactElement;
+
+declare type IconButtonProps = {
+    /**
+     * Icon component to be rendered, eg. `CloseIcon`
+     */
+    icon: IconComponent$1;
+    onClick: () => void;
+    /**
+     * Icon size
+     *
+     * @default 'medium'
+     */
+    size?: 'medium' | 'large';
+    /**
+     * Icon contrast
+     *
+     * @default 'low'
+     */
+    contrast?: 'low' | 'high';
+    /**
+     * Sets aria-label to help users know what the action does, eg 'Dismiss alert'
+     */
+    accessibilityLabel: string;
+};
+declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<BladeElementRef>>;
+
+declare type CounterProps = {
+    /**
+     * Sets the value for the counter.
+     */
+    value: number;
+    /**
+     * Sets the max value for the counter.
+     * If value exceedes `max` it will render `value+`
+     */
+    max?: number;
+    /**
+     * Sets the intent of the counter.
+     *
+     * @default 'neutral'
+     */
+    intent?: Feedback;
+    /**
+     * Sets the contrast of the counter.
+     *
+     * @default 'low'
+     */
+    contrast?: 'high' | 'low';
+    /**
+     * Sets the size of the counter.
+     *
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+} & TestID & StyledPropsBlade;
+declare const Counter: ({ value, max, intent, contrast, size, testID, ...styledProps }: CounterProps) => React.ReactElement;
+
+declare type OnChange = ({ isChecked, event, value, }: {
+    isChecked: boolean;
+    event?: React__default.ChangeEvent;
+    value?: string;
+}) => void;
+declare type CheckboxProps = {
+    /**
+     * If `true`, The checkbox will be checked. This also makes the checkbox controlled
+     * Use `onChange` to update its value
+     *
+     * @default false
+     */
+    isChecked?: boolean;
+    /**
+     * If `true`, the checkbox will be initially checked. This also makes the checkbox uncontrolled
+     *
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * The callback invoked when the checked state of the `Checkbox` changes.
+     */
+    onChange?: OnChange;
+    /**
+     * Sets the label of the checkbox
+     */
+    children: React__default.ReactNode;
+    /**
+     * Help text for the checkbox
+     */
+    helpText?: string;
+    /**
+     * Error text for the checkbox
+     *
+     * Renders when `validationState` is set to 'error'
+     */
+    errorText?: string;
+    /**
+     * If `true`, the checkbox will be indeterminate.
+     * This does not modify the isChecked property.
+     *
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * The name of the input field in a checkbox
+     * (Useful for form submission).
+     */
+    name?: string;
+    /**
+     * The value to be used in the checkbox input.
+     * This is the value that will be returned on form submission.
+     */
+    value?: string;
+    /**
+     * If `true`, the checkbox will be disabled
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true`, the checkbox input is marked as required,
+     * and `required` attribute will be added
+     *
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * If `error`, the checkbox input is marked as invalid,
+     * and `invalid` attribute will be added
+     */
+    validationState?: 'error' | 'none';
+    /**
+     * Size of the checkbox
+     *
+     * @default "medium"
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Sets the tab-index property on checkbox element
+     *
+     */
+    tabIndex?: number;
+} & TestID & 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 & Partial<Omit<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;
+    flex: string | number;
+} & PickIfExist$1<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
+    __brand__?: "platform-native" | undefined;
+}>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & PickIfExist$1<react_native.ViewStyle, "position" | "zIndex"> & {
+    __brand__?: "platform-native" | undefined;
+}> & Pick<MakeObjectResponsive<PickCSSByPlatform$1<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">>, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
+
+declare type CheckboxGroupProps = {
+    /**
+     * Accepts multiple checkboxes as children
+     */
+    children: React__default.ReactNode;
+    /**
+     * Help text of the checkbox group
+     */
+    helpText?: string;
+    /**
+     * Error text of the checkbox group
+     * Renders when `validationState` is set to 'error'
+     *
+     * Overrides helpText
+     */
+    errorText?: string;
+    /**
+     * Sets the error state of the CheckboxGroup
+     * If set to `error` it will render the `errorText` of the group,
+     * and propagate `invalid` prop to every checkbox
+     */
+    validationState?: 'error' | 'none';
+    /**
+     * Renders a necessity indicator after CheckboxGroup label
+     *
+     * If set to `undefined` it renders nothing.
+     */
+    necessityIndicator?: 'required' | 'optional' | 'none';
+    /**
+     * Sets the disabled state of the CheckboxGroup
+     * If set to `true` it propagate down to all the checkboxes
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Renders the label of the checkbox group
+     */
+    label: string;
+    /**
+     * Sets the position of the label
+     *
+     * @default 'top'
+     */
+    labelPosition?: 'top' | 'left';
+    /**
+     * Initial value of the checkbox group
+     */
+    defaultValue?: string[];
+    /**
+     * value of the checkbox group
+     *
+     * Use `onChange` to update its value
+     */
+    value?: string[];
+    /**
+     * The callback invoked when any of the checkbox's state changes
+     */
+    onChange?: ({ name, values }: {
+        name: string;
+        values: string[];
+    }) => void;
+    /**
+     * The name of the input field in a checkbox
+     * (Useful for form submission).
+     */
+    name?: string;
+    /**
+     * Size of the checkbox
+     *
+     * @default "medium"
+     */
+    size?: 'small' | 'medium';
+} & TestID & 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';
+    onDismiss?: () => void;
+    children: React__default.ReactNode[];
+} & StyledPropsBlade;
+declare const Dropdown: ({ children, selectionType, onDismiss, ...styledProps }: DropdownProps) => JSX.Element;
+
+declare type DropdownOverlayProps = {
+    children: React__default.ReactNode;
+} & TestID;
+
+declare const DropdownOverlay: ({ children, testID }: DropdownOverlayProps) => JSX.Element;
+
+declare type BaseButtonCommonProps = {
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
+    iconPosition?: 'left' | 'right';
+    isDisabled?: boolean;
+    isFullWidth?: boolean;
+    onBlur?: Platform.Select<{
+        native: (event: GestureResponderEvent) => void;
+        web: (event: React__default.FocusEvent<HTMLButtonElement>) => void;
+    }>;
+    onKeyDown?: Platform.Select<{
+        native: (event: GestureResponderEvent) => void;
+        web: (event: React__default.KeyboardEvent<HTMLButtonElement>) => void;
+    }>;
+    onClick?: Platform.Select<{
+        native: (event: GestureResponderEvent) => void;
+        web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
+    }>;
+    type?: 'button' | 'reset' | 'submit';
+    isLoading?: boolean;
+    accessibilityLabel?: string;
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    contrast?: 'low' | 'high';
+    intent?: 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
+} & TestID & StyledPropsBlade;
+declare type BaseButtonWithoutIconProps = BaseButtonCommonProps & {
+    icon?: undefined;
+    children: StringChildrenType;
+};
+declare type BaseButtonWithIconProps = BaseButtonCommonProps & {
+    icon: IconComponent$1;
+    children?: StringChildrenType;
+};
+declare type BaseButtonProps = BaseButtonWithIconProps | BaseButtonWithoutIconProps;
+
+declare type DropdownButtonProps = ButtonProps & {
+    onBlur?: BaseButtonProps['onBlur'];
+    onKeyDown?: BaseButtonProps['onKeyDown'];
+};
+declare const DropdownButton: ({ children, icon, iconPosition, isDisabled, isFullWidth, isLoading, onClick, onBlur, onKeyDown, size, type, variant, accessibilityLabel, testID, ...styledProps }: DropdownButtonProps) => JSX.Element;
+
+declare const ArrowDownIcon: IconComponent;
+
+declare const ArrowLeftIcon: IconComponent;
+
+declare const ArrowRightIcon: IconComponent;
+
+declare const ArrowUpRightIcon: IconComponent;
+
+declare const ArrowUpIcon: IconComponent;
+
+declare const Attachment: ({ size, color, ...styledProps }: IconProps) => ReactElement;
+
+declare const CheckIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
+
+declare const ChevronDownIcon: IconComponent;
+
+declare const ChevronLeftIcon: IconComponent;
+
+declare const ChevronRightIcon: IconComponent;
+
+declare const ChevronUpIcon: IconComponent;
+
+declare const CloseIcon: IconComponent;
+
+declare const CreditCardIcon: IconComponent;
+
+declare const DollarIcon: IconComponent;
+
+declare const DownloadIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
+
+declare const EditIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
+
+declare const EyeIcon: IconComponent;
+
+declare const EyeOffIcon: IconComponent;
+
+declare const FileTextIcon: IconComponent;
+
+declare const HistoryIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
+
+declare const HomeIcon: IconComponent;
+
+declare const InfoIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
+
+declare const LinkIcon: IconComponent;
+
+declare const LockIcon: IconComponent;
+
+declare const PauseIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
+
+declare const PlusIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
+
+declare const RupeeIcon: IconComponent;
+
+declare const SearchIcon: IconComponent;
+
+declare const SettingsIcon: IconComponent;
+
+declare const SlashIcon: IconComponent;
+
+declare const BankIcon: IconComponent;
+
+declare const TrashIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
+
+declare const AlertTriangleIcon$1: ({ size, color, ...styledProps }: IconProps) => ReactElement;
+
+declare const AlertTriangleIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
+
+declare const CheckCircleIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
+
+declare const MinusIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
+
+declare const TrendingUpIcon: IconComponent;
+
+declare const TrendingDownIcon: IconComponent;
+
+declare const UsersIcon: IconComponent;
+
+declare const HelpCircleIcon: IconComponent;
+
+declare const ExternalLinkIcon: IconComponent;
+
+declare const MailIcon: IconComponent;
+
+declare const AlertCircleIcon: IconComponent;
+
+declare const AlertOnlyIcon: IconComponent;
+
+declare const QRCodeIcon: IconComponent;
+
+declare const BellIcon: IconComponent;
+
+declare const BellOffIcon: IconComponent;
+
+declare const BookmarkIcon: IconComponent;
+
+declare const CheckSquareIcon: IconComponent;
+
+declare const ClipboardIcon: IconComponent;
+
+declare const CommandIcon: IconComponent;
+
+declare const CopyIcon: IconComponent;
+
+declare const CropIcon: IconComponent;
+
+declare const CutIcon: IconComponent;
+
+declare const DownloadCloudIcon: IconComponent;
+
+declare const EditInlineIcon: IconComponent;
+
+declare const EditComposeIcon: IconComponent;
+
+declare const FileIcon: IconComponent;
+
+declare const FilePlusIcon: IconComponent;
+
+declare const FileMinusIcon: IconComponent;
+
+declare const FilterIcon: IconComponent;
+
+declare const FlagIcon: IconComponent;
+
+declare const FolderIcon: IconComponent;
+
+declare const GlobeIcon: IconComponent;
+
+declare const HashIcon: IconComponent;
+
+declare const HeartIcon: IconComponent;
+
+declare const LogInIcon: IconComponent;
+
+declare const LogOutIcon: IconComponent;
+
+declare const MaximizeIcon: IconComponent;
+
+declare const FullScreenEnterIcon: IconComponent;
+
+declare const FullScreenExitIcon: IconComponent;
+
+declare const MenuIcon: IconComponent;
+
+declare const MicIcon: IconComponent;
+
+declare const MicOffIcon: IconComponent;
+
+declare const MinimizeIcon: IconComponent;
+
+declare const MinusSquareIcon: IconComponent;
+
+declare const MinusCircleIcon: IconComponent;
+
+declare const MoreVerticalIcon: IconComponent;
+
+declare const MoreHorizontalIcon: IconComponent;
+
+declare const MoveIcon: IconComponent;
+
+declare const PauseCircleIcon: IconComponent;
+
+declare const PlayIcon: IconComponent;
+
+declare const PlayCircleIcon: IconComponent;
+
+declare const PlusCircleIcon: IconComponent;
+
+declare const PlusSquareIcon: IconComponent;
+
+declare const PowerIcon: IconComponent;
+
+declare const RefreshIcon: IconComponent;
+
+declare const RepeatIcon: IconComponent;
+
+declare const RotateClockWiseIcon: IconComponent;
+
+declare const RotateCounterClockWiseIcon: IconComponent;
+
+declare const SaveIcon: IconComponent;
+
+declare const ShareIcon: IconComponent;
+
+declare const ExportIcon: IconComponent;
+
+declare const ShoppingCartIcon: IconComponent;
+
+declare const StopCircleIcon: IconComponent;
+
+declare const SunIcon: IconComponent;
+
+declare const ToggleLeftIcon: IconComponent;
+
+declare const ToggleRightIcon: IconComponent;
+
+declare const ListIcon: IconComponent;
+
+declare const StarIcon: IconComponent;
+
+declare const SlidersIcon: IconComponent;
+
+declare const PaperclipIcon: IconComponent;
+
+declare const UploadCloudIcon: IconComponent;
+
+declare const TargetIcon: IconComponent;
+
+declare const UnlockIcon: IconComponent;
+
+declare const ThumbsUpIcon: IconComponent;
+
+declare const ThumbsDownIcon: IconComponent;
+
+declare const UploadIcon: IconComponent;
+
+declare const VideoIcon: IconComponent;
+
+declare const XSquareIcon: IconComponent;
+
+declare const XCircleIcon: IconComponent;
+
+declare const ZapIcon: IconComponent;
+
+declare const ZoomOutIcon: IconComponent;
+
+declare const ZoomInIcon: IconComponent;
+
+declare const AlignJustifyIcon: IconComponent;
+
+declare const AlignRightIcon: IconComponent;
+
+declare const AlignLeftIcon: IconComponent;
+
+declare const AlignCenterIcon: IconComponent;
+
+declare const AnchorIcon: IconComponent;
+
+declare const BoldIcon: IconComponent;
+
+declare const ScissorsIcon: IconComponent;
+
+declare const DeleteIcon: IconComponent;
+
+declare const GridIcon: IconComponent;
+
+declare const ImageIcon: IconComponent;
+
+declare const InboxIcon: IconComponent;
+
+declare const ItalicIcon: IconComponent;
+
+declare const TypeIcon: IconComponent;
+
+declare const UnderlineIcon: IconComponent;
+
+declare const FilmIcon: IconComponent;
+
+declare const AirplayIcon: IconComponent;
+
+declare const AtSignIcon: IconComponent;
+
+declare const BluetoothIcon: IconComponent;
+
+declare const CameraIcon: IconComponent;
+
+declare const CameraOffIcon: IconComponent;
+
+declare const CastIcon: IconComponent;
+
+declare const MessageCircleIcon: IconComponent;
+
+declare const MessageSquareIcon: IconComponent;
+
+declare const PhoneCallIcon: IconComponent;
+
+declare const PhoneIcon: IconComponent;
+
+declare const PhoneOutgoingIcon: IconComponent;
+
+declare const PhoneOffIcon: IconComponent;
+
+declare const PhoneMissedIcon: IconComponent;
+
+declare const PhoneIncomingIcon: IconComponent;
+
+declare const PhoneForwardedIcon: IconComponent;
+
+declare const RadioIcon: IconComponent;
+
+declare const VideoOffIcon: IconComponent;
+
+declare const VoicemailIcon: IconComponent;
+
+declare const WifiIcon: IconComponent;
+
+declare const WifiOffIcon: IconComponent;
+
+declare const ApertureIcon: IconComponent;
+
+declare const AwardIcon: IconComponent;
+
+declare const BoxIcon: IconComponent;
+
+declare const BriefcaseIcon: IconComponent;
+
+declare const ChromeIcon: IconComponent;
+
+declare const CircleIcon: IconComponent;
+
+declare const CrosshairIcon: IconComponent;
+
+declare const DiscIcon: IconComponent;
+
+declare const DropletIcon: IconComponent;
+
+declare const FeatherIcon: IconComponent;
+
+declare const LayersIcon: IconComponent;
+
+declare const LayoutIcon: IconComponent;
+
+declare const SidebarIcon: IconComponent;
+
+declare const SquareIcon: IconComponent;
+
+declare const TriangleIcon: IconComponent;
+
+declare const LifeBuoyIcon: IconComponent;
+
+declare const LoaderIcon: IconComponent;
+
+declare const OctagonIcon: IconComponent;
+
+declare const PackageIcon: IconComponent;
+
+declare const PercentIcon: IconComponent;
+
+declare const ShieldIcon: IconComponent;
+
+declare const UmbrellaIcon: IconComponent;
+
+declare const WindIcon: IconComponent;
+
+declare const ArrowUpLeftIcon: IconComponent;
+
+declare const ArrowDownRightIcon: IconComponent;
+
+declare const ArrowDownLeftIcon: IconComponent;
+
+declare const ChevronsRightIcon: IconComponent;
+
+declare const ChevronsLeftIcon: IconComponent;
+
+declare const ChevronsDownIcon: IconComponent;
+
+declare const ChevronsUpIcon: IconComponent;
+
+declare const CornerUpRightIcon: IconComponent;
+
+declare const CornerDownLeftIcon: IconComponent;
+
+declare const CornerRightUpIcon: IconComponent;
+
+declare const CornerRightDownIcon: IconComponent;
+
+declare const CornerLeftUpIcon: IconComponent;
+
+declare const CornerDownRightIcon: IconComponent;
+
+declare const CornerUpLeftIcon: IconComponent;
+
+declare const CornerLeftDownIcon: IconComponent;
+
+declare const FastForwardIcon: IconComponent;
+
+declare const HeadphonesIcon: IconComponent;
+
+declare const MusicIcon: IconComponent;
+
+declare const RewindIcon: IconComponent;
+
+declare const SkipBackIcon: IconComponent;
+
+declare const SkipForwardIcon: IconComponent;
+
+declare const VolumeIcon: IconComponent;
+
+declare const VolumeMuteIcon: IconComponent;
+
+declare const VolumeLowIcon: IconComponent;
+
+declare const VolumeHighIcon: IconComponent;
+
+declare const CalendarIcon: IconComponent;
+
+declare const ClockIcon: IconComponent;
+
+declare const CloudIcon: IconComponent;
+
+declare const CloudDrizzleIcon: IconComponent;
+
+declare const CloudSnowIcon: IconComponent;
+
+declare const CloudOffIcon: IconComponent;
+
+declare const CloudLightningIcon: IconComponent;
+
+declare const MoonIcon: IconComponent;
+
+declare const SunsetIcon: IconComponent;
+
+declare const SunriseIcon: IconComponent;
+
+declare const WatchIcon: IconComponent;
+
+declare const CloudRainIcon: IconComponent;
+
+declare const BatteryChargingIcon: IconComponent;
+
+declare const BatteryIcon: IconComponent;
+
+declare const CpuIcon: IconComponent;
+
+declare const MonitorIcon: IconComponent;
+
+declare const PrinterIcon: IconComponent;
+
+declare const ServerIcon: IconComponent;
+
+declare const SmartphoneIcon: IconComponent;
+
+declare const SpeakerIcon: IconComponent;
+
+declare const TabletIcon: IconComponent;
+
+declare const ThermometerIcon: IconComponent;
+
+declare const TvIcon: IconComponent;
+
+declare const CodepenIcon: IconComponent;
+
+declare const FacebookIcon: IconComponent;
+
+declare const GitlabIcon: IconComponent;
+
+declare const GithubIcon: IconComponent;
+
+declare const InstagramIcon: IconComponent;
+
+declare const PocketIcon: IconComponent;
+
+declare const SlackIcon: IconComponent;
+
+declare const TwitterIcon: IconComponent;
+
+declare const UserCheckIcon: IconComponent;
+
+declare const UserXIcon: IconComponent;
+
+declare const UserPlusIcon: IconComponent;
+
+declare const UserMinusIcon: IconComponent;
+
+declare const ActivityIcon: IconComponent;
+
+declare const BarChartIcon: IconComponent;
+
+declare const BarChartAltIcon: IconComponent;
+
+declare const PieChartIcon: IconComponent;
+
+declare const CompassIcon: IconComponent;
+
+declare const MapIcon: IconComponent;
+
+declare const MapPinIcon: IconComponent;
+
+declare const NavigationIcon: IconComponent;
+
+declare const DollarsIcon: IconComponent;
+
+declare const RupeesIcon: IconComponent;
+
+declare const DashboardIcon: IconComponent;
+
+declare const InvoicesIcon: IconComponent;
+
+declare const PaymentLinksIcon: IconComponent;
+
+declare const PaymentButtonsIcon: IconComponent;
+
+declare const PaymentPagesIcon: IconComponent;
+
+declare const RoutesIcon: IconComponent;
+
+declare const SubscriptionsIcon: IconComponent;
+
+declare const SmartCollectIcon: IconComponent;
+
+declare const CustomersIcon: IconComponent;
+
+declare const OffersIcon: IconComponent;
+
+declare const ReportsIcon: IconComponent;
+
+declare const MyAccountIcon: IconComponent;
+
+declare const RazorpayIcon: IconComponent;
+
+declare const RazorpayXIcon: IconComponent;
+
+declare const BookIcon: IconComponent;
+
+declare const SettlementsIcon: IconComponent;
+
+declare const ShuffleIcon: IconComponent;
+
+declare const TagIcon: IconComponent;
+
+declare const UserIcon: IconComponent;
+
+declare const TransactionsIcon: IconComponent;
+
+declare const AnnouncementIcon: IconComponent;
+
+declare const AppStoreIcon: IconComponent;
+
+declare const CoinsIcon: IconComponent;
+
+declare const BillIcon: IconComponent;
+
+declare const StampIcon: IconComponent;
+
+declare const MenuDotsIcon: IconComponent;
+
+declare const SendIcon: IconComponent;
+
+declare const MailOpenIcon: IconComponent;
+
+declare const BulkPayoutsIcon: IconComponent;
+
+declare type FeedbackIconColors = `feedback.icon.${DotNotationColorStringToken<Theme$1['colors']['feedback']['icon']>}`;
+declare type FeedbackActionIconColors = `feedback.${Feedback}.action.icon.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['icon']>}`;
+declare type ActionIconColors = `action.icon.${DotNotationColorStringToken<Theme$1['colors']['action']['icon']>}`;
+declare type TextIconColors = `surface.text.${DotNotationColorStringToken<Theme$1['colors']['surface']['text']>}`;
+declare type SurfaceActionIconColors = `surface.action.icon.${DotNotationColorStringToken<Theme$1['colors']['surface']['action']['icon']>}`;
+declare type BadgeIconColors = `badge.icon.${DotNotationColorStringToken<Theme$1['colors']['badge']['icon']>}`;
+declare type IconSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
+declare type IconProps = {
+    /**
+     * Color token (not to be confused with actual hsla value)
+     */
+    color: ActionIconColors | SurfaceActionIconColors | FeedbackIconColors | FeedbackActionIconColors | TextIconColors | BadgeIconColors | 'currentColor';
+    size: IconSize;
+} & StyledPropsBlade;
+declare type IconComponent = React.ComponentType<IconProps>;
+
+/**
+ * Similar to `Pick` except this returns `never` when value doesn't exist (native `Pick` returns `unknown`).
+ *
+ * You might have to ts-ignore the non-existing type error while using this. This is done so that you can get jsdoc from actual type.
+ *
+ * E.g. This will pick from ViewStyle prop if value exists else returns undefined.
+ *
+ * ```ts
+ * // @ts-expect-error: T passed here may not neccessarily exist. We return `never` type when it doesn't
+ * native: PickIfExist<ViewStyle, T>;
+ * ```
+ */
+declare type PickIfExist<T, K extends keyof T> = {
+    [P in K]: P extends keyof T ? T[P] : never;
+};
+/**
+ * Picks the types based on the platform (web / native).
+ *
+ * E.g.
+ * ```ts
+ * type CSSObject = PickCSSByPlatform<'display'>
+ * // On Web --> This will be all possible web display properties like `block`, `flex`, `inline`, and more.
+ * // On Native --> This will be just `flex` and `none`
+ * ```
+ */
+declare type PickCSSByPlatform<T extends keyof React__default.CSSProperties | keyof ViewStyle> = Platform.Select<{
+    web: PickIfExist<CSSObject, T>;
+    native: PickIfExist<ViewStyle, T>;
+}>;
+
+declare type FormInputLabelProps = {
+    /**
+     * Label to be shown for the input field
+     */
+    label: string;
+    /**
+     * Desktop only prop. Default value on mobile will be `top`
+     */
+    labelPosition?: 'left' | 'top';
+    /**
+     * Displays `(optional)` when `optional` is passed or `*` when `required` is passed
+     */
+    necessityIndicator?: 'required' | 'optional' | 'none';
+};
+
+declare type FormInputOnEvent = ({ name, value }: {
+    name?: string;
+    value?: string;
+}) => void;
+declare type FormInputValidationProps = {
+    /**
+     * Help text for the input
+     */
+    helpText?: string;
+    /**
+     * Error text for the input
+     *
+     * Renders when `validationState` is set to 'error'
+     */
+    errorText?: string;
+    /**
+     * success text for the input
+     *
+     * Renders when `validationState` is set to 'success'
+     */
+    successText?: string;
+    /**
+     * If `error`, the input is marked as invalid,
+     * and `invalid` attribute will be added
+     *
+     * If `success`, the input is marked as valid,
+     *
+     */
+    validationState?: 'success' | 'error' | 'none';
+};
+
+type FormInputHandleOnKeyDownEvent = ({
+  name,
+  key,
+  code,
+  event,
+}: FormInputOnKeyDownEvent) => void;
+
+type FormInputOnKeyDownEvent = {
+  name?: string;
+  key?: string;
+  code?: string;
+  event: KeyboardEvent<HTMLInputElement>;
+};
+
+declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
+    /**
+     * Determines if it needs to be rendered as input, textarea or button
+     */
+    as?: 'input' | 'textarea' | 'button';
+    /**
+     * ID that will be used for accessibility
+     */
+    id: string;
+    /**
+     * Placeholder text to be displayed inside the input field
+     */
+    placeholder?: string;
+    /**
+     * Type of Input Field to be rendered.
+     *
+     * @default text
+     */
+    type?: 'text' | 'telephone' | 'email' | 'url' | 'number' | 'search' | 'password';
+    /**
+     * Used to set the default value of input field when it's uncontrolled
+     */
+    defaultValue?: string;
+    /**
+     * The name of the input field.
+     *
+     * Useful in form submissions
+     */
+    name?: string;
+    /**
+     * The callback function to be invoked when the input field gets focus
+     */
+    onFocus?: FormInputOnEvent;
+    /**
+     * The callback function to be invoked when the value of the input field changes
+     */
+    onChange?: FormInputOnEvent;
+    /**
+     * The callback function to be invoked when input is clicked
+     */
+    onClick?: FormInputOnEvent;
+    /**
+     * The callback function to be invoked when the value of the input field has any input
+     */
+    onInput?: FormInputOnEvent;
+    /**
+     * The callback function to be invoked whenever there is a keyDown event
+     */
+    onKeyDown?: FormInputHandleOnKeyDownEvent;
+    /**
+     * The callback function to be invoked when the the input field loses focus
+     *
+     * For React Native this will call `onEndEditing` event since we want to get the last value of the input field
+     */
+    onBlur?: FormInputOnEvent;
+    /**
+     * Ignores the blur event animation (Used in Select to ignore blur animation when item in option is clicked)
+     */
+    shouldIgnoreBlurAnimation?: boolean;
+    /**
+     * Used to turn the input field to controlled so user can control the value
+     */
+    value?: string;
+    /**
+     * Used to disable the input field
+     */
+    isDisabled?: boolean;
+    /**
+     * If true, the input is marked as required, and `required` attribute will be added
+     */
+    isRequired?: boolean;
+    /**
+     * Icon to be shown at the start of the input field
+     */
+    leadingIcon?: IconComponent$1;
+    /**
+     * Prefix symbol to be displayed at the beginning of the input field. If leadingIcon is provided it'll be placed after it
+     */
+    prefix?: string;
+    /**
+     * Element to be rendered before suffix. This is decided by the component which is extending BaseInput
+     *
+     * eg: consumers can render a loader or they could render a clear button
+     */
+    interactionElement?: ReactNode;
+    /**
+     * Suffix symbol to be displayed at the end of the input field. If trailingIcon is provided it'll be placed before it
+     */
+    suffix?: string;
+    /**
+     * Icon to be displayed at the end of the input field
+     */
+    trailingIcon?: IconComponent$1;
+    /**
+     * Displays the character counter under the input field
+     */
+    maxCharacters?: number;
+    /**
+     * alignment of the text inside input field
+     */
+    textAlign?: 'left' | 'center' | 'right';
+    /**
+     * If true, focuses the input field on load
+     *
+     * **Note:**
+     * Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments.
+     * When autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.
+     */
+    autoFocus?: boolean;
+    /**
+     * Hints the platform to display an appropriate virtual keyboard
+     *
+     * **Native:** Passes as is the `keyboardType` attribute
+     *
+     * **Web:** Passes the value to the `inputMode` attribute
+     */
+    keyboardType?: 'text' | 'search' | 'telephone' | 'email' | 'url' | 'decimal';
+    /**
+     * determines what return key to show on the keyboard of mobile devices/virtual keyboard
+     * **Note**: Few values are platform dependent and might not render on all the platforms
+     *
+     * `default` is only available on native. it'll be mapped to `enter` for web
+     * `previous` is only available on native android
+     */
+    keyboardReturnKeyType?: 'default' | 'go' | 'done' | 'next' | 'previous' | 'search' | 'send';
+    /**
+     * determines what autoComplete suggestion type to show
+     *
+     * Internally it'll render platform specific attributes:
+     *
+     * - web: `autocomplete`
+     * - iOS: `textContentType`
+     * - android: `autoComplete`
+     *
+     */
+    autoCompleteSuggestionType?: 'none' | 'name' | 'email' | 'username' | 'password' | 'newPassword' | 'oneTimeCode' | 'telephone' | 'postalCode' | 'countryName' | 'creditCardNumber' | 'creditCardCSC' | 'creditCardExpiry' | 'creditCardExpiryMonth' | 'creditCardExpiryYear';
+    /**
+     * Element to be rendered on the trailing slot of input field label
+     */
+    trailingHeaderSlot?: (value?: string) => ReactNode;
+    /**
+     * Element to be rendered on the trailing slot of input field footer
+     */
+    trailingFooterSlot?: (value?: string) => ReactNode;
+    /**
+     * Sets the textarea's number of lines
+     */
+    numberOfLines?: 2 | 3 | 4 | 5;
+    /**
+     * Sets the accessibility label for the input
+     */
+    accessibilityLabel?: string;
+    /**
+     * Sets the id of the label
+     *
+     * (Useful when assigning one label to multiple elements using aria-labelledby)
+     */
+    labelId?: string;
+    /**
+     * Can be used in select to set the id of the active descendant from the listbox
+     */
+    activeDescendant?: string;
+    /**
+     * Hides the label text
+     */
+    hideLabelText?: boolean;
+    /**
+     * Hides the form hint text
+     */
+    hideFormHint?: boolean;
+    /**
+     * componentName prop sets the data-blade-component attribute name
+     * for internal metric collection purposes
+     */
+    componentName?: string;
+    /**
+     * whether the input has a popup
+     */
+    hasPopup?: AriaAttributes['hasPopup'];
+    /**
+     * id of the popup
+     */
+    popupId?: string;
+    /**
+     * true if popup is in expanded state
+     */
+    isPopupExpanded?: boolean;
+    /**
+     * sets the autocapitalize behavior for the input
+     */
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+} & TestID & Platform.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' | 'onSubmit' | 'autoCapitalize' | 'testID'> & {
+    /**
+     * Decides whether to render a clear icon button
+     */
+    showClearButton?: boolean;
+    /**
+     * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
+     */
+    onClearButtonClick?: () => void;
+    /**
+     * Decides whether to show a loading spinner for the input field.
+     */
+    isLoading?: boolean;
+    /**
+     * Icon that will be rendered at the beginning of the input field
+     */
+    icon?: IconComponent$1;
+    /**
+     * Type of Input Field to be rendered. Use `PasswordInput` for type `password`
+     *
+     *
+     * **Note on number type**
+     *
+     * `type="number"` internally uses `inputMode="numeric"` instead of HTML's `type="number"` which also allows text characters.
+     * If you have a usecase where you only want to support number input, you can handle it on validations end.
+     *
+     * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning
+     *
+     * @default text
+     */
+    type?: Type;
+} & StyledPropsBlade;
+declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "name" | "placeholder" | "label" | "value" | "prefix" | "defaultValue" | "autoCapitalize" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
+    /**
+     * Decides whether to render a clear icon button
+     */
+    showClearButton?: boolean | undefined;
+    /**
+     * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
+     */
+    onClearButtonClick?: (() => void) | undefined;
+    /**
+     * Decides whether to show a loading spinner for the input field.
+     */
+    isLoading?: boolean | undefined;
+    /**
+     * Icon that will be rendered at the beginning of the input field
+     */
+    icon?: IconComponent$1 | undefined;
+    /**
+     * Type of Input Field to be rendered. Use `PasswordInput` for type `password`
+     *
+     *
+     * **Note on number type**
+     *
+     * `type="number"` internally uses `inputMode="numeric"` instead of HTML's `type="number"` which also allows text characters.
+     * If you have a usecase where you only want to support number input, you can handle it on validations end.
+     *
+     * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning
+     *
+     * @default text
+     */
+    type?: Type;
+} & Partial<Omit<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;
+    flex: string | number;
+} & PickIfExist<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
+    __brand__?: "platform-native" | undefined;
+}>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & PickIfExist<react_native.ViewStyle, "position" | "zIndex"> & {
+    __brand__?: "platform-native" | undefined;
+}> & Pick<MakeObjectResponsive<PickCSSByPlatform<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">>, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
+
+declare type PasswordInputExtraProps = {
+    /**
+     * Shows a reveal button to toggle password visibility
+     *
+     * @default true
+     */
+    showRevealButton?: boolean;
+    /**
+     * Displays asterisk (`*`) when `isRequired` is enabled
+     *
+     * @default none
+     */
+    necessityIndicator?: Exclude<BaseInputProps['necessityIndicator'], 'optional'>;
+    /**
+     * Determines what autoComplete suggestion type to show. Defaults to using platform heuristics.
+     *
+     * It's not recommended to turn this off in favor of safe password practices.
+     * Providing `password` or `newPassword` is more informative to the platform for browser autofill or password managers.
+     *
+     * **Note**: Using `newPassword` on iOS has some [known issue](https://github.com/facebook/react-native/issues/21911) on React Native
+     *
+     * Internally it'll render platform specific attributes:
+     *
+     * - web: `autocomplete`
+     * - iOS: `textContentType`
+     * - android: `autoComplete`
+     *
+     */
+    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' | 'onSubmit' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID'> & PasswordInputExtraProps & StyledPropsBlade;
+declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "name" | "placeholder" | "label" | "value" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "successText" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<Omit<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;
+    flex: string | number;
+} & PickIfExist<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
+    __brand__?: "platform-native" | undefined;
+}>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & PickIfExist<react_native.ViewStyle, "position" | "zIndex"> & {
+    __brand__?: "platform-native" | undefined;
+}> & Pick<MakeObjectResponsive<PickCSSByPlatform<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">>, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & 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
+     */
+    showClearButton?: boolean;
+    /**
+     * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
+     */
+    onClearButtonClick?: () => void;
+} & StyledPropsBlade;
+declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "name" | "placeholder" | "label" | "value" | "numberOfLines" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "maxCharacters"> & {
+    /**
+     * Decides whether to render a clear icon button
+     */
+    showClearButton?: boolean | undefined;
+    /**
+     * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
+     */
+    onClearButtonClick?: (() => void) | undefined;
+} & Partial<Omit<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;
+    flex: string | number;
+} & PickIfExist<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
+    __brand__?: "platform-native" | undefined;
+}>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & PickIfExist<react_native.ViewStyle, "position" | "zIndex"> & {
+    __brand__?: "platform-native" | undefined;
+}> & Pick<MakeObjectResponsive<PickCSSByPlatform<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">>, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
+
+declare type FormInputOnEventWithIndex = ({ name, value, inputIndex, }: {
+    name?: string;
+    value?: string;
+    inputIndex: number;
+}) => void;
+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
+     */
+    otpLength?: 4 | 6;
+    /**
+     * The callback function to be invoked when all the values of the OTPInput are filled
+     */
+    onOTPFilled?: FormInputOnEvent;
+    /**
+     * Masks input characters in all the fields
+     */
+    isMasked?: boolean;
+    /**
+     * Determines what autoComplete suggestion type to show. Defaults to `oneTimeCode`.
+     *
+     * It's not recommended to turn this off in favor of otp input practices.
+     *
+     *
+     * Internally it'll render platform specific attributes:
+     *
+     * - web: `autocomplete`
+     * - iOS: `textContentType`
+     * - android: `autoComplete`
+     *
+     */
+    autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'oneTimeCode'>;
+    /**
+     * The callback function to be invoked when one of the input fields gets focus
+     */
+    onFocus?: FormInputOnEventWithIndex;
+    /**
+     * The callback function to be invoked when one of the input fields is blurred
+     */
+    onBlur?: FormInputOnEventWithIndex;
+} & StyledPropsBlade;
+/**
+ * OTPInput component can be used for accepting OTPs sent to users for authentication/verification purposes.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ *   <OTPInput
+ *     label="Enter OTP"
+ *     name="otpInput"
+ *     onChange={({ name, value }): void => console.log({ name, value })}
+ *     onOTPFilled={({ name, value }): void => console.log({ name, value })}
+ *   />
+ * ```
+ */
+declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onFocus, onBlur, 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' | 'testID'> & {
+    icon?: IconComponent$1;
+    /**
+     * Controlled value of the Select. Use it in combination of `onChange`.
+     *
+     * Check out [Controlled Dropdown Documentation](https://blade.razorpay.com/?path=/story/components-dropdown-with-select--controlled-dropdown&globals=measureEnabled:false) for example.
+     */
+    value?: string | string[];
+    /**
+     * Used to set the default value of SelectInput when it's uncontrolled. Use `value` instead for controlled SelectInput
+     */
+    defaultValue?: string | string[];
+    onChange?: ({ name, values }: {
+        name?: string;
+        values: string[];
+    }) => void;
+};
+/**
+ * ### SelectInput
+ *
+ * Our equivalent of `<select>` tag. Lets you select items from given options.
+ *
+ * To be used in combination of `Dropdown` and `ActionList` component
+ *
+ * ---
+ *
+ * #### Usage
+ *
+ * ```diff
+ * <Dropdown>
+ * + <SelectInput label="Select Fruits" />
+ *   <DropdownOverlay>
+ *     <ActionList>
+ *       <ActionListItem title="Mango" value="mango" />
+ *       <ActionListItem title="Apple" value="apple" />
+ *     </ActionList>
+ *   </DropdownOverlay>
+ * </Dropdown>
+ * ```
+ *
+ * ---
+ *
+ * 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, "testID" | "name" | "placeholder" | "label" | "prefix" | "onFocus" | "onBlur" | "onClick" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix"> & {
+    icon?: IconComponent$1 | undefined;
+    /**
+     * Controlled value of the Select. Use it in combination of `onChange`.
+     *
+     * Check out [Controlled Dropdown Documentation](https://blade.razorpay.com/?path=/story/components-dropdown-with-select--controlled-dropdown&globals=measureEnabled:false) for example.
+     */
+    value?: string | string[] | undefined;
+    /**
+     * Used to set the default value of SelectInput when it's uncontrolled. Use `value` instead for controlled SelectInput
+     */
+    defaultValue?: string | string[] | undefined;
+    onChange?: (({ name, values }: {
+        name?: string | undefined;
+        values: string[];
+    }) => void) | undefined;
+} & React__default.RefAttributes<BladeElementRef>>;
+
+declare type IndicatorCommonProps = {
+    /**
+     * Sets the color tone
+     *
+     * @default neutral
+     */
+    intent?: Feedback;
+    /**
+     * Size of the indicator
+     *
+     * @default medium
+     */
+    size?: 'small' | 'medium' | 'large';
+} & TestID & StyledPropsBlade;
+declare type IndicatorWithoutA11yLabel = {
+    /**
+     * A text label to show alongside the indicator dot
+     */
+    children: StringChildrenType;
+    /**
+     * a11y label for screen readers
+     */
+    accessibilityLabel?: string;
+};
+declare type IndicatorWithA11yLabel = {
+    /**
+     * a11y label for screen readers
+     */
+    accessibilityLabel: string;
+    /**
+     * A text label to show alongside the indicator dot
+     */
+    children?: StringChildrenType;
+};
+declare type IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);
+declare const Indicator: ({ accessibilityLabel, children, size, intent, testID, ...styledProps }: IndicatorProps) => ReactElement;
+
+declare type ListItemProps = {
+    /**
+     * Children to be rendered for ListItem. This can be a text, ListItemLink or another List.
+     *
+     */
+    children: React__default.ReactNode;
+    /**
+     * Icon to be rendered for a ListItem's bullet.
+     *
+     */
+    icon?: IconComponent;
+    /**
+     * This is a private prop to be used only for internal logic purposes.
+     *
+     */
+    _itemNumber?: undefined;
+} & TestID;
+declare const ListItem: ({ children, icon, _itemNumber, testID, }: ListItemProps) => React__default.ReactElement;
+
+declare type ListCommonProps = {
+    /**
+     * ListItem to be rendered for the List.
+     *
+     */
+    children: React__default.ReactElement<ListItemProps> | React__default.ReactElement<ListItemProps>[];
+    /**
+     * Sets the variant to be rendered for the List.
+     *
+     * @default 'unordered'
+     */
+    variant?: 'unordered' | 'ordered' | 'ordered-filled';
+    /**
+     * Sets the size for the List.
+     *
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+} & TestID & StyledPropsBlade;
+declare type ListWithIconProps = ListCommonProps & {
+    variant?: 'unordered';
+    icon?: IconComponent;
+};
+declare type ListWithoutIconProps = ListCommonProps & {
+    variant?: 'ordered' | 'ordered-filled';
+    icon?: undefined;
+};
+declare type ListProps = ListWithIconProps | ListWithoutIconProps;
+declare const List: ({ variant, size, children, icon, testID, ...styledProps }: ListProps) => React__default.ReactElement;
+
+declare type ListItemLinkProps = Exclude<LinkProps, 'size' | 'variant' | 'isDisabled'>;
+declare const ListItemLink: ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, testID, }: ListItemLinkProps) => React.ReactElement;
+
+declare type TitleProps = {
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    contrast?: ColorContrastTypes;
+    type?: TextTypes;
+    children: StringChildrenType;
+} & TestID & StyledPropsBlade;
+declare const Title: ({ size, type, contrast, children, testID, ...styledProps }: TitleProps) => ReactElement;
+
+declare type HeadingVariant = 'regular' | 'subheading';
+declare type HeadingSize = 'small' | 'medium' | 'large';
+declare type HeadingCommonProps = {
+    type?: TextTypes;
+    contrast?: ColorContrastTypes;
+    children: StringChildrenType;
+} & TestID & StyledPropsBlade;
+declare type HeadingNormalVariant = HeadingCommonProps & {
+    variant?: Exclude<HeadingVariant, 'subheading'>;
+    /**
+     *
+     * @default small
+     */
+    size?: HeadingSize;
+    weight?: keyof Theme$1['typography']['fonts']['weight'];
+};
+declare type HeadingSubHeadingVariant = HeadingCommonProps & {
+    variant?: Extract<HeadingVariant, 'subheading'>;
+    /**
+     * `size` cannot be used with variant="subheading". Either change to variant="regular" or remove size prop
+     */
+    size?: undefined;
+    weight?: keyof Pick<Theme$1['typography']['fonts']['weight'], 'bold'>;
+};
+/**
+ * Conditionally changing props based on variant.
+ * Overloads or union gives wrong intellisense.
+ */
+declare type HeadingProps<T> = T extends {
+    variant: infer Variant;
+} ? 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, 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']>}`;
+declare type SurfaceColors = `surface.text.${DotNotationColorStringToken<Theme$1['colors']['surface']['text']>}`;
+declare type ActionColors = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
+declare type BadgeTextColors = `badge.text.${DotNotationColorStringToken<Theme$1['colors']['badge']['text']>}`;
+declare type BaseTextProps = {
+    id?: string;
+    color?: ActionColors | FeedbackColors | SurfaceColors | FeedbackActionColors | BadgeTextColors;
+    fontFamily?: keyof Theme$1['typography']['fonts']['family'];
+    fontSize?: keyof Theme$1['typography']['fonts']['size'];
+    fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
+    fontStyle?: 'italic' | 'normal';
+    textDecorationLine?: 'line-through' | 'none' | 'underline';
+    lineHeight?: keyof Theme$1['typography']['lineHeights'];
+    /**
+     * Web only
+     */
+    as?: 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+    textAlign?: 'center' | 'justify' | 'left' | 'right';
+    truncateAfterLines?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+    accessibilityProps?: Partial<AccessibilityProps>;
+    /**
+     * React Native only
+     */
+    numberOfLines?: number;
+    componentName?: 'text' | 'title' | 'heading' | 'code';
+} & TestID & StyledPropsBlade;
+
+declare type TextCommonProps = {
+    type?: TextTypes;
+    contrast?: ColorContrastTypes;
+    truncateAfterLines?: number;
+    children: React.ReactNode;
+    weight?: keyof Theme$1['typography']['fonts']['weight'];
+    /**
+     * **For Internal use only**:  Sets the color of the Text component
+     */
+    color?: BaseTextProps['color'];
+    textAlign?: BaseTextProps['textAlign'];
+} & TestID & StyledPropsBlade;
+declare type TextVariant = 'body' | 'caption';
+declare type TextBodyVariant = TextCommonProps & {
+    variant?: Extract<TextVariant, 'body'>;
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
+};
+declare type TextCaptionVariant = TextCommonProps & {
+    variant?: Extract<TextVariant, 'caption'>;
+    size?: 'medium';
+};
+/**
+ * Conditionally changing props based on variant.
+ * Overloads or union gives wrong intellisense.
+ */
+declare type TextProps<T> = T extends {
+    variant: infer Variant;
+} ? Variant extends 'caption' ? TextCaptionVariant : Variant extends 'body' ? TextBodyVariant : T : T;
+declare type TextForwardedAs = {
+    forwardedAs?: BaseTextProps['as'];
+};
+declare type GetTextPropsReturn = Omit<BaseTextProps, 'children'> & TextForwardedAs;
+declare type GetTextProps<T extends {
+    variant: TextVariant;
+}> = Pick<TextProps<T>, 'type' | 'variant' | 'weight' | 'size' | 'contrast' | 'testID' | 'textAlign'>;
+declare const getTextProps: <T extends {
+    variant: TextVariant;
+}>({ variant, type, weight, size, contrast, testID, textAlign, }: GetTextProps<T>) => GetTextPropsReturn;
+declare const Text: <T extends {
+    variant: TextVariant;
+}>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, testID, textAlign, ...styledProps }: TextProps<T>) => ReactElement;
+
+declare type CodeProps = {
+    children: StringChildrenType;
+    /**
+     * Decides the fontSize and padding of Code
+     *
+     * @default small
+     */
+    size?: 'small' | 'medium';
+    weight?: 'regular' | 'bold';
+} & TestID & StyledPropsBlade;
+/**
+ * Code component can be used for displaying token, variable names, or inlined code snippets.
+ *
+ * ## Usage
+ *
+ * ### In Web
+ * In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`
+ *
+ * ```tsx
+ * <Text>
+ *  Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text
+ * </Text>
+ * ```
+ *
+ * ### In React Native
+ *
+ * In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned
+ *
+ * ```tsx
+ *  <BaseBox flexWrap="wrap" flexDirection="row" alignItems="flex-start">
+ *   <Text>Lorem ipsum </Text>
+ *   <Code>SENTRY_TOKEN</Code>
+ *   <Text> normal text</Text>
+ * </BaseBox>
+ * ```
+ */
+declare const Code: ({ children, size, weight, testID, ...styledProps }: CodeProps) => JSX.Element;
+
+declare type ListItemCodeProps = Exclude<CodeProps, 'size'>;
+declare const ListItemCode: ({ children, testID }: ListItemCodeProps) => React.ReactElement;
+
+declare type Assertiveness = AriaAttributes['liveRegion'];
+
+declare function announce(message: string, _assertiveness?: Assertiveness): void;
+declare function clearAnnouncer(_assertiveness: Assertiveness): void;
+declare function destroyAnnouncer(): void;
+
+declare type ProgressBarCommonProps = {
+    /**
+     * Sets aria-label to help users know what the progress bar is for. Default value is the same as the `label` passed.
+     */
+    accessibilityLabel?: string;
+    /**
+     * Sets the contrast for the progress bar
+     * @default 'low'
+     */
+    contrast?: ColorContrastTypes;
+    /**
+     * Sets the intent of the progress bar which changes the feedback color.
+     */
+    intent?: Feedback;
+    /**
+     * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.
+     */
+    label?: string;
+    /**
+     * Sets the size of the progress bar.
+     * @default 'small'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Sets the progress value of the progress bar.
+     * @default 'small'
+     */
+    value?: number;
+    /**
+     * Sets the minimum value for the progress bar.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Sets the maximum value for the progress bar.
+     * @default 100
+     */
+    max?: number;
+} & TestID & StyledPropsBlade;
+declare type ProgressBarVariant = 'progress' | 'meter';
+declare type ProgressBarProgressProps = ProgressBarCommonProps & {
+    /**
+     * Sets the variant to be rendered for the progress bar.
+     * @default 'progress'
+     */
+    variant?: Extract<ProgressBarVariant, 'progress'>;
+    /**
+     * Sets whether the progress bar is in an indeterminate state.
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.
+     * @default true
+     */
+    showPercentage?: boolean;
+};
+declare type ProgressBarMeterProps = ProgressBarCommonProps & {
+    /**
+     * Sets the variant to be rendered for thr progress bar.
+     * @default 'progress'
+     */
+    variant?: Extract<ProgressBarVariant, 'meter'>;
+    /**
+     * Sets whether the progress bar is in an indeterminate state.
+     * @default false
+     */
+    isIndeterminate?: undefined;
+    /**
+     * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.
+     * @default false
+     */
+    showPercentage?: undefined;
+};
+declare type ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;
+declare const ProgressBar: ({ accessibilityLabel, contrast, intent, isIndeterminate, label, showPercentage, size, value, variant, min, max, testID, ...styledProps }: ProgressBarProps) => ReactElement;
+
+declare type RadioProps = {
+    /**
+     * Sets the label text of the Radio
+     */
+    children: StringChildrenType;
+    /**
+     * Help text for the Radio
+     */
+    helpText?: string;
+    /**
+     * 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;
+    /**
+     * Size of the radios
+     *
+     * @default "medium"
+     */
+    size?: 'small' | 'medium';
+} & TestID & 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 & Partial<Omit<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;
+    flex: string | number;
+} & PickIfExist$1<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
+    __brand__?: "platform-native" | undefined;
+}>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & PickIfExist$1<react_native.ViewStyle, "position" | "zIndex"> & {
+    __brand__?: "platform-native" | undefined;
+}> & Pick<MakeObjectResponsive<PickCSSByPlatform$1<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">>, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
+
+declare type RadioGroupProps = {
+    /**
+     * Accepts multiple radios as children
+     */
+    children: React__default.ReactNode;
+    /**
+     * Help text of the radio group
+     */
+    helpText?: string;
+    /**
+     * Error text of the radio group
+     * Renders when `validationState` is set to 'error'
+     *
+     * Overrides helpText
+     */
+    errorText?: string;
+    /**
+     * Sets the error state of the radioGroup
+     * If set to `error` it will render the `errorText` of the group,
+     * and propagate `invalid` prop to every radio
+     */
+    validationState?: 'error' | 'none';
+    /**
+     * Renders a necessity indicator after radioGroup label
+     *
+     * If set to `undefined` it renders nothing.
+     */
+    necessityIndicator?: 'required' | 'optional' | 'none';
+    /**
+     * Sets the disabled state of the radioGroup
+     * If set to `true` it propagate down to all the radios
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Renders the label of the radio group
+     */
+    label: string;
+    /**
+     * Sets the position of the label
+     *
+     * @default 'top'
+     */
+    labelPosition?: 'top' | 'left';
+    /**
+     * Initial value of the radio group
+     */
+    defaultValue?: string;
+    /**
+     * value of the radio group
+     *
+     * Use `onChange` to update its value
+     */
+    value?: string;
+    /**
+     * The callback invoked when any of the radio's state changes
+     */
+    onChange?: ({ name, value }: {
+        name: string | undefined;
+        value: string;
+    }) => void;
+    /**
+     * The name of the input field in a radio
+     * (Useful for form submission).
+     */
+    name?: string;
+    /**
+     * Size of the radios
+     *
+     * @default "medium"
+     */
+    size?: 'small' | 'medium';
+} & TestID & 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;
+    /**
+     * Sets the label of the spinner.
+     *
+     * @default 'right'
+     */
+    label?: string;
+    /**
+     * Sets the label of the spinner.
+     *
+     */
+    labelPosition?: 'right' | 'bottom';
+    /**
+     * Sets the contrast of the spinner.
+     *
+     * @default 'low'
+     */
+    contrast?: ColorContrastTypes;
+    /**
+     * Sets the size of the spinner.
+     *
+     * @default 'medium'
+     */
+    size?: 'medium' | 'large' | 'xlarge';
+    /**
+     * Sets the aria-label for web & accessibilityLabel react-native.
+     *
+     */
+    accessibilityLabel: string;
+} & TestID & StyledPropsBlade;
+
+declare type SpinnerProps = Omit<BaseSpinnerProps, 'intent'>;
+declare const Spinner: ({ label, labelPosition, accessibilityLabel, contrast, size, testID, ...styledProps }: SpinnerProps) => React.ReactElement;
+
+declare type SkipNavLinkProps = {
+    id?: string;
+    children?: StringChildrenType;
+};
+declare const SkipNavLink: (_props: SkipNavLinkProps) => never;
+declare const SkipNavContent: (_props: SkipNavLinkProps) => never;
+
+declare type VisuallyHiddenProps = {
+    children: React.ReactNode;
+} & TestID;
+
+declare const VisuallyHidden: ({ children, testID }: VisuallyHiddenProps) => JSX.Element;
+
+/**
+ * Screen reader class adapted from webaim
+ * https://webaim.org/techniques/css/invisiblecontent/#techniques
+ */
+declare const screenReaderStyles: CSSObject;
+
+declare type Currency = 'INR' | 'MYR';
+declare type AmountProps = {
+    /**
+     * The value to be rendered within the component.
+     *
+     */
+    value: number;
+    /**
+     * Sets the intent of the amount.
+     *
+     * @default undefined
+     */
+    intent?: Exclude<Feedback, 'neutral'>;
+    /**
+     * Sets the size of the amount.
+     *
+     * @default 'body-medium'
+     */
+    size?: 'body-medium-bold' | 'body-small' | 'body-small-bold' | 'body-medium' | 'body-medium-bold' | 'heading-small' | 'heading-small-bold' | 'heading-large' | 'heading-large-bold' | 'title-small' | 'title-medium';
+    /**
+     * Indicates what the suffix of amount should be
+     *
+     * @default 'decimals'
+     */
+    suffix?: 'decimals' | 'none' | 'humanize';
+    /**
+     * Makes the prefix symbol and decimal digits small and faded
+     *
+     * @default true
+     */
+    isAffixSubtle?: true | false;
+    /**
+     * Prefix to be shown before the amount value. The prefix can be either a currency symbol or a currency code.
+     *
+     * @default 'currency-symbol'
+     */
+    prefix?: 'currency-symbol' | 'currency-code';
+    /**
+     * The currency of the amount.
+     *
+     * @default 'INR'
+     * */
+    currency?: Currency;
+} & TestID & StyledPropsBlade;
+declare const Amount: ({ value, suffix, size, isAffixSubtle, intent, prefix, testID, currency, ...styledProps }: AmountProps) => ReactElement;
+
+declare type BaseHeaderProps = {
+    title?: string;
+    subtitle?: string;
+    /**
+     * Leading part of the header placed at the left most side of the header
+     */
+    leading?: React__default.ReactNode;
+    /**
+     * Trailing part of the header placed at the right most side of the header
+     */
+    trailing?: React__default.ReactNode;
+    /**
+     * Placed adjacent to the title text
+     */
+    titleSuffix?: React__default.ReactNode;
+    /**
+     * @default true
+     */
+    showDivider?: boolean;
+    /**
+     * @default false
+     */
+    showBackButton?: boolean;
+    /**
+     * @default true
+     */
+    showCloseButton?: boolean;
+    onCloseButtonClick?: () => void;
+    onBackButtonClick?: () => void;
+    closeButtonRef: React__default.MutableRefObject<any>;
+} & Pick<ReactDOMAttributes, 'onClickCapture' | 'onKeyDown' | 'onKeyUp' | 'onLostPointerCapture' | 'onPointerCancel' | 'onPointerDown' | 'onPointerMove' | 'onPointerUp'>;
+
+declare type BaseFooterProps = {
+    children: React__default.ReactNode;
+    showDivider?: boolean;
+};
+
+declare type SnapPoints = [number, number, number];
+
+declare type BottomSheetProps = {
+    children: React.ReactNode;
+    snapPoints?: SnapPoints;
+    onDismiss?: () => void;
+    isOpen?: boolean;
+    initialFocusRef?: React.MutableRefObject<any>;
+};
+declare type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix' | 'showBackButton' | 'onBackButtonClick'>;
+declare type BottomSheetFooterProps = Pick<BaseFooterProps, 'children'>;
+
+declare const BottomSheetHeader: ({ title, subtitle, leading, trailing, titleSuffix, showBackButton, onBackButtonClick, }: BottomSheetHeaderProps) => React__default.ReactElement;
+
+declare const BottomSheetBody: ({ children }: {
+    children: React__default.ReactNode;
+}) => React__default.ReactElement;
+
+declare const BottomSheetFooter: ({ children }: BottomSheetFooterProps) => React__default.ReactElement;
+
+declare const BottomSheet: ({ children, snapPoints, isOpen, onDismiss, initialFocusRef, }: BottomSheetProps) => React__default.ReactElement;
+
+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, Amount, AmountProps, 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, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, 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, DropdownButton, 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, useActionListContext, useTheme };